feat: Allow to access the complete list of applications - MEED-6266 - M…

…eeds-io/meeds#1917 (#46) This change will give the ability to access the complete list of available portlets to be able to add it in a page. This feature will be disabled by default and can be enabled using a dedicated feature flag (`exo.feature.LayoutAllAppsDrawer.enabled`).
Meeds-io · Apr 29, 2024 · 257dd3d · 257dd3d
1 parent dfa58f5
commit 257dd3d
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 32 deletions.
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -86,3 +86,21 @@ layout.errorUploadingPreview=An error occurred while uploading Illustration. Ple
 layout.uploadPreviewTitle=Upload an illustration for page template
 layout.pageTemplateCreatedSuccessfully=Page template created successfully
 layout.cellHoverTooltip=Drag mouse to select a zone or click to add an application
+layout.loadMore=Load more
+layout.spacesApplications=Spaces applications
+layout.Tools=Tools
+layout.Contributions=Contribution
+layout.Content=Content
+layout.content=Content
+layout.Navigation=Navigation
+layout.analytics=Analytics
+layout.otherApplications=Advanced feature
+layout.layout=Layout
+layout.notes=Notes
+layout.kudos=Kudos
+layout.social-portlet=Social
+layout.app-center=Application Center
+layout.wallet=Wallet
+layout.perk-store=Perks
+layout.deeds-tenant=Deeds Tenant
+layout.gamification-portlets=Gamification
diff --git a/layout-webapp/src/main/webapp/WEB-INF/conf/configuration.xml b/layout-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
@@ -25,5 +25,6 @@
     xmlns="http://www.exoplaform.org/xml/ns/kernel_1_2.xsd">
 
   <import>war:/conf/layout/dynamic-container-configuration.xml</import>
+  <import>war:/conf/layout/features-configuration.xml</import>
 
 </configuration>
diff --git a/layout-webapp/src/main/webapp/WEB-INF/conf/layout/features-configuration.xml b/layout-webapp/src/main/webapp/WEB-INF/conf/layout/features-configuration.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2020 - 2024 Meeds Association [email protected]
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<configuration
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_3.xsd http://www.exoplatform.org/xml/ns/kernel_1_3.xsd"
+  xmlns="http://www.exoplatform.org/xml/ns/kernel_1_3.xsd">
+  <component>
+    <key>MeedsFeatureProperties</key>
+    <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
+    <init-params>
+      <properties-param>
+        <name>MeedsFeatureProperties</name>
+        <property name="exo.feature.LayoutAllAppsDrawer.enabled" value="${exo.feature.LayoutAllAppsDrawer.enabled:false}" />
+      </properties-param>
+    </init-params>
+  </component>
+</configuration>
diff --git a/layout-webapp/src/main/webapp/WEB-INF/jsp/layoutEditor.jsp b/layout-webapp/src/main/webapp/WEB-INF/jsp/layoutEditor.jsp
@@ -0,0 +1,14 @@
+<%@page import="org.exoplatform.commons.api.settings.ExoFeatureService"%>
+<%@page import="org.exoplatform.container.ExoContainerContext"%>
+<%
+  ExoFeatureService featureService = ExoContainerContext.getService(ExoFeatureService.class);
+  boolean layoutAllAppsDrawerActive = featureService.isFeatureActiveForUser("LayoutAllAppsDrawer", request.getRemoteUser());
+%>
+<div class="VuetifyApp">
+  <div id="layoutEditor">
+    <script type="text/javascript">
+      require(['PORTLET/layout/LayoutEditor'], app => app.init());
+      eXo.env.portal.layoutAllAppsDrawer = <%=layoutAllAppsDrawerActive%>;
+    </script>
+  </div>
+</div>
diff --git a/layout-webapp/src/main/webapp/WEB-INF/portlet.xml b/layout-webapp/src/main/webapp/WEB-INF/portlet.xml
@@ -65,7 +65,7 @@
     <portlet-class>org.exoplatform.commons.api.portlet.GenericDispatchedViewPortlet</portlet-class>
     <init-param>
       <name>portlet-view-dispatched-file-path</name>
-      <value>/html/layoutEditor.html</value>
+      <value>/WEB-INF/jsp/layoutEditor.jsp</value>
     </init-param>
     <supports>
       <mime-type>text/html</mime-type>

