tailwarden · ShubhamPalriwala · Jul 26, 2023 · Jul 6, 2023 · May 29, 2023 · May 29, 2023
@@ -0,0 +1,47 @@
+import { SVGProps } from 'react';
+
+const DocumentTextIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z"
+      stroke="#008484"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5"
+      stroke="#008484"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 13H12"
+      stroke="#008484"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 17H16"
+      stroke="#008484"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default DocumentTextIcon;
@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+const Folder2Icon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M22 11.6316V17.6316C22 21.6316 21 22.6316 17 22.6316H7C3 22.6316 2 21.6316 2 17.6316V7.63159C2 3.63159 3 2.63159 7 2.63159H8.5C10 2.63159 10.33 3.07159 10.9 3.83159L12.4 5.83159C12.78 6.33159 13 6.63159 14 6.63159H17C21 6.63159 22 7.63159 22 11.6316Z"
+      stroke="#0C1717"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M8 2.63159H17C19 2.63159 20 3.63159 20 5.63159V7.01159"
+      stroke="#0C1717"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default Folder2Icon;
@@ -0,0 +1,38 @@
+import { SVGProps } from 'react';
+
+const KeyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M19.7897 14.9298C17.7297 16.9798 14.7797 17.6098 12.1897 16.7998L7.47966 21.4998C7.13966 21.8498 6.46966 22.0598 5.98966 21.9898L3.80966 21.6898C3.08966 21.5898 2.41966 20.9098 2.30966 20.1898L2.00966 18.0098C1.93966 17.5298 2.16966 16.8598 2.49966 16.5198L7.19966 11.8198C6.39966 9.21982 7.01966 6.26982 9.07966 4.21982C12.0297 1.26982 16.8197 1.26982 19.7797 4.21982C22.7397 7.16982 22.7397 11.9798 19.7897 14.9298Z"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.88965 17.4902L9.18965 19.7902"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default KeyIcon;
@@ -0,0 +1,30 @@
+import { SVGProps } from 'react';
+
+const RecordCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.97493 19.0426C14.5773 19.0426 18.3083 15.3117 18.3083 10.7093C18.3083 6.10694 14.5773 2.37598 9.97493 2.37598C5.37256 2.37598 1.6416 6.10694 1.6416 10.7093C1.6416 15.3117 5.37256 19.0426 9.97493 19.0426Z"
+      stroke="#95A3A3"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.99961 14.2346C11.9464 14.2346 13.5246 12.6564 13.5246 10.7096C13.5246 8.76277 11.9464 7.18457 9.99961 7.18457C8.05281 7.18457 6.47461 8.76277 6.47461 10.7096C6.47461 12.6564 8.05281 14.2346 9.99961 14.2346Z"
+      stroke="#95A3A3"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default RecordCircleIcon;
@@ -0,0 +1,38 @@
+import { SVGProps } from 'react';
+
+const ShieldSecurityIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.4902 2.23006L5.50016 4.11006C4.35016 4.54006 3.41016 5.90006 3.41016 7.12006V14.5501C3.41016 15.7301 4.19016 17.2801 5.14016 17.9901L9.44016 21.2001C10.8502 22.2601 13.1702 22.2601 14.5802 21.2001L18.8802 17.9901C19.8302 17.2801 20.6102 15.7301 20.6102 14.5501V7.12006C20.6102 5.89006 19.6702 4.53006 18.5202 4.10006L13.5302 2.23006C12.6802 1.92006 11.3202 1.92006 10.4902 2.23006Z"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 12.5V15.5"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default ShieldSecurityIcon;
@@ -0,0 +1,26 @@
+import { SVGProps } from 'react';
+
+const VariableIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.1557 8.07617C15.6037 8.07617 15.929 8.23617 16.1317 8.55617C16.057 8.75884 15.9717 8.97217 15.8757 9.19617C15.7797 9.40951 15.6837 9.61217 15.5877 9.80417H15.3637C15.289 9.51617 15.1984 9.29751 15.0917 9.14817C14.985 8.99884 14.857 8.92417 14.7077 8.92417C14.441 8.92417 14.1637 9.12684 13.8757 9.53217C13.5984 9.93751 13.241 10.6522 12.8037 11.6762C12.985 12.4228 13.1344 13.0042 13.2517 13.4202C13.369 13.8362 13.4704 14.1295 13.5557 14.3002C13.6517 14.4602 13.7477 14.5402 13.8437 14.5402C13.9077 14.5402 13.9824 14.5188 14.0677 14.4762C14.153 14.4228 14.2864 14.3322 14.4677 14.2042C14.6597 14.0655 14.9264 13.8628 15.2677 13.5962L15.4597 13.6122L15.6677 13.9962C15.241 14.4335 14.8837 14.7748 14.5957 15.0202C14.3184 15.2655 14.0784 15.4362 13.8757 15.5322C13.6837 15.6388 13.497 15.6922 13.3157 15.6922C13.177 15.6922 13.0384 15.6068 12.8997 15.4362C12.7717 15.2548 12.633 14.9455 12.4837 14.5082C12.3344 14.0708 12.153 13.4628 11.9397 12.6842C11.4704 13.7508 11.0117 14.5188 10.5637 14.9882C10.1264 15.4575 9.63569 15.6922 9.09169 15.6922C8.83569 15.6922 8.62769 15.6388 8.46769 15.5322C8.29702 15.4255 8.20102 15.2868 8.17969 15.1162C8.23302 14.9242 8.31835 14.6895 8.43569 14.4122C8.54235 14.1348 8.64369 13.9215 8.73969 13.7722H8.96369C8.94235 14.1348 8.97435 14.4228 9.05969 14.6362C9.15569 14.8388 9.29435 14.9402 9.47569 14.9402C9.75302 14.9402 10.0624 14.6895 10.4037 14.1882C10.745 13.6762 11.129 12.9082 11.5557 11.8842C11.3317 11.1055 11.1557 10.5295 11.0277 10.1562C10.9104 9.77217 10.8144 9.52151 10.7397 9.40417C10.665 9.28684 10.585 9.22817 10.4997 9.22817C10.425 9.22817 10.3077 9.28684 10.1477 9.40417C9.98769 9.51084 9.68902 9.76684 9.25169 10.1722L9.04369 10.1562L8.85169 9.77217C9.39569 9.17484 9.85435 8.74284 10.2277 8.47617C10.601 8.20951 10.9264 8.07617 11.2037 8.07617C11.3424 8.07617 11.465 8.15617 11.5717 8.31617C11.689 8.4655 11.817 8.74284 11.9557 9.14817C12.0944 9.55351 12.2597 10.1242 12.4517 10.8602C12.8997 9.87884 13.337 9.16951 13.7637 8.73217C14.1904 8.29484 14.6544 8.07617 15.1557 8.07617Z"
+      fill="#697372"
+    />
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      stroke="#697372"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default VariableIcon;
@@ -37,6 +37,10 @@ function Layout({ children }: LayoutProps) {
     }
   }, [telemetry]);
 
