Dashboard UI for WorkOS integration (#41941)

Team- and deployment-level UI for integrated WorkOS provisioning.

GitOrigin-RevId: 52bda44d2f4ec89a8384171cccdf173481b5468b

Author: thomasballinger

npm-packages/@convex-dev/design-system/src/Menu.tsx

@@ -128,18 +128,21 @@ export function MenuLink({
   disabled = false,
   selected = false,
   shortcut,
+  target,
 }: {
   children: React.ReactChild | React.ReactChild[];
   href: string;
   disabled?: boolean;
   selected?: boolean;
   shortcut?: Key[];
+  target?: "_blank";
 }) {
   return (
     <HeadlessMenu.Item disabled={disabled}>
       {({ active, close }) => (
         <a
           href={href}
+          target={target}
           aria-disabled={disabled}
           onClick={disabled ? (e) => e.preventDefault() : () => close()}
           className={classNames(

npm-packages/dashboard-common/src/features/settings/components/integrations/IntegrationTitle.tsx

@@ -16,15 +16,19 @@ export function IntegrationTitle({
       {logo}
 
       <p className="text-sm font-semibold">
-        {integrationKind.charAt(0).toUpperCase() + integrationKind.slice(1)}
+        {integrationKind === "workos"
+          ? "WorkOS"
+          : integrationKind.charAt(0).toUpperCase() + integrationKind.slice(1)}
       </p>
       <Tooltip tip={description}>
         <p className="max-w-fit rounded-sm border p-1 text-xs">
           {integrationKind === "sentry"
             ? "Exception Reporting"
             : integrationKind === "airbyte" || integrationKind === "fivetran"
               ? "Streaming Export"
-              : "Log Stream"}
+              : integrationKind === "workos"
+                ? "Authentication"
+                : "Log Stream"}
         </p>
       </Tooltip>
     </div>

npm-packages/dashboard-common/src/features/settings/components/integrations/Integrations.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from "react";
 import { LocalDevCallout } from "@common/elements/LocalDevCallout";
-import { Callout } from "@ui/Callout";
-import { Button } from "@ui/Button";
 import { Sheet } from "@ui/Sheet";
 import {
+  AuthIntegration,
   EXC_INTEGRATIONS,
   EXPORT_INTEGRATIONS,
   ExceptionReportingIntegration,
@@ -23,14 +22,18 @@ export function Integrations({
   team,
   entitlements,
   integrations,
+  workosData,
 }: {
   team: ReturnType<DeploymentInfo["useCurrentTeam"]>;
   entitlements: ReturnType<DeploymentInfo["useTeamEntitlements"]>;
   integrations: Doc<"_log_sinks">[];
+  workosData: ReturnType<DeploymentInfo["useDeploymentWorkOSEnvironment"]>;
 }) {
-  const { useCurrentDeployment, useHasProjectAdminPermissions } = useContext(
-    DeploymentInfoContext,
-  );
+  const {
+    useCurrentDeployment,
+    useHasProjectAdminPermissions,
+    workosIntegrationEnabled,
+  } = useContext(DeploymentInfoContext);
   const deployment = useCurrentDeployment();
   const hasAdminPermissions = useHasProjectAdminPermissions(
     deployment?.projectId,
@@ -63,6 +66,16 @@ export function Integrations({
     return 0;
   });
 
+  const authIntegrations: AuthIntegration[] = workosIntegrationEnabled
+    ? [
+        {
+          kind: "workos",
+          // Consider this integration to exist if a WorkOS enviroment has been provisioned
+          existing: workosData?.environment ?? null,
+        },
+      ]
+    : [];
+
   const exceptionReportingIntegrations: ExceptionReportingIntegration[] =
     EXC_INTEGRATIONS.map((kind) => {
       const existing = configuredIntegrationsMap[kind];
@@ -78,28 +91,6 @@ export function Integrations({
       return 0;
     });
 
-  // Show the proCallout if either of the entitlements aren't granted. Both are granted
-  // with a pro account.
-  const proCallout =
-    logStreamingEntitlementGranted &&
-    streamingExportEntitlementGranted ? null : (
-      <Callout variant="upsell">
-        <div className="flex w-fit flex-col gap-2">
-          <p className="max-w-prose">
-            Log Stream, Exception Reporting, and Streaming Export integrations
-            are available on the Pro plan.
-          </p>
-          <Button
-            href={`/${team?.slug}/settings/billing`}
-            size="xs"
-            className="w-fit"
-          >
-            Upgrade Now
-          </Button>
-        </div>
-      </Callout>
-    );
-
   const devCallouts = [];
   if (!logStreamingEntitlementGranted) {
     devCallouts.push(
@@ -129,7 +120,6 @@ export function Integrations({
 
   return (
     <div className="flex flex-col gap-4">
-      {proCallout}
       <Sheet className="flex flex-col gap-4">
         <div className="flex flex-col gap-2">
           <h3>Integrations</h3>
@@ -147,20 +137,26 @@ export function Integrations({
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          {[...exceptionReportingIntegrations, ...logIntegrations]
+          {[
+            ...authIntegrations,
+            ...exceptionReportingIntegrations,
+            ...logIntegrations,
+          ]
             .sort((a, b) =>
               a.existing !== null && b.existing === null ? -1 : 0,
             )
             .map((i) => (
               <PanelCard
                 integration={i}
                 unavailableReason={logIntegrationUnvaliableReason}
+                teamSlug={team?.slug}
               />
             ))}
           {EXPORT_INTEGRATIONS.map((i) => (
             <PanelCard
               integration={{ kind: i }}
               unavailableReason={streamingExportIntegrationUnavailableReason}
+              teamSlug={team?.slug}
             />
           ))}
         </div>

npm-packages/dashboard-common/src/features/settings/components/integrations/IntegrationsView.tsx

@@ -7,21 +7,27 @@ import { useContext } from "react";
 import { LoadingTransition } from "@ui/Loading";
 
 export function IntegrationsView() {
-  const { useCurrentTeam, useTeamEntitlements } = useContext(
-    DeploymentInfoContext,
-  );
+  const {
+    useCurrentTeam,
+    useTeamEntitlements,
+    useCurrentDeployment,
+    useDeploymentWorkOSEnvironment,
+  } = useContext(DeploymentInfoContext);
   const team = useCurrentTeam();
+  const deployment = useCurrentDeployment();
   const entitlements = useTeamEntitlements(team?.id);
   const integrations = useQuery(udfs.listConfiguredSinks.default);
+  const workosData = useDeploymentWorkOSEnvironment(deployment?.name);
 
   return (
     <DeploymentSettingsLayout page="integrations">
       <LoadingTransition>
-        {team && entitlements && integrations !== undefined && (
+        {team && entitlements && integrations !== undefined && workosData && (
           <Integrations
             team={team}
             entitlements={entitlements}
             integrations={integrations}
+            workosData={workosData}
           />
         )}
       </LoadingTransition>

npm-packages/dashboard-common/src/features/settings/components/integrations/PanelCard.tsx

@@ -3,13 +3,17 @@ import { ExportIntegrationType } from "system-udfs/convex/_system/frontend/commo
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { Button } from "@ui/Button";
 import { Modal } from "@ui/Modal";
+import { Tooltip } from "@ui/Tooltip";
+import Link from "next/link";
 import {
   IntegrationUnavailableReason,
   LogIntegration,
   ExceptionReportingIntegration,
+  AuthIntegration,
   integrationToLogo,
   STREAMING_EXPORT_DESCRIPTION,
   LOG_STREAMS_DESCRIPTION,
+  AUTHENTICATION_DESCRIPTION,
 } from "@common/lib/integrationHelpers";
 import { useState, ReactNode, useCallback } from "react";
 import { IntegrationTitle } from "./IntegrationTitle";
@@ -19,20 +23,44 @@ import { AxiomConfigurationForm } from "./AxiomConfigurationForm";
 import { DatadogConfigurationForm } from "./DatadogConfigurationForm";
 import { SentryConfigurationForm } from "./SentryConfigurationForm";
 import { WebhookConfigurationForm } from "./WebhookConfigurationForm";
+import { WorkOSConfigurationForm } from "./WorkOSConfigurationForm";
+import { WorkOSIntegrationStatus } from "./WorkOSIntegrationStatus";
+import { WorkOSIntegrationOverflowMenu } from "./WorkOSIntegrationOverflowMenu";
 
 export type PanelCardProps = {
   className?: string;
   integration:
     | LogIntegration
     | ExceptionReportingIntegration
+    | AuthIntegration
     | { kind: ExportIntegrationType };
   unavailableReason: IntegrationUnavailableReason | null;
+  teamSlug?: string;
 };
 
+function ProBadge({ teamSlug }: { teamSlug?: string }) {
+  const badge = (
+    <span className="cursor-pointer rounded-sm bg-util-accent px-1.5 py-0.5 text-xs font-semibold tracking-wider text-white uppercase">
+      Pro
+    </span>
+  );
+
+  if (!teamSlug) {
+    return <Tooltip tip="Only available on the Pro plan">{badge}</Tooltip>;
+  }
+
+  return (
+    <Tooltip tip="Only available on the Pro plan">
+      <Link href={`/${teamSlug}/settings/billing`}>{badge}</Link>
+    </Tooltip>
+  );
+}
+
 export function PanelCard({
   className,
   integration,
   unavailableReason,
+  teamSlug,
 }: PanelCardProps) {
   const classes = classNames(
     "py-3 px-4",
@@ -60,6 +88,28 @@ export function PanelCard({
 
   return (
     <div className={classes}>
+      {integration.kind === "workos" && (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          {modalState.content}
+          <IntegrationTitle
+            logo={logo}
+            integrationKind={integration.kind}
+            description={AUTHENTICATION_DESCRIPTION}
+          />
+          <div className="flex items-center gap-4">
+            <WorkOSIntegrationStatus integration={integration} />
+            <WorkOSIntegrationOverflowMenu
+              integration={integration}
+              onConfigure={() =>
+                setModalState({
+                  showing: true,
+                  content: renderModal(integration, closeModal),
+                })
+              }
+            />
+          </div>
+        </div>
+      )}
       {(integration.kind === "airbyte" || integration.kind === "fivetran") && (
         <div className="flex flex-wrap items-center justify-between gap-2">
           <IntegrationTitle
@@ -68,7 +118,9 @@ export function PanelCard({
             description={STREAMING_EXPORT_DESCRIPTION}
           />
           <div className="ml-auto">
-            {unavailableReason === null && (
+            {unavailableReason === "MissingEntitlement" ? (
+              <ProBadge teamSlug={teamSlug} />
+            ) : (
               <Button
                 href={exportSetupLink(integration.kind)}
                 target="_blank"
@@ -96,14 +148,15 @@ export function PanelCard({
           />
           <div className="flex items-center gap-4">
             <IntegrationStatus integration={integration} />
-            {unavailableReason === null && (
+            {unavailableReason === "MissingEntitlement" ? (
+              <ProBadge teamSlug={teamSlug} />
+            ) : (
               <IntegrationOverflowMenu
                 integration={integration}
                 onConfigure={() =>
                   setModalState({
                     showing: true,
-                    content:
-                      renderModal && renderModal(integration, closeModal),
+                    content: renderModal(integration, closeModal),
                   })
                 }
               />
@@ -129,7 +182,7 @@ function exportSetupLink(kind: ExportIntegrationType): string {
 }
 
 function renderModal(
-  integration: LogIntegration | ExceptionReportingIntegration,
+  integration: LogIntegration | ExceptionReportingIntegration | AuthIntegration,
   closeModal: () => void,
 ) {
   switch (integration.kind) {
@@ -189,6 +242,12 @@ function renderModal(
           </div>
         </Modal>
       );
+    case "workos":
+      return (
+        <Modal onClose={closeModal} title="WorkOS AuthKit Environment">
+          <WorkOSConfigurationForm />
+        </Modal>
+      );
     default: {
       integration satisfies never;
       return null;