diff --git a/CHANGELOG.md b/CHANGELOG.md index bcc0cc1915..122d7a3a99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,13 @@ The types of changes are: ## [2.38.1](https://github.com/ethyca/fides/compare/2.38.0...2.38.1) +### Added + +### Changed + +### Fixed +- Fixed "add" icons on some buttons being wrong size [#4975](https://github.com/ethyca/fides/pull/4975) + ## [2.38.0](https://github.com/ethyca/fides/compare/2.37.0...2.38.0) ### Added diff --git a/clients/admin-ui/src/features/common/ScrollableList.tsx b/clients/admin-ui/src/features/common/ScrollableList.tsx index 74e0458565..aa7485a70b 100644 --- a/clients/admin-ui/src/features/common/ScrollableList.tsx +++ b/clients/admin-ui/src/features/common/ScrollableList.tsx @@ -1,6 +1,5 @@ import { Select } from "chakra-react-select"; import { - AddIcon, Box, Button, ChakraProps, @@ -9,6 +8,7 @@ import { Flex, IconButton, List, + SmallAddIcon, Text, } from "fidesui"; import { motion, Reorder, useDragControls } from "framer-motion"; @@ -142,7 +142,7 @@ const ScrollableListAdd = ({ w="full" size="sm" variant="outline" - rightIcon={} + rightIcon={} data-testid={`add-${baseTestId}`} > {label} diff --git a/clients/admin-ui/src/features/common/custom-fields/CustomFieldsButton.tsx b/clients/admin-ui/src/features/common/custom-fields/CustomFieldsButton.tsx deleted file mode 100644 index 115e4af4c4..0000000000 --- a/clients/admin-ui/src/features/common/custom-fields/CustomFieldsButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Flex, IconButton, Text } from "fidesui"; -import * as React from "react"; - -import QuestionTooltip from "~/features/common/QuestionTooltip"; - -import { AddIcon } from "./icons/AddIcon"; - -type CustomFieldsButtonProps = { - btnRef: React.MutableRefObject; - hasTooltip?: boolean; - onClick: React.MouseEventHandler; -}; - -const CustomFieldsButton: React.FC = ({ - btnRef, - hasTooltip = false, - onClick, -}) => ( - - } - onClick={onClick} - ref={btnRef} - size="sm" - variant="outline" - _hover={{ cursor: "pointer" }} - /> - - Add a custom field - - {hasTooltip && } - -); - -export { CustomFieldsButton }; diff --git a/clients/admin-ui/src/features/common/custom-fields/CustomFieldsModal.tsx b/clients/admin-ui/src/features/common/custom-fields/CustomFieldsModal.tsx deleted file mode 100644 index 1e883d7773..0000000000 --- a/clients/admin-ui/src/features/common/custom-fields/CustomFieldsModal.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import { - Box, - Button, - ButtonGroup, - Divider, - Flex, - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, - Text, - useDisclosure, -} from "fidesui"; -import * as React from "react"; -import { useRef, useState } from "react"; - -import DataTabs from "~/features/common/DataTabs"; -import ConfirmationModal from "~/features/common/modals/ConfirmationModal"; -import { ResourceTypes } from "~/types/api"; - -import { ChooseFromLibrary } from "./ChooseFromLibrary"; -import { TabTypes } from "./constants"; -import { CreateCustomFields } from "./CreateCustomFields"; -import { CreateCustomLists } from "./CreateCustomLists"; -import { CustomFieldsButton } from "./CustomFieldsButton"; -import { Tab } from "./types"; - -type CustomFieldsModalProps = { - reload?: () => void; - resourceType: ResourceTypes; -}; - -const CustomFieldsModal: React.FC = ({ - reload, - resourceType, -}) => { - const { isOpen, onOpen, onClose } = useDisclosure(); - - const btnRef = useRef(null); - const createCustomFieldsRef = useRef(null); - const createCustomListsRef = useRef(null); - const chooseFromLibraryRef = useRef(null); - const firstField = useRef(null); - - const DEFAULT_TAB_INDEX = TabTypes.CREATE_CUSTOM_FIELDS; - const [tabIndex, setTabIndex] = useState(DEFAULT_TAB_INDEX); - const [isSubmitting, setIsSubmitting] = useState(false); - const [isConfirmationModalOpen, setConfirmationModalOpen] = useState(false); - - const getActiveFormRef = () => { - let formRef: any; - switch (tabIndex) { - case TabTypes.CREATE_CUSTOM_FIELDS: - formRef = createCustomFieldsRef!.current as any; - break; - case TabTypes.CREATE_CUSTOM_LISTS: - formRef = createCustomListsRef!.current as any; - break; - case TabTypes.CHOOSE_FROM_LIBRARY: - formRef = chooseFromLibraryRef!.current as any; - break; - default: - break; - } - return formRef; - }; - - const handleClose = (force?: boolean) => { - const activeForm = getActiveFormRef(); - if (!force && activeForm?.getDirty()) { - setConfirmationModalOpen(true); - return; - } - setTabIndex(DEFAULT_TAB_INDEX); - setIsSubmitting(false); - onClose(); - }; - - const handleSaveClick = () => { - const activeForm = getActiveFormRef(); - if (activeForm) { - activeForm.submitForm(); - setIsSubmitting(activeForm.isSubmitting); - } - }; - - const handleSubmitComplete = () => { - setIsSubmitting(false); - if (tabIndex === TabTypes.CHOOSE_FROM_LIBRARY && reload) { - reload(); - } - }; - - const handleTabsChange = (index: number) => setTabIndex(index); - - const tabList: Tab[] = [ - { - label: "Create custom fields", - content: ( - - ), - submitButtonText: "Save", - }, - { - label: "Create custom lists", - content: ( - - ), - submitButtonText: "Save to library", - }, - { - label: "Choose from library", - content: ( - - ), - submitButtonText: "Save", - }, - ]; - - return ( - <> - - - - - - - - - Add custom field - - - - - Fill in the information below to add a new custom field to this - form or view the library to select from existing custom fields. - - - - - - - - - - - - - - - - { - setConfirmationModalOpen(false); - }} - onConfirm={() => { - setConfirmationModalOpen(false); - handleClose(true); - }} - title="Unsaved changes" - message={ - - You have unsaved changes, are you sure you want to discard? - - } - /> - - - ); -}; - -export { CustomFieldsModal }; diff --git a/clients/admin-ui/src/features/common/custom-fields/index.ts b/clients/admin-ui/src/features/common/custom-fields/index.ts index d6cbfbb706..a73ad6c644 100644 --- a/clients/admin-ui/src/features/common/custom-fields/index.ts +++ b/clients/admin-ui/src/features/common/custom-fields/index.ts @@ -2,9 +2,7 @@ export * from "./ChooseFromLibrary"; export * from "./constants"; export * from "./CreateCustomFields"; export * from "./CreateCustomLists"; -export * from "./CustomFieldsButton"; export * from "./CustomFieldsList"; -export * from "./CustomFieldsModal"; export * from "./helpers"; export * from "./hooks"; export * from "./Layout"; diff --git a/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx b/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx index ce145cdffb..794b450e0b 100644 --- a/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx +++ b/clients/admin-ui/src/features/system/dictionary-data-uses/EmptyTableState.tsx @@ -1,8 +1,8 @@ import { - AddIcon, Box, Button, HStack, + SmallAddIcon, Stack, Text, WarningTwoIcon, @@ -45,7 +45,7 @@ const EmptyTableState = ({ title, description, handleAdd }: Props) => ( fontWeight="semibold" data-testid="add-btn" onClick={handleAdd} - rightIcon={} + rightIcon={} > Add data use diff --git a/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationDisplayGroup.tsx b/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationDisplayGroup.tsx index f949b7a964..16a33eb3b2 100644 --- a/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationDisplayGroup.tsx +++ b/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationDisplayGroup.tsx @@ -1,5 +1,4 @@ import { - AddIcon, Box, Button, DeleteIcon, @@ -9,6 +8,7 @@ import { IconButton, LinkBox, LinkOverlay, + SmallAddIcon, Spacer, Stack, Text, @@ -165,7 +165,7 @@ export const PrivacyDeclarationDisplayGroup = ({ backgroundColor="primary.800" color="white" fontWeight="600" - rightIcon={} + rightIcon={} data-testid="add-btn" > Add data use