From cb886c4cda714f4aa982e4c86dee04b346dc6fd1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 15 Nov 2022 12:37:12 +0100
Subject: [PATCH] AppInstall: display app info on install page instead of modal

---
 app/src/components/CardCollapse.vue |  12 +--
 app/src/i18n/locales/en.json        |  58 +++++++-------
 app/src/views/app/AppCatalog.vue    |   2 +-
 app/src/views/app/AppInstall.vue    | 118 ++++++++++++++++++++++------
 4 files changed, 131 insertions(+), 59 deletions(-)

diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index b5b192d5..a9a9b4f8 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -1,13 +1,15 @@
 <template>
   <b-card
     v-bind="$attrs"
-    no-body header-tag="h3" :class="_class"
+    no-body :class="_class"
   >
     <slot name="header" slot="header">
-      <b-button v-b-toggle="id" :variant="variant" class="card-collapse-button">
-        {{ title }}
-        <icon class="ml-auto" iname="chevron-right" />
-      </b-button>
+      <h2>
+        <b-button v-b-toggle="id" :variant="variant" class="card-collapse-button">
+          {{ title }}
+          <icon class="ml-auto" iname="chevron-right" />
+        </b-button>
+      </h2>
     </slot>
 
     <b-collapse :id="id" :visible="visible" role="region">
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 718fbaa8..e940ab97 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -56,39 +56,37 @@
     "api_waiting": "Waiting for the server's response...",
     "app": {
       "antifeatures": "Antifeatures:",
-      "preview": {
-        "before_install": "Things to know before install",
-        "integration": {
-          "archs": "Supported architectures:",
-          "ldap": {
-            "false": "Does not use YunoHost accounts to login (LDAP)",
-            "true": "Use YunoHost accounts to login (LDAP)",
-            "?": "No information about LDAP integration"
-          },
-          "multi_instance": {
-            "false": "Can be installed only once",
-            "true": "Can be installed several times"
-          },
-          "resources": "Typical resource usage: {ram} RAM, {disk} disk",
-          "sso": {
-            "false": "Single sign-on is not available (SSO)",
-            "true": "Single sign-on is available (SSO)",
-            "?": "No information about SSO integration"
-          },
-          "title": "YunoHost integration"
-        },
-        "links": {
-          "admindoc": "Official documentation",
-          "code": "Upstream code repository",
-          "forum": "Topics about this app on YunoHost's forum",
-          "package": "YunoHost package repository",
-          "title": "Links",
-          "website": "Website"
-        },
-        "title": "App details",
+      "install": {
         "try_demo": "Try the demo",
         "version": "Current version: {version}"
       },
+      "integration": {
+        "archs": "Supported architectures:",
+        "ldap": {
+          "false": "Does not use YunoHost accounts to login (LDAP)",
+          "true": "Use YunoHost accounts to login (LDAP)",
+          "?": "No information about LDAP integration"
+        },
+        "multi_instance": {
+          "false": "Can be installed only once",
+          "true": "Can be installed several times"
+        },
+        "resources": "Typical resource usage: {ram} RAM, {disk} disk",
+        "sso": {
+          "false": "Single sign-on is not available (SSO)",
+          "true": "Single sign-on is available (SSO)",
+          "?": "No information about SSO integration"
+        },
+        "title": "YunoHost integration"
+      },
+      "links": {
+        "admindoc": "Official documentation",
+        "code": "Upstream code repository",
+        "forum": "Topics about this app on YunoHost's forum",
+        "package": "YunoHost package repository",
+        "title": "Links",
+        "website": "Website"
+      },
       "potential_alternative_to": "Potential alternative to:"
     },
     "app_choose_category": "Choose a category",
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index d88e2824..0c829cc5 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -75,7 +75,7 @@
       >
         <b-card-body class="d-flex flex-column">
           <b-card-title :id="`${app.id}-title`" class="d-flex mb-2">
-            <b-link v-b-modal.modal-app-info @click="selectedApp = app.id" class="card-link">
+            <b-link :to="{ name: 'app-install', params: { id: app.id }}" class="card-link">
               {{ app.manifest.name }}
             </b-link>
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 8af0d9c0..bcbb03d3 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -1,12 +1,61 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse">
-    <template v-if="infos">
-      <!-- BASIC INFOS -->
-      <card :title="name" icon="download">
-        <description-row
-          v-for="(info, key) in infos" :key="key"
-          :term="$t(key)" :details="info"
-        />
+    <template v-if="app">
+      <card :title="app.name" icon="download" body-class="p-0">
+        <section class="p-3">
+          <p v-if="app.alternativeTo" class="mt-3">
+            <strong v-t="'app.potential_alternative_to'" />
+            {{ app.alternativeTo }}
+          </p>
+
+          <vue-showdown :markdown="app.description" flavor="github" />
+
+          <b-img
+            v-if="app.image"
+            :src="app.image"
+            aria-hidden="true" class="d-block mb-3" fluid
+          />
+
+          <p>{{ $t('app.install.version', { version: app.version }) }}</p>
+
+          <b-button
+            v-if="app.demo"
+            :href="app.demo" variant="primary" target="_blank"
+          >
+            <icon iname="external-link" />
+            {{ $t('app.install.try_demo') }}
+          </b-button>
+        </section>
+
+        <card-collapse id="app-integration" :title="$t('app.integration.title')" flush>
+          <b-list-group flush tag="section">
+            <yuno-list-group-item variant="info">
+              {{ $t('app.integration.archs') }} {{ app.integration.archs }}
+            </yuno-list-group-item>
+            <yuno-list-group-item v-if="app.integration.ldap" :variant="app.integration.ldap === true ? 'success' : 'warning'">
+              {{ $t(`app.integration.ldap.${app.integration.ldap}`) }}
+            </yuno-list-group-item>
+            <yuno-list-group-item v-if="app.integration.sso" :variant="app.integration.sso === true ? 'success' : 'warning'">
+              {{ $t(`app.integration.sso.${app.integration.sso}`) }}
+            </yuno-list-group-item>
+            <yuno-list-group-item variant="info">
+              {{ $t(`app.integration.multi_instance.${app.integration.multi_instance}`) }}
+            </yuno-list-group-item>
+            <yuno-list-group-item variant="info">
+              {{ $t('app.integration.resources', app.integration.resources) }}
+            </yuno-list-group-item>
+          </b-list-group>
+        </card-collapse>
+
+        <card-collapse id="app-links" :title="$t('app.links.title')" flush>
+          <b-list-group flush tag="section">
+            <yuno-list-group-item v-for="[key, link] in app.links" :key="key" no-status>
+              <b-link :href="link" target="_blank">
+                {{ $t('app.links.' + key) }}
+              </b-link>
+            </yuno-list-group-item>
+          </b-list-group>
+        </card-collapse>
       </card>
 
       <!-- INSTALL FORM -->
@@ -25,7 +74,7 @@
     </template>
 
     <!-- In case of a custom url with no manifest found -->
-    <b-alert v-else-if="infos === null" variant="warning">
+    <b-alert v-else-if="app === null" variant="warning">
       <icon iname="exclamation-triangle" /> {{ $t('app_install_custom_no_manifest') }}
     </b-alert>
 
@@ -45,12 +94,17 @@ import {
   formatI18nField,
   formatFormData
 } from '@/helpers/yunohostArguments'
+import CardCollapse from '@/components/CardCollapse'
 
 export default {
   name: 'AppInstall',
 
   mixins: [validationMixin],
 
+  components: {
+    CardCollapse
+  },
+
   props: {
     id: { type: String, required: true }
   },
@@ -60,8 +114,8 @@ export default {
       queries: [
         ['GET', 'apps/manifest?app=' + this.id]
       ],
+      app: undefined,
       name: undefined,
-      infos: undefined,
       form: undefined,
       fields: undefined,
       validations: null,
@@ -75,21 +129,38 @@ export default {
   },
 
   methods: {
-    onQueriesResponse (manifest) {
-      this.name = manifest.name
-      const infosKeys = ['id', 'description', 'license', 'version', 'multi_instance']
-      manifest.license = manifest.upstream.license
-      if (manifest.license === undefined || manifest.license === 'free') {
-        infosKeys.splice(2, 1)
+    onQueriesResponse (_app) {
+      const { id, name, version } = _app
+      const _archs = _app.integration.architectures
+
+      const app = {
+        id,
+        name,
+        alternativeTo: _app.potential_alternative_to && _app.potential_alternative_to.length
+          ? _app.potential_alternative_to.join(this.$i18n.t('words.separator'))
+          : null,
+        description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
+        image: _app.image,
+        demo: _app.upstream.demo,
+        version,
+        integration: {
+          archs: Array.isArray(_archs) ? _archs.join(this.$i18n.t('words.separator')) : _archs,
+          ldap: _app.integration.ldap === 'not_relevant' ? null : _app.integration.ldap,
+          sso: _app.integration.sso === 'not_relevant' ? null : _app.integration.sso,
+          multi_instance: _app.integration.multi_instance,
+          resources: { ram: _app.integration.ram.runtime, disk: _app.integration.disk }
+        },
+        links: [
+          ...['website', 'admindoc', 'code'].map((key) => ([key, _app.upstream[key]])),
+          ['package', _app.remote.url],
+          ['forum', `https://forum.yunohost.org/tag/${id}`]
+        ].filter(([key, val]) => !!val)
       }
-      manifest.description = formatI18nField(manifest.description)
-      manifest.multi_instance = this.$i18n.t(manifest.integration.multi_instance ? 'yes' : 'no')
-      this.infos = Object.fromEntries(infosKeys.map(key => [key, manifest[key]]))
 
       // FIXME yunohost should add the label field by default
-      manifest.install.unshift({
-        ask: this.$t('label_for_manifestname', { name: manifest.name }),
-        default: manifest.name,
+      _app.install.unshift({
+        ask: this.$t('label_for_manifestname', { name }),
+        default: name,
         name: 'label',
         help: this.$t('label_for_manifestname_help')
       })
@@ -99,8 +170,9 @@ export default {
         fields,
         validations,
         errors
-      } = formatYunoHostArguments(manifest.install)
+      } = formatYunoHostArguments(_app.install)
 
+      this.app = app
       this.fields = fields
       this.form = form
       this.validations = { form: validations }
@@ -121,7 +193,7 @@ export default {
       )
       const data = { app: this.id, label, args: Object.entries(args).length ? objectToParams(args) : undefined }
 
-      api.post('apps', data, { key: 'apps.install', name: this.name }).then(() => {
+      api.post('apps', data, { key: 'apps.install', name: this.app.name }).then(() => {
         this.$router.push({ name: 'app-list' })
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err