New integration options for D&D #5000

jpople · 2024-06-18T18:53:09Z

Closes PROD-2155

Description Of Changes

Adds UI to configure integrations and add discovery monitors for S3, Scylla, and DynamoDB to admin UI.

(Note these screenshots don't show the correct logo for S3, but I've fixed that!)

Code Changes

Refactors to new integrations UI to handle arbitrary integration types rather than specifically BigQuery
Changes new integration detail view to force redirect if an integration not supported for D&D is opened
Adds tab-based filtering to integrations index and integration type selection screen
Refactors "show more/less" button in copy to ShowMoreContent component
Adds new FidesSpinner component to ensure spinners are centered in their containers rather than top-left-aligned
Re-generates OpenAPI types

Steps to Confirm

In new integrations UI:

Create a Scylla, DynamoDB, and S3 integration and add a discovery monitor for each
View integrations of those types on the list view and each of their detail pages
Forms should be populated with appropriate parameters per integration type and appropriate copy (lorem ipsum for now)

Pre-Merge Checklist

Issue Requirements are Met
Relevant Follow-Up Issues Created
Update CHANGELOG.md

vercel · 2024-06-18T18:53:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 19, 2024 7:42pm

jpople · 2024-06-18T19:02:38Z

clients/admin-ui/src/features/connection-type/connection-type.slice.ts

