Reverse Chakra/Ant import prefixes in FidesUI design system (#7173)

Author: gilluminate

CHANGELOG.md

@@ -46,6 +46,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Renamed staged resource diff status from 'approved' to 'reviewed' in database migration [#7159](https://github.com/ethyca/fides/pull/7159) https://github.com/ethyca/fides/labels/db-migration
 
 ### Developer Experience
+- Deprecated Chakra UI exports with `Chakra` prefix, removed `Ant` prefix from Ant Design exports [#7173](https://github.com/ethyca/fides/pull/7173)
 - Migrated consent settings tables to Ant Design [#7084](https://github.com/ethyca/fides/pull/7084)
 - Migrated privacy notices table to Ant Design [#7087](https://github.com/ethyca/fides/pull/7087)
 - Update Ant modal hook usage [#7086](https://github.com/ethyca/fides/pull/7086)

clients/.cursor/rules/frontend.mdc

@@ -15,9 +15,9 @@ While working in this `clients` directory, you are a Senior Front-End Developer
 - The `clients/fidesui` directory is a design system which exports both Chakra and Ant Design components, however we are migrating to Ant from Chakra so Ant components are always preferred if possible. Only Admin UI and Privacy center use this design system, never try to use it in fides-js code.
 - The `clients/cypress-e2e` directory is a specific set of tests and can mostly be ignored while working in the 3 main apps
 - The `clients/sample-app` directory is a demo app and can mostly be ignored while working in the 3 main apps.
-- The rest of the codebase is considered the "backend" of fides.
+- The rest of the codebase is considered the "backend" of fides which also gets wrapped by another repository called `fidesplus` which manages other backend code not found in this repo but is definitely utilized by the fides frontend.
 - The `clients/fides-js/docs` directory gets auto-generated from the jsdocs in `clients/fides-js/src/docs` and should never be updated manually. Always add to the `clients/fides-js/src/docs` instead. The types specified in `clients/fides-js/src/docs` do get imported and used in the codebase.
-- The Type definitions in the `clients/admin-ui/src/types/api` directory files get auto-generated from the backend endpoints and should not be updated manually.
+- The Type definitions in the `clients/admin-ui/src/types/api` directory files get auto-generated from the fidesplus backend endpoints and should not be updated manually.
 - Lazy loading scripts is not an option in FidesJS since this gets deployed on 3rd party sites as a single package and as an exported module.
 
 
@@ -30,7 +30,7 @@ Follow these rules when you write code:
 - Never omit curly braces around blocks.
 - Only use tailwindcss for layout and animation classes, no colors, fonts, borders, etc.
 - FidesDebugger is a global that never needs to be imported; It should never be used for error handling.
-- Any time we import an Ant component with prefix "Ant" we should import "as" the suffix: For example "AntSelect as Select".
+- Any time we import a Chakra component with prefix "Chakra" it has been imported "as" the suffix: For example `ChakraBox as Box`. However, as previously stated, we should not be adding Chakra components to new code. We keep those clearly marked for deprecation.
 - Titles, heading text, and buttons in the HTML/JSX should be sentence-cased, not title-cased.
 - When adding a property as a spread operator, favor the name `...props` over the name `...rest`
 - Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator (`||` where `""` is possible, favor `??` elsewhere)

clients/admin-ui/__tests__/features/hooks/tables/useAntTable.test.ts

@@ -1,9 +1,6 @@
 import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { act, renderHook } from "@testing-library/react";
-import {
-  AntTablePaginationConfig as TablePaginationConfig,
-  AntTableProps as TableProps,
-} from "fidesui";
+import { TablePaginationConfig, TableProps } from "fidesui";
 
 // Mock nuqs using shared mock implementation to prevent ESM issues
 // eslint-disable-next-line global-require
@@ -21,7 +18,7 @@ type SortKey = "name" | "createdAt";
 const isPaginationConfig = (
   pagination: TableProps<any>["pagination"],
 ): pagination is TablePaginationConfig => {
-  return pagination !== false && pagination != null;
+  return pagination !== false && pagination !== null;
 };
 
 describe("useAntTable", () => {

clients/admin-ui/__tests__/fidesui-components/custom-list/CustomList.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from "@testing-library/react";
-import { AntList as List } from "fidesui";
+import { List } from "fidesui";
 
 import type { ListDataItem } from "~/features/poc/mockListData";
 import { MOCK_LIST_DATA } from "~/features/poc/mockListData";

clients/admin-ui/package.json

@@ -22,7 +22,7 @@
     "format": "prettier --write .",
     "format:ci": "prettier --check .",
     "lint": "next lint && eslint ./cypress/e2e/**/*.ts ./cypress/support/**/*.ts",
-    "lint:fix": "next lint --fix && eslint --fix ./cypress/e2e/**/*.ts ./cypress/support/**/*.ts",
+    "lint:fix": "eslint --fix . && eslint --fix ./cypress/e2e/**/*.ts ./cypress/support/**/*.ts",
     "lint-staged:fix": "lint-staged --diff=main",
     "openapi:generate": "openapi --input http://localhost:8080/openapi.json --output ./src/types/api --exportCore false --exportServices false --indent 2 && prettier --write .",
     "openapi:generate-dictionary": "openapi --input http://localhost:8081/openapi.json --output ./src/types/dictionary-api --exportCore false --exportServices false --indent 2",

clients/admin-ui/src/app/middleware.ts

@@ -1,5 +1,5 @@
 import { isRejectedWithValue, Middleware } from "@reduxjs/toolkit";
-import { createStandaloneToast } from "fidesui";
+import { createChakraStandaloneToast as createStandaloneToast } from "fidesui";
 
 import { DEFAULT_TOAST_PARAMS } from "~/features/common/toast";
 import { selectApplicationConfig } from "~/features/config-settings/config-settings.slice";

clients/admin-ui/src/features/common/AccordionTree.tsx

@@ -1,12 +1,12 @@
 import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  BoxProps,
-  Text,
+  ChakraAccordion as Accordion,
+  ChakraAccordionButton as AccordionButton,
+  ChakraAccordionIcon as AccordionIcon,
+  ChakraAccordionItem as AccordionItem,
+  ChakraAccordionPanel as AccordionPanel,
+  ChakraBox as Box,
+  ChakraBoxProps as BoxProps,
+  ChakraText as Text,
 } from "fidesui";
 import { Fragment, ReactNode, useState } from "react";
 

clients/admin-ui/src/features/common/AutosuggestSuffix.tsx

@@ -1,4 +1,4 @@
-import { AntTypography as Typography, GetProps } from "fidesui";
+import { GetProps, Typography } from "fidesui";
 
 const { Text } = Typography;
 

clients/admin-ui/src/features/common/BorderGrid.tsx

@@ -1,4 +1,4 @@
-import { Box, SimpleGrid } from "fidesui";
+import { ChakraBox as Box, ChakraSimpleGrid as SimpleGrid } from "fidesui";
 import { chunk } from "lodash";
 import { ReactNode } from "react";