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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.2.0-launch-darkly.1",
+  "version": "2.2.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -45,7 +45,6 @@
   },
   "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",
@@ -79,7 +78,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "react": "^18",
+    "react": "^18 || ^19",
     "sanity": "^3"
   },
   "engines": {

package/src/components/ExperimentContext.tsx

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

package/src/components/ExperimentField.tsx

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {useCallback, useMemo} from 'react'
 import {GiSoapExperiment} from 'react-icons/gi'
 import {
   defineDocumentFieldAction,
@@ -18,9 +19,9 @@ const useAddExperimentAction = (
 ): DocumentFieldActionItem => {
   const {onChange, active, experimentNameOverride} = props
 
-  const handleAddAction = () => {
+  const handleAddAction = useCallback(() => {
     onChange([set(!active, ['active'])])
-  }
+  }, [onChange, active])
 
   return {
     title: `Add ${experimentNameOverride}`,
@@ -33,23 +34,21 @@ const useAddExperimentAction = (
 
 const useRemoveExperimentAction = (
   props: DocumentFieldActionProps &
-    PatchStuff & {experimentNameOverride: string; experimentId: string; active: boolean},
+    PatchStuff & {
+      experimentNameOverride: string
+      experimentId: string
+      active: boolean
+      variantNameOverride: string
+    },
 ): DocumentFieldActionItem => {
-  const {onChange, active, experimentId, experimentNameOverride} = props
-  const patchActiveFalseEvent = () => {
+  const {onChange, active, experimentId, experimentNameOverride, variantNameOverride} = props
+  const handleClearAction = useCallback(() => {
     const activeId = ['active']
-    return set(!active, activeId)
-  }
-  const patchClearEvent = () => {
     const experiment = [experimentId]
-    const variants = [experimentNameOverride]
-    return [unset(experiment), unset(variants)]
-  }
-  const handleClearAction = () => {
-    const clearEvents = patchClearEvent()
-    const activeEvent = patchActiveFalseEvent()
-    onChange([activeEvent, ...clearEvents])
-  }
+    const variants = [`${variantNameOverride}s`]
+    onChange([set(!active, activeId), unset(experiment), unset(variants)])
+  }, [onChange, active, experimentId, experimentNameOverride, variantNameOverride])
+
   return {
     title: `Remove ${experimentNameOverride}`,
     type: 'action',
@@ -59,13 +58,19 @@ const useRemoveExperimentAction = (
   }
 }
 
-const newActions = ({
+const createActions = ({
   onChange,
   inputId,
   active,
   experimentNameOverride,
   experimentId,
-}: PatchStuff & {active?: boolean; experimentNameOverride: string; experimentId: string}) => {
+  variantNameOverride,
+}: PatchStuff & {
+  active?: boolean
+  experimentNameOverride: string
+  experimentId: string
+  variantNameOverride: string
+}) => {
   const removeAction = defineDocumentFieldAction({
     name: `Remove ${experimentNameOverride}`,
     useAction: (props) =>
@@ -76,6 +81,7 @@ const newActions = ({
         inputId,
         experimentNameOverride,
         experimentId,
+        variantNameOverride,
       }),
   })
   const addAction = defineDocumentFieldAction({
@@ -97,20 +103,39 @@ const newActions = ({
 }
 
 export const ExperimentField = (
-  props: ObjectFieldProps & {experimentNameOverride: string; experimentId: string},
+  props: ObjectFieldProps & {
+    experimentNameOverride: string
+    experimentId: string
+    variantNameOverride: string
+  },
 ) => {
   const {onChange} = props.inputProps
-  const {inputId, experimentNameOverride, experimentId} = props
+  const {inputId, experimentNameOverride, experimentId, variantNameOverride} = props
   const active = props.value?.active as boolean | undefined
 
-  const oldActions = props.actions || []
+  const actionProps = useMemo(
+    () => ({
+      onChange,
+      inputId,
+      active,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride,
+    }),
+    [onChange, inputId, active, experimentNameOverride, experimentId, variantNameOverride],
+  )
 
-  const withActionProps = {
-    ...props,
-    actions: [
-      newActions({onChange, inputId, active, experimentNameOverride, experimentId}),
-      ...oldActions,
-    ],
-  }
+  const memoizedActions = useMemo(() => {
+    const oldActions = props.actions || []
+    return [createActions(actionProps), ...oldActions]
+  }, [actionProps, props.actions])
+
+  const withActionProps = useMemo(
+    () => ({
+      ...props,
+      actions: memoizedActions,
+    }),
+    [props, memoizedActions],
+  )
   return props.renderDefault(withActionProps)
 }

package/src/components/ExperimentInput.tsx

@@ -1,6 +1,8 @@
+import {Card, Text} from '@sanity/ui'
 import {FormEvent, useCallback, useMemo} from 'react'
 import {
   FormPatch,
+  getPublishedId,
   PatchEvent,
   set,
   StringInputProps,
@@ -20,17 +22,19 @@ const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
     value: experiment.id,
   }))
 
-export const ExperimentInput = (props: StringInputProps & {variantNameOverride: string}) => {
+export const ExperimentInput = (
+  props: StringInputProps & {variantNameOverride: string; experimentNameOverride: string},
+) => {
   const {experiments} = useExperimentContext()
 
   const id = useFormValue(['_id']) as string
-  const aditionalChangePath = useMemo(
-    () => [...props.path.slice(0, -1), props.variantNameOverride],
+  const additionalChangePath = useMemo(
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
     [props.variantNameOverride, props.path],
   )
-  const subValues = useFormValue(aditionalChangePath)
+  const subValues = useFormValue(additionalChangePath)
 
-  const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
+  const {patch} = useDocumentOperation(getPublishedId(id), props.schemaType.name)
 
   const handleChange = useCallback(
     (
@@ -48,15 +52,22 @@ export const ExperimentInput = (props: StringInputProps & {variantNameOverride:
 
       if (subValues) {
         const patchEvent = {
-          unset: [aditionalChangePath.join('.')],
+          unset: [additionalChangePath.join('.')],
         }
         patch.execute([patchEvent])
       }
     },
-    [patch, subValues, aditionalChangePath],
+    [patch, subValues, additionalChangePath],
   )
 
-  if (!experiments.length) return <></>
+  if (!experiments.length)
+    return (
+      <Card padding={[3, 3, 4]} radius={2} shadow={1} tone="caution">
+        <Text align="center" size={[2, 2, 3]}>
+          There are no defined {props.experimentNameOverride}s
+        </Text>
+      </Card>
+    )
 
   return (
     <Select {...props} listOptions={formatlistOptions(experiments)} handleChange={handleChange} />

package/src/fieldExperiments.tsx

@@ -44,6 +44,7 @@ const createExperimentType = ({
           {...props}
           experimentId={experimentId}
           experimentNameOverride={experimentNameOverride}
+          variantNameOverride={variantNameOverride}
         />
       ),
     },
@@ -69,7 +70,11 @@ const createExperimentType = ({
         type: 'string',
         components: {
           input: (props) => (
-            <ExperimentInput {...props} variantNameOverride={variantNameOverride} />
+            <ExperimentInput
+              {...props}
+              experimentNameOverride={experimentNameOverride}
+              variantNameOverride={variantNameOverride}
+            />
           ),
         },
         hidden: ({parent}) => {

package/src/index.ts

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

package/src/types.ts

@@ -1,4 +1,3 @@
-import {Dispatch, SetStateAction} from 'react'
 import {
   ArrayOfObjectsInputProps,
   FieldDefinition,
@@ -38,8 +37,6 @@ 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 & {
@@ -70,185 +67,3 @@ 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/components/Secrets.tsx

@@ -1,45 +0,0 @@
-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/launchDarklyExperiments.tsx

@@ -1,48 +0,0 @@
-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/utils/launchDarkly.ts

@@ -1,54 +0,0 @@
-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
-}