feat: add ability to change panel type (#2383)

* feat: add ability to change panel type

* feat: add ability to change panel type

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -1,8 +1,10 @@
-import { Input } from 'antd';
+import { Input, Select } from 'antd';
 import InputComponent from 'components/Input';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
-import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
+import GraphTypes, {
+	ITEMS,
+} from 'container/NewDashboard/ComponentsSlider/menuItems';
 import React, { useCallback } from 'react';
 
 import { Container, Title } from './styles';
@@ -10,6 +12,7 @@ import { timePreferance } from './timeItems';
 import YAxisUnitSelector from './YAxisUnitSelector';
 
 const { TextArea } = Input;
+const { Option } = Select;
 
 function RightContainer({
 	description,
@@ -21,6 +24,7 @@ function RightContainer({
 	selectedTime,
 	yAxisUnit,
 	setYAxisUnit,
+	setGraphHandler,
 }: RightContainerProps): JSX.Element {
 	const onChangeHandler = useCallback(
 		(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
@@ -34,14 +38,18 @@ function RightContainer({
 
 	return (
 		<Container>
-			<InputComponent
+			<Title>Panel Type</Title>
-				labelOnTop
+			<Select
-				label="Panel Type"
+				onChange={(value: ITEMS): void => setGraphHandler(value)}
-				size="middle"
+				value={selectedGraph}
-				value={selectedGraphType}
+				style={{ width: '100%', marginBottom: 24 }}
-				disabled
+			>
-			/>
+				{GraphTypes.map((item) => (
-
+					<Option key={item.name} value={item.name}>
+						{item.display}
+					</Option>
+				))}
+			</Select>
 			<Title>Panel Attributes</Title>
 
 			<InputComponent
@@ -140,6 +148,7 @@ interface RightContainerProps {
 	selectedTime: timePreferance;
 	yAxisUnit: string;
 	setYAxisUnit: React.Dispatch<React.SetStateAction<string>>;
+	setGraphHandler: (type: ITEMS) => void;
 }
 
 export default RightContainer;

frontend/src/container/NewWidget/index.tsx

@@ -1,6 +1,7 @@
 import { Button, Modal, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import history from 'lib/history';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
@@ -86,6 +87,7 @@ function NewWidget({
 	const [saveModal, setSaveModal] = useState(false);
 	const [hasUnstagedChanges, setHasUnstagedChanges] = useState(false);
 
+	const [graphType, setGraphType] = useState(selectedGraph);
 	const getSelectedTime = useCallback(
 		() =>
 			TimeItems.find(
@@ -112,6 +114,7 @@ function NewWidget({
 			yAxisUnit,
 			widgetId: query.get('widgetId') || '',
 			dashboardId,
+			graphType,
 		});
 	}, [
 		saveSettingOfPanel,
@@ -125,6 +128,7 @@ function NewWidget({
 		yAxisUnit,
 		query,
 		dashboardId,
+		graphType,
 	]);
 
 	const onClickDiscardHandler = useCallback(() => {
@@ -140,7 +144,7 @@ function NewWidget({
 				query: selectedWidget?.query,
 				selectedTime: selectedTime.enum,
 				widgetId: selectedWidget?.id || '',
-				graphType: selectedGraph,
+				graphType,
 				globalSelectedInterval,
 				variables: getDashboardVariables(),
 			});
@@ -149,11 +153,18 @@ function NewWidget({
 		selectedWidget?.query,
 		selectedTime.enum,
 		selectedWidget?.id,
-		selectedGraph,
 		getQueryResults,
 		globalSelectedInterval,
+		graphType,
 	]);
 
+	const setGraphHandler = (type: ITEMS): void => {
+		const params = new URLSearchParams(search);
+		params.set('graphType', type);
+		history.push({ search: params.toString() });
+		setGraphType(type);
+	};
+
 	useEffect(() => {
 		getQueryResult();
 	}, [getQueryResult]);
@@ -173,13 +184,14 @@ function NewWidget({
 					<LeftContainer
 						handleUnstagedChanges={setHasUnstagedChanges}
 						selectedTime={selectedTime}
-						selectedGraph={selectedGraph}
+						selectedGraph={graphType}
 						yAxisUnit={yAxisUnit}
 					/>
 				</LeftContainerWrapper>
 
 				<RightContainerWrapper flex={1}>
 					<RightContainer
+						setGraphHandler={setGraphHandler}
 						{...{
 							title,
 							setTitle,
@@ -192,7 +204,7 @@ function NewWidget({
 							setOpacity,
 							selectedNullZeroValue,
 							setSelectedNullZeroValue,
-							selectedGraph,
+							selectedGraph: graphType,
 							setSelectedTime,
 							selectedTime,
 							setYAxisUnit,

frontend/src/store/actions/dashboard/saveDashboard.ts

@@ -1,6 +1,7 @@
 import updateDashboardApi from 'api/dashboard/update';
 import { AxiosError } from 'axios';
 import ROUTES from 'constants/routes';
+import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
 import history from 'lib/history';
 import { Layout } from 'react-grid-layout';
 import { generatePath } from 'react-router-dom';
@@ -21,12 +22,12 @@ export const SaveDashboard = ({
 	widgetId,
 	dashboardId,
 	yAxisUnit,
+	graphType,
 }: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) =>
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	async (dispatch: Dispatch<AppActions>): Promise<void> => {
 		try {
 			const dashboard = store.getState();
-			const search = new URLSearchParams(history.location.search);
 
 			const selectedDashboard = dashboard.dashboards.dashboards.find(
 				(e) => e.uuid === uuid,
@@ -105,7 +106,7 @@ export const SaveDashboard = ({
 							title: updatedTitle,
 							timePreferance: updatedtimePreferance,
 							yAxisUnit: updatedYAxisUnit,
-							panelTypes: search.get('graphType') as Widgets['panelTypes'],
+							panelTypes: graphType,
 							queryData: {
 								...selectedWidget.queryData,
 							},
@@ -151,4 +152,5 @@ export interface SaveDashboardProps {
 	widgetId: Widgets['id'];
 	dashboardId: string;
 	yAxisUnit: Widgets['yAxisUnit'];
+	graphType: ITEMS;
 }