Skip to content

Commit c5ad9af

Browse files
boazpoolmanboazpoolman
committed
fix: all errors in the core admin
1 parent 10d1d29 commit c5ad9af

File tree

21 files changed

+452
-431
lines changed

21 files changed

+452
-431
lines changed

‎packages/core/admin/components/ContentManagerHooks/ConfirmationCheckbox/index.tsx‎

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ import {
44
Button,
55
Checkbox,
66
Dialog,
7-
DialogBody,
8-
DialogFooter,
97
Flex,
108
Typography,
119
} from '@strapi/design-system';
12-
import { ExclamationMarkCircle } from '@strapi/icons';
10+
import { WarningCircle } from '@strapi/icons';
1311
import { useIntl } from 'react-intl';
1412
import styled from 'styled-components';
1513
import getTrad from '../../../helpers/getTrad';
@@ -87,57 +85,54 @@ const CheckboxConfirmation: FC<Props> = ({
8785
id={name}
8886
name={name}
8987
onValueChange={handleChange}
88+
// @ts-ignore
9089
value={value}
91-
type="checkbox"
9290
>
9391
{label}
9492
</Checkbox>
9593
{isOpen && (
96-
<Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
97-
<DialogBody icon={<ExclamationMarkCircle />}>
98-
<Flex direction="column" alignItems="stretch" gap={2}>
99-
<Flex justifyContent="center">
100-
<TextAlignTypography id="confirm-description">
101-
{formatMessage({
102-
id: getTrad('webtools.CheckboxConfirmation.Modal.content'),
103-
defaultMessage:
104-
'Disabling url alias will engender the deletion of all your paths for this content type',
105-
})}
106-
</TextAlignTypography>
107-
</Flex>
108-
<Flex justifyContent="center">
109-
<Typography fontWeight="semiBold" id="confirm-description">
110-
{formatMessage({
111-
id: getTrad('CheckboxConfirmation.Modal.body'),
112-
defaultMessage: 'Do you want to disable it?',
113-
})}
114-
</Typography>
94+
<Dialog.Root>
95+
<Dialog.Trigger />
96+
<Dialog.Content>
97+
<Dialog.Body icon={<WarningCircle />}>
98+
<Flex direction="column" alignItems="stretch" gap={2}>
99+
<Flex justifyContent="center">
100+
<TextAlignTypography id="confirm-description">
101+
{formatMessage({
102+
id: getTrad('webtools.CheckboxConfirmation.Modal.content'),
103+
defaultMessage:
104+
'Disabling url alias will engender the deletion of all your paths for this content type',
105+
})}
106+
</TextAlignTypography>
107+
</Flex>
108+
<Flex justifyContent="center">
109+
<Typography fontWeight="semiBold" id="confirm-description">
110+
{formatMessage({
111+
id: getTrad('CheckboxConfirmation.Modal.body'),
112+
defaultMessage: 'Do you want to disable it?',
113+
})}
114+
</Typography>
115+
</Flex>
115116
</Flex>
116-
</Flex>
117-
</DialogBody>
118-
<DialogFooter
119-
startAction={
120-
(
117+
</Dialog.Body>
118+
<Dialog.Footer>
119+
<Dialog.Cancel>
121120
<Button onClick={handleToggle} variant="tertiary">
122121
{formatMessage({
123122
id: 'components.popUpWarning.button.cancel',
124123
defaultMessage: 'No, cancel',
125124
})}
126125
</Button>
127-
)
128-
}
129-
endAction={
130-
(
131-
<Button variant="danger-light" onClick={handleConfirm}>
132-
{formatMessage({
133-
id: getTrad('CheckboxConfirmation.Modal.button-confirm'),
134-
defaultMessage: 'Yes, disable',
135-
})}
136-
</Button>
137-
)
138-
}
139-
/>
140-
</Dialog>
126+
</Dialog.Cancel>
127+
<Button variant="danger-light" onClick={handleConfirm}>
128+
{formatMessage({
129+
id: getTrad('CheckboxConfirmation.Modal.button-confirm'),
130+
defaultMessage: 'Yes, disable',
131+
})}
132+
</Button>
133+
</Dialog.Footer>
134+
</Dialog.Content>
135+
</Dialog.Root>
141136
)}
142137
</>
143138
);

‎packages/core/admin/components/EditForm/index.tsx‎

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ import { unstable_useContentManagerContext } from '@strapi/strapi/admin';
55

66
import {
77
Box,
8-
Stack,
8+
Flex,
99
TextInput,
1010
Checkbox,
1111
Link,
1212
Accordion,
13-
AccordionToggle,
14-
AccordionContent,
13+
Field,
1514
} from '@strapi/design-system';
1615

1716
import getTrad from '../../helpers/getTrad';
@@ -45,56 +44,65 @@ const EditForm = () => {
4544
const toggle = (index: number) => setExpanded((prevExpanded) => (prevExpanded === index ? null : index));
4645

4746
return (
48-
<Stack size={2}>
49-
{modifiedDataUrlAliases?.map((alias, index) => (
50-
<Accordion
51-
key={alias.id}
52-
value={`acc-${alias.id}`}
53-
expanded={expanded === index}
54-
onToggle={() => toggle(index)}
55-
variant="secondary"
56-
size="S"
57-
>
58-
<AccordionToggle
59-
description={alias.url_path ? alias.url_path : 'Initial URL alias'}
47+
<Flex>
48+
<Accordion.Root
49+
size="S"
50+
>
51+
{modifiedDataUrlAliases?.map((alias, index) => (
52+
<Accordion.Item
53+
key={alias.id}
54+
value={`acc-${alias.id}`}
6055
>
61-
{`Alias #${index + 1}`}
62-
</AccordionToggle>
63-
<AccordionContent padding="12px">
64-
<Box>
65-
<Checkbox
66-
onValueChange={(value: string) => {
67-
updateValue(index, 'generated', value);
68-
}}
69-
value={alias.generated !== undefined ? alias.generated : true}
70-
name={`generated-${index}`}
71-
hint="Uncheck this to create a custom alias below."
56+
<Accordion.Header>
57+
<Accordion.Trigger
58+
description={alias.url_path ? alias.url_path : 'Initial URL alias'}
7259
>
73-
{formatMessage({
74-
id: getTrad('EditView.ExcludeFromSitemap'),
75-
defaultMessage: ' Generate automatic URL alias',
76-
})}
77-
</Checkbox>
78-
<Link to="/plugins/webtools/patterns">Configure URL alias patterns.</Link>
79-
</Box>
80-
<Box paddingTop={4}>
81-
<TextInput
82-
label="URL alias"
83-
name={`path-${index}`}
84-
hint='Specify a path by which this data can be accessed in the browser. For example, type "/about" when writing an about page.'
85-
disabled={alias.generated !== undefined ? alias.generated : true}
86-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
87-
if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
88-
updateValue(index, 'url_path', e.target.value);
89-
}
90-
}}
91-
value={alias.url_path}
92-
/>
93-
</Box>
94-
</AccordionContent>
95-
</Accordion>
96-
))}
97-
</Stack>
60+
{`Alias #${index + 1}`}
61+
</Accordion.Trigger>
62+
</Accordion.Header>
63+
<Accordion.Content>
64+
<Box>
65+
<Checkbox
66+
onValueChange={(value: string) => {
67+
updateValue(index, 'generated', value);
68+
}}
69+
// @ts-ignore
70+
value={alias.generated !== undefined ? alias.generated : true}
71+
name={`generated-${index}`}
72+
hint="Uncheck this to create a custom alias below."
73+
>
74+
{formatMessage({
75+
id: getTrad('EditView.ExcludeFromSitemap'),
76+
defaultMessage: ' Generate automatic URL alias',
77+
})}
78+
</Checkbox>
79+
<Link href="/plugins/webtools/patterns">Configure URL alias patterns.</Link>
80+
</Box>
81+
<Box paddingTop={4}>
82+
<Field.Root
83+
hint='Specify a path by which this data can be accessed in the browser. For example, type "/about" when writing an about page.'
84+
>
85+
<Field.Label>
86+
URL alias
87+
</Field.Label>
88+
<TextInput
89+
name={`path-${index}`}
90+
disabled={alias.generated !== undefined ? alias.generated : true}
91+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
92+
if (e.target.value.match(/^[A-Za-z0-9-_.~[\]/]*$/)) {
93+
updateValue(index, 'url_path', e.target.value);
94+
}
95+
}}
96+
value={alias.url_path}
97+
/>
98+
<Field.Hint />
99+
</Field.Root>
100+
</Box>
101+
</Accordion.Content>
102+
</Accordion.Item>
103+
))}
104+
</Accordion.Root>
105+
</Flex>
98106
);
99107
};
100108

