From 3fd4e303bf34460121d1da1a3e26451346e91180 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 10 Nov 2023 11:44:21 -0800
Subject: [PATCH 1/3] Fixing request type field

---
 .../e2e/system-integrations-plus.cy.ts        |   6 +-
 .../src/features/common/form/inputs.tsx       |   5 +
 .../forms/ConnectorParametersForm.tsx         | 132 +++++++++---------
 3 files changed, 75 insertions(+), 68 deletions(-)

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..4443e60f1c 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -267,6 +267,11 @@ export const SelectInput = ({
     components.Option = CustomOption;
   }
 
+  if (isDisabled) {
+    // prevent the tags from being removed if the input is disabled
+    components.MultiValueRemove = () => 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..dd788cfb1b 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

From 5ee4ce6c30eb3411a2ee5aa949a8067f318540fd Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 10 Nov 2023 12:00:14 -0800
Subject: [PATCH 2/3] Linter and formatting fixes

---
 clients/admin-ui/src/features/common/form/inputs.tsx          | 4 +++-
 .../system_portal_config/forms/ConnectorParametersForm.tsx    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
index 4443e60f1c..5416729ca3 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -269,7 +269,9 @@ export const SelectInput = ({
 
   if (isDisabled) {
     // prevent the tags from being removed if the input is disabled
-    components.MultiValueRemove = () => null;
+    components.MultiValueRemove = function CustomMultiValueRemove() {
+      return null;
+    };
   }
 
   return (
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 dd788cfb1b..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
@@ -453,7 +453,7 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
                             size="sm"
                             isMulti
                             isDisabled={
-                              connectionOption.supported_actions.length == 1
+                              connectionOption.supported_actions.length === 1
                             }
                           />
                         </Box>

From 0242d7b3d411676a8551615bdab1e83531e54081 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 10 Nov 2023 12:23:17 -0800
Subject: [PATCH 3/3] Updating change log

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

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)