feat: enable/disable dashboard features (supabase#37921)

* feat: enable/disable dashboard features

* use the set directly

* move enabled features to common

* remove sneaky any

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: alaister

apps/studio/components/interfaces/UserDropdown.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { ProfileImage } from 'components/ui/ProfileImage'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSignOut } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
 import { useProfile } from 'lib/profile'
@@ -33,6 +34,7 @@ export function UserDropdown() {
   const appStateSnapshot = useAppStateSnapshot()
   const setCommandMenuOpen = useSetCommandMenuOpen()
   const { openFeaturePreviewModal } = useFeaturePreviewModal()
+  const profileShowEmailEnabled = useIsFeatureEnabled('profile:show_email')
 
   return (
     <DropdownMenu>
@@ -61,7 +63,7 @@ export function UserDropdown() {
                   >
                     {profile.username}
                   </span>
-                  {profile.primary_email !== profile.username && (
+                  {profile.primary_email !== profile.username && profileShowEmailEnabled && (
                     <span
                       title={profile.primary_email}
                       className="w-full text-left text-foreground-light text-xs truncate"

apps/studio/data/profile/types.ts

@@ -3,5 +3,3 @@ import type { components } from 'data/api'
 export type Profile = components['schemas']['ProfileResponse'] & {
   profileImageUrl?: string
 }
-
-export type Feature = Profile['disabled_features'][number]

apps/studio/hooks/misc/useIsFeatureEnabled.ts

@@ -1,43 +1,21 @@
-import type { Feature } from 'data/profile/types'
+import { isFeatureEnabled, type Feature } from 'common'
 import { useProfile } from 'lib/profile'
 
-function checkFeature(feature: Feature, features?: Feature[]) {
-  return !features?.includes(feature) ?? true
-}
-
-type SnakeToCamelCase<S extends string> = S extends `${infer First}_${infer Rest}`
-  ? `${First}${SnakeToCamelCase<Capitalize<Rest>>}`
-  : S
-
-type FeatureToCamelCase<S extends Feature> = S extends `${infer P}:${infer R}`
-  ? `${SnakeToCamelCase<P>}${Capitalize<SnakeToCamelCase<R>>}`
-  : SnakeToCamelCase<S>
-
-function featureToCamelCase(feature: Feature) {
-  return feature
-    .replace(/:/g, '_')
-    .split('_')
-    .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
-    .join('') as FeatureToCamelCase<typeof feature>
-}
-
 function useIsFeatureEnabled<T extends Feature[]>(
   features: T
-): { [key in FeatureToCamelCase<T[number]>]: boolean }
-function useIsFeatureEnabled(features: Feature): boolean
+): ReturnType<typeof isFeatureEnabled<T>>
+function useIsFeatureEnabled(features: Feature): ReturnType<typeof isFeatureEnabled>
 function useIsFeatureEnabled<T extends Feature | Feature[]>(features: T) {
   const { profile } = useProfile()
+  const disabledFeatures = profile?.disabled_features
 
+  // This code branch is to make the type checker happy, it's intentionally
+  // the same as the isFeatureEnabled function call below.
   if (Array.isArray(features)) {
-    return Object.fromEntries(
-      features.map((feature) => [
-        featureToCamelCase(feature),
-        checkFeature(feature, profile?.disabled_features),
-      ])
-    )
+    return isFeatureEnabled(features, disabledFeatures)
   }
 
-  return checkFeature(features, profile?.disabled_features)
+  return isFeatureEnabled(features, disabledFeatures)
 }
 
 export { useIsFeatureEnabled }

packages/common/enabled-features/enabled-features.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "./enabled-features.schema.json",
+
+  "profile:show_email": true,
+  "profile:update": true
+}

packages/common/enabled-features/enabled-features.schema.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+
+    "profile:show_email": {
+      "type": "boolean",
+      "description": "Show the user's email address in the toolbar"
+    },
+    "profile:update": {
+      "type": "boolean",
+      "description": "Allow the user to change their profile information (first name, last name)"
+    }
+  },
+  "required": ["profile:show_email", "profile:update"],
+  "additionalProperties": false
+}

packages/common/enabled-features/index.ts

@@ -0,0 +1,60 @@
+import type { components } from 'api-types'
+import enabledFeaturesRaw from './enabled-features.json'
+
+const enabledFeaturesStaticObj = enabledFeaturesRaw as Omit<typeof enabledFeaturesRaw, '$schema'>
+
+type Profile = components['schemas']['ProfileResponse']
+
+export type Feature = Profile['disabled_features'][number] | keyof typeof enabledFeaturesStaticObj
+
+const disabledFeaturesStaticArray = Object.entries(enabledFeaturesStaticObj)
+  .filter(([_, value]) => !value)
+  .map(([key]) => key as Feature)
+
+function checkFeature(feature: Feature, features: Set<Feature>) {
+  return !features.has(feature)
+}
+
+type SnakeToCamelCase<S extends string> = S extends `${infer First}_${infer Rest}`
+  ? `${First}${SnakeToCamelCase<Capitalize<Rest>>}`
+  : S
+
+type FeatureToCamelCase<S extends Feature> = S extends `${infer P}:${infer R}`
+  ? `${SnakeToCamelCase<P>}${Capitalize<SnakeToCamelCase<R>>}`
+  : SnakeToCamelCase<S>
+
+function featureToCamelCase(feature: Feature) {
+  return feature
+    .replace(/:/g, '_')
+    .split('_')
+    .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
+    .join('') as FeatureToCamelCase<typeof feature>
+}
+
+function isFeatureEnabled<T extends Feature[]>(
+  features: T,
+  runtimeDisabledFeatures?: Feature[]
+): { [key in FeatureToCamelCase<T[number]>]: boolean }
+function isFeatureEnabled(features: Feature, runtimeDisabledFeatures?: Feature[]): boolean
+function isFeatureEnabled<T extends Feature | Feature[]>(
+  features: T,
+  runtimeDisabledFeatures?: Feature[]
+) {
+  const disabledFeatures = new Set([
+    ...(runtimeDisabledFeatures ?? []),
+    ...disabledFeaturesStaticArray,
+  ])
+
+  if (Array.isArray(features)) {
+    return Object.fromEntries(
+      features.map((feature) => [
+        featureToCamelCase(feature),
+        checkFeature(feature, disabledFeatures),
+      ])
+    )
+  }
+
+  return checkFeature(features, disabledFeatures)
+}
+
+export { isFeatureEnabled }

packages/common/index.tsx

@@ -2,10 +2,11 @@ export * from './auth'
 export * from './consent-state'
 export * from './constants'
 export * from './database-types'
+export * from './enabled-features'
+export * from './feature-flags'
 export * from './gotrue'
 export * from './helpers'
 export * from './hooks'
 export * from './MetaFavicons/pages-router'
 export * from './Providers'
 export * from './telemetry'
-export * from './feature-flags'

packages/common/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
 }