WIP: Manage Project Page

Author: niemyjski

src/Exceptionless.Web/ClientApp/resources.md

@@ -5,7 +5,8 @@
 ### TODO
 
 - Investigate loading data in - export function load({ url, fetch }) {}
-- https://svelte.dev/docs/svelte/class#The-class:-directive migrate from cn / cslx
+- <https://svelte.dev/docs/svelte/class#The-class:-directive> migrate from cn / cslx
+- IsBoolean on model gen.
 
 #### shadcn svelte upgrade
 

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

@@ -1,10 +1,10 @@
+import type { NewProject, UpdateProject, ViewProject } from '$features/projects/models';
 import type { WebSocketMessageValue } from '$features/websockets/models';
 
 import { accessToken } from '$features/auth/index.svelte';
 import { type FetchClientResponse, type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
 import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
-import type { NewProject, ViewProject } from './models';
 
 export async function invalidateProjectQueries(queryClient: QueryClient, message: WebSocketMessageValue<'ProjectChanged'>) {
     const { id, organization_id } = message;
@@ -29,6 +29,7 @@ export const queryKeys = {
     ids: (ids: string[] | undefined) => [...queryKeys.type, ...(ids ?? [])] as const,
     organization: (id: string | undefined) => [...queryKeys.type, 'organization', id] as const,
     postPromotedTab: (id: string | undefined) => [...queryKeys.id(id), 'promote-tab'] as const,
+    resetData: (id: string | undefined) => [...queryKeys.id(id), 'reset-data'] as const,
     type: ['Project'] as const
 };
 
@@ -84,6 +85,18 @@ export interface PostPromotedTabRequest {
         id: string | undefined;
     };
 }
+export interface ResetDataRequest {
+    route: {
+        id: string;
+    };
+}
+
+export interface UpdateProjectRequest {
+    route: {
+        id: string;
+    };
+}
+
 
 export function deleteProject(request: DeleteProjectRequest) {
     const queryClient = useQueryClient();
@@ -220,3 +233,35 @@ export function postPromotedTab(request: PostPromotedTabRequest) {
         }
     }));
 }
+
+export function resetData(request: ResetDataRequest) {
+    return createMutation<void, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.id,
+        mutationFn: async () => {
+            const client = useFetchClient();
+            await client.post(`projects/${request.route.id}/reset-data`, undefined, {
+                expectedStatusCodes: [202]
+            });
+        },
+        mutationKey: queryKeys.resetData(request.route.id)
+    }));
+}
+
+export function updateProject(request: UpdateProjectRequest) {
+    const queryClient = useQueryClient();
+
+    return createMutation<ViewProject, ProblemDetails, UpdateProject>(() => ({
+        mutationFn: async (data: UpdateProject) => {
+            const client = useFetchClient();
+            const response = await client.patchJSON<ViewProject>(`projects/${request.route.id}`, data);
+            return response.data!;
+        },
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
+        },
+        onSuccess: (project: ViewProject) => {
+            queryClient.setQueryData(queryKeys.id(request.route.id), project);
+        }
+    }));
+        }
+

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/dialogs/reset-project-data-dialog.svelte

@@ -0,0 +1,34 @@
+<!-- filepath: /Users/blake/Projects/Exceptionless/Exceptionless/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/confirm-project-delete-AlertDialog.svelte -->
+<script lang="ts">
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+    import { buttonVariants } from '$comp/ui/button';
+
+    interface Props {
+        name: string;
+        open: boolean;
+        reset: () => Promise<void>;
+    }
+
+    let { name, open = $bindable(false), reset }: Props = $props();
+
+    async function onSubmit() {
+        await reset();
+        open = false;
+    }
+</script>
+
+<AlertDialog.Root bind:open>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Reset Project Data</AlertDialog.Title>
+            <AlertDialog.Description>
+                Are you sure you want to reset all project data for "{name}"? This action cannot be undone and will permanently erase all events, stacks, and
+                associated data.
+            </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action class={buttonVariants({ variant: 'destructive' })} onclick={onSubmit}>Reset Project Data</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>

src/Exceptionless.Web/ClientApp/src/lib/features/projects/models.ts

@@ -1 +1,8 @@
 export { NewProject, ViewProject } from '$generated/api';
+
+import { IsBoolean, IsString } from 'class-validator';
+
+export class UpdateProject {
+    @IsBoolean({ message: 'delete_bot_data_enabled is required.' }) delete_bot_data_enabled: boolean = true;
+    @IsString({ message: 'name is required.' }) name!: string;
+}

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/state';
+    import * as Card from '$comp/ui/card';
+    import { Separator } from '$comp/ui/separator';
+    import { getProjectQuery } from '$features/projects/api.svelte';
+    import * as SplitLayout from '$features/shared/components/layouts/split-layout';
+    import { toast } from 'svelte-sonner';
+
+    import SidebarNav from '../../(components)/sidebar-nav.svelte';
+    import { routes } from './routes.svelte';
+
+    let { children } = $props();
+
+    const projectId = page.params.projectId || '';
+    const projectResponse = getProjectQuery({
+        route: {
+            get id() {
+                return projectId;
+            }
+        }
+    });
+
+    $effect(() => {
+        if (projectResponse.isError) {
+            toast.error(`The project "${projectId}" could not be found.`);
+            goto('/next/project/list');
+        }
+    });
+</script>
+
+<Card.Root>
+    <Card.Header>
+        <Card.Title class="text-2xl" level={2}>Settings</Card.Title>
+        <Card.Description>Manage your project settings and integrations.</Card.Description>
+    </Card.Header>
+    <Separator class="mx-6 my-6 w-auto" />
+
+    <Card.Content>
+        <SplitLayout.Root>
+            <SplitLayout.Sidebar>
+                <SidebarNav routes={routes()} />
+            </SplitLayout.Sidebar>
+            <SplitLayout.Content>
+                {@render children()}
+            </SplitLayout.Content>
+        </SplitLayout.Root>
+    </Card.Content>
+</Card.Root>