flanksource · moshloop · Dec 20, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@types/intercom-web": "^2.8.21",
     "@types/jest": "^29.2.5",
     "@types/node": "^17.0.36",
-    "@types/react": "18.0.9",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "18.0.5",
     "@types/react-mentions": "^4.1.8",
     "@types/testing-library__jest-dom": "^5.14.5",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,6 +3,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
 import React from "react";
 import useDetermineAuthSystem from "../src/components/Authentication/useDetermineAuthSystem";
+import SetupIntercom from "../src/components/Intercom/SetupIntercom";
 import { queryClient } from "../src/query-client";
 import "./global.css";
 
@@ -11,19 +12,21 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div
-        id="root"
-        className="flex flex-col w-screen h-screen overflow-auto"
-        suppressHydrationWarning
-      >
-        {authProvider === "clerk" ? (
-          <ClerkProvider {...pageProps}>
+      <SetupIntercom>
+        <div
+          id="root"
+          className="flex flex-col w-screen h-screen overflow-auto"
+          suppressHydrationWarning
+        >
+          {authProvider === "clerk" ? (
+            <ClerkProvider {...pageProps}>
+              <Component {...pageProps} />
+            </ClerkProvider>
+          ) : (
             <Component {...pageProps} />
-          </ClerkProvider>
-        ) : (
-          <Component {...pageProps} />
-        )}
-      </div>
+          )}
+        </div>
+      </SetupIntercom>
     </QueryClientProvider>
   );
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -25,7 +25,7 @@ import AuthProviderWrapper from "./components/Authentication/AuthProviderWrapper
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { LogsIcon } from "./components/Icons/LogsIcon";
 import { TopologyIcon } from "./components/Icons/TopologyIcon";
-import SetupIntercom from "./components/Intercom/SetupIntercom";
+import BootIntercom from "./components/Intercom/BootIntercom";
 import JobsHistorySettingsPage from "./components/JobsHistory/JobsHistorySettingsPage";
 import { SidebarLayout } from "./components/Layout";
 import NotificationsPage from "./components/Notifications/NotificationsSettingsPage";
