@strapi/content-manager 0.0.0-next.daa3d4c4db6322f58233f0ccb757d80dbd1b48e9 → 0.0.0-next.df0d99415fc543d9747f3946fd7d1a4c39052b95

package/dist/admin/pages/ListView/components/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableActions.js","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({ model, sourceId: documentId });\n\n      if ('data' in res) {\n        navigate(res.data.documentId);\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":"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"}
+{"version":3,"file":"TableActions.js","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, any> }>();\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({\n        model,\n        sourceId: documentId,\n        locale: query.plugins?.i18n?.locale,\n      });\n\n      if ('data' in res) {\n        navigate({\n          pathname: res.data.documentId,\n          search: stringify({\n            plugins: query.plugins,\n          }),\n        });\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n                search: stringify({\n                  plugins: query.plugins,\n                }),\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","locale","i18n","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAMA,YAAe,GAAA,CAAC,EAAEC,QAAQ,EAAqB,GAAA;IACnD,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGC,kBAAAA,EAAAA;AAClC,IAAA,MAAMC,UAAUC,wBAAa,CAAA,cAAA,EAAgB,CAACC,KAAAA,GAAUA,MAAMF,OAAO,CAAA;AAErE,IAAA,MAAMG,KAA6B,GAAA;QACjCC,SAAW,EAAA,IAAA;AACXP,QAAAA,KAAAA;AACAQ,QAAAA,UAAAA,EAAYX,SAASW,UAAU;AAC/BP,QAAAA,cAAAA;AACAJ,QAAAA;AACF,KAAA;AAEA,IAAA,qBACEY,cAACC,CAAAA,wCAAAA,EAAAA;QACCJ,KAAOA,EAAAA,KAAAA;QACPK,YAAc,EAACR,OAAO,CAAC,iBAAkB,CAAA,CAACS,IAAI,CAC3CC,kBAAkB,CAAC,WAAA,CACpB;AACCC,SAAAA,MAAM,CAAC,CAACC,MAAWA,GAAAA,MAAAA,CAAOC,IAAI,KAAK,eAAA,CAAA;kBAErC,CAACC,OAAAA,GAAAA;AACA,YAAA,MAAMC,eAAkBD,GAAAA,OAAAA,CAAQH,MAAM,CAAC,CAACC,MAAAA,GAAAA;gBACtC,MAAMI,SAAAA,GAAYC,MAAMC,OAAO,CAACN,OAAOO,QAAQ,CAAA,GAAIP,MAAOO,CAAAA,QAAQ,GAAG;AAACP,oBAAAA,MAAAA,CAAOO;AAAS,iBAAA;gBACtF,OAAOH,SAAAA,CAAUI,QAAQ,CAAC,WAAA,CAAA;AAC5B,aAAA,CAAA;AAEA,YAAA,qBACEd,cAACe,CAAAA,mCAAAA,EAAAA;gBACCP,OAASC,EAAAA,eAAAA;AACTO,gBAAAA,KAAAA,EAAO3B,aAAc,CAAA;oBACnB4B,EAAI,EAAA,mDAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,OAAQ,EAAA;;AAGd;;AAGN;AAEA;;AAEkG,qGAElG,MAAMC,UAAAA,GAAsC,CAAC,EAAErB,UAAU,EAAE,GAAA;AACzD,IAAA,MAAMsB,QAAWC,GAAAA,0BAAAA,EAAAA;IACjB,MAAM,EAAEjC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEiC,OAAO,EAAE,GAAGC,4BAAAA,CAAgB,YAAc,EAAA,CAAC,EAAED,OAAO,EAAE,IAAM;AAAEA,YAAAA;SAAQ,CAAA,CAAA;IAC9E,MAAM,EAAEE,kBAAkB,EAAE,GAAGC,2BAAAA,EAAAA;AAC/B,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,0BAAAA,EAAAA;IAEpB,OAAO;AACLC,QAAAA,QAAAA,EAAU,CAACN,OAAAA;AACXO,QAAAA,IAAAA,gBAAM9B,cAAC+B,CAAAA,YAAAA,EAAAA,EAAAA,CAAAA;AACPf,QAAAA,KAAAA,EAAO3B,aAAc,CAAA;YACnB4B,EAAI,EAAA,oCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA,CAAA;QACAL,QAAU,EAAA,WAAA;QACVmB,OAAS,EAAA,UAAA;AACP,YAAA,IAAI,CAACjC,UAAY,EAAA;AACfkC,gBAAAA,OAAAA,CAAQC,KAAK,CACX,yGAAA,CAAA;gBAGFT,kBAAmB,CAAA;AACjBU,oBAAAA,OAAAA,EAAS9C,aAAc,CAAA;wBACrB4B,EAAI,EAAA,oCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAkB,IAAM,EAAA;AACR,iBAAA,CAAA;AAEA,gBAAA;AACF;YAEAf,QAAS,CAAA;gBACPgB,QAAUtC,EAAAA,UAAAA;AACVuC,gBAAAA,MAAAA,EAAQC,YAAU,CAAA;AAChB7C,oBAAAA,OAAAA,EAASiC,MAAMjC;AACjB,iBAAA;AACF,aAAA,CAAA;AACF;AACF,KAAA;AACF,CAAA;AAEA0B,UAAAA,CAAWgB,IAAI,GAAG,MAAA;AAClBhB,UAAAA,CAAWP,QAAQ,GAAG,WAAA;AAEtB;;;AAGC,IACD,MAAMkB,YAAAA,GAAeS,uBAAOC,CAAAA,YAAAA,CAAO;;;;AAInC,CAAC;AAED,MAAMC,cAAuC,CAAC,EAAEnD,KAAK,EAAEQ,UAAU,EAAE,GAAA;AACjE,IAAA,MAAMsB,QAAWC,GAAAA,0BAAAA,EAAAA;IACjB,MAAM,EAAEjC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEqD,SAAS,EAAE,GAAGnB,4BAAAA,CAAgB,aAAe,EAAA,CAAC,EAAEmB,SAAS,EAAE,IAAM;AAAEA,YAAAA;SAAU,CAAA,CAAA;IACrF,MAAM,EAAElB,kBAAkB,EAAE,GAAGC,2BAAAA,EAAAA;IAC/B,MAAM,EAAEkB,SAAS,EAAE,GAAGC,qCAAAA,EAAAA;AACtB,IAAA,MAAM,CAACC,gBAAkBC,EAAAA,mBAAAA,CAAoB,GAAGC,gBAAMC,CAAAA,QAAQ,CAA2B,EAAE,CAAA;AAC3F,IAAA,MAAM,CAAC,EAAEtB,KAAK,EAAE,CAAC,GAAGC,0BAAAA,EAAAA;IAEpB,OAAO;AACLC,QAAAA,QAAAA,EAAU,CAACc,SAAAA;AACXb,QAAAA,IAAAA,gBAAM9B,cAACkD,CAAAA,eAAAA,EAAAA,EAAAA,CAAAA;AACPlC,QAAAA,KAAAA,EAAO3B,aAAc,CAAA;YACnB4B,EAAI,EAAA,qCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA,CAAA;QACAL,QAAU,EAAA,WAAA;QACVmB,OAAS,EAAA,UAAA;AACP,YAAA,IAAI,CAACjC,UAAY,EAAA;AACfkC,gBAAAA,OAAAA,CAAQC,KAAK,CACX,uHAAA,CAAA;gBAGFT,kBAAmB,CAAA;AACjBU,oBAAAA,OAAAA,EAAS9C,aAAc,CAAA;wBACrB4B,EAAI,EAAA,qCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAkB,IAAM,EAAA;AACR,iBAAA,CAAA;AAEA,gBAAA;AACF;YAEA,MAAMe,GAAAA,GAAM,MAAMP,SAAU,CAAA;AAC1BrD,gBAAAA,KAAAA;gBACA6D,QAAUrD,EAAAA,UAAAA;gBACVsD,MAAQ1B,EAAAA,KAAAA,CAAMjC,OAAO,EAAE4D,IAAMD,EAAAA;AAC/B,aAAA,CAAA;AAEA,YAAA,IAAI,UAAUF,GAAK,EAAA;gBACjB9B,QAAS,CAAA;oBACPgB,QAAUc,EAAAA,GAAAA,CAAII,IAAI,CAACxD,UAAU;AAC7BuC,oBAAAA,MAAAA,EAAQC,YAAU,CAAA;AAChB7C,wBAAAA,OAAAA,EAASiC,MAAMjC;AACjB,qBAAA;AACF,iBAAA,CAAA;AAEA;;AAEC,YACD,OAAO,IAAA;AACT;AAEA,YAAA,IACE8D,oBAAiBL,CAAAA,GAAAA,CAAIjB,KAAK,CAAA,IAC1BiB,GAAIjB,CAAAA,KAAK,CAACuB,OAAO,IACjB,OAAON,GAAIjB,CAAAA,KAAK,CAACuB,OAAO,KAAK,QAC7B,IAAA,kBAAA,IAAsBN,GAAIjB,CAAAA,KAAK,CAACuB,OAAO,IACvC9C,KAAMC,CAAAA,OAAO,CAACuC,GAAAA,CAAIjB,KAAK,CAACuB,OAAO,CAACX,gBAAgB,CAChD,EAAA;AACA,gBAAA,MAAMA,mBAAmBK,GAAIjB,CAAAA,KAAK,CAACuB,OAAO,CAACX,gBAAgB;gBAE3DC,mBAAoBD,CAAAA,gBAAAA,CAAAA;AACtB;AACF,SAAA;QACAY,MAAQ,EAAA;YACNtB,IAAM,EAAA,OAAA;AACNuB,YAAAA,KAAAA,EAAOtE,aAAc,CAAA;gBACnB4B,EAAI,EAAA,uDAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;AACA0C,YAAAA,OAAAA,gBAAS5D,cAAC6D,CAAAA,+CAAAA,EAAAA;gBAA0Bf,gBAAkBA,EAAAA;;YACtDgB,MAAQ,EAAA,CAAC,EAAEC,OAAO,EAAE,GAAA;gBAClB,qBACEC,eAAA,CAACC,mBAAMC,MAAM,EAAA;;sCACXlE,cAACmE,CAAAA,mBAAAA,EAAAA;4BAAOnC,OAAS+B,EAAAA,OAAAA;4BAAS5C,OAAQ,EAAA,UAAA;sCAC/B9B,aAAc,CAAA;gCACb4B,EAAI,EAAA,QAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;sCAEFlB,cAACoE,CAAAA,uBAAAA,EAAAA;4BACCC,GAAKC,EAAAA,sBAAAA;4BACLC,EAAI,EAAA;AACFlC,gCAAAA,QAAAA,EAAU,CAAC,MAAM,EAAEtC,UAAAA,CAAW,CAAC;AAC/BuC,gCAAAA,MAAAA,EAAQC,YAAU,CAAA;AAChB7C,oCAAAA,OAAAA,EAASiC,MAAMjC;AACjB,iCAAA;AACF,6BAAA;sCAECL,aAAc,CAAA;gCACb4B,EAAI,EAAA,uDAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;;AAIR;AACF;AACF,KAAA;AACF,CAAA;AAEAwB,WAAAA,CAAYN,IAAI,GAAG,OAAA;AACnBM,WAAAA,CAAY7B,QAAQ,GAAG,WAAA;AAEvB;;;AAGC,IACD,MAAMqC,eAAAA,GAAkBV,uBAAOgC,CAAAA,eAAAA,CAAU;;;;AAIzC,CAAC;AAED,MAAMC,yBAA4B,GAAA;AAACrD,IAAAA,UAAAA;AAAYsB,IAAAA;AAAY;;;;;"}

package/dist/admin/pages/ListView/components/TableActions.mjs

@@ -105,6 +105,7 @@ const CloneAction = ({ model, documentId })=>{
     const { toggleNotification } = useNotification();
     const { autoClone } = useDocumentActions();
     const [prohibitedFields, setProhibitedFields] = React.useState([]);
+    const [{ query }] = useQueryParams();
     return {
         disabled: !canCreate,
         icon: /*#__PURE__*/ jsx(StyledDuplicate, {}),
@@ -127,10 +128,16 @@ const CloneAction = ({ model, documentId })=>{
             }
             const res = await autoClone({
                 model,
-                sourceId: documentId
+                sourceId: documentId,
+                locale: query.plugins?.i18n?.locale
             });
             if ('data' in res) {
-                navigate(res.data.documentId);
+                navigate({
+                    pathname: res.data.documentId,
+                    search: stringify({
+                        plugins: query.plugins
+                    })
+                });
                 /**
          * We return true because we don't need to show a modal anymore.
          */ return true;
@@ -163,7 +170,10 @@ const CloneAction = ({ model, documentId })=>{
                         /*#__PURE__*/ jsx(LinkButton, {
                             tag: NavLink,
                             to: {
-                                pathname: `clone/${documentId}`
+                                pathname: `clone/${documentId}`,
+                                search: stringify({
+                                    plugins: query.plugins
+                                })
                             },
                             children: formatMessage({
                                 id: 'content-manager.containers.list.autoCloneModal.create',

package/dist/admin/pages/ListView/components/TableActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableActions.mjs","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({ model, sourceId: documentId });\n\n      if ('data' in res) {\n        navigate(res.data.documentId);\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":"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"}
+{"version":3,"file":"TableActions.mjs","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, any> }>();\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({\n        model,\n        sourceId: documentId,\n        locale: query.plugins?.i18n?.locale,\n      });\n\n      if ('data' in res) {\n        navigate({\n          pathname: res.data.documentId,\n          search: stringify({\n            plugins: query.plugins,\n          }),\n        });\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n                search: stringify({\n                  plugins: query.plugins,\n                }),\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","locale","i18n","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":"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"}

package/dist/admin/preview/components/PreviewSidePanel.js

@@ -24,6 +24,11 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
     const { pathname } = reactRouterDom.useLocation();
     const [{ query }] = strapiAdmin.useQueryParams();
     const isModified = strapiAdmin.useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
     /**
    * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
    * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
@@ -37,7 +42,32 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
             locale: document?.locale,
             status: document?.status
         }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
     });
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                tag: reactRouterDom.Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
     if (!data?.data?.url || error) {
         return null;
     }
@@ -50,10 +80,7 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
         });
     };
     return {
-        title: formatMessage({
-            id: 'content-manager.preview.panel.title',
-            defaultMessage: 'Preview'
-        }),
+        title,
         content: /*#__PURE__*/ jsxRuntime.jsx(ConditionalTooltip, {
             label: formatMessage({
                 id: 'content-manager.preview.panel.button-disabled-tooltip',

package/dist/admin/preview/components/PreviewSidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewSidePanel.js","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery({\n    params: {\n      contentType: model as UID.ContentType,\n    },\n    query: {\n      documentId,\n      locale: document?.locale,\n      status: document?.status,\n    },\n  });\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title: formatMessage({ id: 'content-manager.preview.panel.title', defaultMessage: 'Preview' }),\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","url","trackNavigation","destinationPathname","replace","from","to","title","id","defaultMessage","content","Box","cursor","width","Button","variant","tag","Link","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}
+{"version":3,"file":"PreviewSidePanel.js","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n  const isUnsaved = Boolean(!document || !document.id);\n\n  const title = formatMessage({\n    id: 'content-manager.preview.panel.title',\n    defaultMessage: 'Preview',\n  });\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery(\n    {\n      params: {\n        contentType: model as UID.ContentType,\n      },\n      query: {\n        documentId,\n        locale: document?.locale,\n        status: document?.status,\n      },\n    },\n    // Don't bother making the request since we won't show any UI\n    { skip: isUnsaved }\n  );\n\n  if (isUnsaved) {\n    return null;\n  }\n\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\n  // So we encourage the user to set it up.\n  if (error && error.name === 'NotFoundError') {\n    return {\n      title,\n      content: (\n        <Button\n          variant=\"tertiary\"\n          tag={Link}\n          to=\"https://docs.strapi.io/cms/features/preview\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          width=\"100%\"\n        >\n          {formatMessage({\n            id: 'content-manager.preview.panel.button-configuration',\n            defaultMessage: 'Set up preview',\n          })}\n        </Button>\n      ),\n    };\n  }\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title,\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","name","content","Button","variant","tag","Link","to","target","rel","width","url","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}

package/dist/admin/preview/components/PreviewSidePanel.mjs

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { useTracking, useQueryParams, useForm } from '@strapi/admin/strapi-admin';
-import { Box, Button, Tooltip } from '@strapi/design-system';
+import { Button, Box, Tooltip } from '@strapi/design-system';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { useLocation, Link } from 'react-router-dom';
@@ -22,6 +22,11 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
     const { pathname } = useLocation();
     const [{ query }] = useQueryParams();
     const isModified = useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
     /**
    * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
    * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
@@ -35,7 +40,32 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
             locale: document?.locale,
             status: document?.status
         }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
     });
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsx(Button, {
+                variant: "tertiary",
+                tag: Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
     if (!data?.data?.url || error) {
         return null;
     }
@@ -48,10 +78,7 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
         });
     };
     return {
-        title: formatMessage({
-            id: 'content-manager.preview.panel.title',
-            defaultMessage: 'Preview'
-        }),
+        title,
         content: /*#__PURE__*/ jsx(ConditionalTooltip, {
             label: formatMessage({
                 id: 'content-manager.preview.panel.button-disabled-tooltip',

package/dist/admin/preview/components/PreviewSidePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery({\n    params: {\n      contentType: model as UID.ContentType,\n    },\n    query: {\n      documentId,\n      locale: document?.locale,\n      status: document?.status,\n    },\n  });\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title: formatMessage({ id: 'content-manager.preview.panel.title', defaultMessage: 'Preview' }),\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","url","trackNavigation","destinationPathname","replace","from","to","title","id","defaultMessage","content","Box","cursor","width","Button","variant","tag","Link","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":";;;;;;;;;AAmBA,MAAMA,kBAAAA,GAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GAAA;AAC/E,IAAA,IAAIF,OAAS,EAAA;AACX,QAAA,qBAAOG,GAACC,CAAAA,OAAAA,EAAAA;YAAQH,KAAOA,EAAAA,KAAAA;AAAQC,YAAAA,QAAAA,EAAAA;;AACjC;IAEA,OAAOA,QAAAA;AACT,CAAA;AAEMG,MAAAA,gBAAAA,GAAmC,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAAA,EAAAA;AACrB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;AACpB,IAAA,MAAMC,aAAaC,OAAQ,CAAA,kBAAA,EAAoB,CAACC,KAAAA,GAAUA,MAAMC,QAAQ,CAAA;AAExE;;;;AAIC,MACD,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,qBAAsB,CAAA;QAC5CC,MAAQ,EAAA;YACNC,WAAanB,EAAAA;AACf,SAAA;QACAS,KAAO,EAAA;AACLR,YAAAA,UAAAA;AACAmB,YAAAA,MAAAA,EAAQlB,QAAUkB,EAAAA,MAAAA;AAClBC,YAAAA,MAAAA,EAAQnB,QAAUmB,EAAAA;AACpB;AACF,KAAA,CAAA;AAEA,IAAA,IAAI,CAACN,IAAAA,EAAMA,IAAMO,EAAAA,GAAAA,IAAON,KAAO,EAAA;QAC7B,OAAO,IAAA;AACT;AAEA,IAAA,MAAMO,eAAkB,GAAA,IAAA;;AAEtB,QAAA,MAAMC,mBAAsBjB,GAAAA,QAAAA,CAASkB,OAAO,CAAC,OAAO,EAAM,CAAA,GAAA,UAAA;AAC1DpB,QAAAA,UAAAA,CAAW,cAAgB,EAAA;YAAEqB,IAAMnB,EAAAA,QAAAA;YAAUoB,EAAIH,EAAAA;AAAoB,SAAA,CAAA;AACvE,KAAA;IAEA,OAAO;AACLI,QAAAA,KAAAA,EAAOzB,aAAc,CAAA;YAAE0B,EAAI,EAAA,qCAAA;YAAuCC,cAAgB,EAAA;AAAU,SAAA,CAAA;AAC5FC,QAAAA,OAAAA,gBACElC,GAACJ,CAAAA,kBAAAA,EAAAA;AACCE,YAAAA,KAAAA,EAAOQ,aAAc,CAAA;gBACnB0B,EAAI,EAAA,uDAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACApC,OAASiB,EAAAA,UAAAA;AAET,YAAA,QAAA,gBAAAd,GAACmC,CAAAA,GAAAA,EAAAA;gBAAIC,MAAO,EAAA,aAAA;gBAAcC,KAAM,EAAA,MAAA;AAC9B,gBAAA,QAAA,gBAAArC,GAACsC,CAAAA,MAAAA,EAAAA;oBACCC,OAAQ,EAAA,UAAA;oBACRC,GAAKC,EAAAA,IAAAA;oBACLX,EAAI,EAAA;wBAAEpB,QAAU,EAAA,SAAA;AAAWgC,wBAAAA,MAAAA,EAAQC,UAAU/B,KAAO,EAAA;4BAAEgC,MAAQ,EAAA;AAAM,yBAAA;AAAG,qBAAA;oBACvEC,OAASnB,EAAAA,eAAAA;oBACTW,KAAM,EAAA,MAAA;oBACNS,QAAUhC,EAAAA,UAAAA;AACViC,oBAAAA,aAAAA,EAAejC,aAAa,MAASkC,GAAAA,SAAAA;oBACrCC,QAAUnC,EAAAA,UAAAA,GAAa,CAAC,CAAIkC,GAAAA,SAAAA;8BAE3B1C,aAAc,CAAA;wBACb0B,EAAI,EAAA,sCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;AAKV,KAAA;AACF;;;;"}
+{"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n  const isUnsaved = Boolean(!document || !document.id);\n\n  const title = formatMessage({\n    id: 'content-manager.preview.panel.title',\n    defaultMessage: 'Preview',\n  });\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery(\n    {\n      params: {\n        contentType: model as UID.ContentType,\n      },\n      query: {\n        documentId,\n        locale: document?.locale,\n        status: document?.status,\n      },\n    },\n    // Don't bother making the request since we won't show any UI\n    { skip: isUnsaved }\n  );\n\n  if (isUnsaved) {\n    return null;\n  }\n\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\n  // So we encourage the user to set it up.\n  if (error && error.name === 'NotFoundError') {\n    return {\n      title,\n      content: (\n        <Button\n          variant=\"tertiary\"\n          tag={Link}\n          to=\"https://docs.strapi.io/cms/features/preview\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          width=\"100%\"\n        >\n          {formatMessage({\n            id: 'content-manager.preview.panel.button-configuration',\n            defaultMessage: 'Set up preview',\n          })}\n        </Button>\n      ),\n    };\n  }\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title,\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","name","content","Button","variant","tag","Link","to","target","rel","width","url","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}

package/dist/admin/preview/pages/Preview.js

@@ -13,6 +13,7 @@ var DocumentRBAC = require('../../features/DocumentRBAC.js');
 var useDocument = require('../../hooks/useDocument.js');
 var useDocumentLayout = require('../../hooks/useDocumentLayout.js');
 var FormLayout = require('../../pages/EditView/components/FormLayout.js');
+var data = require('../../pages/EditView/utils/data.js');
 var api = require('../../utils/api.js');
 var validation = require('../../utils/validation.js');
 var PreviewHeader = require('../components/PreviewHeader.js');
@@ -37,12 +38,34 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
+/* -------------------------------------------------------------------------------------------------
+ * Constants
+ * -----------------------------------------------------------------------------------------------*/ const DEVICES = [
+    {
+        name: 'desktop',
+        label: {
+            id: 'content-manager.preview.device.desktop',
+            defaultMessage: 'Desktop'
+        },
+        width: '100%',
+        height: '100%'
+    },
+    {
+        name: 'mobile',
+        label: {
+            id: 'content-manager.preview.device.mobile',
+            defaultMessage: 'Mobile'
+        },
+        width: '375px',
+        height: '667px'
+    }
+];
 const [PreviewProvider, usePreviewContext] = strapiAdmin.createContext('PreviewPage');
 /* -------------------------------------------------------------------------------------------------
  * PreviewPage
  * -----------------------------------------------------------------------------------------------*/ const AnimatedArrow = styledComponents.styled(Icons.ArrowLineLeft)`
   will-change: transform;
-  rotate: ${(props)=>props.isSideEditorOpen ? '0deg' : '180deg'};
+  rotate: ${(props)=>props.$isSideEditorOpen ? '0deg' : '180deg'};
   transition: rotate 0.2s ease-in-out;
 `;
 const PreviewPage = ()=>{
@@ -56,6 +79,8 @@ const PreviewPage = ()=>{
     const params = React__namespace.useMemo(()=>api.buildValidParams(query), [
         query
     ]);
+    const [deviceName, setDeviceName] = React__namespace.useState(DEVICES[0].name);
+    const device = DEVICES.find((d)=>d.name === deviceName) ?? DEVICES[0];
     if (!collectionType) {
         throw new Error('Could not find collectionType in url params');
     }
@@ -84,7 +109,7 @@ const PreviewPage = ()=>{
     });
     const documentLayoutResponse = useDocumentLayout.useDocumentLayout(model);
     const isLoading = previewUrlResponse.isLoading || documentLayoutResponse.isLoading || documentResponse.isLoading;
-    if (isLoading && !documentResponse.document?.documentId) {
+    if (isLoading && (!documentResponse.document?.documentId || previewUrlResponse.isLoading)) {
         return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
     }
     const initialValues = documentResponse.getInitialFormValues();
@@ -96,11 +121,17 @@ const PreviewPage = ()=>{
     }
     const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);
     const validateSync = (values, options)=>{
+        const { data: cleanedValues, removedAttributes } = data.handleInvisibleAttributes(values, {
+            schema: documentResponse.schema,
+            initialValues,
+            components: documentResponse.components
+        });
         const yupSchema = validation.createYupSchema(documentResponse.schema?.attributes, documentResponse.components, {
             status: documentResponse.document?.status,
+            removedAttributes,
             ...options
         });
-        return yupSchema.validateSync(values, {
+        return yupSchema.validateSync(cleanedValues, {
             abortEarly: false
         });
     };
@@ -137,11 +168,17 @@ const PreviewPage = ()=>{
                     initialErrors: location?.state?.forceValidation ? validateSync(initialValues, {}) : {},
                     height: "100%",
                     validate: (values, options)=>{
+                        const { data: cleanedValues, removedAttributes } = data.handleInvisibleAttributes(values, {
+                            schema: documentResponse.schema,
+                            initialValues,
+                            components: documentResponse.components
+                        });
                         const yupSchema = validation.createYupSchema(documentResponse.schema?.attributes, documentResponse.components, {
                             status: documentResponse.document?.status,
+                            removedAttributes,
                             ...options
                         });
-                        return yupSchema.validate(values, {
+                        return yupSchema.validate(cleanedValues, {
                             abortEarly: false
                         });
                     },
@@ -176,41 +213,70 @@ const PreviewPage = ()=>{
                                                 hasBackground: false
                                             })
                                         }),
-                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-                                            position: "relative",
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
                                             flex: 1,
                                             height: "100%",
                                             overflow: "hidden",
                                             children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                                    "data-testid": "preview-iframe",
-                                                    ref: iframeRef,
-                                                    src: previewUrl,
-                                                    title: formatMessage({
-                                                        id: 'content-manager.preview.panel.title',
-                                                        defaultMessage: 'Preview'
-                                                    }),
-                                                    width: "100%",
-                                                    height: "100%",
-                                                    borderWidth: 0,
-                                                    tag: "iframe"
-                                                }, previewUrl),
-                                                hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    variant: "tertiary",
-                                                    label: formatMessage(isSideEditorOpen ? {
-                                                        id: 'content-manager.preview.content.close-editor',
-                                                        defaultMessage: 'Close editor'
-                                                    } : {
-                                                        id: 'content-manager.preview.content.open-editor',
-                                                        defaultMessage: 'Open editor'
-                                                    }),
-                                                    onClick: ()=>setIsSideEditorOpen((prev)=>!prev),
-                                                    position: "absolute",
-                                                    top: 2,
-                                                    left: 2,
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(AnimatedArrow, {
-                                                        isSideEditorOpen: isSideEditorOpen
-                                                    })
+                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                    direction: "row",
+                                                    background: "neutral0",
+                                                    padding: 2,
+                                                    borderWidth: "0 0 1px 0",
+                                                    borderColor: "neutral150",
+                                                    children: [
+                                                        hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                            variant: "ghost",
+                                                            label: formatMessage(isSideEditorOpen ? {
+                                                                id: 'content-manager.preview.content.close-editor',
+                                                                defaultMessage: 'Close editor'
+                                                            } : {
+                                                                id: 'content-manager.preview.content.open-editor',
+                                                                defaultMessage: 'Open editor'
+                                                            }),
+                                                            onClick: ()=>setIsSideEditorOpen((prev)=>!prev),
+                                                            children: /*#__PURE__*/ jsxRuntime.jsx(AnimatedArrow, {
+                                                                $isSideEditorOpen: isSideEditorOpen
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                                            justifyContent: "center",
+                                                            flex: 1,
+                                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                                                                value: deviceName,
+                                                                onChange: (name)=>setDeviceName(name.toString()),
+                                                                "aria-label": formatMessage({
+                                                                    id: 'content-manager.preview.device.select',
+                                                                    defaultMessage: 'Select device type'
+                                                                }),
+                                                                children: DEVICES.map((deviceOption)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                                                        value: deviceOption.name,
+                                                                        children: formatMessage(deviceOption.label)
+                                                                    }, deviceOption.name))
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                                    direction: "column",
+                                                    justifyContent: "center",
+                                                    background: "neutral0",
+                                                    flex: 1,
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                        "data-testid": "preview-iframe",
+                                                        ref: iframeRef,
+                                                        src: previewUrl,
+                                                        title: formatMessage({
+                                                            id: 'content-manager.preview.panel.title',
+                                                            defaultMessage: 'Preview'
+                                                        }),
+                                                        width: device.width,
+                                                        height: device.height,
+                                                        borderWidth: 0,
+                                                        tag: "iframe"
+                                                    }, previewUrl)
                                                 })
                                             ]
                                         })