From da09d2abbf5aa6d27a4187006dc3c887409364bd Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 10 Nov 2023 12:23:35 -0800
Subject: [PATCH] Fixing request type field (#4414)

---
 CHANGELOG.md                                  |   1 +
 .../e2e/system-integrations-plus.cy.ts        |   6 +-
 .../src/features/common/form/inputs.tsx       |   7 +
 .../forms/ConnectorParametersForm.tsx         | 132 +++++++++---------
 4 files changed, 78 insertions(+), 68 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e21474f48..1d58b362f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@ The types of changes are:
 
 ### Fixed
 - Persist bulk system add filter modal state [#4412](https://github.com/ethyca/fides/pull/4412)
+- Fixing labels for request type field [#4414](https://github.com/ethyca/fides/pull/4414)
 
 ## [2.23.3](https://github.com/ethyca/fides/compare/2.23.2...2.23.3)
 
diff --git a/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts b/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
index 9d55ad8738..56b5266106 100644
--- a/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
+++ b/clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
@@ -72,9 +72,9 @@ describe("System integrations", () => {
     it("should display Request types (enabled-actions) field", () => {
       cy.getByTestId("enabled-actions").should("exist");
       cy.getByTestId("enabled-actions").within(() => {
-        cy.contains("access");
-        cy.contains("erasure");
-        cy.contains("consent").should("not.exist");
+        cy.contains("Access");
+        cy.contains("Erasure");
+        cy.contains("Consent").should("not.exist");
       });
     });
   });
diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
index b2c672aa02..5416729ca3 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -267,6 +267,13 @@ export const SelectInput = ({
     components.Option = CustomOption;
   }
 
+  if (isDisabled) {
+    // prevent the tags from being removed if the input is disabled
+    components.MultiValueRemove = function CustomMultiValueRemove() {
+      return null;
+    };
+  }
+
   return (
     <Select
       options={options}
diff --git a/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx b/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx
index 6f91c09991..80ec6d38f2 100644
--- a/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx
+++ b/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx
@@ -410,73 +410,75 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
                     }
                   )
                 : null}
-              {isPlusEnabled &&
-                connectionOption.supported_actions.length > 1 && (
-                  <Field
-                    id="enabled_actions"
-                    name="enabled_actions"
-                    validate={(value: string[]) => {
-                      let error;
-                      if (!value || value.length === 0) {
-                        error = "At least one request type must be selected";
+              {isPlusEnabled && (
+                <Field
+                  id="enabled_actions"
+                  name="enabled_actions"
+                  validate={(value: string[]) => {
+                    let error;
+                    if (!value || value.length === 0) {
+                      error = "At least one request type must be selected";
+                    }
+                    return error;
+                  }}
+                >
+                  {({
+                    field,
+                    form,
+                  }: {
+                    field: FieldInputProps<string>;
+                    form: any;
+                  }) => (
+                    <FormControl
+                      data-testid="enabled-actions"
+                      display="flex"
+                      isInvalid={
+                        form.touched.enabled_actions &&
+                        form.errors.enabled_actions
                       }
-                      return error;
-                    }}
-                  >
-                    {({
-                      field,
-                      form,
-                    }: {
-                      field: FieldInputProps<string>;
-                      form: any;
-                    }) => (
-                      <FormControl
-                        data-testid="enabled-actions"
-                        display="flex"
-                        isInvalid={
-                          form.touched.enabled_actions &&
-                          form.errors.enabled_actions
-                        }
-                        isRequired
+                      isRequired
+                    >
+                      {/* Known as enabled_actions throughout the front-end and back-end but it's displayed to the user as "Request types" */}
+                      {getFormLabel("enabled_actions", "Request types")}
+                      <VStack align="flex-start" w="inherit">
+                        <Box width="100%">
+                          <SelectInput
+                            options={connectionOption.supported_actions.map(
+                              (action) => ({
+                                label: _.upperFirst(action),
+                                value: action,
+                              })
+                            )}
+                            fieldName={field.name}
+                            size="sm"
+                            isMulti
+                            isDisabled={
+                              connectionOption.supported_actions.length === 1
+                            }
+                          />
+                        </Box>
+                        <FormErrorMessage>
+                          {props.errors.enabled_actions}
+                        </FormErrorMessage>
+                      </VStack>
+                      <Tooltip
+                        aria-label="The request types that are supported for this integration."
+                        hasArrow
+                        label="The request types that are supported for this integration."
+                        placement="right-start"
+                        openDelay={500}
                       >
-                        {/* Known as enabled_actions throughout the front-end and back-end but it's displayed to the user as "Request types" */}
-                        {getFormLabel("enabled_actions", "Request types")}
-                        <VStack align="flex-start" w="inherit">
-                          <Box width="100%">
-                            <SelectInput
-                              options={connectionOption.supported_actions.map(
-                                (action) => ({
-                                  label: action,
-                                  value: action,
-                                })
-                              )}
-                              fieldName={field.name}
-                              size="sm"
-                              isMulti
-                            />
-                          </Box>
-                          <FormErrorMessage>
-                            {props.errors.enabled_actions}
-                          </FormErrorMessage>
-                        </VStack>
-                        <Tooltip
-                          aria-label="The request types that are supported for this integration."
-                          hasArrow
-                          label="The request types that are supported for this integration."
-                          placement="right-start"
-                          openDelay={500}
-                        >
-                          <Flex alignItems="center" h="32px">
-                            <CircleHelpIcon
-                              marginLeft="8px"
-                              _hover={{ cursor: "pointer" }}
-                            />
-                          </Flex>
-                        </Tooltip>
-                      </FormControl>
-                    )}
-                  </Field>
-                )}
+                        <Flex alignItems="center" h="32px">
+                          <CircleHelpIcon
+                            marginLeft="8px"
+                            _hover={{ cursor: "pointer" }}
+                          />
+                        </Flex>
+                      </Tooltip>
+                    </FormControl>
+                  )}
+                </Field>
+              )}
               {SystemType.DATABASE === connectionOption.type &&
               !isCreatingConnectionConfig ? (
                 <DatasetConfigField