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

@@ -0,0 +1,5 @@
+export enum OptionFormatTypes {
+	RAW = 'raw',
+	LIST = 'list',
+	TABLE = 'table',
+}

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;

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>

frontend/src/container/LogsExplorerList/index.tsx

@@ -141,6 +141,7 @@ function LogsExplorerList({
 	return (
 		<>
 			<ExplorerControlPanel
+				selectedOptionFormat={options.format}
 				isLoading={isLoading}
 				isShowPageSize={false}
 				optionsMenuConfig={config}

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 };

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}