Merge pull request #984 from clearlydefined/master

Update prod with latest changes

Author: MichaelTsengLZ

src/api/clearlyDefined.js

@@ -23,6 +23,7 @@ export const ORIGINS_PYPI = 'origins/pypi'
 export const ORIGINS_RUBYGEMS = 'origins/rubygems'
 export const ORIGINS_DEBIAN = 'origins/deb'
 export const ORIGINS_COMPOSER = 'origins/composer'
+export const ORIGINS_POD = 'origins/pod'
 export const ORIGINS = {
   github: { git: ORIGINS_GITHUB },
   npmjs: { npm: ORIGINS_NPM },
@@ -32,7 +33,8 @@ export const ORIGINS = {
   pypi: { pypi: ORIGINS_PYPI },
   rubygems: { gem: ORIGINS_RUBYGEMS },
   debian: { deb: ORIGINS_DEBIAN, debsrc: ORIGINS_DEBIAN },
-  packagist: { composer: ORIGINS_COMPOSER }
+  packagist: { composer: ORIGINS_COMPOSER },
+  cocoapods: { pod: ORIGINS_POD }
 }
 
 export function getHarvestResults(token, entity) {
@@ -218,6 +220,14 @@ export function getComposerRevisions(token, path) {
   return get(url(`${ORIGINS_COMPOSER}/${path}/revisions`), token)
 }
 
+export function getCocoaPodsSearch(token, path) {
+  return get(url(`${ORIGINS_POD}/${path}`), token)
+}
+
+export function getCocoaPodsRevisions(token, path) {
+  return get(url(`${ORIGINS_POD}/${path}/revisions`), token)
+}
+
 export function getRevisions(token, path, type, provider) {
   const origin = _.get(ORIGINS, `${provider}.${type}`)
   return get(url(`${origin}/${path}/revisions`), token)

src/components/CocoaPodsSelector.js

@@ -0,0 +1,66 @@
+// (c) Copyright 2022, SAP SE and ClearlyDefined contributors. Licensed under the MIT license.
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { getCocoaPodsSearch } from '../api/clearlyDefined'
+import { AsyncTypeahead } from 'react-bootstrap-typeahead'
+import searchSvg from '../images/icons/searchSvg.svg'
+import 'react-bootstrap-typeahead/css/Typeahead.css'
+
+export default class CocoaPodsSelector extends Component {
+  static propTypes = {
+    onChange: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = { isLoading: false, options: [], focus: true }
+    this.getOptions = this.getOptions.bind(this)
+    this.onChange = this.onChange.bind(this)
+  }
+
+  onChange(values) {
+    const { onChange } = this.props
+    const value = values.length === 0 ? null : values[0]
+    value && onChange && onChange({ type: 'pod', provider: 'cocoapods', name: value.id }, 'package')
+  }
+
+  async getOptions(value) {
+    try {
+      this.setState({ ...this.state, isLoading: true })
+      const options = await getCocoaPodsSearch(this.props.token, value)
+      this.setState({ ...this.state, options, isLoading: false })
+    } catch (error) {
+      this.setState({ ...this.state, options: [], isLoading: false })
+    }
+  }
+
+  render() {
+    const { options, isLoading, focus } = this.state
+    return (
+      <div className={`harvest-searchbar ${focus ? 'active' : ''}`}>
+        <div className="search-logo">
+          <img src={searchSvg} alt="search" />
+        </div>
+        <AsyncTypeahead
+          id="pod-selector"
+          className="harvest-search"
+          useCache={false}
+          options={options}
+          placeholder={'Pick a CocoaPod to harvest'}
+          onChange={this.onChange}
+          labelKey="id"
+          onFocus={() => this.setState({ ...this.state, focus: true })}
+          onBlur={() => this.setState({ ...this.state, focus: false })}
+          clearButton
+          highlightOnlyResult
+          emptyLabel=""
+          selectHintOnEnter
+          isLoading={isLoading}
+          onSearch={this.getOptions}
+        />
+      </div>
+    )
+  }
+}

src/components/CocoaPodsVersionPicker.js

@@ -0,0 +1,91 @@
+// (c) Copyright 2022, SAP SE and ClearlyDefined contributors. Licensed under the MIT license.
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { getCocoaPodsRevisions } from '../api/clearlyDefined'
+import Autocomplete from './Navigation/Ui/Autocomplete'
+import searchSvg from '../images/icons/searchSvg.svg'
+
+export default class CocoaPodsVersionPicker extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    request: PropTypes.object.isRequired,
+    defaultInputValue: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      customValues: [],
+      options: [],
+      focus: false
+    }
+    this.onChange = this.onChange.bind(this)
+    this.filter = this.filter.bind(this)
+  }
+
+  componentDidMount() {
+    this.getOptions('')
+  }
+
+  async getOptions(value) {
+    try {
+      const { name } = this.props.request
+      const options = await getCocoaPodsRevisions(this.props.token, name)
+      this.setState({ ...this.state, options })
+    } catch (error) {
+      this.setState({ ...this.state, options: [] })
+    }
+  }
+
+  onChange(values) {
+    const { onChange } = this.props
+    if (!onChange) return
+    let value = values.length === 0 ? null : values[0]
+    if (!value) return onChange(value)
+    if (value.customOption) {
+      value = value.label
+      this.setState({ ...this.state, customValues: [...this.state.customValues, value] })
+    }
+    onChange(value)
+  }
+
+  filter(option, props) {
+    if (this.props.request.revision) return true
+    return option.toLowerCase().indexOf(props.text.toLowerCase()) !== -1
+  }
+
+  render() {
+    const { defaultInputValue, request } = this.props
+    const selected = request.revision ? [request.revision] : []
+    const { customValues, options, focus } = this.state
+    const list = customValues.concat(options)
+    return (
+      <div className={`harvest-searchbar ${focus ? 'active' : ''}`}>
+        <div className="search-logo">
+          <img src={searchSvg} alt="search" />
+        </div>{' '}
+        <Autocomplete
+          id="cocoapods-version-picker"
+          selected={selected}
+          options={list}
+          defaultInputValue={defaultInputValue}
+          placeholder={
+            options.length === 0 ? 'Could not fetch versions, type a CocoaPod version' : 'Pick a CocoaPod version'
+          }
+          onChange={this.onChange}
+          onFocus={() => this.setState({ ...this.state, focus: true })}
+          onBlur={() => this.setState({ ...this.state, focus: false })}
+          positionFixed
+          clearButton
+          allowNew
+          newSelectionPrefix="Version:"
+          emptyLabel=""
+          filterBy={this.filter}
+          selectHintOnEnter
+        />
+      </div>
+    )
+  }
+}

