chore: Add feature flags in the settings console (#5657)

2022-10-17 14:59:44 -07:00
parent 73f5595762
commit 20b4a91122
14 changed files with 130 additions and 27 deletions
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -73,14 +73,14 @@ export default {

  computed: {
    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      isACustomBrandedInstance: 'globalConfig/isACustomBrandedInstance',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
-      inboxes: 'inboxes/getInboxes',
      accountId: 'getCurrentAccountId',
      currentRole: 'getCurrentRole',
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+      inboxes: 'inboxes/getInboxes',
+      isACustomBrandedInstance: 'globalConfig/isACustomBrandedInstance',
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
      labels: 'labels/getLabelsOnSidebar',
      teams: 'teams/getMyTeams',
    }),
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -1,3 +1,4 @@
+import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';

 const settings = accountId => ({
@@ -38,12 +39,20 @@ const settings = accountId => ({
    'settings_teams_new',
  ],
  menuItems: [
+    {
+      icon: 'briefcase',
+      label: 'ACCOUNT_SETTINGS',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/general`),
+      toStateName: 'general_settings_index',
+    },
    {
      icon: 'people',
      label: 'AGENTS',
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
      toStateName: 'agent_list',
+      featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
    },
    {
      icon: 'people-team',
@@ -51,6 +60,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
      toStateName: 'settings_teams_list',
+      featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
    },
    {
      icon: 'mail-inbox-all',
@@ -58,6 +68,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
      toStateName: 'settings_inbox_list',
+      featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
    },
    {
      icon: 'tag',
@@ -65,6 +76,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
      toStateName: 'labels_list',
+      featureFlag: FEATURE_FLAGS.LABELS,
    },
    {
      icon: 'code',
@@ -74,6 +86,7 @@ const settings = accountId => ({
        `accounts/${accountId}/settings/custom-attributes/list`
      ),
      toStateName: 'attributes_list',
+      featureFlag: FEATURE_FLAGS.CUSTOM_ATTRIBUTES,
    },
    {
      icon: 'automation',
@@ -82,6 +95,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
      toStateName: 'automation_list',
+      featureFlag: FEATURE_FLAGS.AUTOMATIONS,
    },
    {
      icon: 'bot',
@@ -90,7 +104,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
      toStateName: 'agent_bots',
-      featureFlagKey: 'agent_bots',
+      featureFlag: FEATURE_FLAGS.AGENT_BOTS,
    },
    {
      icon: 'flash-settings',
@@ -99,7 +113,7 @@ const settings = accountId => ({
      toState: frontendURL(`accounts/${accountId}/settings/macros`),
      toStateName: 'macros_wrapper',
      beta: true,
-      featureFlagKey: 'macros',
+      featureFlag: FEATURE_FLAGS.MACROS,
    },
    {
      icon: 'chat-multiple',
@@ -109,6 +123,7 @@ const settings = accountId => ({
        `accounts/${accountId}/settings/canned-response/list`
      ),
      toStateName: 'canned_list',
+      featureFlag: FEATURE_FLAGS.CANNED_RESPONSES,
    },
    {
      icon: 'flash-on',
@@ -116,6 +131,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/integrations`),
      toStateName: 'settings_integrations',
+      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
    },
    {
      icon: 'star-emphasis',
@@ -123,6 +139,7 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/applications`),
      toStateName: 'settings_applications',
+      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
    },
    {
      icon: 'credit-card-person',
@@ -132,13 +149,6 @@ const settings = accountId => ({
      toStateName: 'billing_settings_index',
      showOnlyOnCloud: true,
    },
-    {
-      icon: 'settings',
-      label: 'ACCOUNT_SETTINGS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/general`),
-      toStateName: 'general_settings_index',
-    },
  ],
 });

