feat(lib): add modalSize object to the toggleModal message (#447)

* feat(SHAPE-7911): add modalSize object to the toggleModal message

* fix: solve prettier issues

* feat(SHAPE-7911): add new state properties userPermissions, isSpaceAdmin and isAIEnabled

* fix: solve prettier issues

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

* test(shape-7911): add undefined in case of null in storyfront, so the null tests are not needed

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

* fix: prettier issues

* test: add extra permissions checks

* feat: apply suggestions from code review by Demetrius

Co-authored-by: Demetrius Feijóo <[email protected]>

* fix: include the type for getUserContextMessage

* refactor: remove debounce from the new userContextMessage

* feat(shape-7912): add demo and sandbox modal sizing functionality

* fix: apply suggestions from code review by Demetrius

Co-authored-by: Demetrius Feijóo <[email protected]>

* refactor: add text field instead

---------

Co-authored-by: Demetrius Feijóo <[email protected]>

Author: Dawntraoz

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

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

packages/demo/src/components/ContextRequester.tsx

@@ -5,8 +5,14 @@ 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">Is AI enabled: </Typography>
+      <Typography textAlign="center">
+        {data.isAIEnabled ? 'Yes' : 'No'}
+      </Typography>
       <Button
         variant="outlined"
         color="secondary"

packages/demo/src/components/ModalToggle.tsx

@@ -1,15 +1,53 @@
-import { Button, Stack, Typography } from '@mui/material'
+import { useState } from 'react'
+import { Button, Stack, Typography, TextField, Grid } from '@mui/material'
 import { PluginComponent } from './FieldPluginDemo'
+import type { ModalSize } from '@storyblok/field-plugin'
 
 export const ModalToggle: PluginComponent = (props) => {
   const { actions, data } = props
+  const [modalSize, setModalSize] = useState<ModalSize>({
+    width: '50%',
+    height: '100%',
+  })
+
   return (
     <Stack gap={2}>
       <Typography variant="subtitle1">Modal</Typography>
+      <Grid
+        container
+        spacing={2}
+      >
+        <Grid
+          xs={6}
+          item
+        >
+          <TextField
+            label="Set modal width:"
+            value={modalSize.width}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, width: e.target.value })
+            }
+          />
+        </Grid>
+        <Grid
+          xs={6}
+          item
+        >
+          <TextField
+            label="Set modal height:"
+            value={modalSize.height}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, height: e.target.value })
+            }
+          />
+        </Grid>
+      </Grid>
       <Button
         variant="outlined"
         color="secondary"
-        onClick={() => actions.setModalOpen(!data.isModalOpen)}
+        onClick={() => actions.setModalOpen(!data.isModalOpen, modalSize)}
       >
         Toggle Modal
       </Button>

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'
 
@@ -12,9 +13,9 @@ export const NonModalView: PluginComponent = (props) => (
     <Stack gap={6}>
       <ModalToggle {...props} />
       <ValueMutator {...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,19 +1,22 @@
-import { Asset, StoryData } from '../messaging'
-import { FieldPluginData } from './FieldPluginData'
+import type { Asset, StoryData, UserData, 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 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

@@ -17,6 +17,7 @@ export type FieldPluginData<Content> = {
   token: string | undefined
   uid: string
   translatable: boolean
+  isAIEnabled: boolean
   releases: Release[]
   releaseId: number | undefined
 }

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'
@@ -72,6 +73,7 @@ describe('createPluginActions', () => {
         spaceId: null,
         userId: undefined,
         blockId: undefined,
+        isAIEnabled: false,
         releases: [],
         releaseId: undefined,
       })
@@ -135,6 +137,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', () => {
@@ -175,6 +215,7 @@ describe('createPluginActions', () => {
       )
     })
   })
+
   describe('requestContext()', () => {
     it('send a message to the container to request the story', () => {
       const { uid, postToContainer, onUpdateState } = mock()
@@ -194,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,6 +64,9 @@ 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)
   }
@@ -81,6 +86,7 @@ export const createPluginActions: CreatePluginActions = ({
     onStateChange,
     onLoaded,
     onContextRequest,
+    onUserContextRequest,
     onAssetSelect,
     onUnknownMessage,
   }
@@ -107,15 +113,20 @@ export const createPluginActions: CreatePluginActions = ({
           )
         })
       },
-      setModalOpen: (isModalOpen) => {
+      setModalOpen: (isModalOpen, modalSize) => {
         return new Promise((resolve) => {
           const callbackId = pushCallback('stateChanged', (message) =>
             resolve(
               pluginStateFromStateChangeMessage(message, validateContent),
             ),
           )
           postToContainer(
-            modalChangeMessage({ uid, callbackId, status: isModalOpen }),
+            modalChangeMessage({
+              uid,
+              callbackId,
+              status: isModalOpen,
+              modalSize,
+            }),
           )
         })
       },
@@ -135,6 +146,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,