WIP Stack actions

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackOptionsDropdownMenu.svelte

@@ -12,6 +12,7 @@
     import { Stack } from '../models';
     import AddStackReferenceDialog from './dialogs/AddStackReferenceDialog.svelte';
     import RemoveStackDialog from './dialogs/RemoveStackDialog.svelte';
+    import RequiresPromotedWebHookDialog from './dialogs/RequiresPromotedWebHookDialog.svelte';
 
     interface Props {
         stack: Stack;
@@ -20,6 +21,7 @@
     let { stack }: Props = $props();
     let openAddStackReferenceDialog = $state<boolean>(false);
     let openRemoveStackDialog = $state<boolean>(false);
+    let openRequiresPromotedWebHookDialog = $state<boolean>(false);
 
     const addStackReference = mutateAddStackReference({
         get id() {
@@ -68,13 +70,16 @@
         }
 
         if (response.status === 501) {
-            toast.error('No promoted web hooks are configured for this project. Please add a promoted web hook to use this feature.');
-            // confirm dialog  .confirm(response.data.message, translateService.T("Manage Integrations"))
-            await goto(`/next/account/manage/notifications?project=${stack.project_id}`);
+            openRequiresPromotedWebHookDialog = true;
             return;
         }
     }
 
+    async function navigateToProjectIntegrations() {
+        // TODO: Verify this works once page is added.
+        await goto(`/next/project/${stack.project_id}/manage/integrations`);
+    }
+
     async function updateCritical() {
         if (stack.occurrences_are_critical) {
             await markStackAsNotCritical.mutateAsync();
@@ -132,3 +137,4 @@
 
 <AddStackReferenceDialog bind:open={openAddStackReferenceDialog} save={addReference} />
 <RemoveStackDialog bind:open={openRemoveStackDialog} {remove} />
+<RequiresPromotedWebHookDialog bind:open={openRequiresPromotedWebHookDialog} navigate={navigateToProjectIntegrations} />

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackStatusDropdownMenu.svelte

@@ -5,6 +5,7 @@
 
     import { mutateStackFixedStatus, mutateStackSnoozedStatus, mutateStackStatus } from '../api.svelte';
     import { Stack, StackStatus } from '../models';
+    import MarkStackDiscardedDialog from './dialogs/MarkStackDiscardedDialog.svelte';
     import MarkStackFixedInVersionDialog from './dialogs/MarkStackFixedInVersionDialog.svelte';
 
     interface Props {
@@ -23,6 +24,7 @@
         { label: 'Discarded', value: StackStatus.Discarded }
     ];
 
+    let openMarkStackDiscardedDialog = $state<boolean>(false);
     let openMarkStackFixedInVersionDialog = $state<boolean>(false);
     let selected = $derived((items.find((item) => item.value === stack?.status) || items[items.length - 1]) as Item);
 
@@ -89,17 +91,7 @@
         if (stack.status === StackStatus.Discarded) {
             return;
         }
-        // if (vm.stack.status === "discarded") {
-        //                 return updateOpen();
-        //             }
-        // translateService.T(
-        //                     "Are you sure you want to all current stack events and discard any future stack events?"
-        //                 ) +
-        //                 " " +
-        //                 translateService.T(
-        //                     "All future occurrences will be discarded and will not count against your event limit."
-        //                 );
-        //changeStatus(vm._stackId, "discarded")
+
         await updateStackStatus.mutateAsync(StackStatus.Discarded);
     }
 </script>
@@ -129,11 +121,13 @@
                 </DropdownMenu.SubContent>
             </DropdownMenu.Sub>
             <DropdownMenu.Item title="Stop sending occurrence notifications for this stack" onclick={() => updateIgnore()}>Ignored</DropdownMenu.Item>
-            <DropdownMenu.Item title="All future occurrences will be discarded and will not count against your event limit" onclick={() => updateDiscard()}
-                >Discarded</DropdownMenu.Item
+            <DropdownMenu.Item
+                title="All future occurrences will be discarded and will not count against your event limit"
+                onclick={() => (openMarkStackDiscardedDialog = true)}>Discarded</DropdownMenu.Item
             >
         </DropdownMenu.Group>
     </DropdownMenu.Content>
 </DropdownMenu.Root>
 
+<MarkStackDiscardedDialog bind:open={openMarkStackDiscardedDialog} discard={updateDiscard} />
 <MarkStackFixedInVersionDialog bind:open={openMarkStackFixedInVersionDialog} save={updateFixed} />

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/MarkStackDiscardedDialog.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { P } from '$comp/typography';
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    import { buttonVariants } from '$comp/ui/button';
+
+    interface Props {
+        discard: () => Promise<void>;
+        open: boolean;
+    }
+
+    let { discard, open = $bindable() }: Props = $props();
+
+    async function onSubmit() {
+        await discard();
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Discard Stack</AlertDialog.Title>
+            <AlertDialog.Description>Are you sure you want to all current stack events and discard any future stack events?</AlertDialog.Description>
+        </AlertDialog.Header>
+        All future occurrences will be discarded and will not count against your event limit.
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>Discard Stack</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/RemoveStackDialog.svelte

@@ -7,10 +7,10 @@
         remove: () => Promise<void>;
     }
 
-    let { open = $bindable(), remove: removeStack }: Props = $props();
+    let { open = $bindable(), remove }: Props = $props();
 
     async function onSubmit() {
-        await removeStack();
+        await remove();
         open = false;
     }
 </script>
@@ -23,7 +23,7 @@
         </AlertDialog.Header>
         <AlertDialog.Footer>
             <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>DELETE STACK</AlertDialog.Action>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>Delete Stack</AlertDialog.Action>
         </AlertDialog.Footer>
     </AlertDialog.Content>
 </AlertDialog.Root>

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/RequiresPromotedWebHookDialog.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    interface Props {
+        navigate: () => Promise<void>;
+        open: boolean;
+    }
+
+    let { navigate, open = $bindable() }: Props = $props();
+
+    async function onSubmit() {
+        await navigate();
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Manage Integrations</AlertDialog.Title>
+            <AlertDialog.Description
+                >No promoted web hooks are configured for this project. Please add a promoted web hook to use this feature.</AlertDialog.Description
+            >
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action onclick={onSubmit}>Manage Integrations</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>