wba/frontend/src/js/component/wb-project-fields.js

import { h, Component } from 'preact';
import WBTable from 'wb-table';
import makeArvadosRequest from 'make-arvados-request';
import WBAccordion from 'wb-accordion';
import WBJsonViewer from 'wb-json-viewer';
import wbFormatSpecialValue from 'wb-format-special-value';
import WBLazyInlineName from 'wb-lazy-inline-name';
import wbFormatDate from 'wb-format-date';
import wbUpdateField from 'wb-update-field';
import WBJsonEditor from 'wb-json-editor';

class WBProjectFields extends Component {
  componentDidMount() {
    this.fetchData();
  }

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

  prepareRows(item) {
    const { app } = this.props;
    const { arvHost, arvToken } = app.state;

    const rows = [
      [ 'Name', wbFormatSpecialValue(item.name) ],
      [ 'Description', wbFormatSpecialValue(item.description) ],
      [ 'Properties', (
        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
            .then(() => { item.properties = value; this.prepareRows(item); }) } />
      ) ],
      [ 'Writable by', item.writable_by
        .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
        .reduce((a, b) => [].concat(a).concat(', ').concat(b))
      ],
      [ 'Trash At', wbFormatDate(item.trash_at) ],
      [ 'Delete At', wbFormatDate(item.delete_at) ],
      [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
    ];

    this.setState({ rows });
  }

  fetchData() {
    let { uuid, app } = this.props;
    let { arvHost, arvToken } = app.state;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/groups/' + uuid);

    prom = prom.then(xhr => this.prepareRows(xhr.response));
  }

  render({}, { rows }) {
    return (
      rows ? (
        <WBTable columns={ [ "Name", "Value" ] }
          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
          rows={ rows }
          verticalHeader={ true } />
      ) : (
        <div>Loading...</div>
      )
    );
  }
}

export default WBProjectFields;