fix: modal, dialog & typography styling

2024-10-12 18:46:42 +02:00 · 2024-10-12 18:46:42 +02:00 · 00da5012d8
parent 11662c8421
commit 00da5012d8
6 changed files with 137 additions and 135 deletions
--- a/admin/src/components/ActionButtons/index.jsx
+++ b/admin/src/components/ActionButtons/index.jsx
@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { Button } from '@strapi/design-system';
+import { Button, Typography } from '@strapi/design-system';
 import { Map } from 'immutable';
 import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
@ -14,38 +14,32 @@ const ActionButtons = () => {
  const { post, get } = getFetchClient();
  const dispatch = useDispatch();
  const { toggleNotification } = useNotification();
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [actionType, setActionType] = useState('');
  const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
  const { formatMessage } = useIntl();

-  const closeModal = () => {
-    setActionType('');
-    setModalIsOpen(false);
-  };
-
-  const openModal = (type) => {
-    setActionType(type);
-    setModalIsOpen(true);
-  };
-
  return (
    <ActionButtonsStyling>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>
-        {formatMessage({ id: 'config-sync.Buttons.Import' })}
-      </Button>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>
-        {formatMessage({ id: 'config-sync.Buttons.Export' })}
-      </Button>
-      {!isEmpty(partialDiff) && (
-        <h4 style={{ display: 'inline' }}>{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</h4>
-      )}
      <ConfirmModal
-        isOpen={modalIsOpen}
-        onClose={closeModal}
-        type={actionType}
-        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get)) : dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
+        type="import"
+        trigger={(
+          <Button disabled={isEmpty(partialDiff)}>
+            {formatMessage({ id: 'config-sync.Buttons.Import' })}
+          </Button>
+        )}
+        onSubmit={(force) => dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get))}
      />
+      <ConfirmModal
+        type="export"
+        trigger={(
+          <Button disabled={isEmpty(partialDiff)}>
+            {formatMessage({ id: 'config-sync.Buttons.Export' })}
+          </Button>
+        )}
+        onSubmit={(force) => dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
+      />
+      {!isEmpty(partialDiff) && (
+        <Typography variant="epsilon">{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</Typography>
+      )}
    </ActionButtonsStyling>
  );
 };
--- a/admin/src/components/ConfigDiff/index.jsx
+++ b/admin/src/components/ConfigDiff/index.jsx
@ -8,36 +8,39 @@ import {
  Typography,
 } from '@strapi/design-system';

