Add modal condition button

packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/Wrapper.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-  height: 36px;
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  margin-bottom: 18px;
-  background-color: ${({ theme, isGrey }) =>
-    isGrey ? theme.main.colors.content.background : theme.main.colors.white};
-`;
-
-export default Wrapper;

packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, Padded, Flex } from '@buffetjs/core';
+import { Row, TableLabel } from '@strapi/parts';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import ConditionsSelect from '../ConditionsSelect';
-import Wrapper from './Wrapper';
+
+const RowWrapper = styled(Row)`
+  height: 52px;
+`;
 
 const ActionRow = ({
   arrayOfOptionsGroupedByCategory,
@@ -19,50 +23,27 @@ const ActionRow = ({
   const { formatMessage } = useIntl();
 
   return (
-    <Wrapper isGrey={isGrey}>
-      <Padded style={{ width: 200 }} top left right bottom size="sm">
-        <Flex>
-          <Text
-            lineHeight="19px"
-            color="grey"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            {formatMessage({
-              id: 'Settings.permissions.conditions.can',
-            })}
-            &nbsp;
-          </Text>
-          <Text
-            title={label}
-            lineHeight="19px"
-            fontWeight="bold"
-            fontSize="xs"
-            textTransform="uppercase"
-            color="mediumBlue"
-            style={{ maxWidth: '60%' }}
-            ellipsis
-          >
-            {formatMessage({
-              id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
-              defaultMessage: label,
-            })}
-          </Text>
-          <Text
-            lineHeight="19px"
-            color="grey"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            &nbsp;
-            {formatMessage({
-              id: 'Settings.permissions.conditions.when',
-            })}
-          </Text>
-        </Flex>
-      </Padded>
+    <RowWrapper background={isGrey ? 'neutral100' : 'neutral0'}>
+      <Row paddingLeft={6} style={{ width: 180 }}>
+        <TableLabel textColor="neutral500">
+          {formatMessage({
+            id: 'Settings.permissions.conditions.can',
+          })}
+          &nbsp;
+        </TableLabel>
+        <TableLabel title={label} textColor="primary600">
+          {formatMessage({
+            id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+            defaultMessage: label,
+          })}
+        </TableLabel>
+        <TableLabel textColor="neutral500">
+          &nbsp;
+          {formatMessage({
+            id: 'Settings.permissions.conditions.when',
+          })}
+        </TableLabel>
+      </Row>
       <ConditionsSelect
         arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
         name={name}
@@ -71,7 +52,7 @@ const ActionRow = ({
         onChange={onChange}
         value={value}
       />
-    </Wrapper>
+    </RowWrapper>
   );
 };
 

packages/core/admin/admin/src/components/Roles/ConditionsModal/Separator.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const Separator = styled.div`
-  padding-top: 1.4rem;
-  margin-bottom: 2.8rem;
-  border-bottom: 1px solid ${({ theme }) => theme.main.colors.brightGrey};
-`;
-
-export default Separator;

packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js

@@ -1,14 +1,38 @@
-import React, { useMemo, useState } from 'react';
+import { After } from '@strapi/icons';
+import {
+  Box,
+  Button,
+  H2,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
+  Stack,
+  Text,
+  TextButton,
+} from '@strapi/parts';
+import { cloneDeep, get, groupBy, set, upperFirst } from 'lodash';
 import PropTypes from 'prop-types';
-import { cloneDeep, get, groupBy, set } from 'lodash';
-import { Modal, ModalHeader, ModalFooter } from '@strapi/helper-plugin';
-import { Button, Text, Padded } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
+import React, { useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import styled from 'styled-components';
 import { usePermissionsDataManager } from '../../../hooks';
-import createDefaultConditionsForm from './utils/createDefaultConditionsForm';
-import ActionRow from './ActionRow';
-import Separator from './Separator';
 import updateValues from '../Permissions/utils/updateValues';
+import ActionRow from './ActionRow';
+import createDefaultConditionsForm from './utils/createDefaultConditionsForm';
+
+// ! Something needs to be done in the DS parts to avoid doing this
+const Icon = styled(Box)`
+  svg {
+    width: 6px;
+  }
+  * {
+    fill: ${({ theme }) => theme.colors.neutral300};
+  }
+`;
+
+const Separator = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.main.colors.brightGrey};
+`;
 
 const ConditionsModal = ({
   actions,
@@ -21,6 +45,11 @@ const ConditionsModal = ({
   const { formatMessage } = useIntl();
   const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
 
+  const translatedHeaders = headerBreadCrumbs.map(headerTrad => ({
+    key: headerTrad,
+    element: <FormattedMessage id={headerTrad} defaultMessage={upperFirst(headerTrad)} />,
+  }));
+
   const arrayOfOptionsGroupedByCategory = useMemo(() => {
     return Object.entries(groupBy(availableConditions, 'category'));
   }, [availableConditions]);
@@ -79,53 +108,77 @@ const ConditionsModal = ({
     onToggle();
   };
 
-  return (
-    <Modal withoverflow="true" onClosed={onClosed} isOpen={isOpen} onToggle={onToggle}>
-      <ModalHeader headerBreadcrumbs={headerBreadCrumbs} />
-      <Padded top left right bottom size="md">
-        <Text fontSize="lg" fontWeight="bold">
-          {formatMessage({
-            id: 'Settings.permissions.conditions.define-conditions',
-          })}
-        </Text>
-        <Separator />
-        {actionsToDisplay.length === 0 && (
-          <Text fontSize="md" color="grey">
-            {formatMessage({ id: 'Settings.permissions.conditions.no-actions' })}
-          </Text>
-        )}
-        {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
-          const name = pathToConditionsObject.join('..');
+  if (!isOpen) return null;
 
-          return (
-            <ActionRow
-              key={actionId}
-              arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
-              label={label}
-              isFormDisabled={isFormDisabled}
-              isGrey={index % 2 === 0}
-              name={name}
-              onCategoryChange={handleCategoryChange}
-              onChange={handleChange}
-              value={get(state, name, {})}
-            />
-          );
-        })}
-      </Padded>
-      <ModalFooter>
-        <section>
-          <Button type="button" color="cancel" onClick={onToggle}>
+  return (
+    <ModalLayout onClose={onClosed}>
+      <ModalHeader>
+        <Stack horizontal size={3}>
+          {translatedHeaders.map(({ key, element }, index) => {
+            const shouldDisplayChevron = index < translatedHeaders.length - 1;
+
+            return (
+              <>
+                <TextButton textColor="neutral800" key={key}>
+                  {element}
+                </TextButton>
+                {shouldDisplayChevron && (
+                  <Icon>
+                    <After />
+                  </Icon>
+                )}
+              </>
+            );
+          })}
+        </Stack>
+      </ModalHeader>
+      <Box padding={8}>
+        <Stack size={6}>
+          <H2>
+            {formatMessage({
+              id: 'Settings.permissions.conditions.define-conditions',
+            })}
+          </H2>
+          <Separator />
+          <Box>
+            {actionsToDisplay.length === 0 && (
+              <Text>{formatMessage({ id: 'Settings.permissions.conditions.no-actions' })}</Text>
+            )}
+            {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
+              const name = pathToConditionsObject.join('..');
+
+              return (
+                <ActionRow
+                  key={actionId}
+                  arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
+                  label={label}
+                  isFormDisabled={isFormDisabled}
+                  isGrey={index % 2 === 0}
+                  name={name}
+                  onCategoryChange={handleCategoryChange}
+                  onChange={handleChange}
+                  value={get(state, name, {})}
+                />
+              );
+            })}
+          </Box>
+        </Stack>
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button variant="tertiary" onClick={onToggle}>
             {formatMessage({ id: 'app.components.Button.cancel' })}
           </Button>
-
-          <Button type="button" color="success" onClick={handleSubmit}>
+        }
+        endActions={
+          <Button onClick={handleSubmit}>
             {formatMessage({
               id: 'Settings.permissions.conditions.apply',
             })}
           </Button>
-        </section>
-      </ModalFooter>
-    </Modal>
+        }
+      />
+    </ModalLayout>
   );
 };
 

packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js

@@ -64,8 +64,8 @@ const Chevron = styled(Box)`
 
 const TinyDot = styled(Box)`
   position: absolute;
-  top: 0;
-  left: 35px;
+  top: -6px;
+  left: 37px;
   width: 6px;
   height: 6px;
   border-radius: 20px;

packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -23,6 +23,7 @@ const Cell = styled(Box)`
   position: relative;
 `;
 
+// ! Something needs to be done in the DS parts to avoid doing this
 const Chevron = styled(Box)`
   display: none;
   svg {