chore: removed some of the stage logic in the query builder (#2682)

frontend/src/container/NewWidget/LeftContainer/QuerySection/TabHeader.tsx

@@ -1,39 +0,0 @@
-import { Tooltip } from 'antd';
-import React from 'react';
-
-interface ITabHeaderProps {
-	tabName: string;
-	hasUnstagedChanges: boolean;
-}
-
-function TabHeader({
-	tabName,
-	hasUnstagedChanges,
-}: ITabHeaderProps): JSX.Element {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				gap: '0.5rem',
-				justifyContent: 'center',
-				alignItems: 'center',
-			}}
-		>
-			{tabName}
-			{hasUnstagedChanges && (
-				<Tooltip title="Looks like you have un-staged changes. Make sure you click 'Stage & Run Query' if you want to save these changes.">
-					<div
-						style={{
-							height: '0.6rem',
-							width: '0.6rem',
-							borderRadius: '1rem',
-							background: 'orange',
-						}}
-					/>
-				</Tooltip>
-			)}
-		</div>
-	);
-}
-
-export default TabHeader;

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Button, Tabs, Typography } from 'antd';
-import { Button, Tabs } from 'antd';
 import TextToolTip from 'components/TextToolTip';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
-import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { cloneDeep, isEqual } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -28,15 +26,9 @@ import {
 } from './constants';
 import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
 import PromQLQueryContainer from './QueryBuilder/promQL';
-import TabHeader from './TabHeader';
 import { IHandleUpdatedQuery } from './types';
-import { showUnstagedStashConfirmBox } from './utils/userSettings';
 
