fix: url form syncing [ENG-2469] (#7279)

Author: speaker-ender

changelog/7279.yaml

@@ -0,0 +1,7 @@
+# Copy this file and rename it (e.g., pr-number.yaml or feature-name.yaml)
+# Fill in the required fields and delete this comment block
+
+type: Fixed # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security
+description: syncing url and search form for the action center and removing default monitor filter
+pr: 7279 # PR number
+labels: [] # Optional: ["high-risk", "db-migration"]

clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.tsx

@@ -7,8 +7,6 @@ import {
 } from "fidesui";
 import { useEffect } from "react";
 
-import { useAppSelector } from "~/app/hooks";
-import { selectUser } from "~/features/auth";
 import { useFeatures } from "~/features/common/features";
 import { ACTION_CENTER_ROUTE } from "~/features/common/nav/routes";
 import { useAntPagination } from "~/features/common/pagination/useAntPagination";
@@ -40,16 +38,8 @@ const MonitorList = () => {
     ...(oktaMonitorEnabled ? [MONITOR_TYPES.INFRASTRUCTURE] : []),
   ] as const;
 
-  const currentUser = useAppSelector(selectUser);
-
   const { requestData, ...formProps } = useSearchForm({
-    queryState: SearchFormQueryState(
-      [...availableMonitorTypes],
-      currentUser?.isRootUser ? undefined : currentUser?.id,
-    ),
-    initialValues: {
-      steward_key: currentUser?.isRootUser ? null : (currentUser?.id ?? null),
-    },
+    queryState: SearchFormQueryState([...availableMonitorTypes]),
     translate: ({
       steward_key,
       search,

clients/admin-ui/src/features/data-discovery-and-detection/action-center/forms/MonitorListSearchForm.tsx

@@ -1,5 +1,8 @@
 import { Flex, Form, Select } from "fidesui";
+import _ from "lodash";
 
+import { useAppSelector } from "~/app/hooks";
+import { selectUser } from "~/features/auth";
 import SearchInput from "~/features/common/SearchInput";
 import { formatUser } from "~/features/common/utils";
 import useSearchForm from "~/features/data-discovery-and-detection/action-center/hooks/useSearchForm";
@@ -26,6 +29,8 @@ const MonitorListSearchForm = ({
 > & {
   availableMonitorTypes: readonly MONITOR_TYPES[];
 }) => {
+  const currentUser = useAppSelector(selectUser);
+
   const { data: eligibleUsersData, isLoading: isLoadingUserOptions } =
     useGetAllUsersQuery({
       page: 1,
@@ -34,24 +39,37 @@ const MonitorListSearchForm = ({
       exclude_approvers: true,
     });
 
-  const dataStewardOptions = (eligibleUsersData?.items || []).map((user) => ({
-    label: formatUser(user),
-    value: user.id,
-  }));
+  const dataStewardOptions = _.uniqBy(
+    [
+      ...(currentUser
+        ? [
+            {
+              label: "Assigned to me",
+              value: currentUser.id,
+            },
+          ]
+        : []),
+      ...(eligibleUsersData?.items || []).map((user) => ({
+        label: formatUser(user),
+        value: user.id,
+      })),
+    ],
+    "value",
+  );
 
   return (
     <Form
       form={form}
       {...formProps}
       layout="inline"
-      className="flex grow gap-4"
+      className="flex grow gap-2"
     >
       <Flex className="grow justify-between self-stretch">
         <Form.Item name="search" className="self-end">
           <SearchInput />
         </Form.Item>
       </Flex>
-      <Form.Item name="monitor_type" className="self-end">
+      <Form.Item name="monitor_type" className="!me-0 self-end">
         <Select
           options={availableMonitorTypes.map((monitorType) => ({
             value: monitorType,
@@ -64,7 +82,7 @@ const MonitorListSearchForm = ({
           aria-label="Filter by monitor type"
         />
       </Form.Item>
-      <Form.Item name="steward_key" className="self-end">
+      <Form.Item name="steward_key" className="!me-0 self-end">
         <Select
           options={dataStewardOptions}
           loading={isLoadingUserOptions}

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useSearchForm.ts

@@ -1,5 +1,6 @@
 import { Form, FormProps } from "fidesui";
 import { useQueryStates, UseQueryStatesKeysMap, Values } from "nuqs";
+import { useEffect } from "react";
 
 /**
  * @description links ant form handler with nuqs query state
@@ -19,24 +20,38 @@ const useSearchForm = <RequestData, QueryState extends UseQueryStatesKeysMap>({
   const [form] = Form.useForm<Values<QueryState>>();
 
   // Without a submit button, we want to re-submit on every change
-  const onFieldsChange: FormProps<Values<QueryState>>["onFieldsChange"] = () =>
-    form.submit();
-
-  // We are binding the ant form values to nuqs state using the form finished method
-  const onFinish: FormProps<Values<QueryState>>["onFinish"] = (values) => {
-    const filteredValues = Object.fromEntries(
+  const onFieldsChange: FormProps<
+    Values<QueryState>
+  >["onFieldsChange"] = () => {
+    const values = form.getFieldsValue(true);
+    // Translation of undefined/empty string usage as default values in ant vs nuqs
+    const translatedValues = Object.fromEntries(
       Object.entries(values).map(([key, value]) => [
         key,
         value === undefined ? "" : value,
       ]),
     );
-    setSearchForm(filteredValues as typeof values);
+    setSearchForm(translatedValues as typeof values);
   };
 
+  // Unfortunate need for effect due to current routing strategy
+  useEffect(() => {
+    // Translation of undefined/empty string usage as default values in ant vs nuqs
+    const translatedValues = Object.fromEntries(
+      Object.entries(searchForm).map(([key, value]) => [
+        key,
+        value === "" ? undefined : value,
+      ]),
+    );
+
+    form.setFieldsValue(
+      translatedValues as Parameters<typeof form.setFieldsValue>[0],
+    ); // Casting again due to weird ant types
+  }, [searchForm]);
+
   return {
     form,
     onFieldsChange,
-    onFinish,
     initialValues: {
       ...initialValues,
       ...searchForm,