Dataset reference field styling

CHANGELOG.md

@@ -28,6 +28,7 @@ The types of changes are:
 - Fixed a bug where D&D tables were rendering stale data [#5372](https://github.com/ethyca/fides/pull/5372)
 - Fixed issue where multiple login redirects could end up losing login return path [#5389](https://github.com/ethyca/fides/pull/5389)
 - Fixed issue where Dataset with nested fields was unable to edit Categories [#5383](https://github.com/ethyca/fides/pull/5383)
+- Fixed styling on "Dataset" field on system integration form [#5408](https://github.com/ethyca/fides/pull/5408)
 
 ### Developer Experience
 - Fix warning messages from slowapi and docker [#5385](https://github.com/ethyca/fides/pull/5385)

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx

@@ -1,4 +1,4 @@
-import { CustomSelect, Option, SelectInput } from "common/form/inputs";
+import { Option, SelectInput } from "common/form/inputs";
 import {
   ConnectionTypeSecretSchemaProperty,
   ConnectionTypeSecretSchemaResponse,
@@ -30,6 +30,7 @@ import { DatastoreConnectionStatus } from "src/features/datastore-connections/ty
 
 import { useFeatures } from "~/features/common/features";
 import DisableConnectionModal from "~/features/datastore-connections/DisableConnectionModal";
+import SelectDataset from "~/features/datastore-connections/system_portal_config/forms/SelectDataset";
 import {
   ConnectionConfigurationResponse,
   ConnectionSystemTypeMap,
@@ -485,18 +486,7 @@ export const ConnectorParametersForm = ({
               )}
               {SystemType.DATABASE === connectionOption.type &&
                 !isCreatingConnectionConfig && (
-                  <CustomSelect
-                    label="Datasets"
-                    labelProps={{
-                      fontWeight: "semibold",
-                      fontSize: "sm",
-                      minWidth: "150px",
-                    }}
-                    name="dataset"
-                    options={datasetDropdownOptions}
-                    isMulti
-                    size="sm"
-                  />
+                  <SelectDataset options={datasetDropdownOptions} />
                 )}
               <div className="flex gap-4">
                 {!connectionOption.authorization_required || authorized ? (

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/SelectDataset.tsx

@@ -0,0 +1,55 @@
+import {
+  Box,
+  CircleHelpIcon,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Tooltip,
+  VStack,
+} from "fidesui";
+import { useField } from "formik";
+
+import { Option, SelectInput } from "~/features/common/form/inputs";
+
+const SelectDataset = ({ options }: { options?: Option[] }) => {
+  const [, { error }] = useField("dataset");
+  return (
+    <FormControl display="flex">
+      <FormLabel
+        color="gray.900"
+        fontWeight="semibold"
+        fontSize="sm"
+        htmlFor="dataset"
+        minWidth="150px"
+      >
+        Datasets
+      </FormLabel>
+      <VStack align="flex-start" w="100%">
+        <Box w="full">
+          <SelectInput
+            fieldName="dataset"
+            options={options}
+            isMulti
+            size="sm"
+            isSearchable
+          />
+        </Box>
+        <FormErrorMessage>{error}</FormErrorMessage>
+      </VStack>
+      <Tooltip
+        aria-label="Select datasets to associate with this integration"
+        hasArrow
+        label="Select datasets to associate with this integration"
+        placement="right-start"
+        openDelay={500}
+      >
+        <Flex alignItems="center" h="32px">
+          <CircleHelpIcon marginLeft="8px" _hover={{ cursor: "pointer" }} />
+        </Flex>
+      </Tooltip>
+    </FormControl>
+  );
+};
+
+export default SelectDataset;