feat(shape-7911): add request user context action, demo example and sandbox functionality

Author: Dawntraoz

packages/demo/src/components/ContextRequester.tsx

@@ -9,14 +9,6 @@ export const ContextRequester: PluginComponent = (props) => {
       <Typography textAlign="center">
         {JSON.stringify(data.story, null, 2)}
       </Typography>
-      <Typography variant="subtitle1">Permissions: </Typography>
-      <Typography textAlign="center">
-        {JSON.stringify(data.userPermissions, null, 2)}
-      </Typography>
-      <Typography variant="subtitle1">Is admin: </Typography>
-      <Typography textAlign="center">
-        {data.isSpaceAdmin ? 'Yes' : 'No'}
-      </Typography>
       <Typography variant="subtitle1">Is AI enabled: </Typography>
       <Typography textAlign="center">
         {data.isAIEnabled ? 'Yes' : 'No'}

packages/demo/src/components/NonModalView.tsx

@@ -4,6 +4,7 @@ import { ValueMutator } from './ValueMutator'
 import { HeightChangeDemo } from './HeightChangeDemo'
 import { AssetSelector } from './AssetSelector'
 import { ContextRequester } from './ContextRequester'
+import { UserContextRequester } from './UserContextRequester'
 import { PluginComponent } from './FieldPluginDemo'
 import { LanguageView } from './LanguageView'
 
@@ -15,6 +16,7 @@ export const NonModalView: PluginComponent = (props) => (
       <ModalToggle {...props} />
       <AssetSelector {...props} />
       <ContextRequester {...props} />
+      <UserContextRequester {...props} />
       <HeightChangeDemo {...props} />
       <LanguageView {...props} />
     </Stack>

packages/demo/src/components/UserContextRequester.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { Button, Stack, Typography } from '@mui/material'
+import { PluginComponent } from './FieldPluginDemo'
+import { UserData } from '@storyblok/field-plugin'
+
+export const UserContextRequester: PluginComponent = (props) => {
+  const { actions } = props
+  const [user, setUser] = useState<UserData>({
+    isSpaceAdmin: false,
+    permissions: undefined,
+  })
+  return (
+    <Stack gap={2}>
+      <Typography variant="subtitle1">User data: </Typography>
+      <Typography>Permissions: </Typography>
+      <Typography textAlign="center">
+        {JSON.stringify(user.permissions, null, 2)}
+      </Typography>
+      <Typography>Is space admin? </Typography>
+      <Typography textAlign="center">
+        {user.isSpaceAdmin ? 'Yes' : 'No'}
+      </Typography>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={async () => setUser(await actions.requestUserContext())}
+      >
+        Request User Context
+      </Button>
+    </Stack>
+  )
+}

packages/field-plugin/src/createFieldPlugin/FieldPluginActions.ts

@@ -1,4 +1,4 @@
-import type { Asset, StoryData, ModalSize } from '../messaging'
+import type { Asset, StoryData, UserData, ModalSize } from '../messaging'
 import type { FieldPluginData } from './FieldPluginData'
 
 export type SetContent<Content> = (
@@ -9,12 +9,14 @@ export type SetModalOpen<Content> = (
   modalSize?: ModalSize,
 ) => Promise<FieldPluginData<Content>>
 export type RequestContext = () => Promise<StoryData>
+export type RequestUserContext = () => Promise<UserData>
 export type SelectAsset = () => Promise<Asset>
 export type Initialize<Content> = () => Promise<FieldPluginData<Content>>
 
 export type FieldPluginActions<Content> = {
   setContent: SetContent<Content>
   setModalOpen: SetModalOpen<Content>
   requestContext: RequestContext
+  requestUserContext: RequestUserContext
   selectAsset: SelectAsset
 }

packages/field-plugin/src/createFieldPlugin/FieldPluginData.ts

@@ -9,8 +9,6 @@ export type FieldPluginData<Content> = {
   options: Record<string, string>
   spaceId: number | undefined
   userId: number | undefined
-  userPermissions: Record<string, string[] | number[]> | undefined
-  isSpaceAdmin: boolean
   interfaceLang: string
   storyLang: string
   story: StoryData

packages/field-plugin/src/createFieldPlugin/createPluginActions/callbackQueue.ts

@@ -1,6 +1,7 @@
 import {
   AssetSelectedMessage,
   ContextRequestMessage,
+  UserContextRequestMessage,
   LoadedMessage,
   OnMessage,
   StateChangedMessage,
@@ -12,6 +13,7 @@ export type CallbackId = string
 type CallbackMap = {
   asset: Record<CallbackId, OnMessage<AssetSelectedMessage>>
   context: Record<CallbackId, OnMessage<ContextRequestMessage>>
+  userContext: Record<CallbackId, OnMessage<UserContextRequestMessage>>
   stateChanged: Record<CallbackId, OnMessage<StateChangedMessage>>
   loaded: Record<CallbackId, OnMessage<LoadedMessage>>
 }
@@ -21,6 +23,7 @@ export const callbackQueue = () => {
   let callbackMap: CallbackMap = {
     asset: {},
     context: {},
+    userContext: {},
     stateChanged: {},
     loaded: {},
   }

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts

@@ -1,7 +1,8 @@
 import { createPluginActions } from './createPluginActions'
-import {
+import type {
   AssetModalChangeMessage,
   GetContextMessage,
+  GetUserContextMessage,
   ModalChangeMessage,
   ValueChangeMessage,
 } from '../../messaging'
@@ -71,8 +72,6 @@ describe('createPluginActions', () => {
         model: randomString,
         spaceId: null,
         userId: undefined,
-        userPermissions: undefined,
-        isSpaceAdmin: false,
         blockId: undefined,
         isAIEnabled: false,
         releases: [],
@@ -216,6 +215,7 @@ describe('createPluginActions', () => {
       )
     })
   })
+
   describe('requestContext()', () => {
     it('send a message to the container to request the story', () => {
       const { uid, postToContainer, onUpdateState } = mock()
@@ -235,6 +235,27 @@ describe('createPluginActions', () => {
       )
     })
   })
+
+  describe('requestUserContext()', () => {
+    it('send a message to the container to request the user info', () => {
+      const { uid, postToContainer, onUpdateState } = mock()
+      const {
+        actions: { requestUserContext },
+      } = createPluginActions({
+        uid,
+        postToContainer,
+        onUpdateState,
+        validateContent,
+      })
+      requestUserContext()
+      expect(postToContainer).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          event: 'getUserContext',
+        } satisfies Partial<GetUserContextMessage>),
+      )
+    })
+  })
+
   describe('selectAsset()', () => {
     it('send a message to the container to open the asset selector', () => {
       const { uid, postToContainer, onUpdateState } = mock()

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts

@@ -4,10 +4,12 @@ import {
   assetFromAssetSelectedMessage,
   assetModalChangeMessage,
   getContextMessage,
+  getUserContextMessage,
   heightChangeMessage,
   modalChangeMessage,
   OnAssetSelectMessage,
   OnContextRequestMessage,
+  OnUserContextRequestMessage,
   OnLoadedMessage,
   OnStateChangeMessage,
   OnUnknownPluginMessage,
@@ -62,15 +64,17 @@ export const createPluginActions: CreatePluginActions = ({
   const onContextRequest: OnContextRequestMessage = (data) => {
     popCallback('context', data.callbackId)?.(data)
   }
+  const onUserContextRequest: OnUserContextRequestMessage = (data) => {
+    popCallback('userContext', data.callbackId)?.(data)
+  }
   const onAssetSelect: OnAssetSelectMessage = (data) => {
     popCallback('asset', data.callbackId)?.(data)
   }
   const onUnknownMessage: OnUnknownPluginMessage = (data) => {
     // TODO remove side-effect, making functions in this file pure.
     //  perhaps only show this message in development mode?
     console.debug(
-      `Plugin received a message from container of an unknown action type "${
-        data.action
+      `Plugin received a message from container of an unknown action type "${data.action
       }". You may need to upgrade the version of the @storyblok/field-plugin library. Full message: ${JSON.stringify(
         data,
       )}`,
@@ -81,6 +85,7 @@ export const createPluginActions: CreatePluginActions = ({
     onStateChange,
     onLoaded,
     onContextRequest,
+    onUserContextRequest,
     onAssetSelect,
     onUnknownMessage,
   }
@@ -140,6 +145,14 @@ export const createPluginActions: CreatePluginActions = ({
           postToContainer(getContextMessage({ uid, callbackId }))
         })
       },
+      requestUserContext: () => {
+        return new Promise((resolve) => {
+          const callbackId = pushCallback('userContext', (message) =>
+            resolve(message.user),
+          )
+          postToContainer(getUserContextMessage({ uid, callbackId }))
+        })
+      },
     },
     messageCallbacks,
     onHeightChange,

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts

@@ -1,6 +1,7 @@
 import {
   OnAssetSelectMessage,
   OnContextRequestMessage,
+  OnUserContextRequestMessage,
   OnLoadedMessage,
   OnStateChangeMessage,
   OnUnknownPluginMessage,
@@ -11,6 +12,7 @@ export type PluginMessageCallbacks = {
   onStateChange: OnStateChangeMessage
   onLoaded: OnLoadedMessage
   onContextRequest: OnContextRequestMessage
+  onUserContextRequest: OnUserContextRequestMessage
   onAssetSelect: OnAssetSelectMessage
   onUnknownMessage: OnUnknownPluginMessage
 }

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts

@@ -3,6 +3,7 @@ import { PluginMessageCallbacks } from './createPluginMessageListener'
 import {
   AssetSelectedMessage,
   ContextRequestMessage,
+  UserContextRequestMessage,
   LoadedMessage,
   MessageToPlugin,
 } from '../../../messaging'
@@ -12,6 +13,7 @@ const uid = 'abc123'
 const mockCallbacks = (): PluginMessageCallbacks => ({
   onStateChange: vi.fn(),
   onContextRequest: vi.fn(),
+  onUserContextRequest: vi.fn(),
   onAssetSelect: vi.fn(),
   onUnknownMessage: vi.fn(),
   onLoaded: vi.fn(),
@@ -24,6 +26,7 @@ describe('handlePluginMessage', () => {
     handlePluginMessage(data, uid, callbacks)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
     expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
     expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
   })
@@ -36,6 +39,7 @@ describe('handlePluginMessage', () => {
     handlePluginMessage(data, uid, callbacks)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
     expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
     expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
   })
@@ -48,6 +52,7 @@ describe('handlePluginMessage', () => {
     handlePluginMessage(data, uid, callbacks)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
     expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
     expect(callbacks.onUnknownMessage).toHaveBeenCalledWith(data)
   })
@@ -61,8 +66,6 @@ describe('handlePluginMessage', () => {
       model: 123,
       spaceId: 1234,
       userId: 2345,
-      userPermissions: {},
-      isSpaceAdmin: true,
       story: { content: {} },
       schema: { options: [], field_type: 'avh', translatable: false },
       storyId: 1344,
@@ -77,6 +80,7 @@ describe('handlePluginMessage', () => {
     expect(callbacks.onLoaded).toHaveBeenCalledWith(data)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
     expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
     expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
   })
@@ -90,6 +94,21 @@ describe('handlePluginMessage', () => {
     handlePluginMessage(data, uid, callbacks)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).toHaveBeenCalledWith(data)
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
+    expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
+  })
+  it('handles user context request messages', () => {
+    const data: UserContextRequestMessage = {
+      action: 'get-user-context',
+      uid,
+      user: { isSpaceAdmin: true, permissions: {} },
+    }
+    const callbacks = mockCallbacks()
+    handlePluginMessage(data, uid, callbacks)
+    expect(callbacks.onStateChange).not.toHaveBeenCalled()
+    expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).toHaveBeenCalledWith(data)
     expect(callbacks.onAssetSelect).not.toHaveBeenCalled()
     expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
   })
@@ -106,6 +125,7 @@ describe('handlePluginMessage', () => {
     handlePluginMessage(data, uid, callbacks)
     expect(callbacks.onStateChange).not.toHaveBeenCalled()
     expect(callbacks.onContextRequest).not.toHaveBeenCalled()
+    expect(callbacks.onUserContextRequest).not.toHaveBeenCalled()
     expect(callbacks.onAssetSelect).toHaveBeenCalledWith(data)
     expect(callbacks.onUnknownMessage).not.toHaveBeenCalled()
   })