Skip to content

Commit 00da501

Browse files
boazpoolmanboazpoolman
committed
fix: modal, dialog & typography styling
1 parent 11662c8 commit 00da501

6 files changed

Lines changed: 137 additions & 135 deletions

File tree

‎admin/src/components/ActionButtons/index.jsx‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import styled from 'styled-components';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { isEmpty } from 'lodash';
5-
import { Button } from '@strapi/design-system';
5+
import { Button, Typography } from '@strapi/design-system';
66
import { Map } from 'immutable';
77
import { getFetchClient, useNotification } from '@strapi/strapi/admin';
88
import { useIntl } from 'react-intl';
@@ -14,38 +14,32 @@ const ActionButtons = () => {
1414
const { post, get } = getFetchClient();
1515
const dispatch = useDispatch();
1616
const { toggleNotification } = useNotification();
17-
const [modalIsOpen, setModalIsOpen] = useState(false);
18-
const [actionType, setActionType] = useState('');
1917
const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
2018
const { formatMessage } = useIntl();
2119

22-
const closeModal = () => {
23-
setActionType('');
24-
setModalIsOpen(false);
25-
};
26-
27-
const openModal = (type) => {
28-
setActionType(type);
29-
setModalIsOpen(true);
30-
};
31-
3220
return (
3321
<ActionButtonsStyling>
34-
<Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>
35-
{formatMessage({ id: 'config-sync.Buttons.Import' })}
36-
</Button>
37-
<Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>
38-
{formatMessage({ id: 'config-sync.Buttons.Export' })}
39-
</Button>
40-
{!isEmpty(partialDiff) && (
41-
<h4 style={{ display: 'inline' }}>{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</h4>
42-
)}
4322
<ConfirmModal
44-
isOpen={modalIsOpen}
45-
onClose={closeModal}
46-
type={actionType}
47-
onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get)) : dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
23+
type="import"
24+
trigger={(
25+
<Button disabled={isEmpty(partialDiff)}>
26+
{formatMessage({ id: 'config-sync.Buttons.Import' })}
27+
</Button>
28+
)}
29+
onSubmit={(force) => dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get))}
4830
/>
31+
<ConfirmModal
32+
type="export"
33+
trigger={(
34+
<Button disabled={isEmpty(partialDiff)}>
35+
{formatMessage({ id: 'config-sync.Buttons.Export' })}
36+
</Button>
37+
)}
38+
onSubmit={(force) => dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
39+
/>
40+
{!isEmpty(partialDiff) && (
41+
<Typography variant="epsilon">{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</Typography>
42+
)}
4943
</ActionButtonsStyling>
5044
);
5145
};

‎admin/src/components/ConfigDiff/index.jsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,39 @@ import {
88
Typography,
99
} from '@strapi/design-system';
1010

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

