Quick Fix Import Button (#12051)

CHANGELOG.md

@@ -6,11 +6,13 @@
   GeoMap visualization][11889].
 - [Round ‘Add component’ button under the component menu replaced by a small
   button protruding from the output port.][11836].
+- [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
+[12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
 

app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue

@@ -1,16 +1,43 @@
 <script setup lang="ts">
 import SvgButton from '@/components/SvgButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
+import { useGraphStore } from '@/stores/graph'
+import { QualifiedImport } from '@/stores/graph/imports'
 import type { Icon } from '@/util/iconMetadata/iconName'
+import { QualifiedName } from '@/util/qualifiedName'
+
+const graph = useGraphStore()
 
 const props = defineProps<{
   message: string
   type: MessageType
 }>()
 
+function containsLibraryName(): string | null {
+  const prefix = 'Compile error: Fully qualified name references a library '
+  if (props.message.startsWith(prefix)) {
+    const rest = props.message.substring(prefix.length)
+    const libName = rest.split(' ')
+    return libName[0] ? libName[0] : null
+  } else {
+    return null
+  }
+}
 function copyText() {
   window.navigator.clipboard.writeText(props.message)
 }
+function fixImport() {
+  const libName = containsLibraryName()
+  if (typeof libName == `string`) {
+    const theImport = {
+      kind: 'Qualified',
+      module: libName as QualifiedName,
+    } as QualifiedImport
+    const edit = graph.startEdit()
+    graph.addMissingImports(edit, [theImport])
+    graph.commitEdit(edit)
+  }
+}
 </script>
 
 <script lang="ts">
@@ -22,6 +49,7 @@ export const iconForMessageType: Record<MessageType, Icon> = {
   missing: 'metadata',
   panic: 'panic',
 }
+
 export const colorForMessageType: Record<MessageType, string> = {
   error: 'var(--color-error)',
   warning: 'var(--color-warning)',
@@ -35,7 +63,20 @@ export const colorForMessageType: Record<MessageType, string> = {
     <SvgIcon class="icon" :name="iconForMessageType[props.type]" />
     <div class="message" v-text="props.message"></div>
     <div class="toolbar">
-      <SvgButton name="copy2" class="copyButton" title="Copy message text" @click.stop="copyText" />
+      <SvgButton
+        v-if="containsLibraryName()"
+        name="edit"
+        class="fixImportButton"
+        title="Fix Import"
+        @click.stop="fixImport"
+      />
+      <SvgButton
+        v-if="!containsLibraryName()"
+        name="copy2"
+        class="copyButton"
+        title="Copy message text"
+        @click.stop="copyText"
+      />
     </div>
   </div>
 </template>
@@ -78,10 +119,7 @@ export const colorForMessageType: Record<MessageType, string> = {
 
   & > .SvgButton:active {
     background-color: color-mix(in oklab, black, transparent 70%);
+    color: var(--color-text-inversed);
   }
 }
-
-.copyButton:active {
-  color: var(--color-text-inversed);
-}
 </style>