Fix EditDrawer styling and move save/cancel buttons to DrawerFooter (#…

…1803)
ethyca · Nov 18, 2022 · e4bb7bb · e4bb7bb
1 parent 1aaab78
commit e4bb7bb
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -61,6 +61,7 @@ The types of changes are:
 * Fixes the issue where the security config is not properly loading from environment variables. [#1718](https://github.com/ethyca/fides/pull/1718)
 * Fixes the issue where the CLI can't run without the config values required by the webserver. [#1811](https://github.com/ethyca/fides/pull/1811)
 * Correctly handle response from adobe jwt auth endpoint as milliseconds, rather than seconds. [#1754](https://github.com/ethyca/fides/pull/1754)
+* Fixed styling issues with the `EditDrawer` component. [#1803](https://github.com/ethyca/fides/pull/1803)
 
 ### Security
 

diff --git a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx
@@ -10,7 +10,9 @@ import {
   setActiveCollectionIndex,
   useUpdateDatasetMutation,
 } from "./dataset.slice";
-import EditCollectionOrFieldForm from "./EditCollectionOrFieldForm";
+import EditCollectionOrFieldForm, {
+  FORM_ID,
+} from "./EditCollectionOrFieldForm";
 import EditDrawer from "./EditDrawer";
 import {
   getUpdatedDatasetFromCollection,
@@ -89,10 +91,10 @@ const EditCollectionDrawer = ({ collection, isOpen, onClose }: Props) => {
           from this dataset. Are you sure you would like to continue?
         </Text>
       }
+      formId={FORM_ID}
     >
       <EditCollectionOrFieldForm
         values={collection}
-        onClose={onClose}
         onSubmit={handleSubmit}
         dataType="collection"
       />

diff --git a/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx b/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack } from "@fidesui/react";
+import { Stack } from "@fidesui/react";
 import { Form, Formik } from "formik";
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
@@ -12,6 +12,8 @@ import { COLLECTION, DATA_QUALIFIERS, FIELD } from "./constants";
 import DataCategoryInput from "./DataCategoryInput";
 import { DataCategoryWithConfidence } from "./types";
 
+export const FORM_ID = "edit-collection-or-field-form";
+
 const IDENTIFIER_OPTIONS = DATA_QUALIFIERS.map((dq) => ({
   value: dq.key,
   label: dq.label,
@@ -26,19 +28,13 @@ type FormValues =
 
 interface Props {
   values: FormValues;
-  onClose: () => void;
   onSubmit: (values: FormValues) => void;
   // NOTE: If you're adding more checks on dataType, refactor this into two
   // components instead and remove this prop.
   dataType: "collection" | "field";
 }
 
-const EditCollectionOrFieldForm = ({
-  values,
-  onClose,
-  onSubmit,
-  dataType,
-}: Props) => {
+const EditCollectionOrFieldForm = ({ values, onSubmit, dataType }: Props) => {
   const initialValues: FormValues = {
     description: values.description ?? "",
     data_qualifier: values.data_qualifier,
@@ -115,50 +111,30 @@ const EditCollectionOrFieldForm = ({
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <Form>
-        <Box
-          display="flex"
-          flexDirection="column"
-          justifyContent="space-between"
-          height="75vh"
-        >
-          <Stack>
-            <CustomTextInput
-              name="description"
-              label="Description"
-              tooltip={descriptionTooltip}
-              data-testid="description-input"
-            />
-            <CustomSelect
-              name="data_qualifier"
-              label="Identifiability"
-              options={IDENTIFIER_OPTIONS}
-              tooltip={dataQualifierTooltip}
-              isSearchable={false}
-              data-testid="identifiability-input"
-            />
-            <DataCategoryInput
-              dataCategories={allDataCategories}
-              mostLikelyCategories={mostLikelyCategories}
-              checked={checkedDataCategories}
-              onChecked={setCheckedDataCategories}
-              tooltip={dataCategoryTooltip}
-            />
-          </Stack>
-          <Box>
-            <Button onClick={onClose} mr={2} size="sm" variant="outline">
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              colorScheme="primary"
-              size="sm"
-              data-testid="save-btn"
-            >
-              Save
-            </Button>
-          </Box>
-        </Box>
+      <Form id={FORM_ID}>
+        <Stack>
+          <CustomTextInput
+            name="description"
+            label="Description"
+            tooltip={descriptionTooltip}
+            data-testid="description-input"
+          />
+          <CustomSelect
+            name="data_qualifier"
+            label="Identifiability"
+            options={IDENTIFIER_OPTIONS}
+            tooltip={dataQualifierTooltip}
+            isSearchable={false}
+            data-testid="identifiability-input"
+          />
+          <DataCategoryInput
+            dataCategories={allDataCategories}
+            mostLikelyCategories={mostLikelyCategories}
+            checked={checkedDataCategories}
+            onChecked={setCheckedDataCategories}
+            tooltip={dataCategoryTooltip}
+          />
+        </Stack>
       </Form>
     </Formik>
   );

diff --git a/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx
@@ -10,7 +10,7 @@ import {
   useDeleteDatasetMutation,
   useUpdateDatasetMutation,
 } from "./dataset.slice";
-import EditDatasetForm from "./EditDatasetForm";
+import EditDatasetForm, { FORM_ID } from "./EditDatasetForm";
 import EditDrawer from "./EditDrawer";
 
 const DESCRIPTION =
@@ -72,12 +72,9 @@ const EditDatasetDrawer = ({ dataset, isOpen, onClose }: Props) => {
         </Text>
       }
       deleteTitle="Delete Dataset"
+      formId={FORM_ID}
     >
-      <EditDatasetForm
-        values={dataset}
-        onClose={onClose}
-        onSubmit={handleSubmit}
-      />
+      <EditDatasetForm values={dataset} onSubmit={handleSubmit} />
     </EditDrawer>
   );
 };

diff --git a/clients/admin-ui/src/features/dataset/EditDatasetForm.tsx b/clients/admin-ui/src/features/dataset/EditDatasetForm.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack } from "@fidesui/react";
+import { Stack } from "@fidesui/react";
 import { Form, Formik } from "formik";
 import { useState } from "react";
 import { useSelector } from "react-redux";
@@ -15,6 +15,8 @@ import {
 import { DATA_QUALIFIERS, DATASET } from "./constants";
 import DataCategoryInput from "./DataCategoryInput";
 
+export const FORM_ID = "edit-field-drawer";
+
 const DATA_QUALIFIERS_OPTIONS = DATA_QUALIFIERS.map((qualifier) => ({
   label: qualifier.label,
   value: qualifier.key,
@@ -24,11 +26,10 @@ type FormValues = Partial<Dataset>;
 
 interface Props {
   values: FormValues;
-  onClose: () => void;
   onSubmit: (values: FormValues) => void;
 }
 
-const EditDatasetForm = ({ values, onClose, onSubmit }: Props) => {
+const EditDatasetForm = ({ values, onSubmit }: Props) => {
   const initialValues: FormValues = {
     name: values.name ?? "",
     description: values.description ?? "",
@@ -54,68 +55,48 @@ const EditDatasetForm = ({ values, onClose, onSubmit }: Props) => {
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <Form>
-        <Box
-          display="flex"
-          flexDirection="column"
-          justifyContent="space-between"
-          height="75vh"
-        >
-          <Stack spacing="3">
-            <CustomTextInput
-              name="name"
-              label="Name"
-              tooltip={DATASET.name.tooltip}
-              data-testid="name-input"
-            />
-            <CustomTextInput
-              name="description"
-              label="Description"
-              tooltip={DATASET.description.tooltip}
-              data-testid="description-input"
-            />
-            <CustomTextInput
-              name="retention"
-              label="Retention period"
-              tooltip={DATASET.retention.tooltip}
-              data-testid="retention-input"
-            />
-            <CustomSelect
-              name="data_qualifier"
-              label="Identifiability"
-              options={DATA_QUALIFIERS_OPTIONS}
-              tooltip={DATASET.data_qualifiers.tooltip}
-              data-testid="identifiability-input"
-            />
-            <CustomMultiSelect
-              name="third_country_transfers"
-              label="Geographic location"
-              tooltip={DATASET.third_country_transfers.tooltip}
-              isSearchable
-              options={COUNTRY_OPTIONS}
-              data-testid="geography-input"
-            />
-            <DataCategoryInput
-              dataCategories={allDataCategories}
-              checked={checkedDataCategories}
-              onChecked={setCheckedDataCategories}
-              tooltip={DATASET.data_categories.tooltip}
-            />
-          </Stack>
-          <Box>
-            <Button onClick={onClose} mr={2} size="sm" variant="outline">
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              colorScheme="primary"
-              size="sm"
-              data-testid="save-btn"
-            >
-              Save
-            </Button>
-          </Box>
-        </Box>
+      <Form id={FORM_ID}>
+        <Stack spacing="3">
+          <CustomTextInput
+            name="name"
+            label="Name"
+            tooltip={DATASET.name.tooltip}
+            data-testid="name-input"
+          />
+          <CustomTextInput
+            name="description"
+            label="Description"
+            tooltip={DATASET.description.tooltip}
+            data-testid="description-input"
+          />
+          <CustomTextInput
+            name="retention"
+            label="Retention period"
+            tooltip={DATASET.retention.tooltip}
+            data-testid="retention-input"
+          />
+          <CustomSelect
+            name="data_qualifier"
+            label="Identifiability"
+            options={DATA_QUALIFIERS_OPTIONS}
+            tooltip={DATASET.data_qualifiers.tooltip}
+            data-testid="identifiability-input"
+          />
+          <CustomMultiSelect
+            name="third_country_transfers"
+            label="Geographic location"
+            tooltip={DATASET.third_country_transfers.tooltip}
+            isSearchable
+            options={COUNTRY_OPTIONS}
+            data-testid="geography-input"
+          />
+          <DataCategoryInput
+            dataCategories={allDataCategories}
+            checked={checkedDataCategories}
+            onChecked={setCheckedDataCategories}
+            tooltip={DATASET.data_categories.tooltip}
+          />
+        </Stack>
       </Form>
     </Formik>
   );

diff --git a/clients/admin-ui/src/features/dataset/EditDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDrawer.tsx
@@ -4,6 +4,7 @@ import {
   Drawer,
   DrawerBody,
   DrawerContent,
+  DrawerFooter,
   DrawerHeader,
   DrawerOverlay,
   IconButton,
@@ -24,6 +25,11 @@ interface Props {
   deleteTitle: string;
   deleteMessage: ReactNode;
   children: ReactNode;
+  /**
+   * Associates the submit button with a form, which is useful for when the button
+   * does not live directly inside the form hierarchy
+   */
+  formId?: string;
 }
 
 const EditDrawer = ({
@@ -35,6 +41,7 @@ const EditDrawer = ({
   deleteTitle,
   deleteMessage,
   children,
+  formId,
 }: Props) => {
   const {
     isOpen: deleteIsOpen,
@@ -46,30 +53,42 @@ const EditDrawer = ({
     <>
       <Drawer placement="right" isOpen={isOpen} onClose={onClose} size="lg">
         <DrawerOverlay />
-        <DrawerContent data-testid="edit-drawer-content">
-          <Box py={2}>
-            <Box display="flex" justifyContent="flex-end" mr={2}>
-              <Button variant="ghost" onClick={onClose}>
-                <CloseSolidIcon />
-              </Button>
-            </Box>
-            <DrawerHeader py={2} display="flex" alignItems="center">
-              <Text mr="2">{header}</Text>
-              <IconButton
-                aria-label="delete"
-                icon={<TrashCanSolidIcon />}
-                size="xs"
-                onClick={onDeleteOpen}
-                data-testid="delete-btn"
-              />
-            </DrawerHeader>
-            <DrawerBody>
-              <Text fontSize="sm" mb={4}>
-                {description}
-              </Text>
-              {children}
-            </DrawerBody>
+        <DrawerContent data-testid="edit-drawer-content" py={2}>
+          <Box display="flex" justifyContent="flex-end" mr={2}>
+            <Button variant="ghost" onClick={onClose}>
+              <CloseSolidIcon />
+            </Button>
           </Box>
+          <DrawerHeader py={2} display="flex" alignItems="center">
+            <Text mr="2">{header}</Text>
+            <IconButton
+              aria-label="delete"
+              icon={<TrashCanSolidIcon />}
+              size="xs"
+              onClick={onDeleteOpen}
+              data-testid="delete-btn"
+            />
+          </DrawerHeader>
+          <DrawerBody>
+            <Text fontSize="sm" mb={4}>
+              {description}
+            </Text>
+            {children}
+          </DrawerBody>
+          <DrawerFooter justifyContent="flex-start">
+            <Button onClick={onClose} mr={2} size="sm" variant="outline">
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              colorScheme="primary"
+              size="sm"
+              data-testid="save-btn"
+              form={formId}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
         </DrawerContent>
       </Drawer>
       <ConfirmationModal