From 136db0c82b06305e239480680eb700fac31b4da4 Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Fri, 15 Dec 2023 16:34:41 -0500
Subject: [PATCH 1/6] fix issues with vendor selector behavior

---
 .../features/system/SystemInformationForm.tsx |  19 +-
 .../src/features/system/VendorSelector.tsx    | 310 ++++++++++--------
 clients/admin-ui/src/flags.json               |   6 -
 3 files changed, 178 insertions(+), 157 deletions(-)

diff --git a/clients/admin-ui/src/features/system/SystemInformationForm.tsx b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
index daface9152..10d74c55d3 100644
--- a/clients/admin-ui/src/features/system/SystemInformationForm.tsx
+++ b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
@@ -129,12 +129,17 @@ const SystemInformationForm = ({
         name: Yup.string()
           .required()
           .label("System name")
-          .notOneOf(
-            systems
+          .test("is-unique", "", (value, context) => {
+            const takenSystemNames = systems
               .filter((s) => s.name !== initialValues.name)
-              .map((s) => s.name),
-            "System must have a unique name"
-          ),
+              .map((s) => s.name);
+            if (takenSystemNames.some((name) => name === value)) {
+              return context.createError({
+                message: `You already have a system called "${value}". Please specify a unique name for this system.`,
+              });
+            }
+            return true;
+          }),
         privacy_policy: Yup.string().min(1).url().nullable(),
       }),
     [systems, initialValues.name]
