diff --git a/frontend/public/locales/en-GB/trace.json b/frontend/public/locales/en-GB/trace.json
index 587f565a21..c1e5519141 100644
--- a/frontend/public/locales/en-GB/trace.json
+++ b/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",
diff --git a/frontend/public/locales/en/trace.json b/frontend/public/locales/en/trace.json
index 587f565a21..c1e5519141 100644
--- a/frontend/public/locales/en/trace.json
+++ b/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",
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index d2988c9be5..d7ae2b010a 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/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',
}
diff --git a/frontend/src/container/OptionsMenu/FormatField/index.tsx b/frontend/src/container/OptionsMenu/FormatField/index.tsx
index 3b82631a5d..2f7dfa7ee4 100644
--- a/frontend/src/container/OptionsMenu/FormatField/index.tsx
+++ b/frontend/src/container/OptionsMenu/FormatField/index.tsx
@@ -18,7 +18,7 @@ function FormatField({ config }: FormatFieldProps): JSX.Element | null {
value={config.value}
onChange={config.onChange}
>
- {t('options_menu.row')}
+ {t('options_menu.raw')}
{t('options_menu.default')}
{t('options_menu.column')}
diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
index 7488ae492c..f5719fe37a 100644
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/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(
- () => getOptionsFromKeys(attributeKeys, selectedColumnKeys),
- [attributeKeys, selectedColumnKeys],
+ const addColumnOptions = useMemo(() => {
+ const filteredAttributeKeys = attributeKeys.filter(
+ (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({
- ...defaultOptionsQuery,
+ const optionsData: OptionsQuery = {
+ ...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 = 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);
- }, [isFetched, optionsQuery, initialOptionsQuery, redirectWithOptionsData]);
+ const nextOptionsQuery = localStorageOptionsQuery
+ ? JSON.parse(localStorageOptionsQuery)
+ : initialOptionsQuery;
+
+ redirectWithOptionsData(nextOptionsQuery);
+ }, [
+ isFetched,
+ optionsQuery,
+ initialOptionsQuery,
+ redirectWithOptionsData,
+ localStorageOptionsQuery,
+ ]);
return {
isLoading,