From 4d5ee861ec7beb1cc7d01242240e4fff1e5f4640 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Tue, 22 Aug 2023 12:12:56 +0530
Subject: [PATCH] fix: [FE-3128]: Logs Explorer: Show options based on format
 type selected (#3333)

* fix: [FE-3128]: Logs Explorer: Show options based on format type selected

* fix: build is fixed

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 frontend/src/constants/optionsFormatTypes.ts  |  5 +++++
 .../ExplorerControlPanel.interfaces.ts        |  1 +
 .../container/ExplorerControlPanel/index.tsx  |  6 +++++-
 .../src/container/LogsExplorerList/index.tsx  |  1 +
 frontend/src/container/OptionsMenu/index.tsx  | 21 +++++++++++++++----
 .../TracesExplorer/Controls/index.tsx         |  8 ++++++-
 6 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/constants/optionsFormatTypes.ts

diff --git a/frontend/src/constants/optionsFormatTypes.ts b/frontend/src/constants/optionsFormatTypes.ts
new file mode 100644
index 0000000000..e2780f8dae
--- /dev/null
+++ b/frontend/src/constants/optionsFormatTypes.ts
@@ -0,0 +1,5 @@
+export enum OptionFormatTypes {
+	RAW = 'raw',
+	LIST = 'list',
+	TABLE = 'table',
+}
diff --git a/frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts b/frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts
index 1547001259..b1158978f9 100644
--- a/frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts
+++ b/frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts
@@ -1,6 +1,7 @@
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 
 export type ExplorerControlPanelProps = {
+	selectedOptionFormat: string;
 	isShowPageSize: boolean;
 	isLoading: boolean;
 	optionsMenuConfig?: OptionsMenuConfig;
diff --git a/frontend/src/container/ExplorerControlPanel/index.tsx b/frontend/src/container/ExplorerControlPanel/index.tsx
index 4d6acb8571..d0823ef868 100644
--- a/frontend/src/container/ExplorerControlPanel/index.tsx
+++ b/frontend/src/container/ExplorerControlPanel/index.tsx
@@ -6,6 +6,7 @@ import { ExplorerControlPanelProps } from './ExplorerControlPanel.interfaces';
 import { ContainerStyled } from './styles';
 
 function ExplorerControlPanel({
+	selectedOptionFormat,
 	isLoading,
 	isShowPageSize,
 	optionsMenuConfig,
@@ -15,7 +16,10 @@ function ExplorerControlPanel({
 			<Row justify="end" gutter={30}>
 				{optionsMenuConfig && (
 					<Col>
-						<OptionsMenu config={optionsMenuConfig} />
+						<OptionsMenu
+							selectedOptionFormat={selectedOptionFormat}
+							config={optionsMenuConfig}
+						/>
 					</Col>
 				)}
 				<Col>
diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx
index 56c997c669..645582dd9c 100644
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -141,6 +141,7 @@ function LogsExplorerList({
 	return (
 		<>
 			<ExplorerControlPanel
+				selectedOptionFormat={options.format}
 				isLoading={isLoading}
 				isShowPageSize={false}
 				optionsMenuConfig={config}
diff --git a/frontend/src/container/OptionsMenu/index.tsx b/frontend/src/container/OptionsMenu/index.tsx
index dcd5354889..66eeb4eb57 100644
--- a/frontend/src/container/OptionsMenu/index.tsx
+++ b/frontend/src/container/OptionsMenu/index.tsx
@@ -1,5 +1,6 @@
 import { SettingFilled, SettingOutlined } from '@ant-design/icons';
 import { Popover, Space } from 'antd';
+import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,10 +13,14 @@ import { OptionsMenuConfig } from './types';
 import useOptionsMenu from './useOptionsMenu';
 
 interface OptionsMenuProps {
+	selectedOptionFormat?: string;
 	config: OptionsMenuConfig;
 }
 
-function OptionsMenu({ config }: OptionsMenuProps): JSX.Element {
+function OptionsMenu({
+	selectedOptionFormat,
+	config,
+}: OptionsMenuProps): JSX.Element {
 	const { t } = useTranslation(['trace']);
 	const isDarkMode = useIsDarkMode();
 
@@ -23,11 +28,15 @@ function OptionsMenu({ config }: OptionsMenuProps): JSX.Element {
 		() => (
 			<OptionsContentWrapper direction="vertical">
 				{config?.format && <FormatField config={config.format} />}
-				{config?.maxLines && <MaxLinesField config={config.maxLines} />}
-				{config?.addColumn && <AddColumnField config={config.addColumn} />}
+				{selectedOptionFormat === OptionFormatTypes.RAW && config?.maxLines && (
+					<MaxLinesField config={config.maxLines} />
+				)}
+				{(selectedOptionFormat === OptionFormatTypes.LIST ||
+					selectedOptionFormat === OptionFormatTypes.TABLE) &&
+					config?.addColumn && <AddColumnField config={config.addColumn} />}
 			</OptionsContentWrapper>
 		),
-		[config],
+		[config, selectedOptionFormat],
 	);
 
 	const SettingIcon = isDarkMode ? SettingOutlined : SettingFilled;
@@ -46,4 +55,8 @@ function OptionsMenu({ config }: OptionsMenuProps): JSX.Element {
 
 export default OptionsMenu;
 
+OptionsMenu.defaultProps = {
+	selectedOptionFormat: 'raw',
+};
+
 export { useOptionsMenu };
diff --git a/frontend/src/container/TracesExplorer/Controls/index.tsx b/frontend/src/container/TracesExplorer/Controls/index.tsx
index 5e793f9268..031e53d15b 100644
--- a/frontend/src/container/TracesExplorer/Controls/index.tsx
+++ b/frontend/src/container/TracesExplorer/Controls/index.tsx
@@ -1,3 +1,4 @@
+import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import Controls, { ControlsProps } from 'container/Controls';
 import OptionsMenu from 'container/OptionsMenu';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
@@ -21,7 +22,12 @@ function TraceExplorerControls({
 
 	return (
 		<Container>
-			{config && <OptionsMenu config={{ addColumn: config?.addColumn }} />}
+			{config && (
+				<OptionsMenu
+					selectedOptionFormat={OptionFormatTypes.LIST} // Defaulting it to List view as options are shown only in the List view tab
+					config={{ addColumn: config?.addColumn }}
+				/>
+			)}
 
 			<Controls
 				isLoading={isLoading}