LA-166 ux issues when saving an integration (#5555)

Co-authored-by: Lucano Vera <[email protected]>
ethyca · Dec 11, 2024 · 9ac2962 · 9ac2962
1 parent 6bcfb60
commit 9ac2962
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ The types of changes are:
 
 ### Changed
 - Adding hashes to system tab URLs [#5535](https://github.com/ethyca/fides/pull/5535)
+- Boolean inputs will now show as a select with true/false values in the connection form [#5555](https://github.com/ethyca/fides/pull/5555)
 - Updated Cookie House to be responsive [#5541](https://github.com/ethyca/fides/pull/5541)
 
 ### Developer Experience
@@ -32,6 +33,7 @@ The types of changes are:
 ### Fixed
 - Updating dataset PUT to allow deleting all datasets [#5524](https://github.com/ethyca/fides/pull/5524)
 - Adds support for fides_key generation when parent_key is provided in Taxonomy create endpoints [#5542](https://github.com/ethyca/fides/pull/5542)
+- An integration will no longer re-enable after saving the connection form [#5555](https://github.com/ethyca/fides/pull/5555)
 
 ### Removed
 - Removed unnecessary debug logging from the load_file config helper [#5544](https://github.com/ethyca/fides/pull/5544)

diff --git a/clients/admin-ui/cypress/e2e/system-integrations.cy.ts b/clients/admin-ui/cypress/e2e/system-integrations.cy.ts
@@ -1,12 +1,17 @@
 import {
   stubDatasetCrud,
+  stubDisabledIntegrationSystemCrud,
   stubPlus,
+  stubPrivacyNoticesCrud,
   stubSystemCrud,
   stubSystemIntegrations,
   stubTaxonomyEntities,
 } from "cypress/support/stubs";
 
-import { SYSTEM_ROUTE } from "~/features/common/nav/v2/routes";
+import {
+  EDIT_SYSTEM_ROUTE,
+  SYSTEM_ROUTE,
+} from "~/features/common/nav/v2/routes";
 
 describe("System integrations", () => {
   beforeEach(() => {
@@ -69,4 +74,36 @@ describe("System integrations", () => {
       cy.getByTestId("enabled-actions").should("not.exist");
     });
   });
+
+  describe("Loading existing integration", () => {
+    beforeEach(() => {
+      cy.login();
+      stubPlus(false);
+      stubSystemIntegrations();
+      stubSystemCrud();
+      stubDatasetCrud();
+      stubTaxonomyEntities();
+      stubPrivacyNoticesCrud();
+      stubDisabledIntegrationSystemCrud();
+
+      cy.visit(EDIT_SYSTEM_ROUTE.replace("[id]", "disabled_postgres_system"));
+      cy.getByTestId("tab-Integrations").click();
+    });
+
+    it("when saving the form it shouldn't re-enable the integration", () => {
+      cy.get("form").within(() => {
+        cy.get("button[type=submit]").click();
+      });
+      cy.wait("@patchConnection").then(({ request }) => {
+        expect(request.body[0]).to.deep.equal({
+          access: "write",
+          connection_type: "postgres",
+          description: "",
+          key: "asdasd_postgres",
+          enabled_actions: [],
+        });
+        expect(request.body[0].disabled).to.be.undefined;
+      });
+    });
+  });
 });
diff --git a/clients/admin-ui/cypress/fixtures/systems/system_disabled_integration.json b/clients/admin-ui/cypress/fixtures/systems/system_disabled_integration.json
@@ -0,0 +1,67 @@
+{
+  "fides_key": "disabled_postgres_system",
+  "organization_fides_key": "default_organization",
+  "tags": [],
+  "name": "A system with adisabled Postgres integration",
+  "description": "",
+  "meta": null,
+  "fidesctl_meta": null,
+  "system_type": "",
+  "egress": null,
+  "ingress": null,
+  "privacy_declarations": [],
+  "administrating_department": "Not defined",
+  "vendor_id": null,
+  "previous_vendor_id": null,
+  "vendor_deleted_date": null,
+  "dataset_references": [],
+  "processes_personal_data": true,
+  "exempt_from_privacy_regulations": false,
+  "reason_for_exemption": null,
+  "uses_profiling": false,
+  "legal_basis_for_profiling": [],
+  "does_international_transfers": false,
+  "legal_basis_for_transfers": [],
+  "requires_data_protection_assessments": false,
+  "dpa_location": null,
+  "dpa_progress": null,
+  "privacy_policy": null,
+  "legal_name": "",
+  "legal_address": "",
+  "responsibility": [],
+  "dpo": "",
+  "joint_controller_info": null,
+  "data_security_practices": "",
+  "cookie_max_age_seconds": null,
+  "uses_cookies": false,
+  "cookie_refresh": false,
+  "uses_non_cookie_access": false,
+  "legitimate_interest_disclosure_url": null,
+  "cookies": [],
+  "created_at": "2024-12-03T15:21:25.496095Z",
+  "connection_configs": {
+    "name": "asdasd_postgres",
+    "key": "asdasd_postgres",
+    "description": "",
+    "connection_type": "postgres",
+    "access": "write",
+    "created_at": "2024-12-03T15:22:04.816975Z",
+    "updated_at": "2024-12-03T15:33:16.990741Z",
+    "disabled": true,
+    "last_test_timestamp": null,
+    "last_test_succeeded": null,
+    "saas_config": null,
+    "secrets": {
+      "host": "host.docker.internal",
+      "port": 6432,
+      "username": "asdasd",
+      "password": "**********",
+      "dbname": "postgres_example",
+      "db_schema": "",
+      "ssh_required": false
+    },
+    "authorized": false,
+    "enabled_actions": null
+  },
+  "data_stewards": []
+}
diff --git a/clients/admin-ui/cypress/support/stubs.ts b/clients/admin-ui/cypress/support/stubs.ts
@@ -240,6 +240,10 @@ export const stubPlus = (available: boolean, options?: HealthCheck) => {
       statusCode: 400,
       body: {},
     }).as("getPlusHealth");
+    cy.intercept("GET", "/api/v1/plus/*", {
+      statusCode: 404,
+      body: {},
+    }).as("getNoPlusAvailable");
   }
 };
 
@@ -433,6 +437,31 @@ export const stubSystemIntegrations = () => {
   ).as("getConnections");
 };
 
+export const stubDisabledIntegrationSystemCrud = () => {
+  cy.intercept("GET", "/api/v1/system/disabled_postgres_system", {
+    fixture: "systems/system_disabled_integration.json",
+  }).as("getDisabledSystemIntegration");
+
+  cy.intercept("PATCH", "/api/v1/system/disabled_postgres_system/connection", {
+    statusCode: 200,
+    body: {},
+  }).as("patchConnection");
+
+  cy.intercept("PUT", "/api/v1/connection/asdasd_postgres/datasetconfig", {
+    statusCode: 200,
+    body: {},
+  }).as("putDatasetConfig");
+
+  cy.intercept(
+    "PATCH",
+    "/api/v1/system/disabled_postgres_system/connection/secrets*",
+    {
+      statusCode: 200,
+      body: {},
+    },
+  ).as("patchConnectionSecret");
+};
+
 export const stubUserManagement = () => {
   cy.intercept("/api/v1/user?*", {
     fixture: "user-management/users.json",

diff --git a/...-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParameters.tsx b/...-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParameters.tsx
@@ -112,7 +112,6 @@ export const patchConnectionConfig = async (
         ? connectionOption.type
         : connectionOption.identifier) as ConnectionType,
       description: values.description,
-      disabled: false,
       key,
       ...(values.enabled_actions
         ? { enabled_actions: values.enabled_actions as ActionType[] }

diff --git a/...src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx b/...src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx
@@ -161,15 +161,18 @@ export const ConnectorParametersForm = ({
         const error = form.errors.secrets && form.errors.secrets[key];
         const touch = form.touched.secrets ? form.touched.secrets[key] : false;
 
+        const isBoolean = item.type === "boolean";
+        const isInteger = item.type === "integer";
+
         return (
           <FormControl
             display="flex"
-            isRequired={isRequiredSecretValue(key)}
+            isRequired={isRequiredSecretValue(key) && !isBoolean}
             isInvalid={error && touch}
           >
             {getFormLabel(key, item.title)}
             <VStack align="flex-start" w="inherit">
-              {item.type !== "integer" && (
+              {!isInteger && !isBoolean && (
                 <Input
                   {...field}
                   type={item.sensitive ? "password" : "text"}
@@ -179,7 +182,17 @@ export const ConnectorParametersForm = ({
                   size="sm"
                 />
               )}
-              {item.type === "integer" && (
+              {isBoolean && (
+                <Select
+                  value={!!field.value}
+                  onChange={(value) => form.setFieldValue(field.name, value)}
+                  options={[
+                    { label: "False", value: false },
+                    { label: "True", value: true },
+                  ]}
+                />
+              )}
+              {isInteger && (
                 <NumberInput
                   allowMouseWheel
                   color="gray.700"