feat: store columns while saving view and restore columns on selecting view without select columns (#5647)

* feat: store columns while saving view and restore columns on selecting view without select columns

* fix: add null check to prevent storing empty selectItems

* fix: restore the default select columns and remove OLD_SELECT_COLUMNS

* chore: pr review changes

frontend/src/components/ExplorerCard/types.ts

@@ -22,7 +22,13 @@ export type GetViewDetailsUsingViewKey = (
 	viewKey: string,
 	data: ViewProps[] | undefined,
 ) =>
-	| { query: Query; name: string; uuid: string; panelType: PANEL_TYPES }
+	| {
+			query: Query;
+			name: string;
+			uuid: string;
+			panelType: PANEL_TYPES;
+			extraData?: string;
+	  }
 	| undefined;
 
 export interface IsQueryUpdatedInViewProps {

frontend/src/components/ExplorerCard/utils.ts

@@ -29,9 +29,9 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
 ) => {
 	const selectedView = data?.find((view) => view.uuid === viewKey);
 	if (selectedView) {
-		const { compositeQuery, name, uuid } = selectedView;
+		const { compositeQuery, name, uuid, extraData } = selectedView;
 		const query = mapQueryDataFromApi(compositeQuery);
-		return { query, name, uuid, panelType: compositeQuery.panelType };
+		return { query, name, uuid, panelType: compositeQuery.panelType, extraData };
 	}
 	return undefined;
 };

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -24,6 +24,9 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
+import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -34,7 +37,7 @@ import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual } from 'lodash-es';
 import {
 	Check,
 	ConciergeBell,
@@ -58,7 +61,9 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
@@ -252,6 +257,46 @@ function ExplorerOptions({
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
+	const { options, handleOptionsChange } = useOptionsMenu({
+		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
+		dataSource: DataSource.TRACES,
+		aggregateOperator: StringOperators.NOOP,
+	});
+
+	type ExtraData = {
+		selectColumns?: BaseAutocompleteData[];
+	};
+
+	const updateOrRestoreSelectColumns = (
+		key: string,
+		allViewsData: ViewProps[] | undefined,
+		options: OptionsQuery,
+		handleOptionsChange: (newQueryData: OptionsQuery) => void,
+	): void => {
+		const currentViewDetails = getViewDetailsUsingViewKey(key, allViewsData);
+		if (!currentViewDetails) {
+			return;
+		}
+
+		let extraData: ExtraData = {};
+		try {
+			extraData = JSON.parse(currentViewDetails?.extraData ?? '{}') as ExtraData;
+		} catch (error) {
+			console.error('Error parsing extraData:', error);
+		}
+
+		if (extraData.selectColumns?.length) {
+			handleOptionsChange({
+				...options,
+				selectColumns: extraData.selectColumns,
+			});
+		} else if (!isEqual(defaultTraceSelectedColumns, options.selectColumns)) {
+			handleOptionsChange({
+				...options,
+				selectColumns: defaultTraceSelectedColumns,
+			});
+		}
+	};
 	const onMenuItemSelectHandler = useCallback(
 		({ key }: { key: string }): void => {
 			const currentViewDetails = getViewDetailsUsingViewKey(
@@ -321,6 +366,13 @@ function ExplorerOptions({
 
 		updatePreservedViewInLocalStorage(option);
 
+		updateOrRestoreSelectColumns(
+			option.key,
+			viewsData?.data?.data,
+			options,
+			handleOptionsChange,
+		);
+
 		if (ref.current) {
 			ref.current.blur();
 		}
@@ -360,14 +412,20 @@ function ExplorerOptions({
 		viewName: newViewName || '',
 		compositeQuery,
 		sourcePage: sourcepage,
-		extraData: JSON.stringify({ color }),
+		extraData: JSON.stringify({
+			color,
+			selectColumns: options.selectColumns,
+		}),
 	});
 
 	const onSaveHandler = (): void => {
 		saveNewViewHandler({
 			compositeQuery,
 			handlePopOverClose: hideSaveViewModal,
-			extraData: JSON.stringify({ color }),
+			extraData: JSON.stringify({
+				color,
+				selectColumns: options.selectColumns,
+			}),
 			notifications,
 			panelType: panelType || PANEL_TYPES.LIST,
 			redirectWithQueryBuilderData,