renderUsers()

in components/base-ui/packages/base-ui/lib/parts/users/UsersList.js [115:264]

• 148 lines of code
• 8 McCabe index (conditional complexity)

  renderUsers() {
    // Read "this.mapOfUsersBeingEdited" in the "render" method here
    // The usersBeingEditedMap is then used in the ReactTable
    // If we directly use this.mapOfUsersBeingEdited in the ReactTable's cell method, MobX does not
    // realize that it is being used in the outer component's "render" method's scope
    // Due to this, MobX does not re-render the component when observable state changes.
    // To make this work correctly, we need to access "this.mapOfUsersBeingEdited" out side of ReactTable once

    const store = this.getStore();
    const usersList = store.list;
    const pageSize = usersList.length;
    const showPagination = usersList.length > pageSize;
    const processing = this.formProcessing;

    return (
      // TODO: add api token stats and active flag here in the table
      <Segment basic className="p0">
        <Dimmer active={processing} inverted>
          <Loader inverted>Updating</Loader>
        </Dimmer>
        <ReactTable
          data={usersList}
          defaultSorted={[{ id: 'lastName', desc: true }]}
          showPagination={showPagination}
          defaultPageSize={pageSize}
          className="-striped -highlight"
          filterable
          defaultFilterMethod={(filter, row) => {
            const columnValue = String(row[filter.id]).toLowerCase();
            const filterValue = filter.value.toLowerCase();
            return columnValue.indexOf(filterValue) >= 0;
          }}
          columns={[
            {
              Header: 'Username',
              accessor: 'username',
              width: 200,
            },
            {
              Header: 'Email',
              accessor: 'email',
              width: 200,
            },
            {
              Header: 'Identity Provider',
              accessor: 'identityProviderName',
              Cell: row => {
                const user = row.original;
                return user.identityProviderName || 'internal';
              },
            },
            {
              Header: 'Type',
              accessor: 'isExternalUser',
              width: 100,
              Cell: row => {
                const user = row.original;
                return user.isExternalUser ? 'External' : 'Internal';
              },
              filterMethod: filter => {
                if (filter.value.toLowerCase().includes('ex')) {
                  return false;
                }
                return true;
              },
            },
            {
              Header: 'Role',
              accessor: 'userRole',
              width: 100,
              style: { whiteSpace: 'unset' },
              Cell: row => {
                const user = row.original;
                return user.userRole || 'N/A';
              },
            },
            {
              Header: 'Status',
              accessor: 'isActive',
              width: 100,
              Cell: row => {
                const user = row.original;
                let label = null;
                if (user.status === 'active') {
                  label = (
                    <span>
                      <Label color="green">
                        <i className="check circle outline icon" />
                        Active
                      </Label>
                    </span>
                  );
                } else if (user.status === 'inactive') {
                  label = (
                    <span>
                      <Label color="red">
                        <i className="circle icon" />
                        Inactive
                      </Label>
                    </span>
                  );
                } else {
                  label = (
                    <span>
                      <Label color="orange">
                        <i className="exclamation icon" />
                        Pending
                      </Label>
                    </span>
                  );
                }
                return label;
              },
              filterMethod: (filter, row) => {
                if (row._original.status.indexOf(filter.value.toLowerCase()) >= 0) {
                  return true;
                }
                return false;
              },
            },
            {
              Header: '',
              filterable: false,
              Cell: cell => {
                const user = cell.original;
                return (
                  <div style={{ textAlign: 'center', verticalAlign: 'middle' }}>
                    <span>
                      <Popup
                        content="View User Detail"
                        trigger={
                          <UpdateUser
                            user={user}
                            adminMode
                            userStore={this.props.userStore}
                            usersStore={this.props.usersStore}
                            userRolesStore={this.props.userRolesStore}
                          />
                        }
                      />
                    </span>
                  </div>
                );
              },
            },
          ]}
        />
      </Segment>
    );
  }