From cc5c36e8b8671397eed2292b89e3ebf519684847 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Fri, 17 Jan 2025 11:16:29 -0600 Subject: [PATCH 1/5] migrate radio buttons --- .../custom-reports/CustomReportTemplates.tsx | 41 +++---- .../common/form/ControlledRadioGroup.tsx | 115 ++++++++++++++++++ .../src/features/common/form/inputs.tsx | 103 ---------------- .../consent-settings/GppConfiguration.tsx | 11 +- .../configuration/MessagingConfiguration.tsx | 24 ++-- .../configuration/StorageConfiguration.tsx | 27 ++-- 6 files changed, 165 insertions(+), 156 deletions(-) create mode 100644 clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx diff --git a/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx b/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx index 94e8c3e37d..073b231dc6 100644 --- a/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx +++ b/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx @@ -1,5 +1,7 @@ import { AntButton as Button, + AntFlex as Flex, + AntRadio as Radio, ChevronDownIcon, ConfirmationModal, HStack, @@ -15,8 +17,6 @@ import { PopoverHeader, PopoverTrigger, Portal, - Radio, - RadioGroup, Skeleton, Text, theme, @@ -310,48 +310,35 @@ export const CustomReportTemplates = ({ ) : ( - handleSelection(e.target.value)} value={selectedReportId} - display="flex" - flexDirection="column" - gap={2} - colorScheme="minos" + className="flex flex-col gap-2" > {searchResults?.map((customReport) => ( - {customReport.name} {userCanDeleteReports && ( - } - onClick={() => { - setReportToDelete(customReport); - }} + onClick={() => setReportToDelete(customReport)} data-testid="delete-report-button" - color="gray.700" /> )} - + ))} - + ))} diff --git a/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx b/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx new file mode 100644 index 0000000000..813cc1e5c4 --- /dev/null +++ b/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx @@ -0,0 +1,115 @@ +import { + AntFlex as Flex, + AntRadio as Radio, + AntRadioGroupProps as RadioGroupProps, + FormControl, + Grid, + RadioChangeEvent, + Text, +} from "fidesui"; +import { useField } from "formik"; + +import type { StringField } from "~/features/common/form/inputs"; +import { ErrorMessage, Label, Option } from "~/features/common/form/inputs"; +import QuestionTooltip from "~/features/common/QuestionTooltip"; + +interface ControlledRadioGroupProps extends RadioGroupProps { + label?: string; + options: Option[]; + layout?: "inline" | "stacked"; + defaultFirstSelected?: boolean; +} + +const ControlledRadioGroup = ({ + label, + options, + layout, + defaultFirstSelected = true, + ...props +}: ControlledRadioGroupProps & StringField) => { + const [initialField, meta] = useField(props); + const field = { ...initialField, value: initialField.value ?? "" }; + const isInvalid = !!(meta.touched && meta.error); + const defaultSelected = defaultFirstSelected ? options[0] : undefined; + const selected = + options.find((o) => o.value === field.value) ?? defaultSelected; + + const handleChange = (e: RadioChangeEvent) => { + field.onChange(props.name)(e.target.value); + }; + + if (layout === "stacked") { + return ( + + + {label ? ( + + ) : null} + + + {options.map( + ({ value, label: optionLabel, tooltip: optionTooltip }) => ( + + + + {optionLabel} + + {optionTooltip ? ( + + ) : null} + + + ), + )} + + + + + + ); + } + + return ( + + + + + + {options.map((o) => ( + + {o.label} + + ))} + + + + + + ); +}; + +export default ControlledRadioGroup; diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx index 4ffc5a22fa..4cb23ffd19 100644 --- a/clients/admin-ui/src/features/common/form/inputs.tsx +++ b/clients/admin-ui/src/features/common/form/inputs.tsx @@ -28,9 +28,6 @@ import { NumberInput, NumberInputField, NumberInputStepper, - Radio, - RadioGroup, - Stack, Text, Textarea, TextareaProps, @@ -365,106 +362,6 @@ export const CustomTextArea = ({ ); }; -interface CustomRadioGroupProps { - label?: string; - options: Option[]; - variant?: "inline" | "stacked"; - defaultFirstSelected?: boolean; -} -export const CustomRadioGroup = ({ - label, - options, - variant, - defaultFirstSelected = true, - ...props -}: CustomRadioGroupProps & StringField) => { - const [initialField, meta] = useField(props); - const field = { ...initialField, value: initialField.value ?? "" }; - const isInvalid = !!(meta.touched && meta.error); - const defaultSelected = defaultFirstSelected ? options[0] : undefined; - const selected = - options.find((o) => o.value === field.value) ?? defaultSelected; - - const handleChange = (o: string) => { - field.onChange(props.name)(o); - }; - - if (variant === "stacked") { - return ( - - - {label ? ( - - ) : null} - - - {options.map( - ({ value, label: optionLabel, tooltip: optionTooltip }) => ( - - - - {optionLabel} - - {optionTooltip ? ( - - ) : null} - - - ), - )} - - - - - - ); - } - - return ( - - - - - - {options.map((o) => ( - - {o.label} - - ))} - - - - - - ); -}; - interface CustomNumberInputProps { label: string; tooltip?: string; diff --git a/clients/admin-ui/src/features/consent-settings/GppConfiguration.tsx b/clients/admin-ui/src/features/consent-settings/GppConfiguration.tsx index 692bc4f140..b29475d3cb 100644 --- a/clients/admin-ui/src/features/consent-settings/GppConfiguration.tsx +++ b/clients/admin-ui/src/features/consent-settings/GppConfiguration.tsx @@ -4,11 +4,8 @@ import { ReactNode } from "react"; import { useAppSelector } from "~/app/hooks"; import { useFeatures } from "~/features/common/features"; -import { - CustomCheckbox, - CustomRadioGroup, - CustomSwitch, -} from "~/features/common/form/inputs"; +import ControlledRadioGroup from "~/features/common/form/ControlledRadioGroup"; +import { CustomCheckbox, CustomSwitch } from "~/features/common/form/inputs"; import { selectGppSettings } from "~/features/privacy-requests"; import { GPPApplicationConfigResponse, GPPUSApproach } from "~/types/api"; @@ -44,9 +41,9 @@ const GppConfiguration = () => { {isEnabled ? ( <>
- { } }, [activeMessagingProvider]); - const handleChange = async (value: string) => { + const handleChange = async (e: RadioChangeEvent) => { + const { value } = e.target; const result = await saveActiveConfiguration({ notifications: { notification_service_type: value, @@ -99,19 +107,17 @@ const MessagingConfiguration = () => { Choose service type to configure - - + Mailgun Email @@ -129,8 +135,8 @@ const MessagingConfiguration = () => { > Twilio SMS - - + + {messagingValue === messagingProviders.mailgun ? ( ) : null} diff --git a/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx b/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx index 1e81bf8eea..c0e96513b0 100644 --- a/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx +++ b/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx @@ -1,4 +1,11 @@ -import { Box, Heading, Radio, RadioGroup, Stack, Text } from "fidesui"; +import { + AntFlex as Flex, + AntRadio as Radio, + Box, + Heading, + RadioChangeEvent, + Text, +} from "fidesui"; import { useEffect, useState } from "react"; import { isErrorResult } from "~/features/common/helpers"; @@ -37,7 +44,8 @@ const StorageConfiguration = () => { } }, [activeStorage]); - const handleChange = async (value: string) => { + const handleChange = async (e: RadioChangeEvent) => { + const { value } = e.target; if (value === storageTypes.local) { const storageDetailsResult = await saveStorageType({ type: value, @@ -104,23 +112,22 @@ const StorageConfiguration = () => { Choose storage type to configure - - - + + Local S3 - - + + {storageValue === "s3" && storageDetails ? ( ) : null} From 1f17cf1e6243613a15e2824f1f612d9665c5c3b4 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Fri, 17 Jan 2025 11:39:51 -0600 Subject: [PATCH 2/5] fix broken import --- .../admin-ui/src/features/common/form/ControlledRadioGroup.tsx | 2 +- clients/fidesui/src/index.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx b/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx index 813cc1e5c4..e8b610f3bd 100644 --- a/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx +++ b/clients/admin-ui/src/features/common/form/ControlledRadioGroup.tsx @@ -1,7 +1,7 @@ +import type { AntRadioGroupProps as RadioGroupProps } from "fidesui"; import { AntFlex as Flex, AntRadio as Radio, - AntRadioGroupProps as RadioGroupProps, FormControl, Grid, RadioChangeEvent, diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts index 25652dce60..694fe12616 100644 --- a/clients/fidesui/src/index.ts +++ b/clients/fidesui/src/index.ts @@ -12,10 +12,12 @@ export type { FormInstance as AntFormInstance, InputProps as AntInputProps, ListProps as AntListProps, + RadioGroupProps as AntRadioGroupProps, SelectProps as AntSelectProps, SwitchProps as AntSwitchProps, GetProps, InputRef, + RadioChangeEvent, } from "antd/lib"; export { Alert as AntAlert, From e6749c0e44bc81f3f1a6e5a1375c5000e648532d Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Fri, 17 Jan 2025 12:04:38 -0600 Subject: [PATCH 3/5] comment out console log etc. --- .../DiscoveredSystemAggregateActionsCell.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemAggregateActionsCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemAggregateActionsCell.tsx index d00127b884..7378a9a6ee 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemAggregateActionsCell.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemAggregateActionsCell.tsx @@ -1,14 +1,16 @@ import { AntFlex as Flex } from "fidesui"; -import { MonitorSystemAggregate } from "../../types"; +// import { MonitorSystemAggregate } from "../../types"; -interface DiscoveredSystemActionsCellProps { - system: MonitorSystemAggregate; -} +// interface DiscoveredSystemActionsCellProps { +// system: MonitorSystemAggregate; +// } -export const DiscoveredSystemActionsCell = ({ - system, -}: DiscoveredSystemActionsCellProps) => { - console.log(system); - return ; -}; +export const DiscoveredSystemActionsCell = () => + // { + // system, + // }: DiscoveredSystemActionsCellProps, + { + // console.log(system); + return ; + }; From e2b018576b96e1289b31aa6c6229bdbcc1bcbebb Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Fri, 17 Jan 2025 12:57:31 -0600 Subject: [PATCH 4/5] fix test --- clients/admin-ui/cypress/e2e/consent-settings.cy.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/clients/admin-ui/cypress/e2e/consent-settings.cy.ts b/clients/admin-ui/cypress/e2e/consent-settings.cy.ts index 84ea4df161..7ba17a4914 100644 --- a/clients/admin-ui/cypress/e2e/consent-settings.cy.ts +++ b/clients/admin-ui/cypress/e2e/consent-settings.cy.ts @@ -48,11 +48,8 @@ describe("Consent settings", () => { cy.getByTestId("consent-configuration"); cy.getByTestId("setting-Global Privacy Platform").within(() => { cy.get("p").contains("GPP status Enabled"); - cy.getByTestId("option-national").should( - "not.have.attr", - "data-checked", - ); - cy.getByTestId("option-state").should("have.attr", "data-checked"); + cy.getByTestId("option-national").should("not.have.attr", "checked"); + cy.getByTestId("option-state").should("have.attr", "checked"); cy.getByTestId("input-gpp.mspa_covered_transactions").should( "not.have.attr", "data-checked", @@ -78,8 +75,8 @@ describe("Consent settings", () => { cy.visit(GLOBAL_CONSENT_CONFIG_ROUTE); cy.getByTestId("setting-Global Privacy Platform").within(() => { cy.get("p").contains("GPP status Enabled"); - cy.getByTestId("option-national").should("have.attr", "data-checked"); - cy.getByTestId("option-state").should("not.have.attr", "data-checked"); + cy.getByTestId("option-national").should("have.attr", "checked"); + cy.getByTestId("option-state").should("not.have.attr", "checked"); cy.getByTestId("input-gpp.mspa_covered_transactions").should( "have.attr", "data-checked", From ede125a3afdbc5bf8f1a4038c3616a1a8bb9929f Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Fri, 17 Jan 2025 14:51:38 -0600 Subject: [PATCH 5/5] adjust delete report button spacing --- .../common/custom-reports/CustomReportTemplates.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx b/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx index 073b231dc6..27224b6bdd 100644 --- a/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx +++ b/clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx @@ -318,7 +318,11 @@ export const CustomReportTemplates = ({ {searchResults?.map((customReport) => (