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;
  }