From 2307bc207352a7b932e85bbfe2ce82aaccc68a92 Mon Sep 17 00:00:00 2001 From: Ryan Liu Date: Wed, 11 Oct 2023 11:30:09 -0700 Subject: [PATCH 1/2] chore: refactor svix away from getServerSideProps --- .../components/settings/WebhookTabPanel.tsx | 26 ++++++++++++++++++- .../applications/[applicationId]/index.tsx | 11 +------- .../[applicationId]/settings/[...tab].tsx | 8 +++--- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx b/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx index 3f987051d..eddabb424 100644 --- a/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx +++ b/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx @@ -1,8 +1,32 @@ 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 }: { applicationId: string }) { + const [svixDashboardUrl, setSvixDashboardUrl] = useState(null); + + useEffect(() => { + const getDashboardUrl = async () => { + if (process.env.NEXT_PUBLIC_SVIX_API_TOKEN) { + const svix = new Svix(process.env.NEXT_PUBLIC_SVIX_API_TOKEN as string, { + serverUrl: process.env.NEXT_PUBLIC_SVIX_SERVER_URL, + }); + const dashboardUrl = (await svix.authentication.appPortalAccess(applicationId, {})).url; + setSvixDashboardUrl(dashboardUrl); + } + }; + + void getDashboardUrl(); + }, [applicationId]); + + if (!svixDashboardUrl) { + return ; + } + return ( { +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 +75,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,7 +123,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query, props: { session, signedIn: true, - svixDashboardUrl, ...buildClerkProps(req), API_HOST, IS_CLOUD, diff --git a/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx b/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx index a188ed47c..71a34d8dd 100644 --- a/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx +++ b/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 = !!process.env.NEXT_PUBLIC_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={ - {svixDashboardUrl ? ( + {enableWebhooksTab ? ( { @@ -71,9 +71,9 @@ export default function Home(props: SupaglueProps) { onDrawerToggle={handleDrawerToggle} /> - {svixDashboardUrl ? ( + {enableWebhooksTab ? ( - + ) : null} From ac0951ed6654ddb9edadd16b7b191796d5c4c027 Mon Sep 17 00:00:00 2001 From: Ryan Liu Date: Wed, 11 Oct 2023 12:04:02 -0700 Subject: [PATCH 2/2] fix: pass as props --- .../src/components/settings/WebhookTabPanel.tsx | 12 +++++++++--- apps/mgmt-ui/src/pages/api/index.ts | 1 + .../src/pages/applications/[applicationId]/index.tsx | 4 +++- .../[applicationId]/settings/[...tab].tsx | 4 ++-- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx b/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx index eddabb424..e5d2b08e6 100644 --- a/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx +++ b/apps/mgmt-ui/src/components/settings/WebhookTabPanel.tsx @@ -6,13 +6,19 @@ import { AppPortal } from 'svix-react'; import 'svix-react/style.css'; import Spinner from '../Spinner'; -export default function WebhookTabPanel({ applicationId }: { applicationId: string }) { +export default function WebhookTabPanel({ + applicationId, + svixApiToken, +}: { + applicationId: string; + svixApiToken?: string; +}) { const [svixDashboardUrl, setSvixDashboardUrl] = useState(null); useEffect(() => { const getDashboardUrl = async () => { - if (process.env.NEXT_PUBLIC_SVIX_API_TOKEN) { - const svix = new Svix(process.env.NEXT_PUBLIC_SVIX_API_TOKEN as string, { + if (svixApiToken) { + const svix = new Svix(svixApiToken, { serverUrl: process.env.NEXT_PUBLIC_SVIX_SERVER_URL, }); const dashboardUrl = (await svix.authentication.appPortalAccess(applicationId, {})).url; diff --git a/apps/mgmt-ui/src/pages/api/index.ts b/apps/mgmt-ui/src/pages/api/index.ts index 9b1392d8e..c577f1879 100644 --- a/apps/mgmt-ui/src/pages/api/index.ts +++ b/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; diff --git a/apps/mgmt-ui/src/pages/applications/[applicationId]/index.tsx b/apps/mgmt-ui/src/pages/applications/[applicationId]/index.tsx index 91604785e..1a5e2ae77 100644 --- a/apps/mgmt-ui/src/pages/applications/[applicationId]/index.tsx +++ b/apps/mgmt-ui/src/pages/applications/[applicationId]/index.tsx @@ -7,7 +7,7 @@ import { type GetServerSideProps } from 'next'; import type { Session } from 'next-auth'; import { getServerSession } from 'next-auth/next'; import { useState } from 'react'; -import { API_HOST, IS_CLOUD, LEKKO_API_KEY } from '../../api'; +import { API_HOST, IS_CLOUD, LEKKO_API_KEY, SVIX_API_TOKEN } from '../../api'; // // Lekkodefaults @@ -42,6 +42,7 @@ export type PublicEnvProps = { IS_CLOUD: boolean; CLERK_ACCOUNT_URL: string; CLERK_ORGANIZATION_URL: string; + SVIX_API_TOKEN?: string; lekko: { homeCtaButtonConfig: HomeCtaButton; entitiesWhitelistConfig: EntitiesWhitelist; @@ -128,6 +129,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, resolve IS_CLOUD, CLERK_ACCOUNT_URL, CLERK_ORGANIZATION_URL, + SVIX_API_TOKEN, lekko: { homeCtaButtonConfig, entitiesWhitelistConfig, schemasWhitelistConfig }, }, }; diff --git a/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx b/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx index 71a34d8dd..685b709ef 100644 --- a/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx +++ b/apps/mgmt-ui/src/pages/applications/[applicationId]/settings/[...tab].tsx @@ -34,7 +34,7 @@ export default function Home(props: SupaglueProps) { const { tab = [] } = router.query; const [value, setValue] = React.useState(0); const activeApplicationId = useActiveApplicationId(); - const enableWebhooksTab = !!process.env.NEXT_PUBLIC_SVIX_API_TOKEN; + const enableWebhooksTab = !!props.SVIX_API_TOKEN; React.useEffect(() => { const tabIndex = settingsHeaderTabs.findIndex((settingsHeaderTab) => settingsHeaderTab.value === tab[0]); @@ -73,7 +73,7 @@ export default function Home(props: SupaglueProps) { {enableWebhooksTab ? ( - + ) : null}