Skip to content

Commit fc3f8db

Browse files
jpopleadamsachs
jpople
authored and
adamsachs
committed
Update copy on new integrations UI (#5007)
1 parent 5236f71 commit fc3f8db

File tree

8 files changed

+323
-158
lines changed

8 files changed

+323
-158
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ The types of changes are:
3737
- Move new data map reporting table out of beta and remove old table from Data Lineage map. [#4963](https://github.com/ethyca/fides/pull/4963)
3838
- Disable the 'connect to a database' button if the `dataDiscoveryAndDetection` feature flag is enabled [#1455](https://github.com/ethyca/fidesplus/pull/1455)
3939
- Upgrade Privacy Request table to use FidesTable V2 [#4990](https://github.com/ethyca/fides/pull/4990)
40+
- Add copy to project selection modal and tweak copy on discovery monitors table [#5007](https://github.com/ethyca/fides/pull/5007)
4041

4142
### Fixed
4243
- Fixed an issue where the GPP signal status was prematurely set to `ready` in some scenarios [#4957](https://github.com/ethyca/fides/pull/4957)

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

+52-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import { Heading, Link, OrderedList, Text, UnorderedList } from "fidesui";
1+
import {
2+
Code,
3+
Heading,
4+
Link,
5+
OrderedList,
6+
Table,
7+
Tag,
8+
Tbody,
9+
Td,
10+
Text,
11+
Th,
12+
Thead,
13+
Tr,
14+
UnorderedList,
15+
} from "fidesui";
216
import { ReactNode } from "react";
317

418
export const InfoHeading = ({ text }: { text: string }) => (
@@ -32,7 +46,43 @@ export const InfoUnorderedList = ({ children }: { children: ReactNode }) => (
3246
);
3347

3448
export const InfoOrderedList = ({ children }: { children: ReactNode }) => (
35-
<OrderedList fontSize="14px" mb={4}>
49+
<OrderedList fontSize="14px" mb={4} ml={6}>
3650
{children}
3751
</OrderedList>
3852
);
53+
54+
export const InfoCodeBlock = ({ children }: { children: ReactNode }) => (
55+
<Code display="block" whiteSpace="pre" p={4} mb={4} overflowX="scroll">
56+
{children}
57+
</Code>
58+
);
59+
60+
export interface PermissionsTableItem {
61+
permission: string;
62+
description: string;
63+
}
64+
65+
export const InfoPermissionsTable = ({
66+
data,
67+
}: {
68+
data: PermissionsTableItem[];
69+
}) => (
70+
<Table fontSize="14px">
71+
<Thead>
72+
<Tr>
73+
<Th>Permission</Th>
74+
<Th>Description</Th>
75+
</Tr>
76+
</Thead>
77+
<Tbody>
78+
{data.map((item) => (
79+
<Tr key={item.permission}>
80+
<Td>
81+
<Tag>{item.permission}</Tag>
82+
</Td>
83+
<Td>{item.description}</Td>
84+
</Tr>
85+
))}
86+
</Tbody>
87+
</Table>
88+
);

‎clients/admin-ui/src/features/integrations/configure-monitor/ConfigureMonitorDatabasesForm.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Button, ButtonGroup, Flex, Spinner } from "fidesui";
1+
import { Button, ButtonGroup, Flex, Spinner, Text } from "fidesui";
22
import { useEffect, useState } from "react";
33

44
import useQueryResultToast from "~/features/common/form/useQueryResultToast";
55
import { PickerCheckboxList } from "~/features/common/PickerCard";
6+
import QuestionTooltip from "~/features/common/QuestionTooltip";
67
import {
78
PaginationBar,
89
useServerSidePagination,
@@ -22,6 +23,9 @@ const EMPTY_RESPONSE = {
2223
pages: 0,
2324
};
2425

26+
const TOOLTIP_COPY =
27+
"Select projects to restrict which datasets this monitor can access. If no projects are selected, the monitor will observe all current and future projects.";
28+
2529
const ConfigureMonitorDatabasesForm = ({
2630
monitor,
2731
onClose,
@@ -86,7 +90,11 @@ const ConfigureMonitorDatabasesForm = ({
8690

8791
return (
8892
<>
89-
<Flex p={4}>
93+
<Flex p={4} direction="column">
94+
<Flex direction="row" mb={4} gap={1} align="center">
95+
<Text fontSize="sm">Select projects to monitor</Text>
96+
<QuestionTooltip label={TOOLTIP_COPY} />
97+
</Flex>
9098
<PickerCheckboxList
9199
title="Select all projects"
92100
items={databases.map((d) => ({ id: d, name: d }))}

‎clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,10 @@ const MonitorConfigTab = ({
187187
return (
188188
<>
189189
<Text maxW="720px" mb={6} fontSize="sm">
190-
Data discovery monitors observe configured systems for data model
191-
changes to proactively discover and classify data risks. You can create
192-
multiple monitors to observe part or all of a project, dataset, table or
193-
API for changes and assign these to different data stewards.
190+
A data discovery monitor observes configured systems for data model
191+
changes to proactively discover and classify data risks. Monitors can
192+
observe part or all of a project, dataset, table, or API for changes and
193+
each can be assigned to a different data steward.
194194
</Text>
195195
<TableActionBar>
196196
<Spacer />

‎clients/admin-ui/src/features/integrations/integration-type-info/bigqueryInfo.tsx

+52-94
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { Code, ListItem, Table, Tbody, Td, Th, Thead, Tr } from "fidesui";
1+
import { ListItem } from "fidesui";
22

33
import {
4+
InfoCodeBlock,
45
InfoHeading,
56
InfoLink,
67
InfoOrderedList,
8+
InfoPermissionsTable,
79
InfoText,
810
InfoUnorderedList,
911
} from "~/features/common/copy/components";
1012
import ShowMoreContent from "~/features/common/copy/ShowMoreContent";
11-
import Tag from "~/features/common/Tag";
1213
import { ConnectionCategory } from "~/features/integrations/ConnectionCategory";
1314
import { AccessLevel, ConnectionType } from "~/types/api";
1415

@@ -102,6 +103,52 @@ export const BigQueryOverview = () => (
102103
</>
103104
);
104105

106+
const FIDES_PERMISSIONS = [
107+
{
108+
permission: "bigquery.jobs.create",
109+
description:
110+
"Run jobs (e.g. queries) within the project. This is only needed for the Fides Project where the Fides service account is located.",
111+
},
112+
{
113+
permission: "bigquery.jobs.list",
114+
description:
115+
"Manage the queries that the service account performs. This is only needed for the Fides Project where the Fides service account is located.",
116+
},
117+
{
118+
permission: "bigquery.routines.get",
119+
description:
120+
"Allow the service account to retrieve custom routines (e.g. queries) on associated datasets and tables.",
121+
},
122+
{
123+
permission: "bigquery.routines.list",
124+
description:
125+
"Allow the service account to manage the custom routines (e.g. queries) that run on associated datasets and tables.",
126+
},
127+
];
128+
129+
const MONITORED_PROJECT_PERMISSIONS = [
130+
{
131+
permission: "bigquery.datasets.get",
132+
description: "Retrieve metadata and list tables for the specified project.",
133+
},
134+
{
135+
permission: "bigquery.tables.get",
136+
description: "Retrieve metadata for the specified table.",
137+
},
138+
{
139+
permission: "bigquery.tables.getData",
140+
description: "Read data in the specified table.",
141+
},
142+
{
143+
permission: "bigquery.tables.list",
144+
description: "List all tables in the specified dataset.",
145+
},
146+
{
147+
permission: "bigquery.projects.get",
148+
description: "Retrieve metadata for the specified project.",
149+
},
150+
];
151+
105152
export const BigQueryInstructions = () => (
106153
<>
107154
<InfoHeading text="Configuring a Fides -> BigQuery Integration" />
@@ -130,100 +177,13 @@ export const BigQueryInstructions = () => (
130177
Assign the following permissions to the Fides Project that will be used
131178
by your Fides service account to run queries:
132179
</InfoText>
133-
<Table fontSize="14px">
134-
<Thead>
135-
<Tr>
136-
<Th>Permission</Th>
137-
<Th>Description</Th>
138-
</Tr>
139-
</Thead>
140-
<Tbody>
141-
<Tr>
142-
<Td>
143-
<Tag>bigquery.jobs.create</Tag>
144-
</Td>
145-
<Td>
146-
Run jobs (e.g. queries) within the project. This is only needed
147-
for the Fides Project where the Fides service account is located.
148-
</Td>
149-
</Tr>
150-
<Tr>
151-
<Td>
152-
<Tag>bigquery.jobs.list</Tag>
153-
</Td>
154-
<Td>
155-
Manage the queries that the service account performs. This is only
156-
needed for the Fides Project where the Fides service account is
157-
located.
158-
</Td>
159-
</Tr>
160-
<Tr>
161-
<Td>
162-
<Tag>bigquery.routines.get</Tag>
163-
</Td>
164-
<Td>
165-
Allow the service account to retrieve custom routines (e.g.
166-
queries) on associated datasets and tables.
167-
</Td>
168-
</Tr>
169-
<Tr>
170-
<Td>
171-
<Tag>bigquery.routines.list</Tag>
172-
</Td>
173-
<Td>
174-
Allow the service account to manage the custom routines (e.g.
175-
queries) that run on associated datasets and tables.
176-
</Td>
177-
</Tr>
178-
</Tbody>
179-
</Table>
180+
<InfoPermissionsTable data={FIDES_PERMISSIONS} />
180181
<InfoHeading text="Step 4: Assign permissions to any project you’d like Fides to monitor" />
181182
<InfoText>
182183
Grant the following permissions to the Fides service account in every
183184
project where you would like Fides detection and discovery monitoring.
184185
</InfoText>
185-
<Table fontSize="14px">
186-
<Thead>
187-
<Tr>
188-
<Th>Permission</Th>
189-
<Th>Description</Th>
190-
</Tr>
191-
</Thead>
192-
<Tbody>
193-
<Tr>
194-
<Td>
195-
<Tag>bigquery.datasets.get</Tag>
196-
</Td>
197-
<Td>
198-
Retrieve metadata and list tables for the specified project.
199-
</Td>
200-
</Tr>
201-
<Tr>
202-
<Td>
203-
<Tag>bigquery.tables.get</Tag>
204-
</Td>
205-
<Td>Retrieve metadata for the specified table.</Td>
206-
</Tr>
207-
<Tr>
208-
<Td>
209-
<Tag>bigquery.tables.getData</Tag>
210-
</Td>
211-
<Td>Read data in the specified table.</Td>
212-
</Tr>
213-
<Tr>
214-
<Td>
215-
<Tag>bigquery.tables.list</Tag>
216-
</Td>
217-
<Td>List all tables in the specified dataset.</Td>
218-
</Tr>
219-
<Tr>
220-
<Td>
221-
<Tag>bigquery.projects.get</Tag>
222-
</Td>
223-
<Td>Retrieve metadata for the specified project.</Td>
224-
</Tr>
225-
</Tbody>
226-
</Table>
186+
<InfoPermissionsTable data={MONITORED_PROJECT_PERMISSIONS} />
227187
<InfoHeading text="Step 5: Create a Fides service account in the Fides Project" />
228188
<InfoOrderedList>
229189
<ListItem>
@@ -244,9 +204,7 @@ export const BigQueryInstructions = () => (
244204
An example of this is below:
245205
</ListItem>
246206
</InfoOrderedList>
247-
<Code display="block" whiteSpace="pre" p={4} mb={4} overflowX="scroll">
248-
{SAMPLE_JSON}
249-
</Code>
207+
<InfoCodeBlock>{SAMPLE_JSON}</InfoCodeBlock>
250208
<InfoHeading text="Step 6: Use the JSON key to authenticate your integration" />
251209
<InfoText>
252210
Provide the JSON key to your Fides instance to securely connect Fides.

0 commit comments

Comments
 (0)