Feature/786 onboarding wizard

dashboard/components/cloud-account/components/CloudAccountsHeader.tsx

@@ -0,0 +1,26 @@
+import Button from '../../button/Button';
+import PlusIcon from '../../icons/PlusIcon';
+
+type CloudAccountsHeaderProps = {
+  isNotCustomView: boolean;
+};
+
+function CloudAccountsHeader({ isNotCustomView }: CloudAccountsHeaderProps) {
+  return (
+    <div className="flex min-h-[40px] items-center justify-between gap-8">
+      {isNotCustomView && (
+        <>
+          <p className="flex items-center gap-2 text-lg font-medium text-black-900">
+            Your Cloud Accounts
+          </p>
+          <Button type="button" style="secondary" onClick={() => {}}>
+            <PlusIcon className="-ml-2 mr-1 h-6 w-6" />
+            Add Cloud Accounts
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default CloudAccountsHeader;

dashboard/components/cloud-account/components/CloudAccountsLayout.tsx

@@ -0,0 +1,76 @@
+import { NextRouter } from 'next/router';
+import { ReactNode, useContext } from 'react';
+
+import GlobalAppContext from '../../layout/context/GlobalAppContext';
+import Providers, { allProviders } from '../../../utils/providerHelper';
+
+type CloudAccountsLayoutProps = {
+  children: ReactNode;
+  router: NextRouter;
+};
+
+function CloudAccountsLayout({ children, router }: CloudAccountsLayoutProps) {
+  const { displayBanner } = useContext(GlobalAppContext);
+
+  const cloudProviders = Object.values(allProviders);
+
+  return (
+    <>
+      <nav
+        className={`fixed ${
+          displayBanner ? 'mt-[145px]' : 'mt-[73px]'
+        } bottom-0 left-0 top-0 z-20 flex w-[17rem] flex-col gap-4 bg-white p-6`}
+      >
+        <button
+          onClick={() => {
+            router.push(router.pathname);
+          }}
+          className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
+              ${
+                !router.query.view
+                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
+                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+              }
+            `}
+        >
+          <div className={!router.query.view ? 'ml-[-2px]' : ''}>
+            <p className="w-[192px] truncate">All Cloud Providers</p>
+          </div>
+        </button>
+
+        {cloudProviders && cloudProviders.length > 0 && (
+          <div className="-mx-4 -mr-6 flex flex-col gap-4 overflow-auto px-4 pr-6">
+            {cloudProviders.map(view => {
+              const isActive = router.query.view === view;
+              return (
+                <button
+                  key={view}
+                  onClick={() => {
+                    if (isActive) return;
+                    router.push(`?view=${view}`);
+                  }}
+                  className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
+              ${
+                isActive
+                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
+                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+              }
+            `}
+                >
+                  <div className={isActive ? 'ml-[-2px]' : ''}>
+                    <p className="w-[188px] truncate">
+                      {Providers.providerLabel(view)}
+                    </p>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </nav>
+      <main className="ml-[17rem]">{children}</main>
+    </>
+  );
+}
+
+export default CloudAccountsLayout;

dashboard/components/cloud-account/hooks/useCloudAccounts/useCloudAccount.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import useToast from '../../../toast/hooks/useToast';
+import { Provider } from '../../../../utils/providerHelper';
+
+interface CloudAccounts {
+  provider: Provider;
+  name: string;
+  status: {
+    state: 'Connected' | 'Permission Issue' | 'Syncing';
+    message: string;
+  };
+}
+
+function useCloudAccount() {
+  const router = useRouter();
+  const { toast, dismissToast } = useToast();
+
+  const [cloudAccounts, setCloudAccounts] = useState<Array<CloudAccounts>>([
+    {
+      provider: 'aws',
+      name: 'Loudy AWS',
+      status: {
+        state: 'Connected',
+        message: 'Your cloud account is connected.'
+      }
+    },
+    {
+      provider: 'azure',
+      name: 'Loudy Azure',
+      status: {
+        state: 'Permission Issue',
+        message:
+          "We couldn't fetch EC2, S3 and VPC resources.See more details through the cloud account sidepanel."
+      }
+    },
+    {
+      provider: 'gcp',
+      name: 'Loudy GCP',
+      status: {
+        state: 'Syncing',
+        message: 'Your cloud account data is being fetched by Komiser.'
+      }
+    }
+  ]);
+  const isNotCustomView = !router.query.view;
+
+  return {
+    router,
+    toast,
+    dismissToast,
+    cloudAccounts,
+    isNotCustomView
+  };
+}
+
+export default useCloudAccount;

dashboard/components/icons/More2Icon.tsx

@@ -0,0 +1,27 @@
+import { SVGProps } from 'react';
+
+const More2Icon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.33398 3.33333C9.33398 2.6 8.73398 2 8.00065 2C7.26732 2 6.66732 2.6 6.66732 3.33333C6.66732 4.06667 7.26732 4.66667 8.00065 4.66667C8.73398 4.66667 9.33398 4.06667 9.33398 3.33333Z"
+      fill="#0C1717"
+    />
+    <path
+      d="M9.33398 12.6663C9.33398 11.933 8.73398 11.333 8.00065 11.333C7.26732 11.333 6.66732 11.933 6.66732 12.6663C6.66732 13.3997 7.26732 13.9997 8.00065 13.9997C8.73398 13.9997 9.33398 13.3997 9.33398 12.6663Z"
+      fill="#0C1717"
+    />
+    <path
+      d="M9.33398 8.00033C9.33398 7.26699 8.73398 6.66699 8.00065 6.66699C7.26732 6.66699 6.66732 7.26699 6.66732 8.00033C6.66732 8.73366 7.26732 9.33366 8.00065 9.33366C8.73398 9.33366 9.33398 8.73366 9.33398 8.00033Z"
+      fill="#0C1717"
+    />
+  </svg>
+);
+
+export default More2Icon;

dashboard/components/navbar/Navbar.tsx

@@ -4,13 +4,24 @@ import { useRouter } from 'next/router';
 import { useContext } from 'react';
 import GlobalAppContext from '../layout/context/GlobalAppContext';
 
+interface NavItem {
+  label: string;
+  href: string;
+}
+
 function Navbar() {
-  const { displayBanner } = useContext(GlobalAppContext);
+  const { displayBanner, betaFlagOnboardingWizard } =
+    useContext(GlobalAppContext);
   const router = useRouter();
-  const nav = [
+  // TODO: (onboarding-wizard) Remove the betaFlagOnboardingWizard conditional when feature is stable
+  const nav: NavItem[] = [
     { label: 'Dashboard', href: '/dashboard' },
-    { label: 'Inventory', href: '/inventory' }
-  ];
+    { label: 'Inventory', href: '/inventory' },
+    betaFlagOnboardingWizard
+      ? { label: 'Cloud Accounts', href: '/cloud-accounts' }
+      : null
+  ].filter(item => item !== null) as NavItem[];
+
   return (
     <nav
       className={`fixed ${

dashboard/components/onboarding-wizard/PurplinCloud.tsx

@@ -12,7 +12,7 @@ function PurplinCloud({ provider }: { provider: Provider }) {
         width={500}
         height={120}
       />
-      <div className="absolute left-[48%] top-[53%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
+      <div className="absolute top-[53%] left-[48%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
         <Image
           src={ProviderCls.providerImg(provider) as string}
           alt={`${provider} Logo`}

dashboard/components/onboarding-wizard/SelectInput.tsx

@@ -35,8 +35,8 @@ function SelectInput({
   return (
     <div className="relative">
       <div
-        className="pointer-events-none absolute bottom-[1.15rem]
-        right-4 text-komiser-600 transition-all"
+        className="pointer-events-none absolute right-4
+        bottom-[1.15rem] text-komiser-600 transition-all"
       >
         {icon}
       </div>
@@ -61,15 +61,15 @@ function SelectInput({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[96px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white px-3 py-2 shadow-lg">
+          <div className="absolute top-[96px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white py-2 px-3 shadow-lg">
             <div className="flex w-full flex-col gap-1">
               {values.map((item, idx) => {
                 const isActive = value === item;
                 return (
                   <button
                     key={idx}
                     className={classNames(
-                      'flex items-center rounded px-3 py-2 text-left text-sm text-black-400 hover:bg-black-150',
+                      'flex items-center rounded py-2 px-3 text-left text-sm text-black-400 hover:bg-black-150',
                       { 'bg-komiser-150': isActive }
                     )}
                     onClick={() => handleClick(item)}

dashboard/components/select/Select.tsx

@@ -54,7 +54,7 @@ function Select({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[66px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white px-3 py-2 shadow-lg">
+          <div className="absolute top-[66px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white py-2 px-3 shadow-lg">
             <div className="flex w-full flex-col gap-1">
               {values.map((item, idx) => {
                 const isActive = value === item;