AppInstall: display app info on install page instead of modal

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">
+      <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">

app/src/i18n/locales/en.json

@@ -56,8 +56,10 @@
     "api_waiting": "Waiting for the server's response...",
     "app": {
       "antifeatures": "Antifeatures:",
-      "preview": {
+      "install": {
-        "before_install": "Things to know before install",
+        "try_demo": "Try the demo",
+        "version": "Current version: {version}"
+      },
       "integration": {
         "archs": "Supported architectures:",
         "ldap": {
@@ -85,10 +87,6 @@
         "title": "Links",
         "website": "Website"
       },
-        "title": "App details",
-        "try_demo": "Try the demo",
-        "version": "Current version: {version}"
-      },
       "potential_alternative_to": "Potential alternative to:"
     },
     "app_choose_category": "Choose a category",

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>
 

app/src/views/app/AppInstall.vue

@@ -1,12 +1,61 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse">
-    <template v-if="infos">
+    <template v-if="app">
-      <!-- BASIC INFOS -->
+      <card :title="app.name" icon="download" body-class="p-0">
-      <card :title="name" icon="download">
+        <section class="p-3">
-        <description-row
+          <p v-if="app.alternativeTo" class="mt-3">
-          v-for="(info, key) in infos" :key="key"
+            <strong v-t="'app.potential_alternative_to'" />
-          :term="$t(key)" :details="info"
+            {{ 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) {
+    onQueriesResponse (_app) {
-      this.name = manifest.name
+      const { id, name, version } = _app
-      const infosKeys = ['id', 'description', 'license', 'version', 'multi_instance']
+      const _archs = _app.integration.architectures
-      manifest.license = manifest.upstream.license
+
-      if (manifest.license === undefined || manifest.license === 'free') {
+      const app = {
-        infosKeys.splice(2, 1)
+        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({
+      _app.install.unshift({
-        ask: this.$t('label_for_manifestname', { name: manifest.name }),
+        ask: this.$t('label_for_manifestname', { name }),
-        default: manifest.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