Sovrn connector UI

clients/admin-ui/__tests__/features/connector-form-helpers.test.tsx

@@ -0,0 +1,64 @@
+import { fillInDefaults } from "~/features/datastore-connections/add-connection/forms/helpers";
+
+describe("connector form helpers", () => {
+  describe("fill in defaults", () => {
+    const baseDefaultValues = {
+      description: "",
+      name: "",
+      instance_key: "",
+    };
+
+    const baseSchema = {
+      title: "name",
+      type: "string",
+    };
+
+    const baseResponse = {
+      additionalProperties: false,
+      description: "Schema to...",
+      properties: {},
+      required: ["name"],
+      title: "BaseSchema",
+      type: "object",
+    };
+
+    it("can fill in string defaults", () => {
+      const properties = {
+        name: baseSchema,
+        description: {
+          ...baseSchema,
+          title: "description",
+          default: "default",
+        },
+        instance_key: { ...baseSchema, title: "instance_key" },
+      };
+      const schema = { ...baseResponse, properties };
+      expect(fillInDefaults(baseDefaultValues, schema)).toEqual({
+        description: "default",
+        name: "",
+        instance_key: "",
+      });
+    });
+
+    it("can fill in int defaults", () => {
+      const properties = {
+        name: baseSchema,
+        description: {
+          ...baseSchema,
+          title: "description",
+          default: "default",
+        },
+        instance_key: { ...baseSchema, title: "instance_key" },
+        port: { title: "port", default: "8080", type: "integer" },
+      };
+      const defaultValues = { ...baseDefaultValues, port: "" };
+      const schema = { ...baseResponse, properties };
+      expect(fillInDefaults(defaultValues, schema)).toEqual({
+        description: "default",
+        name: "",
+        instance_key: "",
+        port: 8080,
+      });
+    });
+  });
+});

clients/admin-ui/cypress/e2e/connectors.cy.ts

@@ -1,15 +1,15 @@
 describe("Connectors", () => {
   beforeEach(() => {
     cy.login();
+    cy.intercept("GET", "/api/v1/connection*", {
+      fixture: "connectors/list.json",
+    }).as("getConnectors");
+    cy.intercept("GET", "/api/v1/connection_type*", {
+      fixture: "connectors/connection_types.json",
+    }).as("getConnectionTypes");
   });
   describe("Configuring connectors", () => {
     beforeEach(() => {
-      cy.intercept("GET", "/api/v1/connection*", {
-        fixture: "connectors/list.json",
-      }).as("getConnectors");
-      cy.intercept("GET", "/api/v1/connection_type*", {
-        fixture: "connectors/connection_types.json",
-      }).as("getConnectionTypes");
       cy.intercept("GET", "/api/v1/connection/postgres_connector", {
         fixture: "connectors/postgres_connector.json",
       }).as("getPostgresConnector");
@@ -128,4 +128,59 @@ describe("Connectors", () => {
       cy.getByTestId("dataset-selector-section").should("not.exist");
     });
   });
+
+  describe("Email connector", () => {
+    beforeEach(() => {
+      cy.intercept("GET", "/api/v1/connection_type/sovrn/secret", {
+        fixture: "connectors/sovrn_secret.json",
+      }).as("getSovrnSecret");
+      cy.intercept("PATCH", "/api/v1/connection", {
+        fixture: "connectors/patch_connection.json",
+      }).as("patchSovrn");
+      cy.intercept("PUT", "/api/v1/connection/sovrn-test/secret*", {
+        fixture: "connectors/put_secret.json",
+      }).as("putSovrnSecret");
+    });
+
+    it("allows the user to add an email connector", () => {
+      cy.visit("/datastore-connection/new");
+      cy.getByTestId("select-dropdown-btn").click();
+      cy.getByTestId("select-dropdown-list").contains("Email connectors");
+      cy.getByTestId("select-dropdown-btn").click();
+      cy.getByTestId("sovrn-item").click();
+      cy.url().should("contain", "/new?step=2");
+
+      // fill out the form
+      const identifier = "sovrn-test";
+      const recipientEmailAddress = "sovrn-test";
+      cy.get("input").get(`[name='name']`).type(identifier);
+      cy.get("input").get(`[name='instance_key']`).type(identifier);
+      cy.get("input")
+        .get(`[name='recipient_email_address']`)
+        .type(recipientEmailAddress);
+      cy.get("button").contains("Save").click();
+      cy.wait("@patchSovrn").then((interception) => {
+        const { body } = interception.request;
+        expect(body).to.eql([
+          {
+            access: "write",
+            connection_type: "sovrn",
+            description: "",
+            disabled: false,
+            key: identifier,
+            name: identifier,
+          },
+        ]);
+      });
+      cy.wait("@putSovrnSecret").then((interception) => {
+        const { body } = interception.request;
+        expect(body).to.eql({
+          third_party_vendor_name: "Sovrn",
+          recipient_email_address: recipientEmailAddress,
+          test_email_address: "",
+          advanced_settings: "",
+        });
+      });
+    });
+  });
 });

clients/admin-ui/cypress/fixtures/connectors/connection_types.json

@@ -59,6 +59,12 @@
       "type": "manual",
       "human_readable": "Manual Webhook",
       "encoded_icon": null
+    },
+    {
+      "identifier": "sovrn",
+      "type": "email",
+      "human_readable": "Sovrn",
+      "encoded_icon": null
     }
   ],
   "total": 10,

clients/admin-ui/cypress/fixtures/connectors/patch_connection.json

