this.handleCellChange(newValue)}
          maxLength="200"
          cols="50"
          rows="4"
        />
        <Icon
          fa="check-circle action-icon save-icon"
          onClick={() => this.handleCellSave(key)}
        />
        <Icon
          fa="times action-icon cancel-icon"
          onClick={() => this.handleCellCancel()}
        />
      </div>
    ) : (
      <div style={editContainerStyle}>
        <div>
          {value ? escape(value) : <span className="faded">This favorite has no notes.</span>}
        </div>
        <div style={editStyle}>
          <a
            onClick={() => this.handleEditClick(rowIndex, columnIndex, key, row, value)}
            className="edit-link"
            title="Edit This Favorite's Project Grouping"
          >
            <Icon fa="pencil" />
          </a>
        </div>
      </div>
    )
  }

renderCountSummary() {
    const counts = this.countFavoritesByType();
    const recordClasses = Object.keys(counts);
    const output = recordClasses.map((recordClass, idx) => {
      let type = this.getRecordClassByName(recordClass);
      let name = type ? type.displayNamePlural : 'Unknown';
      let { filterByType } = this.props;
      let className = 'Favorites-GroupCount ' + (filterByType && filterByType === recordClass ? 'active' : 'inactive');
      return (
        <span
          onClick={() => this.handleTypeFilterClick(recordClass)}
          className={className}
          key={idx}>
          {name}: {counts[recordClass]}
        </span>
      );
    });

return (
      <div className="Favorites-CountList">{output}</div>
    );
  }

// Table event handlers =====================================================

onRowSelect({ id }) {
    const { favoritesEvents } = this.props;
    const { updateSelection } = favoritesEvents;
    updateSelection({ selectIds: [id] });
  }

onRowDeselect({ id }) {
    const { favoritesEvents } = this.props;
    const { updateSelection } = favoritesEvents;
    updateSelection({ deselectIds: [id] })
  }

onMultipleRowSelect(rows) {
    const { favoritesEvents } = this.props;
    const ids = rows.map(row => row.id);
    const { updateSelection } = favoritesEvents;
    updateSelection({ selectIds: ids });
  }

onMultipleRowDeselect(rows) {
    const { favoritesEvents } = this.props;
    const ids = rows.map(row => row.id);
    const { updateSelection } = favoritesEvents;
    updateSelection({ deselectIds: ids })
  }

onSort({ key }, direction) {
    const { favoritesEvents } = this.props;
    const { sortColumn } = favoritesEvents;
    sortColumn(key, direction);
  }

// Table config generators =================================================

getTableActions() {
    const { favoritesEvents, tableState } = this.props;
    const { deleteFavorites } = favoritesEvents;
    return [
      {
        selectionRequired: true,
        element(selection) {
          return (
            <button className="btn btn-error">
              <Icon fa="trash" /> Remove {selection.length ? selection.length + ' favorite' + (selection.length === 1 ? '' : 's') : ''}
            </button>
          );
        },
        callback: (selection) => {
          deleteFavorites(tableState, selection);
          this.createDeletedBanner(selection);
        }
      }
    ];
  }

getTableOptions() {
    const { searchBoxPlaceholder, tableSelection } = this.props;

return {
      useStickyHeader: true,
      selectedNoun: 'Favorite',
      selectedPluralNoun: 'Favorites',
      tableBodyMaxHeight: 'calc(100vh - 80px)',
      renderEmptyState: this.renderEmptyState,
      searchPlaceholder: searchBoxPlaceholder,
      isRowSelected({ id }) {
        return tableSelection.includes(id);
      }
    };
  }

getTableColumns() {
    const { renderIdCell, renderTypeCell, renderNoteCell, renderGroupCell } = this;
    return [
      {
        key: 'displayName',
        name: 'ID',
        renderCell: renderIdCell,
        width: '15%',
        sortable: true,
      },
      {
        key: 'recordClassName',
        name: 'Type',
        renderCell: renderTypeCell,
        width: '25%',
        sortable: true
      },
      {
        key: 'description',
        name: 'Notes',
        renderCell: renderNoteCell,
        width: '40%',
        sortable: true,
        helpText: 'Use this column to add notes. Click the pencil icon to edit the cell\'s contents.'
      },
      {
        key: 'group',
        name: 'Project',
        renderCell: renderGroupCell,
        width: '20%',
        sortable: true,
        helpText: 'Organize your favorites by group names. IDs with the same group name will be sorted together once the page is refreshed. Click the pencil icon to edit the cell\'s contents.'
      }
    ];
  }

getTableEventHandlers() {
    const { onSort, onRowSelect, onMultipleRowSelect, onRowDeselect, onMultipleRowDeselect } = this;
    return {
      onSort,
      onRowSelect,
      onRowDeselect,
      onMultipleRowSelect,
      onMultipleRowDeselect
    }
  }