‎packages/core/admin/components/LabelField/index.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Box,
1111
TextButton,
1212
Typography,
13+
Field,
1314
} from '@strapi/design-system';
1415
import { PatternFormValues } from '../../types/url-patterns';
1516

@@ -40,20 +41,27 @@ const LabelField: FC<Props> = ({
4041

4142
return (
4243
<Box>
43-
<TextInput
44-
name="label"
45-
value={values.label || ''}
46-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('label', e.target.value)}
47-
label={formatMessage({
48-
id: 'webtools.settings.form.label.label',
49-
defaultMessage: 'Label',
50-
})}
44+
<Field.Root
45+
// @ts-ignore
5146
error={
5247
errors.label && touched.label
5348
? formatMessage({ id: errors.label, defaultMessage: 'Invalid value' })
5449
: null
5550
}
56-
/>
51+
>
52+
<Field.Label>
53+
{formatMessage({
54+
id: 'webtools.settings.form.label.label',
55+
defaultMessage: 'Label',
56+
})}
57+
</Field.Label>
58+
<TextInput
59+
name="label"
60+
value={values.label || ''}
61+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('label', e.target.value)}
62+
/>
63+
<Field.Error />
64+
</Field.Root>
5765
{(generatedCode && !open) && (
5866
<Box style={{ display: 'flex', marginTop: 5 }}>
5967
<Typography>Machine name: {generatedCode}</Typography>
@@ -63,20 +71,27 @@ const LabelField: FC<Props> = ({
6371

6472
{open && (
6573
<Box style={{ marginTop: 20 }}>
66-
<TextInput
67-
name="code"
68-
value={values.code || generatedCode}
69-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('code', e.target.value)}
70-
label={formatMessage({
71-
id: 'global.sde',
72-
defaultMessage: 'Code',
73-
})}
74+
<Field.Root
75+
// @ts-ignore
7476
error={
7577
errors.code
7678
? formatMessage({ id: errors.code, defaultMessage: 'This value must be unique' })
7779
: null
7880
}
79-
/>
81+
>
82+
<Field.Label>
83+
{formatMessage({
84+
id: 'global.sde',
85+
defaultMessage: 'Code',
86+
})}
87+
</Field.Label>
88+
<TextInput
89+
name="code"
90+
value={values.code || generatedCode}
91+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue('code', e.target.value)}
92+
/>
93+
<Field.Error />
94+
</Field.Root>
8095
</Box>
8196
)}
8297
</Box>

‎packages/core/admin/components/LanguageCheckboxes/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import {
44
Flex,
55
Checkbox,
66
Field,
7-
FieldLabel,
8-
FieldError,
97
} from '@strapi/design-system';
108
import { getFetchClient } from '@strapi/strapi/admin';
119

@@ -44,12 +42,13 @@ const LanguageCheckboxes = ({
4442
}
4543

4644
return (
47-
<Field name="password" error={error as string}>
48-
<FieldLabel>Select the language</FieldLabel>
45+
<Field.Root name="password" error={error as string}>
46+
<Field.Label>Select the language</Field.Label>
4947
<Flex direction="column" alignItems="start" gap="1" marginTop="2">
5048
{languages.map((contentType) => (
5149
<Checkbox
5250
aria-label={`Select ${contentType.name}`}
51+
// @ts-ignore
5352
value={selectedLanguages.includes(contentType.uid)}
5453
onValueChange={() => {
5554
if (selectedLanguages.includes(contentType.uid)) {
@@ -66,9 +65,9 @@ const LanguageCheckboxes = ({
6665
{contentType.name}
6766
</Checkbox>
6867
))}
69-
<FieldError />
68+
<Field.Error />
7069
</Flex>
71-
</Field>
70+
</Field.Root>
7271
);
7372
};
7473

packages/core/admin/components/Loader/index.jsx renamed to packages/core/admin/components/Loader/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { Loader as LoaderComponent } from '@strapi/design-system';
33

44
const Loader = () => {
5-
const style = {
5+
const style: React.CSSProperties = {
66
display: 'flex',
77
justifyContent: 'center',
88
position: 'absolute',

0 commit comments

Comments
 (0)