diff --git a/package-lock.json b/package-lock.json index b0d4c4002..286b88c7e 100644 --- a/package-lock.json +++ b/package-lock.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", @@ -9682,9 +9682,9 @@ "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" }, "node_modules/@types/react": { - "version": "18.0.9", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz", - "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==", + "version": "18.2.42", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz", + "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", diff --git a/package.json b/package.json index ae9edfe31..a250a7ca9 100644 --- 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 index 6f4ea677d..62db88957 100644 --- 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 ( -
- {authProvider === "clerk" ? ( - + +
+ {authProvider === "clerk" ? ( + + + + ) : ( - - ) : ( - - )} -
+ )} +
+ ); } diff --git a/src/App.tsx b/src/App.tsx index c761bc53c..4db05f8ea 100644 --- 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 ( - <> - - - - - - - - - - - - } /> - - - - - - - - - - - + + + + + + + + + + + } /> + + + + + + + + + + ); } diff --git a/src/components/Authentication/Clerk/ClerkAuthContextProvider.tsx b/src/components/Authentication/Clerk/ClerkAuthContextProvider.tsx index e9394b17f..0013edb62 100644 --- 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 ; + return ( + + + + ); } // 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 ; + return ( + + + + ); } if (isLoading && !payload) { diff --git a/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx b/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx index f7c005442..7e95a9bf8 100644 --- 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() {
-
+
+ { + 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 index 37e5f0d9b..75dc09d31 100644 --- 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 ( - - {children} - + {children}S ); } diff --git a/src/components/Layout/SearchLayout.tsx b/src/components/Layout/SearchLayout.tsx index 1a0d72d8a..4e8a2d0b8 100644 --- 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({
{title}
-
+
+ {onRefresh && ( )} diff --git a/src/ui/MenuBar/HelpDropdown.tsx b/src/ui/MenuBar/HelpDropdown.tsx new file mode 100644 index 000000000..82226d6f3 --- /dev/null +++ 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 ( + +
+ + + + + +
+ {/* @ts-ignore */} + + + + + Docs + + + + + + ); +}