@sanity/personalization-plugin 2.1.0 → 2.2.0-launch-darkly.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.1.0",
+  "version": "2.2.0-launch-darkly.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/studio-secrets": "^3.0.1",
     "@sanity/ui": "^2.8.19",
     "@sanity/uuid": "^3.0.2",
     "fast-deep-equal": "^3.1.3",

package/src/components/ExperimentContext.tsx

@@ -1,5 +1,5 @@
 import equal from 'fast-deep-equal'
-import {createContext, useContext, useMemo} from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
@@ -21,6 +21,8 @@ export const CONFIG_DEFAULT = {
 export const ExperimentContext = createContext<ExperimentContextProps>({
   ...CONFIG_DEFAULT,
   experiments: [],
+  setSecret: () => undefined,
+  secret: undefined,
 })
 
 export function useExperimentContext() {
@@ -33,6 +35,7 @@ type ExperimentProps = ObjectInputProps & {
 
 export function ExperimentProvider(props: ExperimentProps) {
   const {experimentFieldPluginConfig} = props
+  const [secret, setSecret] = useState<string | undefined>()
 
   const client = useClient({apiVersion: experimentFieldPluginConfig.apiVersion})
   const workspace = useWorkspace()
@@ -48,13 +51,13 @@ export function ExperimentProvider(props: ExperimentProps) {
           }
           return experimentFieldPluginConfig.experiments
         },
-        [workspace],
+        [workspace, secret],
         {equal},
       )
 
   const context = useMemo(
-    () => ({...experimentFieldPluginConfig, experiments}),
-    [experimentFieldPluginConfig, experiments],
+    () => ({...experimentFieldPluginConfig, experiments, secret, setSecret}),
+    [experimentFieldPluginConfig, experiments, secret, setSecret],
   )
 
   return (

package/src/components/Secrets.tsx

@@ -0,0 +1,45 @@
+import {SettingsView, useSecrets} from '@sanity/studio-secrets'
+import {useEffect, useState} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {useExperimentContext} from './ExperimentContext'
+
+const pluginConfigKeys = [
+  {
+    key: 'apiKey',
+    title: 'Your secret API key',
+  },
+]
+
+export const Secrets = (props: ObjectInputProps, namespace: string) => {
+  const {secrets, loading} = useSecrets(namespace) as {secrets: {apiKey: string}; loading: boolean}
+  const {setSecret} = useExperimentContext()
+  const [showSettings, setShowSettings] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (loading) return undefined
+    if (!secrets && !loading) {
+      setSecret(undefined)
+      return setShowSettings(true)
+    }
+    setSecret(secrets.apiKey)
+    return setShowSettings(false)
+  }, [secrets, loading, setSecret])
+
+  if (!showSettings) {
+    return props.renderDefault(props)
+  }
+  return (
+    <>
+      <SettingsView
+        title={`${namespace} api key`}
+        namespace={namespace}
+        keys={pluginConfigKeys}
+        onClose={() => {
+          setShowSettings(false)
+        }}
+      />
+      {props.renderDefault(props)}
+    </>
+  )
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './fieldExperiments'
+export * from './launchDarklyExperiments'
 export * from './types'
 export * from './utils/flattenSchemaType'

package/src/launchDarklyExperiments.tsx

@@ -0,0 +1,48 @@
+import {definePlugin, FieldDefinition, isObjectInputProps} from 'sanity'
+
+import {Secrets} from './components/Secrets'
+import {fieldLevelExperiments} from './fieldExperiments'
+import {flattenSchemaType} from './utils/flattenSchemaType'
+import {getExperiments} from './utils/launchDarkly'
+
+export type LaunchDarklyFieldLevelConfig = {
+  fields: (string | FieldDefinition)[]
+  projectKey: string
+  tags?: string[]
+}
+
+export const launchDarklyFieldLevel = definePlugin<LaunchDarklyFieldLevelConfig>((config) => {
+  const {fields, projectKey, tags} = config
+  return {
+    name: 'sanity-growthbook-personalistaion-plugin-field-level-experiments',
+    plugins: [
+      fieldLevelExperiments({
+        fields,
+        experiments: (client) => getExperiments({client, projectKey, tags}),
+      }),
+    ],
+
+    form: {
+      components: {
+        input: (props) => {
+          const isRootInput = props.id === 'root' && isObjectInputProps(props)
+
+          if (!isRootInput) {
+            return props.renderDefault(props)
+          }
+
+          const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
+            (field) => field.type.name,
+          )
+
+          const hasExperiment = flatFieldTypeNames.some((name) => name.startsWith('experiment'))
+
+          if (!hasExperiment) {
+            return props.renderDefault(props)
+          }
+          return Secrets(props, 'launchdarkly')
+        },
+      },
+    },
+  }
+})

package/src/types.ts

@@ -1,3 +1,4 @@
+import {Dispatch, SetStateAction} from 'react'
 import {
   ArrayOfObjectsInputProps,
   FieldDefinition,
@@ -37,6 +38,8 @@ export type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
 
 export type ExperimentContextProps = Required<FieldPluginConfig> & {
   experiments: ExperimentType[]
+  setSecret: Dispatch<SetStateAction<string | undefined>>
+  secret: string | undefined
 }
 
 export type ArrayInputProps = ArrayOfObjectsInputProps & {
@@ -67,3 +70,185 @@ export type ExperimentGeneric<T> = {
     | T
     | undefined
 }
+
+export type LaunchDarklyFlagItem = {
+  name: string
+  kind: string
+  key: string
+  _version: number
+  creationDate: number
+  variations: Array<{
+    value: boolean
+    _id: string
+    name: string
+  }>
+  temporary: boolean
+  tags: string[]
+  _links: {
+    parent: {
+      href: string
+      type: string
+    }
+    self: {
+      href: string
+      type: string
+    }
+  }
+  experiments: {
+    baselineIdx: number
+    items: Array<{
+      metricKey: string
+      _metric: {
+        _id: string
+        _versionId: string
+        key: string
+        name: string
+        kind: string
+        _links: {
+          parent: {
+            href: string
+            type: string
+          }
+          self: {
+            href: string
+            type: string
+          }
+        }
+        tags: string[]
+        _creationDate: number
+        experimentCount: number
+        metricGroupCount: number
+        _attachedFlagCount: number
+        maintainerId: string
+        _maintainer: {
+          _links: {
+            self: {
+              href: string
+              type: string
+            }
+          }
+          _id: string
+          role: string
+          email: string
+          firstName: string
+          lastName: string
+        }
+        category: string
+        isNumeric: boolean
+        percentileValue: number
+      }
+    }>
+  }
+  customProperties: {
+    key: {
+      name: string
+      value: string[]
+    }
+  }
+  archived: boolean
+  description: string
+  maintainerId: string
+  _maintainer: {
+    _links: {
+      self: {
+        href: string
+        type: string
+      }
+    }
+    _id: string
+    role: string
+    email: string
+    firstName: string
+    lastName: string
+  }
+  maintainerTeamKey: string
+  _maintainerTeam: {
+    key: string
+    name: string
+    _links: {
+      parent: {
+        href: string
+        type: string
+      }
+      roles: {
+        href: string
+        type: string
+      }
+      self: {
+        href: string
+        type: string
+      }
+    }
+  }
+  archivedDate: number
+  deprecated: boolean
+  deprecatedDate: number
+  defaults: {
+    onVariation: number
+    offVariation: number
+  }
+  _purpose: string
+  migrationSettings: {
+    contextKind: string
+    stageCount: number
+  }
+  environments: {
+    [key: string]: {
+      on: boolean
+      archived: boolean
+      salt: string
+      sel: string
+      lastModified: number
+      version: number
+      _site: {
+        href: string
+        type: string
+      }
+      _environmentName: string
+      trackEvents: boolean
+      trackEventsFallthrough: boolean
+      targets: Array<{
+        values: string[]
+        variation: number
+        contextKind: string
+      }>
+      contextTargets: Array<{
+        values: string[]
+        variation: number
+        contextKind: string
+      }>
+      rules: Array<{
+        clauses: Array<{
+          attribute: string
+          op: string
+          values: unknown[]
+          negate: boolean
+        }>
+        trackEvents: boolean
+      }>
+      fallthrough: {
+        variation: number
+      }
+      offVariation: number
+      prerequisites: Array<{
+        key: string
+        variation: number
+      }>
+      _summary: {
+        variations: {
+          [key: string]: {
+            rules: number
+            nullRules: number
+            targets: number
+            contextTargets: number
+            isFallthrough?: boolean
+            isOff?: boolean
+          }
+        }
+        prerequisites: number
+      }
+    }
+  }
+  includeInSnippet: boolean
+  goalIds: string[]
+}

package/src/utils/launchDarkly.ts

@@ -0,0 +1,54 @@
+import {SanityClient} from 'sanity'
+
+import {LaunchDarklyFieldLevelConfig} from '../launchDarklyExperiments'
+import {ExperimentType, LaunchDarklyFlagItem} from '../types'
+
+export const getExperiments = async ({
+  client,
+  projectKey,
+  tags,
+}: Omit<LaunchDarklyFieldLevelConfig, 'fields'> & {client: SanityClient}): Promise<
+  ExperimentType[]
+> => {
+  const query = `*[_id == 'secrets.launchdarkly'][0].secrets.apiKey`
+
+  const secret = await client.fetch(query) // secret is stored in the content lake using @sanity/studio-secrets
+  if (!secret) return []
+
+  const url = new URL(`https://app.launchdarkly.com/api/v2/flags/${projectKey}`)
+
+  if (tags) {
+    url.searchParams.set('filter', `tags:${tags.join('+')}`)
+  }
+
+  const featureExperiments: ExperimentType[] = []
+  let hasMore = true
+  const offset = 0
+  const limit = 10
+
+  while (hasMore) {
+    url.searchParams.set('offset', offset.toString())
+    url.searchParams.set('limit', limit.toString())
+    const responseFlags = await fetch(url, {
+      headers: {
+        Authorization: secret,
+      },
+    })
+
+    const {items} = await responseFlags.json()
+    const experiments = items.map((flag: LaunchDarklyFlagItem) => ({
+      id: flag.key,
+      label: flag.name,
+      variants: flag.variations.map((variation) => ({
+        id: variation.value,
+        label: variation.name,
+      })),
+    }))
+    featureExperiments.push(...experiments)
+    if (items.length !== limit) {
+      hasMore = false
+    }
+  }
+
+  return featureExperiments
+}