@@ -14,7 +14,7 @@ import {
 import type { RootState } from "../../app/store";
 import {
  ConnectionTypeParams,
-  ConnectionTypeSecretSchemaReponse,
+  ConnectionTypeSecretSchemaResponse,


This was just a typo that got preserved from way back when.

jpople · 2024-06-18T19:12:07Z

clients/admin-ui/src/features/integrations/useIntegrationFilterTabs.tsx

+  const onChangeFilter = (newIndex: number) => {
+    setIsFiltering(true);
+    setTabIndex(newIndex);
+    setTimeout(() => setIsFiltering(false), 100);


Putting in a fake "loading" state for a short period makes the change in contents feel less jarring to me-- not married to this if we're against it.

I think small artificial delays are valid if it improves the UX. We can keep it.

cypress · 2024-06-18T19:40:44Z

Passing run #8413 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge `072515d` into `39d23e1`...
Project: fides	Commit: `c68d31fcf1 ℹ️`
Status: Passed	Duration: 00:34 💡
Started: Jun 19, 2024 7:51 PM	Ended: Jun 19, 2024 7:51 PM

Review all test suite changes for PR #5000 ↗︎

lucanovera

Overall the code looks very good! Great work. Just a question about the missing copies for some integrations.

And two UI bugs:

This cancel button seems to be much bigger than all of the other ones, I think it should be the same size

Captura de pantalla 2024-06-19 a la(s) 4 15 04 p m

The active tab highlight. I think there may be a separate issue for this, but if there's a quick fix for it, it would be nice to add it. It's very explicit because when you open the modal the first tab already has the highlight rectangle.

Captura de pantalla 2024-06-19 a la(s) 4 14 30 p m

lucanovera · 2024-06-19T19:02:00Z

clients/admin-ui/src/features/common/FidesSpinner.tsx

@@ -0,0 +1,9 @@
+import { Flex, Spinner, SpinnerProps } from "fidesui";
+
+const FidesSpinner = ({ ...props }: SpinnerProps) => (


good one making this reusable

lucanovera · 2024-06-19T19:02:28Z

clients/admin-ui/src/features/common/copy/ShowMoreContent.tsx

+import { Collapse, Text, useDisclosure } from "fidesui";
+import { ReactNode } from "react";
+
+const ShowMoreContent = ({ children }: { children: ReactNode }) => {


yes, reusability!

lucanovera · 2024-06-19T19:04:51Z

clients/admin-ui/src/features/integrations/ConfigureIntegrationModal.tsx

@@ -1,7 +1,8 @@
 import { UseDisclosureReturn } from "fidesui";

 import AddModal from "~/features/configure-consent/AddModal";
-import ConfigureIntegrationForm from "~/features/integrations/ConfigureIntegrationForm";
+import ConfigureIntegrationForm from "~/features/integrations/add-integration/ConfigureIntegrationForm";
+import useIntegrationOption from "~/features/integrations/useIntegrationOption";
 import { ConnectionConfigurationResponse } from "~/types/api";

 const ConfigureIntegrationModal = ({


composition for the win!

lucanovera · 2024-06-19T19:08:17Z

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

+  <>
+    <InfoHeading text="Overview" />
+    <InfoText>
+      Here&apos;s some example copy talking about Amazon S3. Lorem ipsum dolor


Are the real copies ready?

lucanovera · 2024-06-19T19:08:44Z

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

+  <>
+    <InfoHeading text="Overview" />
+    <InfoText>
+      Here&apos;s some example copy talking about DynamoDB. Lorem ipsum dolor


Do we have the final copy?

lucanovera · 2024-06-19T19:10:33Z

clients/admin-ui/src/features/integrations/useIntegrationFilterTabs.tsx

+  const onChangeFilter = (newIndex: number) => {
+    setIsFiltering(true);
+    setTabIndex(newIndex);
+    setTimeout(() => setIsFiltering(false), 100);


I think small artificial delays are valid if it improves the UX. We can keep it.

lucanovera

Thanks for the button fix. approve

cypress · 2024-06-19T20:29:26Z

Passing run #8417 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

New integration options for D&D (#5000)
Project: fides	Commit: `a48183e055`
Status: Passed	Duration: 00:35 💡
Started: Jun 19, 2024 8:28 PM	Ended: Jun 19, 2024 8:29 PM

Review all test suite changes for PR #5000 ↗︎

jpople added 9 commits June 17, 2024 17:03

WIP: integration config

789b96f

Merge branch 'main' into jpople/prod-2155/new-integration-options

b29360e

regenerate openAPI types

cc69257

finish form updates

3503082

regenerate openAPI types

748668d

refactor filter tabs

62a6d33

copy updates

e73eb4e

refactor 'show more' in copy

2b72351

Merge branch 'main' into jpople/prod-2155/new-integration-options

5c6ba49

re-add mistakenly removed S3 logo

076c31c

vercel bot had a problem deploying to Preview June 18, 2024 18:56 Failure

jpople added 2 commits June 18, 2024 14:57

fix test connection uncaught error

7534cd5

undo changes to useTestConnection

988a61b

vercel bot had a problem deploying to Preview June 18, 2024 19:00 Failure

jpople commented Jun 18, 2024

View reviewed changes

jpople added 2 commits June 18, 2024 15:24

fix incorrect type annotation

079643b

fix outdated types

96a987e

vercel bot deployed to Preview June 18, 2024 19:30 View deployment

jpople added 2 commits June 18, 2024 15:42

refactor integration type info

11479b6

rearrange & rename code around integration type info

2d6d0c0

vercel bot deployed to Preview June 18, 2024 19:48 View deployment

jpople marked this pull request as ready for review June 18, 2024 19:49

Cypress test updates

265bf5e

vercel bot deployed to Preview June 19, 2024 05:13 View deployment

Merge branch 'main' into jpople/prod-2155/new-integration-options

c177dd5

jpople requested a review from lucanovera June 19, 2024 15:11

add Scylla copy

1ae251c

vercel bot deployed to Preview June 19, 2024 15:31 View deployment

jpople added 2 commits June 19, 2024 11:38

generate openAPI types

b810062

merge main

d193d83

vercel bot deployed to Preview June 19, 2024 15:43 View deployment

update changelog

5f5de17

lucanovera requested changes Jun 19, 2024

View reviewed changes

update button sizes

072515d

vercel bot deployed to Preview June 19, 2024 19:42 View deployment

lucanovera approved these changes Jun 19, 2024

View reviewed changes

jpople merged commit a48183e into main Jun 19, 2024
13 checks passed

jpople deleted the jpople/prod-2155/new-integration-options branch June 19, 2024 20:16

jpople mentioned this pull request Jun 24, 2024

Discovery monitor form improvements #5017

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New integration options for D&D #5000

New integration options for D&D #5000

jpople commented Jun 18, 2024 •

edited

Loading

vercel bot commented Jun 18, 2024 •

edited

Loading

jpople Jun 18, 2024

jpople Jun 18, 2024

lucanovera Jun 19, 2024

cypress bot commented Jun 18, 2024 •

edited

Loading

lucanovera left a comment

lucanovera Jun 19, 2024

lucanovera Jun 19, 2024

lucanovera Jun 19, 2024

lucanovera Jun 19, 2024

lucanovera Jun 19, 2024

lucanovera Jun 19, 2024

lucanovera left a comment

cypress bot commented Jun 19, 2024

		@@ -0,0 +1,9 @@
		import { Flex, Spinner, SpinnerProps } from "fidesui";

		const FidesSpinner = ({ ...props }: SpinnerProps) => (

New integration options for D&D #5000

New integration options for D&D #5000

Conversation

jpople commented Jun 18, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Jun 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Jun 18, 2024 • edited Loading

Passing run #8413 ↗︎

Review all test suite changes for PR #5000 ↗︎

lucanovera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lucanovera left a comment

Choose a reason for hiding this comment

cypress bot commented Jun 19, 2024

Passing run #8417 ↗︎

Review all test suite changes for PR #5000 ↗︎

jpople commented Jun 18, 2024 •

edited

Loading

vercel bot commented Jun 18, 2024 •

edited

Loading

cypress bot commented Jun 18, 2024 •

edited

Loading