From 950a93ddebcbb45720658d676adf7199af55f232 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Grabarz?= <frizi09@gmail.com>
Date: Thu, 31 Oct 2024 08:48:48 +0100
Subject: [PATCH] Display error message when viewed graph doesn't exist.
 (#11452)

Fixes #11211

<img width="258" alt="image" src="https://github.com/user-attachments/assets/7adea4f6-774a-49ac-8c86-5e785df2acff">

When the "go back" button is clicked, the user is sent back to the `main` function graph. The breadcrumbs are also present on that view and can be used for navigation.

Current design of the error state is improvised, likely to be changed once we have some design guidance about it.
---
 .gitattributes                                |  1 +
 CHANGELOG.md                                  |  5 ++-
 .../project-view/components/GraphEditor.vue   | 45 ++++++++++---------
 .../components/GraphMissingView.vue           | 37 +++++++++++++++
 .../components/StandaloneButton.vue           | 26 +++++++++++
 .../src/project-view/components/SvgButton.vue |  4 +-
 6 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 app/gui/src/project-view/components/GraphMissingView.vue
 create mode 100644 app/gui/src/project-view/components/StandaloneButton.vue

diff --git a/.gitattributes b/.gitattributes
index 2fa7c2b2b811..e5caeaf619cc 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,3 @@
 *.enso text eol=lf
 *.png binary
+CHANGELOG.md merge=union
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 543ee83c26e5..1671561c1380 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@
   re-opening][11435]
 - [Added application version to the title bar.][11446]
 - [Added "open grouped components" action to the context menu.][11447]
+- [Added an error message screen displayed when viewing a deleted
+  component.][11452]
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
@@ -25,10 +27,11 @@
 [11383]: https://github.com/enso-org/enso/pull/11383
 [11388]: https://github.com/enso-org/enso/pull/11388
 [11398]: https://github.com/enso-org/enso/pull/11398
-[11398]: https://github.com/enso-org/enso/pull/11433
+[11433]: https://github.com/enso-org/enso/pull/11433
 [11435]: https://github.com/enso-org/enso/pull/11435
 [11446]: https://github.com/enso-org/enso/pull/11446
 [11447]: https://github.com/enso-org/enso/pull/11447
+[11452]: https://github.com/enso-org/enso/pull/11452
 
 #### Enso Standard Library
 
diff --git a/app/gui/src/project-view/components/GraphEditor.vue b/app/gui/src/project-view/components/GraphEditor.vue
index 43eb750fd9fa..d6c330522987 100644
--- a/app/gui/src/project-view/components/GraphEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor.vue
@@ -21,6 +21,7 @@ import { performCollapse, prepareCollapsedInfo } from '@/components/GraphEditor/
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import { useGraphEditorToasts } from '@/components/GraphEditor/toasts'
 import { Uploader, uploadedExpression } from '@/components/GraphEditor/upload'
+import GraphMissingView from '@/components/GraphMissingView.vue'
 import GraphMouse from '@/components/GraphMouse.vue'
 import PlusButton from '@/components/PlusButton.vue'
 import SceneScroller from '@/components/SceneScroller.vue'
