[TableListView] Upcoming requirements

[sebelga]

The <TableListView /> is a component used by multiple teams in different contexts. Its purpose is to provide a consistent user experience for the different content listing page across Kibana. At the same time it needs to be flexible enough to accommodate different product requirements.

There has been multiple contributions lately to the <TableListView /> component (#155716, #157988) which is awesome (🎉). It also showed that there is a need to align the vision that the SharedUX team has with the component (Content management effort, UX improvements) and the product needs of the consumers of the component.

Let's use this issue to track and gather the different teams and product requirements.

Background

Almost a year ago to the day (!) I created a meta issue to improve the previous TableListView (https://github.com/elastic/kibana-team/issues/525). We had a new design from the UI team and we split the work into multiple issues and phases to finally create the package version of the component. At some points priorities shifted and some issues were left undone.

The main tasks that were left undone were:

• Bulk actions in header and page footer ([TableListView] Bottom bar for bulk actions #135249 and [TableListView] Add option to render metadata + bulk actions in header #140185). The main reason to have the bulk action is to be able to tag multiple items at once. This task is blocked by the following issue [SavedObjectTagging] Expose flyout to assign tags to a SO #143746.
• Actions menu on table ([TableListView] Add actions to table rows #135246)

As a reference, this is the complete list of open issues for the TableListView. The oldest ones are the UX improvements left undone from the meta issue.

Content management requirements

• [CM] Usage Metrics for Kibana Content #160016

Teams requirements

• Security:
  The Security team would like to be able to "lock" the table items to only display those that contain a specific tag have a tag pre-selected when loading the table.
  There was a PR to implement it that finally didn't get merged and got closed.

• Visualisation:

  • They required multiple tabs: it's been implemented here.

  • From the conversation and mock up we can see that they would also like to extend the column (e.g. include "Usage"), have some custom bulk actions ("merge", "duplicate").

To discuss: in one of their wireframe it looks like the "tags" are moved to a dedicated column which, if implemented, would reverse the work that we did to group the title, description and tags in one column.

• The suggest to have a "preview" mode ([TableListViewTable] support preview popovers #162084). To discuss as we could also have a "grid" view.

• ResponseOps
  They consume the file management UI (which uses the table list view) and they need to link back the table item to a specific location in their app.

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[sebelga]

This is a proposal of the API that we should aim for

// The table list view "wrapped" in a KibanaPage. Occupies the full page
const ListingPage = () => {
  <TableListViewKibanaProvider {...deps}>
    <TableListViewPage>
      <TableListViewPage.Header title="" />
      <TableListView.Table {...props} />
    </TableListViewPage>
  </TableListViewKibanaProvider>;
};

// The table list view "wrapped" in a KibanaPage with Tabs
// Would have solved this https://github.com/elastic/kibana/pull/157988
const ListingPageWithTabs = () => {
  <TableListViewKibanaProvider {...deps}>
    <TableListViewPage>
      <TableListViewPage.Tabs {...tabsProps}>
        <TableListViewPage.Tab title="My Tab 1">
          <TableListView.Table {...props} />
        </TableListViewPage.Tab>
        <TableListViewPage.Tab title="My Tab 2">
          <TableListView.Table {...props} />
        </TableListViewPage.Tab>
      </TableListViewPage.Tabs>
    </TableListViewPage>
  </TableListViewKibanaProvider>;
};

// "Just" the table + search + filters (no page wrapping)
const JustTheTableEmbedded = () => {
  <TableListViewKibanaProvider {...deps}>
    <TableListView.Table {...props} /> // Our current table with "defaults"
  </TableListViewKibanaProvider>;
};

// Leave full control over the layout and what is included
const FullGranularity = () => {
  <TableListViewKibanaProvider {...deps}>
    <TableListViewBase {...props}>
      { /* HEADER */ }
      <TableListViewHeader>
        <TableListViewHeaders.Search /> // Render the search bar
        <TableListViewHeaders.Filters /> // Render the filters
      </TableListViewHeader>

      { /* TABLE */ }
      <TableListViewColumns> 
        <TableListViewColumns.Column rowSelect /> // Render the row select checkbox
        <TableListViewColumns.Column id="id" title="Id" />
        <TableListViewColumns.Column id="title" title="Title" />
        <TableListViewColumns.Column id="description" title="Description" />
        <TableListViewColumns.Column id="custom" title="Custom prop"> // Custom content column
          {(item) => <span>{item.myCustomProp}</span>}
        </TableListViewColumns.Column>
        <TableListViewColumns.Column id="actions" /> // Actions column with defaults
        <TableListViewColumns.Column id="actions">
          <TableListViewColumns.Action name="save" onClick={onClickSave} />
          <TableListViewColumns.Action name="edit" onClick={onClickEdit} />
          <TableListViewColumns.Action name="duplicate" onClick={onClickDuplicate} />
          <TableListViewColumns.Action name="more" onClick={onClickMore} />
        </TableListView.Table.Column>
      </TableListViewColumns>

      { /* FOOTER */ }
      <TableListViewFooter /> // Pagination, page size...
    </TableListViewBase>
  </TableListViewKibanaProvider>;
};

[angorayc]

Security requirements update:

Security:
The Security team would like to be able to "lock" the table items to only display those that contain a specific tag.
There was a PR to implement it that finally didn't get merged and got closed.

We no longer lock the default selected tags.
We'd like to have default selected tags, but they are still de-selectable by users.

Update: If the default selected tags do not exist, please create the tags automatically.

[vadimkibana]

From our ideation session: https://gist.github.com/vadimkibana/97e9b9bfdddf3e25bbd2203296270d5a

[vadimkibana]

Visualizations team is tracking similar work here: #166738