Support source location edit in QuickEditModel

-Integrate SourceLocationPicker in QuickEditModel
--also adjust styling so SourceLocationPicker looks ok inside QuickEditModel
-Support saving source location edit
-Add syncing activeProvider from props to handle display of non github source location in QuickEditModel

Task: clearlydefined#956

src/components/DefinitionEntry.js

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TwoLineEntry, QuickEditModel, SourcePicker, FileCountRenderer } from './'
+import { TwoLineEntry, QuickEditModel, FileCountRenderer } from './'
 import { Checkbox, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap'
 import { Tag } from 'antd'
 import { get, isEqual, union } from 'lodash'
@@ -199,18 +199,11 @@ class DefinitionEntry extends React.Component {
     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
+      let field
+      if (key === 'declared') field = 'licensed.declared'
+      if (key === 'sourceComponent') field = 'described.sourceLocation'
+      if (key === 'release') field = 'described.releaseDate'
+      return field ? Contribution.applyChanges(definition, changes, field, value) : changes
     }, {})
 
     if (Object.keys(newChanges).length !== 0) {
@@ -325,13 +318,10 @@ class DefinitionEntry extends React.Component {
             closeModel={this.handleModel}
             initialValues={{
               declared: this.getValue('licensed.declared'),
-              source: Contribution.printCoordinates(this.getValue('described.sourceLocation')),
-              release: Contribution.printDate(this.getValue('described.releaseDate')),
-              repo: ''
+              sourceComponent: this.getValue('described.sourceLocation'),
+              release: Contribution.printDate(this.getValue('described.releaseDate'))
             }}
             onSave={this.handleSaveEdit}
-            //TODO hook up SourcePicker
-            editor={SourcePicker}
             //TODO validation
             validator={value => true}
           />

src/components/QuickEditModel.js

@@ -1,26 +1,32 @@
 import React, { useState, useEffect } from 'react'
 import { PropTypes } from 'prop-types'
-import { Modal, Button } from 'react-bootstrap'
+import { Grid, Modal, Button } from 'react-bootstrap'
 import closeSvg from '../images/icons/closeSvg.svg'
+import SourceLocationPicker from './SourceLocationPicker'
 
 const QuickEditModel = props => {
-  const { open, closeModel, onSave } = props
+  const { initialValues, token, open, closeModel, onSave } = props
 
   const [values, setValues] = useState({
-    declared: null,
-    source: null,
-    repo: null,
-    release: null
+    declared: initialValues.declared,
+    release: initialValues.release
   })
 
   useEffect(() => {
-    setValues(props.initialValues)
-  }, [props.initialValues])
+    setValues({
+      declared: initialValues.declared,
+      release: initialValues.release
+    })
+  }, [initialValues])
 
   const handleChange = ({ target }) => {
     setValues({ ...values, [target.id]: target.value })
   }
 
+  const handleComponentChange = newComponent => {
+    setValues({ ...values, sourceComponent: newComponent })
+  }
+
   const handleSave = () => {
     closeModel()
     onSave(values)
@@ -57,23 +63,15 @@ const QuickEditModel = props => {
                 Source
               </label>
               <div className="col-sm-10 d-flex justify-content-between align-items-center">
-                <input
-                  onChange={handleChange}
-                  value={values.source || ''}
-                  type="text"
-                  className="form-control mr-4 model-input"
-                  id="source"
-                  placeholder="User / Organization"
-                />
-                &nbsp;&nbsp;&nbsp;
-                <input
-                  onChange={handleChange}
-                  value={values.repo || ''}
-                  type="text"
-                  className="form-control model-input"
-                  id="repo"
-                  placeholder="Repo"
-                />
+                <Grid className="edit" id="source-picker">
+                  <SourceLocationPicker
+                    token={token}
+                    value={initialValues.sourceComponent?.url || ''}
+                    activeProvider={initialValues.sourceComponent?.provider}
+                    selectedComponent={values.sourceComponent}
+                    onChangeComponent={handleComponentChange}
+                  />
+                </Grid>
               </div>
             </div>
             <div className="form-group row">
@@ -106,7 +104,7 @@ const QuickEditModel = props => {
 }
 
 QuickEditModel.propsType = {
-  open: PropTypes.bool.isRequired,
+  open: PropTypes.bool,
   closeModel: PropTypes.func.isRequired,
   initialValues: PropTypes.object.isRequired,
   onSave: PropTypes.object.isRequired

src/components/SourceLocationPicker.js

@@ -12,18 +12,24 @@ import { PropTypes } from 'prop-types'
 class SourceLocationPicker extends Component {
   constructor(props) {
     super(props)
-    this.state = { activeProvider: 'github' }
+    this.state = { activeProvider: this.props.activeProvider }
     this.onSelectComponent = this.onSelectComponent.bind(this)
     this.onProviderClick = this.onProviderClick.bind(this)
   }
 
   static propTypes = {
     token: PropTypes.string,
     value: PropTypes.string,
+    activeProvider: PropTypes.string,
     selectedComponent: PropTypes.object,
     onChangeComponent: PropTypes.func.isRequired
   }
 
+  static defaultProps = {
+    value: '',
+    activeProvider: 'github'
+  }
+
   onSelectComponent(value, tool) {
     const { onChangeComponent } = this.props
     const [namespace, name] = value.name.split('/')

src/styles/_FullDetailComponent.scss

@@ -348,6 +348,13 @@
   }
 }
 
+#source-picker.edit.container {
+  padding-top: 5px;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+}
+
 .source-picker__current-source {
   margin: 16px 0 0;