1514
return (
16-
<Modal.Root
17-
onClose={onClose}
18-
labelledBy="title"
19-
>
20-
<Modal.Header>
21-
<Typography variant="omega" fontWeight="bold" textColor="neutral800">
22-
{formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
23-
</Typography>
24-
</Modal.Header>
25-
<Modal.Body>
26-
<Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
27-
<Grid.Item col={6}>
28-
<Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
29-
</Grid.Item>
30-
<Grid.Item col={6}>
31-
<Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
32-
</Grid.Item>
33-
</Grid.Root>
34-
<ReactDiffViewer
35-
oldValue={JSON.stringify(oldValue, null, 2)}
36-
newValue={JSON.stringify(newValue, null, 2)}
37-
splitView
38-
compareMethod={DiffMethod.WORDS}
39-
/>
40-
</Modal.Body>
15+
<Modal.Root>
16+
<Modal.Trigger>
17+
{trigger}
18+
</Modal.Trigger>
19+
<Modal.Content>
20+
<Modal.Header>
21+
<Typography variant="omega" fontWeight="bold" textColor="neutral800">
22+
{formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
23+
</Typography>
24+
</Modal.Header>
25+
<Modal.Body>
26+
<Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
27+
<Grid.Item col={6}>
28+
<Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
29+
</Grid.Item>
30+
<Grid.Item col={6}>
31+
<Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
32+
</Grid.Item>
33+
</Grid.Root>
34+
<Typography variant="pi">
35+
<ReactDiffViewer
36+
oldValue={JSON.stringify(oldValue, null, 2)}
37+
newValue={JSON.stringify(newValue, null, 2)}
38+
splitView
39+
compareMethod={DiffMethod.WORDS}
40+
/>
41+
</Typography>
42+
</Modal.Body>
43+
</Modal.Content>
4144
</Modal.Root>
4245
);
4346
};

‎admin/src/components/ConfigList/ConfigListRow/index.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import { Tr, Td, Checkbox } from '@strapi/design-system';
2+
import { Tr, Td, Checkbox, Typography } from '@strapi/design-system';
33

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

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

3535
return (
3636
<Tr
37+
{...props}
3738
onClick={(e) => {
3839
if (e.target.type !== 'checkbox') {
3940
onClick(configType, configName);
4041
}
42+
if (props.onClick) {
43+
props.onClick(e);
44+
}
4145
}}
4246
style={{ cursor: 'pointer' }}
4347
>
@@ -49,13 +53,13 @@ const CustomRow = ({ row, checked, updateValue }) => {
4953
/>
5054
</Td>
5155
<Td>
52-
<p>{configName}</p>
56+
<Typography variant="omega">{configName}</Typography>
5357
</Td>
5458
<Td>
55-
<p>{configType}</p>
59+
<Typography variant="omega">{configType}</Typography>
5660
</Td>
5761
<Td>
58-
<p style={stateStyle(state)}>{state}</p>
62+
<Typography variant="omega" style={stateStyle(state)}>{state}</Typography>
5963
</Td>
6064
</Tr>
6165
);

‎admin/src/components/ConfigList/index.jsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -117,13 +117,6 @@ const ConfigList = ({ diff, isLoading }) => {
117117

118118
return (
119119
<div>
120-
<ConfigDiff
121-
isOpen={openModal}
122-
oldValue={originalConfig}
123-
newValue={newConfig}
124-
onClose={closeModal}
125-
configName={cName}
126-
/>
127120
<Table colCount={4} rowCount={rows.length + 1}>
128121
<Thead>
129122
<Tr>
@@ -148,14 +141,21 @@ const ConfigList = ({ diff, isLoading }) => {
148141
</Thead>
149142
<Tbody>
150143
{rows.map((row, index) => (
151-
<ConfigListRow
144+
<ConfigDiff
152145
key={row.configName}
153-
row={row}
154-
checked={checkedItems[index]}
155-
updateValue={() => {
156-
checkedItems[index] = !checkedItems[index];
157-
setCheckedItems([...checkedItems]);
158-
}}
146+
oldValue={originalConfig}
147+
newValue={newConfig}
148+
configName={cName}
149+
trigger={(
150+
<ConfigListRow
151+
row={row}
152+
checked={checkedItems[index]}
153+
updateValue={() => {
154+
checkedItems[index] = !checkedItems[index];
155+
setCheckedItems([...checkedItems]);
156+
}}
157+
/>
158+
)}
159159
/>
160160
))}
161161
</Tbody>

‎admin/src/components/ConfirmModal/index.jsx‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -10,69 +10,69 @@ import {
1010
Checkbox,
1111
Divider,
1212
Box,
13+
Field,
1314
} from '@strapi/design-system';
1415
import { WarningCircle } from '@strapi/icons';
1516

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

21-
if (!isOpen) return null;
22-
2322
return (
24-
<Dialog.Root
25-
onClose={onClose}
26-
title={formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}
27-
isOpen={isOpen}
28-
>
29-
<Dialog.Body icon={<WarningCircle />}>
30-
<Flex size={2}>
31-
<Flex justifyContent="center">
32-
<Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
33-
{formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
34-
{formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
35-
</Typography>
23+
<Dialog.Root>
24+
<Dialog.Trigger>
25+
{trigger}
26+
</Dialog.Trigger>
27+
<Dialog.Content>
28+
<Dialog.Header>{formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}</Dialog.Header>
29+
<Dialog.Body>
30+
<WarningCircle fill="danger600" width="32px" height="32px" />
31+
<Flex size={2}>
32+
<Flex justifyContent="center">
33+
<Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
34+
{formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
35+
{formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
36+
</Typography>
37+
</Flex>
3638
</Flex>
37-
</Flex>
38-
</Dialog.Body>
39-
{(soft && type === 'import') && (
40-
<React.Fragment>
41-
<Divider />
42-
<Box padding={4}>
43-
<Checkbox
44-
onValueChange={(value) => setForce(value)}
45-
value={force}
46-
name="force"
47-
hint="Check this to ignore the soft setting."
39+
{(soft && type === 'import') && (
40+
<Box width="100%">
41+
<Divider marginTop={4} />
42+
<Box paddingTop={6}>
43+
<Field.Root hint="Check this to ignore the soft setting.">
44+
<Checkbox
45+
onValueChange={(value) => setForce(value)}
46+
value={force}
47+
name="force"
48+
>
49+
{formatMessage({ id: 'config-sync.popUpWarning.force' })}
50+
</Checkbox>
51+
<Field.Hint />
52+
</Field.Root>
53+
</Box>
54+
</Box>
55+
)}
56+
</Dialog.Body>
57+
<Dialog.Footer>
58+
<Dialog.Cancel>
59+
<Button fullWidth variant="tertiary">
60+
{formatMessage({ id: 'config-sync.popUpWarning.button.cancel' })}
61+
</Button>
62+
</Dialog.Cancel>
63+
<Dialog.Action>
64+
<Button
65+
fullWidth
66+
variant="secondary"
67+
onClick={() => {
68+
onSubmit(force);
69+
}}
4870
>
49-
{formatMessage({ id: 'config-sync.popUpWarning.force' })}
50-
</Checkbox>
51-
</Box>
52-
</React.Fragment>
53-
)}
54-
<Dialog.Footer
55-
startAction={(
56-
<Button
57-
onClick={() => {
58-
onClose();
59-
}}
60-
variant="tertiary"
61-
>
62-
{formatMessage({ id: 'config-sync.popUpWarning.button.cancel' })}
63-
</Button>
64-
)}
65-
endAction={(
66-
<Button
67-
variant="secondary"
68-
onClick={() => {
69-
onClose();
70-
onSubmit(force);
71-
}}
72-
>
73-
{formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
74-
</Button>
75-
)} />
71+
{formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
72+
</Button>
73+
</Dialog.Action>
74+
</Dialog.Footer>
75+
</Dialog.Content>
7676
</Dialog.Root>
7777
);
7878
};

‎admin/src/components/FirstExport/index.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { useIntl } from 'react-intl';
33
import { useDispatch } from 'react-redux';
44
import { getFetchClient, useNotification } from '@strapi/strapi/admin';
@@ -13,20 +13,21 @@ const FirstExport = () => {
1313
const { post, get } = getFetchClient();
1414
const { toggleNotification } = useNotification();
1515
const dispatch = useDispatch();
16-
const [modalIsOpen, setModalIsOpen] = useState(false);
1716
const { formatMessage } = useIntl();
1817

1918
return (
2019
<div>
21-
<ConfirmModal
22-
isOpen={modalIsOpen}
23-
onClose={() => setModalIsOpen(false)}
24-
type="export"
25-
onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
26-
/>
2720
<EmptyStateLayout
2821
content={formatMessage({ id: 'config-sync.FirstExport.Message' })}
29-
action={<Button onClick={() => setModalIsOpen(true)}>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>}
22+
action={(
23+
<ConfirmModal
24+
type="export"
25+
onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
26+
trigger={(
27+
<Button>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>
28+
)}
29+
/>
30+
)}
3031
icon={<EmptyDocuments width={160} />}
3132
/>
3233
</div>

0 commit comments

Comments
 (0)