Merge branch 'master' into prod

Author: mpcen

src/actions/definitionActions.js

@@ -56,7 +56,7 @@ export function checkForMissingDefinition(token, isFirstAttempt = false) {
     ).filter(x => x)
     const missingDefinitions = map(
       workspaceComponents,
-      item => !get(item, 'described.tools') && EntitySpec.fromObject(item).toPath()
+      item => !get(item, 'described.tools') && EntitySpec.fromObject(item.coordinates).toPath()
     ).filter(x => x)
     if (missingDefinitions.length > 0) {
       if (isFirstAttempt)

src/components/ComponentList.js

@@ -145,8 +145,9 @@ class ComponentList extends React.Component {
   render() {
     const { loadMoreRows, noRowsRenderer, list, listLength } = this.props
     const { sortOrder, contentSeq } = this.state
+    const showFilterBar = false
     return (
-      <div className="clearly-table-body flex-grow">
+      <div className={`clearly-table-body flex-grow ${showFilterBar ? 'show-filter' : ''}`}>
         <div className="clearly-header">
           <div className="table-header-fcloumn">
             <h4>Component</h4>

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'
@@ -34,7 +34,7 @@ class DefinitionEntry extends React.Component {
     }
   }
   static propTypes = {
-    onChange: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
     onCurate: PropTypes.func,
     onInspect: PropTypes.func,
     activeFacets: PropTypes.array,
@@ -60,7 +60,7 @@ class DefinitionEntry extends React.Component {
       const newChanges = { ...component.changes }
       if (isChanged && proposedValue !== null) newChanges[field] = proposedValue
       else delete newChanges[field]
-      onChange && onChange(component, newChanges, field)
+      onChange(component, newChanges, field)
     }
   }
 
@@ -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,23 @@ 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]) => {
+      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) {
+      const combinedChanges = { ...component.changes, ...newChanges }
+      onChange(component, combinedChanges)
+    }
+  }
+
   renderPanel(rawDefinition) {
     if (!rawDefinition)
       return (
@@ -201,13 +223,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 +253,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 +284,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 +316,12 @@ 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: ''
+              sourceComponent: this.getValue('described.sourceLocation'),
+              release: Contribution.printDate(this.getValue('described.releaseDate'))
             }}
-            editor={SourcePicker}
-            validator={value => true}
-            placeholder={'Source location'}
-            revertable
-            onRevert={() => onRevert('described.sourceLocation')}
+            onSave={this.handleSaveEdit}
           />
           <button onClick={this.handleModel} className="quick-edit-btn">
             Edit

src/components/FullDetailView/AbstractFullDetailsView.js

