[Discover] Replace doc viewer table with EuiInMemoryTable

[kertal]

One piece of legacy to remove, the doc viewer table using bootstrap of Discover should be replaced with EuiInMemoryTable

Other small thing I noticed in here (and can wait) is that we really need to replace the doc viewer table that shows in the expanded flyout to use an EuiTable. Right now it's using Bootstrap, and we're looking to remove that next minor.

Originally posted by @snide in #67259 (comment)

Here's the very quick mocking code for this, adapted in

https://github.com/elastic/kibana/blob/65251051fdcb948bfb0bc03ad211b851bdb877bd/src/plugins/discover/public/application/components/table/table.tsx

const usedColumns = [
    {
      field: 'action',
      name: 'Action',
      width: 100,
      sortable: false,
      render: () => (
        <>
          <EuiButtonIcon
            aria-label={i18n.translate('discover.docViews.table.filterForValueButtonAriaLabel', {
              defaultMessage: 'Filter for value',
            })}
            className="kbnDocViewer__actionButton"
            data-test-subj="addInclusiveFilterButton"
            iconType={'plusInCircle'}
            iconSize={'s'}
          />
          <DocViewTableRowBtnFilterRemove disabled={false} onClick={() => void 0} />
          <DocViewTableRowBtnToggleColumn active={true} onClick={() => void 0} />
          <DocViewTableRowBtnFilterExists disabled={false} onClick={() => void 0} />
        </>
      ),
    },
    {
      field: 'field',
      name: 'Field',
      sortable: true,
      truncateText: false,
      render: (field) => <FieldName fieldName={field} fieldType={'string'} />,
    },
    {
      field: 'value',
      name: 'Value',
    },
  ];

  return (
    <EuiInMemoryTable
      items={table}
      columns={usedColumns}
      pagination={true}
    />
  );

Looks like this:

Requirements

• It should work like the legacy table in terms of functionality, no truncation of values
• Only pagination should be added (Why: better performance for large documents) - Suggesting to show 100 rows per page
• Multi fields should no longer have 2 rows, so it would need a different solution (An icon with tooltip for example? Or just adding multi field as bold text to the field name?), reminder, that's how it looks like today:

FYI: @andreadelrio & @ryankeairns for design input

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[andreadelrio]

One piece of legacy to remove, the doc viewer table using bootstrap of Discover should be replaced with EuiInMemoryTable

Other small thing I noticed in here (and can wait) is that we really need to replace the doc viewer table that shows in the expanded flyout to use an EuiTable. Right now it's using Bootstrap, and we're looking to remove that next minor.

Originally posted by @snide in #67259 (comment)

Here's the very quick mocking code for this, adapted in

https://github.com/elastic/kibana/blob/65251051fdcb948bfb0bc03ad211b851bdb877bd/src/plugins/discover/public/application/components/table/table.tsx

const usedColumns = [
    {
      field: 'action',
      name: 'Action',
      width: 100,
      sortable: false,
      render: () => (
        <>
          <EuiButtonIcon
            aria-label={i18n.translate('discover.docViews.table.filterForValueButtonAriaLabel', {
              defaultMessage: 'Filter for value',
            })}
            className="kbnDocViewer__actionButton"
            data-test-subj="addInclusiveFilterButton"
            iconType={'plusInCircle'}
            iconSize={'s'}
          />
          <DocViewTableRowBtnFilterRemove disabled={false} onClick={() => void 0} />
          <DocViewTableRowBtnToggleColumn active={true} onClick={() => void 0} />
          <DocViewTableRowBtnFilterExists disabled={false} onClick={() => void 0} />
        </>
      ),
    },
    {
      field: 'field',
      name: 'Field',
      sortable: true,
      truncateText: false,
      render: (field) => <FieldName fieldName={field} fieldType={'string'} />,
    },
    {
      field: 'value',
      name: 'Value',
    },
  ];

  return (
    <EuiInMemoryTable
      items={table}
      columns={usedColumns}
      pagination={true}
    />
  );

Looks like this:

Requirements

• It should work like the legacy table in terms of functionality, no truncation of values
• Only pagination should be added (Why: better performance for large documents) - Suggesting to show 100 rows per page
• Multi fields should no longer have 2 rows, so it would need a different solution (An icon with tooltip for example? Or just adding multi field as bold text to the field name?), reminder, that's how it looks like today:

FYI: @andreadelrio & @ryankeairns for design input

@kertal I can provide some mocks for this. I can't remember... did we consider the EuiBadge+tooltip combo to label multifieds?

[kertal]

@kertal I can provide some mocks for this. I can't remember... did we consider the EuiBadge+tooltip combo to label multifieds?

@andreadelrio well, don't think we considered it. think an badge or icon with explanations would be fine 👍

[andreadelrio]

Attaching a mock for this. How do you all feel about moving the Actions columns to the end? Many apps show actions on hover on the right (e.g. Gmail when hovering emails on your inbox).

@kertal what content would make sense for the tooltip?

[kertal]

Attaching a mock for this. How do you all feel about moving the Actions columns to the end? Many apps show actions on hover on the right (e.g. Gmail when hovering emails on your inbox).

@kertal what content would make sense for the tooltip?

@andreadelrio thx, sorry for the late reply, overseen the notification. For the tooltip I'm adding @gchaps @shaunmcgough. so how could we explain multi fields in a sentence?

[shaunmcgough]

I agree with this design, it's elegant and relevant. My one question is in regards to the tooltip. Does it popup automatically, or do you have to click 'multifield'. I would prefer you to have to click it. The text should be relatively easy for @gchaps and I. Perhaps something like "Multifields can have multiple values per field".

[kertal]

Ah yes, one adding, actions should stay on the left side, you know we changed that recently, but had to change it back , users with large screen riot! Andrea Del Rio ***@***.***> schrieb am Mo. 14. Juni 2021 um 21:09:

…

[image: Screen Recording 2021-06-14 at 12 00 14 PM] <https://user-images.githubusercontent.com/4016496/121945838-13788f80-cd09-11eb-849a-6975197b782a.gif> Attaching a mock for this. How do you all feel about moving the Actions columns to the end? Many apps show actions on hover on the right (e.g. Gmail when hovering emails on your inbox). @kertal <https://github.com/kertal> what content would make sense for the tooltip? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#86757 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADRH26UMVUBBGIXZ6JLW7LTSZHXBANCNFSM4VFR57ZA> .

[andreadelrio]

I agree with this design, it's elegant and relevant. My one question is in regards to the tooltip. Does it popup automatically, or do you have to click 'multifield'. I would prefer you to have to click it. The text should be relatively easy for @gchaps and I. Perhaps something like "Multifields can have multiple values per field".

I would recommend that the tooltip appears on hover which is the usual behavior. Badges can have onClick actions but displaying a tooltip is not usually one of them.

[gchaps]

We use "multi-field" with a hyphen, so we should use that in both the text and the badge.

Multi-fields can have multiple values per field.