allow column to proper resize

Signed-off-by: Anan Z <ananzh@amazon.com>

CHANGELOG.md

@@ -737,6 +737,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [VisBuilder] Enable persistence for app filter and query without using state containers ([#3100](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3100))
 - [Data] Make the newly created configurations get added to beginning of the `aggConfig` array when using `createAggConfig` ([#3160](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3160))
 - [Optimizer] Increase the amount of time an optimizer worker is provided to exit before throwing an error ([#3193](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3193))
+- [Discover] Remove empty space when resize datagrid table in Discover and Allow saving column width in both Discover and Dashboards Embeddable ([#5883](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5883))
 
 ### 🐛 Bug Fixes
 

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -6,7 +6,7 @@
 import './_data_grid_table.scss';
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
+import { EuiDataGrid, EuiDataGridSorting, EuiPanel, EuiDataGridProps } from '@elastic/eui';
 import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -26,9 +26,11 @@ import { LegacyDiscoverTable } from '../default_discover_table/default_discover_
 import { getNewDiscoverSetting } from '../utils/local_storage';
 import { SortDirection, SortOrder } from '../../../saved_searches/types';
 import { useToolbarOptions } from './data_grid_toolbar';
+import { ColumnWidths } from './data_grid_table_columns';
 
 export interface DataGridTableProps {
   columns: string[];
+  columnWidths?: ColumnWidths;
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
@@ -38,6 +40,7 @@ export interface DataGridTableProps {
   onSort: (s: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
+  onColumnResize: ({ columnId, width }: { columnId: string; width: number }) => void;
   sort: SortOrder[];
   displayTimeColumn: boolean;
   title?: string;
@@ -50,13 +53,15 @@ export interface DataGridTableProps {
 
 export const DataGridTable = ({
   columns,
+  columnWidths,
   indexPattern,
   onAddColumn,
   onFilter,
   onMoveColumn,
   onRemoveColumn,
   onSetColumns,
   onSort,
+  onColumnResize,
   sort,
   hits,
   rows,
@@ -123,9 +128,17 @@ export const DataGridTable = ({
         indexPattern,
         displayTimeColumn,
         includeSourceInColumns,
-        isContextView
+        isContextView,
+        columnWidths
       ),
-    [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
+    [
+      adjustedColumns,
+      indexPattern,
+      displayTimeColumn,
+      includeSourceInColumns,
+      isContextView,
+      columnWidths,
+    ]
   );
 
   const dataGridTableColumnsVisibility = useMemo(
@@ -214,6 +227,7 @@ export const DataGridTable = ({
         sorting={sorting}
         toolbarVisibility={isToolbarVisible ? toolbarOptions : false}
         rowHeightsOptions={rowHeightsOptions}
+        onColumnResize={onColumnResize}
         className="discoverDataGrid"
       />
     ),
@@ -228,6 +242,7 @@ export const DataGridTable = ({
       isToolbarVisible,
       toolbarOptions,
       rowHeightsOptions,
+      onColumnResize,
     ]
   );
 

src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx

@@ -8,30 +8,47 @@ import { i18n } from '@osd/i18n';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { getCellActions } from './data_grid_table_cell_actions';
 
+export interface ColumnWidth {
+  width?: number;
+}
+
+export interface ColumnWidths {
+  [columnName: string]: ColumnWidth;
+}
+
 export function buildDataGridColumns(
   columnNames: string[],
   idxPattern: IndexPattern,
   displayTimeColumn: boolean,
   includeSourceInColumns: boolean,
-  isContextView: boolean
+  isContextView: boolean,
+  columnWidths?: ColumnWidths
 ) {
   const timeFieldName = idxPattern.timeFieldName;
   let columnsToUse = columnNames;
+  const getColumnWidth = (columnName: string) => columnWidths?.[columnName]?.width ?? 0;
 
   if (displayTimeColumn && timeFieldName && !columnNames.includes(timeFieldName)) {
     columnsToUse = [timeFieldName, ...columnNames];
   }
 
   return columnsToUse.map((colName) =>
-    generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView)
+    generateDataGridTableColumn(
+      colName,
+      idxPattern,
+      includeSourceInColumns,
+      isContextView,
+      getColumnWidth(colName)
+    )
   );
 }
 
 export function generateDataGridTableColumn(
   colName: string,
   idxPattern: IndexPattern,
   includeSourceInColumns: boolean,
-  isContextView: boolean
+  isContextView: boolean,
+  columnWidth: number | undefined = 0
 ) {
   const timeLabel = i18n.translate('discover.timeLabel', {
     defaultMessage: 'Time',
@@ -69,6 +86,9 @@ export function generateDataGridTableColumn(
       defaultMessage: 'Source',
     });
   }
+  if (columnWidth > 0) {
+    dataGridCol.initialWidth = Number(columnWidth);
+  }
   return dataGridCol;
 }
 

src/plugins/discover/public/application/components/doc_views/context_app.tsx

@@ -104,6 +104,7 @@ export function ContextApp({
           onRemoveColumn={() => {}}
           onSetColumns={() => {}}
           onSort={() => {}}
+          onColumnResize={() => {}}
           sort={sort}
           rows={rows}
           displayTimeColumn={displayTimeColumn}

src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx

@@ -92,6 +92,7 @@ export const getTopNavLinks = (
 
         savedSearch.columns = state.columns;
         savedSearch.sort = state.sort;
+        savedSearch.columnWidths = state.columnWidths;
 
         try {
           const id = await savedSearch.save(saveOptions);

src/plugins/discover/public/application/utils/state_management/discover_slice.tsx

@@ -12,6 +12,7 @@ import { buildColumns } from '../columns';
 import * as utils from './common';
 import { SortOrder } from '../../../saved_searches/types';
 import { DEFAULT_COLUMNS_SETTING, PLUGIN_ID } from '../../../../common';
+import { ColumnWidth, ColumnWidths } from '../../components/data_grid/data_grid_table_columns';
 
 export interface DiscoverState {
   /**
@@ -52,6 +53,7 @@ export interface DiscoverState {
      */
     lineCount?: number;
   };
+  columnWidths?: ColumnWidths;
 }
 
 export interface DiscoverRootState extends RootState {
@@ -86,6 +88,7 @@ export const getPreloadedState = async ({
       preloadedState.state.columns = savedSearchInstance.columns;
       preloadedState.state.sort = savedSearchInstance.sort;
       preloadedState.state.savedSearch = savedSearchInstance.id;
+      preloadedState.state.columnWidths = savedSearchInstance.columnWidths;
       const indexPatternId = savedSearchInstance.searchSource.getField('index')?.id;
       preloadedState.root = {
         metadata: {
@@ -166,6 +169,11 @@ export const discoverSlice = createSlice({
         interval: action.payload,
       };
     },
+    setColumnWidths(state, action: PayloadAction<{ columnName: string; width: number }>) {
+      const { columnName, width } = action.payload;
+      if (!state.columnWidths) state.columnWidths = {};
+      state.columnWidths[columnName] = { width };
+    },
     updateState(state, action: PayloadAction<Partial<DiscoverState>>) {
       return {
         ...state,
@@ -200,6 +208,7 @@ export const {
   setColumns,
   setSort,
   setInterval,
+  setColumnWidths,
   setState,
   updateState,
   setSavedSearchId,

src/plugins/discover/public/application/view_components/canvas/discover_table.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
+import { EuiDataGridProps } from '@elastic/eui';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -12,9 +13,9 @@ import {
   addColumn,
   moveColumn,
   removeColumn,
-  reorderColumn,
   setColumns,
   setSort,
+  setColumnWidths,
   useDispatch,
   useSelector,
 } from '../../utils/state_management';
@@ -41,7 +42,7 @@ export const DiscoverTable = ({ rows }: Props) => {
   } = services;
 
   const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
-  const { columns, sort } = useSelector((state) => state.discover);
+  const { columns, sort, columnWidths } = useSelector((state) => state.discover);
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => {
     if (indexPattern && capabilities.discover?.save) {
@@ -85,6 +86,14 @@ export const DiscoverTable = ({ rows }: Props) => {
     },
     [filterManager, indexPattern]
   );
+
+  const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
+    ({ columnId, width }: { columnId: string; width: number }) => {
+      dispatch(setColumnWidths({ columnName: columnId, width }));
+    },
+    [dispatch]
+  );
+
   const displayTimeColumn = useMemo(
     () => !!(!uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased()),
     [indexPattern, uiSettings]
@@ -103,13 +112,15 @@ export const DiscoverTable = ({ rows }: Props) => {
   return (
     <DataGridTable
       columns={columns}
+      columnWidths={columnWidths}
       indexPattern={indexPattern}
       onAddColumn={onAddColumn}
       onFilter={onAddFilter as DocViewFilterFn}
       onMoveColumn={onMoveColumn}
       onRemoveColumn={onRemoveColumn}
       onSetColumns={onSetColumns}
       onSort={onSetSort}
+      onColumnResize={onColumnResize}
       sort={sort}
       rows={rows}
       displayTimeColumn={displayTimeColumn}

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -69,7 +69,9 @@ export type RefetchSubject = Subject<SearchRefetch>;
 export const useSearch = (services: DiscoverViewServices) => {
   const initalSearchComplete = useRef(false);
   const [savedSearch, setSavedSearch] = useState<SavedSearch | undefined>(undefined);
-  const { savedSearch: savedSearchId, sort, interval } = useSelector((state) => state.discover);
+  const { savedSearch: savedSearchId, sort, interval, columnWidths } = useSelector(
+    (state) => state.discover
+  );
   const { data, filterManager, getSavedSearchById, core, toastNotifications, chrome } = services;
   const indexPattern = useIndexPattern(services);
   const timefilter = data.query.timefilter.timefilter;

src/plugins/discover/public/embeddable/search_embeddable.tsx

@@ -68,9 +68,11 @@ import { SearchEmbeddableComponent } from './search_embeddable_component';
 import { DiscoverServices } from '../build_services';
 import * as columnActions from '../application/utils/state_management/common';
 import { buildColumns } from '../application/utils/columns';
+import { ColumnWidths } from '../application/components/data_grid/data_grid_table_columns';
 
 export interface SearchProps {
   columns?: string[];
+  columnWidths?: ColumnWidths;
   description?: string;
   sort?: SortOrder[];
   onSort?: (sort: SortOrder[]) => void;
@@ -82,6 +84,7 @@ export interface SearchProps {
   onMoveColumn?: (column: string, index: number) => void;
   onReorderColumn?: (col: string, source: number, destination: number) => void;
   onFilter?: (field: IFieldType, value: string[], operator: string) => void;
+  onColumnResize?: ({ columnId, width }: { columnId: string; width: number }) => void;
   rows?: any[];
   indexPattern?: IndexPattern;
   hits?: number;
@@ -224,6 +227,7 @@ export class SearchEmbeddable
 
     const searchProps: SearchProps = {
       columns: this.savedSearch.columns,
+      columnWidths: this.savedSearch.columnWidths,
       sort: [],
       inspectorAdapters: this.inspectorAdaptors,
       rows: [],
@@ -305,6 +309,12 @@ export class SearchEmbeddable
       });
     };
 
+    searchProps.onColumnResize = ({ columnId, width }: { columnId: string; width: number }) => {
+      const columnWidthsState = { ...searchProps.columnWidths };
+      columnWidthsState[columnId] = { width };
+      this.updateInput({ columnWidths: columnWidthsState });
+    };
+
     this.pushContainerStateParamsToProps(searchProps);
   }
 
@@ -393,6 +403,7 @@ export class SearchEmbeddable
     searchProps.columns = this.input.columns || this.savedSearch.columns;
     searchProps.sort = this.input.sort || this.savedSearch.sort;
     searchProps.sharedItemTitle = this.panelTitle;
+    searchProps.columnWidths = this.input.columnWidths || this.savedSearch.columnWidths;
 
     if (isFetchRequired) {
       this.filtersSearchSource!.setField('filter', this.input.filters);

src/plugins/discover/public/embeddable/search_embeddable_component.tsx

@@ -29,13 +29,15 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
   const services = getServices();
   const discoverEmbeddableProps = {
     columns: searchProps.columns,
+    columnWidths: searchProps.columnWidths,
     indexPattern: searchProps.indexPattern,
     onAddColumn: searchProps.onAddColumn,
     onFilter: searchProps.onFilter,
     onMoveColumn: searchProps.onMoveColumn,
     onRemoveColumn: searchProps.onRemoveColumn,
     onReorderColumn: searchProps.onReorderColumn,
     onSort: searchProps.onSort,
+    onColumnResize: searchProps.onColumnResize,
     rows: searchProps.rows,
     onSetColumns: searchProps.onSetColumns,
     sort: searchProps.sort,

src/plugins/discover/public/embeddable/types.ts

@@ -37,6 +37,7 @@ import {
 import { Filter, IIndexPattern, TimeRange, Query } from 'src/plugins/data/public';
 import { SortOrder } from '../saved_searches/types';
 import { SavedSearch } from '../saved_searches';
+import { ColumnWidths } from '../application/components/data_grid/data_grid_table_columns';
 
 export interface SearchInput extends EmbeddableInput {
   timeRange: TimeRange;
@@ -45,6 +46,7 @@ export interface SearchInput extends EmbeddableInput {
   hidePanelTitles?: boolean;
   columns?: string[];
   sort?: SortOrder[];
+  columnWidths?: ColumnWidths;
 }
 
 export interface SearchOutput extends EmbeddableOutput {

src/plugins/discover/public/migrate_state.ts

@@ -6,6 +6,7 @@
 import { matchPath } from 'react-router-dom';
 import { getStateFromOsdUrl, setStateToOsdUrl } from '../../opensearch_dashboards_utils/public';
 import { Filter, Query } from '../../data/public';
+import { ColumnWidths } from './application/components/data_grid/data_grid_table_columns';
 
 interface CommonParams {
   appState?: string;
@@ -54,6 +55,7 @@ export interface LegacyDiscoverState {
    * id of the used saved query
    */
   savedQuery?: string;
+  columnWidths?: ColumnWidths;
 }
 
 // TODO: Write unit tests once all routes have been migrated.
@@ -115,7 +117,7 @@ export function migrateUrlState(oldPath: string, newPath = '/'): string {
 
       if (!appState) return path;
 
-      const { columns, filters, index, interval, query, sort, savedQuery } = appState;
+      const { columns, filters, index, interval, query, sort, savedQuery, columnWidths } = appState;
 
       const _q = {
         query,
@@ -128,6 +130,7 @@ export function migrateUrlState(oldPath: string, newPath = '/'): string {
           interval,
           sort,
           savedQuery,
+          columnWidths,
         },
         metadata: {
           indexPattern: index,