[UI][V2] registries listing design

deepfence_frontend/README.md

@@ -28,45 +28,45 @@ This turborepo has some additional tools already setup for you:
 To build all apps and packages, run the following command:
 
 ```
-npm run build
+pnpm run build
 ```
 
 ### Develop
 
 To develop all apps and packages, run the following command:
 
 ```
-npm run dev
+pnpm run dev
 ```
 
 ### Check for code formatting issues
 
 To check for code formatting issues, run the following command:
 
 ```
-npm run format
+pnpm run format
 ```
 
 ### Fix code formatting issues
 
 To fix code formatting issues automatically, run the following command:
 
 ```
-npm run format:fix
+pnpm run format:fix
 ```
 
 ### Check for linting issues
 
 To check for lint errors, run the following command:
 
 ```
-npm run lint
+pnpm run lint
 ```
 
 ### Fix linting issues
 
 To fix linting issues automatically, run the following command:
 
 ```
-npm run lint:fix
+pnpm run lint:fix
 ```

deepfence_frontend/apps/dashboard/src/components/SideNavigation.tsx

@@ -88,7 +88,7 @@ export function SideNavigation({ expanded }: SideNavigationRootProps) {
     <NavigationMenu.Root
       orientation="vertical"
       className={classNames(
-        'overflow-x-hidden overflow-y-auto',
+        'overflow-x-hidden overflow-y-auto shrink-0',
         'bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700',
         'transition-[width]',
         'sticky left-0 top-[64px] scrolling-touch',

deepfence_frontend/apps/dashboard/src/features/dashboard/layouts/DashboardLayout.tsx

@@ -16,7 +16,7 @@ export const DashboardLayout = () => {
       />
       <div className="flex">
         <SideNavigation expanded={sideNavExpanded} />
-        <div className="p-4">
+        <div className="p-6 overflow-x-auto">
           <Outlet />
         </div>
       </div>

deepfence_frontend/apps/dashboard/src/features/registries/pages/Registries.tsx

@@ -0,0 +1,98 @@
+import { IconContext } from 'react-icons';
+import { FaCloud, FaImages, FaTags } from 'react-icons/fa';
+import { HiArrowSmRight } from 'react-icons/hi';
+import { Button, Card } from 'ui-components';
+
+import LogoAzure from '@/assets/logo-azure.svg';
+
+export const Registries = () => {
+  return (
+    <div className="flex gap-6 flex-wrap">
+      {Array.from(Array(10).keys()).map((i) => {
+        return (
+          <Card className="p-4 flex flex-col items-center gap-2 shrink-0" key={i}>
+            <div className="flex items-center justify-between w-full">
+              <h4 className="text-gray-900 text-md dark:text-white">
+                Azure Container Registry
+              </h4>
+              <div className="flex ml-auto mt-2">
+                <Button
+                  size="xs"
+                  color="normal"
+                  className="ml-auto text-blue-600 dark:text-blue-500"
+                >
+                  Go to details
+                  <IconContext.Provider
+                    value={{
+                      className: '',
+                    }}
+                  >
+                    <HiArrowSmRight />
+                  </IconContext.Provider>
+                </Button>
+              </div>
+            </div>
+            <div className="flex items-center gap-6">
+              <div className="px-4 flex items-center border-r border-gray-200 dark:border-gray-700 w-24 h-24">
+                <img height="100%" width="100%" src={LogoAzure} alt="logo" />
+              </div>
+              <div className="flex gap-x-4 justify-center items-center">
+                <div className="flex flex-col justify-center">
+                  <div className="pr-4 flex items-center gap-x-2">
+                    <IconContext.Provider
+                      value={{
+                        className: 'h-6 w-6 text-blue-500 dark:text-blue-400',
+                      }}
+                    >
+                      <FaCloud />
+                    </IconContext.Provider>
+                    <span className="text-[2rem] text-gray-900 dark:text-gray-200 font-light">
+                      23
+                    </span>
+                  </div>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    Total Accounts
+                  </span>
+                </div>
+                <div className="gap-x-2 flex flex-col justify-center">
+                  <div className="pr-4 flex items-center gap-x-2">
+                    <IconContext.Provider
+                      value={{
+                        className: 'h-6 w-6 text-teal-500 dark:text-teal-400',
+                      }}
+                    >
+                      <FaImages />
+                    </IconContext.Provider>
+                    <span className="text-[2rem] text-gray-900 dark:text-gray-200 font-light">
+                      23
+                    </span>
+                  </div>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    Total Images
+                  </span>
+                </div>
+                <div className="gap-x-2 flex flex-col justify-center">
+                  <div className="pr-4 flex items-center gap-x-2">
+                    <IconContext.Provider
+                      value={{
+                        className: 'h-6 w-6 text-indigo-600 dark:text-indigo-400',
+                      }}
+                    >
+                      <FaTags />
+                    </IconContext.Provider>
+                    <span className="text-[2rem] text-gray-900 dark:text-gray-200 font-light">
+                      23
+                    </span>
+                  </div>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    Total Tags
+                  </span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};

deepfence_frontend/apps/dashboard/src/routes/private.tsx

@@ -33,6 +33,7 @@ import {
   startVulnerabilityScanAction,
   VulnerabilityScanConfigure,
 } from '@/features/onboard/pages/VulnerabilityScanConfigure';
+import { Registries } from '@/features/registries/pages/Registries';
 import { CustomRouteObject } from '@/utils/router';
 
 export const privateRoutes: CustomRouteObject[] = [
@@ -149,6 +150,11 @@ export const privateRoutes: CustomRouteObject[] = [
         element: <Dashboard />,
         meta: { title: 'Dashboard' },
       },
+      {
+        path: 'registries',
+        element: <Registries />,
+        meta: { title: 'Registries' },
+      },
     ],
   },
 ];