wba/frontend/src/js/dialog/wb-delete-dialog.js

import { h, Component, createRef } from 'preact';
import WBDialog from 'wb-dialog';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import linkState from 'linkstate';
import wbDeleteObject from 'wb-delete-object';
import arvadosTypeName from 'arvados-type-name';

class WBDeleteDialog extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
  }

  show(item, callback) {
    this.setState({
      'item': item,
      'callback': callback || (() => {})
    });
    this.dialogRef.current.show();
  }

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

  render({ app }, { item, callback }) {
    const { arvHost, arvToken } = app.state;

    return (
      <WBDialog title="Delete" ref={ this.dialogRef }>
        <div>
          <div class="mb-3">
            Are you sure you want to delete the following { item ? arvadosTypeName(item.uuid) : null }:
          </div>
          { item ? <WBArvadosCrumbs app={ app } uuid={ item.uuid } /> : null }
          <div>???</div>
        </div>

        <div>
          <input type="submit" class="btn btn-danger mr-2" value="Delete"
            onclick={ e => { e.preventDefault(); this.hide();
              wbDeleteObject(arvHost, arvToken, item.uuid).then(callback); } } />
          <button class="btn btn-secondary mr-2" onclick={ e => { e.preventDefault();
            this.hide(); } }>
            Cancel
          </button>
        </div>
      </WBDialog>
    );
  }
}

export default WBDeleteDialog;