+  const betaFlagOnboardingWizard = true; // To test the onboarding wizard feature, set this beta-flag to true
+  const isOnboarding =
+    betaFlagOnboardingWizard && router.pathname.startsWith('/onboarding');
+
   return (
     <GlobalAppContext.Provider
       value={{
@@ -46,56 +50,83 @@ function Layout({ children }: LayoutProps) {
         data,
         error,
         hasNoAccounts,
-        fetch
+        fetch,
+        betaFlagOnboardingWizard
       }}
     >
-      <Banner githubStars={githubStars} />
-      <Navbar />
-      <main
-        className={`relative ${
-          displayBanner
-            ? 'mt-[145px] min-h-[calc(100vh-145px)]'
-            : 'mt-[73px] min-h-[calc(100vh-73px)]'
-        } bg-black-100 p-6 pb-12 xl:px-8 2xl:px-24`}
-      >
-        {canRender && children}
+      {isOnboarding && <>{children}</>}
+
+      {!isOnboarding && (
+        <>
+          <Banner githubStars={githubStars} />
+          <Navbar />
+          <main
+            className={`relative ${
+              displayBanner
+                ? 'mt-[145px] min-h-[calc(100vh-145px)]'
+                : 'mt-[73px] min-h-[calc(100vh-73px)]'
+            } bg-black-100 p-6 pb-12 xl:px-8 2xl:px-24`}
+          >
+            {canRender && children}
+
+            {hasNoAccounts && betaFlagOnboardingWizard && !isOnboarding && (
+              <EmptyState
+                title="We could not find a cloud account"
+                message="Get Started Onboarding"
+                action={() => {
+                  router.push('/onboarding/choose-cloud');
+                }}
+                actionLabel="Begin Onboarding"
+                secondaryAction={() => {
+                  router.push(
+                    'https://github.com/tailwarden/komiser/issues/new/choose'
+                  );
+                }}
+                secondaryActionLabel="Report an issue"
+                mascotPose="greetings"
+              />
+            )}
 
-        {hasNoAccounts && (
-          <EmptyState
-            title="We could not find a cloud account"
-            message="It seems you have not connected a cloud account to Komiser. Connect one right now so you can start managing it from your dashboard"
-            action={() => {
-              router.push(
-                'https://docs.komiser.io/docs/introduction/getting-started?utm_source=komiser&utm_medium=referral&utm_campaign=static'
-              );
-            }}
-            actionLabel="Guide to connect account"
-            secondaryAction={() => {
-              router.push(
-                'https://github.com/tailwarden/komiser/issues/new/choose'
-              );
-            }}
-            secondaryActionLabel="Report an issue"
-            mascotPose="thinking"
-          />
-        )}
+            {/* This block would be removed when onboarding Wizard is stable leaving the block above */}
+            {hasNoAccounts && !betaFlagOnboardingWizard && (
+              <EmptyState
+                title="We could not find a cloud account"
+                message="It seems you have not connected a cloud account to Komiser. Connect one right now so you can start managing it from your dashboard"
+                action={() => {
+                  router.push(
+                    'https://docs.komiser.io/docs/introduction/getting-started?utm_source=komiser&utm_medium=referral&utm_campaign=static'
+                  );
+                }}
+                actionLabel="Guide to connect account"
+                secondaryAction={() => {
+                  router.push(
+                    'https://github.com/tailwarden/komiser/issues/new/choose'
+                  );
+                }}
+                secondaryActionLabel="Report an issue"
+                mascotPose="thinking"
+              />
+            )}
+            {/* This block would be removed when onboarding Wizard is stable leaving the block above */}
 
-        {error && (
-          <ErrorState
-            title="Network request error"
-            message="There was an error fetching the cloud accounts. Please refer to the logs for more info and try again."
-            action={
-              <Button
-                size="lg"
-                style="secondary"
-                onClick={() => router.reload()}
-              >
-                Refresh the page
-              </Button>
-            }
-          />
-        )}
-      </main>
+            {error && (
+              <ErrorState
+                title="Network request error"
+                message="There was an error fetching the cloud accounts. Please refer to the logs for more info and try again."
+                action={
+                  <Button
+                    size="lg"
+                    style="secondary"
+                    onClick={() => router.reload()}
+                  >
+                    Refresh the page
+                  </Button>
+                }
+              />
+            )}
+          </main>
+        </>
+      )}
     </GlobalAppContext.Provider>
   );
 }

@@ -15,6 +15,7 @@ export type GlobalAppContextProps = {
   error: boolean;
   hasNoAccounts: boolean;
   fetch: () => void;
+  betaFlagOnboardingWizard: boolean;
 };
 
 export const initialContext = {
@@ -24,7 +25,8 @@ export const initialContext = {
   data: undefined,
   error: false,
   hasNoAccounts: false,
-  fetch: () => {}
+  fetch: () => {},
+  betaFlagOnboardingWizard: false
 };
 
 const GlobalAppContext = createContext<GlobalAppContextProps>(initialContext);