Merge branch 'master' into webyourmind/e2eTests

clearlydefined · Feb 15, 2019 · a7c4157 · a7c4157
2 parents 5001ae8 + 8cb89d7
commit a7c4157
Show file tree

Hide file tree

Showing 28 changed files with 430 additions and 194 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -11,6 +11,16 @@
       "url": "http://localhost:3333",
       "webRoot": "${workspaceRoot}/src"
     },
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    },
     {
       "name": "Debug CRA Tests",
       "type": "node",

diff --git a/src/actions/definitionActions.js b/src/actions/definitionActions.js
@@ -3,18 +3,16 @@
 
 import { asyncActions } from './'
 import map from 'lodash/map'
-import chunk from 'lodash/chunk'
-import throat from 'throat'
 import {
   getDefinitions,
   getDefinition,
   previewDefinition,
   getDefinitionSuggestions,
   getSuggestedData,
-  browseDefinitions
+  searchDefinitions
 } from '../api/clearlyDefined'
 import Definition from '../utils/definition'
-import { uiBrowseUpdateList, uiDanger } from './ui'
+import { uiBrowseUpdateList } from './ui'
 import EntitySpec from '../utils/entitySpec'
 
 export const DEFINITION_LIST = 'DEFINITION_LIST'
@@ -96,21 +94,26 @@ export function getDefinitionSuggestedDataAction(token, prefix, name) {
   }
 }
 
