Skip to content

Commit 284e55f

Browse files
speaker-enderspeaker-ender
committed
refactor: filter linked progress
wip: hooked up wip: dimming wip: more wip: more refactors chore: lots of widgets chore: linting and refinements chore: update changelog wip: avatar update chore: updated avatar color chore: all of the async stuff chore: additional clean up chore: fix typos chore: fix async states chore: additional clean up fix: test enum chore: fix overflow chore: more ellipsis stuff chore: formatting chore: restore keys on monitor fix: open tooltip chore: hiding tooltip chore: add system and integration links chore: adding tooltip to icon chore: adding additional tooltip chore: updating types fix: unassociated systems bug fix: layout issues
1 parent 0a78a2f commit 284e55f

34 files changed

+868
-534
lines changed

‎changelog/7846-refactor-progress.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
type: Changed # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security
2+
description: Refactor progress widgets
3+
pr: 7846 # PR number
4+
labels: [] # Optional: ["high-risk", "db-migration"]

‎clients/admin-ui/cypress/e2e/action-center/aggregate-results.cy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
ACTION_CENTER_ROUTE,
99
SYSTEM_ROUTE,
1010
} from "~/features/common/nav/routes";
11-
import { MONITOR_TYPES } from "~/features/data-discovery-and-detection/action-center/utils/getMonitorType";
11+
import { APIMonitorType } from "~/types/api/models/APIMonitorType";
1212

