Support editing packages & usage info

Fixes #17

Author: Jacob Peddicord

browser/components/projects/acl/ProjectAclEditor.tsx

@@ -14,12 +14,10 @@
 
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 
 import { AccessLevel, AccessLevelStrength, WebProject } from '../../../../server/api/projects/interfaces';
 import history from '../../../history';
 import * as ProjectActions from '../../../modules/projects';
-import GroupSelect from './GroupSelect';
 
 interface Props {
   dispatch: (action: any) => any;

…nents/projects/editor/AddPackageForm.tsx …onents/projects/editor/PackageEditor.tsxbrowser/components/projects/editor/AddPackageForm.tsx renamed to browser/components/projects/editor/PackageEditor.tsx browser/components/projects/editor/AddPackageForm.tsx renamed to browser/components/projects/editor/PackageEditor.tsx

@@ -22,9 +22,13 @@ import * as ProjectActions from '../../../modules/projects';
 import PackageFields, { PkgOutput } from './PackageFields';
 import UsageFields from './UsageFields';
 
-interface Props {
+interface OwnProps {
+  initialPackage?: PkgOutput;
+  initialUsage?: Partial<PackageUsage>;
   onCompleted: () => any;
+}
 
+interface Props extends OwnProps {
   dispatch: (action: any) => any;
   project: WebProject;
   licenses: Map<string, any>;
@@ -39,14 +43,19 @@ interface State {
 /**
  * A form used to attach (optionally create) a package to a project.
  */
-class AddPackageForm extends Component<Props, Partial<State>> {
+class PackageEditor extends Component<Props, Partial<State>> {
+
+  static defaultProps = {
+    initialPackage: null,
+    initialUsage: {},
+  };
 
   constructor(props) {
     super(props);
 
     this.state = {
-      pkg: null,
-      usage: {},
+      pkg: props.initialPackage,
+      usage: props.initialUsage,
     };
   }
 
@@ -84,14 +93,14 @@ class AddPackageForm extends Component<Props, Partial<State>> {
   }
 
   render() {
-    const { licenses, tags } = this.props;
+    const { initialPackage, initialUsage, licenses, tags } = this.props;
     const { pkg } = this.state;
 
     // XXX: move this out of the render path?
     // collect questions from tags
     let questions = {};
-    if (pkg && pkg.license) {
-      const license = licenses.get(pkg.license);
+    const license = pkg && pkg.license && licenses.get(pkg.license);
+    if (license) {
       questions = license.tags
         .map((name) => tags[name].questions || {})
         .reduce((acc, curr) => ({
@@ -105,22 +114,35 @@ class AddPackageForm extends Component<Props, Partial<State>> {
 
     return (
       <form id="add-package-form" className="form mt-4" onSubmit={this.handleSubmit}>
-
-        <h4>Package Details</h4>
         {this.renderPackageHelp()}
-        <PackageFields onChange={this.handlePkgChanged} />
+
+        <h4>
+          Package Details{' '}
+          {initialPackage &&
+            <span className="badge badge-warning">Editing <strong>{initialPackage.name}</strong></span>
+          }
+        </h4>
+        <PackageFields
+          initial={initialPackage}
+          onChange={this.handlePkgChanged}
+        />
 
         {pkg &&
           <div>
             <h4>Usage details <small className="text-muted">In your project</small></h4>
             <UsageFields
+              initial={initialUsage}
+              questions={questions}
               onChange={this.handleUsageChanged}
-              questions={questions} />
+            />
           </div>
         }
 
         <button type="submit" className="btn btn-primary">
-          <i className="fa fa-plus" /> Add
+          {initialPackage ?
+            <span><i className="fa fa-floppy-o" /> Save Changes</span> :
+            <span><i className="fa fa-plus" /> Add</span>
+          }
         </button>
 
       </form>
@@ -136,7 +158,7 @@ class AddPackageForm extends Component<Props, Partial<State>> {
     return (
       <div className="row">
         <div className="col-md-12">
-          <div className="card">
+          <div className="card mb-3">
             <div className="card-body">
               <h5 className="card-heading">How to identify licenses and copyrights</h5>
               <div className="card-text">
@@ -173,9 +195,8 @@ class AddPackageForm extends Component<Props, Partial<State>> {
 
 }
 
-export default connect((state: any) => ({
+export default connect((state: any, props: OwnProps) => ({
   project: state.projects.active,
   licenses: state.licenses.map,
   tags: state.licenses.tags,
-}))(AddPackageForm) as React.ComponentClass<Partial<Props>>;
-// type re-casted with prop information since not all props are redux-supplied
+}))(PackageEditor);

browser/components/projects/editor/PackageFields.tsx

@@ -25,10 +25,12 @@ import FreeformSelect from '../../util/FreeformSelect';
 
 export type PkgOutput = Partial<WebPackage>;
 
-interface Props {
+interface OwnProps {
   initial?: Partial<WebPackage>;
   onChange?: (usage: PkgOutput) => void;
+}
 
+interface Props extends OwnProps {
   dispatch: (action: any) => any;
   completions: WebPackage[];
   packages: PackageActions.PackageSet;
@@ -38,7 +40,12 @@ interface Props {
 
 interface State {
   pkg: Partial<WebPackage>;
-  selectedPackage: any;
+  selectedPackage: PackageOption;
+}
+
+interface PackageOption extends Option {
+  name: string;
+  version: string;
 }
 
 interface LicenseOption extends Option {
@@ -49,7 +56,6 @@ interface LicenseOption extends Option {
 }
 
 class PackageFields extends React.Component<Props, State> {
-
   licenseOptions: LicenseOption[] = [];
   licenseMap: {[name: string]: LicenseOption} = {};
 
@@ -69,20 +75,12 @@ class PackageFields extends React.Component<Props, State> {
     const { dispatch, licenses } = this.props;
     if (licenses.length === 0) {
       dispatch(LicenseActions.fetchLicenses());
-    } else {
-      this.initLicenses();
-    }
-  }
-
-  componentWillReceiveProps() {
-    // no need to re-compute if the list was already built
-    if (this.licenseOptions.length === 0) {
-      this.initLicenses();
     }
   }
 
   componentDidMount() {
     this.attachBootstrap();
+    this.setInitialPackage();
   }
 
   componentDidUpdate() {
@@ -92,6 +90,10 @@ class PackageFields extends React.Component<Props, State> {
   initLicenses() {
     const { licenses, tags } = this.props;
 
+    if (licenses.length === 0 || this.licenseOptions.length > 0) {
+      return;
+    }
+
     for (const license of licenses) {
       // gather tag presentation data
       const {shortText, longText, fixedText} = license.tags
@@ -145,37 +147,67 @@ class PackageFields extends React.Component<Props, State> {
 
     return [
       ...options,
-      {value: filter, label: `Create package ${filter}`, create: true},
+      {value: filter, label: filter, create: true},
     ];
   }
 
+  packageOptionRenderer = (option: PackageOption) => {
+    if (option.create) {
+      return <span className="create-package-option">Create package <strong>{option.value}</strong></span>;
+    }
+
+    return <span className="package-option">{option.name} <small>{option.version}</small></span>;
+  }
+
   mapPackageCompletions = () => {
     return this.props.completions.map((item) => {
       return {
         value: item.packageId,
         label: `${item.name} (${item.version})`,
+        name: item.name,
+        version: item.version,
       };
     });
   }
 
-  isCreating = () => {
-    return this.state.pkg.packageId == null;
+  setInitialPackage = () => {
+    const { initial, packages } = this.props;
+    if (initial == null || initial.packageId == null) {
+      return;
+    }
+
+    if (this.state.selectedPackage != null) {
+      return;
+    }
+
+    const pkg = packages[initial.packageId];
+    if (pkg == null) {
+      return;
+    }
+
+    this.handlePackageChange({
+      label: `Editing ${pkg.name}`,
+      value: initial.packageId,
+      name: pkg.name,
+      version: pkg.version,
+    });
   }
 
-  handlePackageChange = (selected) => {
+  handlePackageChange = (selected: PackageOption) => {
     // empty input? clear it all
     if (selected == null || selected.value === '') {
       this.propagateState({pkg: {}, selectedPackage: null});
       return;
     }
 
-    const isCreating = selected.create === true;
+    const value = selected.value as number;
 
+    const isCreating = selected.create === true;
     if (isCreating) {
       this.propagateState({
         selectedPackage: selected,
         pkg: {
-          name: selected.value,
+          name: selected.value as string, // value is a string when accepting custom input
           version: '',
           website: '',
           license: '',
@@ -184,7 +216,7 @@ class PackageFields extends React.Component<Props, State> {
         },
       });
     } else {
-      const pkg = this.props.packages[selected.value];
+      const pkg = this.props.packages[value];
       this.propagateState({
         selectedPackage: selected,
         pkg: {
@@ -202,7 +234,6 @@ class PackageFields extends React.Component<Props, State> {
 
   handleChange = (e) => {
     const val = e.target.value;
-
     this.propagateState({pkg: {
       ...this.state.pkg,
       [e.target.name]: val,
@@ -245,13 +276,16 @@ class PackageFields extends React.Component<Props, State> {
   }
 
   render() {
+
     return <div>
       <div className="form-group" id="package-container">
         <label htmlFor="package">Package</label>
         <Select
           name="package"
           value={this.state.selectedPackage}
           options={this.mapPackageCompletions()}
+          optionRenderer={this.packageOptionRenderer}
+          valueRenderer={this.packageOptionRenderer}
           onInputChange={this.searchPackages}
           filterOptions={this.filterPackageList}
           onChange={this.handlePackageChange}
@@ -268,6 +302,8 @@ class PackageFields extends React.Component<Props, State> {
 
   renderDetails() {
     const { pkg } = this.state;
+    this.initLicenses();
+
     const needsFullLicense = this.needsFullLicense();
     const largeCopyrightStatement = this.largeCopyrightStatement();
     const license: Partial<LicenseOption> = this.licenseMap[pkg.license] ||
@@ -276,13 +312,11 @@ class PackageFields extends React.Component<Props, State> {
     return <div className="row">
 
       <div className="col-md-6">
-        {this.isCreating() &&
-          <div className="form-group">
-            <label htmlFor="packageVersion">Version</label>
-            <input type="text" name="version" id="packageVersion" className="form-control"
-              value={pkg.version} onChange={this.handleChange} />
-          </div>
-        }
+        <div className="form-group">
+          <label htmlFor="packageVersion">Version</label>
+          <input type="text" name="version" id="packageVersion" className="form-control"
+            value={pkg.version} onChange={this.handleChange} />
+        </div>
 
         <div className="form-group">
           <label htmlFor="packageLicense">License</label>
@@ -333,9 +367,9 @@ class PackageFields extends React.Component<Props, State> {
 
 }
 
-export default connect((state: any) => ({
+export default connect((state: any, props: OwnProps) => ({
   completions: state.packages.completions,
   packages: state.packages.set,
   licenses: state.licenses.list,
   tags: state.licenses.tags,
-}))(PackageFields as any) as React.ComponentClass<Partial<Props>>;
+}))(PackageFields);

browser/components/projects/editor/ProjectOnboardingForm.tsx

@@ -16,7 +16,6 @@ import * as React from 'react';
 import { Component } from 'react';
 
 import { connect } from 'react-redux';
-import { WebProject } from '../../../../server/api/projects/interfaces';
 import * as ProjectActions from '../../../modules/projects';
 import GroupSelect from '../acl/GroupSelect';