@@ -0,0 +1,18 @@
+{
+  "succeeded": [
+    {
+      "name": "sovrn-test",
+      "key": "sovrn-test",
+      "description": "",
+      "connection_type": "sovrn",
+      "access": "write",
+      "created_at": "2023-02-13T16:44:45.926074+00:00",
+      "updated_at": "2023-02-13T16:44:45.926074+00:00",
+      "disabled": false,
+      "last_test_timestamp": null,
+      "last_test_succeeded": null,
+      "saas_config": null
+    }
+  ],
+  "failed": []
+}

clients/admin-ui/cypress/fixtures/connectors/put_secret.json

@@ -0,0 +1,5 @@
+{
+  "msg": "Secrets updated for ConnectionConfig with key: sovrn-test.",
+  "test_status": null,
+  "failure_reason": null
+}

clients/admin-ui/cypress/fixtures/connectors/sovrn_secret.json

@@ -0,0 +1,50 @@
+{
+  "title": "SovrnEmailSchema",
+  "description": "Schema to validate the secrets needed for the SovrnEmailConnector\n\nOverrides the ConsentEmailConnector to set the third_party_vendor_name\nand advanced settings.",
+  "type": "object",
+  "properties": {
+    "third_party_vendor_name": {
+      "title": "Third Party Vendor Name",
+      "default": "Sovrn",
+      "type": "string"
+    },
+    "recipient_email_address": {
+      "title": "Recipient Email Address",
+      "type": "string"
+    },
+    "test_email_address": { "title": "Test Email Address", "type": "string" },
+    "advanced_settings": { "$ref": "#/definitions/AdvancedSettings" }
+  },
+  "required": ["recipient_email_address", "advanced_settings"],
+  "additionalProperties": false,
+  "definitions": {
+    "IdentityTypes": {
+      "title": "IdentityTypes",
+      "description": "An enumeration.",
+      "enum": ["email", "phone_number"],
+      "type": "string"
+    },
+    "CookieIds": {
+      "title": "CookieIds",
+      "description": "An enumeration.",
+      "enum": ["ljt_readerID"],
+      "type": "string"
+    },
+    "AdvancedSettings": {
+      "title": "AdvancedSettings",
+      "type": "object",
+      "properties": {
+        "identity_types": {
+          "default": [],
+          "type": "array",
+          "items": { "$ref": "#/definitions/IdentityTypes" }
+        },
+        "browser_identity_types": {
+          "default": [],
+          "type": "array",
+          "items": { "$ref": "#/definitions/CookieIds" }
+        }
+      }
+    }
+  }
+}

clients/admin-ui/src/features/common/dropdown/SelectDropdown.tsx

@@ -96,11 +96,12 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
           bg: "none",
         }}
         {...menuButtonProps}
+        data-testid="select-dropdown-btn"
       >
         <Text isTruncated>{selectedText ?? label}</Text>
       </MenuButton>
       {isOpen ? (
-        <MenuList lineHeight="1rem" p="0">
+        <MenuList lineHeight="1rem" p="0" data-testid="select-dropdown-list">
           {hasClear && (
             <Flex
               borderBottom="1px"

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

@@ -1,7 +1,12 @@
 import { AddConnectionStep } from "datastore-connections/add-connection/types";
 import { DatastoreConnection } from "datastore-connections/types";
 
-import { ConnectionSystemTypeMap, SystemType } from "~/types/api";
+import {
+  ConnectionSystemTypeMap,
+  CookieIds,
+  IdentityTypes,
+  SystemType,
+} from "~/types/api";
 
 export type ConnectionTypeParams = {
   search: string;
@@ -16,6 +21,7 @@ export type ConnectionTypeSecretSchemaProperty = {
   allOf?: {
     $ref: string;
   }[];
+  items?: { $ref: string };
 };
 
 export type ConnectionTypeSecretSchemaReponse = {
@@ -25,6 +31,15 @@ export type ConnectionTypeSecretSchemaReponse = {
   required: string[];
   title: string;
   type: string;
+  definitions: {
+    AdvancedSettings: {
+      title: string;
+      type: string;
+      properties: { [key: string]: ConnectionTypeSecretSchemaProperty };
+    };
+    IdentityTypes: IdentityTypes;
+    CookieIds: CookieIds;
+  };
 };
 
 export type ConnectionTypeState = ConnectionTypeParams & {

clients/admin-ui/src/features/datastore-connections/add-connection/ConfigureConnector.tsx

@@ -34,7 +34,7 @@ const ConfigureConnector: React.FC = () => {
   const mounted = useRef(false);
   const [steps, setSteps] = useState([STEPS[0], STEPS[1], STEPS[2]]);
   const [canRedirect, setCanRedirect] = useState(false);
-  const { connection, connectionOption, step } = useAppSelector(
+  const { connection, connectionOption } = useAppSelector(
     selectConnectionTypeState
   );
   const connector = CONNECTOR_PARAMETERS_OPTIONS.find(
@@ -123,12 +123,6 @@ const ConfigureConnector: React.FC = () => {
   }, [dispatch]);
 
   useEffect(() => {
-    if (step) {
-      setSelectedItem(
-        connector?.options[Number(step.stepId) - connector.options.length]
-      );
-    }
-
     // If a connection has been initially created, then auto redirect the user accordingly.
     if (connection?.key) {
       handleNavChange(
@@ -146,7 +140,6 @@ const ConfigureConnector: React.FC = () => {
     connectionOption?.type,
     connector?.options,
     handleNavChange,
-    step,
   ]);
 
   return (

clients/admin-ui/src/features/datastore-connections/add-connection/ConnectionTypeList.tsx

@@ -29,6 +29,7 @@ const ConnectionTypeList: React.FC<ConnectionTypeListProps> = ({ items }) => (
             boxShadow: "lg",
             cursor: "pointer",
           }}
+          data-testid={`${i.identifier}-item`}
         >
           <Flex
             alignItems="center"