@@ -300,10 +305,6 @@ const SystemInformationForm = ({
             <SystemFormInputGroup heading="System details">
               {features.dictionaryService ? (
                 <VendorSelector
-                  fieldsSeparated={
-                    features.dictionaryService &&
-                    features.flags.separateVendorSelector
-                  }
                   options={dictionaryOptions}
                   onVendorSelected={handleVendorSelected}
                   isCreate={!passedInSystem}
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index 744d65f149..ccc952fe43 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -1,8 +1,13 @@
 import {
+  Box,
+  CloseButton,
   Flex,
   FormControl,
   HStack,
   IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
   Spacer,
   Text,
   VStack,
@@ -24,7 +29,6 @@ import { CompassIcon } from "~/features/common/Icon/CompassIcon";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
 import { DictOption } from "~/features/plus/plus.slice";
 import { selectSuggestions } from "~/features/system/dictionary-form/dict-suggestion.slice";
-import { DictSuggestionTextInput } from "~/features/system/dictionary-form/DictSuggestionInputs";
 import { FormValues } from "~/features/system/form";
 
 const CompassButton = ({
@@ -51,7 +55,6 @@ const CompassButton = ({
 );
 
 interface Props {
-  fieldsSeparated: boolean;
   isCreate: boolean;
   lockedForGVL: boolean;
   options: DictOption[];
@@ -82,7 +85,6 @@ const CustomDictOption: React.FC<
 );
 
 const VendorSelector = ({
-  fieldsSeparated,
   isCreate,
   lockedForGVL,
   options,
@@ -90,7 +92,7 @@ const VendorSelector = ({
 }: Props) => {
   const isShowingSuggestions = useAppSelector(selectSuggestions);
   const [initialField, meta, { setValue }] = useField({
-    name: fieldsSeparated ? "vendor_id" : "name",
+    name: "name",
   });
   const isInvalid = !!(meta.touched && meta.error);
   const field = { ...initialField, value: initialField.value ?? "" };
@@ -109,166 +111,190 @@ const VendorSelector = ({
     opt.label.toLowerCase().startsWith(searchParam.toLowerCase())
   );
 
+  const isTypeahead = !field.value && !values.vendor_id;
+  const showSelectMenu = !!searchParam && suggestions.length > 0;
+
+  const handleClear = () => {
+    setValue("");
+    setSearchParam("");
+    setFieldValue("vendor_id", undefined);
+    onVendorSelected(undefined);
+  };
+
   const handleTabPressed = () => {
+    if (!searchParam) {
+      return;
+    }
     if (suggestions.length > 0 && searchParam !== suggestions[0].label) {
       setSearchParam(suggestions[0].label);
       setValue(suggestions[0].value);
     }
   };
 
-  const handleChange = (
+  const handleSelectChange = (
     newValue: SingleValue<Option>,
     actionMeta: ActionMeta<Option>
   ) => {
+    if (actionMeta.action === "clear") {
+      handleClear();
+      return;
+    }
     setValue(newValue ? newValue.label : "");
-    setTouched({ ...touched, vendor_id: true, name: !fieldsSeparated });
+    setTouched({ ...touched, vendor_id: true, name: true });
     if (newValue) {
       const newVendorId = options.some((opt) => opt.value === newValue.value)
         ? newValue.value
         : undefined;
       setFieldValue("vendor_id", newVendorId);
       onVendorSelected(newVendorId);
-    } else if (actionMeta.action === "clear") {
-      setFieldValue("vendor_id", undefined);
-      onVendorSelected(undefined);
     }
   };
 
-  return (
-    <>
-      <HStack alignItems="flex-start">
-        <FormControl isInvalid={isInvalid}>
-          <VStack alignItems="start" position="relative">
-            <Flex alignItems="center">
-              <Label htmlFor="vendor_id" fontSize="xs" my={0} mr={1}>
-                {fieldsSeparated ? "Vendor" : "System name"}
-              </Label>
-              <QuestionTooltip
-                label={
-                  fieldsSeparated
-                    ? "Enter the vendor to associate with the system"
-                    : "Enter the system name"
-                }
-              />
-            </Flex>
-            <Flex
-              position="relative"
-              width="100%"
-              data-testid={`input-${field.name}`}
-            >
-              <CreatableSelect
-                options={suggestions}
-                value={selected}
-                onBlur={(e) => {
-                  setTouched({
-                    ...touched,
-                    vendor_id: true,
-                    name: !fieldsSeparated,
-                  });
-                  field.onBlur(e);
-                }}
-                onChange={(newValue, actionMeta) =>
-                  handleChange(newValue, actionMeta)
-                }
-                onInputChange={(e) => setSearchParam(e)}
-                inputValue={searchParam}
-                name={fieldsSeparated ? "vendor_id" : "name"}
-                size="sm"
-                onKeyDown={(e) => {
-                  if (e.key === "Tab") {
-                    handleTabPressed();
-                  }
-                }}
-                classNamePrefix="custom-select"
-                placeholder={
-                  fieldsSeparated
-                    ? "Enter vendor name..."
-                    : "Enter system name..."
-                }
-                instanceId={
-                  fieldsSeparated ? "select-vendor_id" : "select-name"
-                }
-                isDisabled={!isCreate && lockedForGVL}
-                menuPosition="absolute"
-                isSearchable
-                isClearable
-                focusBorderColor="primary.600"
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                formatCreateLabel={(_value) => null}
-                chakraStyles={{
-                  container: (provided) => ({
-                    ...provided,
-                    flexGrow: 1,
-                    backgroundColor: "white",
-                  }),
-                  option: (provided, state) => ({
-                    ...provided,
-                    background:
-                      state.isSelected || state.isFocused ? "gray.50" : "unset",
-                  }),
-                  menu: (provided) => ({
-                    ...provided,
-                    visibility:
-                      searchParam && suggestions.length > 0
-                        ? "visible"
-                        : "hidden",
-                  }),
-                  dropdownIndicator: (provided) => ({
-                    ...provided,
-                    display: "none",
-                  }),
-                  indicatorSeparator: (provided) => ({
-                    ...provided,
-                    display: "none",
-                  }),
-                }}
-                components={{ Option: CustomDictOption }}
-              />
-              <Text
-                aria-hidden
-                style={{
-                  position: "absolute",
-                  backgroundColor: "transparent",
-                  borderColor: "transparent",
-                  marginTop: "5.52px",
-                  marginLeft: "13px",
-                  pointerEvents: "none",
-                  fontSize: "14px",
-                  zIndex: 1,
-                }}
-              >
-                <span style={{ color: "transparent" }}>{searchParam}</span>
-                {searchParam && suggestions.length > 0 ? (
-                  <span style={{ color: "#824EF2" }}>
-                    {suggestions[0].label.substring(searchParam.length)}
-                  </span>
-                ) : null}
-              </Text>
-            </Flex>
-            <ErrorMessage
-              isInvalid={isInvalid}
-              message={meta.error}
-              fieldName={fieldsSeparated ? "vendor_id" : "name"}
-            />
-          </VStack>
-        </FormControl>
-        <CompassButton
-          active={!!values.vendor_id}
-          disabled={!values.vendor_id || isShowingSuggestions === "showing"}
-          onRefreshSuggestions={() => onVendorSelected(values.vendor_id)}
+  const handleBlur = (event: React.FocusEvent) => {
+    field.onBlur(event);
+    if (searchParam) {
+      setValue(searchParam);
+    }
+    setTouched(
+      {
+        ...touched,
+        name: true,
+      },
+      // only validate if nothing is typed in the select's search input;
+      // this prevents incorrectly showing a "required field" error after
+      // the input turns into a text input while the name is valid
+      !searchParam
+    );
+  };
+
+  const typeaheadSelect = (
+    <FormControl isInvalid={isInvalid} isRequired width="100%">
+      <VStack alignItems="start" position="relative" width="100%">
+        <HStack spacing={1}>
+          <Label htmlFor="vendor_id" fontSize="xs" my={0} mr={1}>
+            System name
+          </Label>
+          <QuestionTooltip label="Enter the system name" />
+        </HStack>
+        <Box width="100%" data-testid="input-name">
+          <CreatableSelect
+            options={suggestions}
+            isRequired
+            value={selected}
+            onBlur={handleBlur}
+            onChange={(newValue, actionMeta) =>
+              handleSelectChange(newValue, actionMeta)
+            }
+            onInputChange={(e) => setSearchParam(e)}
+            inputValue={searchParam}
+            name="name"
+            size="sm"
+            onKeyDown={(e) => {
+              if (e.key === "Tab") {
+                handleTabPressed();
+              }
+            }}
+            tabSelectsValue={showSelectMenu}
+            classNamePrefix="custom-select"
+            placeholder="Enter system name..."
+            instanceId="select-name"
+            isDisabled={!isCreate && lockedForGVL}
+            menuPosition="absolute"
+            isSearchable
+            isClearable={!!searchParam}
+            focusBorderColor="primary.600"
+            formatCreateLabel={(inputValue) =>
+              `Create new system "${inputValue}"...`
+            }
+            chakraStyles={{
+              container: (provided) => ({
+                ...provided,
+                flexGrow: 1,
+                backgroundColor: "white",
+              }),
+              option: (provided, state) => ({
+                ...provided,
+                background:
+                  state.isSelected || state.isFocused ? "gray.50" : "unset",
+              }),
+              menu: (provided) => ({
+                ...provided,
+                visibility: showSelectMenu ? "visible" : "hidden",
+              }),
+              dropdownIndicator: (provided) => ({
+                ...provided,
+                display: "none",
+              }),
+              indicatorSeparator: (provided) => ({
+                ...provided,
+                display: "none",
+              }),
+            }}
+            components={{ Option: CustomDictOption }}
+          />
+        </Box>
+        <ErrorMessage
+          isInvalid={isInvalid}
+          message={meta.error}
+          fieldName="name"
         />
-      </HStack>
-      {fieldsSeparated ? (
-        <DictSuggestionTextInput
-          id="name"
-          name="name"
-          dictField={(vendor) => vendor.name ?? (vendor.legal_name || "")}
-          isRequired
-          label="System name"
-          tooltip="Give the system a unique, and relevant name for reporting purposes. e.g. “Email Data Warehouse”"
+        <Text
+          aria-hidden
+          style={{
+            position: "absolute",
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            marginTop: "31.52px",
+            marginLeft: "13px",
+            pointerEvents: "none",
+            fontSize: "14px",
+            zIndex: 1,
+          }}
+        >
+          <span style={{ color: "transparent" }}>{searchParam}</span>
+          {searchParam && suggestions.length > 0 ? (
+            <span style={{ color: "#824EF2" }}>
+              {suggestions[0].label.substring(searchParam.length)}
+            </span>
+          ) : null}
+        </Text>
+      </VStack>
+    </FormControl>
+  );
+
+  const textInput = (
+    <FormControl isInvalid={isInvalid} isRequired>
+      <VStack alignItems="start">
+        <HStack spacing={1} alignItems="center">
+          <Label htmlFor="name" fontSize="xs" my={0} mr={1}>
+            System name
+          </Label>
+          <QuestionTooltip label="Enter the system name" />
+        </HStack>
+        <InputGroup size="sm">
+          <Input {...field} data-testid={`input-${field.name}`} />
+          <InputRightElement>
+            <CloseButton onClick={handleClear} size="sm" />
+          </InputRightElement>
+        </InputGroup>
+        <ErrorMessage
+          isInvalid={isInvalid}
+          message={meta.error}
+          fieldName={field.name}
         />
-      ) : null}
-    </>
+      </VStack>
+    </FormControl>
+  );
+
+  return (
+    <HStack alignItems="flex-start">
+      {isTypeahead ? typeaheadSelect : textInput}
+      <CompassButton
+        active={!!values.vendor_id}
+        disabled={!values.vendor_id || isShowingSuggestions === "showing"}
+        onRefreshSuggestions={() => onVendorSelected(values.vendor_id)}
+      />
+    </HStack>
   );
 };
 
diff --git a/clients/admin-ui/src/flags.json b/clients/admin-ui/src/flags.json
index e2e25f4010..f74c4364ea 100644
--- a/clients/admin-ui/src/flags.json
+++ b/clients/admin-ui/src/flags.json
@@ -30,12 +30,6 @@
     "test": true,
     "production": false
   },
-  "separateVendorSelector": {
-    "description": "When creating a system, allow vendor to be selected separately from system name",
-    "development": true,
-    "test": true,
-    "production": false
-  },
   "consentReporting": {
     "description": "Page to download consent reports by date",
     "development": true,

From 79c6aae42ecf30b439c694930d40ae16109db531 Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Fri, 15 Dec 2023 17:01:54 -0500
Subject: [PATCH 2/6] update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 112c75b375..b184dbdaf1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ The types of changes are:
 ### Added
 - Tooltip and styling for disabled rows in add multiple vendor view [#4498](https://github.com/ethyca/fides/pull/4498)
 
+### Fixed
+- Fixed issues with Compass vendor selector behavior [#4521](https://github.com/ethyca/fides/pull/4521)
+
 ## [2.26.0](https://github.com/ethyca/fides/compare/2.25.0...main)
 
 ### Added

From 70e822495bf96a7daf2be9720c87579c6bf519c6 Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Mon, 18 Dec 2023 11:47:48 -0500
Subject: [PATCH 3/6] update Cypress tests

---
 .../admin-ui/cypress/e2e/systems-plus.cy.ts   | 58 ++++++++++---------
 .../src/features/system/VendorSelector.tsx    | 17 +++---
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
index aba5f88fcd..64ec32258e 100644
--- a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
+++ b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -24,42 +24,44 @@ describe("System management with Plus features", () => {
     cy.intercept("GET", "/api/v1/system", {
       fixture: "systems/systems.json",
     }).as("getSystems");
+    cy.intercept({ method: "POST", url: "/api/v1/system*" }).as(
+      "postDictSystem"
+    );
   });
 
-  describe("vendor list", () => {
+  describe.only("vendor list", () => {
     beforeEach(() => {
       stubVendorList();
-      cy.visit(`${SYSTEM_ROUTE}/configure/demo_analytics_system`);
-      cy.wait(["@getDictionaryEntries", "@getSystems", "@getSystem"]);
+      cy.visit(`${ADD_SYSTEMS_MANUAL_ROUTE}`);
+      cy.wait(["@getDictionaryEntries", "@getSystems"]);
     });
 
     it("can display the vendor list dropdown", () => {
-      cy.getSelectValueContainer("input-vendor_id");
+      cy.getSelectValueContainer("input-name");
     });
 
     it("contains type ahead dictionary entries", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("A");
-      cy.get("#react-select-select-vendor_id-option-0").contains("Aniview LTD");
-      cy.get("#react-select-select-vendor_id-option-1").contains(
+      cy.getSelectValueContainer("input-name").type("A");
+      cy.get("#react-select-select-name-option-0").contains("Aniview LTD");
+      cy.get("#react-select-select-name-option-1").contains(
         "Anzu Virtual Reality LTD"
       );
     });
 
     it("can reset suggestions by clearing vendor input", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("L{enter}");
+      cy.getSelectValueContainer("input-name").type("L{enter}");
       cy.getByTestId("input-legal_name").should("have.value", "LINE");
-      cy.getSelectValueContainer("input-vendor_id")
-        .siblings(".custom-select__indicators")
-        .find(".custom-select__clear-indicator");
+      cy.getByTestId("clear-btn").click();
+      cy.getByTestId("input-legal_name").should("be.empty");
     });
 
     it("can't refresh suggestions immediately after populating", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("A{enter}");
+      cy.getSelectValueContainer("input-name").type("A{enter}");
       cy.getByTestId("refresh-suggestions-btn").should("be.disabled");
     });
 
     it("can refresh suggestions when editing a saved system", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("A{enter}");
+      cy.getSelectValueContainer("input-name").type("A{enter}");
       cy.fixture("systems/dictionary-system.json").then((dictSystem) => {
         cy.fixture("systems/system.json").then((origSystem) => {
           cy.intercept(
@@ -75,11 +77,11 @@ describe("System management with Plus features", () => {
           ).as("getDictSystem");
         });
       });
-      cy.intercept({ method: "PUT", url: "/api/v1/system*" }).as(
-        "putDictSystem"
-      );
+      // cy.intercept({ method: "POST", url: "/api/v1/system*" }).as(
+      //   "postDictSystem"
+      // );
       cy.getByTestId("save-btn").click();
-      cy.wait("@putDictSystem");
+      cy.wait("@postDictSystem");
       cy.wait("@getDictSystem");
       cy.getByTestId("refresh-suggestions-btn").should("not.be.disabled");
     });
@@ -88,7 +90,7 @@ describe("System management with Plus features", () => {
     // the form to be mistakenly marked as dirty and the "unsaved changes"
     // modal to pop up incorrectly when switching tabs
     it("can switch between tabs after populating from dictionary", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("Anzu{enter}");
+      cy.getSelectValueContainer("input-name").type("Anzu{enter}");
       // the form fetches the system again after saving, so update the intercept with dictionary values
       cy.fixture("systems/dictionary-system.json").then((dictSystem) => {
         cy.fixture("systems/system.json").then((origSystem) => {
@@ -105,11 +107,11 @@ describe("System management with Plus features", () => {
           ).as("getDictSystem");
         });
       });
-      cy.intercept({ method: "PUT", url: "/api/v1/system*" }).as(
-        "putDictSystem"
-      );
+      // cy.intercept({ method: "POST", url: "/api/v1/system*" }).as(
+      //   "postDictSystem"
+      // );
       cy.getByTestId("save-btn").click();
-      cy.wait("@putDictSystem");
+      cy.wait("@postDictSystem");
       cy.wait("@getDictSystem");
       cy.getByTestId("input-dpo").should("have.value", "DPO@anzu.io");
       cy.getByTestId("tab-Data uses").click();
@@ -119,15 +121,15 @@ describe("System management with Plus features", () => {
     });
 
     it("locks editing for a GVL vendor when TCF is enabled", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("Aniview{enter}");
+      cy.getSelectValueContainer("input-name").type("Aniview{enter}");
       cy.getByTestId("locked-for-GVL-notice");
       cy.getByTestId("input-description").should("be.disabled");
     });
 
     it("does not allow changes to data uses when locked", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("Aniview{enter}");
+      cy.getSelectValueContainer("input-name").type("Aniview{enter}");
       cy.getByTestId("save-btn").click();
-      cy.wait(["@putSystem", "@getSystem", "@getSystems"]);
+      cy.wait(["@postSystem", "@getSystem", "@getSystems"]);
       cy.getByTestId("tab-Data uses").click();
       cy.getByTestId("add-btn").should("not.exist");
       cy.getByTestId("delete-btn").should("not.exist");
@@ -136,7 +138,7 @@ describe("System management with Plus features", () => {
     });
 
     it("does not lock editing for a non-GVL vendor", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("L{enter}");
+      cy.getSelectValueContainer("input-name").type("L{enter}");
       cy.getByTestId("locked-for-GVL-notice").should("not.exist");
       cy.getByTestId("input-description").should("not.be.disabled");
     });
@@ -156,9 +158,9 @@ describe("System management with Plus features", () => {
     });
 
     it("allows changes to data uses for non-GVL vendors", () => {
-      cy.getSelectValueContainer("input-vendor_id").type("L{enter}");
+      cy.getSelectValueContainer("input-name").type("L{enter}");
       cy.getByTestId("save-btn").click();
-      cy.wait(["@putSystem", "@getSystem", "@getSystems"]);
+      cy.wait(["@postSystem", "@getSystem", "@getSystems"]);
       cy.getByTestId("tab-Data uses").click();
       cy.getByTestId("add-btn");
       cy.getByTestId("delete-btn");
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index d71e8ff7cd..eeec13ef1e 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -133,7 +133,6 @@ const VendorSelector = ({
   );
 
   const isTypeahead = !field.value && !values.vendor_id;
-  const showSelectMenu = !!searchParam && suggestions.length > 0;
   const hasVendorSuggestions = !!searchParam && suggestions.length > 0;
 
   const handleClear = () => {
@@ -193,13 +192,14 @@ const VendorSelector = ({
     <FormControl isInvalid={isInvalid} isRequired width="100%">
       <VStack alignItems="start" position="relative" width="100%">
         <HStack spacing={1}>
-          <Label htmlFor="vendor_id" fontSize="xs" my={0} mr={1}>
+          <Label htmlFor="name" fontSize="xs" my={0} mr={1}>
             System name
           </Label>
           <QuestionTooltip label="Enter the system name" />
         </HStack>
         <Box width="100%" data-testid="input-name">
           <CreatableSelect
+            name="name"
             options={suggestions}
             isRequired
             value={selected}
@@ -209,14 +209,13 @@ const VendorSelector = ({
             }
             onInputChange={(e) => setSearchParam(e)}
             inputValue={searchParam}
-            name="name"
             size="sm"
             onKeyDown={(e) => {
               if (e.key === "Tab") {
                 handleTabPressed();
               }
             }}
-            tabSelectsValue={showSelectMenu}
+            tabSelectsValue={hasVendorSuggestions}
             classNamePrefix="custom-select"
             placeholder="Enter system name..."
             instanceId="select-name"
@@ -241,7 +240,7 @@ const VendorSelector = ({
               }),
               menu: (provided) => ({
                 ...provided,
-                visibility: showSelectMenu ? "visible" : "hidden",
+                visibility: hasVendorSuggestions ? "visible" : "hidden",
               }),
               dropdownIndicator: (provided) => ({
                 ...provided,
@@ -294,9 +293,13 @@ const VendorSelector = ({
           <QuestionTooltip label="Enter the system name" />
         </HStack>
         <InputGroup size="sm">
-          <Input {...field} data-testid={`input-${field.name}`} />
+          <Input {...field} data-testid={`input-name`} />
           <InputRightElement>
-            <CloseButton onClick={handleClear} size="sm" />
+            <CloseButton
+              onClick={handleClear}
+              size="sm"
+              data-testid="clear-btn"
+            />
           </InputRightElement>
         </InputGroup>
         <ErrorMessage

From 8c43fd841e2c7a85fb4a0deaea6f2905a22e63df Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Mon, 18 Dec 2023 11:56:24 -0500
Subject: [PATCH 4/6] remove .only

---
 clients/admin-ui/cypress/e2e/systems-plus.cy.ts         | 2 +-
 clients/admin-ui/src/features/system/VendorSelector.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
index 64ec32258e..e1363bcb58 100644
--- a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
+++ b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -29,7 +29,7 @@ describe("System management with Plus features", () => {
     );
   });
 
-  describe.only("vendor list", () => {
+  describe("vendor list", () => {
     beforeEach(() => {
       stubVendorList();
       cy.visit(`${ADD_SYSTEMS_MANUAL_ROUTE}`);
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index eeec13ef1e..07a4647c78 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -293,7 +293,7 @@ const VendorSelector = ({
           <QuestionTooltip label="Enter the system name" />
         </HStack>
         <InputGroup size="sm">
-          <Input {...field} data-testid={`input-name`} />
+          <Input {...field} data-testid="input-name" />
           <InputRightElement>
             <CloseButton
               onClick={handleClear}

From e87442cd460c6f65273f6896d99b234a4502d492 Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Tue, 19 Dec 2023 11:41:58 -0500
Subject: [PATCH 5/6] improvements to vendor selector code

---
 .../admin-ui/cypress/e2e/systems-plus.cy.ts   |  6 --
 clients/admin-ui/cypress/e2e/systems.cy.ts    |  7 ++
 .../src/features/common/form/inputs.tsx       | 41 +++++---
 .../features/system/SystemInformationForm.tsx |  4 +-
 .../src/features/system/VendorSelector.tsx    | 93 +++++++++----------
 5 files changed, 78 insertions(+), 73 deletions(-)

diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
index e1363bcb58..e4820c49b9 100644
--- a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
+++ b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -77,9 +77,6 @@ describe("System management with Plus features", () => {
           ).as("getDictSystem");
         });
       });
-      // cy.intercept({ method: "POST", url: "/api/v1/system*" }).as(
-      //   "postDictSystem"
-      // );
       cy.getByTestId("save-btn").click();
       cy.wait("@postDictSystem");
       cy.wait("@getDictSystem");
@@ -107,9 +104,6 @@ describe("System management with Plus features", () => {
           ).as("getDictSystem");
         });
       });
-      // cy.intercept({ method: "POST", url: "/api/v1/system*" }).as(
-      //   "postDictSystem"
-      // );
       cy.getByTestId("save-btn").click();
       cy.wait("@postDictSystem");
       cy.wait("@getDictSystem");
diff --git a/clients/admin-ui/cypress/e2e/systems.cy.ts b/clients/admin-ui/cypress/e2e/systems.cy.ts
index 41f5d66eda..7ab593245f 100644
--- a/clients/admin-ui/cypress/e2e/systems.cy.ts
+++ b/clients/admin-ui/cypress/e2e/systems.cy.ts
@@ -84,6 +84,13 @@ describe("System management page", () => {
         }).as("getConnectionTypes");
       });
 
+      it("can't create a system with the same name as an existing system", () => {
+        cy.visit(ADD_SYSTEMS_MANUAL_ROUTE);
+        cy.getByTestId("input-name").type("Demo Analytics System");
+        cy.getByTestId("input-description").focus();
+        cy.getByTestId("error-name");
+      });
+
       it.skip("Can step through the flow", () => {
         cy.fixture("systems/system.json").then((system) => {
           cy.intercept("GET", "/api/v1/system/*", {
diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
index 34f9e0e759..af32275ea0 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -64,6 +64,7 @@ export interface CustomInputProps {
   variant?: Variant;
   isRequired?: boolean;
   textColor?: string;
+  inputRightElement?: React.ReactNode;
 }
 
 // We allow `undefined` here and leave it up to each component that uses this field
@@ -87,7 +88,14 @@ export const Label = ({
 );
 
 export const TextInput = forwardRef(
-  ({ isPassword, ...props }: InputProps & { isPassword: boolean }, ref) => {
+  (
+    {
+      isPassword,
+      inputRightElement,
+      ...props
+    }: InputProps & { isPassword: boolean; inputRightElement: React.ReactNode },
+    ref
+  ) => {
     const [type, setType] = useState<"text" | "password">(
       isPassword ? "password" : "text"
     );
@@ -105,6 +113,9 @@ export const TextInput = forwardRef(
           background="white"
           focusBorderColor="primary.600"
         />
+        {inputRightElement ? (
+          <InputRightElement pr={2}>{inputRightElement}</InputRightElement>
+        ) : null}
         {isPassword ? (
           <InputRightElement pr="2">
             <IconButton
@@ -510,6 +521,7 @@ export const CustomTextInput = ({
   disabled,
   variant = "inline",
   isRequired = false,
+  inputRightElement,
   ...props
 }: CustomInputProps & StringField) => {
   const [initialField, meta] = useField(props);
@@ -519,6 +531,17 @@ export const CustomTextInput = ({
 
   const isPassword = initialType === "password";
 
+  const innerInput = (
+    <TextInput
+      {...field}
+      isDisabled={disabled}
+      data-testid={`input-${field.name}`}
+      placeholder={placeholder}
+      isPassword={isPassword}
+      inputRightElement={inputRightElement}
+    />
+  );
+
   if (variant === "inline") {
     return (
       <FormControl isInvalid={isInvalid} isRequired={isRequired}>
@@ -528,13 +551,7 @@ export const CustomTextInput = ({
           ) : null}
           <Flex alignItems="center">
             <Flex flexDir="column" flexGrow={1} mr="2">
-              <TextInput
-                {...field}
-                isDisabled={disabled}
-                data-testid={`input-${field.name}`}
-                placeholder={placeholder}
-                isPassword={isPassword}
-              />
+              {innerInput}
               <ErrorMessage
                 isInvalid={isInvalid}
                 message={meta.error}
@@ -558,13 +575,7 @@ export const CustomTextInput = ({
             {tooltip ? <QuestionTooltip label={tooltip} /> : null}
           </Flex>
         ) : null}
-        <TextInput
-          {...field}
-          isDisabled={disabled}
-          data-testid={`input-${field.name}`}
-          placeholder={placeholder}
-          isPassword={isPassword}
-        />
+        {innerInput}
         <ErrorMessage
           isInvalid={isInvalid}
           message={meta.error}
diff --git a/clients/admin-ui/src/features/system/SystemInformationForm.tsx b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
index 10d74c55d3..b40d4f54a5 100644
--- a/clients/admin-ui/src/features/system/SystemInformationForm.tsx
+++ b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
@@ -131,8 +131,8 @@ const SystemInformationForm = ({
           .label("System name")
           .test("is-unique", "", (value, context) => {
             const takenSystemNames = systems
-              .filter((s) => s.name !== initialValues.name)
-              .map((s) => s.name);
+              .map((s) => s.name)
+              .filter((name) => name !== initialValues.name);
             if (takenSystemNames.some((name) => name === value)) {
               return context.createError({
                 message: `You already have a system called "${value}". Please specify a unique name for this system.`,
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index 07a4647c78..e994f5afdb 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -5,9 +5,6 @@ import {
   FormControl,
   HStack,
   IconButton,
-  Input,
-  InputGroup,
-  InputRightElement,
   Menu,
   MenuButton,
   MenuItem,
@@ -28,7 +25,12 @@ import { useField, useFormikContext } from "formik";
 import React, { useState } from "react";
 
 import { useAppSelector } from "~/app/hooks";
-import { ErrorMessage, Label, Option } from "~/features/common/form/inputs";
+import {
+  CustomTextInput,
+  ErrorMessage,
+  Label,
+  Option,
+} from "~/features/common/form/inputs";
 import { CompassIcon } from "~/features/common/Icon/CompassIcon";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
 import { DictOption } from "~/features/plus/plus.slice";
@@ -161,7 +163,13 @@ const VendorSelector = ({
       return;
     }
     setValue(newValue ? newValue.label : "");
-    setTouched({ ...touched, vendor_id: true, name: true });
+    setTouched(
+      { ...touched, vendor_id: true, name: true },
+      // do not validate if a new option was created; this prevents
+      // incorrectly showing a "required field" error while a value is in
+      // the field
+      actionMeta.action !== "create-option"
+    );
     if (newValue) {
       const newVendorId = options.some((opt) => opt.value === newValue.value)
         ? newValue.value
@@ -181,13 +189,14 @@ const VendorSelector = ({
         ...touched,
         name: true,
       },
-      // only validate if nothing is typed in the select's search input;
-      // this prevents incorrectly showing a "required field" error after
-      // the input turns into a text input while the name is valid
+      // only validate if nothing is typed in the select's search input to
+      // prevent incorrect "required field" error like above
       !searchParam
     );
   };
 
+  // we have to build the typeahead from scratch, too much context-specific
+  // is needed to use the existing CustomCreatableSelect component
   const typeaheadSelect = (
     <FormControl isInvalid={isInvalid} isRequired width="100%">
       <VStack alignItems="start" position="relative" width="100%">
@@ -238,10 +247,6 @@ const VendorSelector = ({
                 background:
                   state.isSelected || state.isFocused ? "gray.50" : "unset",
               }),
-              menu: (provided) => ({
-                ...provided,
-                visibility: hasVendorSuggestions ? "visible" : "hidden",
-              }),
               dropdownIndicator: (provided) => ({
                 ...provided,
                 display: "none",
@@ -261,59 +266,47 @@ const VendorSelector = ({
         />
         <Text
           aria-hidden
-          style={{
-            position: "absolute",
-            backgroundColor: "transparent",
-            borderColor: "transparent",
-            marginTop: "31.52px",
-            marginLeft: "13px",
-            pointerEvents: "none",
-            fontSize: "14px",
-            zIndex: 1,
-          }}
+          position="absolute"
+          backgroundColor="transparent"
+          style={{ marginTop: "31.52px", marginLeft: "13px" }}
+          pointerEvents="none"
+          zIndex={1}
+          fontSize="sm"
         >
-          <span style={{ color: "transparent" }}>{searchParam}</span>
+          <Text as="span" color="transparent">
+            {searchParam}
+          </Text>
           {searchParam && suggestions.length > 0 ? (
-            <span style={{ color: "#824EF2" }}>
+            <Text as="span" color="complimentary.500">
               {suggestions[0].label.substring(searchParam.length)}
-            </span>
+            </Text>
           ) : null}
         </Text>
       </VStack>
     </FormControl>
   );
 
-  const textInput = (
-    <FormControl isInvalid={isInvalid} isRequired>
-      <VStack alignItems="start">
-        <HStack spacing={1} alignItems="center">
-          <Label htmlFor="name" fontSize="xs" my={0} mr={1}>
-            System name
-          </Label>
-          <QuestionTooltip label="Enter the system name" />
-        </HStack>
-        <InputGroup size="sm">
-          <Input {...field} data-testid="input-name" />
-          <InputRightElement>
+  return (
+    <HStack alignItems="flex-start">
+      {isTypeahead ? (
+        typeaheadSelect
+      ) : (
+        <CustomTextInput
+          id="name"
+          name="name"
+          label="System name"
+          tooltip="Enter the system name"
+          variant="stacked"
+          isRequired
+          inputRightElement={
             <CloseButton
               onClick={handleClear}
               size="sm"
               data-testid="clear-btn"
             />
-          </InputRightElement>
-        </InputGroup>
-        <ErrorMessage
-          isInvalid={isInvalid}
-          message={meta.error}
-          fieldName={field.name}
+          }
         />
-      </VStack>
-    </FormControl>
-  );
-
-  return (
-    <HStack alignItems="flex-start">
-      {isTypeahead ? typeaheadSelect : textInput}
+      )}
       <CompassButton
         active={!!values.vendor_id || hasVendorSuggestions}
         disabled={!values.vendor_id || dictSuggestionsState === "showing"}

From 674313e5a1bb0ec229c78aae25c969a29e9448ad Mon Sep 17 00:00:00 2001
From: Jeremy Pople <jeremy@ethyca.com>
Date: Tue, 19 Dec 2023 11:58:13 -0500
Subject: [PATCH 6/6] fix type error

---
 clients/admin-ui/src/features/common/form/inputs.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
index af32275ea0..4ec440fa70 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -93,7 +93,10 @@ export const TextInput = forwardRef(
       isPassword,
       inputRightElement,
       ...props
-    }: InputProps & { isPassword: boolean; inputRightElement: React.ReactNode },
+    }: InputProps & {
+      isPassword: boolean;
+      inputRightElement?: React.ReactNode;
+    },
     ref
   ) => {
     const [type, setType] = useState<"text" | "password">(