Fixed some rendering issues with manage project page

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/models/event-data.ts

@@ -1,3 +1,5 @@
+import { logLevels } from '../options';
+
 export interface EnvironmentInfo {
     architecture?: string;
     available_physical_memory?: number;
@@ -129,7 +131,7 @@ export interface UserInfo {
 }
 
 // TODO: Move to a helper.
-export function getLogLevel(level?: LogLevel): LogLevel | null {
+export function getLogLevel(level?: LogLevel | null): LogLevel | null {
     switch (level?.toLowerCase().trim()) {
         case '0':
         case 'false':
@@ -152,6 +154,11 @@ export function getLogLevel(level?: LogLevel): LogLevel | null {
         case 'warn':
             return 'warn';
         default:
-            return null;
+            return level ?? null;
     }
 }
+
+export function getLogLevelDisplayName(level?: LogLevel | null): LogLevel | null {
+    const resolvedLevel = getLogLevel(level);
+    return logLevels.find((l) => l.value === resolvedLevel)?.label ?? level ?? null;
+}

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

@@ -332,6 +332,7 @@ export function updateProject(request: UpdateProjectRequest) {
     const queryClient = useQueryClient();
 
     return createMutation<ViewProject, ProblemDetails, UpdateProject>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.id,
         mutationFn: async (data: UpdateProject) => {
             const client = useFetchClient();
             const response = await client.patchJSON<ViewProject>(`projects/${request.route.id}`, data);

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/project-log-level.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { Skeleton } from '$comp/ui/skeleton';
-    import { getLogLevel, type LogLevel } from '$features/events/models/event-data';
+    import { getLogLevel, getLogLevelDisplayName, type LogLevel } from '$features/events/models/event-data';
     import { logLevels } from '$features/events/options';
     import { deleteProjectConfig, getProjectConfig, postProjectConfig } from '$features/projects/api.svelte';
     import { Button } from '$features/shared/components/ui/button';
@@ -44,19 +44,20 @@
             value: level
         });
 
-        toast.success(`Successfully updated Log level to ${level}`);
+        toast.success(`Successfully updated Log level to ${getLogLevelDisplayName(level)}`);
     }
 
     async function revertToDefaultLogLevel() {
         removeProjectConfig.mutateAsync({
             key: `@@log:${source}`
         });
-        toast.success(`Successfully reverted to default (${defaultLevel}) log level`);
+        toast.success(`Successfully reverted to default (${defaultLevelDisplayName}) log level`);
     }
 
     const configSettings = $derived(projectConfigResponse.data?.settings ?? {});
     const level = $derived(getLogLevel(configSettings[`@@log:${source ?? ''}`]));
     const defaultLevel = $derived(getDefaultLogLevel(configSettings, source ?? ''));
+    const defaultLevelDisplayName = $derived(getLogLevelDisplayName(defaultLevel));
 
     function getDefaultLogLevel(configSettings: Record<string, string>, source: string): LogLevel | null {
         const sourcePrefix = '@@log:';
@@ -131,11 +132,12 @@
     <DropdownMenu.Root>
         <DropdownMenu.Trigger>
             <Button variant="outline">
-                Log Level:
                 {#if level}
-                    {level}
+                    Log Level: {getLogLevelDisplayName(level)}
+                {:else if defaultLevel}
+                    Log Level: {defaultLevelDisplayName} (Default)
                 {:else}
-                    {defaultLevel} (Default)
+                    Select a Default Log Level
                 {/if}
                 <ChevronDown class="size-4" />
             </Button>
@@ -145,17 +147,20 @@
                 <DropdownMenu.GroupHeading>Log Level</DropdownMenu.GroupHeading>
                 <DropdownMenu.Separator />
 
-                {#each logLevels as level (level.value)}
-                    <DropdownMenu.Item
-                        title={`Update Log Level to ${level.label}`}
-                        onclick={() => setLogLevel(level.value)}
-                        disabled={updateProjectConfig.isPending}>{level.label}</DropdownMenu.Item
+                {#each logLevels as lvl (lvl.value)}
+                    <DropdownMenu.CheckboxItem
+                        checked={lvl.value === level}
+                        title={`Update Log Level to ${lvl.label}`}
+                        onclick={() => setLogLevel(lvl.value)}
+                        disabled={updateProjectConfig.isPending}>{lvl.label}</DropdownMenu.CheckboxItem
                     >
                 {/each}
                 {#if level && source !== '*'}
                     <DropdownMenu.Separator />
-                    <DropdownMenu.Item title={`Reset to default (${defaultLevel})`} onclick={revertToDefaultLogLevel} disabled={removeProjectConfig.isPending}
-                        >Default ({defaultLevel})</DropdownMenu.Item
+                    <DropdownMenu.Item
+                        title={`Reset to default (${defaultLevelDisplayName})`}
+                        onclick={revertToDefaultLogLevel}
+                        disabled={removeProjectConfig.isPending}>Default ({defaultLevelDisplayName})</DropdownMenu.Item
                     >
                 {/if}
             </DropdownMenu.Group>

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

@@ -1,8 +1,12 @@
 export { ClientConfiguration, NewProject, ViewProject } from '$generated/api';
 
-import { IsBoolean, IsString } from 'class-validator';
+import { IsBoolean, IsOptional, 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;
+    @IsBoolean({ message: 'delete_bot_data_enabled is required.' })
+    @IsOptional()
+    delete_bot_data_enabled: boolean = true;
+    @IsOptional()
+    @IsString({ message: 'name is required.' })
+    name!: string;
 }

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/manage/+page.svelte

@@ -46,7 +46,7 @@
             toast.dismiss(toastId);
             try {
                 await updateEmailAddress.mutateAsync(form.data);
-                toastId = toast.success('Account updated successfully.');
+                toastId = toast.success('Successfully updated Account');
 
                 // HACK: This is to prevent sveltekit from stealing focus
                 result.type = 'failure';
@@ -73,7 +73,7 @@
             toast.dismiss(toastId);
             try {
                 form.data = await updateUser.mutateAsync(form.data);
-                toastId = toast.success('Account updated successfully.');
+                toastId = toast.success('Successfully updated Account');
 
                 // HACK: This is to prevent sveltekit from stealing focus
                 result.type = 'failure';

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

@@ -93,7 +93,7 @@
                 await update.mutateAsync(form.data);
 
                 toast.dismiss(toastId);
-                toastId = toast.success('Project name updated successfully.');
+                toastId = toast.success('Successfully updated Project name');
             } catch (ex) {
                 const problem = ex as ProblemDetails;
                 applyServerSideErrors(form, problem);