ENG-3176: Migrate consent settings forms to Ant Design#7967
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
jpople
force-pushed
the
jpople/eng-3176/consent-settings-form-migration
branch
from
4a9f312 to
d030f3e
Compare
gilluminate
left a comment
gilluminate
left a comment
There was a problem hiding this comment.
Overall looking good. Just some UI details to flesh out.
| {!isTcfConfigurationsLoading && tcfConfigurations?.items?.length ? ( | ||
| <> | ||
| <Text> | ||
| <p> |
There was a problem hiding this comment.
We should probably use the Ant paragraph for all of these to get correct design system styling
| <p> | |
| <Typography.Paragraph> |
| ? "Non-flexible purposes only support Purpose restrictions and cannot be restricted by consent or legitimate interest settings." | ||
| : undefined | ||
| } | ||
| <Flex vertical className="gap-6"> |
There was a problem hiding this comment.
Ant's Form.Item has it's own margins, so this gap makes it extra big.
| <Flex vertical className="gap-6"> | |
| <Flex vertical> |
| : undefined | ||
| } | ||
| <Flex vertical className="gap-6"> | ||
| <Typography.Text className="text-sm"> |
There was a problem hiding this comment.
I've been removing text-sm from these and just leaving them as default size
| vendors are restricted or allowed, and specify which vendor IDs the | ||
| restriction applies to. | ||
| </Typography.Text> | ||
| <Tooltip |
There was a problem hiding this comment.
having this wrap the entire field is causing a weird double tooltip on the (i) icon. I would either only wrap the Select with this, or make the Form.Item tooltip conditional with this tooltip instead.
| </Form.Item> | ||
| )} | ||
| <Flex justify="flex-end" className="gap-3 pt-4"> | ||
| <Button onClick={onClose} data-testid="cancel-restriction-button"> |
There was a problem hiding this comment.
I think this will bypass the dirty-state warning
| <Button onClick={onClose} data-testid="cancel-restriction-button"> | |
| <Button onClick={handleClose} data-testid="cancel-restriction-button"> |
| @@ -1,17 +1,10 @@ | |||
| /* eslint-disable react/no-array-index-key */ | |||
There was a problem hiding this comment.
looks like this got cleaned up and isn't needed now
2 participants
Ticket ENG-3176
Description Of Changes
Migrates the consent settings page (
/settings/consent) and all components underfeatures/consent-settings/from Chakra UI + Formik to Ant Design v6 + antd Form. Part of the broader form migration initiative (parent ticket ENG-3165).Code Changes
<Formik>with antdFormusingForm.useForm,Form.useWatch, andonFinishacross 6 form componentsuseFormikContext,useField,FieldArray) withForm.useFormInstance()andForm.useWatchin child componentsControlledRadioGroup,CustomSwitch,CheckboxField,ControlledSelect,CustomTextInput) withForm.Item+ native antd controlsruleswith custom validatorsBox,Stack,Text,Skeleton,Collapse,Divider) with antd equivalents (Card,Flex,Skeleton.Input,Divider) or plain HTMLuseChakraDisclosurewithuseStateSteps to Confirm
Pre-Merge Checklist
CHANGELOG.mdupdated