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 }) {
    const { arvHost, arvToken } = app.state;
    return (
      <WBDialog title="New Project" ref={ this.dialogRef } accept={ () => {
        const group = {
          'group_class': 'project',
          'name': newName || placeholderName,
          'owner_uuid': ownerUuid
        };
        makeArvadosRequest(arvHost, arvToken,
          '/arvados/v1/groups', { 'method': 'POST',
          'data': JSON.stringify(group),
          'promiseOrdering': false }
        ).then(callback);
      } }>
        <div>
          <input type="text" class="form-control" id={ inputId }
            placeholder={ placeholderName }
            value={ newName } onChange={ linkState(this, 'newName') } />
        </div>
      </WBDialog>
    );
  }
}

export default WBNewProjectDialog;