feat(ui): onboarding experience using Frigade (#2357)

keephq · Oct 31, 2024 · 0b3979b · 0b3979b
1 parent 7e2df16
commit 0b3979b
Show file tree

Hide file tree

Showing 9 changed files with 1,005 additions and 48 deletions.
diff --git a/keep-ui/app/frigade-provider.tsx b/keep-ui/app/frigade-provider.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as Frigade from "@frigade/react";
+import { useSession } from "next-auth/react";
+export const FrigadeProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { data: session } = useSession();
+  return (
+    <Frigade.Provider
+      apiKey="api_public_6BKR7bUv0YZ5dqnjLGeHpRWCHaDWeb5cVobG3A9YkW0gOgafOEBvtJGZgvhp8PGb"
+      userId={
+        session?.user.email === "keep"
+          ? undefined
+          : session?.user.email ?? session?.user.name
+      }
+      theme={{
+        colors: {
+          primary: {
+            surface: "rgb(249 115 22)",
+            border: "rgb(249 115 22)",
+            hover: { surface: "rgb(234 88 12)" },
+          },
+        },
+      }}
+    >
+      {children}
+    </Frigade.Provider>
+  );
+};
diff --git a/keep-ui/app/layout.tsx b/keep-ui/app/layout.tsx
@@ -14,6 +14,7 @@ const mulish = Mulish({
 import { ToastContainer } from "react-toastify";
 import Navbar from "components/navbar/Navbar";
 import { TopologyPollingContextProvider } from "@/app/topology/model/TopologyPollingContext";
+import { FrigadeProvider } from "./frigade-provider";
 
 type RootLayoutProps = {
   children: ReactNode;
@@ -25,13 +26,15 @@ export default async function RootLayout({ children }: RootLayoutProps) {
       <body className="h-screen flex flex-col lg:grid lg:grid-cols-[fit-content(250px)_30px_auto] lg:grid-rows-1 lg:has-[aside[data-minimized='true']]:grid-cols-[0px_30px_auto]">
         <NextAuthProvider>
           <TopologyPollingContextProvider>
-            {/* @ts-ignore-error Server Component */}
-            <Navbar />
-            {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
-            <main className="page-container flex flex-col col-start-3 overflow-auto">
-              <div className="flex-1">{children}</div>
-              <ToastContainer />
-            </main>
+            <FrigadeProvider>
+              {/* @ts-ignore-error Server Component */}
+              <Navbar />
+              {/* https://discord.com/channels/752553802359505017/1068089513253019688/1117731746922893333 */}
+              <main className="page-container flex flex-col col-start-3 overflow-auto">
+                <div className="flex-1">{children}</div>
+                <ToastContainer />
+              </main>
+            </FrigadeProvider>
           </TopologyPollingContextProvider>
         </NextAuthProvider>
 

diff --git a/keep-ui/app/settings/webhook-settings.tsx b/keep-ui/app/settings/webhook-settings.tsx
@@ -23,6 +23,7 @@ import { fetcher } from "utils/fetcher";
 import { toast } from "react-toastify";
 import { v4 as uuidv4 } from "uuid";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import * as Frigade from "@frigade/react";
 
 interface Webhook {
   webhookApi: string;
@@ -181,9 +182,15 @@ req.end();
             <Title>URL: {data.webhookApi}</Title>
             <Subtitle>API Key: {data.apiKey}</Subtitle>
             <div>
-              <Button icon={PlayIcon} color="orange" onClick={tryNow}>
+              <Button
+                icon={PlayIcon}
+                color="orange"
+                onClick={tryNow}
+                id="tooltip-select-0"
+              >
                 Click to create an example Alert
               </Button>
+              <Frigade.Tour flowId="flow_4iLdns11" />
             </div>
           </div>
           <TabGroup

diff --git a/keep-ui/components/navbar/Navbar.tsx b/keep-ui/components/navbar/Navbar.tsx
@@ -25,7 +25,7 @@ export default async function NavbarInner() {
           <NoiseReductionLinks session={session} />
           <DashboardLinks session={session} />
         </div>
-        <UserInfo session={session}/>
+        <UserInfo session={session} />
       </Menu>
       <MinimizeMenuButton />
     </>

diff --git a/keep-ui/components/navbar/Onboarding.tsx b/keep-ui/components/navbar/Onboarding.tsx
@@ -0,0 +1,52 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { Badge, Button, Title } from "@tremor/react";
+import { IoMdClose } from "react-icons/io";
+import * as Frigade from "@frigade/react";
+
+interface OnboardingProps {
+  isOpen: boolean;
+  toggle: () => void;
+  variables?: Record<string, unknown>;
+}
+
+export default function Onboarding({
+  isOpen,
+  toggle,
+  variables,
+}: OnboardingProps) {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog onClose={toggle}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/30 z-20" aria-hidden="true" />
+        </Transition.Child>
+        <Transition.Child
+          as={Fragment}
+          enter="transition ease-in-out duration-300 transform"
+          enterFrom="translate-x-full"
+          enterTo="translate-x-0"
+          leave="transition ease-in-out duration-300 transform"
+          leaveFrom="translate-x-0"
+          leaveTo="translate-x-full"
+        >
+          <Dialog.Panel className="fixed right-0 inset-y-0 w-2/4 bg-white z-30 p-6 overflow-auto flex flex-col">
+            <Frigade.Checklist.Collapsible
+              flowId="flow_FHDz1hit"
+              sequential={true}
+              variables={variables}
+            />
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>
+  );
+}
diff --git a/keep-ui/components/navbar/UserInfo.tsx b/keep-ui/components/navbar/UserInfo.tsx
@@ -6,7 +6,6 @@ import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import { useConfig } from "utils/hooks/useConfig";
 import { AuthenticationType } from "utils/authenticationType";
-import Image from "next/image";
 import Link from "next/link";
 import { LuSlack } from "react-icons/lu";
 import { AiOutlineRight } from "react-icons/ai";
@@ -15,6 +14,9 @@ import DarkModeToggle from "app/dark-mode-toggle";
 import { useFloating } from "@floating-ui/react";
 import { Icon, Subtitle } from "@tremor/react";
 import UserAvatar from "./UserAvatar";
+import * as Frigade from "@frigade/react";
+import { useState } from "react";
+import Onboarding from "./Onboarding";
 
 type UserDropdownProps = {
   session: Session;
@@ -85,28 +87,49 @@ type UserInfoProps = {
 };
 
 export const UserInfo = ({ session }: UserInfoProps) => {
-  return (
-    <ul className="space-y-2 p-2">
-      <li>
-        <LinkWithIcon href="/providers" icon={VscDebugDisconnect}>
-          Providers
-        </LinkWithIcon>
-      </li>
-      <li>
-        {/* TODO: slows everything down. needs to be replaced */}
-        <DarkModeToggle />
-      </li>
-      <li>
-        <LinkWithIcon
-          icon={LuSlack}
-          href="https://slack.keephq.dev/"
-          target="_blank"
-        >
-          Join our Slack
-        </LinkWithIcon>
-      </li>
+  const [isOnboardingComplete, setIsOnboardingComplete] = useState(false);
+  const [isOnboardingOpen, setIsOnboardingOpen] = useState(false);
 
-      {session && <UserDropdown session={session} />}
-    </ul>
+  return (
+    <>
+      <ul className="space-y-2 p-2">
+        <li>
+          <LinkWithIcon href="/providers" icon={VscDebugDisconnect}>
+            Providers
+          </LinkWithIcon>
+        </li>
+        <li>
+          {/* TODO: slows everything down. needs to be replaced */}
+          <DarkModeToggle />
+        </li>
+        <li>
+          <LinkWithIcon
+            icon={LuSlack}
+            href="https://slack.keephq.dev/"
+            target="_blank"
+          >
+            Join our Slack
+          </LinkWithIcon>
+        </li>
+        {session && <UserDropdown session={session} />}
+        {isOnboardingComplete === false && (
+          <li>
+            <Frigade.ProgressBadge
+              flowId="flow_FHDz1hit"
+              onComplete={() => setIsOnboardingComplete(true)}
+              onClick={() => setIsOnboardingOpen(true)}
+              // css={{ backgroundColor: "#F9FAFB" }}
+            />
+            <Onboarding
+              isOpen={isOnboardingOpen}
+              toggle={() => setIsOnboardingOpen(false)}
+              variables={{
+                name: session?.user.name ?? session?.user.email,
+              }}
+            />
+          </li>
+        )}
+      </ul>
+    </>
   );
 };