feat: save list options to local storage (#3055)

* feat: save list options to local storage

* fix: removing of the columns field

* fix: filter body column from columns

* fix: typo for raw

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/public/locales/en-GB/trace.json

@@ -2,7 +2,7 @@
 	"options_menu": {
 		"options": "Options",
 		"format": "Format",
-		"row": "Row",
+		"raw": "Raw",
 		"default": "Default",
 		"column": "Column",
 		"maxLines": "Max lines per Row",

frontend/public/locales/en/trace.json

@@ -2,7 +2,7 @@
 	"options_menu": {
 		"options": "Options",
 		"format": "Format",
-		"row": "Row",
+		"raw": "Raw",
 		"default": "Default",
 		"column": "Column",
 		"maxLines": "Max lines per Row",

frontend/src/constants/localStorage.ts

@@ -6,4 +6,5 @@ export enum LOCALSTORAGE {
 	THEME = 'THEME',
 	LOGS_VIEW_MODE = 'LOGS_VIEW_MODE',
 	LOGS_LINES_PER_ROW = 'LOGS_LINES_PER_ROW',
+	LIST_OPTIONS = 'LIST_OPTIONS',
 }

frontend/src/container/OptionsMenu/FormatField/index.tsx

@@ -18,7 +18,7 @@ function FormatField({ config }: FormatFieldProps): JSX.Element | null {
 				value={config.value}
 				onChange={config.onChange}
 			>
-				<RadioButton value="raw">{t('options_menu.row')}</RadioButton>
+				<RadioButton value="raw">{t('options_menu.raw')}</RadioButton>
 				<RadioButton value="list">{t('options_menu.default')}</RadioButton>
 				<RadioButton value="table">{t('options_menu.column')}</RadioButton>
 			</RadioGroup>

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -1,5 +1,8 @@
 import { RadioChangeEvent } from 'antd';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -28,6 +31,10 @@ const useOptionsMenu = ({
 	aggregateOperator,
 	initialOptions = {},
 }: UseOptionsMenuProps): UseOptionsMenu => {
+	const localStorageOptionsQuery = getFromLocalstorage(
+		LOCALSTORAGE.LIST_OPTIONS,
+	);
+
 	const {
 		query: optionsQuery,
 		queryData: optionsQueryData,
@@ -66,9 +73,21 @@ const useOptionsMenu = ({
 		[optionsQueryData],
 	);
 
-	const addColumnOptions = useMemo(
+	const addColumnOptions = useMemo(() => {
-		() => getOptionsFromKeys(attributeKeys, selectedColumnKeys),
+		const filteredAttributeKeys = attributeKeys.filter(
-		[attributeKeys, selectedColumnKeys],
+			(item) => item.key !== 'body',
+		);
+
+		return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys);
+	}, [attributeKeys, selectedColumnKeys]);
+
+	const handleRedirectWithOptionsData = useCallback(
+		(newQueryData: OptionsQuery) => {
+			redirectWithOptionsData(newQueryData);
+
+			setToLocalstorage(LOCALSTORAGE.LIST_OPTIONS, JSON.stringify(newQueryData));
+		},
+		[redirectWithOptionsData],
 	);
 
 	const handleSelectedColumnsChange = useCallback(
@@ -83,15 +102,17 @@ const useOptionsMenu = ({
 				return [...acc, column];
 			}, [] as BaseAutocompleteData[]);
 
-			redirectWithOptionsData({
+			const optionsData: OptionsQuery = {
 				...optionsQueryData,
 				selectColumns: newSelectedColumns,
-			});
+			};
+
+			handleRedirectWithOptionsData(optionsData);
 		},
 		[
 			selectedColumnKeys,
-			redirectWithOptionsData,
 			optionsQueryData,
+			handleRedirectWithOptionsData,
 			attributeKeys,
 		],
 	);
@@ -102,48 +123,54 @@ const useOptionsMenu = ({
 				({ id }) => id !== columnKey,
 			);
 
-			redirectWithOptionsData({
+			const optionsData: OptionsQuery = {
-				...defaultOptionsQuery,
+				...optionsQueryData,
 				selectColumns: newSelectedColumns,
-			});
+			};
+
+			handleRedirectWithOptionsData(optionsData);
 		},
-		[optionsQueryData, redirectWithOptionsData],
+		[optionsQueryData, handleRedirectWithOptionsData],
 	);
 
 	const handleFormatChange = useCallback(
 		(event: RadioChangeEvent) => {
-			redirectWithOptionsData({
+			const optionsData: OptionsQuery = {
 				...optionsQueryData,
 				format: event.target.value,
-			});
+			};
+
+			handleRedirectWithOptionsData(optionsData);
 		},
-		[optionsQueryData, redirectWithOptionsData],
+		[handleRedirectWithOptionsData, optionsQueryData],
 	);
 
 	const handleMaxLinesChange = useCallback(
 		(value: string | number | null) => {
-			redirectWithOptionsData({
+			const optionsData: OptionsQuery = {
 				...optionsQueryData,
 				maxLines: value as number,
-			});
+			};
+
+			handleRedirectWithOptionsData(optionsData);
 		},
-		[optionsQueryData, redirectWithOptionsData],
+		[handleRedirectWithOptionsData, optionsQueryData],
 	);
 
 	const optionsMenuConfig: Required<OptionsMenuConfig> = useMemo(
 		() => ({
 			addColumn: {
-				value: optionsQueryData?.selectColumns || defaultOptionsQuery.selectColumns,
+				value: optionsQueryData.selectColumns || defaultOptionsQuery.selectColumns,
 				options: addColumnOptions || [],
 				onChange: handleSelectedColumnsChange,
 				onRemove: handleRemoveSelectedColumn,
 			},
 			format: {
-				value: optionsQueryData?.format || defaultOptionsQuery.format,
+				value: optionsQueryData.format || defaultOptionsQuery.format,
 				onChange: handleFormatChange,
 			},
 			maxLines: {
-				value: optionsQueryData?.maxLines || defaultOptionsQuery.maxLines,
+				value: optionsQueryData.maxLines || defaultOptionsQuery.maxLines,
 				onChange: handleMaxLinesChange,
 			},
 		}),
@@ -162,8 +189,18 @@ const useOptionsMenu = ({
 	useEffect(() => {
 		if (optionsQuery || !isFetched) return;
 
-		redirectWithOptionsData(initialOptionsQuery);
+		const nextOptionsQuery = localStorageOptionsQuery
-	}, [isFetched, optionsQuery, initialOptionsQuery, redirectWithOptionsData]);
+			? JSON.parse(localStorageOptionsQuery)
+			: initialOptionsQuery;
+
+		redirectWithOptionsData(nextOptionsQuery);
+	}, [
+		isFetched,
+		optionsQuery,
+		initialOptionsQuery,
+		redirectWithOptionsData,
+		localStorageOptionsQuery,
+	]);
 
 	return {
 		isLoading,