chore(react/promoted_attributes): reintroduce labels

apps/client/src/widgets/PromotedAttributes.css

@@ -4,6 +4,10 @@ body.mobile .promoted-attributes-widget {
     overflow: auto;
 }
 
+.component.promoted-attributes-widget {
+    contain: none;
+}
+
 .promoted-attributes-container {
     margin: 0 1.5em;
     overflow: auto;

apps/client/src/widgets/PromotedAttributes.tsx

@@ -2,10 +2,17 @@ import { useEffect, useState } from "preact/hooks";
 import "./PromotedAttributes.css";
 import { useNoteContext } from "./react/hooks";
 import { Attribute } from "../services/attribute_parser";
+import FAttribute from "../entities/fattribute";
+
+interface Cell {
+    definitionAttr: FAttribute;
+    valueAttr: Attribute;
+    valueName: string;
+}
 
 export default function PromotedAttributes() {
     const { note } = useNoteContext();
-    const [ cells, setCells ] = useState<Attribute[]>();
+    const [ cells, setCells ] = useState<Cell[]>();
 
     useEffect(() => {
         if (!note) return;
@@ -16,7 +23,7 @@ export default function PromotedAttributes() {
         // the order of attributes is important as well
         ownedAttributes.sort((a, b) => a.position - b.position);
 
-        const cells: Attribute[] = [];
+        const cells: Cell[] = [];
         for (const definitionAttr of promotedDefAttrs) {
             const valueType = definitionAttr.name.startsWith("label:") ? "label" : "relation";
             const valueName = definitionAttr.name.substr(valueType.length + 1);
@@ -36,7 +43,9 @@ export default function PromotedAttributes() {
                 valueAttrs = valueAttrs.slice(0, 1);
             }
 
-            cells.push(...valueAttrs);
+            for (const valueAttr of valueAttrs) {
+                cells.push({  definitionAttr, valueAttr, valueName });
+            }
         }
         setCells(cells);
     }, [ note ]);
@@ -44,8 +53,24 @@ export default function PromotedAttributes() {
     return (
         <div className="promoted-attributes-widget">
             <div className="promoted-attributes-container">
-
+                {cells?.map(cell => <PromotedAttributeCell cell={cell} />)}
             </div>
         </div>
     );
 }
+
+function PromotedAttributeCell({ cell }: { cell: Cell }) {
+    const { valueName, valueAttr, definitionAttr } = cell;
+    const inputId = `value-${valueAttr.attributeId}`;
+    const definition = definitionAttr.getDefinition();
+
+    return (
+        <div className="promoted-attribute-cell">
+            <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
+            <input
+                tabIndex={200 + definitionAttr.position}
+                id={inputId}
+            />
+        </div>
+    )
+}

apps/client/src/widgets/promoted_attributes.ts

@@ -21,14 +21,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
     private $container!: JQuery<HTMLElement>;
 
-    get name() {
-        return "promotedAttributes";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabPromotedAttributes";
-    }
-
     doRender() {
         this.contentSized();
     }
@@ -59,11 +51,8 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
     async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) {
         const definition = definitionAttr.getDefinition();
-        const id = `value-${valueAttr.attributeId}`;
 
         const $input = $("<input>")
-            .prop("tabindex", 200 + definitionAttr.position)
-            .prop("id", id)
             .attr("data-attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId ?? "" : "") // if not owned, we'll force creation of a new attribute instead of updating the inherited one
             .attr("data-attribute-type", valueAttr.type)
             .attr("data-attribute-name", valueAttr.name)
@@ -79,7 +68,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
         const $wrapper = $('<div class="promoted-attribute-cell">')
             .append(
                 $("<label>")
-                    .prop("for", id)
                     .text(definition.promotedAlias ?? valueName)
             )
             .append($("<div>").addClass("input-group").append($input))