UI v2 new theme setting

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/ComplianceScanConfigureForm.tsx

@@ -169,6 +169,7 @@ const useGetControls = ({
 }) => {
   return useSuspenseQuery({
     ...queries.posture.listControls({ checkType, nodeType }),
+    keepPreviousData: true,
   });
 };
 
@@ -178,21 +179,19 @@ const ToggleControl = ({
   nodeId,
   nodeType,
   checkType,
-  loading,
   fetcher,
 }: {
   checked: boolean;
   controlId: string[];
   nodeId: string;
   nodeType: string;
   checkType: string;
-  loading: boolean;
   fetcher: FetcherWithComponents<any>;
 }) => {
-  if (loading) {
+  // TODO: should show loader indicator here
+  if (fetcher.state !== 'idle') {
     return <CircleSpinner size="sm" />;
   }
-
   return (
     <>
       <Switch
@@ -233,11 +232,10 @@ const ControlTable = ({
   }, [nodeType]);
   const fetcher = useFetcher();
   const [pageSize, setPageSize] = useState(10);
-  const { data, status } = useGetControls({
+  const { data } = useGetControls({
     checkType: selectedTab === 'SOC2' ? 'soc_2' : selectedTab.toLowerCase(),
     nodeType: _nodeType,
   });
-  const isLoading = status !== 'success';
   const columnHelper = createColumnHelper<ModelCloudNodeComplianceControl>();
   const columns = useMemo(
     () => [
@@ -249,7 +247,6 @@ const ControlTable = ({
             <ToggleControl
               nodeId={nodeIds[0]}
               nodeType={_nodeType}
-              loading={isLoading}
               checkType={selectedTab.toLowerCase()}
               checked={!!info.row.original.enabled}
               controlId={

deepfence_frontend/apps/dashboard/src/features/settings/components/ChangePassword.tsx

@@ -13,9 +13,8 @@ export const ChangePassword = ({ onCancel }: { onCancel: () => void }) => {
 
   if (data?.success) return <SuccessModalContent text="Password changed successfully!" />;
   return (
-    <fetcher.Form method="post" className="flex flex-col mt-2">
+    <fetcher.Form method="post" className="flex flex-col gap-y-8 mt-4 mx-4">
       <TextInput
-        className="mt-8"
         label="Old Password"
         type={'password'}
         placeholder="Old Password"
@@ -56,7 +55,7 @@ export const ChangePassword = ({ onCancel }: { onCancel: () => void }) => {
         {!data?.success && data?.message && <span>{data.message}</span>}
       </div>
 
-      <div className="flex mt-4 gap-x-4">
+      <div className="flex gap-x-2">
         <Button
           size="sm"
           type="submit"

deepfence_frontend/apps/dashboard/src/features/settings/components/SettingNavigation.tsx

@@ -0,0 +1,103 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import { NavLink } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
+
+const MenuItems: Array<{
+  title: string;
+  to: string;
+}> = [
+  {
+    title: 'User Management',
+    to: '/settings/user-management',
+  },
+  {
+    title: 'Scan history & database management',
+    to: '/settings/scan-history-and-db-management',
+  },
+  {
+    title: 'Scheduled jobs',
+    to: '/settings/scheduled-jobs',
+  },
+  {
+    title: 'Diagnostics logs',
+    to: '/settings/diagnostic-logs',
+  },
+  {
+    title: 'User audit logs',
+    to: '/settings/user-audit-logs',
+  },
+  {
+    title: 'Email configurations',
+    to: '/settings/email-configuration',
+  },
+  {
+    title: 'Global settings',
+    to: '/settings/global-settings',
+  },
+  {
+    title: 'Connection instructions',
+    to: '/settings/connection-instructions',
+  },
+];
+
+const linkClass = cn(
+  'text-p5 dark:text-text-text-and-icon py-3 px-6',
+  'dark:hover:bg-bg-breadcrumb-bar',
+  'flex relative border-b dark:border-bg-grid-border',
+);
+
+export const SettingNavigation = () => {
+  return (
+    <>
+      <NavigationMenu.Root
+        orientation="vertical"
+        className={cn(
+          'overflow-x-hidden overflow-y-auto',
+          'border-r dark:border-bg-top-header ml-4 h-screen w-[208px]',
+        )}
+      >
+        <NavigationMenu.List>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link asChild>
+              <div className={cn(`${linkClass}`, 'text-h6 dark:text-text-input-value')}>
+                Setting options
+              </div>
+            </NavigationMenu.Link>
+          </NavigationMenu.Item>
+          {MenuItems.map((menuItem) => {
+            return (
+              <NavigationMenu.Item key={menuItem.title}>
+                <NavigationMenu.Link asChild>
+                  <div>
+                    <NavLink
+                      to={menuItem.to}
+                      className={({ isActive }) =>
+                        isActive
+                          ? cn(
+                              linkClass,
+                              'dark:bg-bg-active-selection dark:text-text-input-value',
+                            )
+                          : linkClass
+                      }
+                    >
+                      {({ isActive }) => {
+                        return (
+                          <>
+                            {isActive && (
+                              <div className="absolute w-1 left-0 top-0 bottom-0 dark:bg-brand-dark-blue" />
+                            )}
+                            <div className="overflow-wrap">{menuItem.title}</div>
+                          </>
+                        );
+                      }}
+                    </NavLink>
+                  </div>
+                </NavigationMenu.Link>
+              </NavigationMenu.Item>
+            );
+          })}
+        </NavigationMenu.List>
+      </NavigationMenu.Root>
+    </>
+  );
+};

deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { startCase } from 'lodash-es';
-import { HiCode, HiOutlineArrowCircleRight, HiOutlineArrowLeft } from 'react-icons/hi';
+import { HiOutlineArrowCircleRight, HiOutlineArrowLeft } from 'react-icons/hi';
 import { IconContext } from 'react-icons/lib';
 import { generatePath, useParams } from 'react-router-dom';
 import { Card } from 'ui-components';
@@ -233,18 +233,9 @@ const Instructions = ({ connectorType }: { connectorType: string }) => {
 const Connectors = () => {
   return (
     <div className="max-w-[900px]">
-      <div className="mt-2 flex gap-x-2 items-center">
-        <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 bg-opacity-75 dark:bg-opacity-50 flex items-center justify-center rounded-sm">
-          <IconContext.Provider
-            value={{
-              className: 'text-blue-600 dark:text-blue-400',
-            }}
-          >
-            <HiCode />
-          </IconContext.Provider>
-        </div>
+      <div className="mt-2">
         <h3 className="font-medium text-gray-900 dark:text-white text-base">
-          Connection Instructions
+          Connection instructions
         </h3>
       </div>
       <div className="h-full dark:text-white mt-4">
@@ -265,11 +256,10 @@ const ConnectorInstructions = () => {
     connectorType: string;
   };
 
-  return (
-    <SettingsTab value="connection-instructions">
-      {connectorType ? <Instructions connectorType={connectorType} /> : <Connectors />}
-    </SettingsTab>
-  );
+  if (connectorType) {
+    return <Instructions connectorType={connectorType} />;
+  }
+  return <Connectors />;
 };
 
 export const module = {