-export function browseDefinitionsAction(token, entity, name) {
+export function browseDefinitionsAction(token, query, name) {
   return async dispatch => {
     const actions = asyncActions(name)
     dispatch(actions.start())
     try {
-      const result = await browseDefinitions(token, entity)
-      dispatch(actions.success({ add: result }))
-      const toAdd = map(result, component => EntitySpec.validateAndCreate(component.coordinates)).filter(e => e)
-      dispatch(uiBrowseUpdateList({ updateAll: toAdd }))
-      const chunks = chunk(map(toAdd, component => EntitySpec.fromCoordinates(component).toPath(), 100))
-      try {
-        await Promise.all(chunks.map(throat(10, chunk => dispatch(getDefinitionsAction(token, chunk)))))
-      } catch (error) {
-        uiDanger(dispatch, 'There was an issue retrieving components')
-      }
+      dispatch(uiBrowseUpdateList({ startQuery: true }))
+      const result = await searchDefinitions(token, query)
+      const definitions = result.data
+      dispatch(actions.success({ add: definitions }))
+      const toAdd = map(definitions, component => EntitySpec.validateAndCreate(component.coordinates)).filter(e => e)
+      if (query.continuationToken) dispatch(uiBrowseUpdateList({ addAll: toAdd, data: result.continuationToken }))
+      else dispatch(uiBrowseUpdateList({ updateAll: toAdd, data: result.continuationToken }))
+      const definitionActions = asyncActions(DEFINITION_BODIES)
+      definitions.map(component => {
+        dispatch(
+          definitionActions.success({
+            add: { [EntitySpec.fromCoordinates(component.coordinates).toPath()]: component }
+          })
+        )
+      })
     } catch (error) {
       dispatch(actions.error(error))
     }

diff --git a/src/actions/ui.js b/src/actions/ui.js
@@ -43,6 +43,11 @@ export const UI_CURATE_GET_DEFINITION_PROPOSED = 'UI_CURATE_GET_DEFINITION_PROPO
 export const UI_CURATE_DEFINITION_PREVIEW = 'UI_CURATE_DEFINITION_PREVIEW'
 export const UI_DEFINITION_REVERT = 'UI_DEFINITION_REVERT'
 
+export const UI_DEFINITIONS_GET = 'UI_DEFINITIONS_GET'
+export const UI_DEFINITIONS_UPDATE_FILTER = 'UI_DEFINITIONS_UPDATE_FILTER'
+export const UI_DEFINITIONS_UPDATE_FILTER_LIST = 'UI_DEFINITIONS_UPDATE_FILTER_LIST'
+export const UI_DEFINITIONS_UPDATE_LIST = 'UI_DEFINITIONS_UPDATE_LIST'
+
 export const UI_BROWSE_GET = 'UI_BROWSE_GET'
 export const UI_BROWSE_UPDATE_FILTER = 'UI_BROWSE_UPDATE_FILTER'
 export const UI_BROWSE_UPDATE_FILTER_LIST = 'UI_BROWSE_UPDATE_FILTER_LIST'
@@ -146,16 +151,20 @@ export function uiRevertDefinition(definition, values) {
   return revertDefinitionAction(definition, values, UI_DEFINITION_REVERT)
 }
 
-export function uiBrowseGet(token, entity) {
-  return browseDefinitionsAction(token, entity, UI_BROWSE_GET)
+export function uiBrowseGet(token, query) {
+  return browseDefinitionsAction(token, query, UI_BROWSE_GET)
 }
 
 export function uiBrowseUpdateFilter(value) {
-  return { type: UI_BROWSE_UPDATE_FILTER, value }
+  return { type: UI_DEFINITIONS_UPDATE_FILTER, value }
 }
 
 export function uiBrowseUpdateFilterList(token, prefix) {
-  return getDefinitionSuggestionsAction(token, prefix, UI_BROWSE_UPDATE_FILTER_LIST)
+  return getDefinitionSuggestionsAction(token, prefix, UI_DEFINITIONS_UPDATE_FILTER_LIST)
+}
+
+export function uiDefinitionsUpdateList(value) {
+  return { type: UI_DEFINITIONS_UPDATE_LIST, result: value }
 }
 
 export function uiBrowseUpdateList(value) {

diff --git a/src/api/clearlyDefined.js b/src/api/clearlyDefined.js
@@ -106,16 +106,16 @@ export function getContributionData(token, entity) {
   return get(url(`${CURATIONS}/pr/${entity}`), token)
 }
 
-export function browseDefinitions(token, entity) {
-  return getList(url(BROWSE, { pattern: entity }), token)
+export function searchDefinitions(token, query) {
+  return get(url(DEFINITIONS, query), token)
 }
 
 export function getDefinitions(token, list) {
   return post(url(`${DEFINITIONS}`), token, list)
 }
 
-export function getDefinitionSuggestions(token, prefix, type) {
-  return getList(url(DEFINITIONS, { pattern: prefix, type }), token)
+export function getDefinitionSuggestions(token, prefix) {
+  return getList(url(DEFINITIONS, { pattern: prefix }), token)
 }
 
 export function getSuggestedData(token, entity) {

diff --git a/src/components/ComponentList.js b/src/components/ComponentList.js
@@ -24,10 +24,6 @@ export default class ComponentList extends React.Component {
     sequence: PropTypes.number
   }
 
-  static defaultProps = {
-    loadMoreRows: () => {}
-  }
-
   constructor(props) {
     super(props)
     this.state = { contentSeq: 0, sortOrder: null, changes: {} }
@@ -65,7 +61,7 @@ export default class ComponentList extends React.Component {
 
   rowHeight({ index }) {
     const component = this.props.list[index]
-    return component.expanded ? 150 : 50
+    return component && component.expanded ? 150 : 50
   }
 
   toggleExpanded(component) {
@@ -87,6 +83,7 @@ export default class ComponentList extends React.Component {
       hideVersionSelector
     } = this.props
     const component = list[index]
+    if (!component) return
     let definition = this.getDefinition(component)
     definition = definition || { coordinates: component }
     return (

diff --git a/src/components/DefinitionEntry.js b/src/components/DefinitionEntry.js
@@ -15,7 +15,7 @@ import nuget from '../images/nuget.svg'
 import Contribution from '../utils/contribution'
 import Definition from '../utils/definition'
 import EntitySpec from '../utils/entitySpec'
-import LicensePicker from './LicensePicker'
+import LicensesRenderer from './LicensesRenderer'
 
 export default class DefinitionEntry extends React.Component {
   static propTypes = {
@@ -188,6 +188,7 @@ export default class DefinitionEntry extends React.Component {
     const unlicensedPercent = totalFiles ? this.getPercentage(unlicensed, totalFiles) : '-'
     const unattributedPercent = totalFiles ? this.getPercentage(unattributed, totalFiles) : '-'
     const { readOnly, onRevert } = this.props
+
     return (
       <Row>
         <Col md={5}>
@@ -196,16 +197,12 @@ export default class DefinitionEntry extends React.Component {
             <Col md={10} className="definition__line">
               {this.renderWithToolTipIfDifferent(
                 'licensed.declared',
-                <ModalEditor
+                <LicensesRenderer
                   field={'licensed.declared'}
-                  extraClass={this.classIfDifferent('licensed.declared')}
                   readOnly={readOnly}
                   initialValue={this.getOriginalValue('licensed.declared')}
                   value={this.getValue('licensed.declared')}
                   onChange={this.fieldChange('licensed.declared')}
-                  editor={LicensePicker}
-                  validator={value => true}
-                  placeholder={'SPDX license'}
                   revertable
                   onRevert={() => onRevert('licensed.declared')}
                 />

diff --git a/src/components/FileList/FileList.js b/src/components/FileList/FileList.js
@@ -115,15 +115,9 @@ export default class FileList extends Component {
             <LicensesRenderer
               field={`files[${row.original.id}].license`}
               readOnly={readOnly}
-              isDifferent={Contribution.ifDifferent(
-                component,
-                previewDefinition,
-                `files[${row.original.id}].license`,
-                true,
-                false
-              )}
+              initialValue={get(component.item, `files[${row.original.id}].license`)}
               value={Contribution.getValue(component.item, previewDefinition, `files[${row.original.id}].license`)}
-              onSave={license => {
+              onChange={license => {
                 this.props.onChange(`files[${row.original.id}]`, license, null, license => {
                   const attributions = Contribution.getValue(
                     component.item,

diff --git a/src/components/InfiniteList.js b/src/components/InfiniteList.js
@@ -44,16 +44,21 @@ export default class InfiniteList extends React.Component {
     }
   }
 
-  render() {
-    const { isRowLoaded, loadMoreRows, listHeight, sortOrder, contentSeq, customClassName } = this.props
+  render() 
+    const { isRowLoaded, loadMoreRows, listHeight, sortOrder, contentSeq, customClassName, threshold } = this.props
     const { totalRows, currentRows, rowHeight, rowRenderer, noRowsRenderer } = this.props
     let height = Math.min(currentRows() * 150, listHeight || 300)
     if (noRowsRenderer)
       // show noRowsRenderer won't be called with zero height
       height = Math.max(height, 200)
 
     return (
-      <InfiniteLoader isRowLoaded={isRowLoaded} loadMoreRows={loadMoreRows} rowCount={totalRows()}>
+      <InfiniteLoader
+        isRowLoaded={isRowLoaded}
+        loadMoreRows={loadMoreRows}
+        rowCount={totalRows()}
+        threshold={threshold}
+      >
         {({ onRowsRendered, registerChild }) => (
           <AutoSizer disableHeight>
             {({ width }) => (

diff --git a/src/components/InlineEditor.js b/src/components/InlineEditor.js
@@ -104,7 +104,7 @@ class InlineEditor extends React.Component {
   editors = {
     text: value => <input size="45" type="text" defaultValue={value} />,
     date: value => <input size="45" type="date" defaultValue={value} />,
-    license: value => <SpdxPicker value={value} />
+    license: value => <SpdxPicker value={value} autoFocus={true} />
   }
 
   editorDefaults = {

diff --git a/src/components/LicensesRenderer.js b/src/components/LicensesRenderer.js
@@ -1,33 +1,67 @@
 // Copyright (c) Microsoft Corporation and others. Licensed under the MIT license.
 // SPDX-License-Identifier: MIT
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import ModalEditor from './ModalEditor'
+import { InlineEditor } from './'
+import { Modal } from 'react-bootstrap'
 import LicensePicker from './LicensePicker'
 
 /**
  * Specific renderer for Licenses data
- * It show a string of data, and if clicked opens a Popover containing a list of details
+ * It show a string of data, and if clicked allows user to edit inline
+ * An advanced view will open a modal with an expression builder
  *
  */
 class LicensesRenderer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      advancedView: false
+    }
+    this.toggleAdvancedView = this.toggleAdvancedView.bind(this)
+    this.advancedPickerChange = this.advancedPickerChange.bind(this)
+  }
+
+  toggleAdvancedView() {
+    this.setState(prevState => {
+      return { advancedView: !prevState.advancedView }
+    })
+  }
+
+  advancedPickerChange(spec, onChange) {
+    onChange(spec)
+    this.setState({ advancedView: false })
+  }
+
   render() {
-    const { value, isDifferent, onSave, readOnly, field } = this.props
+    const { extraClass, field, initialValue, onChange, onRevert, onSave, readOnly, revertable, value } = this.props
+    const { advancedView } = this.state
 
     return (
-      <ModalEditor
-        field={field}
-        extraClass={isDifferent ? 'license--isEdited' : ''}
-        readOnly={readOnly}
-        type={'license'}
-        initialValue={value}
-        value={value}
-        onChange={value => onSave(value)}
-        validator
-        placeholder={readOnly ? '' : 'SPDX License'}
-        revertable={false}
-        editor={LicensePicker}
-      />
+      <div class="license-renderer">
+        <InlineEditor
+          field={field}
+          extraClass={extraClass}
+          readOnly={readOnly}
+          initialValue={initialValue}
+          value={value}
+          onChange={onChange}
+          onSave={onSave}
+          validator={() => true}
+          placeholder="SPDX license"
+          revertable={revertable}
+          onRevert={onRevert}
+          type="license"
+        />
+        <i className="fas fa-eye license-advanced" onClick={this.toggleAdvancedView} />
+        <Modal show={advancedView} onHide={this.toggleAdvancedView}>
+          <LicensePicker
+            onChange={spec => this.advancedPickerChange(spec, onChange)}
+            onClose={this.toggleAdvancedView}
+            value={value}
+          />
+        </Modal>
+      </div>
     )
   }
 }
@@ -37,7 +71,7 @@ LicensesRenderer.propTypes = {
    * item to show
    */
   value: PropTypes.string.isRequired,
-  isDifferent: PropTypes.bool,
+  extraClass: PropTypes.string,
   onSave: PropTypes.func,
   readOnly: PropTypes.bool,
   field: PropTypes.string