ReviewWorkflows: Render list of stages on settings page

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -42,6 +42,8 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
 const StyledBox = styled(Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};

packages/core/admin/admin/src/translations/en.json

@@ -194,6 +194,7 @@
   "Settings.profile.form.section.profile.page.title": "Profile page",
   "Settings.review-workflows.page.title": "Review Workflow",
   "Settings.review-workflows.page.subtitle": "{count, plural, one {# stage} other {# stages}}",
+  "Settings.review-workflows.stage.name.label": "Stage name",
   "Settings.roles.create.description": "Define the rights given to the role",
   "Settings.roles.create.title": "Create a role",
   "Settings.roles.created": "Role created",

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js

@@ -4,6 +4,30 @@ import { SettingsPageTitle } from '@strapi/helper-plugin';
 import { Button, ContentLayout, HeaderLayout, Layout, Main } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 
+import { Stages } from './components/Stages';
+
+const STAGES = [
+  {
+    uid: 'id-1',
+    name: 'To do',
+  },
+
+  {
+    uid: 'id-2',
+    name: 'Ready to review',
+  },
+
+  {
+    uid: 'id-3',
+    name: 'In progress',
+  },
+
+  {
+    uid: 'id-4',
+    name: 'Reviewed',
+  },
+];
+
 export function ReviewWorkflowsPage() {
   const { formatMessage } = useIntl();
 
@@ -18,7 +42,7 @@ export function ReviewWorkflowsPage() {
       <Main tabIndex={-1}>
         <HeaderLayout
           primaryAction={
-            <Button startIcon={<Check />} type="submit" size="L">
+            <Button startIcon={<Check />} type="submit" size="L" disabled>
               {formatMessage({
                 id: 'global.save',
                 defaultMessage: 'Save',
@@ -34,10 +58,12 @@ export function ReviewWorkflowsPage() {
               id: 'Settings.review-workflows.page.subtitle',
               defaultMessage: '{count, plural, one {# stage} other {# stages}}',
             },
-            { count: 0 }
+            { count: STAGES.length }
           )}
         />
-        <ContentLayout />
+        <ContentLayout>
+          <Stages stages={STAGES} />
+        </ContentLayout>
       </Main>
     </Layout>
   );

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Box,
+  Grid,
+  GridItem,
+  TextInput,
+} from '@strapi/design-system';
+
+import { StageType } from '../../../constants';
+
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
+const StyledAccordion = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+
+function Stage({ uid, name }) {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <StyledAccordion>
+      <Accordion size="S" variant="primary" onToggle={() => setIsOpen(!isOpen)} expanded={isOpen}>
+        <AccordionToggle title={name} togglePosition="left" />
+        <AccordionContent padding={6} background="neutral0">
+          <Grid gap={4}>
+            <GridItem col={6}>
+              <TextInput
+                name={`stage_name[${uid}]`}
+                disabled
+                label={formatMessage({
+                  id: 'Settings.review-workflows.stage.name.label',
+                  defaultMessage: 'Stage name',
+                })}
+                value={name}
+              />
+            </GridItem>
+          </Grid>
+        </AccordionContent>
+      </Accordion>
+    </StyledAccordion>
+  );
+}
+
+export { Stage };
+
+Stage.propTypes = PropTypes.shape(StageType).isRequired;

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/index.js

@@ -0,0 +1 @@
+export * from './Stage';

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stages.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box, Stack } from '@strapi/design-system';
+
+import { StageType } from '../../constants';
+import { Stage } from './Stage';
+
+const StagesContainer = styled(Box)`
+  position: relative;
+`;
+
+const Background = styled(Box)`
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+`;
+
+function Stages({ stages }) {
+  return (
+    <StagesContainer spacing={4}>
+      <Background background="neutral200" height="100%" width={2} zIndex={1} />
+
+      <Stack spacing={6} zIndex={2} position="relative" as="ol">
+        {stages.map(({ uid, ...stage }) => (
+          <Box key={`stage-${uid}`} as="li">
+            <Stage {...{ ...stage, uid }} />
+          </Box>
+        ))}
+      </Stack>
+    </StagesContainer>
+  );
+}
+
+export { Stages };
+
+Stages.defaultProps = {
+  stages: [],
+};
+
+Stages.propTypes = {
+  stages: PropTypes.arrayOf(StageType),
+};

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/index.js

@@ -0,0 +1 @@
+export * from './Stages';

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/constants.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const StageType = PropTypes.shape({
+  uid: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+});