Color missing value messages blue (#11841)

A missing value error message is more of a something you haven't done yet message than an error. So coloring it blue is more friendly and also ties into the blue highlighting of the widget names. Also removed the default text when it isn't text but a function call ![image](https://github.com/user-attachments/assets/3c26dae8-8f38-4ddf-aefe-4ec625e812a6)
enso-org · Dec 11, 2024 · c5ccc5a · c5ccc5a
1 parent 91cccea
commit c5ccc5a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/app/gui/src/project-view/assets/base.css b/app/gui/src/project-view/assets/base.css
@@ -29,6 +29,7 @@
   --color-port-connected: rgb(255 255 255 / 0.15);
 
   /* colors for specific icons */
+  --color-missing-value: rgb(72 42 232);
   --color-warning: rgb(251 188 5);
   --color-error: rgb(234 67 53);
 }
@@ -74,7 +75,6 @@
   --color-node-port: var(--color-node-edge);
   --color-node-error: color-mix(in oklab, var(--node-group-color) 30%, rgb(255, 0, 0) 70%);
   --color-node-pending: color-mix(in oklab, var(--node-group-color) 60%, #aaa 40%);
-  --color-node-port-missing-value: #482ae8;
   --color-node-text-missing-value: white;
 
   &.pending {

diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
@@ -136,7 +136,8 @@ const availableMessage = computed<Message | undefined>(() => {
       const text = rawText?.split(' (at')[0]
       if (!text) return undefined
       const alwaysShow = !inputExternalIds().some((id) => getDataflowError(id) === rawText)
-      return { type: 'error', text, alwaysShow } satisfies Message
+      const type = rawText.includes('Missing_Argument') ? 'missing' : 'error'
+      return { type, text, alwaysShow } satisfies Message
     }
     case 'Value': {
       const warning = info.payload.warnings?.value

diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue
@@ -15,15 +15,17 @@ function copyText() {
 
 <script lang="ts">
 /** The type of a message. */
-export type MessageType = 'error' | 'warning' | 'panic'
+export type MessageType = 'error' | 'warning' | 'missing' | 'panic'
 export const iconForMessageType: Record<MessageType, Icon> = {
   error: 'error',
   warning: 'warning',
+  missing: 'metadata',
   panic: 'panic',
 }
 export const colorForMessageType: Record<MessageType, string> = {
   error: 'var(--color-error)',
   warning: 'var(--color-warning)',
+  missing: 'var(--color-missing-value)',
   panic: 'var(--color-error)',
 }
 </script>

diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetArgumentName.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetArgumentName.vue
@@ -84,7 +84,7 @@ export const ArgumentNameShownKey: unique symbol = Symbol.for('WidgetInput:Argum
     opacity 0.2s ease;
   .missing & {
     opacity: 1;
-    background-color: var(--color-node-port-missing-value);
+    background-color: var(--color-missing-value);
     color: var(--color-node-text-missing-value);
   }
 }

diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetText.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetText.vue
@@ -79,9 +79,7 @@ const textContents = computed(() =>
   props.input.value instanceof Ast.TextLiteral ? props.input.value.rawTextContent : '',
 )
 const placeholder = computed(() =>
-  WidgetInput.isPlaceholder(props.input) ?
-    inputTextLiteral.value?.rawTextContent ?? WidgetInput.valueRepr(props.input)
-  : '',
+  WidgetInput.isPlaceholder(props.input) ? inputTextLiteral.value?.rawTextContent ?? '' : '',
 )
 const editedContents = ref(textContents.value)
 watch(textContents, (value) => (editedContents.value = value))