1313
describe("Action center", () => {
1414
beforeEach(() => {
@@ -84,12 +84,12 @@ describe("Action center", () => {
8484
cy.getByTestId(`review-button-${webMonitorKey}`).should(
8585
"have.attr",
8686
"href",
87-
`${ACTION_CENTER_ROUTE}/${MONITOR_TYPES.WEBSITE}/${webMonitorKey}`,
87+
`${ACTION_CENTER_ROUTE}/${APIMonitorType.WEBSITE}/${webMonitorKey}`,
8888
);
8989
cy.getByTestId(`review-button-${integrationMonitorKey}`).should(
9090
"have.attr",
9191
"href",
92-
`${ACTION_CENTER_ROUTE}/${MONITOR_TYPES.DATASTORE}/${integrationMonitorKey}`,
92+
`${ACTION_CENTER_ROUTE}/${APIMonitorType.DATASTORE}/${integrationMonitorKey}`,
9393
);
9494
});
9595
it.skip("Should paginate results", () => {

‎clients/admin-ui/cypress/e2e/action-center/assets-results.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {
77
} from "cypress/support/stubs";
88

99
import { ACTION_CENTER_ROUTE } from "~/features/common/nav/routes";
10-
import { MONITOR_TYPES } from "~/features/data-discovery-and-detection/action-center/utils/getMonitorType";
10+
import { APIMonitorType } from "~/types/api/models/APIMonitorType";
1111

12-
const WEB_MONITOR_ROUTE = `${ACTION_CENTER_ROUTE}/${MONITOR_TYPES.WEBSITE}`;
12+
const WEB_MONITOR_ROUTE = `${ACTION_CENTER_ROUTE}/${APIMonitorType.WEBSITE}`;
1313

1414
describe("Action center Asset Results", () => {
1515
beforeEach(() => {

‎clients/admin-ui/src/features/common/api.slice.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ export const baseApi = createApi({
113113
"Access Policy Control Groups",
114114
"Access Control",
115115
"Fides Dashboard",
116+
"Monitor Statistics",
117+
"Connection Type",
116118
],
117119
endpoints: () => ({}),
118120
});

‎clients/admin-ui/src/features/data-discovery-and-detection/action-center/ActionCenterLayout.tsx‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Menu,
1010
} from "fidesui";
1111
import _ from "lodash";
12-
import { PropsWithChildren } from "react";
12+
import { PropsWithChildren, useState } from "react";
1313

1414
import FixedLayout from "~/features/common/FixedLayout";
1515
import { ACTION_CENTER_ROUTE } from "~/features/common/nav/routes";
@@ -18,6 +18,7 @@ import useActionCenterNavigation, {
1818
ActionCenterRoute,
1919
ActionCenterRouteConfig,
2020
} from "~/features/data-discovery-and-detection/action-center/hooks/useActionCenterNavigation";
21+
import { APIMonitorType } from "~/types/api/models/APIMonitorType";
2122

2223
import MonitorStats from "./MonitorStats";
2324

@@ -28,14 +29,19 @@ export interface ActionCenterLayoutProps {
2829
dropdownProps?: DropdownProps;
2930
badgeProps?: BadgeProps;
3031
};
32+
refresh?: () => Promise<void>;
33+
monitorType?: APIMonitorType;
3134
}
3235

3336
const ActionCenterLayout = ({
3437
children,
3538
monitorId,
39+
monitorType,
3640
routeConfig,
3741
pageSettings,
42+
refresh,
3843
}: PropsWithChildren<ActionCenterLayoutProps>) => {
44+
const [refreshing, setRefreshing] = useState(false);
3945
const {
4046
items: menuItems,
4147
activeItem,
@@ -56,21 +62,41 @@ const ActionCenterLayout = ({
5662
]}
5763
isSticky={false}
5864
rightContent={
59-
pageSettings && (
60-
<Flex>
61-
<Badge {...pageSettings.badgeProps}>
62-
<Dropdown {...pageSettings.dropdownProps}>
63-
<Button
64-
aria-label="Page settings"
65-
icon={<Icons.SettingsView />}
66-
/>
67-
</Dropdown>
68-
</Badge>
69-
</Flex>
70-
)
65+
<Flex gap="small">
66+
{pageSettings && (
67+
<Flex>
68+
<Badge {...pageSettings.badgeProps}>
69+
<Dropdown {...pageSettings.dropdownProps}>
70+
<Button
71+
aria-label="Page settings"
72+
icon={<Icons.SettingsView />}
73+
/>
74+
</Dropdown>
75+
</Badge>
76+
</Flex>
77+
)}
78+
{refresh && (
79+
<Button
80+
aria-label="Page refresh"
81+
icon={<Icons.Renew />}
82+
onClick={async () => {
83+
setRefreshing(true);
84+
try {
85+
await refresh();
86+
} finally {
87+
setRefreshing(false);
88+
}
89+
}}
90+
disabled={refreshing}
91+
loading={refreshing}
92+
/>
93+
)}
94+
</Flex>
7195
}
7296
/>
73-
<MonitorStats monitorId={monitorId} />
97+
{monitorId && monitorType && (
98+
<MonitorStats monitorId={monitorId} monitorType={monitorType} />
99+
)}
74100
<Menu
75101
aria-label="Action center tabs"
76102
mode="horizontal"

‎clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorDetailsWidget.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { skipToken } from "@reduxjs/toolkit/query";
2+
import { Descriptions, Flex, Paragraph, Text } from "fidesui";
3+
import Link from "next/link";
4+
5+
import { useFlags } from "~/features/common/features";
6+
import {
7+
EDIT_SYSTEM_ROUTE,
8+
INTEGRATION_DETAIL_ROUTE,
9+
} from "~/features/common/nav/routes";
10+
11+
import {
12+
useGetConnectionQuery,
13+
useGetMonitorConfigQuery,
14+
} from "./action-center.slice";
15+
16+
export interface MonitorDetailsWidgetProps {
17+
monitorId: string;
18+
}
19+
20+
const MonitorDetailsWidget = ({ monitorId }: MonitorDetailsWidgetProps) => {
21+
const {
22+
flags: { heliosInsights },
23+
} = useFlags();
24+
const { data: configData } = useGetMonitorConfigQuery({
25+
monitor_config_id: monitorId,
26+
});
27+
const connectionKey = configData?.connection_config_key;
28+
const { data: connectionData } = useGetConnectionQuery(
29+
connectionKey ? { connection_key: connectionKey } : skipToken,
30+
);
31+
32+
return (
33+
heliosInsights && (
34+
<Flex className="w-full" gap="middle" vertical>
35+
<Text strong>Details</Text>
36+
<Descriptions
37+
size="small"
38+
items={[
39+
{
40+
label: "System",
41+
children:
42+
connectionData?.linked_systems &&
43+
connectionData.linked_systems.length > 0 ? (
44+
<Paragraph
45+
ellipsis={{
46+
rows: 1,
47+
tooltip: { title: connectionData?.system_key },
48+
}}
49+
>
50+
{connectionData?.linked_systems?.map((linkedSystem) => (
51+
<Link
52+
key={linkedSystem.fides_key}
53+
href={EDIT_SYSTEM_ROUTE.replace(
54+
"[id]",
55+
linkedSystem.fides_key,
56+
)}
57+
>
58+
{" "}
59+
{linkedSystem.name}
60+
</Link>
61+
))}
62+
</Paragraph>
63+
) : (
64+
"None"
65+
),
66+
span: "filled",
67+
},
68+
{
69+
label: "Integration",
70+
children: (
71+
<Paragraph
72+
ellipsis={{
73+
rows: 1,
74+
tooltip: { title: connectionData?.key },
75+
}}
76+
>
77+
<Link
78+
href={INTEGRATION_DETAIL_ROUTE.replace(
79+
"[id]",
80+
connectionData?.key ?? "",
81+
)}
82+
>
83+
{connectionData?.key}
84+
</Link>
85+
</Paragraph>
86+
),
87+
span: "filled",
88+
},
89+
]}
90+
/>
91+
</Flex>
92+
)
93+
);
94+
};
95+
96+
export default MonitorDetailsWidget;

‎clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.const.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
} from "nuqs";
77
import * as v from "valibot";
88

9-
import { MONITOR_TYPES } from "./utils/getMonitorType";
9+
import { APIMonitorType } from "~/types/api/models/APIMonitorType";
1010

1111
export const MonitorSearchFormQuerySchema = (
12-
availableMonitors: Array<MONITOR_TYPES>,
12+
availableMonitors: Array<APIMonitorType>,
1313
) =>
1414
v.object({
1515
search: v.nullish(v.string(), null),
@@ -18,7 +18,7 @@ export const MonitorSearchFormQuerySchema = (
1818
});
1919

2020
export const SearchFormQueryState = (
21-
availableMonitors: Array<MONITOR_TYPES>,
21+
availableMonitors: Array<APIMonitorType>,
2222
id?: string,
2323
) =>
2424
({

‎clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@ import { useGetAggregateMonitorResultsQuery } from "~/features/data-discovery-an
1111
import { EmptyMonitorsResult } from "~/features/data-discovery-and-detection/action-center/EmptyMonitorsResult";
1212
import useSearchForm from "~/features/data-discovery-and-detection/action-center/hooks/useSearchForm";
1313
import { MonitorResult } from "~/features/data-discovery-and-detection/action-center/MonitorResult";
14-
import { MONITOR_TYPES } from "~/features/data-discovery-and-detection/action-center/utils/getMonitorType";
1514
import { useGetUserMonitorsQuery } from "~/features/user-management";
15+
import { APIMonitorType } from "~/types/api/models/APIMonitorType";
1616

1717
import MonitorListSearchForm from "./forms/MonitorListSearchForm";
1818
import {
1919
MonitorSearchForm,
2020
MonitorSearchFormQuerySchema,
2121
SearchFormQueryState,
2222
} from "./MonitorList.const";
23+
import MonitorStats from "./MonitorStats";
2324

2425
const MonitorList = () => {
2526
const message = useMessage();
@@ -30,9 +31,9 @@ const MonitorList = () => {
3031
useAntPagination();
3132

3233
const availableMonitorTypes = [
33-
...(webMonitorEnabled ? [MONITOR_TYPES.WEBSITE] : []),
34-
MONITOR_TYPES.DATASTORE,
35-
MONITOR_TYPES.INFRASTRUCTURE,
34+
...(webMonitorEnabled ? [APIMonitorType.WEBSITE] : []),
35+
APIMonitorType.DATASTORE,
36+
APIMonitorType.INFRASTRUCTURE,
3637
] as const;
3738

3839
const currentUser = useAppSelector(selectUser);
@@ -48,7 +49,10 @@ const MonitorList = () => {
4849
const defaultStewardFilter =
4950
(userMonitors ?? []).length > 0 ? currentUser?.id : undefined;
5051

51-
const { requestData, ...formProps } = useSearchForm<any, MonitorSearchForm>({
52+
const { requestData, ...formProps } = useSearchForm<
53+
Partial<Parameters<typeof useGetAggregateMonitorResultsQuery>[0]>,
54+
MonitorSearchForm
55+
>({
5256
schema: MonitorSearchFormQuerySchema([...availableMonitorTypes]),
5357
queryState: SearchFormQueryState(
5458
[...availableMonitorTypes],
@@ -64,7 +68,9 @@ const MonitorList = () => {
6468
search: search || undefined,
6569
monitor_type: monitor_type
6670
? [monitor_type]
67-
: availableMonitorTypes /** this should be handled via ant binding ideally. * */,
71+
: [
72+
...availableMonitorTypes,
73+
] /** this should be handled via ant binding ideally. * */,
6874
steward_user_id:
6975
typeof steward_key === "undefined" || !steward_key
7076
? []
@@ -100,6 +106,7 @@ const MonitorList = () => {
100106
}}
101107
availableMonitorTypes={availableMonitorTypes}
102108
/>
109+
<MonitorStats />
103110
<List
104111
loading={isLoading}
105112
dataSource={results}

0 commit comments

Comments
 (0)