From cd27b900b49ea9a71fc2f88af7d6fb6aa4d937dc Mon Sep 17 00:00:00 2001 From: speaker-ender Date: Fri, 20 Mar 2026 15:12:16 -0400 Subject: [PATCH] fix: infra monitor screen ui chore: linting chore: even more linting fix: more issues chore: updating changelog chore: change changelog --- changelog/7719-fix-style-regression.yaml | 4 ++++ .../fields/MonitorFieldListItem.tsx | 2 +- .../action-center/fields/page.tsx | 18 ++++++-------- .../DiscoveredInfrastructureSystemsTable.tsx | 2 +- .../components/data-display/Tag.stories.tsx | 18 ++++++++++++++ .../data-entry/SelectInline.stories.tsx | 20 ++++++++++++++++ .../fidesui/src/hoc/CustomSelect.stories.tsx | 24 +++++++++++++++++-- clients/fidesui/src/stories/utils/content.ts | 2 ++ 8 files changed, 75 insertions(+), 15 deletions(-) create mode 100644 changelog/7719-fix-style-regression.yaml create mode 100644 clients/fidesui/src/components/data-display/Tag.stories.tsx diff --git a/changelog/7719-fix-style-regression.yaml b/changelog/7719-fix-style-regression.yaml new file mode 100644 index 00000000000..d48475228da --- /dev/null +++ b/changelog/7719-fix-style-regression.yaml @@ -0,0 +1,4 @@ +type: Fixed # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security +description: Styles on infra and datastore monitor screens +pr: 7719 # PR number +labels: [] # Optional: ["high-risk", "db-migration"] diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx index 50b50a9dc61..8724bc18f16 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx @@ -52,7 +52,7 @@ export const tagRender: TagRender = (props) => { onClose={onClose} /** Style required because of tailwind limitations and our ui package presets */ style={{ - marginInlineEnd: "calc((var(--ant-padding-xs) * 0.5))", + marginInlineEnd: 4, }} icon={isFromClassifier && } > diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx index 5c5dd7da72b..5034e027fc4 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx @@ -263,12 +263,11 @@ const ActionCenterFields = ({ return ( <> - - + + - {/** Note: style attr used here due to specificity of ant css. */} - - + + Monitor results diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx index c0222add85b..344f73ad823 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx @@ -146,7 +146,7 @@ export const DiscoveredInfrastructureSystemsTable = ({ ); return ( - <Flex vertical gap="medium" className="h-full overflow-hidden"> + <Flex vertical gap="middle" className="h-full overflow-hidden"> <Alert showIcon message="Fides detected the following systems" diff --git a/clients/fidesui/src/components/data-display/Tag.stories.tsx b/clients/fidesui/src/components/data-display/Tag.stories.tsx new file mode 100644 index 00000000000..475e725b699 --- /dev/null +++ b/clients/fidesui/src/components/data-display/Tag.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { Tag } from "../../index"; +import { TITLE_LOREM } from "../../stories/utils/content"; + +const meta = { + title: "Data Display/Tag", + component: Tag, + args: { + children: TITLE_LOREM, + }, + tags: ["autodocs"], +} satisfies Meta<typeof Tag>; + +export default meta; +type Story = StoryObj<typeof meta>; + +export const Primary: Story = {}; diff --git a/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx b/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx index f460c2788bb..cbe2db3ac65 100644 --- a/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx +++ b/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx @@ -1,5 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Tag } from "../../index"; +import { OPTION_NAMES } from "../../stories/utils/content"; import { SelectInline } from "./SelectInline"; const meta = { @@ -16,3 +18,21 @@ type Story = StoryObj<typeof meta>; export const Primary: Story = { args: {}, }; + +export const Selected: Story = { + args: { + options: OPTION_NAMES.map((value) => ({ label: value, value })), + value: OPTION_NAMES, + }, + parameters: { controls: { includes: [] } }, +}; + +export const CustomTags: Story = { + args: { + options: OPTION_NAMES.map((value) => ({ label: value, value })), + value: OPTION_NAMES, + mode: "tags", + tagRender: (props) => <Tag closable>{props.value}</Tag>, + }, + parameters: { controls: { includes: [] } }, +}; diff --git a/clients/fidesui/src/hoc/CustomSelect.stories.tsx b/clients/fidesui/src/hoc/CustomSelect.stories.tsx index 87cf6a5c8d7..f4ec75b4be0 100644 --- a/clients/fidesui/src/hoc/CustomSelect.stories.tsx +++ b/clients/fidesui/src/hoc/CustomSelect.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { Icons } from "../index"; +import { Icons, Tag } from "../index"; +import { OPTION_NAMES } from "../stories/utils/content"; import type { CustomSelectProps } from "./CustomSelect"; import { CustomSelect } from "./CustomSelect"; @@ -16,7 +17,7 @@ const SELECT_VARIANT: Record< type SelectSize = NonNullable<CustomSelectProps<unknown>["size"]>; -const SELECT_SIZE: SelectSize[] = ["small", "medium", "large"]; +const SELECT_SIZE: SelectSize[] = ["small", "middle", "large"]; const SELECT_MODE: Record< NonNullable<CustomSelectProps<unknown>["mode"]>, @@ -98,3 +99,22 @@ export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = {}; + +export const SelectedMultiple: Story = { + args: { + options: OPTION_NAMES.map((value) => ({ label: value, value })), + value: OPTION_NAMES, + mode: "multiple", + }, + parameters: { controls: { includes: [] } }, +}; + +export const CustomTags: Story = { + args: { + options: OPTION_NAMES.map((value) => ({ label: value, value })), + value: OPTION_NAMES, + mode: "tags", + tagRender: (props) => <Tag closable>{props.value}</Tag>, + }, + parameters: { controls: { includes: [] } }, +}; diff --git a/clients/fidesui/src/stories/utils/content.ts b/clients/fidesui/src/stories/utils/content.ts index 6abf88f837e..89f9e8fdefb 100644 --- a/clients/fidesui/src/stories/utils/content.ts +++ b/clients/fidesui/src/stories/utils/content.ts @@ -10,4 +10,6 @@ export const PARAGRAPH_LOREM = export const MENU_NAMES = ["About", "Info", "Contact", "Settings"]; +export const OPTION_NAMES = ["Fides", "Helios", "Janus", "Lethe", "Astralis"]; + export const DAYJS_LOREM = dayjs().date(18).month(8).year(2018);