feat: show articles in the list only if feature is enabled (#11607)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/composables/usePolicy.js

@@ -129,6 +129,7 @@ export function usePolicy() {
   return {
     checkPermissions,
     shouldShowPaywall,
+    isFeatureFlagEnabled,
     shouldShow,
   };
 }

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -10,10 +10,8 @@ import {
   CONTACT_PERMISSIONS,
   PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import {
-  getUserPermissions,
-  filterItemsByPermission,
-} from 'dashboard/helper/permissionsHelper.js';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 import Policy from 'dashboard/components/policy.vue';
@@ -39,8 +37,6 @@ const pages = ref({
   articles: 1,
 });
 
-const currentUser = useMapGetter('getCurrentUser');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
@@ -83,9 +79,7 @@ const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
 const filterArticles = filterByTab('articles');
 
-const userPermissions = computed(() =>
-  getUserPermissions(currentUser.value, currentAccountId.value)
-);
+const { shouldShow, isFeatureFlagEnabled } = usePolicy();
 
 const TABS_CONFIG = {
   all: {
@@ -111,47 +105,67 @@ const TABS_CONFIG = {
   },
   articles: {
     permissions: [...ROLES, PORTAL_PERMISSIONS],
+    featureFlag: FEATURE_FLAGS.HELP_CENTER,
     count: () => mappedArticles.value.length,
   },
 };
 
 const tabs = computed(() => {
-  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
-    key,
-    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
-    count: config.count(),
-    showBadge: key !== 'all',
-    permissions: config.permissions,
-  }));
-
-  return filterItemsByPermission(
-    configs,
-    userPermissions.value,
-    item => item.permissions
-  );
+  return Object.entries(TABS_CONFIG)
+    .map(([key, config]) => ({
+      key,
+      name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+      count: config.count(),
+      showBadge: key !== 'all',
+      permissions: config.permissions,
+      featureFlag: config.featureFlag,
+    }))
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    });
 });
 
 const totalSearchResultsCount = computed(() => {
-  const permissionCounts = {
-    contacts: {
+  const permissionCounts = [
+    {
       permissions: [...ROLES, CONTACT_PERMISSIONS],
       count: () => contacts.value.length,
     },
-    conversations: {
+    {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
-    articles: {
+    {
       permissions: [...ROLES, PORTAL_PERMISSIONS],
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       count: () => articles.value.length,
     },
-  };
-  return filterItemsByPermission(
-    permissionCounts,
-    userPermissions.value,
-    item => item.permissions,
-    (_, item) => item.count
-  ).reduce((total, count) => total + count(), 0);
+  ];
+
+  return permissionCounts
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    })
+    .map(config => {
+      return config.count();
+    })
+    .reduce((sum, count) => sum + count, 0);
 });
 
 const activeTabIndex = computed(() => {
@@ -355,7 +369,9 @@ onUnmounted(() => {
             </Policy>
 
             <Policy
+              v-if="isFeatureFlagEnabled(FEATURE_FLAGS.HELP_CENTER)"
               :permissions="[...ROLES, PORTAL_PERMISSIONS]"
+              :feature-flag="FEATURE_FLAGS.HELP_CENTER"
               class="flex flex-col justify-center"
             >
               <SearchResultArticlesList