feat(gui): author the Form View's inputs in place

frontend/src/app/common/formly/editable-label-wrapper/editable-label-wrapper.component.html

@@ -0,0 +1,94 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<!-- Authoring: the label is the input, so what you type is what the reader reads. Written through on
+     every keystroke (input, not change): the hidden label below and the saved name follow the box as
+     it is typed, so nothing is lost if the page is left while the box still has the focus. -->
+<div
+  class="lbl-row"
+  *ngIf="props.authoring">
+  <input
+    class="lbl-input"
+    [value]="props.authorName"
+    [placeholder]="props.schemaLabel"
+    (input)="onRename($event)"
+    [attr.aria-label]="'Label shown above this input'"
+    [title]="'Shown above this box. Empty keeps ' + props.schemaLabel" />
+  <!-- An input the reader can only lose by removing it altogether has no eye: offering
+       one here would be a second place to decide the same thing. -->
+  <!-- A toggle button: the name stays constant and aria-pressed carries the state (a name that
+       changed with the state would announce the opposite of what the state says). -->
+  <button
+    *ngIf="props.canHide !== false"
+    type="button"
+    class="lbl-eye"
+    [class.off]="props.authorHidden"
+    (click)="onToggleHidden()"
+    [attr.aria-pressed]="props.authorHidden === true"
+    aria-label="Hide from the form"
+    [title]="props.authorHidden ? 'Hidden from the form' : 'Shown on the form'">
+    <i
+      nz-icon
+      [nzType]="props.authorHidden ? 'eye-invisible' : 'eye'"
+      nzTheme="outline"></i>
+  </button>
+</div>
+
+<!-- The name box above edits the label; it is not the label. The control below still needs a
+     programmatic name (decorate blanks formly's own), so it gets one that follows the current name,
+     present for assistive technology only. A repeated field has no labelable control carrying the
+     field id (the array widget renders rows and buttons), so its name is given to the rows as a
+     group (role="group" + aria-labelledby) rather than through `for`, which would point at nothing. -->
+<label
+  class="lbl-sr-only"
+  *ngIf="props.authoring && !props.labelsGroup"
+  [attr.for]="id">
+  {{ props.authorName || props.schemaLabel }}
+</label>
+<span
+  class="lbl-sr-only"
+  *ngIf="props.authoring && props.labelsGroup"
+  [id]="id + '-label'">
+  {{ props.authorName || props.schemaLabel }}
+</span>
+
+<!-- Everyone else just reads it. This wrapper blanks formly's own label (decorate sets label to ""),
+     so this one has to do that label's job in full: `for` ties it to the control (formly gives the
+     control the field id), or the reader's input would show a name and announce none. The static
+     label is also what a later row of a repeated section shows while authoring: it follows the first
+     row's name box and eye (and fades with them when hidden), without controls of its own. -->
+<label
+  class="lbl-static"
+  *ngIf="!props.authoring && !props.labelsGroup && (props.authorName || props.schemaLabel)"
+  [attr.for]="id">
+  {{ props.authorName || props.schemaLabel }}
+</label>
+<span
+  class="lbl-static"
+  *ngIf="!props.authoring && props.labelsGroup && (props.authorName || props.schemaLabel)"
+  [id]="id + '-label'">
+  {{ props.authorName || props.schemaLabel }}
+</span>
+
+<div
+  [class.dimmed]="props.authorHidden"
+  [attr.role]="props.labelsGroup ? 'group' : null"
+  [attr.aria-labelledby]="props.labelsGroup ? id + '-label' : null">
+  <ng-container #fieldComponent></ng-container>
+</div>

frontend/src/app/common/formly/editable-label-wrapper/editable-label-wrapper.component.scss

@@ -0,0 +1,114 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.lbl-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 2px;
+}
+
+/* A faint dashed box at rest signals the title is editable (authors could not tell it was
+   a field before); it firms up on hover and turns into a real input on focus. */
+.lbl-input {
+  flex: 1;
+  min-width: 0;
+  border: 1px dashed #dcdcdc;
+  border-radius: 4px;
+  background: none;
+  padding: 1px 5px;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  outline: none;
+  cursor: text;
+
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: 400;
+  }
+
+  &:hover {
+    border-style: solid;
+    border-color: #b0b0b0;
+  }
+
+  &:focus {
+    border-style: solid;
+    border-color: #1890ff;
+    background: #fff;
+  }
+}
+
+.lbl-eye {
+  flex: none;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  line-height: 0;
+  padding: 3px;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background: #f5f5f5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #1890ff;
+    outline-offset: 1px;
+  }
+
+  /* Hidden is a state worth seeing at a glance, so it keeps the accent rather than
+     fading like the rest of the row. */
+  &.off {
+    color: #1890ff;
+  }
+}
+
+/* Present for assistive technology only: the visible name box is the label's editor, not the
+   control's label. Standard visually-hidden recipe: off-layout, clipped, never display:none (which
+   would remove it from the accessibility tree too). */
+.lbl-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.lbl-static {
+  display: block;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 2px;
+}
+
+/* A hidden field stays visible to its author, faded, so they can see what they removed
+   and put it back. The reader never renders it at all. Faded to 0.6, not further: the field is
+   still operable while hidden, so its text has to stay readable. */
+.dimmed {
+  opacity: 0.6;
+}