@@ -214,6 +215,7 @@ function panToSelected() {
 // == Breadcrumbs ==
 
 const stackNavigator = provideStackNavigator(projectStore, graphStore)
+const graphMissing = computed(() => graphStore.moduleRoot != null && !graphStore.methodAst.ok)
 
 // === Toasts ===
 
@@ -724,25 +726,29 @@ const documentationEditorFullscreen = ref(false)
   >
     <div class="vertical">
       <div ref="viewportNode" class="viewport" @click="handleClick">
-        <GraphNodes
-          @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
-          @enterNode="(id) => stackNavigator.enterNode(id)"
-          @createNodes="createNodesFromSource"
-          @toggleDocPanel="toggleRightDockHelpPanel"
-        />
-        <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
-        <ComponentBrowser
-          v-if="componentBrowserVisible"
-          ref="componentBrowser"
-          :navigator="graphNavigator"
-          :nodePosition="componentBrowserNodePosition"
-          :usage="componentBrowserUsage"
-          :associatedElements="componentBrowserElements"
-          @accepted="commitComponentBrowser"
-          @canceled="hideComponentBrowser"
-          @selectedSuggestionId="displayedDocs = $event"
-          @isAiPrompt="aiMode = $event"
-        />
+        <GraphMissingView v-if="graphMissing" />
+        <template v-else>
+          <GraphNodes
+            @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
+            @enterNode="(id) => stackNavigator.enterNode(id)"
+            @createNodes="createNodesFromSource"
+            @toggleDocPanel="toggleRightDockHelpPanel"
+          />
+          <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
+          <ComponentBrowser
+            v-if="componentBrowserVisible"
+            ref="componentBrowser"
+            :navigator="graphNavigator"
+            :nodePosition="componentBrowserNodePosition"
+            :usage="componentBrowserUsage"
+            :associatedElements="componentBrowserElements"
+            @accepted="commitComponentBrowser"
+            @canceled="hideComponentBrowser"
+            @selectedSuggestionId="displayedDocs = $event"
+            @isAiPrompt="aiMode = $event"
+          />
+          <PlusButton title="Add Component" @click.stop="addNodeDisconnected()" />
+        </template>
         <TopBar
           v-model:recordMode="projectStore.recordMode"
           v-model:showColorPicker="showColorPicker"
@@ -757,7 +763,6 @@ const documentationEditorFullscreen = ref(false)
           @collapseNodes="collapseNodes"
           @removeNodes="deleteSelected"
         />
-        <PlusButton title="Add Component" @click.stop="addNodeDisconnected()" />
         <SceneScroller
           :navigator="graphNavigator"
           :scrollableArea="Rect.Bounding(...graphStore.visibleNodeAreas)"
diff --git a/app/gui/src/project-view/components/GraphMissingView.vue b/app/gui/src/project-view/components/GraphMissingView.vue
new file mode 100644
index 000000000000..55a133fa143e
--- /dev/null
+++ b/app/gui/src/project-view/components/GraphMissingView.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { useProjectStore } from '@/stores/project'
+import StandaloneButton from './StandaloneButton.vue'
+
+const project = useProjectStore()
+
+function goToMain() {
+  project.executionContext.desiredStack = [project.executionContext.getStackBottom()]
+}
+</script>
+
+<template>
+  <div class="GraphMissingView">
+    <SvgIcon class="header-icon" name="error" />
+    <span>The component you are viewing no longer exists.</span>
+    <StandaloneButton icon="home2" label="Go back" @click="goToMain" />
+  </div>
+</template>
+
+<style scoped>
+.GraphMissingView {
+  background-image: linear-gradient(to bottom, #00000000, #00000030);
+  background-size: 100% 100%;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-icon {
+  --icon-size: 64px;
+}
+</style>
diff --git a/app/gui/src/project-view/components/StandaloneButton.vue b/app/gui/src/project-view/components/StandaloneButton.vue
new file mode 100644
index 000000000000..4c965dd46c58
--- /dev/null
+++ b/app/gui/src/project-view/components/StandaloneButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { URLString } from '@/util/data/urlString'
+import type { Icon } from '@/util/iconName'
+import SvgButton from './SvgButton.vue'
+
+const props = defineProps<{
+  icon?: Icon | URLString | undefined
+  label?: string | undefined
+  disabled?: boolean
+  title?: string | undefined
+}>()
+</script>
+
+<template>
+  <div class="StandaloneButton">
+    <SvgButton v-bind="props" :name="icon" />
+  </div>
+</template>
+
+<style scoped>
+.StandaloneButton {
+  background-color: var(--color-frame-bg);
+  padding: 4px;
+  border-radius: var(--radius-full);
+}
+</style>
diff --git a/app/gui/src/project-view/components/SvgButton.vue b/app/gui/src/project-view/components/SvgButton.vue
index bbab27dff7d9..068b3f758eeb 100644
--- a/app/gui/src/project-view/components/SvgButton.vue
+++ b/app/gui/src/project-view/components/SvgButton.vue
@@ -5,7 +5,7 @@ import type { URLString } from '@/util/data/urlString'
 import type { Icon } from '@/util/iconName'
 
 const _props = defineProps<{
-  name: Icon | URLString
+  name?: Icon | URLString | undefined
   label?: string | undefined
   disabled?: boolean
   title?: string | undefined
@@ -14,7 +14,7 @@ const _props = defineProps<{
 
 <template>
   <MenuButton :disabled="disabled" class="SvgButton" :title="title">
-    <SvgIcon :name="name" />
+    <SvgIcon v-if="name" :name="name" />
     <div v-if="label">{{ label }}</div>
   </MenuButton>
 </template>