TemplateEditor: Handle fetch error (#8260)

* TemplateEditor: Handle fetch error

- Handle error condition where template cannot be loaded from server

* Remove test code

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -9,7 +9,11 @@ import {
   Tabs
 } from '@mantine/core';
 import { openConfirmModal } from '@mantine/modals';
-import { notifications, showNotification } from '@mantine/notifications';
+import {
+  hideNotification,
+  notifications,
+  showNotification
+} from '@mantine/notifications';
 import {
   IconAlertTriangle,
   IconDeviceFloppy,
@@ -126,10 +130,25 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
 
     api.get(templateUrl).then((response: any) => {
       if (response.data?.template) {
-        api.get(response.data.template).then((res) => {
+        api
-          codeRef.current = res.data;
+          .get(response.data.template)
-          loadCodeToEditor(res.data);
+          .then((res) => {
-        });
+            codeRef.current = res.data;
+            loadCodeToEditor(res.data);
+          })
+          .catch(() => {
+            console.error(
+              `ERR: Could not load template from ${response.data.template}`
+            );
+            codeRef.current = undefined;
+            hideNotification('template-load-error');
+            showNotification({
+              id: 'template-load-error',
+              title: t`Error`,
+              message: t`Could not load the template from the server.`,
+              color: 'red'
+            });
+          });
       }
     });
   }, [templateUrl]);