src/components/DefinitionEntry.js

@@ -16,6 +16,7 @@ import nuget from '../images/nuget.svg'
 import debian from '../images/debian.png'
 import maven from '../images/maven.png'
 import composer from '../images/packagist.png'
+import pod from '../images/pod.png'
 import Contribution from '../utils/contribution'
 import Definition from '../utils/definition'
 import Curation from '../utils/curation'
@@ -425,6 +426,7 @@ class DefinitionEntry extends React.Component {
       <OverlayTrigger
         trigger="click"
         placement="left"
+        animation={false}
         rootClose
         overlay={
           <Popover title={title} id={title}>
@@ -455,6 +457,7 @@ class DefinitionEntry extends React.Component {
     if (definition.coordinates.type === 'nuget') return nuget
     if (definition.coordinates.type === 'deb') return debian
     if (definition.coordinates.type === 'composer') return composer
+    if (definition.coordinates.type === 'pod') return pod
     return null
   }
 

src/components/FileList/FileList.js

@@ -11,6 +11,8 @@ import FacetsDropdown from '../../components/FacetsDropdown'
 import Contribution from '../../utils/contribution'
 import FileListSpec from '../../utils/filelist'
 import Attachments from '../../utils/attachments'
+import ModalEditor from '../ModalEditor'
+import EnhancedLicensePicker from '../../utils/EnhancedLicensePicker'
 import folderIcon from '../../images/icons/folder.svg'
 import fileIcon from '../../images/icons/file.svg'
 import FolderOpenIcon from '@material-ui/icons/FolderOpen'
@@ -235,6 +237,16 @@ export default class FileList extends PureComponent {
     onChange(`described.facets.${facet}`, newGlobs)
   }
 
+  onLicenseChange = (record, license) => {
+    const { onChange, component, previewDefinition } = this.props
+    const attributions = Contribution.getValue(component.item, previewDefinition, `files[${record.id}].attributions`)
+    onChange(`files[${record.id}]`, license, null, license => ({
+      path: record.path,
+      license,
+      ...(attributions ? { attributions } : {})
+    }))
+  }
+
   onDirectorySelect = e => {
     let tempdata = this.state.breadcrumbs
     tempdata.push(e)
@@ -281,6 +293,25 @@ export default class FileList extends PureComponent {
     )
   }
 
+  renderLicenseCell = (value, record) => {
+    const { readOnly, component, previewDefinition } = this.props
+    const field = `files[${record.id}].license`
+    const editor = EnhancedLicensePicker
+    return (
+      !record.children && (
+        <ModalEditor
+          revertable={false}
+          field={field}
+          readOnly={readOnly}
+          initialValue={get(component.item, field)}
+          value={Contribution.getValue(component.item, previewDefinition, field)}
+          placeholder={'SPDX license'}
+          editor={editor}
+          onChange={license => this.onLicenseChange(record, license)} />
+      )
+    )
+  }
+
   render() {
     const { definition, component, previewDefinition } = this.props
     const { expandedRows, searchText, filteredFiles, files } = this.state
@@ -359,14 +390,8 @@ export default class FileList extends PureComponent {
         //       }}
         //     />
         //   ),
-        render: (value, record) => {
-          let license = Contribution.getValue(component.item, previewDefinition, `files[${record.id}].license`)
-          return (
-            !record.children &&
-            (license ? <p className="text-black">{license}</p> : <p className="text-gray">SPDX license</p>)
-          )
-        },
-        width: '15%'
+        render: this.renderLicenseCell,
+        width: '20%'
       },
       {
         title: 'Copyrights',
@@ -376,31 +401,6 @@ export default class FileList extends PureComponent {
         // ...this.getColumnSearchProps('attributions'),
         render: (value, record) => this.renderCopyrightCell(record, component, previewDefinition),
         width: '25%'
-      },
-      {
-        title: '',
-        dataIndex: 'edit',
-        key: 'edit',
-        className: 'edit-data',
-        // ...this.getColumnSearchProps('attributions'),
-        render: (value, record) =>
-          !record.children && (
-            <svg
-              className="edit-icon"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M22.5 19.5H1.5V21H22.5V19.5Z" fill="#383A43" />
-              <path
-                d="M19.05 6.75C19.65 6.15 19.65 5.25 19.05 4.65L16.35 1.95C15.75 1.35 14.85 1.35 14.25 1.95L3 13.2V18H7.8L19.05 6.75ZM15.3 3L18 5.7L15.75 7.95L13.05 5.25L15.3 3ZM4.5 16.5V13.8L12 6.3L14.7 9L7.2 16.5H4.5Z"
-                fill="#383A43"
-              />
-            </svg>
-          ),
-        width: '5%'
       }
     ]
 

src/components/Footer.js

@@ -34,10 +34,11 @@ export default class Footer extends Component {
             <SocialIcons className="clearly-footer-socials pb-2" entity={socials} />
             <div className="col-md-8">
               <p class="mb-0">
-                ClearlyDefined was created by
-                <Link to="/" className="mx-1 highlighted-link-blue">Microsoft</Link>
-                in partnership with the
-                <Link to="/" className="mx-1 highlighted-link-blue">Open Source Initiative.</Link>
+                ClearlyDefined is an 
+                <a href="https://opensource.org" className="mx-1 highlighted-link-blue">OSI</a> incubator project, 
+                originally contributed with ❤️ by 
+                <a href="https://opensource.microsoft.com" className="mx-1 highlighted-link-blue">Microsoft</a> 
+                and maintained by a growing community.
               </p>
             </div>
             <div className="col-md-4 footer-links col-12 ml-md-auto mt-md-0 mt-4">

src/components/HarvestQueueList.js

@@ -15,7 +15,8 @@ import {
   DebianVersionPicker,
   NuGetVersionPicker,
   RubyGemsVersionPicker,
-  ComposerVersionPicker
+  ComposerVersionPicker,
+  CocoaPodsVersionPicker
 } from './'
 import { getGitHubRevisions } from '../api/clearlyDefined'
 import { clone } from 'lodash'
@@ -28,6 +29,7 @@ import cargo from '../images/cargo.png'
 import maven from '../images/maven.png'
 import nuget from '../images/nuget.png'
 import composer from '../images/packagist.png'
+import pod from '../images/pod.png'
 
 class HarvestQueueList extends React.Component {
   static propTypes = {
@@ -39,7 +41,7 @@ class HarvestQueueList extends React.Component {
   }
 
   static defaultProps = {
-    loadMoreRows: () => {}
+    loadMoreRows: () => { }
   }
 
   constructor(props) {
@@ -106,6 +108,9 @@ class HarvestQueueList extends React.Component {
         {request.provider === 'packagist' && (
           <ComposerVersionPicker request={request} onChange={this.versionChanged.bind(this, request)} />
         )}
+        {request.provider === 'cocoapods' && (
+          <CocoaPodsVersionPicker request={request} onChange={this.versionChanged.bind(this, request)} />
+        )}
         <i className="fas fa-times list-trash" onClick={this.removeRequest.bind(this, request)} />
       </div>
     )
@@ -150,6 +155,7 @@ class HarvestQueueList extends React.Component {
     if (request.provider === 'nuget') return nuget
     if (request.provider === 'debian') return debian
     if (request.provider === 'packagist') return composer
+    if (request.provider === 'cocoapods') return pod
     return null
   }
 
@@ -161,7 +167,7 @@ class HarvestQueueList extends React.Component {
   renderRow({ index, key, style }) {
     const { list } = this.props
     const request = list[index]
-    const clickHandler = () => {}
+    const clickHandler = () => { }
     return (
       <div key={key} style={style} className="component-row">
         <TwoLineEntry