diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/TabHeader.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/TabHeader.tsx deleted file mode 100644 index c7f4e49735..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/TabHeader.tsx +++ /dev/null @@ -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 ( -
- {tabName} - {hasUnstagedChanges && ( - -
- - )} -
- ); -} - -export default TabHeader; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index 5d08eea848..08f89e46dc 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx @@ -1,11 +1,9 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { Button, Tabs } from 'antd'; +import { Button, Tabs, Typography } 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({ - handleUnstagedChanges, - updateQuery, - selectedGraph, -}: QueryProps): JSX.Element { +function QuerySection({ updateQuery, selectedGraph }: QueryProps): JSX.Element { const { queryBuilderData, initQueryBuilderData } = useQueryBuilder(); const [localQueryChanges, setLocalQueryChanges] = useState({} 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: Query Builder, children: , }, { key: EQueryType.CLICKHOUSE, label: 'ClickHouse Query', - tab: ( - - ), + tab: ClickHouse Query, children: ( - ), + tab: PromQL, children: ( -
- - - - - } - items={items} - /> -
- {/* {localQueryChanges.map((e, index) => ( - // - - handleLocalQueryUpdate({ currentIndex: index, updatedQuery }) - } - onDelete={() => handleDeleteQuery({ currentIndex: index })} - queryData={e} - queryCategory={queryCategory} - /> - ))} */} - + + + + + } + items={items} + /> ); } interface DispatchProps { - // createQuery: ({ - // widgetId, - // }: CreateQueryProps) => (dispatch: Dispatch) => void; updateQuery: ( props: UpdateQueryProps, ) => (dispatch: Dispatch) => void; - // getQueryResults: ( - // props: GetQueryResultsProps, - // ) => (dispatch: Dispatch) => void; - // updateQueryType: ( - // props: UpdateQueryTypeProps, - // ) => (dispatch: Dispatch) => void; } const mapDispatchToProps = ( dispatch: ThunkDispatch, ): 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); diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/userSettings.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/userSettings.ts deleted file mode 100644 index f05671556b..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/userSettings.ts +++ /dev/null @@ -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; -}; diff --git a/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx b/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx index 32745ee95e..7c78bd78f4 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx +++ b/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; diff --git a/frontend/src/container/NewWidget/LeftContainer/index.tsx b/frontend/src/container/NewWidget/LeftContainer/index.tsx index 9e02adcd68..47c4237ea7 100644 --- a/frontend/src/container/NewWidget/LeftContainer/index.tsx +++ b/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, -}: LeftContainerProps): JSX.Element { +}: NewWidgetProps): JSX.Element { return ( <> - + ); } -interface LeftContainerProps extends NewWidgetProps { - selectedTime: timePreferance; - handleUnstagedChanges: (arg0: boolean) => void; -} - export default memo(LeftContainer); diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index c9ccd7c1f9..1264c60ed0 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/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({ - + @@ -219,26 +212,16 @@ function NewWidget({ destroyOnClose closable onCancel={(): void => setSaveModal(false)} - onOk={(): void => { - onClickSaveHandler(); - }} + onOk={onClickSaveHandler} centered open={saveModal} width={600} > - {hasUnstagedChanges ? ( - - Looks like you have unstaged changes. Would you like to SAVE the last - staged changes? If you want to stage new changes - Press{' '} - Stage & Run Query and then try saving again. - - ) : ( - - Your graph built with{' '} - query will be - saved. Press OK to confirm. - - )} + + Your graph built with{' '} + query will be + saved. Press OK to confirm. + );