chore: refactor svix away from getServerSideProps

apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx

@@ -1,8 +1,38 @@
 import { Box } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Svix } from 'svix';
 import { AppPortal } from 'svix-react';
 
 import 'svix-react/style.css';
-export default function WebhookTabPanel({ svixDashboardUrl }: { svixDashboardUrl: string }) {
+import Spinner from '../Spinner';
+
+export default function WebhookTabPanel({
+  applicationId,
+  svixApiToken,
+}: {
+  applicationId: string;
+  svixApiToken?: string;
+}) {
+  const [svixDashboardUrl, setSvixDashboardUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getDashboardUrl = async () => {
+      if (svixApiToken) {
+        const svix = new Svix(svixApiToken, {
+          serverUrl: process.env.NEXT_PUBLIC_SVIX_SERVER_URL,
+        });
+        const dashboardUrl = (await svix.authentication.appPortalAccess(applicationId, {})).url;
+        setSvixDashboardUrl(dashboardUrl);
+      }
+    };
+
+    void getDashboardUrl();
+  }, [applicationId]);
+
+  if (!svixDashboardUrl) {
+    return <Spinner />;
+  }
+
   return (
     <Box
       sx={{

apps/mgmt-ui/src/pages/api/index.ts

@@ -4,4 +4,5 @@ export const ORGANIZATION_ID = 'e7070cc8-36e7-43e2-81fc-ad57713cf2d3';
 export const SG_INTERNAL_TOKEN = process.env.SUPAGLUE_INTERNAL_TOKEN!;
 export const IS_CLOUD = process.env.NEXT_PUBLIC_IS_CLOUD === 'true' || process.env.NEXT_PUBLIC_IS_CLOUD === '1';
 export const MUI_LICENSE_KEY = process.env.NEXT_PUBLIC_MUI_LICENSE_KEY;
+export const SVIX_API_TOKEN = process.env.SVIX_API_TOKEN!;
 export const { LEKKO_API_KEY } = process.env;

apps/mgmt-ui/src/pages/applications/[applicationId]/index.tsx

@@ -7,8 +7,7 @@ import { type GetServerSideProps } from 'next';
 import type { Session } from 'next-auth';
 import { getServerSession } from 'next-auth/next';
 import { useState } from 'react';
-import { Svix } from 'svix';
-import { API_HOST, IS_CLOUD, LEKKO_API_KEY } from '../../api';
+import { API_HOST, IS_CLOUD, LEKKO_API_KEY, SVIX_API_TOKEN } from '../../api';
 
 //
 // Lekkodefaults
@@ -43,16 +42,16 @@ export type PublicEnvProps = {
   IS_CLOUD: boolean;
   CLERK_ACCOUNT_URL: string;
   CLERK_ORGANIZATION_URL: string;
+  SVIX_API_TOKEN?: string;
   lekko: {
     homeCtaButtonConfig: HomeCtaButton;
     entitiesWhitelistConfig: EntitiesWhitelist;
     schemasWhitelistConfig: SchemasWhitelist;
   };
 };
 
-export const getServerSideProps: GetServerSideProps = async ({ req, res, query, resolvedUrl }) => {
+export const getServerSideProps: GetServerSideProps = async ({ req, res, resolvedUrl }) => {
   let session: Session | null = null;
-  const applicationId = query.applicationId as string;
 
   if (!IS_CLOUD) {
     session = await getServerSession(req, res, authOptions);
@@ -77,12 +76,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query,
     }
   }
 
-  let svixDashboardUrl: string | null = null;
-  if (process.env.SVIX_API_TOKEN) {
-    const svix = new Svix(process.env.SVIX_API_TOKEN, { serverUrl: process.env.SVIX_SERVER_URL });
-    svixDashboardUrl = (await svix.authentication.appPortalAccess(applicationId, {})).url;
-  }
-
   // Lekko defaults
   let homeCtaButtonConfig: HomeCtaButton = {
     buttonMessage: 'Quickstart Guide',
@@ -131,12 +124,12 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query,
     props: {
       session,
       signedIn: true,
-      svixDashboardUrl,
       ...buildClerkProps(req),
       API_HOST,
       IS_CLOUD,
       CLERK_ACCOUNT_URL,
       CLERK_ORGANIZATION_URL,
+      SVIX_API_TOKEN,
       lekko: { homeCtaButtonConfig, entitiesWhitelistConfig, schemasWhitelistConfig },
     },
   };

apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx

@@ -33,8 +33,8 @@ export default function Home(props: SupaglueProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
   const { tab = [] } = router.query;
   const [value, setValue] = React.useState(0);
-  const { svixDashboardUrl } = props;
   const activeApplicationId = useActiveApplicationId();
+  const enableWebhooksTab = !!props.SVIX_API_TOKEN;
 
   React.useEffect(() => {
     const tabIndex = settingsHeaderTabs.findIndex((settingsHeaderTab) => settingsHeaderTab.value === tab[0]);
@@ -51,7 +51,7 @@ export default function Home(props: SupaglueProps) {
         {...props}
         tabs={
           <Tabs value={value} textColor="inherit">
-            {svixDashboardUrl ? (
+            {enableWebhooksTab ? (
               <Tab
                 label="Webhooks"
                 onClick={async () => {
@@ -71,9 +71,9 @@ export default function Home(props: SupaglueProps) {
         onDrawerToggle={handleDrawerToggle}
       />
       <TabContainer>
-        {svixDashboardUrl ? (
+        {enableWebhooksTab ? (
           <TabPanel value={value} index={0} className="w-full">
-            <WebhookTabPanel svixDashboardUrl={svixDashboardUrl} />
+            <WebhookTabPanel applicationId={activeApplicationId} svixApiToken={props.SVIX_API_TOKEN} />
           </TabPanel>
         ) : null}
         <TabPanel value={value} index={1} className="w-full">