Misc improvements for app v2 / catalog and app info rework

app/src/i18n/locales/en.json

@@ -55,7 +55,7 @@
     "api_not_responding": "The YunoHost API is not responding. Maybe 'yunohost-api' is down or got restarted?",
     "api_waiting": "Waiting for the server's response...",
     "app": {
-      "antifeatures": "Antifeatures:",
+      "antifeatures": "This app has features you may not like:",
       "doc": {
         "about": {
           "title": "About",

app/src/views/app/AppInfo.vue

@@ -1,7 +1,10 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
     <!-- BASIC INFOS -->
-    <card v-if="infos" :title="infos.label" icon="cube">
+    <card v-if="infos" :title="app.label" icon="cube">
+      <template #header-next>
+        <small class="text-secondary">{{ app.id }}</small>
+      </template>
       <template #header-buttons>
         <b-button @click="uninstall" id="uninstall" variant="danger">
           <icon iname="trash-o" /> {{ $t('uninstall') }}
@@ -15,15 +18,6 @@
         <a v-if="key === 'url'" :href="value" target="_blank">{{ value }}</a>
         <template v-else>{{ value }}</template>
       </description-row>
-      <description-row :term="$t('app_info_access_desc')">
-        {{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
-        <b-button
-          size="sm" :to="{ name: 'group-list'}" variant="info"
-          class="ml-2"
-        >
-          <icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
-        </b-button>
-      </description-row>
 
       <template #footer>
         <b-card-text class="text-warning">
@@ -74,6 +68,21 @@
         </b-form-group>
         <hr>
 
+        <!-- PERMISSIONS -->
+        <b-form-group
+          :label="$t('app_info_access_desc')" label-for="permissions"
+          label-class="font-weight-bold" label-cols-lg="0"
+        >
+          {{ allowedGroups.length > 0 ? allowedGroups.join(', ') : $t('nobody') }}
+          <b-button
+            size="sm" :to="{ name: 'group-list'}" variant="info"
+            class="ml-2"
+          >
+            <icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
+          </b-button>
+        </b-form-group>
+        <hr>
+
         <!-- CHANGE URL -->
         <b-form-group
           :label="$t('app_info_changeurl_desc')" label-for="input-url"
@@ -183,6 +192,7 @@
           <card-collapse
             id="app-integration" :title="$t('app.integration.title')"
             flush visible
+            v-if="packaging_format >= 2"
           >
             <b-list-group flush tag="section">
               <yuno-list-group-item variant="info">
@@ -262,6 +272,7 @@ export default {
         ['GET', { uri: 'domains' }],
         ['GET', `apps/${this.id}/config?full`]
       ],
+      packaging_format: undefined,
       infos: undefined,
       app: undefined,
       form: undefined,
@@ -335,12 +346,10 @@ export default {
         }
       }
 
+      this.packaging_format = app.packaging_format
       this.infos = {
-        id: this.id,
-        label: mainPermission.label,
         description: app.description,
-        version: app.version,
+        version: app.version
-        install_time: readableDate(app.settings.install_time, true, true)
       }
       if (app.settings.domain && app.settings.path) {
         this.infos.url = 'https://' + app.settings.domain + app.settings.path
@@ -352,6 +361,8 @@ export default {
 
       this.form = form
       this.app = {
+        id: this.id,
+        label: mainPermission.label,
         domain: app.settings.domain,
         is_webapp: app.is_webapp,
         is_default: app.is_default,
@@ -380,7 +391,8 @@ export default {
           alternativeTo: app.from_catalog.potential_alternative_to.length
             ? app.from_catalog.potential_alternative_to.join(this.$i18n.t('words.separator'))
             : null,
-          description: formatI18nField(DESCRIPTION),
+          install_time: readableDate(app.settings.install_time, true, true),
+          description: DESCRIPTION ? formatI18nField(DESCRIPTION) : app.description,
           license: app.manifest.upstream.license,
           integration: {
             archs: Array.isArray(archs) ? archs.join(this.$i18n.t('words.separator')) : archs,

app/src/views/app/AppInstall.vue

@@ -2,11 +2,18 @@
   <view-base :queries="queries" @queries-response="onQueriesResponse">
     <template v-if="app">
       <card :title="app.name" icon="download" body-class="p-0">
+
+        <template #header-buttons>
+          <b-button
+            v-if="app.demo"
+            :href="app.demo" variant="primary" target="_blank"
+          >
+            <icon iname="external-link" />
+            {{ $t('app.install.try_demo') }}
+          </b-button>
+        </template>
+
         <section class="p-3">
-          <p v-if="app.alternativeTo">
-            <strong v-t="'app.potential_alternative_to'" />
-            {{ app.alternativeTo }}
-          </p>
 
           <vue-showdown :markdown="app.description" flavor="github" />
 
@@ -16,21 +23,21 @@
             aria-hidden="true" class="d-block mb-3" fluid
           />
 
+          <p v-if="app.alternativeTo">
+            {{ $t('app.potential_alternative_to') }} {{ app.alternativeTo }}
+          </p>
           <p>
             {{ $t('app.install.version', { version: app.version }) }}<br>
             {{ $t('app.install.license', { license: app.license }) }}
           </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>
+        <card-collapse
+          id="app-integration"
+          :title="$t('app.integration.title')"
+          v-if="packaging_format >= 2"
+          flush>
           <b-list-group flush tag="section">
             <yuno-list-group-item variant="info">
               {{ $t('app.integration.archs') }} {{ app.integration.archs }}
@@ -96,8 +103,8 @@
         <p v-if="!app.requirements.install.pass">
           {{ $t('app.install.problems.install', app.requirements.install.values) }}
         </p>
-        <p v-if="!app.requirements.version.pass">
+        <p v-if="!app.requirements.required_yunohost_version.pass">
-          {{ $t('app.install.problems.version', app.requirements.version.values) }}
+          {{ $t('app.install.problems.version', app.requirements.required_yunohost_version.values) }}
         </p>
       </yuno-alert>
 
@@ -177,7 +184,8 @@ export default {
       validations: null,
       errors: undefined,
       serverError: '',
-      force: false
+      force: false,
+      packaging_format: undefined
     }
   },
 
@@ -267,6 +275,7 @@ export default {
       this.form = form
       this.validations = { form: validations }
       this.errors = errors
+      this.packaging_format = _app.packaging_format
     },
 
     formatAppNotifs (notifs) {

app/src/views/app/AppList.vue

@@ -23,7 +23,7 @@
         <div>
           <h5 class="font-weight-bold">
             {{ label }}
-            <small v-if="name" class="text-secondary">{{ name }}</small>
+            <small class="text-secondary">{{ id }}</small>
           </h5>
           <p class="m-0">
             {{ description }}