Allow editing declared license and release date in Quick Edit

-add handleSaveEdit
-display the changes correctly with original values in tool tip

Task: clearlydefined#956

src/components/DefinitionEntry.js

@@ -90,10 +90,10 @@ class DefinitionEntry extends React.Component {
         <ScoreRenderer scores={scores} definition={definition} />
       </span>
     ) : null
-    const releasedDate = definition?.described?.releaseDate ? (
-      <span className="releasedDate-table">{definition.described.releaseDate}</span>
-    ) : (
-      <span className="releasedDate-table">-- -- --</span>
+    const releasedDate = (
+      <span className="releasedDate-table">
+        {this.renderFieldWithToolTipIfDifferent('described.releaseDate', a => a || '-- -- --')}
+      </span>
     )
     const curationTag = isCurationPending ? (
       <span>
@@ -125,7 +125,7 @@ class DefinitionEntry extends React.Component {
   renderWithToolTipIfDifferent(field, content, placement = 'right', transform = x => x) {
     const toolTip = (
       <Tooltip id={`tooltip-${field}`} className="definition__tooltip">
-        Original: {transform(get(this.props.otherDefinition, field))}
+        Original: {transform(this.getOriginalValue(field))}
       </Tooltip>
     )
     return this.ifDifferent(
@@ -137,14 +137,19 @@ class DefinitionEntry extends React.Component {
     )
   }
 
+  renderFieldWithToolTipIfDifferent(field, transform = a => a) {
+    const displayValue = transform(this.getValue(field))
+    return this.renderWithToolTipIfDifferent(
+      field,
+      <span className={this.classIfDifferent(field)}>{displayValue}</span>,
+      undefined,
+      transform
+    )
+  }
+
   renderMessage(definition) {
     const licenseExpression = definition ? this.getValue('licensed.declared') : null
-    return licenseExpression
-      ? this.renderWithToolTipIfDifferent(
-        'licensed.declared',
-        <span className={this.classIfDifferent('licensed.declared')}>{licenseExpression}</span>
-      )
-      : null
+    return licenseExpression ? this.renderFieldWithToolTipIfDifferent('licensed.declared') : null
   }
 
   getPercentage(count, total) {
@@ -190,6 +195,30 @@ class DefinitionEntry extends React.Component {
     this.setState({ modelOpen: !this.state.modelOpen })
   }
 
+  handleSaveEdit = updates => {
+    const { onChange, definition, component } = this.props
+
+    const newChanges = Object.entries(updates).reduce((changes, [key, value]) => {
+      if (key === 'declared') return Contribution.applyChanges(definition, changes, 'licensed.declared', value)
+      if (key === 'source')
+        return Contribution.applyChanges(
+          definition,
+          changes,
+          'described.sourceLocation',
+          value,
+          undefined,
+          Contribution.toSourceLocation
+        )
+      if (key === 'release') return Contribution.applyChanges(definition, changes, 'described.releaseDate', value)
+      return changes
+    }, {})
+
+    if (Object.keys(newChanges).length !== 0) {
+      const combinedChanges = { ...component.changes, ...newChanges }
+      onChange && onChange(component, combinedChanges)
+    }
+  }
+
   renderPanel(rawDefinition) {
     if (!rawDefinition)
       return (
@@ -201,13 +230,12 @@ class DefinitionEntry extends React.Component {
     // TODO: find a way of calling this method less frequently. It's relatively expensive.
     const definition = this.foldFacets(rawDefinition, this.props.activeFacets)
     const { licensed } = definition
-    const { readOnly, onRevert } = this.props
     return (
       <div className="row row-panel-details">
         <div className="col-md-6 d-flex justify-content-start align-items-center">
           <span className="panel-details__title">{this.renderLabel('Declared')}:</span>
           <div className="panel-details__value">
-            <p>{this.getValue('licensed.declared')}</p>
+            {this.renderFieldWithToolTipIfDifferent('licensed.declared')}
             {/* {this.renderWithToolTipIfDifferent(
               'licensed.declared',
               <LicensesRenderer
@@ -232,7 +260,7 @@ class DefinitionEntry extends React.Component {
         <div className="col-md-6 d-flex justify-content-start align-items-center">
           <span className="panel-details__title">{this.renderLabel('Source')}:</span>
           <div className="panel-details__value">
-            <p>{Contribution.printCoordinates(this.getValue('described.sourceLocation'))}</p>
+            {this.renderFieldWithToolTipIfDifferent('described.sourceLocation', a => Contribution.printCoordinates(a))}
             {/* {this.renderWithToolTipIfDifferent(
               'described.sourceLocation',
               <ModalEditor
@@ -263,7 +291,10 @@ class DefinitionEntry extends React.Component {
         <div className="col-md-6 d-flex justify-content-start align-items-center">
           <span className="panel-details__title">{this.renderLabel('Release')}:</span>
           <div className="panel-details__value">
-            <p>{Contribution.printDate(this.getValue('described.releaseDate'))}</p>
+            {this.renderFieldWithToolTipIfDifferent(
+              'described.releaseDate',
+              a => Contribution.printDate(a) || '-- -- --'
+            )}
             {/* {this.renderWithToolTipIfDifferent(
               'described.releaseDate',
               <InlineEditor
@@ -292,33 +323,17 @@ class DefinitionEntry extends React.Component {
           <QuickEditModel
             open={this.state.modelOpen}
             closeModel={this.handleModel}
-            definition={definition}
-            field={'described.sourceLocation'}
-            extraClass={this.classIfDifferent('described.sourceLocation')}
-            readOnly={readOnly}
-            initialValue={{
-              declared: this.getOriginalValue('licensed.declared'),
-              source: Contribution.printCoordinates(this.getOriginalValue('described.sourceLocation')),
-              release: Contribution.printDate(this.getOriginalValue('described.releaseDate')),
-              repo: ''
-            }}
-            values={{
+            initialValues={{
               declared: this.getValue('licensed.declared'),
               source: Contribution.printCoordinates(this.getValue('described.sourceLocation')),
               release: Contribution.printDate(this.getValue('described.releaseDate')),
               repo: ''
             }}
-            onChange={{
-              declared: this.fieldChange('licensed.declared'),
-              source: this.fieldChange('described.sourceLocation', isEqual, Contribution.toSourceLocation),
-              release: this.fieldChange('described.releaseDate'),
-              repo: ''
-            }}
+            onSave={this.handleSaveEdit}
+            //TODO hook up SourcePicker
             editor={SourcePicker}
+            //TODO validation
             validator={value => true}
-            placeholder={'Source location'}
-            revertable
-            onRevert={() => onRevert('described.sourceLocation')}
           />
           <button onClick={this.handleModel} className="quick-edit-btn">
             Edit

src/components/QuickEditModel.jsx → src/components/QuickEditModel.js

@@ -1,15 +1,37 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { PropTypes } from 'prop-types'
 import { Modal, Button } from 'react-bootstrap'
 import closeSvg from '../images/icons/closeSvg.svg'
 
 const QuickEditModel = props => {
-  const { open, closeModel, values, onChange } = props
+  const { open, closeModel, onSave } = props
+
+  const [values, setValues] = useState({
+    declared: null,
+    source: null,
+    repo: null,
+    release: null
+  })
+
+  useEffect(() => {
+    setValues(props.initialValues)
+  }, [props.initialValues])
+
+  const handleChange = ({ target }) => {
+    setValues({ ...values, [target.id]: target.value })
+  }
+
+  const handleSave = () => {
+    closeModel()
+    onSave(values)
+  }
+
   return (
     <div>
       <Modal className={`clearly-model  ${open ? 'show' : '.'}`} show={open} onHide={closeModel}>
         <div className="model-header">
           <h4>Quick Edit Component</h4>
-          <span className="model-close-btn" onClick={() => closeModel()}>
+          <span className="model-close-btn" onClick={closeModel}>
             <img src={closeSvg} alt="" />
           </span>
         </div>
@@ -21,12 +43,12 @@ const QuickEditModel = props => {
               </label>
               <div className="col-sm-10">
                 <input
-                  onChange={e => (typeof onChange.declared === 'function' ? onChange.declared() : null)}
+                  onChange={handleChange}
                   value={values.declared || ''}
                   type="text"
                   className="form-control model-input"
                   id="declared"
-                  placeholder="MIT"
+                  placeholder="SPDX license"
                 />
               </div>
             </div>
@@ -36,7 +58,7 @@ const QuickEditModel = props => {
               </label>
               <div className="col-sm-10 d-flex justify-content-between align-items-center">
                 <input
-                  onChange={e => (typeof onChange.source === 'function' ? onChange.source() : null)}
+                  onChange={handleChange}
                   value={values.source || ''}
                   type="text"
                   className="form-control mr-4 model-input"
@@ -45,7 +67,7 @@ const QuickEditModel = props => {
                 />
                 &nbsp;&nbsp;&nbsp;
                 <input
-                  onChange={e => (typeof onChange.repo === 'function' ? onChange.repo() : null)}
+                  onChange={handleChange}
                   value={values.repo || ''}
                   type="text"
                   className="form-control model-input"
@@ -61,7 +83,7 @@ const QuickEditModel = props => {
               <div className="col-sm-10">
                 <input
                   type="date"
-                  onChange={e => (typeof onChange.release === 'function' ? onChange.release() : null)}
+                  onChange={handleChange}
                   value={values.release || ''}
                   className="form-control model-input"
                   id="release"
@@ -71,10 +93,10 @@ const QuickEditModel = props => {
           </form>
         </div>
         <div className="clearly-model-footer">
-          <Button onClick={() => closeModel()} className="modal__btn modal__btn--secondary" variant="secondary">
+          <Button onClick={closeModel} className="modal__btn modal__btn--secondary" variant="secondary">
             Close
           </Button>
-          <Button className="modal__btn modal__btn-primary" variant="secondary">
+          <Button onClick={handleSave} className="modal__btn modal__btn-primary" variant="secondary">
             Save
           </Button>
         </div>
@@ -83,4 +105,11 @@ const QuickEditModel = props => {
   )
 }
 
+QuickEditModel.propsType = {
+  open: PropTypes.bool.isRequired,
+  closeModel: PropTypes.func.isRequired,
+  initialValues: PropTypes.object.isRequired,
+  onSave: PropTypes.object.isRequired
+}
+
 export default QuickEditModel

src/styles/_Popover.scss

@@ -219,7 +219,7 @@ button.modal__btn--secondary,
   }
 }
 
-
+.fade.in.definition__tooltip.tooltip,
 .fade.in.modal {
   opacity: 1 !important;
 }