render() {
    let { banners } = this.state;
    let { recordClasses, tableState, searchText, searchBoxPlaceholder, searchBoxHelp, user } = this.props;
    let { renderIdCell, renderTypeCell, renderNoteCell, renderGroupCell } = this;

tableState = MesaState.setOptions(tableState, this.getTableOptions());
    tableState = MesaState.setActions(tableState, this.getTableActions());
    tableState = MesaState.setColumns(tableState, this.getTableColumns());
    tableState = MesaState.setEventHandlers(tableState, this.getTableEventHandlers());
    tableState = MesaState.setFilteredRows(tableState, sortedFilteredRows);
    tableState = MesaState.setEmptinessCulprit(tableState, rows.length && !filteredRows.length ? 'search' : null);

const CountSummary = this.renderCountSummary;

if (!recordClasses) return null;
    if (user.isGuest) return (<div className="empty-message">You must login first to use favorites</div>);

return (
      <div className="wdk-Favorites">
        <h1 className="page-title">Favorites</h1>
        <CountSummary />
        <BannerList onClose={this.handleBannerClose} banners={banners} />
        <Mesa state={tableState}>
          <RealTimeSearchBox
            className="favorites-search-field"
            autoFocus={false}
            searchTerm={searchText}
            onSearchTermChange={this.handleSearchTermChange}
            placeholderText={searchBoxPlaceholder}
            helpText={searchBoxHelp}
          />
        </Mesa>
      </div>
    );
  }

handleTypeFilterClick(recordType) {
    const { filterByType, favoritesEvents } = this.props;
    const active = recordType === filterByType;
    favoritesEvents.filterByType(active ? null : recordType);
  }

/**
   * Calls appropriate handler when any edit link is pressed.  Because the switch between the cell contents and the
   * in-line edit form can alter row height, the CellMeasurer cache is cleared.
   * @param rowIndex
   * @param columnIndex
   * @param dataKey
   * @param rowData
   * @param cellData
   * @private
   */
  handleEditClick(rowIndex, columnIndex, dataKey, rowData, cellData) {
    this.props.favoritesEvents.editCell({
      coordinates: {
        row: rowIndex,
        column: columnIndex
      },
      key: dataKey,
      value: cellData,
      rowData: rowData
    });
  }

/**
   * Calls appropriate handler when changes are made to content during an in-line edit.
   * @param value - edited value
   * @private
   */
  handleCellChange(value) {
    this.props.favoritesEvents.changeCell(value);
  }

/**
   * Calls appropriate handler when an in-line edit save button is clicked.  A new favorite is sent back to the handler
   * with the original favorite information updated with the edited value.  Again, because this event collapses the
   * in-line edit form, which can alter row height, the CellMeasurer cache is cleared.
   * @param dataKey - the property of the favorite that was edited (group or note here)
   * @private
   */
  handleCellSave(dataKey) {
    const { tableState, editValue, existingFavorite, favoritesEvents } = this.props;
    const favorite = Object.assign({}, existingFavorite, { [dataKey]: editValue });
    favoritesEvents.saveCellData(tableState, favorite);
  }

/**
   * Calls appropriate handler when the in-line edit changes are discarded.  Again, because this event collapses the
   * in-line edit form, which can alter row height, the CellMeasure cache is cleared.
   * @private
   */
  handleCellCancel() {
    this.props.favoritesEvents.cancelCellEdit();
  }

/**
   * A workaround that watches an cell input (specifically the group editor) and, when "enter" is pressed, submits
   * the relevant cell for saving.
   * @param e - Keypress event
   * @param dataKey - cell data key to pass along for saving
  **/
  handleEnterKey(e, dataKey) {
    if (e.key !== 'Enter' || !dataKey) return;
    this.handleCellSave(dataKey);
  }

handleRowDelete(row) {
    const { tableState, favoritesEvents } = this.props;
    favoritesEvents.deleteFavorites(tableState, [row]);
    this.onRowDeselect(row);
  }

handleUndoDelete(row) {
    const { tableState, favoritesEvents } = this.props;
    favoritesEvents.undeleteFavorites(tableState, [row]);
  }

handleBulkUndoDelete(rows) {
    const { tableState, favoritesEvents } = this.props;
    favoritesEvents.undeleteFavorites(tableState, rows);
  }

getDataKeyTooltip(dataKey) {
    switch (dataKey) {
      case 'display':
        return 'This links back to your favorite';
      case 'recordClassName':
        return 'This is the type of your favorite';
      case 'note':
        return 'Use this column to add notes (click edit to change this field).';
      case 'group':
        return 'Organize your favorites by project names';
      default:
        return '';
    };
  }

getRecordClassByName(recordClassName) {
    let { recordClasses } = this.props;
    return recordClasses.find(({ fullName }) => fullName === recordClassName);
  }
}

export default wrappable(withRouter(FavoritesList));