refactor(feature-flags): manage via composables

With a `composable` `feature flags` can be used in nearly every
`nuxt function`.

frontend/.vscode/settings.json

@@ -1,17 +1,19 @@
 {
   "conventionalCommits.scopes": [
+    "DashboardChartSummaryChartFilter",
+    "DashboardGroupManagementModal",
+    "DashboardValidatorManagmentModal",
     "checkout",
     "ci",
     "customFetch",
-    "DashboardChartSummaryChartFilter",
-    "DashboardGroupManagementModal",
     "eslint",
+    "feature-flags",
     "git",
     "i18n",
     "mainHeader",
+    "notifications",
     "qrCode",
-    "vscode",
-    "DashboardValidatorManagmentModal"
+    "vscode"
   ],
 "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"

frontend/components/BcFeatureFlag.vue

@@ -1,35 +1,14 @@
 <script setup lang="ts">
-import { warn } from 'vue'
-
-type Feature = 'feature-account_dashboards'
-type Environment = 'development' | 'production' | 'staging'
-
-const currentEnvironment = useRuntimeConfig().public.deploymentType as Environment
-if (!currentEnvironment) {
-  warn('Environment variable `deploymentType` is not set.')
-}
-
-const staging: Feature[] = []
-const activeFeatures: Record<Environment, Feature[]> = {
-  development: [
-    ...staging,
-    'feature-account_dashboards',
-  ],
-  production: [],
-  staging,
-}
+import type { FeatureFlag } from '~/types/feature-flags'
 
 const props = defineProps<{
-  feature: Feature,
+  feature: FeatureFlag,
 }>()
-
-const isEnabled = computed(
-  () => activeFeatures[currentEnvironment]?.includes(props.feature),
-)
+const { has } = useFeatureFlag()
 </script>
 
 <template>
-  <slot v-if="isEnabled" />
+  <slot v-if="has(props.feature)" />
 </template>
 
 <style scoped></style>

frontend/composables/useFeatureFlag.ts

@@ -0,0 +1,33 @@
+import { warn } from 'vue'
+import type { FeatureFlag } from '~/types/feature-flags'
+
+export const useFeatureFlag = () => {
+  type Environment = 'development' | 'production' | 'staging'
+
+  const currentEnvironment = useRuntimeConfig().public.deploymentType as Environment
+  if (!currentEnvironment) {
+    warn('Environment variable `deploymentType` is not set.')
+  }
+
+  const staging: FeatureFlag[] = [ 'feature-notifications' ]
+  const development: FeatureFlag[]
+  = [
+    ...staging,
+    'feature-account_dashboards',
+    'feature-user_settings',
+  ]
+  const featureCatalog: Record<Environment, FeatureFlag[]> = {
+    development,
+    production: [],
+    staging,
+  }
+
+  const activeFeatures = featureCatalog[currentEnvironment]
+
+  const has = (feature: FeatureFlag) => activeFeatures.includes(feature)
+
+  return {
+    activeFeatures,
+    has,
+  }
+}

frontend/types/feature-flags.ts

@@ -0,0 +1,6 @@
+export type FeatureFlag = (typeof FEATURE_FLAGS)[number]
+const FEATURE_FLAGS = [
+  'feature-account_dashboards',
+  'feature-notifications',
+  'feature-user_settings',
+] as const