Skip to content

Commit cc24c56

Browse files
jpoplejpople
authored
Data catalog item detail trays (#5729)
1 parent 8463e1a commit cc24c56

File tree

19 files changed

+429
-57
lines changed

19 files changed

+429
-57
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
2323

2424
### Added
2525
- Added a read-only consent category cell to Action Center aggregate system results table [#5737](https://github.com/ethyca/fides/pull/5737)
26+
- Added detail trays to items in data catalog view [#5729](https://github.com/ethyca/fides/pull/5729)
2627

2728
### Changed
2829
- Added frequency field to DataHubSchema integration config [#5716](https://github.com/ethyca/fides/pull/5716)

‎clients/admin-ui/cypress/e2e/data-catalog.cy.ts‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,6 @@ describe("data catalog", () => {
2929
"BigQuery System",
3030
);
3131
});
32-
33-
it("should be able to navigate to system details via the overflow menu", () => {
34-
cy.getByTestId("row-bigquery_system").within(() => {
35-
cy.getByTestId("system-actions-menu").click();
36-
cy.getByTestId("view-system-details").click({ force: true });
37-
cy.url().should("include", "/systems/configure/bigquery_system");
38-
});
39-
});
40-
4132
it("should be able to add a data use", () => {
4233
cy.getByTestId("row-bigquery_system-col-data-uses").within(() => {
4334
cy.getByTestId("taxonomy-add-btn").click();
@@ -59,6 +50,29 @@ describe("data catalog", () => {
5950
cy.wait("@getEmptyAvailableDatabases");
6051
cy.url().should("not.include", "/projects");
6152
});
53+
54+
describe("system detail drawer", () => {
55+
it("should be able to navigate to system details via the detail drawer", () => {
56+
cy.getByTestId("row-bigquery_system").within(() => {
57+
cy.getByTestId("system-actions-menu").click();
58+
cy.getByTestId("view-system-details").click({ force: true });
59+
});
60+
cy.getByTestId("system-details").should("be.visible");
61+
cy.getByTestId("edit-system-btn").click();
62+
cy.url().should("include", "/systems/configure/bigquery_system");
63+
});
64+
65+
it("should be able to add data uses via the detail drawer", () => {
66+
cy.getByTestId("row-bigquery_system").within(() => {
67+
cy.getByTestId("system-actions-menu").click();
68+
cy.getByTestId("view-system-details").click({ force: true });
69+
});
70+
cy.getByTestId("system-details").within(() => {
71+
cy.getByTestId("taxonomy-add-btn").click();
72+
cy.get(".select-wrapper").should("be.visible");
73+
});
74+
});
75+
});
6276
});
6377

6478
describe("projects table", () => {
@@ -91,6 +105,16 @@ describe("data catalog", () => {
91105
"/projects/bigquery_monitor.prj-bigquery-111111",
92106
);
93107
});
108+
109+
it("should be able to view details in the drawer", () => {
110+
cy.getByTestId(
111+
"row-bigquery_monitor.prj-bigquery-111111-col-actions",
112+
).within(() => {
113+
cy.getByTestId("actions-menu").click();
114+
cy.getByTestId("view-resource-details").click({ force: true });
115+
});
116+
cy.getByTestId("resource-details").should("be.visible");
117+
});
94118
});
95119

96120
describe("resource tables", () => {
@@ -117,8 +141,8 @@ describe("data catalog", () => {
117141
);
118142
cy.getByTestId("row-monitor.project.dataset.table_2-col-actions").within(
119143
() => {
120-
cy.getByTestId("resource-actions-menu").click();
121-
cy.getByTestId("hide-action").click({ force: true });
144+
cy.getByTestId("actions-menu").click();
145+
cy.getByTestId("hide-resource").click({ force: true });
122146
cy.wait("@ignoreResource");
123147
},
124148
);
@@ -129,5 +153,29 @@ describe("data catalog", () => {
129153
},
130154
);
131155
});
156+
157+
describe("resource detail drawer", () => {
158+
it("should be able to view resource details", () => {
159+
cy.getByTestId("row-monitor.project.dataset.table_1").within(() => {
160+
cy.getByTestId("actions-menu").click();
161+
cy.getByTestId("view-resource-details").click({ force: true });
162+
});
163+
cy.getByTestId("resource-details")
164+
.should("be.visible")
165+
.within(() => {
166+
// don't edit categories unless resource has the right status
167+
cy.getByTestId("edit-category-cell").should("not.exist");
168+
});
169+
});
170+
it("should be able to edit data categories where applicable", () => {
171+
cy.getByTestId("row-monitor.project.dataset.table_3").within(() => {
172+
cy.getByTestId("actions-menu").click();
173+
cy.getByTestId("view-resource-details").click({ force: true });
174+
});
175+
cy.getByTestId("resource-details").within(() => {
176+
cy.getByTestId("user-classification-system").should("exist");
177+
});
178+
});
179+
});
132180
});
133181
});

‎clients/admin-ui/cypress/fixtures/data-catalog/catalog-tables.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
{
1414
"urn": "monitor.project.dataset.table_3",
1515
"name": "table_3",
16-
"diff_status": "classification_addition"
16+
"diff_status": "classification_addition",
17+
"user_assigned_data_categories": ["system"]
1718
},
1819
{
1920
"urn": "monitor.project.dataset.table_4",

‎clients/admin-ui/src/features/common/copy/components.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
Code,
33
Heading,
4+
HeadingProps,
45
Link,
56
OrderedList,
67
Table,
@@ -15,8 +16,11 @@ import {
1516
} from "fidesui";
1617
import { ReactNode } from "react";
1718

18-
export const InfoHeading = ({ text }: { text: string }) => (
19-
<Heading fontSize="sm" mt={4} mb={1}>
19+
export const InfoHeading = ({
20+
text,
21+
...props
22+
}: { text: string } & HeadingProps) => (
23+
<Heading fontSize="sm" mt={4} mb={1} {...props}>
2024
{text}
2125
</Heading>
2226
);

‎clients/admin-ui/src/features/data-catalog/CatalogResourceActionsCell.tsx‎

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
import {
2-
AntButton,
3-
AntButton as Button,
4-
Flex,
5-
Menu,
6-
MenuButton,
7-
MenuItem,
8-
MenuList,
9-
MoreIcon,
10-
} from "fidesui";
1+
import { AntButton as Button, Flex, Spacer } from "fidesui";
112

123
import { useAlert } from "~/features/common/hooks";
4+
import CatalogResourceOverflowMenu from "~/features/data-catalog/staged-resources/CatalogResourceOverflowMenu";
135
import {
146
CatalogResourceStatus,
157
getCatalogResourceStatus,
@@ -23,8 +15,10 @@ import { StagedResourceAPIResponse } from "~/types/api";
2315

2416
const CatalogResourceActionsCell = ({
2517
resource,
18+
onDetailClick,
2619
}: {
2720
resource: StagedResourceAPIResponse;
21+
onDetailClick?: () => void;
2822
}) => {
2923
const { successAlert } = useAlert();
3024
const status = getCatalogResourceStatus(resource);
@@ -88,24 +82,11 @@ const CatalogResourceActionsCell = ({
8882
Approve
8983
</Button>
9084
)}
91-
<Menu>
92-
<MenuButton
93-
as={AntButton}
94-
size="small"
95-
// Chakra is expecting the Chakra "type" prop, i.e. HTML type,
96-
// but Ant buttons use "type" for styling
97-
// @ts-ignore
98-
type="text"
99-
className="max-w-4"
100-
icon={<MoreIcon transform="rotate(90deg)" ml={2} />}
101-
data-testid="resource-actions-menu"
102-
/>
103-
<MenuList>
104-
<MenuItem onClick={hideResource} data-testid="hide-action">
105-
Hide
106-
</MenuItem>
107-
</MenuList>
108-
</Menu>
85+
<Spacer />
86+
<CatalogResourceOverflowMenu
87+
onHideClick={hideResource}
88+
onDetailClick={onDetailClick}
89+
/>
10990
</Flex>
11091
);
11192
};

‎clients/admin-ui/src/features/data-catalog/CatalogStatusBadgeCell.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const STATUS_COLOR_MAP: Record<CatalogResourceStatus, string> = {
66
[CatalogResourceStatus.APPROVED]: "green",
77
[CatalogResourceStatus.IN_REVIEW]: "yellow",
88
[CatalogResourceStatus.CLASSIFYING]: "blue",
9+
[CatalogResourceStatus.NONE]: "gray",
910
};
1011

1112
const CatalogStatusBadgeCell = ({

‎clients/admin-ui/src/features/data-catalog/datasets/CatalogDatasetDetailDrawer.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
Drawer,
3+
DrawerBody,
4+
DrawerCloseButton,
5+
DrawerContent,
6+
DrawerHeader,
7+
DrawerOverlay,
8+
} from "fidesui";
9+
10+
import { InfoHeading, InfoText } from "~/features/common/copy/components";
11+
import { StagedResourceAPIResponse } from "~/types/api";
12+
13+
const CatalogDatasetDetailDrawer = ({
14+
dataset,
15+
onClose,
16+
}: {
17+
dataset?: StagedResourceAPIResponse;
18+
onClose: () => void;
19+
}) => (
20+
<Drawer isOpen={!!dataset} onClose={onClose} size="md">
21+
<DrawerOverlay />
22+
<DrawerContent>
23+
<DrawerHeader>{dataset?.name || dataset?.urn}</DrawerHeader>
24+
<DrawerCloseButton />
25+
<DrawerBody>
26+
<InfoHeading text="Title" mt={0} />
27+
<InfoText>{dataset?.name ?? dataset?.urn}</InfoText>
28+
{dataset?.description && (
29+
<>
30+
<InfoHeading text="Description" />
31+
<InfoText>{dataset?.description}</InfoText>
32+
</>
33+
)}
34+
</DrawerBody>
35+
</DrawerContent>
36+
</Drawer>
37+
);
38+
39+
export default CatalogDatasetDetailDrawer;

‎clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
/* eslint-disable react/no-unstable-nested-components */
22

33
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
4+
import {
5+
AntButton as Button,
6+
Menu,
7+
MenuButton,
8+
MenuItem,
9+
MenuList,
10+
MoreIcon,
11+
} from "fidesui";
412
import { useMemo } from "react";
513

614
import { DefaultCell } from "~/features/common/table/v2";
@@ -12,7 +20,38 @@ import { StagedResourceAPIResponse } from "~/types/api";
1220

1321
const columnHelper = createColumnHelper<StagedResourceAPIResponse>();
1422

15-
const useCatalogDatasetColumns = () => {
23+
const CatalogDatasetActionsCell = ({
24+
onDetailClick,
25+
}: {
26+
onDetailClick?: () => void;
27+
}) => {
28+
return (
29+
<Menu>
30+
<MenuButton
31+
as={Button}
32+
size="small"
33+
// @ts-ignore: Ant type, not Chakra type
34+
type="text"
35+
icon={<MoreIcon transform="rotate(90deg)" />}
36+
className="w-6 gap-0"
37+
data-testid="dataset-actions"
38+
/>
39+
<MenuList>
40+
<MenuItem data-testid="view-dataset-details" onClick={onDetailClick}>
41+
View details
42+
</MenuItem>
43+
</MenuList>
44+
</Menu>
45+
);
46+
};
47+
48+
interface CatalogDatasetColumnsParams {
49+
onDetailClick: (dataset: StagedResourceAPIResponse) => void;
50+
}
51+
52+
const useCatalogDatasetColumns = ({
53+
onDetailClick,
54+
}: CatalogDatasetColumnsParams) => {
1655
const columns: ColumnDef<StagedResourceAPIResponse, any>[] = useMemo(
1756
() => [
1857
columnHelper.accessor((row) => row.name, {
@@ -41,8 +80,20 @@ const useCatalogDatasetColumns = () => {
4180
cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
4281
header: "Updated",
4382
}),
83+
columnHelper.display({
84+
id: "actions",
85+
cell: ({ row }) => (
86+
<CatalogDatasetActionsCell
87+
onDetailClick={() => onDetailClick(row.original)}
88+
/>
89+
),
90+
size: 25,
91+
meta: {
92+
disableRowClick: true,
93+
},
94+
}),
4495
],
45-
[],
96+
[onDetailClick],
4697
);
4798

4899
return columns;

‎clients/admin-ui/src/features/data-catalog/projects/CatalogProjectsTable.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import { RelativeTimestampCell } from "~/features/common/table/v2/cells";
2424
import CatalogResourceNameCell from "~/features/data-catalog/CatalogResourceNameCell";
2525
import CatalogStatusBadgeCell from "~/features/data-catalog/CatalogStatusBadgeCell";
2626
import { useGetCatalogProjectsQuery } from "~/features/data-catalog/data-catalog.slice";
27+
import CatalogResourceDetailDrawer from "~/features/data-catalog/staged-resources/CatalogResourceDetailDrawer";
28+
import CatalogResourceOverflowMenu from "~/features/data-catalog/staged-resources/CatalogResourceOverflowMenu";
2729
import { getCatalogResourceStatus } from "~/features/data-catalog/utils";
2830
import { StagedResourceAPIResponse } from "~/types/api";
2931

@@ -103,6 +105,10 @@ const CatalogProjectsTable = ({
103105
setTotalPages(totalPages);
104106
}, [totalPages, setTotalPages]);
105107

108+
const [detailResource, setDetailResource] = useState<
109+
StagedResourceAPIResponse | undefined
110+
>(undefined);
111+
106112
const columns: ColumnDef<StagedResourceAPIResponse, any>[] = useMemo(
107113
() => [
108114
columnHelper.accessor((row) => row.name, {
@@ -141,6 +147,18 @@ const CatalogProjectsTable = ({
141147
},
142148
},
143149
}),
150+
columnHelper.display({
151+
id: "actions",
152+
cell: ({ row }) => (
153+
<CatalogResourceOverflowMenu
154+
onDetailClick={() => setDetailResource(row.original)}
155+
/>
156+
),
157+
size: 25,
158+
meta: {
159+
disableRowClick: true,
160+
},
161+
}),
144162
],
145163
[],
146164
);
@@ -184,6 +202,10 @@ const CatalogProjectsTable = ({
184202
startRange={startRange}
185203
endRange={endRange}
186204
/>
205+
<CatalogResourceDetailDrawer
206+
resource={detailResource}
207+
onClose={() => setDetailResource(undefined)}
208+
/>
187209
</>
188210
);
189211
};

0 commit comments

Comments
 (0)