fix: token bug and remove console.logs (keephq#159)

mintlify-onboarding · Jun 4, 2023 · d60ff4c · d60ff4c
1 parent 4868ef2
commit d60ff4c
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 155 deletions.
diff --git a/keep-ui/app/github-post-installation/page.tsx b/keep-ui/app/github-post-installation/page.tsx
@@ -1,34 +1,36 @@
 import { getServerSession } from "../../utils/customAuth";
-import { redirect } from 'next/navigation';
+import { redirect } from "next/navigation";
 import { getApiURL } from "../../utils/apiUrl";
 export default async function GithubPostInstallationPage({
-    searchParams,
+  searchParams,
 }: {
-    searchParams: { installation_id: string, setup_action: string },
+  searchParams: { installation_id: string; setup_action: string };
 }) {
   // https://github.com/nextauthjs/next-auth/pull/5792
-  const accessToken = (await getServerSession({
-    callbacks: { session: ({ token }) => token },
-  }))?.accessToken;
+  const accessToken = (
+    await getServerSession({
+      callbacks: { session: ({ token }) => token },
+    })
+  )?.accessToken;
 
   let installedSuccessfully = false;
   try {
     const apiUrl = getApiURL();
     installedSuccessfully = await fetch(`${apiUrl}/tenant/github`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${accessToken}`
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
       },
-      body: JSON.stringify(searchParams)
+      body: JSON.stringify(searchParams),
     })
-      .then(res => {
+      .then((res) => {
         if (!res.ok) {
           throw new Error(`HTTP error ${res.status}`);
         }
         return res.json();
       })
-      .then(data => data.success);
+      .then((data) => data.success);
 
     // Handle successful installation
     if (installedSuccessfully) {
@@ -44,5 +46,5 @@ export default async function GithubPostInstallationPage({
     }
     return <div>502 backend error</div>;
   }
-  redirect('/');
-};
+  redirect("/");
+}
diff --git a/keep-ui/app/nav.tsx b/keep-ui/app/nav.tsx
@@ -1,7 +1,8 @@
 import Navbar from './navbar';
 import { getServerSession } from '../utils/customAuth';
+import { authOptions } from '../pages/api/auth/[...nextauth]';
 
 export default async function Nav() {
-  const session = await getServerSession();
-  return <Navbar user={session?.user} />;
+  const session = await getServerSession(authOptions);
+  return <Navbar session={session} />;
 }
diff --git a/keep-ui/app/navbar.tsx b/keep-ui/app/navbar.tsx
@@ -3,18 +3,19 @@
 import PHProvider from "./posthog-client";
 import { SessionProvider } from "next-auth/react";
 import NavbarInner from "./navbar-inner";
+import { Session } from "next-auth";
 
 const isSingleTenant = process.env.NEXT_PUBLIC_AUTH_ENABLED == "false";
 
-export default function Navbar({ user }: { user: any }) {
+export default function Navbar({ session }: { session: Session | null }) {
   return isSingleTenant ? (
     <PHProvider>
-      <NavbarInner user={user} />
+      <NavbarInner user={session?.user} />
     </PHProvider>
   ) : (
-    <SessionProvider>
+    <SessionProvider session={session}>
       <PHProvider>
-        <NavbarInner user={user} />
+        <NavbarInner user={session?.user} />
       </PHProvider>
     </SessionProvider>
   );

diff --git a/keep-ui/app/page.tsx b/keep-ui/app/page.tsx
@@ -6,17 +6,15 @@ import ErrorComponent from "./error";
 import PostHogClient from "./posthog-server";
 import { getApiURL } from "../utils/apiUrl";
 import Frill from "./frill";
+import { authOptions } from "../pages/api/auth/[...nextauth]";
 
 export const metadata = {
   title: "Keep Console",
   description: "Alerting and on-call management for modern engineering teams.",
 };
 
 export default async function IndexPage() {
-  // https://github.com/nextauthjs/next-auth/pull/5792
-  const accessToken = await getServerSession({
-    callbacks: { session: ({ token }) => token },
-  });
+  const accessToken = await getServerSession(authOptions);
 
   let isGitHubPluginInstalled = false;
   try {

diff --git a/keep-ui/app/providers/page.tsx b/keep-ui/app/providers/page.tsx
@@ -2,23 +2,17 @@ import { Card, Title, Text } from "@tremor/react";
 import ProvidersTable from "./table";
 import { getServerSession } from "../../utils/customAuth";
 import { getApiURL } from "../../utils/apiUrl";
+import { authOptions } from "../../pages/api/auth/[...nextauth]";
 
 export default async function ProvidersPage() {
-  console.log("Rendering dashboard page");
-  // get the session so we will be able to pass it to the SessionProvider
-  const session = await getServerSession();
+  const session = await getServerSession(authOptions);
   // force get session to get a token
-  const accessToken = (
-    await getServerSession({
-      callbacks: { session: ({ token }) => token },
-    })
-  )?.accessToken;
-
-  let installed_providers = [];
+  const accessToken = session?.accessToken;
+  let installedProviders = [];
   // Now let's fetch the providers status from the backend
   try {
     const apiUrl = getApiURL();
-    installed_providers = await fetch(`${apiUrl}/providers`, {
+    installedProviders = await fetch(`${apiUrl}/providers`, {
       headers: {
         Authorization: `Bearer ${accessToken}`,
       },
@@ -31,13 +25,12 @@ export default async function ProvidersPage() {
     return <div>502 backend error</div>;
   }
 
-  console.log("Dashboard | session:", session);
   return (
     <main className="p-4 md:p-10 mx-auto max-w-7xl">
       <Title>Providers</Title>
       <Text>Connect providers to Keep to make your alerts better.</Text>
       <Card className="mt-6">
-        <ProvidersTable installed_providers={installed_providers} />
+        <ProvidersTable session={session} installedProviders={installedProviders} />
       </Card>
     </main>
   );

diff --git a/keep-ui/app/providers/provider-form.tsx b/keep-ui/app/providers/provider-form.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { useSession } from "../../utils/customAuth";
 import { Provider } from "./provider-row";
 import { getApiURL } from "../../utils/apiUrl";
-import Alert from './alert';
+import Alert from "./alert";
 import "./provider-form.css";
 
 type ProviderFormProps = {
@@ -25,16 +25,11 @@ const ProviderForm = ({
   });
   const [formErrors, setFormErrors] = useState({});
   const [testResult, setTestResult] = useState("");
-  const [connectResult, setConnectResult] = useState("");
   const [alertData, setAlertData] = useState([]);
   const [isConnected, setIsConnected] = useState(false);
 
   const { data: session, status, update } = useSession();
-  // @ts-ignore
-  if (!session?.accessToken) {
-    console.log("No session access token, refreshing session from the server");
-    update();
-  }
+
   // update();
   // TODO - fix the typing here
   // @ts-ignore
@@ -121,9 +116,7 @@ const ProviderForm = ({
 
   const handleTestClick = async () => {
     try {
-      const data = await validateAndSubmit(
-        `${getApiURL()}/providers/test`
-      );
+      const data = await validateAndSubmit(`${getApiURL()}/providers/test`);
       if (data && data.alerts) {
         console.log("Test succeessful");
         setTestResult("success");
@@ -132,7 +125,7 @@ const ProviderForm = ({
         setTestResult("error");
       }
     } catch (error) {
-      setFormErrors({"error": error.toString()})
+      setFormErrors({ error: error.toString() });
       console.error("Test failed:", error);
     }
   };
@@ -141,13 +134,13 @@ const ProviderForm = ({
     validateAndSubmit(`${getApiURL()}/providers/install`)
       .then((data) => {
         console.log("Connect Result:", data);
-        setConnectResult(data.result);
         setIsConnected(true);
       })
       .catch((error) => {
         console.error("Connect failed:", error);
       });
   };
+
   console.log("ProviderForm component loaded");
 
   return (
@@ -156,7 +149,8 @@ const ProviderForm = ({
         {provider.authentication.map((method) => (
           <div className="form-group" key={method.name}>
             <label htmlFor={method.name}>
-              {method.desc}{method.required !== false ? "" : " (optional)"}:
+              {method.desc}
+              {method.required !== false ? "" : " (optional)"}:
             </label>
             <input
               type={method.type}
@@ -189,7 +183,9 @@ const ProviderForm = ({
         </div>
       </form>
       {formErrors.error && (
-        <div className="error-message">Error while testing the provider: &quot;{formErrors.error}&quot;</div>
+        <div className="error-message">
+          Error while testing the provider: &quot;{formErrors.error}&quot;
+        </div>
       )}
       {testResult === "success" && (
         <div>
@@ -205,7 +201,7 @@ const ProviderForm = ({
             </thead>
             <tbody>
               {alertData.map((alert) => (
-                <tr key={alert.id}>
+                <tr key={alert.id || Math.random()}>
                   <Alert alert={alert} provider={formValues.provider_id} />
                 </tr>
               ))}

diff --git a/keep-ui/app/providers/provider-row.tsx b/keep-ui/app/providers/provider-row.tsx
@@ -1,9 +1,8 @@
-// @ts-nocheck
-import React, { useState, useEffect } from 'react';
-import { TableRow, TableCell } from '@tremor/react';
-import Image from 'next/image';
-import './providers.css';
-import ProviderForm from './provider-form';
+import React, { useState, useEffect } from "react";
+import { TableRow, TableCell } from "@tremor/react";
+import Image from "next/image";
+import "./providers.css";
+import ProviderForm from "./provider-form";
 
 type AuthenticationMethod = {
   name: string;
@@ -12,6 +11,7 @@ type AuthenticationMethod = {
   placeholder?: string;
   validation?: (value: string) => boolean;
   required?: boolean;
+  value?: string;
 };
 
 export type Provider = {
@@ -35,18 +35,21 @@ const ProviderRow = ({ provider }: ProviderRowProps) => {
     setExpanded(!expanded);
   };
 
-  const onFormChange = (formValues) => {
+  const onFormChange = (formValues: any) => {
     setFormData(formValues);
   };
 
   // Update formData with authentication data
   useEffect(() => {
     if (provider.connected) {
-      const authenticationData = provider.authentication.reduce((data, method) => {
-        const { name } = method;
-        const value = method.value || '';
-        return { ...data, [name]: value };
-      }, {});
+      const authenticationData = provider.authentication.reduce(
+        (data, method) => {
+          const { name } = method;
+          const value = method.value || "";
+          return { ...data, [name]: value };
+        },
+        {}
+      );
       setFormData(authenticationData);
     }
   }, [provider.connected, provider.authentication]);
@@ -55,22 +58,39 @@ const ProviderRow = ({ provider }: ProviderRowProps) => {
 
   return (
     <>
-      <TableRow className={`table-row ${provider.connected ? 'connected' : ''}`}>
+      <TableRow
+        className={`table-row ${provider.connected ? "connected" : ""} ${
+          isComingSoonProvider ? "coming-soon" : ""
+        }`}
+      >
         <TableCell className="icon-cell">
           <div className="icon-wrapper">
-            <Image src={provider.icon} alt={provider.name} width={150} height={150} />
+            <Image
+              src={provider.icon}
+              alt={provider.name}
+              width={150}
+              height={150}
+            />
           </div>
           <div className="provider-info">
             <div className="provider-name">{provider.name}</div>
           </div>
         </TableCell>
         <TableCell className="expand-cell">
           {isComingSoonProvider ? (
-            <div className="coming-soon-label">🚧 Coming Soon 🚧</div>
+            <div className="coming-soon-label">Coming Soon 🚧</div>
           ) : (
             <div className="expand-button-container">
-              <button type="button" className="expand-button" onClick={handleExpand}>
-                {expanded ? 'Collapse' : provider.connected ? 'Disconnect' : 'Connect'}
+              <button
+                type="button"
+                className="expand-button"
+                onClick={handleExpand}
+              >
+                {expanded
+                  ? "Collapse"
+                  : provider.connected
+                  ? "Expand"
+                  : "Connect"}
               </button>
             </div>
           )}
@@ -80,7 +100,11 @@ const ProviderRow = ({ provider }: ProviderRowProps) => {
         <TableRow>
           <TableCell colSpan={2}>
             <div className="expanded-content">
-              <ProviderForm provider={provider} formData={formData} onFormChange={onFormChange} />
+              <ProviderForm
+                provider={provider}
+                formData={formData}
+                onFormChange={onFormChange}
+              />
             </div>
           </TableCell>
         </TableRow>

diff --git a/keep-ui/app/providers/providers.css b/keep-ui/app/providers/providers.css
@@ -65,6 +65,10 @@
     background-color: lightgreen;
   }
 
+  .coming-soon {
+    opacity: 0.6;
+  }
+
   .coming-soon-label {
     display: inline-block;
     background-color: #f27e12;