Add expand/minimize button to open/close the flyout.

elastic · Jan 15, 2024 · 210c691 · 210c691
1 parent 06f9485
commit 210c691
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/columns.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/columns.tsx
@@ -15,6 +15,8 @@ import {
   EuiLink,
   EuiSkeletonRectangle,
   EuiToolTip,
+  EuiButtonIcon,
+  EuiText,
 } from '@elastic/eui';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
@@ -30,6 +32,12 @@ import { QualityIndicator, QualityPercentageIndicator } from '../quality_indicat
 import { IntegrationIcon } from '../common';
 import { useLinkToLogExplorer } from '../../hooks';
 
+const expandDatasetAriaLabel = i18n.translate('xpack.datasetQuality.expandLabel', {
+  defaultMessage: 'Expand',
+});
+const collapseDatasetAriaLabel = i18n.translate('xpack.datasetQuality.collapseLabel', {
+  defaultMessage: 'Collapse',
+});
 const nameColumnName = i18n.translate('xpack.datasetQuality.nameColumnName', {
   defaultMessage: 'Dataset Name',
 });
@@ -96,16 +104,36 @@ const degradedDocsColumnTooltip = (
   />
 );
 
-export const getDatasetQualitTableColumns = ({
+export const getDatasetQualityTableColumns = ({
   fieldFormats,
+  selectedDataset,
   setSelectedDataset,
   loadingDegradedStats,
 }: {
   fieldFormats: FieldFormatsStart;
+  selectedDataset?: DataStreamStat;
   loadingDegradedStats?: boolean;
   setSelectedDataset: Dispatch<SetStateAction<DataStreamStat | undefined>>;
 }): Array<EuiBasicTableColumn<DataStreamStat>> => {
   return [
+    {
+      name: '',
+      render: (dataStreamStat: DataStreamStat) => {
+        const isExpanded = dataStreamStat === selectedDataset;
+
+        return (
+          <EuiButtonIcon
+            size="m"
+            color="text"
+            onClick={() => setSelectedDataset(isExpanded ? undefined : dataStreamStat)}
+            iconType={isExpanded ? 'minimize' : 'expand'}
+            title={!isExpanded ? expandDatasetAriaLabel : collapseDatasetAriaLabel}
+            aria-label={!isExpanded ? expandDatasetAriaLabel : collapseDatasetAriaLabel}
+          />
+        );
+      },
+      width: '40px',
+    },
     {
       name: nameColumnName,
       field: 'title',
@@ -118,7 +146,7 @@ export const getDatasetQualitTableColumns = ({
             <EuiFlexItem grow={false}>
               <IntegrationIcon integration={integration} />
             </EuiFlexItem>
-            <EuiLink onClick={() => setSelectedDataset(dataStreamStat)}>{title}</EuiLink>
+            <EuiText size="s">{title}</EuiText>
           </EuiFlexGroup>
         );
       },

diff --git a/x-pack/plugins/dataset_quality/public/components/quality_indicator/percentage_indicator.tsx b/x-pack/plugins/dataset_quality/public/components/quality_indicator/percentage_indicator.tsx
@@ -23,7 +23,7 @@ export function QualityPercentageIndicator({ percentage = 0 }: { percentage?: nu
       : 'good';
 
   const description = (
-    <EuiText>
+    <EuiText size="s">
       <FormattedNumber value={percentage} />%
     </EuiText>
   );

diff --git a/x-pack/plugins/dataset_quality/public/hooks/use_dataset_quality_table.tsx b/x-pack/plugins/dataset_quality/public/hooks/use_dataset_quality_table.tsx
@@ -10,7 +10,7 @@ import { find, orderBy } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 import { DataStreamStat } from '../../common/data_streams_stats/data_stream_stat';
 import { tableSummaryAllText, tableSummaryOfText } from '../../common/translations';
-import { getDatasetQualitTableColumns } from '../components/dataset_quality/columns';
+import { getDatasetQualityTableColumns } from '../components/dataset_quality/columns';
 import { useDatasetQualityContext } from '../components/dataset_quality/context';
 import { getDefaultTimeRange, useKibanaContextForPlugin } from '../utils';
 
@@ -48,8 +48,14 @@ export const useDatasetQualityTable = () => {
   );
 
   const columns = useMemo(
-    () => getDatasetQualitTableColumns({ fieldFormats, setSelectedDataset, loadingDegradedStats }),
-    [fieldFormats, loadingDegradedStats]
+    () =>
+      getDatasetQualityTableColumns({
+        fieldFormats,
+        selectedDataset,
+        setSelectedDataset,
+        loadingDegradedStats,
+      }),
+    [fieldFormats, loadingDegradedStats, selectedDataset, setSelectedDataset]
   );
 
   const pagination = {