Dataset reference field styling (#5408)

CHANGELOG.md

@@ -30,6 +30,7 @@ The types of changes are:
 - 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 a visual bug where the "download" icon was off-center in some buttons [#5409](https://github.com/ethyca/fides/pull/5409)
+- Fixed styling on "Dataset" field on system integration form [#5408](https://github.com/ethyca/fides/pull/5408)
 
 ### Changed
 - The `Monitor` button trigger the same `confirmResourceMutation` (monitor, start classification) on muted parent resources as well as un-muted resources. Un-mute button for muted field resources which simply changes their status to `monitored`. [#5362](https://github.com/ethyca/fides/pull/5362)

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;

src/fides/api/schemas/connection_configuration/connection_secrets_bigquery.py

@@ -36,13 +36,13 @@ class BigQuerySchema(ConnectionConfigSecretsSchema):
     """Schema to validate the secrets needed to connect to BigQuery"""
 
     keyfile_creds: KeyfileCreds = Field(
-        title="Keyfile Creds",
+        title="Keyfile creds",
         json_schema_extra={"sensitive": True},
         description="The contents of the key file that contains authentication credentials for a service account in GCP.",
     )
     dataset: Optional[str] = Field(
         default=None,
-        title="Default BigQuery Dataset",
+        title="Default dataset",
         description="The default BigQuery dataset that will be used if one isn't provided in the associated Fides datasets.",
     )
 

tests/ops/api/v1/endpoints/test_connection_template_endpoints.py

@@ -842,13 +842,13 @@ def test_get_connection_secret_schema_bigquery(
             "type": "object",
             "properties": {
                 "keyfile_creds": {
-                    "title": "Keyfile Creds",
+                    "title": "Keyfile creds",
                     "description": "The contents of the key file that contains authentication credentials for a service account in GCP.",
                     "sensitive": True,
                     "allOf": [{"$ref": "#/definitions/KeyfileCreds"}],
                 },
                 "dataset": {
-                    "title": "Default BigQuery Dataset",
+                    "title": "Default dataset",
                     "description": "The default BigQuery dataset that will be used if one isn't provided in the associated Fides datasets.",
                     "type": "string",
                 },