Fix/ Edge Browser: support textbox input when the edit invitation is not an enum

components/browser/EdgeBrowser.js

@@ -306,37 +306,42 @@ export default class EdgeBrowser extends React.Component {
   // index is index of the column where the custom load of an entity is changed
   // also update if there's column with same parent
   updateChildColumn(index, customLoad) {
-    if (index + 1 >= this.state.columns.length) return
-    const parentIdOfColumn = this.state.columns[index].parentId
-    const resultColumns = []
-    resultColumns.push(this.state.columns[0])
-    for (let i = 1; i < this.state.columns.length; i += 1) {
-      const parentColumn = this.state.columns[i - 1]
-      const column = this.state.columns[i]
-      if (parentColumn.parentId === parentIdOfColumn) {
-        resultColumns.push({ ...column, parentCustomLoad: customLoad })
-      } else {
-        resultColumns.push(column)
+    this.setState((prevState) => {
+      if (index + 1 >= prevState.columns.length) return null
+      const parentIdOfColumn = prevState.columns[index].parentId
+      const resultColumns = []
+      resultColumns.push(prevState.columns[0])
+      for (let i = 1; i < prevState.columns.length; i += 1) {
+        const parentColumn = prevState.columns[i - 1]
+        const column = prevState.columns[i]
+        if (parentColumn.parentId === parentIdOfColumn) {
+          const updatedColumn = {
+            ...column,
+            parentCustomLoad: customLoad,
+          }
+          resultColumns.push(updatedColumn)
+        } else {
+          resultColumns.push(column)
+        }
       }
-    }
-    this.setState({ columns: resultColumns })
+      return { columns: resultColumns }
+    })
   }
 
   // set the shouldUpdate property of column at index
   // and all other columns with same parent
   // to trigger entites reload of those columns
   reloadColumnEntities(index) {
-    const parentIdOfColumn = this.state.columns[index].parentId
-    const resultColumns = []
-    for (let i = 0; i < this.state.columns.length; i += 1) {
-      const column = this.state.columns[i]
-      if (column?.parentId === parentIdOfColumn) {
-        resultColumns.push({ ...column, shouldReloadEntities: !column.shouldReloadEntities })
-      } else {
-        resultColumns.push(column)
-      }
-    }
-    this.setState({ columns: resultColumns })
+    this.setState((prevState) => {
+      const parentIdOfColumn = prevState.columns[index].parentId
+      const resultColumns = prevState.columns.map((column) => {
+        if (column?.parentId === parentIdOfColumn) {
+          return { ...column, shouldReloadEntities: !column.shouldReloadEntities }
+        }
+        return column
+      })
+      return { columns: resultColumns }
+    })
   }
 
   async lookupSignatures() {

components/browser/EditEdgeTextbox.js

@@ -0,0 +1,60 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/destructuring-assignment */
+/* globals $: false */
+
+import { getTooltipTitle } from '../../lib/edge-utils'
+
+export default function EditEdgeTextbox(props) {
+  const showTrashButton = props.existingEdge?.writers?.length !== 0
+
+  const handleHover = (target) => {
+    if (!props.existingEdge) return
+    const title = getTooltipTitle(props.existingEdge)
+    $(target).tooltip({
+      title,
+      trigger: 'hover',
+      container: 'body',
+    })
+  }
+
+  if (!props.existingEdge && !props.canAddEdge) return null
+  return (
+    <div
+      className="edit-controls full-width"
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+    >
+      <label onMouseEnter={(e) => handleHover(e.target)}>{props.label}:</label>
+      <div className="btn-group edit-edge-textbox">
+        <input
+          type="text"
+          className="form-control edit-edge-input"
+          value={props.selected}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => {
+            e.stopPropagation()
+            props.addEdge({
+              e,
+              existingEdge: props.existingEdge,
+              editEdgeTemplate: props.editEdgeTemplate,
+              updatedEdgeFields: { [props.type]: Number(e.target.value) },
+            })
+          }}
+        />
+      </div>
+      {props.existingEdge && showTrashButton && (
+        <a
+          href="#"
+          className="edit-edge-remove"
+          onClick={(e) => {
+            e.stopPropagation()
+            props.removeEdge()
+          }}
+        >
+          <span className="glyphicon glyphicon-trash" />
+        </a>
+      )}
+    </div>
+  )
+}

components/browser/ProfileEntity.js

@@ -21,6 +21,7 @@ import EditEdgeToggle from './EditEdgeToggle'
 import EditEdgeTwoDropdowns from './EditEdgeTwoDropdowns'
 import ScoresList from './ScoresList'
 import useQuery from '../../hooks/useQuery'
+import EditEdgeTextbox from './EditEdgeTextbox'
 
 export default function ProfileEntity(props) {
   const {
@@ -312,10 +313,27 @@ export default function ProfileEntity(props) {
     if (!edge && content?.isInvitedProfile && isEmergencyReviewerStage && !isInviteInvitation)
       return null
 
+    const editEdgeTextbox = (type) => (
+      <>
+        <EditEdgeTextbox
+          existingEdge={edge}
+          canAddEdge={
+            editEdges?.filter((p) => p?.invitation === invitation.id).length === 0 ||
+            invitation.multiReply
+          }
+          label={invitation.name}
+          selected={edge?.[type]}
+          addEdge={addEdge}
+          removeEdge={() => removeEdge(edge)}
+          type={type} // label or weight
+          editEdgeTemplate={editEdgeTemplates?.find((p) => p?.invitation === invitation.id)}
+        />
+      </>
+    )
+
     const editEdgeDropdown = (type, controlType) => (
       <EditEdgeDropdown
         existingEdge={edge}
-        // eslint-disable-next-line max-len
         canAddEdge={
           editEdges?.filter((p) => p?.invitation === invitation.id).length === 0 ||
           invitation.multiReply
@@ -381,12 +399,14 @@ export default function ProfileEntity(props) {
     const shouldRenderWeightRadio = weightRadio && !invitation.label
     const shouldRenderLabelDropdown = labelDropdown && !invitation.weight
     const shouldRenderWeightDropdown = weightDropdown && !invitation.label
+    const shouldRenderWeightTextbox = invitation.weight?.['value-textbox']
 
     if (shouldRenderTwoRadio) return editEdgeTwoDropdowns('value-radio')
     if (shouldRenderTwoDropdown) return editEdgeTwoDropdowns('value-dropdown')
     if (shouldRenderLabelRadio) return editEdgeDropdown('label', 'value-radio') // for now treat radio the same as dropdown
     if (shouldRenderWeightRadio) return editEdgeDropdown('weight', 'value-radio') // for now treat radio the same as dropdown
     if (shouldRenderLabelDropdown) return editEdgeDropdown('label', 'value-dropdown')
+    if (shouldRenderWeightTextbox) return editEdgeTextbox('weight')
     if (shouldRenderWeightDropdown) return editEdgeDropdown('weight', 'value-dropdown')
     return editEdgeToggle()
   }

lib/edge-utils.js

@@ -358,6 +358,9 @@ export function translateFieldSpec(invitation, fieldName, version) {
     if (field.param?.enum) {
       spec['value-dropdown'] = field.param.enum
     }
+    if (field.param?.input === 'text') {
+      spec['value-textbox'] = true
+    }
     return spec
   }
   const field = invitation.reply.content[fieldName]

styles/pages/edge-browser.scss

@@ -191,6 +191,16 @@ main.edge-browser {
           cursor: no-drop;
         }
       }
+      .edit-edge-textbox {
+        width: 15%;
+        padding-left: 0.5rem;
+
+        .edit-edge-input {
+          font-size: 0.75rem;
+          padding: 3px 5px;
+          height: fit-content;
+        }
+      }
       .span-disabled {
         pointer-events: none;
       }