wba/frontend/src/js/dialog/wb-new-project-dialog.js

import { h, Component, createRef } from 'preact';
import WBDialog from 'wb-dialog';
import linkState from 'linkstate';
import makeArvadosRequest from 'make-arvados-request';

class WBNewProjectDialog extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
    this.state.inputId = uuid.v4();
  }

  show(ownerUuid, callback) {
    const { inputId } = this.state;
    this.setState({
      'ownerUuid': ownerUuid,
      'newName': null,
      'placeholderName': 'New Project (' + (new Date()).toISOString() + ')',
      'callback': callback || (() => {})
    });
    this.dialogRef.current.show();
    $('#' + inputId).focus();
  }

  hide() {
    this.dialogRef.current.hide();
  }

  render({ app }, { ownerUuid, newName, placeholderName, callback, inputId,
    projectDescription }) {

    const { arvHost, arvToken } = app.state;
    return (
      <WBDialog title="New Project" ref={ this.dialogRef } accept={ () => {
        const group = {
          'group_class': 'project',
          'name': newName || placeholderName,
          'description': projectDescription || null,
          'owner_uuid': ownerUuid
        };
        makeArvadosRequest(arvHost, arvToken,
          '/arvados/v1/groups', { 'method': 'POST',
          'data': JSON.stringify(group),
          'expectedStatus': [200, 202] }
        ).then(callback);
      } }>
        <div>
          <div class="form-group">
            <label for={ inputId }>Project Name</label>
            <input type="text" class="form-control" id={ inputId }
              placeholder={ placeholderName }
              value={ newName } onChange={ linkState(this, 'newName') } />
          </div>
          <div class="form-group">
            <label for="projectDescription">Project Description (optional)</label>
            <input type="text" class="form-control" id="projectDescription"
              placeholder="Project Description (optional)"
              value={ projectDescription } onChange={ linkState(this, 'projectDescription') } />
          </div>
        </div>
      </WBDialog>
    );
  }
}

export default WBNewProjectDialog;