@strapi/content-releases 5.12.1 → 5.12.2

package/dist/admin/components/EntryValidationPopover.mjs

@@ -0,0 +1,342 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { unstable_useDocument } from '@strapi/content-manager/strapi-admin';
+import { Flex, Popover, Button, Typography, LinkButton } from '@strapi/design-system';
+import { CrossCircle, CaretDown, CheckCircle, ArrowsCounterClockwise } from '@strapi/icons';
+import { stringify } from 'qs';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+const StyledPopoverFlex = styled(Flex)`
+  width: 100%;
+  max-width: 256px;
+
+  & > * {
+    border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+  }
+
+  & > *:last-child {
+    border-bottom: none;
+  }
+`;
+const EntryStatusTrigger = ({ action, status, hasErrors, requiredStage, entryStage })=>{
+    const { formatMessage } = useIntl();
+    if (action === 'publish') {
+        if (hasErrors || requiredStage && requiredStage.id !== entryStage?.id) {
+            return /*#__PURE__*/ jsx(Popover.Trigger, {
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    startIcon: /*#__PURE__*/ jsx(CrossCircle, {
+                        fill: "danger600"
+                    }),
+                    endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        textColor: "danger600",
+                        variant: "omega",
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: 'content-releases.pages.ReleaseDetails.entry-validation.not-ready',
+                            defaultMessage: 'Not ready to publish'
+                        })
+                    })
+                })
+            });
+        }
+        if (status === 'draft') {
+            return /*#__PURE__*/ jsx(Popover.Trigger, {
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    startIcon: /*#__PURE__*/ jsx(CheckCircle, {
+                        fill: "success600"
+                    }),
+                    endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        textColor: "success600",
+                        variant: "omega",
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: 'content-releases.pages.ReleaseDetails.entry-validation.ready-to-publish',
+                            defaultMessage: 'Ready to publish'
+                        })
+                    })
+                })
+            });
+        }
+        if (status === 'modified') {
+            return /*#__PURE__*/ jsx(Popover.Trigger, {
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    startIcon: /*#__PURE__*/ jsx(ArrowsCounterClockwise, {
+                        fill: "alternative600"
+                    }),
+                    endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        variant: "omega",
+                        fontWeight: "bold",
+                        textColor: "alternative600",
+                        children: formatMessage({
+                            id: 'content-releases.pages.ReleaseDetails.entry-validation.modified',
+                            defaultMessage: 'Ready to publish changes'
+                        })
+                    })
+                })
+            });
+        }
+        return /*#__PURE__*/ jsx(Popover.Trigger, {
+            children: /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                startIcon: /*#__PURE__*/ jsx(CheckCircle, {
+                    fill: "success600"
+                }),
+                endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+                children: /*#__PURE__*/ jsx(Typography, {
+                    textColor: "success600",
+                    variant: "omega",
+                    fontWeight: "bold",
+                    children: formatMessage({
+                        id: 'content-releases.pages.ReleaseDetails.entry-validation.already-published',
+                        defaultMessage: 'Already published'
+                    })
+                })
+            })
+        });
+    }
+    if (status === 'published') {
+        return /*#__PURE__*/ jsx(Popover.Trigger, {
+            children: /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                startIcon: /*#__PURE__*/ jsx(CheckCircle, {
+                    fill: "success600"
+                }),
+                endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+                children: /*#__PURE__*/ jsx(Typography, {
+                    textColor: "success600",
+                    variant: "omega",
+                    fontWeight: "bold",
+                    children: formatMessage({
+                        id: 'content-releases.pages.ReleaseDetails.entry-validation.ready-to-unpublish',
+                        defaultMessage: 'Ready to unpublish'
+                    })
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Popover.Trigger, {
+        children: /*#__PURE__*/ jsx(Button, {
+            variant: "ghost",
+            startIcon: /*#__PURE__*/ jsx(CheckCircle, {
+                fill: "success600"
+            }),
+            endIcon: /*#__PURE__*/ jsx(CaretDown, {}),
+            children: /*#__PURE__*/ jsx(Typography, {
+                textColor: "success600",
+                variant: "omega",
+                fontWeight: "bold",
+                children: formatMessage({
+                    id: 'content-releases.pages.ReleaseDetails.entry-validation.already-unpublished',
+                    defaultMessage: 'Already unpublished'
+                })
+            })
+        })
+    });
+};
+const FieldsValidation = ({ hasErrors, errors, kind, contentTypeUid, documentId, locale })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        gap: 1,
+        width: "100%",
+        padding: 5,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: 'content-releases.pages.ReleaseDetails.entry-validation.fields',
+                            defaultMessage: 'Fields'
+                        })
+                    }),
+                    hasErrors ? /*#__PURE__*/ jsx(CrossCircle, {
+                        fill: "danger600"
+                    }) : /*#__PURE__*/ jsx(CheckCircle, {
+                        fill: "success600"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                width: "100%",
+                textColor: "neutral600",
+                children: hasErrors ? formatMessage({
+                    id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.error',
+                    defaultMessage: '{errors} errors on fields.'
+                }, {
+                    errors: errors ? Object.keys(errors).length : 0
+                }) : formatMessage({
+                    id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.success',
+                    defaultMessage: 'All fields are filled correctly.'
+                })
+            }),
+            hasErrors && /*#__PURE__*/ jsx(LinkButton, {
+                tag: Link,
+                to: {
+                    pathname: `/content-manager/${kind === 'collectionType' ? 'collection-types' : 'single-types'}/${contentTypeUid}/${documentId}`,
+                    search: locale ? stringify({
+                        plugins: {
+                            i18n: {
+                                locale
+                            }
+                        }
+                    }) : ''
+                },
+                variant: "secondary",
+                fullWidth: true,
+                state: {
+                    forceValidation: true
+                },
+                children: formatMessage({
+                    id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.see-errors',
+                    defaultMessage: 'See errors'
+                })
+            })
+        ]
+    });
+};
+const getReviewStageIcon = ({ contentTypeHasReviewWorkflow, requiredStage, entryStage })=>{
+    if (!contentTypeHasReviewWorkflow) {
+        return /*#__PURE__*/ jsx(CheckCircle, {
+            fill: "neutral200"
+        });
+    }
+    if (requiredStage && requiredStage.id !== entryStage?.id) {
+        return /*#__PURE__*/ jsx(CrossCircle, {
+            fill: "danger600"
+        });
+    }
+    return /*#__PURE__*/ jsx(CheckCircle, {
+        fill: "success600"
+    });
+};
+const getReviewStageMessage = ({ contentTypeHasReviewWorkflow, requiredStage, entryStage, formatMessage })=>{
+    if (!contentTypeHasReviewWorkflow) {
+        return formatMessage({
+            id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.not-enabled',
+            defaultMessage: 'This entry is not associated to any workflow.'
+        });
+    }
+    if (requiredStage && requiredStage.id !== entryStage?.id) {
+        return formatMessage({
+            id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.not-ready',
+            defaultMessage: 'This entry is not at the required stage for publishing. ({stageName})'
+        }, {
+            stageName: requiredStage?.name ?? ''
+        });
+    }
+    if (requiredStage && requiredStage.id === entryStage?.id) {
+        return formatMessage({
+            id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.ready',
+            defaultMessage: 'This entry is at the required stage for publishing. ({stageName})'
+        }, {
+            stageName: requiredStage?.name ?? ''
+        });
+    }
+    return formatMessage({
+        id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.stage-not-required',
+        defaultMessage: 'No required stage for publication'
+    });
+};
+const ReviewStageValidation = ({ contentTypeHasReviewWorkflow, requiredStage, entryStage })=>{
+    const { formatMessage } = useIntl();
+    const Icon = getReviewStageIcon({
+        contentTypeHasReviewWorkflow,
+        requiredStage,
+        entryStage
+    });
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        gap: 1,
+        width: "100%",
+        padding: 5,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage',
+                            defaultMessage: 'Review stage'
+                        })
+                    }),
+                    Icon
+                ]
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral600",
+                children: getReviewStageMessage({
+                    contentTypeHasReviewWorkflow,
+                    requiredStage,
+                    entryStage,
+                    formatMessage
+                })
+            })
+        ]
+    });
+};
+const EntryValidationPopover = ({ schema, entry, status, action })=>{
+    const { validate, isLoading } = unstable_useDocument({
+        collectionType: schema?.kind ?? '',
+        model: schema?.uid ?? ''
+    }, {
+        // useDocument makes a request to get more data about the entry, but we only want to have the validation function so we skip the request
+        skip: true
+    });
+    // Validation errors
+    const errors = isLoading ? null : validate(entry);
+    const hasErrors = errors ? Object.keys(errors).length > 0 : false;
+    // Entry stage
+    const contentTypeHasReviewWorkflow = schema?.hasReviewWorkflow ?? false;
+    const requiredStage = schema?.stageRequiredToPublish;
+    const entryStage = entry.strapi_stage;
+    if (isLoading) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        children: [
+            /*#__PURE__*/ jsx(EntryStatusTrigger, {
+                action: action,
+                status: status,
+                hasErrors: hasErrors,
+                requiredStage: requiredStage,
+                entryStage: entryStage
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                children: /*#__PURE__*/ jsxs(StyledPopoverFlex, {
+                    direction: "column",
+                    children: [
+                        /*#__PURE__*/ jsx(FieldsValidation, {
+                            hasErrors: hasErrors,
+                            errors: errors,
+                            contentTypeUid: schema?.uid,
+                            kind: schema?.kind,
+                            documentId: entry.documentId,
+                            locale: entry.locale
+                        }),
+                        /*#__PURE__*/ jsx(ReviewStageValidation, {
+                            contentTypeHasReviewWorkflow: contentTypeHasReviewWorkflow,
+                            requiredStage: requiredStage,
+                            entryStage: entryStage
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { EntryValidationPopover };
+//# sourceMappingURL=EntryValidationPopover.mjs.map

package/dist/admin/components/EntryValidationPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntryValidationPopover.mjs","sources":["../../../admin/src/components/EntryValidationPopover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { FormErrors, FormValues } from '@strapi/admin/strapi-admin';\nimport { unstable_useDocument } from '@strapi/content-manager/strapi-admin';\nimport { Button, LinkButton, Flex, Typography, Popover } from '@strapi/design-system';\nimport { CheckCircle, CrossCircle, ArrowsCounterClockwise, CaretDown } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport { Link } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport type {\n  ReleaseAction,\n  ReleaseActionEntry,\n  Stage,\n} from '../../../shared/contracts/release-actions';\nimport type { Struct } from '@strapi/types';\n\nconst StyledPopoverFlex = styled(Flex)`\n  width: 100%;\n  max-width: 256px;\n\n  & > * {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n\n  & > *:last-child {\n    border-bottom: none;\n  }\n`;\n\ninterface EntryValidationPopoverProps {\n  action: ReleaseAction['type'];\n  schema?: Struct.ContentTypeSchema & {\n    hasReviewWorkflow: boolean;\n    stageRequiredToPublish?: Stage;\n  };\n  entry: ReleaseActionEntry;\n  status: ReleaseAction['status'];\n}\n\ninterface ValidationStatusProps {\n  action: ReleaseAction['type'];\n  status: ReleaseAction['status'];\n  hasErrors: boolean | null;\n  requiredStage?: Stage;\n  entryStage?: Stage;\n}\n\nconst EntryStatusTrigger = ({\n  action,\n  status,\n  hasErrors,\n  requiredStage,\n  entryStage,\n}: ValidationStatusProps) => {\n  const { formatMessage } = useIntl();\n\n  if (action === 'publish') {\n    if (hasErrors || (requiredStage && requiredStage.id !== entryStage?.id)) {\n      return (\n        <Popover.Trigger>\n          <Button\n            variant=\"ghost\"\n            startIcon={<CrossCircle fill=\"danger600\" />}\n            endIcon={<CaretDown />}\n          >\n            <Typography textColor=\"danger600\" variant=\"omega\" fontWeight=\"bold\">\n              {formatMessage({\n                id: 'content-releases.pages.ReleaseDetails.entry-validation.not-ready',\n                defaultMessage: 'Not ready to publish',\n              })}\n            </Typography>\n          </Button>\n        </Popover.Trigger>\n      );\n    }\n\n    if (status === 'draft') {\n      return (\n        <Popover.Trigger>\n          <Button\n            variant=\"ghost\"\n            startIcon={<CheckCircle fill=\"success600\" />}\n            endIcon={<CaretDown />}\n          >\n            <Typography textColor=\"success600\" variant=\"omega\" fontWeight=\"bold\">\n              {formatMessage({\n                id: 'content-releases.pages.ReleaseDetails.entry-validation.ready-to-publish',\n                defaultMessage: 'Ready to publish',\n              })}\n            </Typography>\n          </Button>\n        </Popover.Trigger>\n      );\n    }\n\n    if (status === 'modified') {\n      return (\n        <Popover.Trigger>\n          <Button\n            variant=\"ghost\"\n            startIcon={<ArrowsCounterClockwise fill=\"alternative600\" />}\n            endIcon={<CaretDown />}\n          >\n            <Typography variant=\"omega\" fontWeight=\"bold\" textColor=\"alternative600\">\n              {formatMessage({\n                id: 'content-releases.pages.ReleaseDetails.entry-validation.modified',\n                defaultMessage: 'Ready to publish changes',\n              })}\n            </Typography>\n          </Button>\n        </Popover.Trigger>\n      );\n    }\n\n    return (\n      <Popover.Trigger>\n        <Button\n          variant=\"ghost\"\n          startIcon={<CheckCircle fill=\"success600\" />}\n          endIcon={<CaretDown />}\n        >\n          <Typography textColor=\"success600\" variant=\"omega\" fontWeight=\"bold\">\n            {formatMessage({\n              id: 'content-releases.pages.ReleaseDetails.entry-validation.already-published',\n              defaultMessage: 'Already published',\n            })}\n          </Typography>\n        </Button>\n      </Popover.Trigger>\n    );\n  }\n\n  if (status === 'published') {\n    return (\n      <Popover.Trigger>\n        <Button\n          variant=\"ghost\"\n          startIcon={<CheckCircle fill=\"success600\" />}\n          endIcon={<CaretDown />}\n        >\n          <Typography textColor=\"success600\" variant=\"omega\" fontWeight=\"bold\">\n            {formatMessage({\n              id: 'content-releases.pages.ReleaseDetails.entry-validation.ready-to-unpublish',\n              defaultMessage: 'Ready to unpublish',\n            })}\n          </Typography>\n        </Button>\n      </Popover.Trigger>\n    );\n  }\n\n  return (\n    <Popover.Trigger>\n      <Button variant=\"ghost\" startIcon={<CheckCircle fill=\"success600\" />} endIcon={<CaretDown />}>\n        <Typography textColor=\"success600\" variant=\"omega\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'content-releases.pages.ReleaseDetails.entry-validation.already-unpublished',\n            defaultMessage: 'Already unpublished',\n          })}\n        </Typography>\n      </Button>\n    </Popover.Trigger>\n  );\n};\n\ninterface FieldsValidationProps {\n  hasErrors: boolean;\n  errors: FormErrors<FormValues> | null;\n  kind?: string;\n  contentTypeUid?: string;\n  documentId?: string;\n  locale?: string;\n}\n\nconst FieldsValidation = ({\n  hasErrors,\n  errors,\n  kind,\n  contentTypeUid,\n  documentId,\n  locale,\n}: FieldsValidationProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex direction=\"column\" gap={1} width=\"100%\" padding={5}>\n      <Flex gap={2} width=\"100%\">\n        <Typography fontWeight=\"bold\">\n          {formatMessage({\n            id: 'content-releases.pages.ReleaseDetails.entry-validation.fields',\n            defaultMessage: 'Fields',\n          })}\n        </Typography>\n        {hasErrors ? <CrossCircle fill=\"danger600\" /> : <CheckCircle fill=\"success600\" />}\n      </Flex>\n      <Typography width=\"100%\" textColor=\"neutral600\">\n        {hasErrors\n          ? formatMessage(\n              {\n                id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.error',\n                defaultMessage: '{errors} errors on fields.',\n              },\n              { errors: errors ? Object.keys(errors).length : 0 }\n            )\n          : formatMessage({\n              id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.success',\n              defaultMessage: 'All fields are filled correctly.',\n            })}\n      </Typography>\n      {hasErrors && (\n        <LinkButton\n          tag={Link}\n          to={{\n            pathname: `/content-manager/${kind === 'collectionType' ? 'collection-types' : 'single-types'}/${contentTypeUid}/${documentId}`,\n            search: locale\n              ? stringify({\n                  plugins: {\n                    i18n: {\n                      locale,\n                    },\n                  },\n                })\n              : '',\n          }}\n          variant=\"secondary\"\n          fullWidth\n          state={{ forceValidation: true }}\n        >\n          {formatMessage({\n            id: 'content-releases.pages.ReleaseDetails.entry-validation.fields.see-errors',\n            defaultMessage: 'See errors',\n          })}\n        </LinkButton>\n      )}\n    </Flex>\n  );\n};\n\nconst getReviewStageIcon = ({\n  contentTypeHasReviewWorkflow,\n  requiredStage,\n  entryStage,\n}: {\n  contentTypeHasReviewWorkflow: boolean;\n  requiredStage?: Stage;\n  entryStage?: Stage;\n}) => {\n  if (!contentTypeHasReviewWorkflow) {\n    return <CheckCircle fill=\"neutral200\" />;\n  }\n  if (requiredStage && requiredStage.id !== entryStage?.id) {\n    return <CrossCircle fill=\"danger600\" />;\n  }\n  return <CheckCircle fill=\"success600\" />;\n};\n\nconst getReviewStageMessage = ({\n  contentTypeHasReviewWorkflow,\n  requiredStage,\n  entryStage,\n  formatMessage,\n}: {\n  contentTypeHasReviewWorkflow: boolean;\n  requiredStage?: Stage;\n  entryStage?: Stage;\n  formatMessage: (messageDescriptor: MessageDescriptor, values?: Record<string, string>) => string;\n}) => {\n  if (!contentTypeHasReviewWorkflow) {\n    return formatMessage({\n      id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.not-enabled',\n      defaultMessage: 'This entry is not associated to any workflow.',\n    });\n  }\n\n  if (requiredStage && requiredStage.id !== entryStage?.id) {\n    return formatMessage(\n      {\n        id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.not-ready',\n        defaultMessage: 'This entry is not at the required stage for publishing. ({stageName})',\n      },\n      {\n        stageName: requiredStage?.name ?? '',\n      }\n    );\n  }\n\n  if (requiredStage && requiredStage.id === entryStage?.id) {\n    return formatMessage(\n      {\n        id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.ready',\n        defaultMessage: 'This entry is at the required stage for publishing. ({stageName})',\n      },\n      {\n        stageName: requiredStage?.name ?? '',\n      }\n    );\n  }\n\n  return formatMessage({\n    id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage.stage-not-required',\n    defaultMessage: 'No required stage for publication',\n  });\n};\n\nconst ReviewStageValidation = ({\n  contentTypeHasReviewWorkflow,\n  requiredStage,\n  entryStage,\n}: {\n  contentTypeHasReviewWorkflow: boolean;\n  requiredStage?: Stage;\n  entryStage?: Stage;\n}) => {\n  const { formatMessage } = useIntl();\n\n  const Icon = getReviewStageIcon({\n    contentTypeHasReviewWorkflow,\n    requiredStage,\n    entryStage,\n  });\n\n  return (\n    <Flex direction=\"column\" gap={1} width=\"100%\" padding={5}>\n      <Flex gap={2} width=\"100%\">\n        <Typography fontWeight=\"bold\">\n          {formatMessage({\n            id: 'content-releases.pages.ReleaseDetails.entry-validation.review-stage',\n            defaultMessage: 'Review stage',\n          })}\n        </Typography>\n        {Icon}\n      </Flex>\n      <Typography textColor=\"neutral600\">\n        {getReviewStageMessage({\n          contentTypeHasReviewWorkflow,\n          requiredStage,\n          entryStage,\n          formatMessage,\n        })}\n      </Typography>\n    </Flex>\n  );\n};\n\nexport const EntryValidationPopover = ({\n  schema,\n  entry,\n  status,\n  action,\n}: EntryValidationPopoverProps) => {\n  const { validate, isLoading } = unstable_useDocument(\n    {\n      collectionType: schema?.kind ?? '',\n      model: schema?.uid ?? '',\n    },\n    {\n      // useDocument makes a request to get more data about the entry, but we only want to have the validation function so we skip the request\n      skip: true,\n    }\n  );\n\n  // Validation errors\n  const errors = isLoading ? null : validate(entry);\n  const hasErrors = errors ? Object.keys(errors).length > 0 : false;\n\n  // Entry stage\n  const contentTypeHasReviewWorkflow = schema?.hasReviewWorkflow ?? false;\n  const requiredStage = schema?.stageRequiredToPublish;\n  const entryStage = entry.strapi_stage;\n\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    <Popover.Root>\n      <EntryStatusTrigger\n        action={action}\n        status={status}\n        hasErrors={hasErrors}\n        requiredStage={requiredStage}\n        entryStage={entryStage}\n      />\n      <Popover.Content>\n        <StyledPopoverFlex direction=\"column\">\n          <FieldsValidation\n            hasErrors={hasErrors}\n            errors={errors}\n            contentTypeUid={schema?.uid}\n            kind={schema?.kind}\n            documentId={entry.documentId}\n            locale={entry.locale}\n          />\n          <ReviewStageValidation\n            contentTypeHasReviewWorkflow={contentTypeHasReviewWorkflow}\n            requiredStage={requiredStage}\n            entryStage={entryStage}\n          />\n        </StyledPopoverFlex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n"],"names":["StyledPopoverFlex","styled","Flex","theme","colors","neutral150","EntryStatusTrigger","action","status","hasErrors","requiredStage","entryStage","formatMessage","useIntl","id","_jsx","Popover","Trigger","Button","variant","startIcon","CrossCircle","fill","endIcon","CaretDown","Typography","textColor","fontWeight","defaultMessage","CheckCircle","ArrowsCounterClockwise","FieldsValidation","errors","kind","contentTypeUid","documentId","locale","_jsxs","direction","gap","width","padding","Object","keys","length","LinkButton","tag","Link","to","pathname","search","stringify","plugins","i18n","fullWidth","state","forceValidation","getReviewStageIcon","contentTypeHasReviewWorkflow","getReviewStageMessage","stageName","name","ReviewStageValidation","Icon","EntryValidationPopover","schema","entry","validate","isLoading","unstable_useDocument","collectionType","model","uid","skip","hasReviewWorkflow","stageRequiredToPublish","strapi_stage","Root","Content"],"mappings":"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"}

package/dist/admin/components/RelativeTime.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dateFns = require('date-fns');
+var reactIntl = require('react-intl');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const intervals = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+/**
+ * Displays the relative time between a given timestamp and the current time.
+ * You can display a custom message for given time intervals by passing an array of custom intervals.
+ *
+ * @example
+ * ```jsx
+ * <caption>Display "last hour" if the timestamp is less than an hour ago</caption>
+ * <RelativeTime
+ *  timestamp={new Date('2021-01-01')}
+ *  customIntervals={[
+ *   { unit: 'hours', threshold: 1, text: 'last hour' },
+ *  ]}
+ * ```
+ */ const RelativeTime = /*#__PURE__*/ React__namespace.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
+    const { formatRelativeTime, formatDate, formatTime } = reactIntl.useIntl();
+    /**
+     * TODO: make this auto-update, like a clock.
+     */ const interval = dateFns.intervalToDuration({
+        start: timestamp,
+        end: Date.now()
+    });
+    const unit = intervals.find((intervalUnit)=>{
+        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    });
+    const relativeTime = dateFns.isPast(timestamp) ? -interval[unit] : interval[unit];
+    // Display custom text if interval is less than the threshold
+    const customInterval = customIntervals.find((custom)=>interval[custom.unit] < custom.threshold);
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, {
+        numeric: 'auto'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx("time", {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+    });
+});
+
+exports.RelativeTime = RelativeTime;
+//# sourceMappingURL=RelativeTime.js.map

package/dist/admin/components/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sources":["../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit = intervals.find((intervalUnit) => {\n      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n    })!;\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,SAAmC,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACKC,MAAAA,YAAAA,iBAAeC,gBAAMC,CAAAA,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAkB,GAAA,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,iBAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,0BAAmB,CAAA;QAClCC,KAAOV,EAAAA,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAOlB,GAAAA,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QAC3B,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAUW,CAAAA,CAAAA,QAAQ,CAACH,YAAAA,CAAAA;AACtE,KAAA,CAAA;IAEA,MAAMI,YAAAA,GAAeC,cAAOrB,CAAAA,SAAAA,CAAAA,GAAa,CAACQ,QAAQ,CAACM,IAAK,CAAA,GAAGN,QAAQ,CAACM,IAAK,CAAA;;AAGzE,IAAA,MAAMQ,cAAiBrB,GAAAA,eAAAA,CAAgBc,IAAI,CACzC,CAACQ,MAAAA,GAAWf,QAAQ,CAACe,MAAOT,CAAAA,IAAI,CAAC,GAAGS,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAChBA,GAAAA,cAAAA,CAAeI,IAAI,GACnBtB,kBAAAA,CAAmBgB,cAAcN,IAAM,EAAA;QAAEa,OAAS,EAAA;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,cAACC,CAAAA,MAAAA,EAAAA;QACCC,GAAK3B,EAAAA,YAAAA;AACL4B,QAAAA,QAAAA,EAAU/B,UAAUgC,WAAW,EAAA;QAC/BC,IAAK,EAAA,MAAA;QACLC,KAAO,EAAA,CAAC,EAAE7B,UAAWL,CAAAA,SAAAA,CAAAA,CAAW,CAAC,EAAEM,UAAAA,CAAWN,WAAW,CAAC;AACzD,QAAA,GAAGE,SAAS;AAEZuB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}

package/dist/admin/components/RelativeTime.mjs

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { intervalToDuration, isPast } from 'date-fns';
+import { useIntl } from 'react-intl';
+
+const intervals = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+/**
+ * Displays the relative time between a given timestamp and the current time.
+ * You can display a custom message for given time intervals by passing an array of custom intervals.
+ *
+ * @example
+ * ```jsx
+ * <caption>Display "last hour" if the timestamp is less than an hour ago</caption>
+ * <RelativeTime
+ *  timestamp={new Date('2021-01-01')}
+ *  customIntervals={[
+ *   { unit: 'hours', threshold: 1, text: 'last hour' },
+ *  ]}
+ * ```
+ */ const RelativeTime = /*#__PURE__*/ React.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
+    const { formatRelativeTime, formatDate, formatTime } = useIntl();
+    /**
+     * TODO: make this auto-update, like a clock.
+     */ const interval = intervalToDuration({
+        start: timestamp,
+        end: Date.now()
+    });
+    const unit = intervals.find((intervalUnit)=>{
+        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    });
+    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
+    // Display custom text if interval is less than the threshold
+    const customInterval = customIntervals.find((custom)=>interval[custom.unit] < custom.threshold);
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, {
+        numeric: 'auto'
+    });
+    return /*#__PURE__*/ jsx("time", {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+    });
+});
+
+export { RelativeTime };
+//# sourceMappingURL=RelativeTime.mjs.map

package/dist/admin/components/RelativeTime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.mjs","sources":["../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit = intervals.find((intervalUnit) => {\n      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n    })!;\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;AAKA,MAAMA,SAAmC,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACKC,MAAAA,YAAAA,iBAAeC,KAAMC,CAAAA,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAkB,GAAA,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,OAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,kBAAmB,CAAA;QAClCC,KAAOV,EAAAA,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IAAOlB,GAAAA,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QAC3B,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAUW,CAAAA,CAAAA,QAAQ,CAACH,YAAAA,CAAAA;AACtE,KAAA,CAAA;IAEA,MAAMI,YAAAA,GAAeC,MAAOrB,CAAAA,SAAAA,CAAAA,GAAa,CAACQ,QAAQ,CAACM,IAAK,CAAA,GAAGN,QAAQ,CAACM,IAAK,CAAA;;AAGzE,IAAA,MAAMQ,cAAiBrB,GAAAA,eAAAA,CAAgBc,IAAI,CACzC,CAACQ,MAAAA,GAAWf,QAAQ,CAACe,MAAOT,CAAAA,IAAI,CAAC,GAAGS,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAChBA,GAAAA,cAAAA,CAAeI,IAAI,GACnBtB,kBAAAA,CAAmBgB,cAAcN,IAAM,EAAA;QAAEa,OAAS,EAAA;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,GAACC,CAAAA,MAAAA,EAAAA;QACCC,GAAK3B,EAAAA,YAAAA;AACL4B,QAAAA,QAAAA,EAAU/B,UAAUgC,WAAW,EAAA;QAC/BC,IAAK,EAAA,MAAA;QACLC,KAAO,EAAA,CAAC,EAAE7B,UAAWL,CAAAA,SAAAA,CAAAA,CAAW,CAAC,EAAEM,UAAAA,CAAWN,WAAW,CAAC;AACzD,QAAA,GAAGE,SAAS;AAEZuB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}