-function QuerySection({
+function QuerySection({ updateQuery, selectedGraph }: QueryProps): JSX.Element {
-	handleUnstagedChanges,
-	updateQuery,
-	selectedGraph,
-}: QueryProps): JSX.Element {
 	const { queryBuilderData, initQueryBuilderData } = useQueryBuilder();
 	const [localQueryChanges, setLocalQueryChanges] = useState<Query>({} as Query);
 	const [rctTabKey, setRctTabKey] = useState<
@@ -67,19 +59,11 @@ function QuerySection({
 	);
 
 	const { query } = selectedWidget || {};
+
 	useEffect(() => {
 		initQueryBuilderData(query.builder);
 		setLocalQueryChanges(cloneDeep(query) as Query);
 	}, [query, initQueryBuilderData]);
-	const queryDiff = (
-		queryA: Query,
-		queryB: Query,
-		queryCategory: EQueryType,
-	): boolean => !isEqual(queryA[queryCategory], queryB[queryCategory]);
-
-	useEffect(() => {
-		handleUnstagedChanges(queryDiff(query, localQueryChanges, queryCategory));
-	}, [handleUnstagedChanges, localQueryChanges, query, queryCategory]);
 
 	const regenRctKeys = (): void => {
 		setRctTabKey((prevState) => {
@@ -104,17 +88,6 @@ function QuerySection({
 	};
 
 	const handleQueryCategoryChange = (qCategory: string): void => {
-		// If true, then it means that the user has made some changes and haven't staged them
-		const unstagedChanges = queryDiff(query, localQueryChanges, queryCategory);
-
-		if (unstagedChanges && showUnstagedStashConfirmBox()) {
-			// eslint-disable-next-line no-alert
-			window.confirm(
-				"You are trying to navigate to different tab with unstaged changes. Your current changes will be purged. Press 'Stage & Run Query' to stage them.",
-			);
-			return;
-		}
-
 		setQueryCategory(qCategory as EQueryType);
 		const newLocalQuery = {
 			...cloneDeep(query),
@@ -139,31 +112,13 @@ function QuerySection({
 		{
 			key: EQueryType.QUERY_BUILDER,
 			label: 'Query Builder',
-			tab: (
+			tab: <Typography>Query Builder</Typography>,
-				<TabHeader
-					tabName="Query Builder"
-					hasUnstagedChanges={queryDiff(
-						query,
-						localQueryChanges,
-						EQueryType.QUERY_BUILDER,
-					)}
-				/>
-			),
 			children: <QueryBuilder panelType={selectedGraph} />,
 		},
 		{
 			key: EQueryType.CLICKHOUSE,
 			label: 'ClickHouse Query',
-			tab: (
+			tab: <Typography>ClickHouse Query</Typography>,
-				<TabHeader
-					tabName="ClickHouse Query"
-					hasUnstagedChanges={queryDiff(
-						query,
-						localQueryChanges,
-						EQueryType.CLICKHOUSE,
-					)}
-				/>
-			),
 			children: (
 				<ClickHouseQueryContainer
 					key={rctTabKey.CLICKHOUSE}
@@ -178,12 +133,7 @@ function QuerySection({
 		{
 			key: EQueryType.PROM,
 			label: 'PromQL',
-			tab: (
+			tab: <Typography>PromQL</Typography>,
-				<TabHeader
-					tabName="PromQL"
-					hasUnstagedChanges={queryDiff(query, localQueryChanges, EQueryType.PROM)}
-				/>
-			),
 			children: (
 				<PromQLQueryContainer
 					key={rctTabKey.PROM}
@@ -198,86 +148,43 @@ function QuerySection({
 	];
 
 	return (
-		<>
+		<Tabs
-			<div style={{ display: 'flex' }}>
+			type="card"
-				<Tabs
+			style={{ width: '100%' }}
-					type="card"
+			defaultActiveKey={queryCategory}
-					style={{ width: '100%' }}
+			activeKey={queryCategory}
-					defaultActiveKey={queryCategory}
+			onChange={handleQueryCategoryChange}
-					activeKey={queryCategory}
+			tabBarExtraContent={
-					onChange={handleQueryCategoryChange}
+				<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-					tabBarExtraContent={
+					<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
-						<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+					<Button
-							<TextToolTip
+						loading={isLoadingQueryResult}
-								{...{
+						type="primary"
-									text: `This will temporarily save the current query and graph state. This will persist across tab change`,
+						onClick={handleStageQuery}
-								}}
+					>
-							/>
+						Stage & Run Query
-							<Button
+					</Button>
-								loading={isLoadingQueryResult}
+				</span>
-								type="primary"
+			}
-								onClick={handleStageQuery}
+			items={items}
-							>
+		/>
-								Stage & Run Query
-							</Button>
-						</span>
-					}
-					items={items}
-				/>
-			</div>
-			{/* {localQueryChanges.map((e, index) => (
-				// <Query
-				// 	name={e.name}
-				// 	currentIndex={index}
-				// 	selectedTime={selectedTime}
-				// 	key={JSON.stringify(e)}
-				// 	queryInput={e}
-				// 	updatedLocalQuery={handleLocalQueryUpdate}
-				// 	queryCategory={queryCategory}
-				// />
-				<QueryBuilder
-					key={`${JSON.stringify(e)}`}
-					name={e.name}
-					updateQueryData={(updatedQuery) =>
-						handleLocalQueryUpdate({ currentIndex: index, updatedQuery })
-					}
-					onDelete={() => handleDeleteQuery({ currentIndex: index })}
-					queryData={e}
-					queryCategory={queryCategory}
-				/>
-			))} */}
-		</>
 	);
 }
 
 interface DispatchProps {
-	// createQuery: ({
-	// 	widgetId,
-	// }: CreateQueryProps) => (dispatch: Dispatch<AppActions>) => void;
 	updateQuery: (
 		props: UpdateQueryProps,
 	) => (dispatch: Dispatch<AppActions>) => void;
-	// getQueryResults: (
-	// 	props: GetQueryResultsProps,
-	// ) => (dispatch: Dispatch<AppActions>) => void;
-	// updateQueryType: (
-	// 	props: UpdateQueryTypeProps,
-	// ) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (
 	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
 ): DispatchProps => ({
-	// createQuery: bindActionCreators(CreateQuery, dispatch),
 	updateQuery: bindActionCreators(UpdateQuery, dispatch),
-	// getQueryResults: bindActionCreators(GetQueryResults, dispatch),
-	// updateQueryType: bindActionCreators(UpdateQueryType, dispatch),
 });
 
 interface QueryProps extends DispatchProps {
 	selectedGraph: GRAPH_TYPES;
-	selectedTime: timePreferance;
-	handleUnstagedChanges: (arg0: boolean) => void;
 }
 
 export default connect(null, mapDispatchToProps)(QuerySection);

frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/userSettings.ts

@@ -1,23 +0,0 @@
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import setLocalStorageApi from 'api/browser/localstorage/set';
-
-const UNSTAGE_CONFIRM_BOX_SHOW_COUNT = 2;
-const UNSTAGE_CONFIRM_BOX_KEY =
-	'DASHBOARD_METRICS_BUILDER_UNSTAGE_STASH_CONFIRM_SHOW_COUNT';
-
-export const showUnstagedStashConfirmBox = (): boolean => {
-	const showCountTillNow: number = parseInt(
-		getLocalStorageApi(UNSTAGE_CONFIRM_BOX_KEY) || '',
-		10,
-	);
-	if (Number.isNaN(showCountTillNow)) {
-		setLocalStorageApi(UNSTAGE_CONFIRM_BOX_KEY, '1');
-		return true;
-	}
-
-	if (showCountTillNow >= UNSTAGE_CONFIRM_BOX_SHOW_COUNT) {
-		return false;
-	}
-	setLocalStorageApi(UNSTAGE_CONFIRM_BOX_KEY, `${showCountTillNow + 1}`);
-	return true;
-};

frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx

@@ -3,9 +3,6 @@ import { EQueryType } from 'types/common/dashboard';
 
 import { Tag } from '../styles';
 
-interface IQueryTypeTagProps {
-	queryType: EQueryType | undefined;
-}
 function QueryTypeTag({ queryType }: IQueryTypeTagProps): JSX.Element {
 	switch (queryType) {
 		case EQueryType.QUERY_BUILDER:
@@ -32,4 +29,12 @@ function QueryTypeTag({ queryType }: IQueryTypeTagProps): JSX.Element {
 	}
 }
 
+interface IQueryTypeTagProps {
+	queryType?: EQueryType;
+}
+
+QueryTypeTag.defaultProps = {
+	queryType: EQueryType.QUERY_BUILDER,
+};
+
 export default QueryTypeTag;

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

@@ -1,34 +1,22 @@
 import React, { memo } from 'react';
 
 import { NewWidgetProps } from '../index';
-import { timePreferance } from '../RightContainer/timeItems';
 import QuerySection from './QuerySection';
 import { QueryContainer } from './styles';
 import WidgetGraph from './WidgetGraph';
 
 function LeftContainer({
 	selectedGraph,
-	selectedTime,
 	yAxisUnit,
-	handleUnstagedChanges,
+}: NewWidgetProps): JSX.Element {
-}: LeftContainerProps): JSX.Element {
 	return (
 		<>
 			<WidgetGraph selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />
 			<QueryContainer>
-				<QuerySection
+				<QuerySection selectedGraph={selectedGraph} />
-					selectedTime={selectedTime}
-					handleUnstagedChanges={handleUnstagedChanges}
-					selectedGraph={selectedGraph}
-				/>
 			</QueryContainer>
 		</>
 	);
 }
 
-interface LeftContainerProps extends NewWidgetProps {
-	selectedTime: timePreferance;
-	handleUnstagedChanges: (arg0: boolean) => void;
-}
-
 export default memo(LeftContainer);

frontend/src/container/NewWidget/index.tsx

@@ -35,7 +35,6 @@ import {
 	LeftContainerWrapper,
 	PanelContainer,
 	RightContainerWrapper,
-	Tag,
 } from './styles';
 
 function NewWidget({
@@ -85,7 +84,6 @@ function NewWidget({
 		selectedWidget?.nullZeroValues || 'zero',
 	);
 	const [saveModal, setSaveModal] = useState(false);
-	const [hasUnstagedChanges, setHasUnstagedChanges] = useState(false);
 
 	const [graphType, setGraphType] = useState(selectedGraph);
 	const getSelectedTime = useCallback(
@@ -181,12 +179,7 @@ function NewWidget({
 
 			<PanelContainer>
 				<LeftContainerWrapper flex={5}>
-					<LeftContainer
+					<LeftContainer selectedGraph={graphType} yAxisUnit={yAxisUnit} />
-						handleUnstagedChanges={setHasUnstagedChanges}
-						selectedTime={selectedTime}
-						selectedGraph={graphType}
-						yAxisUnit={yAxisUnit}
-					/>
 				</LeftContainerWrapper>
 
 				<RightContainerWrapper flex={1}>
@@ -219,26 +212,16 @@ function NewWidget({
 				destroyOnClose
 				closable
 				onCancel={(): void => setSaveModal(false)}
-				onOk={(): void => {
+				onOk={onClickSaveHandler}
-					onClickSaveHandler();
-				}}
 				centered
 				open={saveModal}
 				width={600}
 			>
-				{hasUnstagedChanges ? (
+				<Typography>
-					<Typography>
+					Your graph built with{' '}
-						Looks like you have unstaged changes. Would you like to SAVE the last
+					<QueryTypeTag queryType={selectedWidget?.query.queryType} /> query will be
-						staged changes? If you want to stage new changes - Press{' '}
+					saved. Press OK to confirm.
-						<Tag>Stage & Run Query</Tag> and then try saving again.
+				</Typography>
-					</Typography>
-				) : (
-					<Typography>
-						Your graph built with{' '}
-						<QueryTypeTag queryType={selectedWidget?.query.queryType} /> query will be
-						saved. Press OK to confirm.
-					</Typography>
-				)}
 			</Modal>
 		</Container>
 	);