@@ -32,7 +32,8 @@ export class AbstractFullDetailsView extends Component {
 
     return modalView ? (
       <Modal
-        closable={false}
+        closable={!!this.handleClose}
+        onCancel={this.handleClose}
         footer={null}
         // if it's mobile do not center the Modal
         centered={!isMobile}
@@ -50,7 +51,6 @@ export class AbstractFullDetailsView extends Component {
             readOnly={readOnly}
             modalView={modalView}
             onChange={this.onChange}
-            handleClose={this.handleClose}
             handleSave={this.handleSave}
             handleRevert={this.handleRevert}
             previewDefinition={previewDefinition}

src/components/FullDetailView/FullDetailComponent.js

@@ -29,7 +29,6 @@ class FullDetailComponent extends Component {
     }
   }
   static propTypes = {
-    handleClose: PropTypes.func,
     handleSave: PropTypes.func,
     handleRevert: PropTypes.func,
     curations: PropTypes.object.isRequired,

src/components/FullDetailView/FullDetailPage.js

@@ -166,9 +166,9 @@ export class FullDetailPage extends AbstractFullDetailsView {
   }
 
   handleClose() {
-    const { onClose } = this.props
+    const { readOnly, onClose } = this.props
     const { changes } = this.state
-    if (isEmpty(changes)) return onClose()
+    if (readOnly || isEmpty(changes)) return onClose()
     const key = `open${Date.now()}`
     notification.open({
       message: 'Unsaved Changes',

src/components/Navigation/Pages/PageBrowse/ButtonsBar.js

@@ -21,9 +21,11 @@ export default class ButtonsBar extends Component {
             <span>&nbsp;Revert Changes</span>
           </Button>
         </ButtonWithTooltip>
-        <Button bsStyle="default" onClick={toggleCollapseExpandAll}>
-          Toggle Collapse
-        </Button>
+        {toggleCollapseExpandAll && (
+          <Button bsStyle="default" onClick={toggleCollapseExpandAll}>
+            Toggle Collapse
+          </Button>
+        )}
         <Button bsStyle="success" disabled={hasChanges} onClick={doPromptContribute} data-test-id="contribute-button">
           Contribute
         </Button>

src/components/Navigation/Pages/PageBrowse/PageBrowse.js

@@ -10,7 +10,7 @@ import difference from 'lodash/difference'
 import classNames from 'classnames'
 import { ROUTE_ROOT } from '../../../../utils/routingConstants'
 import { getCurationsAction } from '../../../../actions/curationActions'
-import { uiBrowseUpdateList, uiNavigation, uiBrowseGet } from '../../../../actions/ui'
+import { uiBrowseUpdateFilterList, uiBrowseUpdateList, uiNavigation, uiBrowseGet } from '../../../../actions/ui'
 import SystemManagedList from '../../../SystemManagedList'
 import Section from '../../../Section'
 import ComponentList from '../../../ComponentList'
@@ -34,7 +34,8 @@ class PageBrowse extends SystemManagedList {
     this.state = {
       activeSort: 'releaseDate-desc',
       searchFocused: false,
-      selectedProvider: providers[0]
+      selectedProvider: providers[0],
+      searchTerm: ''
     }
     this.onFilter = this.onFilter.bind(this)
     this.onSort = this.onSort.bind(this)
@@ -63,13 +64,19 @@ class PageBrowse extends SystemManagedList {
   }
 
   onBrowse = value => {
-    this.setState({ activeName: value }, () => this.updateData())
+    this.setState({ activeName: value, searchTerm: '' }, () => this.updateData())
   }
 
   onFocusChange = value => {
     this.setState({ searchFocused: value })
   }
 
+  onSearch = value => {
+    this.setState({ searchTerm: value })
+    const valueToSearch = this.state.selectedProvider.value + '/' + value
+    this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch))
+  }
+
   tableTitle() {
     return 'Browse'
   }
@@ -156,14 +163,17 @@ class PageBrowse extends SystemManagedList {
       <ButtonsBar
         hasChanges={!this.hasChanges()}
         revertAll={() => this.revertAll('browse')}
-        toggleCollapseExpandAll={this.toggleCollapseExpandAll}
         doPromptContribute={this.doPromptContribute}
       />
     )
   }
 
   onProviderChange(item) {
     this.setState({ selectedProvider: item })
+    if (this.state.searchTerm) {
+      const valueToSearch = item.value + '/' + this.state.searchTerm
+      this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch))
+    }
   }
 
   // Overrides the default onFilter method
@@ -332,10 +342,8 @@ class PageBrowse extends SystemManagedList {
             />
           </div>
           <div className="col-12">
-            <Section
-              className="flex-grow-column clearly-component-wrap"
-            >
-              <div className={classNames('clearly-table flex-grow', { loading: components.isFetching })}>
+            <Section className="flex-grow-column" name={this.tableTitle()} actionButton={this.renderButtons()}>
+              <div className={classNames('section-body flex-grow', { loading: components.isFetching })}>
                 <i className="fas fa-spinner fa-spin" />
                 <ComponentList
                   role="tree"
@@ -346,7 +354,6 @@ class PageBrowse extends SystemManagedList {
                   loadMoreRows={this.loadMoreRows}
                   onRevert={(definition, value) => this.revertDefinition(definition, value, 'browse')}
                   onChange={this.onChangeComponent}
-                  onInspect={this.onInspect}
                   renderFilterBar={this.renderFilterBar}
                   curations={curations}
                   definitions={definitions}

src/components/Navigation/Pages/PageBrowse/__tests__/ButtonsBar.test.js

@@ -12,7 +12,7 @@ describe('ButtonsBar', () => {
   })
 
   it("checks if buttons are enabled when there aren't changes", async () => {
-    const wrapper = await shallow(<ButtonsBar hasChanges={false} />)
+    const wrapper = await shallow(<ButtonsBar hasChanges={false} toggleCollapseExpandAll={jest.fn()} />)
     const toggleCollapseButton = wrapper.find({ children: 'Toggle Collapse' })
     expect(toggleCollapseButton.exists()).toBeTruthy()
     const contributeButton = wrapper.find({ children: 'Contribute' })
@@ -21,7 +21,9 @@ describe('ButtonsBar', () => {
   })
 
   it('checks if buttons are disabled when there are changes', async () => {
-    const wrapper = await shallow(<ButtonsBar components={components} hasChanges={true} />)
+    const wrapper = await shallow(
+      <ButtonsBar components={components} hasChanges={true} toggleCollapseExpandAll={jest.fn()} />
+    )
     const toggleCollapseButton = wrapper.find({ children: 'Toggle Collapse' })
     expect(toggleCollapseButton.exists()).toBeTruthy()
     const contributeButton = wrapper.find({ children: 'Contribute' })

src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js

@@ -5,6 +5,11 @@ import ButtonWithTooltip from '../../Ui/ButtonWithTooltip'
 import ShareButton from '../../Ui/ShareButton'
 
 export default class ButtonsBar extends Component {
+  constructor(props) {
+    super(props)
+    this.onSelect = this.onSelect.bind(this)
+  }
+
   static propTypes = {
     components: PropTypes.object,
     hasChanges: PropTypes.bool,