Return 404 page for endpoint not found. Use endpoint name on delete c…

…onfirmation and remove the need to type DELETE. (#2224)

src/lib/i18n/locales/en/common.ts

@@ -169,4 +169,5 @@ export const Strings = {
   description: 'Description',
   active: 'Active',
   inactive: 'Inactive',
+  'page-not-found': 'Page Not Found',
 } as const;

src/lib/i18n/locales/en/nexus.ts

@@ -30,7 +30,7 @@ export const Strings = {
   'delete-modal-confirmation':
     'Are you sure you want to delete {{endpoint}}? Any Workflows calling this endpoint will encounter failures.',
   'delete-modal-confirmation-label':
-    'Type “DELETE {{endpoint}}" to delete this endpoint.',
+    'Type “{{endpoint}}" to delete this endpoint.',
   'endpoint-name-hint':
     'Endpoint name must start with A-Z, a-z or _ and can only contain A-Z, a-z, 0-9, or _',
   'access-policy': 'Access Policy',

src/lib/pages/nexus-edit-endpoint.svelte

@@ -72,20 +72,20 @@
   cancelText={translate('common.cancel')}
   on:confirmModal={onDelete}
   on:cancelModal={() => (deleteConfirmationModalOpen = false)}
-  confirmDisabled={confirmDeleteInput !== `DELETE ${endpoint.id}`}
+  confirmDisabled={confirmDeleteInput !== endpoint.spec.name}
 >
   <h3 slot="title">{translate('nexus.delete-modal-title')}</h3>
   <div slot="content" class="flex flex-col gap-4">
     <p>
       {translate('nexus.delete-modal-confirmation', {
-        endpoint: endpoint.id,
+        endpoint: endpoint.spec.name,
       })}
     </p>
     <Input
       id="delete-endpoint"
       required
       label={translate('nexus.delete-modal-confirmation-label', {
-        endpoint: endpoint.id,
+        endpoint: endpoint.spec.name,
       })}
       bind:value={confirmDeleteInput}
     />

src/lib/services/nexus-service.ts

@@ -24,6 +24,7 @@ export const fetchNexusEndpoint = async (
   const route = routeForApi('nexus-endpoint', { endpointId: id });
   const endpoint = await requestFromAPI<{ endpoint: NexusEndpoint }>(route, {
     request,
+    notifyOnError: false,
   });
   return endpoint;
 };

src/routes/(app)/nexus/[id]/+layout.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { LayoutData } from './$types';
+
+  import Error from '$lib/holocene/error.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  export let data: LayoutData;
+
+  $: ({ endpoint } = data);
+</script>
+
+{#if !endpoint}
+  <Error
+    error={{
+      statusCode: 404,
+      message: translate('common.page-not-found'),
+    }}
+    status={404}
+  />
+{:else}
+  <slot />
+{/if}

src/routes/(app)/nexus/[id]/+layout.ts

@@ -3,19 +3,28 @@ import { decodeSingleReadablePayloadWithCodec } from '$lib/utilities/decode-payl
 
 export const load = async ({ params, fetch, parent }) => {
   const { id } = params;
-  const { endpoint } = await fetchNexusEndpoint(id, fetch);
-  const data = await parent();
 
-  let description = '';
-  if (endpoint?.spec?.description?.data) {
-    const decodedDescription = await decodeSingleReadablePayloadWithCodec(
-      endpoint.spec.description,
-      data.settings,
-    );
-    description = decodedDescription;
+  try {
+    const { endpoint } = await fetchNexusEndpoint(id, fetch);
+    const data = await parent();
+
+    let description = '';
+    try {
+      if (endpoint?.spec?.description?.data) {
+        const decodedDescription = await decodeSingleReadablePayloadWithCodec(
+          endpoint.spec.description,
+          data.settings,
+        );
+        description = decodedDescription;
+      }
+    } catch (e) {
+      console.error('Error decoding Nexus Endpoint description:', e);
+    }
+    endpoint.spec.descriptionString = description;
+    return {
+      endpoint,
+    };
+  } catch (e) {
+    console.error('Error loading Nexus Endpoint:', e);
   }
-  endpoint.spec.descriptionString = description;
-  return {
-    endpoint,
-  };
 };