next: Added ability to link slack via oauth

niemyjski · niemyjski · commit 17f9a1ea595f · 2025-03-27T12:41:54.000-04:00
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts
@@ -6,6 +6,26 @@ import { PersistedState } from 'runed';
 
 import type { Login, TokenResult } from './models';
 
+export interface OAuthLoginOptions extends OAuthPopupOptions {
+    redirectUrl?: string;
+}
+
+export interface OAuthPopupOptions {
+    authUrl: string;
+    clientId: string;
+    extraParams?: Record<string, string>;
+    popupOptions?: { height: number; width: number };
+    provider: SupportedOAuthProviders;
+    scope: string;
+}
+
+export interface OAuthResponseData {
+    code: string;
+    state: string;
+}
+
+export type SupportedOAuthProviders = 'facebook' | 'github' | 'google' | 'live' | 'slack';
+
 const authSerializer = {
     deserialize: (value: null | string): null | string => {
         if (value === '') {
@@ -30,6 +50,7 @@ export const facebookClientId = env.PUBLIC_FACEBOOK_APPID;
 export const gitHubClientId = env.PUBLIC_GITHUB_APPID;
 export const googleClientId = env.PUBLIC_GOOGLE_APPID;
 export const microsoftClientId = env.PUBLIC_MICROSOFT_APPID;
+export const slackClientId = env.PUBLIC_SLACK_APPID;
 export const enableOAuthLogin = facebookClientId || gitHubClientId || googleClientId || microsoftClientId;
 
 export async function facebookLogin(redirectUrl?: string) {
@@ -128,15 +149,43 @@ export async function logout() {
     accessToken.current = null;
 }
 
-async function oauthLogin(options: {
-    authUrl: string;
-    clientId: string;
-    extraParams?: Record<string, string>;
-    popupOptions?: { height: number; width: number };
-    provider: string;
-    redirectUrl?: string;
-    scope: string;
-}) {
+export async function slackOAuthLogin(): Promise<string> {
+    if (!slackClientId) {
+        throw new Error('Slack client id not set');
+    }
+
+    const data = await openOAuthPopup({
+        authUrl: 'https://slack.com/oauth/authorize',
+        clientId: slackClientId,
+        extraParams: {
+            state: encodeURIComponent(Math.random().toString(36).substring(2))
+        },
+        popupOptions: { height: 630, width: 580 },
+        provider: 'slack',
+        scope: 'incoming-webhook'
+    });
+
+    return data.code;
+}
+
+async function oauthLogin(options: OAuthLoginOptions) {
+    const data = await openOAuthPopup(options);
+
+    const client = useFetchClient();
+    const response = await client.postJSON<TokenResult>(`auth/${options.provider}`, {
+        clientId: options.clientId,
+        code: data.code,
+        redirectUri: window.location.origin,
+        state: data.state
+    });
+
+    if (response.ok && response.data?.token) {
+        accessToken.current = response.data.token;
+        await goto(options.redirectUrl || '/');
+    }
+}
+
+async function openOAuthPopup(options: OAuthPopupOptions): Promise<OAuthResponseData> {
     const width = options.popupOptions?.width || 500;
     const height = options.popupOptions?.height || 500;
     const features = {
@@ -158,25 +207,19 @@ async function oauthLogin(options: {
     );
 
     const url = `${options.authUrl}?${new URLSearchParams(params).toString()}`;
-
     const popup = window.open(url, options.provider, stringifyOptions(features));
-    popup?.focus();
-
-    const data = await waitForUrl(popup!, redirectUrl);
-    if (options.extraParams?.state && data.state !== options.extraParams.state) throw new Error('Invalid state');
+    if (!popup) {
+        throw new Error('Failed to open popup window');
+    }
 
-    const client = useFetchClient();
-    const response = await client.postJSON<TokenResult>(`auth/${options.provider}`, {
-        clientId: options.clientId,
-        code: data.code,
-        redirectUri: redirectUrl,
-        state: data.state
-    });
+    popup.focus();
 
-    if (response.ok && response.data?.token) {
-        accessToken.current = response.data.token;
-        await goto(options.redirectUrl || '/');
+    const data = await waitForUrl(popup!, redirectUrl);
+    if (options.extraParams?.state && data.state !== options.extraParams.state) {
+        throw new Error('Invalid state');
     }
+
+    return data;
 }
 
 function stringifyOptions(options: object): string {
@@ -189,7 +232,7 @@ function stringifyOptions(options: object): string {
     return parts.join(',');
 }
 
-function waitForUrl(popup: Window, redirectUri: string): Promise<{ code: string; state: string }> {
+function waitForUrl(popup: Window, redirectUri: string): Promise<OAuthResponseData> {
     return new Promise((resolve, reject) => {
         const polling = setInterval(() => {
             if (!popup || popup.closed || popup.closed === undefined) {
@@ -210,7 +253,7 @@ function waitForUrl(popup: Window, redirectUri: string): Promise<{ code: string;
                         if ('error' in params && (params as { error: string }).error) {
                             reject(new Error((params as { error: string }).error));
                         } else {
-                            resolve(params);
+                            resolve(params as OAuthResponseData);
                         }
                     } else {
                         reject(
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
@@ -27,11 +27,14 @@ export const queryKeys = {
     deleteConfig: (id: string | undefined) => [...queryKeys.id(id), 'delete-config'] as const,
     deleteProject: (ids: string[] | undefined) => [...queryKeys.ids(ids), 'delete'] as const,
     deletePromotedTab: (id: string | undefined) => [...queryKeys.id(id), 'demote-tab'] as const,
+    deleteSlack: (id: string | undefined) => [...queryKeys.id(id), 'delete-slack'] as const,
     id: (id: string | undefined) => [...queryKeys.type, id] as const,
     ids: (ids: string[] | undefined) => [...queryKeys.type, ...(ids ?? [])] as const,
     organization: (id: string | undefined) => [...queryKeys.type, 'organization', id] as const,
     postConfig: (id: string | undefined) => [...queryKeys.id(id), 'post-config'] as const,
+    postProject: () => [...queryKeys.type, 'post-project'] as const,
     postPromotedTab: (id: string | undefined) => [...queryKeys.id(id), 'promote-tab'] as const,
+    postSlack: (id: string | undefined) => [...queryKeys.id(id), 'post-slack'] as const,
     resetData: (id: string | undefined) => [...queryKeys.id(id), 'reset-data'] as const,
     type: ['Project'] as const
 };
@@ -61,6 +64,12 @@ export interface DeletePromotedTabRequest {
     };
 }
 
+export interface DeleteSlackRequest {
+    route: {
+        id: string;
+    };
+}
+
 export interface GetOrganizationProjectsParams {
     filter?: string;
     limit?: number;
@@ -106,6 +115,16 @@ export interface PostPromotedTabParams {
 }
 
 export interface PostPromotedTabRequest {
+    route: {
+        id: string;
+    };
+}
+
+export interface PostSlackParams {
+    code: string;
+}
+
+export interface PostSlackRequest {
     route: {
         id: string | undefined;
     };
@@ -194,6 +213,24 @@ export function deletePromotedTab(request: DeletePromotedTabRequest) {
     }));
 }
 
+export function deleteSlack(request: DeleteSlackRequest) {
+    const queryClient = useQueryClient();
+
+    return createMutation<boolean, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.current && request.route.id,
+        mutationFn: async () => {
+            const client = useFetchClient();
+            const response = await client.delete(`projects/${request.route.id}/slack`);
+
+            return response.ok;
+        },
+        mutationKey: queryKeys.deleteSlack(request.route.id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
+        }
+    }));
+}
+
 export function getOrganizationProjectsQuery(request: GetOrganizationProjectsRequest) {
     const queryClient = useQueryClient();
 
@@ -261,6 +298,7 @@ export function postProject() {
             const response = await client.postJSON<ViewProject>('projects', project);
             return response.data!;
         },
+        mutationKey: queryKeys.postProject(),
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: queryKeys.type });
         }
@@ -315,6 +353,24 @@ export function postPromotedTab(request: PostPromotedTabRequest) {
     }));
 }
 
+export function postSlack(request: PostSlackRequest) {
+    const queryClient = useQueryClient();
+
+    return createMutation<boolean, ProblemDetails, PostSlackParams>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.id,
+        mutationFn: async (params: PostSlackParams) => {
+            const client = useFetchClient();
+            const response = await client.post(`projects/${request.route.id}/slack`, { code: params.code });
+
+            return response.ok;
+        },
+        mutationKey: queryKeys.postSlack(request.route.id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
+        }
+    }));
+}
+
 export function resetData(request: ResetDataRequest) {
     return createMutation<void, ProblemDetails, void>(() => ({
         enabled: () => !!accessToken.current && !!request.route.id,
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/dialogs/remove-slack-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/dialogs/remove-slack-dialog.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    import { buttonVariants } from '$comp/ui/button';
+
+    interface Props {
+        open: boolean;
+        remove: () => Promise<void>;
+    }
+
+    let { open = $bindable(), remove }: Props = $props();
+
+    async function onSubmit() {
+        await remove();
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Remove Slack Integration</AlertDialog.Title>
+            <AlertDialog.Description>
+                Are you sure you want to remove the Slack integration from this project? This will disable all Slack notifications for this project.
+            </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>Remove Slack</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
@@ -5,8 +5,10 @@
     import { Button } from '$comp/ui/button';
     import { Separator } from '$comp/ui/separator';
     import { env } from '$env/dynamic/public';
+    import { slackOAuthLogin } from '$features/auth/index.svelte';
     import { organization } from '$features/organizations/context.svelte';
-    import { getProjectQuery } from '$features/projects/api.svelte';
+    import { deleteSlack, getProjectQuery, postSlack } from '$features/projects/api.svelte';
+    import RemoveSlackDialog from '$features/projects/components/dialogs/remove-slack-dialog.svelte';
     import { DEFAULT_LIMIT } from '$features/shared/api/api.svelte';
     import { postWebhook } from '$features/webhooks/api.svelte';
     import { getProjectWebhooksQuery } from '$features/webhooks/api.svelte';
@@ -23,6 +25,7 @@
     import { toast } from 'svelte-sonner';
 
     let showAddWebhookDialog = $state(false);
+    let showRemoveSlackDialog = $state(false);
     const projectId = page.params.projectId || '';
     const projectResponse = getProjectQuery({
         route: {
@@ -36,6 +39,22 @@
     const hasSlackIntegration = $derived(projectResponse.data?.has_slack_integration ?? false);
     const newWebhook = postWebhook();
 
+    const addSlackMutation = postSlack({
+        route: {
+            get id() {
+                return projectId;
+            }
+        }
+    });
+
+    const removeSlackMutation = deleteSlack({
+        route: {
+            get id() {
+                return projectId;
+            }
+        }
+    });
+
     async function addWebhook(webhook: NewWebhook) {
         try {
             await newWebhook.mutateAsync(webhook);
@@ -46,23 +65,22 @@
     }
 
     async function addSlack() {
-        /*
-
- .confirmDanger(
-                            translateService.T("Are you sure you want to remove slack support?"),
-                            translateService.T("Remove Slack")
-                        )
-
-         function onSuccess(response) {
-                    return Restangular.one("projects", id).post("slack", null, { code: response.code });
-                }
-
-                return $auth.link("slack").then(onSuccess);
-                */
+        try {
+            const code = await slackOAuthLogin();
+            await addSlackMutation.mutateAsync({ code });
+            toast.success('Successfully connected Slack integration.');
+        } catch {
+            toast.error('Error connecting Slack integration. Please try again.');
+        }
     }
 
     async function removeSlack() {
-        //return Restangular.one("projects", id).one("slack").remove();
+        try {
+            await removeSlackMutation.mutateAsync();
+            toast.success('Successfully removed Slack integration.');
+        } catch {
+            toast.error('Error removing Slack integration. Please try again.');
+        }
     }
 
     const DEFAULT_PARAMS = {
@@ -126,7 +144,7 @@
             >
 
             {#if hasSlackIntegration}
-                <Button onclick={removeSlack}><img class="text- mr-2 size-4" alt="Slack" src={Slack} /> Connect Slack</Button>
+                <Button onclick={() => (showRemoveSlackDialog = true)}><img class="text- mr-2 size-4" alt="Slack" src={Slack} /> Remove Slack</Button>
             {:else}
                 <Button onclick={addSlack}><img class="text- mr-2 size-4" alt="Slack" src={Slack} /> Connect Slack</Button>
             {/if}
@@ -159,3 +177,7 @@
 {#if showAddWebhookDialog && organization.current}
     <AddWebhookDialog bind:open={showAddWebhookDialog} save={addWebhook} {projectId} organizationId={organization.current} />
 {/if}
+
+{#if showRemoveSlackDialog}
+    <RemoveSlackDialog bind:open={showRemoveSlackDialog} remove={removeSlack} />
+{/if}