diff --git a/layout-webapp/src/main/webapp/html/layoutEditor.html b/layout-webapp/src/main/webapp/html/layoutEditor.html
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue
@@ -67,8 +67,21 @@ export default {
     draftPageRef() {
       return this.draftPageKey?.ref || (this.draftPageKey && `${this.draftPageKey.site.typeName}::${this.draftPageKey.site.name}::${this.draftPageKey.name}`);
     },
+    pageLoaded() {
+      return !!this.draftPageRef && !!this.page;
+    },
   },
   watch: {
+    pageLoaded() {
+      if (this.pageLoaded) {
+        this.$pageLayoutService.getPageLayout(this.pageRef, 'contentId')
+          .then(layout => {
+            const draftPageLayout = this.$layoutUtils.cleanAttributes(layout, true, false);
+            return this.$pageLayoutService.updatePageLayout(this.draftPageRef, draftPageLayout, 'contentId')
+              .then(draftLayout => this.setDraftLayout(draftLayout));
+          });
+      }
+    },
     pageRef: {
       immediate: true,
       handler() {
@@ -84,8 +97,6 @@ export default {
       handler() {
         if (this.draftPageRef) {
           this.$root.draftPageRef = this.draftPageRef;
-          this.$pageLayoutService.getPageLayout(this.draftPageRef, 'contentId')
-            .then(draftLayout => this.draftLayout = draftLayout);
         }
       },
     },

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
@@ -91,12 +91,7 @@ export default {
       handler() {
         if (this.layout) {
           const layout = JSON.parse(JSON.stringify(this.layout));
-          if (!layout.children?.length) {
-            this.$layoutUtils.newParentContainer(layout);
-            this.saveDraft(layout);
-          } else {
-            this.setLayout(layout);
-          }
+          this.setLayout(layout);
         }
       },
     },
@@ -354,7 +349,7 @@ export default {
       this.resetSectionHistory();
 
       this.loading++;
-      const layoutToUpdate = this.$layoutUtils.cleanAttributes(layout || this.layoutToEdit);
+      const layoutToUpdate = this.$layoutUtils.cleanAttributes(layout || this.layoutToEdit, false, true);
       return this.$pageLayoutService.updatePageLayout(this.$root.draftPageRef, layoutToUpdate, 'contentId')
         .then(layout => this.setLayout(layout))
         .finally(() => window.setTimeout(() => this.loading--, 200));

diff --git a/...ebapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue b/...ebapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue
@@ -20,15 +20,17 @@
 -->
 <template>
   <v-card :id="portletName" flat>
-    <div class="d-flex flex-no-wrap">
+    <div class="d-flex flex-no-wrap full-width">
       <v-avatar
         class="ApplicationCardImage mx-1 my-auto"
         size="45"
         tile>
-        <img
-          :src="`/${webApplicationName}/skin/DefaultSkin/portletIcons/${portletName}.png`"
+        <v-img
+          :src="imgSrc"
           :alt="portletName"
-          :onerror="`src = '${defaultImageSrc}'`">
+          max-height="45"
+          max-width="45"
+          @error="displayDefault = true" />
       </v-avatar>
       <div class="flex-grow-1 ApplicationCardBody text-truncate">
         <div
@@ -65,9 +67,13 @@ export default {
   },
   data: () => ({
     displayActionMenu: false,
+    displayDefault: false,
     defaultImageSrc: '/sites/images/application/DefaultPortlet.png',
   }),
   computed: {
+    imgSrc() {
+      return this.displayDefault && this.defaultImageSrc || `/${this.webApplicationName}/skin/DefaultSkin/portletIcons/${this.portletName}.png`;
+    },
     webApplicationName() {
       return this.application?.contentId?.split?.('/')?.[0];
     },

diff --git a/...c/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCategoryCard.vue b/...c/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCategoryCard.vue
@@ -22,9 +22,7 @@
   <v-expansion-panel
     v-if="hasApplications"
     class="border-color border-radius mt-4">
-    <v-expansion-panel-header>
-      {{ categoryName }}
-    </v-expansion-panel-header>
+    <v-expansion-panel-header v-sanitized-html="categoryName" />
     <v-divider v-if="expanded" />
     <v-expansion-panel-content>
       <div
@@ -54,7 +52,7 @@ export default {
   },
   computed: {
     categoryName() {
-      return this.category && this.category.name;
+      return this.category.label;
     },
     applications() {
       return this.category?.applications || [];

diff --git a/...t-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddApplicationDrawer.vue b/...t-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddApplicationDrawer.vue
@@ -41,13 +41,31 @@
           focusable
           flat>
           <layout-editor-application-category-card
-            v-for="(category, index) in $root.applicationCategories"
+            v-for="(category, index) in applicationCategories"
+            :key="category.id"
+            :category="category"
+            :expanded="expanded === index"
+            @addApplication="addApplication" />
+          <layout-editor-application-category-card
+            v-for="(category, index) in otherCategories"
             :key="category.id"
             :category="category"
             :expanded="expanded === index"
             @addApplication="addApplication" />
         </v-expansion-panels>
       </v-card>
+      <layout-editor-application-add-all-drawer
+        v-if="layoutAllAppsDrawer"
+        ref="allAppsDrawer" />
+    </template>
+    <template v-if="canLoadMore && layoutAllAppsDrawer" #footer>
+      <div class="d-flex align-center justify-center">
+        <v-btn
+          class="btn"
+          @click="loadMore">
+          {{ $t('layout.loadMore') }}
+        </v-btn>
+      </div>
     </template>
   </exo-drawer>
 </template>
@@ -56,7 +74,38 @@ export default {
   data: () => ({
     drawer: false,
     expanded: 0,
+    canLoadMore: true,
+    layoutAllAppsDrawer: eXo.env.portal.layoutAllAppsDrawer,
+    allApplications: [],
   }),
+  computed: {
+    applicationCategories() {
+      const applicationCategories = this.$root.applicationCategories.slice();
+      applicationCategories.forEach(c => c.label = this.$te(`layout.${c.name}`) ? this.$t(`layout.${c.name}`) : c.name);
+      return applicationCategories;
+    },
+    applications() {
+      return this.applicationCategories.flatMap(c => c.applications);
+    },
+    otherApplications() {
+      return this.allApplications.filter(a => !this.applications.find(app => app.contentId === a.contentId));
+    },
+    otherCategories() {
+      return this.otherApplications.reduce((otherCategories, application) => {
+        const category = otherCategories.find(c => c.name === application.categoryName);
+        if (category) {
+          category.applications.push(application);
+        } else {
+          otherCategories.push({
+            name: application.categoryName,
+            label: `<strong>${this.$t('layout.otherApplications')}:</strong> ${this.$te(`layout.${application.categoryName}`) ? this.$t(`layout.${application.categoryName}`) : application.categoryName}`,
+            applications: [application],
+          });
+        }
+        return otherCategories;
+      }, []);
+    },
+  },
   methods: {
     open() {
       this.$refs.drawer.endLoading();
@@ -69,6 +118,15 @@ export default {
         this.close();
       }, 200);
     },
+    loadMore() {
+      this.$refs.drawer.startLoading();
+      this.$applicationRegistryService.getApplications('supportedModes')
+        .then(applications => this.allApplications = applications)
+        .finally(() => {
+          this.canLoadMore = false;
+          this.$refs.drawer.endLoading();
+        });
+    },
     close() {
       this.$refs.drawer.close();
     },

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/PageTemplateDrawer.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/PageTemplateDrawer.vue
@@ -150,7 +150,7 @@ export default {
       this.$refs.drawer.close();
     },
     save() {
-      const pageLayout = this.$layoutUtils.cleanAttributes(this.$root.layout, true);
+      const pageLayout = this.$layoutUtils.cleanAttributes(this.$root.layout, true, true);
       const savePageRequest =
         this.templateId ? this.$pageTemplateService.updatePageTemplate(pageLayout, this.templateId)
           : this.$pageTemplateService.createPageTemplate(pageLayout);

diff --git a/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveButton.vue b/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveButton.vue
@@ -43,7 +43,7 @@ export default {
   methods: {
     savePage() {
       this.loading = true;
-      const layoutToUpdate = this.$layoutUtils.cleanAttributes(this.$root.layout);
+      const layoutToUpdate = this.$layoutUtils.cleanAttributes(this.$root.layout, false, true);
       return this.$pageLayoutService.updatePageLayout(this.$root.pageRef, layoutToUpdate, 'contentId', true)
         .then(() => this.$root.$emit('layout-page-saved'))
         .catch(() => this.$root.$emit('alert-message', this.$t('layout.pageSavingError'), 'error'))

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/js/LayoutUtils.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/js/LayoutUtils.js
@@ -531,12 +531,14 @@ export function isValidTargetMovingCell(section, movingCell, targetRowIndex, tar
 export function isBetween(value, b0, b1) {
   return value >= b0 && value <= b1;
 }
-  
-export function cleanAttributes(container, cleanStorage) {
+
+export function cleanAttributes(container, cleanStorage, cleanStyle) {
   container = JSON.parse(JSON.stringify(container));
-  applyDesktopStyle(container);
+  if (cleanStyle) {
+    applyDesktopStyle(container);
+  }
   if (container.children?.length) {
-    container.children = container.children.map(c => cleanAttributes(c, cleanStorage));
+    container.children = container.children.map(c => cleanAttributes(c, cleanStorage, cleanStyle));
   }
   if (container.randomId || cleanStorage) {
     delete container.storageId;