chore: linting and refinements

Author: speaker-ender

clients/admin-ui/src/features/common/api.slice.ts

@@ -114,7 +114,7 @@ export const baseApi = createApi({
     "Access Control",
     "Fides Dashboard",
     "Monitor Statistics",
-    "Connection Type"
+    "Connection Type",
   ],
   endpoints: () => ({}),
 });

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

@@ -18,9 +18,9 @@ import useActionCenterNavigation, {
   ActionCenterRoute,
   ActionCenterRouteConfig,
 } from "~/features/data-discovery-and-detection/action-center/hooks/useActionCenterNavigation";
+import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 import MonitorStats from "./MonitorStats";
-import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 export interface ActionCenterLayoutProps {
   monitorId?: string;
@@ -29,8 +29,8 @@ export interface ActionCenterLayoutProps {
     dropdownProps?: DropdownProps;
     badgeProps?: BadgeProps;
   };
-  refresh?: () => void
-  monitorType?: APIMonitorType
+  refresh?: () => void;
+  monitorType?: APIMonitorType;
 }
 
 const ActionCenterLayout = ({
@@ -39,7 +39,7 @@ const ActionCenterLayout = ({
   monitorType,
   routeConfig,
   pageSettings,
-  refresh
+  refresh,
 }: PropsWithChildren<ActionCenterLayoutProps>) => {
   const {
     items: menuItems,
@@ -73,19 +73,20 @@ const ActionCenterLayout = ({
                   </Dropdown>
                 </Badge>
               </Flex>
-            )
-            }
-            {refresh &&
+            )}
+            {refresh && (
               <Button
                 aria-label="Page refresh"
                 icon={<Icons.Renew />}
                 onClick={refresh}
               />
-            }
+            )}
           </Flex>
         }
       />
-      {monitorId && <MonitorStats monitorId={monitorId} monitorType={monitorType} />}
+      {monitorId && monitorType && (
+        <MonitorStats monitorId={monitorId} monitorType={monitorType} />
+      )}
       <Menu
         aria-label="Action center tabs"
         mode="horizontal"

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

@@ -1,47 +1,49 @@
+import { skipToken } from "@reduxjs/toolkit/query";
 import { Descriptions, Flex, Text } from "fidesui";
 
 import { useFlags } from "~/features/common/features";
-import { useGetConnectionQuery, useGetMonitorConfigQuery } from "./action-center.slice";
-import { APIMonitorType } from "~/types/api/models/APIMonitorType";
-import { skipToken } from "@reduxjs/toolkit/query";
+
+import {
+  useGetConnectionQuery,
+  useGetMonitorConfigQuery,
+} from "./action-center.slice";
 
 export interface MonitorDetailsWidgetProps {
   monitorId: string;
-  monitorType: APIMonitorType
-  disabled?: boolean
 }
 
 const MonitorDetailsWidget = ({ monitorId }: MonitorDetailsWidgetProps) => {
   const {
     flags: { heliosInsights },
   } = useFlags();
-  const { data: configData } = useGetMonitorConfigQuery({ monitor_config_id: monitorId })
-  const connectionKey = configData?.connection_config_key
-  const { data: connectionData } = useGetConnectionQuery(connectionKey ? { connection_key: connectionKey } : skipToken)
+  const { data: configData } = useGetMonitorConfigQuery({
+    monitor_config_id: monitorId,
+  });
+  const connectionKey = configData?.connection_config_key;
+  const { data: connectionData } = useGetConnectionQuery(
+    connectionKey ? { connection_key: connectionKey } : skipToken,
+  );
 
   return (
     heliosInsights && (
-      <Flex
-        className="w-full"
-        gap="middle"
-        vertical
-      >
+      <Flex className="w-full" gap="middle" vertical>
         <Text strong>Details</Text>
         <Descriptions
           size="small"
-          items={[{
-            label: "System",
-            children: connectionData?.system_key,
-            span: "filled"
-          },
-          {
-            label: "Integration",
-            children: connectionKey,
+          items={[
+            {
+              label: "System",
+              children: connectionData?.system_key,
+              span: "filled",
+            },
+            {
+              label: "Integration",
+              children: connectionData?.key,
 
-            span: "filled"
-          }
-          ]}>
-        </Descriptions>
+              span: "filled",
+            },
+          ]}
+        />
       </Flex>
     )
   );

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

@@ -12,14 +12,14 @@ import { EmptyMonitorsResult } from "~/features/data-discovery-and-detection/act
 import useSearchForm from "~/features/data-discovery-and-detection/action-center/hooks/useSearchForm";
 import { MonitorResult } from "~/features/data-discovery-and-detection/action-center/MonitorResult";
 import { useGetUserMonitorsQuery } from "~/features/user-management";
+import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 import MonitorListSearchForm from "./forms/MonitorListSearchForm";
 import {
   MonitorSearchForm,
   MonitorSearchFormQuerySchema,
   SearchFormQueryState,
 } from "./MonitorList.const";
-import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 import MonitorStats from "./MonitorStats";
 
 const MonitorList = () => {
@@ -41,8 +41,8 @@ const MonitorList = () => {
   const { data: userMonitors } = useGetUserMonitorsQuery(
     currentUser?.id
       ? {
-        id: currentUser.id,
-      }
+          id: currentUser.id,
+        }
       : skipToken,
   );
 
@@ -68,7 +68,9 @@ const MonitorList = () => {
         search: search || undefined,
         monitor_type: monitor_type
           ? [monitor_type]
-          : [...availableMonitorTypes] /** this should be handled via ant binding ideally. * */,
+          : [
+              ...availableMonitorTypes,
+            ] /** this should be handled via ant binding ideally. * */,
         steward_user_id:
           typeof steward_key === "undefined" || !steward_key
             ? []

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

@@ -1,74 +1,75 @@
-
-import classNames from "classnames";
-import { Button, Card, Divider, Flex, Icons, Text } from "fidesui";
+import { Button, Flex, Icons, Text } from "fidesui";
 import Link from "next/link";
+import { useQueryStates } from "nuqs";
 
 import { useFlags } from "~/features/common/features";
 import { INTEGRATION_MANAGEMENT_ROUTE } from "~/features/common/nav/routes";
+import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 import { useGetAggregateStatisticsQuery } from "./action-center.slice";
+import { SearchFormQueryState } from "./MonitorList.const";
 import { ProgressCard } from "./ProgressCard/ProgressCard";
 import {
   buildWidgetProps,
   MONITOR_TYPE_TO_EMPTY_TEXT,
   MONITOR_TYPE_TO_ICON,
   MONITOR_TYPE_TO_LABEL,
-  transformStatisticsResponseToCardProps,
 } from "./ProgressCard/utils";
-import { useQueryStates } from "nuqs";
-import { SearchFormQueryState } from "./MonitorList.const";
-import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 export interface MonitorProgressWidgetProps {
   monitorId?: string;
-  monitorType: APIMonitorType
-  disabled?: boolean
+  monitorType: APIMonitorType;
+  disabled?: boolean;
 }
 
 const renderIcon = (icon: Icons.CarbonIconType) => {
   const Icon = icon;
   return <Icon size={33} />;
 };
 
-const MonitorProgressWidget = ({ monitorId, monitorType }: MonitorProgressWidgetProps) => {
+const MonitorProgressWidget = ({
+  monitorId,
+  monitorType,
+}: MonitorProgressWidgetProps) => {
   const {
     flags: { heliosInsights },
   } = useFlags();
-  const [filters] = useQueryStates(SearchFormQueryState(Object.values(APIMonitorType
-  )))
+  const [filters] = useQueryStates(
+    SearchFormQueryState(Object.values(APIMonitorType)),
+  );
 
   const { data } = useGetAggregateStatisticsQuery(
     {
       monitor_type: monitorType,
       monitor_config_id: monitorId,
-      steward_user_id: filters.steward_key ? [filters.steward_key] : undefined
+      steward_user_id: filters.steward_key ? [filters.steward_key] : undefined,
     },
     {
       refetchOnMountOrArgChange: true,
     },
   );
 
-  const { total_monitors = 0 } = data ?? { total_monitors: 0 }
+  const totalMonitors = data?.total_monitors ?? 0;
 
   return (
     heliosInsights && (
-      <Flex
-        className="w-full"
-        gap="middle"
-      >
-        {data && total_monitors > 0 || !!filters.steward_key ? (
+      <Flex className="w-full" gap="middle">
+        {(data && totalMonitors > 0) || !!filters.steward_key ? (
           <ProgressCard
             {...buildWidgetProps({
               monitor_type: monitorType,
-              total_monitors,
+              total_monitors: totalMonitors,
               ...data,
             })}
             compact={!!monitorId}
-            disabled={(!!filters.monitor_type && monitorType !== filters.monitor_type) || (!!filters.steward_key && total_monitors <= 0)}
+            disabled={
+              (!!filters.monitor_type &&
+                monitorType !== filters.monitor_type) ||
+              (!!filters.steward_key && totalMonitors <= 0)
+            }
           />
         ) : (
-          <div
-          >
+          <div>
             <Flex vertical gap="middle" align="center" justify="center">
               <span>{MONITOR_TYPE_TO_LABEL[monitorType]}</span>
               <Text>{renderIcon(MONITOR_TYPE_TO_ICON[monitorType])}</Text>
@@ -80,8 +81,7 @@ const MonitorProgressWidget = ({ monitorId, monitorType }: MonitorProgressWidget
               </Link>
             </Flex>
           </div>
-        )
-        }
+        )}
       </Flex>
     )
   );

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

@@ -26,14 +26,14 @@ import {
 import ConnectionTypeLogo, {
   ConnectionLogoKind,
 } from "~/features/datastore-connections/ConnectionTypeLogo";
+import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 import { DatastoreMonitorUpdates } from "~/types/api/models/DatastoreMonitorUpdates";
 
 import { ConfidenceRow } from "./ConfidenceRow";
 import { DiscoveryStatusIcon } from "./DiscoveryStatusIcon";
 import styles from "./MonitorResult.module.scss";
 import { MonitorResultDescription } from "./MonitorResultDescription";
 import { MonitorAggregatedResults } from "./types";
-import { APIMonitorType } from "~/types/api/models/APIMonitorType";
 
 const { Text } = Typography;
 

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

@@ -1,50 +1,61 @@
 import classNames from "classnames";
-import { Divider, Flex, Text } from "fidesui";
+import { Divider, Flex } from "fidesui";
 
 import { useFlags } from "~/features/common/features";
-
-import { useQueryStates } from "nuqs";
-import { SearchFormQueryState } from "./MonitorList.const";
 import { APIMonitorType } from "~/types/api/models/APIMonitorType";
+
+import MonitorDetailsWidget from "./MonitorDetailsWidget";
 import MonitorProgressWidget from "./MonitorProgressWidget";
 import MonitorStatsWidget from "./MonitorStatsWidget";
-import MonitorDetailsWidget from "./MonitorDetailsWidget";
 
 export interface MonitorStatsProps {
   monitorId?: string;
-  monitorType: APIMonitorType
+  monitorType?: APIMonitorType;
 }
 
-
 const MonitorStats = ({ monitorId, monitorType }: MonitorStatsProps) => {
   const {
     flags: { heliosInsights },
   } = useFlags();
-  const [filters] = useQueryStates(SearchFormQueryState(Object.values(APIMonitorType
-  )))
 
   return (
     heliosInsights && (
-      <Flex
-        className={classNames(
-          "w-full",
-        )}
-        gap="middle"
-      >
-        {Object.values(monitorType ? [monitorType] : APIMonitorType).map((mType) =>
-          <MonitorProgressWidget
-            monitorType={mType}
-            monitorId={monitorId}
-            key={mType}
-          />
-        ).reduce((prev, curr) => [prev, ...(prev[0] ? [<Divider vertical className="h-full" key={`${curr.key}--divider`} />] : []), curr], [] as React.ReactNode[])}
-        {monitorId &&
+      <Flex className={classNames("w-full")} gap="middle">
+        {Object.values(monitorType ? [monitorType] : APIMonitorType)
+          .map((mType) => (
+            <MonitorProgressWidget
+              monitorType={mType}
+              monitorId={monitorId}
+              key={mType}
+            />
+          ))
+          .reduce(
+            (prev, curr) => [
+              prev,
+              ...(prev[0]
+                ? [
+                    <Divider
+                      vertical
+                      className="h-full"
+                      key={`${curr.key}--divider`}
+                    />,
+                  ]
+                : []),
+              curr,
+            ],
+            [] as React.ReactNode[],
+          )}
+        {monitorId && monitorType && (
           <>
-            <MonitorStatsWidget monitorType={monitorType} monitorId={monitorId} />
-            <MonitorDetailsWidget monitorType={monitorType} monitorId={monitorId} />
+            <Divider vertical className="h-full" />,
+            <MonitorStatsWidget
+              monitorType={monitorType}
+              monitorId={monitorId}
+            />
+            <Divider vertical className="h-full" />,
+            <MonitorDetailsWidget monitorId={monitorId} />
           </>
-
-        }
+        )}
       </Flex>
     )
   );