Merge pull request #147 from kloudlite/ui/improvements

UI/improvements

lib/app-setup/root.tsx

@@ -32,6 +32,7 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
+import { isBrowser } from '../client/helpers/is-browser';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
 export const links: LinksFunction = () => [
@@ -201,7 +202,7 @@ const Root = ({
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
 
-          gtag('config', ${tagId});
+          gtag('config', '${tagId}');
               `,
           }}
         />
@@ -237,7 +238,7 @@ const Root = ({
           <ProgressContainer>
             <ReloadIndicator />
             <NonIdleProgressBar />
-            <ToastContainer position="bottom-left" />
+            {isBrowser() && <ToastContainer position="bottom-left" />}
             {error ? (
               <div>{JSON.stringify(error)}</div>
             ) : (

src/apps/console/components/list-grid-view.tsx

@@ -1,5 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { IListOrGrid } from '../server/r-utils/common';
+import { ReactNode } from 'react';
 import { useViewMode } from './view-mode';
 
 const ListGridView = ({
@@ -10,16 +9,10 @@ const ListGridView = ({
   listView: ReactNode;
 }) => {
   const { viewMode } = useViewMode();
-  const [tempViewMode, setTempViewMode] = useState<IListOrGrid>('list');
-
-  useEffect(() => {
-    setTempViewMode(viewMode);
-  }, [viewMode]);
-
   return (
     <div>
       <div className="hidden md:block">
-        {tempViewMode === 'grid' ? gridView : listView}
+        {viewMode === 'c' ? gridView : listView}
       </div>
       <div className="block md:hidden">{gridView}</div>
     </div>

src/apps/console/components/sync-status.tsx

@@ -21,7 +21,19 @@ interface IStatusMetaV2 {
   recordVersion: number;
   markedForDeletion?: boolean;
   status?: {
-    checks?: any;
+    checks?: {
+      [key: string]: {
+        error: string;
+        generation: number;
+        message: string;
+        state:
+          | 'yet-to-be-reconciled'
+          | 'under-reconcilation'
+          | 'errored-during-reconcilation'
+          | 'finished-reconcilation';
+        status: boolean;
+      };
+    };
     isReady: boolean;
     lastReadyGeneration?: number;
     lastReconcileTime?: any;
@@ -151,25 +163,21 @@ const state = ({
   }
 };
 
-const parseOverallState = (s: IStatusMetaV2['status']): OverallStates => {
-  const checks: {
-    [key: string]: {
-      error: string;
-      generation: number;
-      message: string;
-      state:
-        | 'yet-to-be-reconciled'
-        | 'under-reconcilation'
-        | 'errored-during-reconcilation'
-        | 'finished-reconcilation';
-      status: boolean;
-    };
-  } = s?.checks;
+const parseOverallState = (item: IStatusMetaV2): OverallStates => {
+  const { status, markedForDeletion, syncStatus } = item;
+
+  const checks = status?.checks;
+  const checkList = status?.checkList;
+
+  if (markedForDeletion && syncStatus.action === 'DELETE') {
+    return 'deleting';
+  }
+
   if (!checks) {
     return 'idle';
   }
 
-  const mainStatus = s?.checkList?.reduce(
+  const mainStatus = checkList?.reduce(
     (acc, curr) => {
       const k = checks[curr.name];
       if (acc.progress === 'done') {
@@ -224,8 +232,6 @@ export const SyncStatusV2 = ({
   item: IStatusMetaV2;
   type?: IStatusViewType;
 }) => {
-  const { status } = item;
-
   const parseStage = (check: OverallStates) => {
     const iconSize = 12;
 
@@ -268,25 +274,17 @@ export const SyncStatusV2 = ({
     }
   };
 
-  const getProgressItems = (s: typeof status) => {
-    const checks: {
-      [key: string]: {
-        error: string;
-        generation: number;
-        message: string;
-        state:
-          | 'yet-to-be-reconciled'
-          | 'under-reconcilation'
-          | 'errored-during-reconcilation'
-          | 'finished-reconcilation';
-        status: boolean;
-      };
-    } = s?.checks;
+  const getProgressItems = (item: IStatusMetaV2) => {
+    const { status } = item;
+
+    const checks = status?.checks;
+    const checkList = status?.checkList;
+
     if (!checks) {
       return [];
     }
 
-    const items = status?.checkList?.reduce(
+    const items = checkList?.reduce(
       (acc, curr) => {
         const k = checks[curr.name];
         if (acc.progress === 'done') {
@@ -374,8 +372,8 @@ export const SyncStatusV2 = ({
     ],
   };
 
-  const k = parseOverallState(status);
-  const ic = getProgressItems(status);
+  const k = parseOverallState(item);
+  const ic = getProgressItems(item);
 
   return (
     <div>
@@ -415,5 +413,5 @@ export const SyncStatusV2 = ({
 };
 
 export const status = ({ item }: { item: IStatusMetaV2 }) => {
-  return parseOverallState(item.status);
+  return parseOverallState(item);
 };

src/apps/console/components/view-mode.tsx

@@ -14,25 +14,28 @@ import { IListOrGrid } from '../server/r-utils/common';
 const ViewModeContext = createContext<{
   viewMode: IListOrGrid;
   setViewMode: (mode: IListOrGrid) => void;
-}>({ viewMode: 'list', setViewMode() {} });
+}>({ viewMode: 'r', setViewMode() {} });
 
-const retriveInitialViewMode = (): IListOrGrid => {
-  return (
-    isBrowser() ? sessionStorage.getItem('ViewMode') || 'list' : 'list'
-  ) as IListOrGrid;
+const setVM = ({ mode }: { mode: IListOrGrid }) => {
+  sessionStorage.setItem('view-mode', mode);
 };
 
-const saveViewMode = ({ mode }: { mode: IListOrGrid }) => {
+const getVM = (): IListOrGrid => {
   if (isBrowser()) {
-    sessionStorage.setItem('ViewMode', mode);
+    try {
+      return (sessionStorage.getItem('view-mode') || 'r') as IListOrGrid;
+    } catch (err) {
+      //
+    }
   }
+  return 'r';
 };
 
 export const ViewModeProvider = ({ children }: { children: ReactNode }) => {
-  const [viewMode, setViewMode] = useState(retriveInitialViewMode());
+  const [viewMode, setViewMode] = useState<IListOrGrid>(getVM());
 
   useEffect(() => {
-    saveViewMode({ mode: viewMode });
+    setVM({ mode: viewMode });
   }, [viewMode]);
 
   return (
@@ -55,20 +58,14 @@ export const useViewMode = () => {
 const ViewMode = () => {
   const { viewMode, setViewMode } = useViewMode();
 
-  const [tempViewMode, setTempViewMode] = useState<IListOrGrid>('list');
-
-  useEffect(() => {
-    setTempViewMode(viewMode);
-  }, [viewMode]);
-
   return (
     <Toolbar.ButtonGroup.Root
-      value={tempViewMode}
+      value={viewMode}
       onValueChange={setViewMode}
       selectable
     >
-      <Toolbar.ButtonGroup.IconButton icon={<List />} value="list" />
-      <Toolbar.ButtonGroup.IconButton icon={<SquaresFour />} value="grid" />
+      <Toolbar.ButtonGroup.IconButton icon={<List />} value="r" />
+      <Toolbar.ButtonGroup.IconButton icon={<SquaresFour />} value="c" />
     </Toolbar.ButtonGroup.Root>
   );
 };

src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx

@@ -149,7 +149,7 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => {
             className: 'w-[180px]',
           },
           {
-            render: () => '',
+            render: () => 'Status',
             name: 'status',
             className: 'flex-1 min-w-[30px] flex items-center justify-center',
           },

src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx

@@ -28,6 +28,7 @@ import LogComp from '~/root/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
 import { useDataState } from '~/console/page-components/common-state';
 import { useState } from 'react';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 
 type BaseType = ExtractNodeType<IClusters>;
 const RESOURCE_NAME = 'cluster';
@@ -227,7 +228,7 @@ const ListView = ({ items }: { items: BaseType[] }) => {
               //   ),
               // },
               status: {
-                render: () => null,
+                render: () => <SyncStatusV2 item={i} />,
               },
               provider: { render: () => <ListItem data={provider} /> },
               updated: {

src/apps/console/server/r-utils/common.ts

@@ -151,7 +151,7 @@ export type ExtractNodeType<T> = T extends Nodes
   ? T['edges'][number]['node']
   : T;
 
-export type IListOrGrid = 'list' | 'grid' | NonNullableString;
+export type IListOrGrid = 'r' | 'c' | NonNullableString;
 export type wsOrEnv = 'environment' | 'workspace' | NonNullableString;
 
 export const parseUpdateTime = (resource: { updateTime: string }) => {