feat(shape-7911): add new state as context in the demo, replace any by permissions types, add ModalSize type and ModalSize test

Author: Dawntraoz

packages/cli/templates/react/src/components/FieldPluginExample/ModalToggle.tsx

@@ -1,11 +1,9 @@
 import { FunctionComponent } from 'react'
+import type { SetModalOpen } from '@storyblok/field-plugin'
 
 const ModalToggle: FunctionComponent<{
   isModalOpen: boolean
-  setModalOpen: (
-    isModalOpen: boolean,
-    modalSize?: { width: string; height: string },
-  ) => void
+  setModalOpen: SetModalOpen<number>
 }> = ({ isModalOpen, setModalOpen }) => {
   return (
     <div>

packages/demo/src/components/ContextRequester.tsx

@@ -5,8 +5,22 @@ export const ContextRequester: PluginComponent = (props) => {
   const { data, actions } = props
   return (
     <Stack gap={2}>
-      <Typography variant="subtitle1">Story</Typography>
-      <Typography textAlign="center">{JSON.stringify(data.story)}</Typography>
+      <Typography variant="subtitle1">Story: </Typography>
+      <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'}
+      </Typography>
       <Button
         variant="outlined"
         color="secondary"

packages/demo/src/components/ModalToggle.tsx

@@ -9,7 +9,9 @@ export const ModalToggle: PluginComponent = (props) => {
       <Button
         variant="outlined"
         color="secondary"
-        onClick={() => actions.setModalOpen(!data.isModalOpen)}
+        onClick={() =>
+          actions.setModalOpen(!data.isModalOpen, { width: '50%' })
+        }
       >
         Toggle Modal
       </Button>

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

@@ -1,11 +1,12 @@
-import { Asset, StoryData } from '../messaging'
-import { FieldPluginData } from './FieldPluginData'
+import type { Asset, StoryData, ModalSize } from '../messaging'
+import type { FieldPluginData } from './FieldPluginData'
 
 export type SetContent<Content> = (
   content: Content,
 ) => Promise<FieldPluginData<Content>>
 export type SetModalOpen<Content> = (
   isModalOpen: boolean,
+  modalSize?: ModalSize,
 ) => Promise<FieldPluginData<Content>>
 export type RequestContext = () => Promise<StoryData>
 export type SelectAsset = () => Promise<Asset>

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

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

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

@@ -138,6 +138,44 @@ describe('createPluginActions', () => {
         } satisfies Partial<ModalChangeMessage>),
       )
     })
+    it('sends modalSize to the container when opening the modal', () => {
+      const { uid, postToContainer, onUpdateState } = mock()
+      const {
+        actions: { setModalOpen },
+      } = createPluginActions({
+        uid,
+        postToContainer,
+        onUpdateState,
+        validateContent,
+      })
+
+      setModalOpen(true, { width: '50%' })
+      expect(postToContainer).toHaveBeenCalledWith(
+        expect.objectContaining({
+          event: 'toggleModal',
+          status: true,
+          modalSize: { width: '50%' },
+        } satisfies Partial<ModalChangeMessage>),
+      )
+
+      setModalOpen(true, { height: '50%' })
+      expect(postToContainer).toHaveBeenCalledWith(
+        expect.objectContaining({
+          event: 'toggleModal',
+          status: true,
+          modalSize: { height: '50%' },
+        } satisfies Partial<ModalChangeMessage>),
+      )
+
+      setModalOpen(true, { width: '50%', height: '50%' })
+      expect(postToContainer).toHaveBeenCalledWith(
+        expect.objectContaining({
+          event: 'toggleModal',
+          status: true,
+          modalSize: { width: '50%', height: '50%' },
+        } satisfies Partial<ModalChangeMessage>),
+      )
+    })
   })
   describe('value state change', () => {
     it('updates the value state when setContent is called', () => {

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

@@ -107,10 +107,7 @@ export const createPluginActions: CreatePluginActions = ({
           )
         })
       },
-      setModalOpen: (
-        isModalOpen: boolean,
-        modalSize?: { width: string; height: string },
-      ) => {
+      setModalOpen: (isModalOpen, modalSize) => {
         return new Promise((resolve) => {
           const callbackId = pushCallback('stateChanged', (message) =>
             resolve(

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/LoadedMessage.ts

@@ -14,7 +14,7 @@ export type LoadedMessage = MessageToPlugin<'loaded'> & {
   interfaceLanguage: string
   spaceId: number | null
   userId: number | undefined
-  userPermissions: Record<string, any> | undefined
+  userPermissions: Record<string, string[] | number[]> | undefined
   isSpaceAdmin: boolean
   story: StoryData
   storyId: number | undefined

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/StateChangedMessage.ts

@@ -14,7 +14,7 @@ export type StateChangedMessage = MessageToPlugin<'state-changed'> & {
   interfaceLanguage: string
   spaceId: number | null
   userId: number | undefined
-  userPermissions: Record<string, any> | undefined
+  userPermissions: Record<string, string[] | number[]> | undefined
   isSpaceAdmin: boolean
   story: StoryData
   storyId: number | undefined

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/ModalChangeMessage.ts

@@ -1,10 +1,13 @@
 import { hasKey } from '../../../utils'
 import { isMessageToContainer, MessageToContainer } from './MessageToContainer'
 
+export type ModalSize = { width?: string; height?: string }
+
 export type ModalChangeMessage = MessageToContainer<'toggleModal'> & {
   status: boolean
-  modalSize?: { width: string; height: string }
+  modalSize?: ModalSize
 }
+
 export const isModalChangeMessage = (obj: unknown): obj is ModalChangeMessage =>
   isMessageToContainer(obj) &&
   obj.event === 'toggleModal' &&