-const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
+const ConfigDiff = ({ oldValue, newValue, configName, trigger }) => {
  const { formatMessage } = useIntl();
-  if (!isOpen) return null;

  return (
-    <Modal.Root
-      onClose={onClose}
-      labelledBy="title"
-    >
-      <Modal.Header>
-        <Typography variant="omega" fontWeight="bold" textColor="neutral800">
-          {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
-        </Typography>
-      </Modal.Header>
-      <Modal.Body>
-        <Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
-          <Grid.Item col={6}>
-            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
-          </Grid.Item>
-          <Grid.Item col={6}>
-            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
-          </Grid.Item>
-        </Grid.Root>
-        <ReactDiffViewer
-          oldValue={JSON.stringify(oldValue, null, 2)}
-          newValue={JSON.stringify(newValue, null, 2)}
-          splitView
-          compareMethod={DiffMethod.WORDS}
-        />
-      </Modal.Body>
+    <Modal.Root>
+      <Modal.Trigger>
+        {trigger}
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Typography variant="omega" fontWeight="bold" textColor="neutral800">
+            {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
+          </Typography>
+        </Modal.Header>
+        <Modal.Body>
+          <Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
+            <Grid.Item col={6}>
+              <Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
+            </Grid.Item>
+            <Grid.Item col={6}>
+              <Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
+            </Grid.Item>
+          </Grid.Root>
+          <Typography variant="pi">
+            <ReactDiffViewer
+              oldValue={JSON.stringify(oldValue, null, 2)}
+              newValue={JSON.stringify(newValue, null, 2)}
+              splitView
+              compareMethod={DiffMethod.WORDS}
+            />
+          </Typography>
+        </Modal.Body>
+      </Modal.Content>
    </Modal.Root>
  );
 };
--- a/admin/src/components/ConfigList/ConfigListRow/index.jsx
+++ b/admin/src/components/ConfigList/ConfigListRow/index.jsx
@ -1,7 +1,7 @@
 import React from 'react';
-import { Tr, Td, Checkbox } from '@strapi/design-system';
+import { Tr, Td, Checkbox, Typography } from '@strapi/design-system';

-const CustomRow = ({ row, checked, updateValue }) => {
+const CustomRow = ({ row, checked, updateValue, ...props }) => {
  const { configName, configType, state, onClick } = row;

  const stateStyle = (stateStr) => {
@ -34,10 +34,14 @@ const CustomRow = ({ row, checked, updateValue }) => {

  return (
    <Tr
+      {...props}
      onClick={(e) => {
        if (e.target.type !== 'checkbox') {
          onClick(configType, configName);
        }
+        if (props.onClick) {
+          props.onClick(e);
+        }
      }}
      style={{ cursor: 'pointer' }}
    >
@ -49,13 +53,13 @@ const CustomRow = ({ row, checked, updateValue }) => {
        />
      </Td>
      <Td>
-        <p>{configName}</p>
+        <Typography variant="omega">{configName}</Typography>
      </Td>
      <Td>
-        <p>{configType}</p>
+        <Typography variant="omega">{configType}</Typography>
      </Td>
      <Td>
-        <p style={stateStyle(state)}>{state}</p>
+        <Typography variant="omega" style={stateStyle(state)}>{state}</Typography>
      </Td>
    </Tr>
  );
--- a/admin/src/components/ConfigList/index.jsx
+++ b/admin/src/components/ConfigList/index.jsx
@ -117,13 +117,6 @@ const ConfigList = ({ diff, isLoading }) => {

  return (
    <div>
-      <ConfigDiff
-        isOpen={openModal}
-        oldValue={originalConfig}
-        newValue={newConfig}
-        onClose={closeModal}
-        configName={cName}
-      />
      <Table colCount={4} rowCount={rows.length + 1}>
        <Thead>
          <Tr>
@ -148,14 +141,21 @@ const ConfigList = ({ diff, isLoading }) => {
        </Thead>
        <Tbody>
          {rows.map((row, index) => (
-            <ConfigListRow
+            <ConfigDiff
              key={row.configName}
-              row={row}
-              checked={checkedItems[index]}
-              updateValue={() => {
-                checkedItems[index] = !checkedItems[index];
-                setCheckedItems([...checkedItems]);
-              }}
+              oldValue={originalConfig}
+              newValue={newConfig}
+              configName={cName}
+              trigger={(
+                <ConfigListRow
+                  row={row}
+                  checked={checkedItems[index]}
+                  updateValue={() => {
+                    checkedItems[index] = !checkedItems[index];
+                    setCheckedItems([...checkedItems]);
+                  }}
+                />
+              )}
            />
          ))}
        </Tbody>
--- a/admin/src/components/ConfirmModal/index.jsx
+++ b/admin/src/components/ConfirmModal/index.jsx
@ -10,69 +10,69 @@ import {
  Checkbox,
  Divider,
  Box,
+  Field,
 } from '@strapi/design-system';
 import { WarningCircle } from '@strapi/icons';

-const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
+const ConfirmModal = ({ onClose, onSubmit, type, trigger }) => {
  const soft = useSelector((state) => state.getIn(['config', 'appEnv', 'config', 'soft'], false));
  const [force, setForce] = useState(false);
  const { formatMessage } = useIntl();

-  if (!isOpen) return null;
-
  return (
-    <Dialog.Root
-      onClose={onClose}
-      title={formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}
-      isOpen={isOpen}
-    >
-      <Dialog.Body icon={<WarningCircle />}>
-        <Flex size={2}>
-          <Flex justifyContent="center">
-            <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
-              {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
-              {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
-            </Typography>
+    <Dialog.Root>
+      <Dialog.Trigger>
+        {trigger}
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>{formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}</Dialog.Header>
+        <Dialog.Body>
+          <WarningCircle fill="danger600" width="32px" height="32px" />
+          <Flex size={2}>
+            <Flex justifyContent="center">
+              <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
+                {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
+                {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
+              </Typography>
+            </Flex>
          </Flex>
-        </Flex>
-      </Dialog.Body>
-      {(soft && type === 'import') && (
-        <React.Fragment>
-          <Divider />
-          <Box padding={4}>
-            <Checkbox
-              onValueChange={(value) => setForce(value)}
-              value={force}
-              name="force"
-              hint="Check this to ignore the soft setting."
+          {(soft && type === 'import') && (
+            <Box width="100%">
+              <Divider marginTop={4} />
+              <Box paddingTop={6}>
+                <Field.Root hint="Check this to ignore the soft setting.">
+                  <Checkbox
+                    onValueChange={(value) => setForce(value)}
+                    value={force}
+                    name="force"
+                  >
+                    {formatMessage({ id: 'config-sync.popUpWarning.force' })}
+                  </Checkbox>
+                  <Field.Hint />
+                </Field.Root>
+              </Box>
+            </Box>
+          )}
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Cancel>
+            <Button fullWidth variant="tertiary">
+              {formatMessage({ id: 'config-sync.popUpWarning.button.cancel' })}
+            </Button>
+          </Dialog.Cancel>
+          <Dialog.Action>
+            <Button
+              fullWidth
+              variant="secondary"
+              onClick={() => {
+                onSubmit(force);
+              }}
            >
-              {formatMessage({ id: 'config-sync.popUpWarning.force' })}
-            </Checkbox>
-          </Box>
-        </React.Fragment>
-      )}
-      <Dialog.Footer
-        startAction={(
-          <Button
-            onClick={() => {
-              onClose();
-            }}
-            variant="tertiary"
-          >
-            {formatMessage({ id: 'config-sync.popUpWarning.button.cancel' })}
-          </Button>
-        )}
-        endAction={(
-          <Button
-            variant="secondary"
-            onClick={() => {
-              onClose();
-              onSubmit(force);
-            }}
-          >
-            {formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
-          </Button>
-        )} />
+              {formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
+            </Button>
+          </Dialog.Action>
+        </Dialog.Footer>
+      </Dialog.Content>
    </Dialog.Root>
  );
 };
--- a/admin/src/components/FirstExport/index.jsx
+++ b/admin/src/components/FirstExport/index.jsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { getFetchClient, useNotification } from '@strapi/strapi/admin';
@ -13,20 +13,21 @@ const FirstExport = () => {
  const { post, get } = getFetchClient();
  const { toggleNotification } = useNotification();
  const dispatch = useDispatch();
-  const [modalIsOpen, setModalIsOpen] = useState(false);
  const { formatMessage } = useIntl();

  return (
    <div>
-      <ConfirmModal
-        isOpen={modalIsOpen}
-        onClose={() => setModalIsOpen(false)}
-        type="export"
-        onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
-      />
      <EmptyStateLayout
        content={formatMessage({ id: 'config-sync.FirstExport.Message' })}
-        action={<Button onClick={() => setModalIsOpen(true)}>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>}
+        action={(
+          <ConfirmModal
+            type="export"
+            onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
+            trigger={(
+              <Button>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>
+            )}
+          />
+        )}
        icon={<EmptyDocuments width={160} />}
      />
    </div>