next: Fixed slack integration

Author: niemyjski

src/Exceptionless.Web/ClientApp/package.json

@@ -69,6 +69,7 @@
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.40.0",
+        "@lucide/svelte": "^0.503.0",
         "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@8c9ce9",
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@8c9ce9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
@@ -79,7 +80,6 @@
         "dompurify": "^3.2.5",
         "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "@lucide/svelte": "^0.503.0",
         "mode-watcher": "^1.0.2",
         "oidc-client-ts": "^3.2.0",
         "pretty-ms": "^9.2.0",

src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts

@@ -130,10 +130,6 @@ export interface PostPromotedTabRequest {
     };
 }
 
-export interface PostSlackParams {
-    code: string;
-}
-
 export interface PostSlackRequest {
     route: {
         id: string | undefined;
@@ -388,17 +384,17 @@ export function postPromotedTab(request: PostPromotedTabRequest) {
 export function postSlack(request: PostSlackRequest) {
     const queryClient = useQueryClient();
 
-    return createMutation<boolean, ProblemDetails, PostSlackParams>(() => ({
+    return createMutation<boolean, ProblemDetails, string>(() => ({
         enabled: () => !!accessToken.current && !!request.route.id,
-        mutationFn: async (params: PostSlackParams) => {
+        mutationFn: async (code: string) => {
             const client = useFetchClient();
-            const response = await client.post(`projects/${request.route.id}/slack`, { code: params.code });
+            const response = await client.post(`projects/${request.route.id}/slack`, undefined, { params: { code } });
 
             return response.ok;
         },
         mutationKey: queryKeys.postSlack(request.route.id),
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.integrationNotificationSettings(request.route.id, 'slack') });
         }
     }));
 }
@@ -414,8 +410,8 @@ export function putProjectIntegrationNotificationSettings(request: PutProjectInt
             return response.ok;
         },
         mutationKey: queryKeys.putIntegrationNotificationSettings(request.route.id, request.route.integration),
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.integrationNotificationSettings(request.route.id, request.route.integration) });
+        onSuccess: (_: boolean, variables: NotificationSettings) => {
+            queryClient.setQueryData(queryKeys.integrationNotificationSettings(request.route.id, request.route.integration), variables);
         }
     }));
 }

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/notification-settings-form.svelte

@@ -58,7 +58,7 @@
 </script>
 
 {#if settings}
-    <form method="POST" use:enhance>
+    <form method="POST" use:enhance class="space-y-2">
         <ErrorMessage message={$message} />
 
         <div class="flex items-center space-x-2">

src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte

@@ -97,7 +97,7 @@
 
         try {
             const code = await slackOAuthLogin();
-            await addSlackMutation.mutateAsync({ code });
+            await addSlackMutation.mutateAsync(code);
             toastId = toast.success('Successfully connected Slack integration.');
         } catch {
             toastId = toast.error('Error connecting Slack integration. Please try again.');
@@ -191,9 +191,9 @@
                 team's Slack channels. Keep your team informed and respond faster to issues without constantly checking the dashboard.</Muted
             >
 
-            <NotificationSettingsForm settings={slackNotificationSettingsQuery.data} save={updateSlackNotificationSettings} />
-
             {#if hasSlackIntegration}
+                <NotificationSettingsForm settings={slackNotificationSettingsQuery.data} save={updateSlackNotificationSettings} />
+
                 <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>