drift (#2315)

* drift

* add workos stuff

* select it from the list

Author: motatoes

ui/package.json

@@ -46,6 +46,7 @@
     "@tanstack/react-router-devtools": "^1.132.51",
     "@tanstack/react-start": "^1.132.51",
     "@workos-inc/node": "^7.45.0",
+    "@workos-inc/widgets": "^1.4.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

ui/src/api/api.ts

@@ -134,7 +134,7 @@ export async function updateOrgSettings(
       slack_channel_name?: string,
     }
   ) {
-    const response = await fetch(`${process.env.ORCHESTRATOR_ORCHESTRATOR_BACKEND_URL}/api/orgs/settings`, {
+    const response = await fetch(`${process.env.ORCHESTRATOR_BACKEND_URL}/api/orgs/settings`, {
       method: 'PUT',
       headers: {
         'Authorization': `Bearer ${process.env.ORCHESTRATOR_BACKEND_SECRET}`,

ui/src/api/backend.ts

@@ -70,4 +70,29 @@ export async function fetchRepoDetails(repoId: string, organisationId: string, u
       'DIGGER_ORG_SOURCE': 'workos',
     },
   });
-}
+}
+
+
+
+export async function testSlackWebhook(
+  notification_url: string
+) {
+  const response = await fetch(`${process.env.DRIFT_REPORTING_BACKEND_URL}/_internal/send_test_slack_notification_for_url`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${process.env.DRIFT_REPORTING_BACKEND_WEBHOOK_SECRET}`,
+    },
+    body: JSON.stringify({
+      notification_url: notification_url
+    })
+  })
+
+  console.log(response)
+  if (!response.ok) {
+    const text = await response.text()
+    console.log(text)
+    throw new Error('Failed to test Slack webhook')
+  }
+
+  return response.text()
+} 

ui/src/api/helpers.ts

@@ -0,0 +1,15 @@
+function redirectWithFallback(redirectUri: string, headers?: Headers) {
+    const newHeaders = headers ? new Headers(headers) : new Headers();
+    newHeaders.set('Location', redirectUri);
+  
+    return new Response(null, { status: 307, headers: newHeaders });
+  }
+  
+  function errorResponseWithFallback(errorBody: { error: { message: string; description: string } }) {
+    return new Response(JSON.stringify(errorBody), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+export { redirectWithFallback, errorResponseWithFallback };

ui/src/api/server_functions.ts

@@ -1,16 +1,38 @@
 import { createServerFn } from "@tanstack/react-start";
-import { Job, Repo } from './types'
-import { fetchRepos } from "./backend";
-import { fetchProjects, updateProject } from "./api";
+import { Job, OrgSettings, Project, Repo } from './types'
+import { fetchRepos, testSlackWebhook } from "./backend";
+import { fetchProject, fetchProjects, getOrgSettings, updateOrgSettings, updateProject } from "./api";
 
+export const getOrgSettingsFn = createServerFn({method: 'GET'})
+  .inputValidator((data : {userId: string, organisationId: string}) => data)
+  .handler(async ({ data }) => {
+    const settings : any = await getOrgSettings(data.organisationId, data.userId)
+    return settings
+})
 
+export const updateOrgSettingsFn = createServerFn({method: 'POST'})
+  .inputValidator((data : {userId: string, organisationId: string, settings: OrgSettings}) => data)
+  .handler(async ({ data }) => {
+    const settings : any = await updateOrgSettings(data.organisationId, data.userId, data.settings)
+    return settings.result
+})
 
 export const getProjectsFn = createServerFn({method: 'GET'})
-    .inputValidator((data : {userId: string, organisationId: string}) => data)
+    .inputValidator((data : {userId: string, organisationId: string}) => {
+      if (!data.userId || !data.organisationId) {
+        throw new Error('Missing required fields: userId and organisationId are required')
+      }
+      return data
+    })
     .handler(async ({ data }) => {
-    const projects : any = await fetchProjects(data.organisationId, data.userId)
-    return projects.result
-  })
+      try {
+        const projects : any = await fetchProjects(data.organisationId, data.userId)
+        return projects.result || []
+      } catch (error) {
+        console.error('Error in getProjectsFn:', error)
+        return []
+      }
+    })
 
 
 export const updateProjectFn = createServerFn({method: 'POST'})
@@ -34,6 +56,13 @@ export const getReposFn = createServerFn({method: 'GET'})
       return repos
   })
 
+export const getProjectFn = createServerFn({method: 'GET'})
+    .inputValidator((data : {projectId: string, organisationId: string, userId: string}) => data)
+    .handler(async ({ data }) => {
+    const project : any = await fetchProject(data.projectId, data.organisationId, data.userId)
+    return project
+  })
+
 
 export const getRepoDetailsFn = createServerFn({method: 'GET'})
     .inputValidator((data : {repoId: string, organisationId: string, userId: string}) => data)
@@ -68,3 +97,19 @@ export const getRepoDetailsFn = createServerFn({method: 'GET'})
 
       return { repo, allJobs }
     })
+
+export const switchToOrganizationFn = createServerFn({method: 'POST'})
+    .inputValidator((data : { organisationId: string, pathname: string}) => data)
+    .handler(async ({ data }) => {
+      return null
+    })
+
+
+
+export const testSlackWebhookFn = createServerFn({method: 'POST'})
+    .inputValidator((data : {notification_url: string}) => data)
+    .handler(async ({ data }) => {
+    const response : any = await testSlackWebhook(data.notification_url)
+    return response
+  })
+  

ui/src/api/slack_actions.ts

@@ -1,7 +1,3 @@
-"use server";
-
-import { updateOrgSettings } from "./api";
-
 // helpers/slack.ts
 // ──────────────────────────────────────────────────────────────────────────────
 // CONFIG

ui/src/api/types.ts

@@ -9,7 +9,11 @@ export interface Organisation {
     ExternalId: string
   }
 
-
+export interface OrgSettings {
+  drift_webhook_url: string
+  drift_enabled: boolean
+  drift_cron_tab: string
+}
 
 
 export interface Project {
@@ -19,8 +23,10 @@ export interface Project {
     repo_full_name: string
     drift_enabled: boolean
     drift_status: string
+    latest_drift_check: string | null
+    drift_terraform_plan: string | null
   }
-  
+
 
   export interface Repo {
     id: number

ui/src/authkit/serverFunctions.ts

@@ -4,6 +4,8 @@ import { getConfig } from './ssr/config';
 import { terminateSession, withAuth } from './ssr/session';
 import { getWorkOS } from './ssr/workos';
 import type { GetAuthURLOptions, NoUserInfo, UserInfo } from './ssr/interfaces';
+import { Organization } from '@workos-inc/node';
+import { WidgetScope } from 'node_modules/@workos-inc/node/lib/widgets/interfaces/get-token';
 
 export const getAuthorizationUrl = createServerFn({ method: 'GET' })
   .inputValidator((options?: GetAuthURLOptions) => options)
@@ -19,6 +21,32 @@ export const getAuthorizationUrl = createServerFn({ method: 'GET' })
     });
   });
 
+export const getOrganisationDetails = createServerFn({method: 'GET'})
+  .inputValidator((data: {organizationId: string}) => data)
+  .handler(async ({data: {organizationId}}) : Promise<Organization> => {
+  return getWorkOS().organizations.getOrganization(organizationId).then(organization => organization);
+});
+
+
+export const createOrganization = createServerFn({method: 'POST'})
+  .inputValidator((data: {name: string, userId: string}) => data)
+  .handler(async ({data: {name, userId}}) : Promise<Organization> => {
+    try {
+      const organization = await getWorkOS().organizations.createOrganization({ name: name });
+
+      await getWorkOS().userManagement.createOrganizationMembership({
+        organizationId: organization.id,
+        userId: userId,
+        roleSlug: "admin",
+      });
+
+      return organization;
+    } catch (error) {
+      console.error('Error creating organization:', error);
+      throw error;
+    }
+  });
+
 export const getSignInUrl = createServerFn({ method: 'GET' })
   .inputValidator((data?: string) => data)
   .handler(async ({ data: returnPathname }) => {
@@ -44,3 +72,27 @@ export const getAuth = createServerFn({ method: 'GET' }).handler(async (): Promi
   const organisationId = auth.organizationId!;
   return {auth, organisationId};
 });
+
+export const getOrganization = createServerFn({method: 'GET'})
+    .inputValidator((data: {organizationId: string}) => data)
+    .handler(async ({data: {organizationId}}) : Promise<Organization> => {
+  return getWorkOS().organizations.getOrganization(organizationId);
+});
+
+export const ensureOrgExists = createServerFn({method: 'GET'})
+    .inputValidator((data: {organizationId: string}) => data)
+    .handler(async ({data: {organizationId}}) : Promise<Organization> => {
+  return getWorkOS().organizations.getOrganization(organizationId);
+});
+
+
+export const getWidgetsAuthToken = createServerFn({method: 'GET'})
+    .inputValidator((args: {userId: string, organizationId: string, scopes?: WidgetScope[]}) => args)
+    .handler(async ({data: {userId, organizationId, scopes}}) : Promise<string> => {
+  return getWorkOS().widgets.getToken({
+    userId: userId,
+    organizationId: organizationId,
+    scopes: scopes ?? ['widgets:users-table:manage'] as WidgetScope[],
+  });
+})
+

ui/src/components/CreateOrganisationButtonWOS.tsx

@@ -0,0 +1,63 @@
+import { createOrganization } from "@/authkit/serverFunctions";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+
+
+export default function CreateOrganizationBtn({ userId }: { userId: string }) {
+  const [name, setName] = useState("");
+  const [open, setOpen] = useState(false);
+  const { toast } = useToast();
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    
+      try {
+        const organization = await createOrganization({ data: { name: name, userId: userId } });
+        toast({
+          title: "Organization created",
+          description: "The page will now reload to refresh organisations list. To use this new organization, select it from the list.",
+          duration: 5000,
+          variant: "default"
+        });
+        setOpen(false);
+        window.setTimeout(() => {
+          window.location.reload();
+        }, 5000);
+      } catch (error) {
+        console.error("Failed to create organization:", error);
+      }
+    
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} variant="outline" className="w-full">Create New Organization</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Organization</DialogTitle>
+          <DialogDescription>
+            Create a new organization to collaborate with your team.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Organization Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter organization name"
+              required
+            />
+          </div>
+          <Button type="submit">Create</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/src/components/WorkosSettings.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { createFileRoute } from '@tanstack/react-router';
+import { getWidgetsAuthToken } from '@/authkit/serverFunctions';
+
+import {
+  OrganizationSwitcher,
+  UserProfile,
+  UserSecurity,
+  WorkOsWidgets,
+  UsersManagement,
+} from '@workos-inc/widgets';
+
+import '@workos-inc/widgets/styles.css';
+import '@radix-ui/themes/styles.css';
+import CreateOrganizationBtn from './CreateOrganisationButtonWOS';
+
+type LoaderData = {
+  organisationId: string;
+  role: 'admin' | 'member' | string;
+  // You can also supply userId from your auth loader if you want
+  userId: string;
+};
+
+
+
+
+type WorkosSettingsProps = {
+  userId: string;
+  organisationId: string;
+  role: 'admin' | 'member' | string;
+};
+
+export function WorkosSettings({ userId, organisationId, role }: WorkosSettingsProps) {
+  const [authToken, setAuthToken] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    (async () => {
+      try {
+        const authToken = await getWidgetsAuthToken({ data: { userId, organizationId: organisationId } });
+        setAuthToken(authToken);
+        setLoading(false);
+      } catch (e: any) {
+        setError(e?.message ?? 'Failed to get WorkOS token');
+        setLoading(false);
+      }
+    })();
+  }, [userId, organisationId]);
+
+
+  if (loading) return <p>Loading WorkOS…</p>;
+  if (error) return <p className="text-red-600">Error: {error}</p>;
+  if (!authToken) return <p>Could not load WorkOS token.</p>;
+
+  return (
+    <div className="max-w-3xl mx-auto py-6">
+      <WorkOsWidgets>
+        <OrganizationSwitcher
+          authToken={authToken}
+          organizationLabel="My Orgs"
+          switchToOrganization={async ({ organizationId }) => {
+            // Call your own server action if needed
+          }}
+        />
+        <div className="h-4" />
+        {/* Add your org creation UI here */}
+        <CreateOrganizationBtn userId={userId} />
+        <div className="h-4" />
+        <UserProfile authToken={authToken} />
+        <div className="h-4" />
+        <UserSecurity authToken={authToken} />
+        <div className="h-4" />
+        {role === 'admin' && <UsersManagement authToken={authToken} />}
+      </WorkOsWidgets>
+    </div>
+  );
+}