diff --git a/.vscode/settings.json b/.vscode/settings.json index 91f75734b8..831c905032 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -27,5 +27,8 @@ }, "[python]": { "editor.defaultFormatter": "ms-python.black-formatter" + }, + "files.associations": { + "*.css": "tailwindcss" } } diff --git a/CHANGELOG.md b/CHANGELOG.md index cdc63ee5fa..2f6c563352 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,7 @@ The types of changes are: ### Developer Experience - Added performance mark timings to debug logs for fides.js [#5245](https://github.com/ethyca/fides/pull/5245) +- Initialized Ant Design and Tailwindcss in Admin-UI to prepare for Design System migration [#5308](https://github.com/ethyca/fides/pull/5308) ### Fixed - Fix wording in tooltip for Yotpo Reviews [#5274](https://github.com/ethyca/fides/pull/5274) diff --git a/clients/admin-ui/.eslintrc.cjs b/clients/admin-ui/.eslintrc.cjs index 266f833b40..911e53b799 100644 --- a/clients/admin-ui/.eslintrc.cjs +++ b/clients/admin-ui/.eslintrc.cjs @@ -1,5 +1,5 @@ module.exports = { - extends: ["next/core-web-vitals"], + extends: ["next/core-web-vitals", "plugin:tailwindcss/recommended"], parserOptions: { project: "tsconfig.json", tsconfigRootDir: __dirname, diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json index ea9fc01175..327a82dcf6 100644 --- a/clients/admin-ui/package.json +++ b/clients/admin-ui/package.json @@ -29,6 +29,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { + "@ant-design/cssinjs": "^1.21.0", "@fontsource/inter": "^4.5.15", "@monaco-editor/react": "^4.6.0", "@reduxjs/toolkit": "^1.9.3", @@ -39,6 +40,7 @@ "cytoscape-klay": "^3.1.4", "date-fns": "^2.29.3", "date-fns-tz": "^2.0.0", + "eslint-plugin-tailwindcss": "^3.17.4", "fides-js": "^0.0.1", "fidesui": "*", "file-saver": "^2.0.5", @@ -80,6 +82,7 @@ "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.17.0", "@typescript-eslint/parser": "^7.17.0", + "autoprefixer": "^10.4.20", "babel-jest": "^29.7.0", "cross-env": "^7.0.3", "cypress": "^13.13.0", @@ -102,7 +105,9 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^13.2.0", "openapi-typescript-codegen": "^0.23.0", + "postcss": "^8.4.41", "prettier": "^3.3.3", + "tailwindcss": "^3.4.10", "typescript": "4.9.5", "whatwg-fetch": "^3.6.2" }, diff --git a/clients/admin-ui/postcss.config.js b/clients/admin-ui/postcss.config.js new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/clients/admin-ui/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx index 88d19a234a..2f3320a06e 100644 --- a/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx +++ b/clients/admin-ui/src/features/common/TaxonomiesPicker.tsx @@ -68,6 +68,7 @@ const TaxonomiesPicker = ({ {isAdding && ( ({ width="5px" cursor="col-resize" userSelect="none" + // eslint-disable-next-line tailwindcss/no-custom-classname className="resizer" opacity={0} backgroundColor={ diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx index f6e922172a..b9551583bb 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/EditCategoryCell.tsx @@ -139,6 +139,7 @@ const EditCategoriesCell = ({ resource }: EditCategoryCellProps) => { {isAdding && ( ( - + {Component === Login || Component === LoginWithOIDC ? ( // Only the login page is accessible while logged out. If there is diff --git a/clients/admin-ui/src/pages/_document.tsx b/clients/admin-ui/src/pages/_document.tsx new file mode 100644 index 0000000000..48e481244d --- /dev/null +++ b/clients/admin-ui/src/pages/_document.tsx @@ -0,0 +1,45 @@ +import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs"; +import type { DocumentContext } from "next/document"; +import Document, { Head, Html, Main, NextScript } from "next/document"; +import React from "react"; + +const MyDocument = () => ( + + + +
+ + + +); + +// extract and inject antd's first-screen styles into HTML to avoid page flicker. +// see https://ant.design/docs/react/use-with-next#using-pages-router +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + const cache = createCache(); + const originalRenderPage = ctx.renderPage; + // eslint-disable-next-line no-param-reassign + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => ( + + + + ), + }); + + const initialProps = await Document.getInitialProps(ctx); + const style = extractStyle(cache, true); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {/* eslint-disable-next-line react/no-danger */} +