feat: Implement feature flag to hide schedule article and news app fi…

…lter options - EXO-71131 - Meeds-io/MIPs#119 (#28)
Meeds-io · Apr 24, 2024 · 253aa49 · 253aa49
1 parent 4bd6f5c
commit 253aa49
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 27 deletions.
diff --git a/content-webapp/src/main/webapp/WEB-INF/conf/news/news-configuration.xml b/content-webapp/src/main/webapp/WEB-INF/conf/news/news-configuration.xml
@@ -53,6 +53,18 @@
       </properties-param>
     </init-params>
   </component>
+
+  <component>
+    <key>NewsScheduleAndFilterDisplayingFeatureProperties</key>
+    <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
+    <init-params>
+      <properties-param>
+        <name>NewsScheduleAndFilterDisplayingFeatureProperties</name>
+        <description>Schedule and filter options displaying Feature enablement flag</description>
+        <property name="exo.feature.newsScheduleAndFilterDisplaying.enabled" value="${exo.feature.newsScheduleAndFilterDisplaying.enabled:false}"/>
+      </properties-param>
+    </init-params>
+  </component>
 
   <external-component-plugins>
     <target-component>org.exoplatform.services.resources.ResourceBundleService</target-component>

diff --git a/content-webapp/src/main/webapp/news/components/NewsApp.vue b/content-webapp/src/main/webapp/news/components/NewsApp.vue
@@ -46,12 +46,9 @@
             <select
               v-model="newsFilter"
               class="width-auto my-auto ms-4 subtitle-1 ignore-vuetify-classes">
-              <option value="all">{{ $t('news.app.filter.all') }}</option>
-              <option value="pinned">{{ $t('news.app.filter.pinned') }}</option>
-              <option value="myPosted">{{ $t('news.app.filter.myPosted') }}</option>
-              <option value="archived">{{ $t('news.app.filter.archived') }}</option>
-              <option value="drafts">{{ $t('news.app.filter.drafts') }}</option>
-              <option value="scheduled">{{ $t('news.app.filter.scheduled') }}</option>
+              <option v-for="(option, index) in filterOptions" :key="index" :value="option.value">
+                {{ option.label }}
+              </option>
             </select>
             <div class="d-flex align-center">
               <v-btn
@@ -141,9 +138,25 @@ export default {
         month: 'long',
         day: 'numeric',
       },
+      newsScheduleAndFilterDisplaying: false,
     };
   },
   computed: {
+    filterOptions() {
+      if (this.newsScheduleAndFilterDisplaying) {
+        return [
+          { value: 'all', label: this.$t('news.app.filter.all') },
+          { value: 'pinned', label: this.$t('news.app.filter.pinned') },
+          { value: 'myPosted', label: this.$t('news.app.filter.myPosted') },
+          { value: 'archived', label: this.$t('news.app.filter.archived') },
+          { value: 'drafts', label: this.$t('news.app.filter.drafts') },
+          { value: 'scheduled', label: this.$t('news.app.filter.scheduled') }
+        ];
+      }
+      return [
+        { value: 'drafts', label: this.$t('news.app.filter.drafts') },
+      ];
+    },
     notFoundMessage() {
       if (this.searchText.trim().length) {
         return this.$t('news.app.searchNotFound').replace('{0}', this.searchText);
@@ -202,28 +215,32 @@ export default {
     }
   },
   created() {
-    const filterQueryParam = this.getQueryParam('filter');
-    const searchQueryParam = this.getQueryParam('search');
-    const spacesFilterParam = this.getQueryParam('spaces')?.split('_');    
-    if (filterQueryParam || searchQueryParam || spacesFilterParam) {
-      if (filterQueryParam) {
-        // set filter value, which will trigger news fetching
-        this.newsFilter = filterQueryParam;
-      }
-      if (searchQueryParam) {
-        // set search value
-        this.searchText = searchQueryParam;
-      }
-      if (spacesFilterParam) {
-        // set search value
-        this.spacesFilter = spacesFilterParam;
+    this.$featureService.isFeatureEnabled('newsScheduleAndFilterDisplaying').then(enabled => {
+      this.newsScheduleAndFilterDisplaying = enabled;
+      const filterQueryParam = this.getQueryParam('filter');
+      const searchQueryParam = this.getQueryParam('search');
+      const spacesFilterParam = this.getQueryParam('spaces')?.split('_');
+      if (filterQueryParam || searchQueryParam || spacesFilterParam) {
+        if (filterQueryParam) {
+          // set filter value, which will trigger news fetching
+          this.newsFilter = filterQueryParam;
+        }
+        if (searchQueryParam) {
+          // set search value
+          this.searchText = searchQueryParam;
+        }
+        if (spacesFilterParam) {
+          // set search value
+          this.spacesFilter = spacesFilterParam;
+        }
+
+      } else if (filterQueryParam === null) {
+        this.newsFilter = this.filterOptions[0].value;
+      } else {
+        this.fetchNews();
       }
-      
-    } else if (filterQueryParam === null) {
-      this.newsFilter = 'all';
-    } else {
-      this.fetchNews();
-    }
+    });
+
     this.$root.$on('activity-shared', (activityId, spaces, selectedApps) => {
       if (selectedApps === 'newsApp' && activityId && spaces && spaces.length > 0) {
         const spacesList = spaces.map(space => space.displayName);

diff --git a/content-webapp/src/main/webapp/schedule-news-drawer/components/ExoScheduleNewsDrawer.vue b/content-webapp/src/main/webapp/schedule-news-drawer/components/ExoScheduleNewsDrawer.vue
@@ -149,6 +149,7 @@
                   <span slot="label" class="postModeText">{{ $t('news.composer.postImmediately') }}</span>
                 </v-radio>
                 <v-radio
+                  v-if="newsScheduleAndFilterDisplaying"
                   value="later"
                   class="mt-4">
                   <span slot="label" class="postModeText">{{ $t('news.composer.postLater') }}</span>
@@ -302,6 +303,7 @@ export default {
     audience: null,
     selectedAudience: null,
     disabled: true,
+    newsScheduleAndFilterDisplaying: false,
   }),
   watch: {
     postDate(newVal, oldVal) {
@@ -419,6 +421,7 @@ export default {
     }
   },
   created() {
+    this.$featureService.isFeatureEnabled('newsScheduleAndFilterDisplaying').then(enabled => this.newsScheduleAndFilterDisplaying = enabled);
     this.selectedAudience= this.$t('news.composer.stepper.audienceSection.allUsers');
     this.disabled = true;
     this.getAllowedTargets();