Initialize feature flag state on the server (#4295)

* Init feature flag state on the store init Signed-off-by: Olga Bulat <[email protected]> * Add comment Signed-off-by: Olga Bulat <[email protected]> * Correctly set and clean up the env variable in set Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · May 15, 2024 · 292946e · 292946e
1 parent 7dd3550
commit 292946e
Show file tree

Hide file tree

Showing 6 changed files with 254 additions and 175 deletions.
diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
@@ -8,8 +8,8 @@
     it doesn't count as a user preference.
     -->
     <div
-      v-for="(group, groupIndex) in featureData.groups"
-      :key="groupIndex"
+      v-for="group in featureGroups"
+      :key="group.title"
       class="not-prose border-b border-dark-charcoal-20 py-6 last-of-type:border-b-0"
     >
       <h2 class="label-bold mb-2">
@@ -22,52 +22,52 @@
       </p>
       <ul>
         <li
-          v-for="(name, featureIndex) in group.features"
-          :key="featureIndex"
+          v-for="flag in group.features"
+          :key="flag.name"
           class="mb-4 last:mb-0"
         >
           <VCheckbox
-            v-if="isFlagName(name) && isSwitchable(name)"
-            :id="name"
+            v-if="flag.status === SWITCHABLE"
+            :id="flag.name"
             class="flex-row items-center"
-            :checked="isOn(name)"
+            :checked="flag.state === ON"
             is-switch
             @change="handleChange"
-            >{{ $t(`prefPage.features.${name}`) }}</VCheckbox
+            >{{ $t(`prefPage.features.${flag.name}`) }}</VCheckbox
           >
         </li>
       </ul>
     </div>
 
     <div
-      v-for="isFlagSwitchable in [false, true]"
-      :key="`${isFlagSwitchable}`"
+      v-for="isSwitchable in [false, true]"
+      :key="`${isSwitchable}`"
       class="not-prose border-b border-dark-charcoal-20 py-6 last-of-type:border-b-0"
     >
       <h2 class="label-bold mb-2">
-        {{ $t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.title`) }}
+        {{ $t(`prefPage.${isSwitchable ? "s" : "nonS"}witchable.title`) }}
       </h2>
       <p class="label-regular mb-4">
-        {{ $t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.desc`) }}
+        {{ $t(`prefPage.${isSwitchable ? "s" : "nonS"}witchable.desc`) }}
       </p>
       <ul>
         <li
-          v-for="[name, feature] in getFlagsBySwitchable(isFlagSwitchable)"
-          :key="name"
+          v-for="flag in flagsBySwitchable[`${isSwitchable}`]"
+          :key="flag.name"
           class="mb-4 flex flex-row items-center last:mb-0"
         >
           <VCheckbox
-            :id="name"
+            :id="flag.name"
             class="flex-row items-center"
-            :checked="isOn(name)"
-            :disabled="!isFlagSwitchable"
+            :checked="flag.state === ON"
+            :disabled="flag.status !== SWITCHABLE"
             is-switch
             @change="handleChange"
           >
             <div>
-              <strong>{{ name }}</strong>
+              <strong>{{ flag.name }}</strong>
               <br />
-              {{ feature.description }}
+              {{ flag.description }}
             </div>
           </VCheckbox>
         </li>
@@ -83,9 +83,7 @@
 import { computed } from "vue"
 import { defineComponent } from "@nuxtjs/composition-api"
 
-import featureData from "~~/feat/feature-flags.json"
-
-import { useFeatureFlagStore, isFlagName } from "~/stores/feature-flag"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { SWITCHABLE, ON, OFF, FEATURE_STATES } from "~/constants/feature-flag"
 
 import VContentPage from "~/components/VContentPage.vue"
@@ -115,37 +113,19 @@ export default defineComponent({
       name: string
       checked?: boolean
     }) => {
-      if (!isFlagName(name)) {
-        throw new Error(
-          `Cannot change the state of flag ${name}: it does not exist.`
-        )
-      }
       featureFlagStore.toggleFeature(name, checked ? ON : OFF)
     }
 
-    const isOn = (name: string) => {
-      if (!isFlagName(name)) {
-        throw new Error(
-          `Cannot check the state of flag ${name}: it does not exist.`
-        )
+    const flagsBySwitchable = computed(() => {
+      return {
+        true: featureFlagStore.getFlagsBySwitchable(true),
+        false: featureFlagStore.getFlagsBySwitchable(false),
       }
-      return featureFlagStore.isOn(name)
-    }
+    })
 
-    const isSwitchable = (name: string) => {
-      if (!isFlagName(name)) {
-        throw new Error(
-          `Cannot check the switchability of flag ${name}: it does not exist.`
-        )
-      }
-      return featureFlagStore.isSwitchable(name)
-    }
-
-    const getFlagsBySwitchable = (switchable: boolean) => {
-      return Object.entries(flags.value).filter(
-        ([name]) => isSwitchable(name) === switchable
-      )
-    }
+    const featureGroups = computed(() => {
+      return featureFlagStore.getFeatureGroups()
+    })
 
     return {
       ON,
@@ -154,14 +134,11 @@ export default defineComponent({
       FEATURE_STATES,
 
       flags,
-      isOn,
-      isSwitchable,
 
       handleChange,
-      isFlagName,
 
-      featureData,
-      getFlagsBySwitchable,
+      flagsBySwitchable,
+      featureGroups,
     }
   },
 })