wba/frontend/src/js/component/wb-name-and-uuid.js

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import urlForObject from 'url-for-object';
import arvadosObjectName from 'arvados-object-name';
import arvadosTypeName from 'arvados-type-name';

class WBNameAndUuid extends Component {
  fetchData() {
    const { uuid, app, lookup } = this.props;

    if (!uuid)
      return;

    if (lookup && (uuid in lookup)) {
      this.setState({ 'item': lookup[uuid]});
      return;
    }

    const { arvHost, arvToken } = app.state;

    let prom = new Promise(accept => accept());

    if (/[0-9a-f]{32}\+[0-9]+/g.exec(uuid)) {
      let filters = [
        ['portable_data_hash', '=', uuid]
      ];
      prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/collections?filters=' +
        encodeURIComponent(JSON.stringify(filters))));
      prom = prom.then(xhr => {
        if (xhr.response.items.length === 0) {
          this.setState({
            'item': {
              'uuid': uuid,
              'name': 'Collection with portable data hash ' + uuid
            }
          });
          return;
        }
        let item = xhr.response.items[0];
        if (xhr.response.items.length > 1)
          item.name += ' +' + (xhr.response.items.length - 1) + ' others';
        this.setState({ item });
      });

    } else if (/[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(uuid)) {
      let typeName = arvadosTypeName(uuid);
      const filters = [
        ['uuid', '=', uuid]
      ];
      let prom = makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/' + typeName +
        's?filters=' + encodeURIComponent(JSON.stringify(filters)));
      prom = prom.then(xhr => {
        const item = xhr.response.items[0];
        if (!item)
          this.setState({ 'error': 'Item not found' });
        else
          this.setState({
            'item': item
          });
      });
      prom = prom.catch(xhr => {
        this.setState({
          'error': 'Unable to retrieve: ' + xhr.status + ' (' + xhr.statusText + ')'
        });
      });

    } else {
      this.setState({
        'item': {
          'uuid': uuid
        }
      });
    }
  }

  componentDidMount() {
    if (this.props.lazy)
      ;//this.setState({ item: { uuid: this.props.uuid }});
    else
      this.fetchData();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.uuid === nextProps.uuid)
      return;

    if (nextProps.lazy) {
      this.setState({ item:  null });

    } else {
      this.props = nextProps;
      this.fetchData();
    }
  }

  render({ uuid, onLinkClicked, lazy }, { error, item }) {
    if (!uuid)
      return (
        <div><i>{ String(uuid) }</i></div>
      );

    return (
      <div>
        <div>
          { error ? error : (item ? (
            <a href={ urlForObject(item) } onclick={ onLinkClicked }>{ arvadosObjectName(item) }</a>
          ) : (lazy ? null : 'Loading...')) }
        </div>
        <div>
          { uuid } { (lazy && !item) ? (
            <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
              <i class="fas fa-search"></i>
            </a>
          ) : null }
        </div>
      </div>
    );
  }
}

export default WBNameAndUuid;