wba/frontend/src/js/dialog/wb-edit-description-dialog.js

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

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

  show(item, callback) {
    const { inputId } = this.state;
    this.setState({
      'item': item,
      'newDescription': null,
      'callback': callback || (() => {})
    });
    this.dialogRef.current.show();
    $('#' + inputId).focus();
  }

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

  render({ app }, { item, newDescription, callback, inputId }) {
    const { arvHost, arvToken } = app.state;
    return (
      <WBDialog title="Edit Description" ref={ this.dialogRef } accept={ () =>
          makeArvadosRequest(arvHost, arvToken,
            '/arvados/v1/' + arvadosTypeName(item.uuid) +
            's/' + item.uuid, {
              method: 'PUT',
              data: JSON.stringify({
                description: newDescription || null
              })
            }).then(callback)
      }>
        <div>
          <input type="text" class="form-control" id={ inputId }
            placeholder={ (item && item.description) ? item.description : 'Type new description here' }
            value={ newDescription } onChange={ linkState(this, 'newDescription') } />
        </div>
      </WBDialog>
    );
  }
}

export default WBEditDescriptionDialog;