Added ability to display and remove stack reference links

Author: niemyjski

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

@@ -8,7 +8,6 @@
     import TimeAgo from '$comp/formatters/TimeAgo.svelte';
     import Muted from '$comp/typography/Muted.svelte';
     import { Badge } from '$comp/ui/badge';
-    import { Button } from '$comp/ui/button';
     import * as Card from '$comp/ui/card';
     import * as Tooltip from '$comp/ui/tooltip';
     import { getProjectCountQuery, getStackCountQuery } from '$features/events/api.svelte';
@@ -20,11 +19,10 @@
     import IconCalendar from '~icons/mdi/calendar';
     import IconClock from '~icons/mdi/clock';
     import IconFilter from '~icons/mdi/filter';
-    import IconReference from '~icons/mdi/link';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
     import IconUsers from '~icons/mdi/users';
 
     import StackOptionsDropdownMenu from './StackOptionsDropdownMenu.svelte';
+    import StackReferences from './StackReferences.svelte';
     import StackStatusDropdownMenu from './StackStatusDropdownMenu.svelte';
 
     interface Props {
@@ -164,17 +162,7 @@
                 </div>
             {/if}
 
-            <!-- TODO: Move to stack grid? -->
-            {#if stack.references && stack.references.length > 0}
-                <div class="flex items-center gap-2 text-sm">
-                    <span class="text-blue-500" title="Reference Links"> <IconReference class="size-4" /></span>
-                    {#each stack.references as referenceUrl}
-                        <Button href={referenceUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                            >{referenceUrl} <IconOpenInNew /></Button
-                        >
-                    {/each}
-                </div>
-            {/if}
+            <StackReferences {stack} />
         </Card.Content>
     </Card.Root>
 {/if}

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { A, Small } from '$comp/typography';
+    import Button from '$comp/ui/button/button.svelte';
+    import IconReference from '~icons/mdi/link';
+    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import IconRemove from '~icons/mdi/remove';
+
+    import { postRemoveLink } from '../api.svelte';
+    import { Stack } from '../models';
+    import RemoveStackReferenceDialog from './dialogs/RemoveStackReferenceDialog.svelte';
+
+    interface Props {
+        stack: Stack;
+    }
+
+    let { stack }: Props = $props();
+    let openRemoveStackReferenceDialog = $state<boolean>(false);
+    let referenceToRemove = $state<string>('');
+
+    const removeLink = postRemoveLink({
+        route: {
+            get id() {
+                return stack?.id;
+            }
+        }
+    });
+
+    function onOpenRemoveStackReferenceDialog(reference: string) {
+        referenceToRemove = reference;
+        openRemoveStackReferenceDialog = true;
+    }
+
+    async function removeReference(reference: string) {
+        await removeLink.mutateAsync(reference);
+    }
+</script>
+
+{#if stack.references?.length > 0}
+    <ul class="space-y-2">
+        {#each stack.references as reference (reference)}
+            <li class="flex items-center gap-2">
+                <IconReference />
+                <A href={reference} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2" variant="secondary">
+                    <Small class="truncate">{reference}</Small>
+                    <IconOpenInNew />
+                </A>
+                <Button variant="destructive" size="xs" onclick={() => onOpenRemoveStackReferenceDialog(reference)}>
+                    <IconRemove />
+                </Button>
+            </li>
+        {/each}
+    </ul>
+{/if}
+
+<RemoveStackReferenceDialog bind:open={openRemoveStackReferenceDialog} reference={referenceToRemove} remove={removeReference} />

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { Code } from '$comp/typography';
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    import { buttonVariants } from '$comp/ui/button';
+
+    interface Props {
+        open: boolean;
+        reference: string;
+        remove: (reference: string) => Promise<void>;
+    }
+
+    let { open = $bindable(), reference, remove }: Props = $props();
+
+    async function onSubmit() {
+        await remove(reference);
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Delete Reference</AlertDialog.Title>
+            <AlertDialog.Description>Are you sure you want to delete this reference link?</AlertDialog.Description>
+        </AlertDialog.Header>
+        <Code>{reference}</Code>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>Delete Reference Link</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>