Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): onboarding experience using Frigade #2357

Merged
merged 2 commits into from
Oct 31, 2024
Merged

feat(ui): onboarding experience using Frigade #2357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf7c606
feat(ui): onboarding experience using Frigade
talboren Oct 31, 2024
2eb5b0c
chore(deps): posthog latest
talboren Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions keep-ui/app/frigade-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
17 changes: 10 additions & 7 deletions keep-ui/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>

Expand Down
9 changes: 8 additions & 1 deletion keep-ui/app/settings/webhook-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion keep-ui/components/navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default async function NavbarInner() {
<NoiseReductionLinks session={session} />
<DashboardLinks session={session} />
</div>
<UserInfo session={session}/>
<UserInfo session={session} />
</Menu>
<MinimizeMenuButton />
</>
Expand Down
52 changes: 52 additions & 0 deletions keep-ui/components/navbar/Onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
69 changes: 46 additions & 23 deletions keep-ui/components/navbar/UserInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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>
</>
);
};
Loading
Loading