wip: static preview draft & publish tabs (strapi#22025)

* feat: preview tabs

* fix: re organize imports

* fix: tabs label text

* fix: import

* fix: preview close button (strapi#22027)

* fix: preview close button

* chore: remove function

* fix: typescript error

* fix: pr suggestions

* fix: padding

* fix: use paddings

* fix: pr suggestions

* fix: align to end

* chore: e2e test

* chore: remove margin bottom from tab

* chore: do not use style tag

* fix: remove unused align

* chore: update component locator to getByRole

Author: Marc-Roig

packages/core/content-manager/admin/src/preview/components/PreviewHeader.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
 
+import { useClipboard, useNotification, useQueryParams } from '@strapi/admin/strapi-admin';
 import {
-  useClipboard,
-  useHistory,
-  useNotification,
-  useQueryParams,
-} from '@strapi/admin/strapi-admin';
-import { Flex, IconButton, Typography } from '@strapi/design-system';
+  Box,
+  type BoxProps,
+  Flex,
+  IconButton,
+  Tabs,
+  Typography,
+  Grid,
+} from '@strapi/design-system';
 import { Cross, Link as LinkIcon } from '@strapi/icons';
 import { stringify } from 'qs';
-import { useIntl } from 'react-intl';
-import { Link, type To, useNavigate } from 'react-router-dom';
+import { type MessageDescriptor, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
 
 import { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';
 import { getDocumentStatus } from '../../pages/EditView/EditViewPage';
@@ -21,39 +25,19 @@ import { usePreviewContext } from '../pages/Preview';
  * -----------------------------------------------------------------------------------------------*/
 
 const ClosePreviewButton = () => {
-  const [{ query }] = useQueryParams();
-  const navigate = useNavigate();
+  const [{ query }] = useQueryParams<{
+    plugins?: Record<string, unknown>;
+  }>();
   const { formatMessage } = useIntl();
 
-  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);
-  const goBack = useHistory('BackButton', (state) => state.goBack);
-  const history = useHistory('BackButton', (state) => state.history);
-
-  const fallbackUrl: To = {
-    pathname: '..',
-    search: stringify(query, { encode: false }),
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    /**
-     * Prevent normal link behavior. We only make it an achor for accessibility reasons.
-     * The point of this logic is to act as the browser's back button when possible, and to fallback
-     * to a link behavior to the edit view when no history is available.
-     *  */
-    e.preventDefault();
-
-    if (canGoBack) {
-      goBack();
-    } else {
-      navigate(fallbackUrl);
-    }
-  };
-
   return (
     <IconButton
       tag={Link}
-      to={history.at(-1) ?? fallbackUrl}
-      onClick={handleClick}
+      relative="path"
+      to={{
+        pathname: '..',
+        search: stringify({ plugins: query.plugins }, { encode: false }),
+      }}
       label={formatMessage({
         id: 'content-manager.preview.header.close',
         defaultMessage: 'Close preview',
@@ -84,6 +68,56 @@ const Status = () => {
   return <DocumentStatus status={status} size="XS" />;
 };
 
+const PreviewTabs = () => {
+  const { formatMessage } = useIntl();
+
+  // URL query params
+  const [{ query }, setQuery] = useQueryParams<{ status: 'draft' | 'published' }>();
+
+  // Get status
+  const document = usePreviewContext('PreviewHeader', (state) => state.document);
+  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);
+  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);
+  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;
+  const documentStatus = getDocumentStatus(document, meta);
+
+  const handleTabChange = (status: string) => {
+    if (status === 'published' || status === 'draft') {
+      setQuery({ status }, 'push', true);
+    }
+  };
+
+  if (!hasDraftAndPublish) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tabs.Root variant="simple" value={query.status || 'draft'} onValueChange={handleTabChange}>
+        <Tabs.List
+          aria-label={formatMessage({
+            id: 'preview.tabs.label',
+            defaultMessage: 'Document status',
+          })}
+        >
+          <StatusTab value="draft">
+            {formatMessage({
+              id: 'content-manager.containers.List.draft',
+              defaultMessage: 'draft',
+            })}
+          </StatusTab>
+          <StatusTab value="published" disabled={documentStatus === 'draft'}>
+            {formatMessage({
+              id: 'content-manager.containers.List.published',
+              defaultMessage: 'published',
+            })}
+          </StatusTab>
+        </Tabs.List>
+      </Tabs.Root>
+    </>
+  );
+};
+
 /* -------------------------------------------------------------------------------------------------
  * PreviewHeader
  * -----------------------------------------------------------------------------------------------*/
@@ -110,32 +144,46 @@ const PreviewHeader = () => {
   };
 
   return (
-    <Flex
-      justifyContent="space-between"
+    <Grid.Root
+      gap={3}
+      gridCols={3}
+      paddingLeft={2}
+      paddingRight={2}
       background="neutral0"
-      padding={2}
       borderColor="neutral150"
       tag="header"
     >
-      <Flex gap={3}>
+      {/* Title and status */}
+      <Grid.Item xs={1} paddingTop={2} paddingBottom={2} gap={3}>
         <ClosePreviewButton />
-        <Typography tag="h1" fontWeight={600} fontSize={2}>
+        <Typography tag="h1" fontWeight={600} fontSize={2} maxWidth="200px">
           {title}
         </Typography>
-        <Status />
-      </Flex>
-      <IconButton
-        type="button"
-        label={formatMessage({
-          id: 'preview.copy.label',
-          defaultMessage: 'Copy preview link',
-        })}
-        onClick={handleCopyLink}
-      >
-        <LinkIcon />
-      </IconButton>
-    </Flex>
+        <DocumentStatus />
+      </Grid.Item>
+      {/* Tabs */}
+      <Grid.Item xs={1} marginBottom="-1px" alignItems="end" margin="auto">
+        <PreviewTabs />
+      </Grid.Item>
+      {/* Copy link */}
+      <Grid.Item xs={1} justifyContent="end" paddingTop={2} paddingBottom={2}>
+        <IconButton
+          type="button"
+          label={formatMessage({
+            id: 'preview.copy.label',
+            defaultMessage: 'Copy preview link',
+          })}
+          onClick={handleCopyLink}
+        >
+          <LinkIcon />
+        </IconButton>
+      </Grid.Item>
+    </Grid.Root>
   );
 };
 
+const StatusTab = styled(Tabs.Trigger)`
+  text-transform: uppercase;
+`;
+
 export { PreviewHeader };

packages/core/content-manager/admin/src/preview/pages/Preview.tsx

@@ -51,6 +51,7 @@ const PreviewPage = () => {
   const [{ query }] = useQueryParams<{
     plugins?: Record<string, unknown>;
   }>();
+
   const params = React.useMemo(() => buildValidParams(query), [query]);
 
   if (!collectionType) {

packages/core/content-manager/admin/src/translations/en.json

@@ -240,6 +240,7 @@
   "preview.header.close": "Close preview",
   "preview.copy.label": "Copy preview link",
   "preview.copy.success": "Copied preview link",
+  "preview.tabs.label": "Preview status",
   "relation.add": "Add relation",
   "relation.disconnect": "Remove",
   "relation.error-adding-relation": "An error occurred while trying to add the relation.",

tests/e2e/tests/content-manager/preview.spec.ts

@@ -24,7 +24,8 @@ describeOnCondition(edition === 'EE')('Preview', () => {
 
     // Check that preview opens in its own page
     await clickAndWait(page, page.getByRole('link', { name: /open preview/i }));
-    await expect(page.getByText(/^Draft$/)).toBeVisible();
+    // Draft status is visible (second Draft text is the draft tab)
+    await expect(page.getByText(/^Draft$/).nth(0)).toBeVisible();
     await expect(page.getByRole('heading', { name: /west ham post match/i })).toBeVisible();
 
     // Copies the link of the page
@@ -46,4 +47,26 @@ describeOnCondition(edition === 'EE')('Preview', () => {
 
     await expect(page.getByRole('link', { name: /open preview/i })).not.toBeVisible();
   });
+
+  test('Tabs for Draft and Publish should be visible for content type with D&P enabled', async ({
+    page,
+  }) => {
+    // Navigate to the Content Manager and open the edit view of a content type with D&P enabled
+    await clickAndWait(page, page.getByRole('link', { name: 'Content Manager' }));
+    await clickAndWait(page, page.getByRole('link', { name: 'Article' }));
+    await clickAndWait(page, page.getByRole('gridcell', { name: /west ham post match/i }));
+
+    // Check that preview opens in its own page
+    await clickAndWait(page, page.getByRole('link', { name: /open preview/i }));
+    // Draft status is visible (second Draft text is the draft tab)
+    await expect(page.getByText(/^Draft$/).nth(0)).toBeVisible();
+    await expect(page.getByRole('heading', { name: /west ham post match/i })).toBeVisible();
+
+    // Verify that Draft and Publish tabs are visible
+    await expect(page.getByRole('tab', { name: /^Draft$/ })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /^Published$/ })).toBeVisible();
+
+    // Expect the preview tab to be disabled (since the document is in draft status)
+    await expect(page.getByText(/^Published$/)).toBeDisabled();
+  });
 });