--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -20,6 +20,8 @@
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
+import { mapGetters } from 'vuex';
+import { FEATURE_FLAGS } from '../../../featureFlags';

 export default {
  components: {
@@ -61,6 +63,10 @@ export default {
    },
  },
  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
    hasSecondaryMenu() {
      return this.menuConfig.menuItems && this.menuConfig.menuItems.length;
    },
@@ -89,7 +95,7 @@ export default {
        icon: 'folder',
        label: 'INBOXES',
        hasSubMenu: true,
-        newLink: true,
+        newLink: this.showNewLink(FEATURE_FLAGS.INBOX_MANAGEMENT),
        newLinkTag: 'NEW_INBOX',
        key: 'inbox',
        toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
@@ -117,7 +123,7 @@ export default {
        icon: 'number-symbol',
        label: 'LABELS',
        hasSubMenu: true,
-        newLink: true,
+        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
        newLinkTag: 'NEW_LABEL',
        key: 'label',
        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
@@ -141,7 +147,7 @@ export default {
        label: 'TAGGED_WITH',
        hasSubMenu: true,
        key: 'label',
-        newLink: true,
+        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
        newLinkTag: 'NEW_LABEL',
        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
        toStateName: 'labels_list',
@@ -163,7 +169,7 @@ export default {
        icon: 'people-team',
        label: 'TEAMS',
        hasSubMenu: true,
-        newLink: true,
+        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
        newLinkTag: 'NEW_TEAM',
        key: 'team',
        toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
@@ -238,6 +244,9 @@ export default {
    toggleAccountModal() {
      this.$emit('toggle-accounts');
    },
+    showNewLink(featureFlag) {
+      return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -123,12 +123,12 @@ export default {
      return !!this.menuItem.children;
    },
    isMenuItemVisible() {
-      if (!this.menuItem.featureFlagKey) {
+      if (!this.menuItem.featureFlag) {
        return true;
      }
      return this.isFeatureEnabledonAccount(
        this.accountId,
-        this.menuItem.featureFlagKey
+        this.menuItem.featureFlag
      );
    },
    isInboxConversation() {
@@ -217,7 +217,7 @@ export default {
      }
    },
    showItem(item) {
-      return this.isAdmin && item.newLink !== undefined;
+      return this.isAdmin && !!item.newLink;
    },
    onClickOpen() {
      this.$emit('open');
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -110,13 +110,15 @@ import { hasPressedAltAndAKey } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
-
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
  ALLOWED_FILE_TYPES,
  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
 } from 'shared/constants/messages';

 import { REPLY_EDITOR_MODES } from './constants';
+import { mapGetters } from 'vuex';
+
 export default {
  name: 'ReplyBottomPanel',
  components: { FileUpload },
@@ -200,6 +202,10 @@ export default {
    },
  },
  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
    isNote() {
      return this.mode === REPLY_EDITOR_MODES.NOTE;
    },
@@ -217,7 +223,12 @@ export default {
      return this.showFileUpload || this.isNote;
    },
    showAudioRecorderButton() {
-      return this.showAudioRecorder;
+      return (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.VOICE_RECORDER
+        ) && this.showAudioRecorder
+      );
    },
    showAudioPlayStopButton() {
      return this.showAudioRecorder && this.isRecordingAudio;
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -0,0 +1,13 @@
+export const FEATURE_FLAGS = {
+  AGENT_BOTS: 'agent_bots',
+  AGENT_MANAGEMENT: 'agent_management',
+  AUTOMATIONS: 'automations',
+  CANNED_RESPONSES: 'canned_responses',
+  CUSTOM_ATTRIBUTES: 'custom_attributes',
+  INBOX_MANAGEMENT: 'inbox_management',
+  INTEGRATIONS: 'integrations',
+  LABELS: 'labels',
+  MACROS: 'macros',
+  TEAM_MANAGEMENT: 'team_management',
+  VOICE_RECORDER: 'voice_recorder',
+};
--- a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
@@ -16,6 +16,8 @@ import {
  ICON_CONVERSATION_REPORTS,
 } from './CommandBarIcons';
 import { frontendURL } from '../../../helper/URLHelper';
+import { mapGetters } from 'vuex';
+import { FEATURE_FLAGS } from '../../../featureFlags';

 const GO_TO_COMMANDS = [
  {
@@ -86,6 +88,7 @@ const GO_TO_COMMANDS = [
    id: 'open_agent_settings',
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_AGENTS',
+    featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
    icon: ICON_AGENT_REPORTS,
    path: accountId => `accounts/${accountId}/settings/agents/list`,
    role: ['administrator'],
@@ -93,6 +96,7 @@ const GO_TO_COMMANDS = [
  {
    id: 'open_team_settings',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_TEAMS',
+    featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    icon: ICON_TEAM_REPORTS,
    path: accountId => `accounts/${accountId}/settings/teams/list`,
@@ -101,6 +105,7 @@ const GO_TO_COMMANDS = [
  {
    id: 'open_inbox_settings',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_INBOXES',
+    featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    icon: ICON_INBOXES,
    path: accountId => `accounts/${accountId}/settings/inboxes/list`,
@@ -109,6 +114,7 @@ const GO_TO_COMMANDS = [
  {
    id: 'open_label_settings',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_LABELS',
+    featureFlag: FEATURE_FLAGS.LABELS,
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    icon: ICON_LABELS,
    path: accountId => `accounts/${accountId}/settings/labels/list`,
@@ -117,6 +123,7 @@ const GO_TO_COMMANDS = [
  {
    id: 'open_canned_response_settings',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_CANNED_RESPONSES',
+    featureFlag: FEATURE_FLAGS.CANNED_RESPONSES,
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    icon: ICON_CANNED_RESPONSE,
    path: accountId => `accounts/${accountId}/settings/canned-response/list`,
@@ -125,6 +132,7 @@ const GO_TO_COMMANDS = [
  {
    id: 'open_applications_settings',
    title: 'COMMAND_BAR.COMMANDS.GO_TO_SETTINGS_APPLICATIONS',
+    featureFlag: FEATURE_FLAGS.INTEGRATIONS,
    section: 'COMMAND_BAR.SECTIONS.SETTINGS',
    icon: ICON_APPS,
    path: accountId => `accounts/${accountId}/settings/applications`,
@@ -158,8 +166,20 @@ const GO_TO_COMMANDS = [

 export default {
  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
    goToCommandHotKeys() {
-      let commands = GO_TO_COMMANDS;
+      let commands = GO_TO_COMMANDS.filter(cmd => {
+        if (cmd.featureFlag) {
+          return this.isFeatureEnabledonAccount(
+            this.accountId,
+            cmd.featureFlag
+          );
+        }
+        return true;
+      });

      if (!this.isAdmin) {
        commands = commands.filter(command => command.role.includes('agent'));
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -10,7 +10,7 @@ export default {
      component: SettingsContent,
      props: {
        headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'settings',
+        icon: 'briefcase',
        showNewButton: false,
      },
      children: [
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -25,7 +25,7 @@ export default {
      roles: ['administrator', 'agent'],
      redirect: () => {
        if (store.getters.getCurrentRole === 'administrator') {
-          return frontendURL('accounts/:accountId/settings/agents');
+          return frontendURL('accounts/:accountId/settings/general');
        }
        return frontendURL('accounts/:accountId/settings/canned-response');
      },