@@ -546,29 +546,26 @@ function SidebarWrapper() {
 
 export function App() {
   return (
-    <>
-      <Head prefix={"Home"} />
-      <BrowserRouter>
-        <Provider>
-          <AuthProviderWrapper>
-            <SetupIntercom>
-              <UserAccessStateContextProvider>
-                <FeatureFlagsContextProvider>
-                  <HealthPageContextProvider>
-                    <ConfigPageContextProvider>
-                      <IncidentPageContextProvider>
-                        <ReactTooltip />
-                        <IncidentManagerRoutes sidebar={<SidebarWrapper />} />
-                        <ReactQueryDevtools initialIsOpen={false} />
-                      </IncidentPageContextProvider>
-                    </ConfigPageContextProvider>
-                  </HealthPageContextProvider>
-                </FeatureFlagsContextProvider>
-              </UserAccessStateContextProvider>
-            </SetupIntercom>
-          </AuthProviderWrapper>
-        </Provider>
-      </BrowserRouter>
-    </>
+    <BrowserRouter>
+      <Provider>
+        <AuthProviderWrapper>
+          <BootIntercom>
+            <UserAccessStateContextProvider>
+              <FeatureFlagsContextProvider>
+                <HealthPageContextProvider>
+                  <ConfigPageContextProvider>
+                    <IncidentPageContextProvider>
+                      <ReactTooltip />
+                      <IncidentManagerRoutes sidebar={<SidebarWrapper />} />
+                      <ReactQueryDevtools initialIsOpen={false} />
+                    </IncidentPageContextProvider>
+                  </ConfigPageContextProvider>
+                </HealthPageContextProvider>
+              </FeatureFlagsContextProvider>
+            </UserAccessStateContextProvider>
+          </BootIntercom>
+        </AuthProviderWrapper>
+      </Provider>
+    </BrowserRouter>
   );
 }
diff --git a/src/components/Authentication/Clerk/ClerkAuthContextProvider.tsx b/src/components/Authentication/Clerk/ClerkAuthContextProvider.tsx
@@ -6,6 +6,7 @@ import { AuthContext } from "../../../context";
 import ErrorPage from "../../Errors/ErrorPage";
 import FullPageSkeletonLoader from "../../SkeletonLoader/FullPageSkeletonLoader";
 import InstanceCreationInProgress from "./InstanceCreationInProgress";
+import BootIntercom from "../../Intercom/BootIntercom";
 
 type AuthProviderWrapperProps = {
   children: React.ReactNode;
@@ -37,7 +38,11 @@ export default function ClerkAuthContextProvider({
   // if the organization backend is not yet created, we need to wait for it to
   // be created before showing the UI
   if (!backendURL) {
-    return <InstanceCreationInProgress />;
+    return (
+      <BootIntercom>
+        <InstanceCreationInProgress />
+      </BootIntercom>
+    );
   }
 
   // if the organization backend returns a 404 or a 5xx error, we need to wait
@@ -47,7 +52,11 @@ export default function ClerkAuthContextProvider({
     (error.response?.status?.toString().startsWith("5") ||
       error?.response?.status === 404)
   ) {
-    return <InstanceCreationInProgress />;
+    return (
+      <BootIntercom>
+        <InstanceCreationInProgress />
+      </BootIntercom>
+    );
   }
 
   if (isLoading && !payload) {

diff --git a/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx b/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx
@@ -1,5 +1,6 @@
 import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
 import { Loading } from "../../Loading";
+import { HelpDropdown } from "../../../ui/MenuBar/HelpDropdown";
 
 export default function InstanceCreationInProgress() {
   return (
@@ -14,9 +15,10 @@ export default function InstanceCreationInProgress() {
         <div className="w-full bg-gray-200 rounded-md h-12"></div>
       </div>
       <div className="flex flex-col flex-1 h-full">
-        <div className="flex flex-row h-auto w-full bg-gray-50 p-3 space-x-4 items-end border-b border-gray-300">
+        <div className="flex flex-row h-auto w-full bg-gray-50 p-3 gap-4 items-end border-b border-gray-300">
           <div className="w-36 bg-gray-200 h-full rounded-md animate-pulse"></div>
           <div className="flex-1"></div>
+          <HelpDropdown />
           <OrganizationSwitcher
             hidePersonal
             createOrganizationMode="modal"

diff --git a/src/components/Intercom/BootIntercom.tsx b/src/components/Intercom/BootIntercom.tsx
@@ -28,7 +28,11 @@ function BootIntercomForClerk({ children }: Props) {
         name: membership.organization.name
       }))
     });
-  }, [boot, clerkUser, user]);
+
+    return () => {
+      shutdown();
+    };
+  }, [boot, clerkUser, shutdown, user]);
 
   // on sign out, shutdown intercom
   useEffect(() => {
@@ -42,7 +46,7 @@ function BootIntercomForClerk({ children }: Props) {
 }
 
 function BootIntercomForKratos({ children }: Props) {
-  const { boot } = useIntercom();
+  const { boot, shutdown } = useIntercom();
   const { user } = useContextUser();
 
   useEffect(() => {
@@ -55,7 +59,11 @@ function BootIntercomForKratos({ children }: Props) {
         imageUrl: user?.avatar
       }
     });
-  }, [boot, user]);
+
+    return () => {
+      shutdown();
+    };
+  }, [boot, shutdown, user]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;

diff --git a/src/components/Intercom/SetupIntercom.tsx b/src/components/Intercom/SetupIntercom.tsx
@@ -1,13 +1,10 @@
 import { IntercomProvider } from "react-use-intercom";
-import BootIntercom from "./BootIntercom";
 
 const INTERCOM_APP_ID = process.env.NEXT_PUBLIC_INTERCOM_APP_ID;
 
 function ProvideIntercom({ children }: Props) {
   return (
-    <IntercomProvider appId={INTERCOM_APP_ID!}>
-      <BootIntercom>{children}</BootIntercom>
-    </IntercomProvider>
+    <IntercomProvider appId={INTERCOM_APP_ID!}>{children}S</IntercomProvider>
   );
 }
 

diff --git a/src/components/Layout/SearchLayout.tsx b/src/components/Layout/SearchLayout.tsx
@@ -1,3 +1,4 @@
+import { HelpDropdown } from "../../ui/MenuBar/HelpDropdown";
 import DashboardErrorBoundary from "../Errors/DashboardErrorBoundary";
 import { RefreshButton } from "../RefreshButton";
 import { UserProfileDropdown } from "../UserProfile/UserProfile";
@@ -26,7 +27,8 @@ export function SearchLayout({
           <div className="flex items-center">
             <div>{title}</div>
           </div>
-          <div className="ml-4 flex items-center md:ml-6">
+          <div className="ml-4 flex gap-2 items-center md:ml-6">
+            <HelpDropdown />
             {onRefresh && (
               <RefreshButton onClick={onRefresh} animate={loading} />
             )}

diff --git a/src/ui/MenuBar/HelpDropdown.tsx b/src/ui/MenuBar/HelpDropdown.tsx
@@ -0,0 +1,41 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import { IoHelpOutline } from "react-icons/io5";
+import { ClickableSvg } from "../../components/ClickableSvg/ClickableSvg";
+
+export function HelpDropdown() {
+  return (
+    <Menu as="div" className="ml-3 relative flex-shrink-0">
+      <div>
+        <Menu.Button className="flex items-center text-sm rounded-full text-gray-400">
+          <ClickableSvg>
+            <IoHelpOutline size={24} />
+          </ClickableSvg>
+        </Menu.Button>
+      </div>
+      {/* @ts-ignore */}
+      <Transition
+        as={Fragment as any}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute bg-white focus:outline-none mt-2 opacity-100 origin-top-right right-0 ring-1 ring-black ring-opacity-5 rounded-md scale-100 shadow-md transform w-64">
+          <Menu.Item>
+            <a
+              href="https://docs.flanksource.com/"
+              target="_blank"
+              className="block py-2 px-4 text-sm text-gray-700 space-x-2  hover:bg-gray-50 hover:text-gray-900 border-0 border-b border-gray-200"
+              rel="noreferrer"
+            >
+              <span>Docs</span>
+            </a>
+          </Menu.Item>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}