feat: attribute label display in Selector, create attribute feature

webui/src/components/utils/Selector.svelte

@@ -3,7 +3,11 @@
   import { createEventDispatcher } from "svelte";
   import type { UpListing } from "upend";
   import type { IValue, VALUE_TYPE } from "upend/types";
-  import { fetchAllAttributes } from "../../lib/api";
+  import {
+    fetchAllAttributes,
+    putEntityAttribute,
+    putEntry,
+  } from "../../lib/api";
   import { baseSearchOnce, createLabelled } from "../../util/search";
   import UpObject from "../display/UpObject.svelte";
   import IconButton from "./IconButton.svelte";
@@ -41,7 +45,10 @@
   }
 
   interface SelectorOption {
-    attribute?: string;
+    attribute?: {
+      labels: string[];
+      name: string;
+    };
     value?: IValue;
     labelToCreate?: string;
   }
@@ -58,13 +65,26 @@
       case "attribute": {
         const allAttributes = await fetchAllAttributes();
         options = allAttributes
-          .map((attr) => attr.name)
-          .filter((attr) => attr.toLowerCase().includes(query.toLowerCase()))
+          .filter(
+            (attr) =>
+              attr.name.toLowerCase().includes(query.toLowerCase()) ||
+              attr.labels.some((label) =>
+                label.toLowerCase().includes(query.toLowerCase())
+              )
+          )
           .map((attribute) => {
             return {
               attribute,
             };
           });
+        options.push({
+          attribute: {
+            labels: [],
+            name: inputValue.toUpperCase().replaceAll(/[^A-Z0-9]/g, "_"),
+          },
+          labelToCreate: inputValue,
+        });
+        options = options;
         break;
       }
       case "value": {
@@ -161,8 +181,19 @@
   async function set(option: SelectorOption) {
     switch (type) {
       case "attribute":
-        attribute = option.attribute;
-        inputValue = option.attribute;
+        if (option.labelToCreate) {
+          // First, "create" attribute, getting its address.
+          const [_, address] = await putEntry({
+            entity: { t: "Attribute", c: option.attribute.name },
+          });
+          // Second, label it.
+          await putEntityAttribute(address, "LBL", {
+            t: "String",
+            c: option.labelToCreate,
+          });
+        }
+        attribute = option.attribute.name;
+        inputValue = option.attribute.name;
         break;
       case "value":
         if (!option.labelToCreate) {
@@ -282,7 +313,17 @@
         }}
       >
         {#if option.attribute}
-          {option.attribute}
+          {#if option.attribute.labels.length}
+            <div class="content">
+              {#each option.attribute.labels as label}
+                <div class="label">{label}</div>
+              {/each}
+            </div>
+            <div class="type">{option.attribute.name}</div>
+          {:else if option.labelToCreate}
+            <div class="content">{option.labelToCreate}</div>
+            <div class="type">Create attribute ({option.attribute.name})</div>
+          {/if}
         {:else if option.value}
           {#if option.value.t == "Address"}
             <UpObject
@@ -364,6 +405,10 @@
         opacity: 0.8;
         font-size: smaller;
       }
+
+      .label {
+        display: inline-block;
+      }
     }
   }
 </style>