fix: tabs deprecation warning from antd (#2479)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Chintan Sudani <46838508+techchintan@users.noreply.github.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/components/RouteTab/index.tsx

@@ -2,8 +2,6 @@ import { Tabs, TabsProps } from 'antd';
 import history from 'lib/history';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 function RouteTab({
 	routes,
 	activeKey,
@@ -22,29 +20,23 @@ function RouteTab({
 		}
 	};
 
+	const items = routes.map(({ Component, name, route }) => ({
+		label: name,
+		key: name,
+		tabKey: route,
+		children: <Component />,
+	}));
+
 	return (
 		<Tabs
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={activeKey}
 			animated
+			items={items}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...rest}
-		>
+		/>
-			{routes.map(
-				({ Component, name, route }): JSX.Element => (
-					<TabPane
-						tabKey={route}
-						animated
-						destroyInactiveTabPane
-						tab={name}
-						key={name}
-					>
-						<Component />
-					</TabPane>
-				),
-			)}
-		</Tabs>
 	);
 }
 

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -23,7 +23,6 @@ import PromqlSection from './PromqlSection';
 import { FormContainer, QueryButton, StepHeading } from './styles';
 import { toIMetricsBuilderQuery } from './utils';
 
-const { TabPane } = Tabs;
 function QuerySection({
 	queryCategory,
 	setQueryCategory,
@@ -282,6 +281,24 @@ function QuerySection({
 		runQuery();
 	};
 
+	const tabs = [
+		{
+			label: t('tab_qb'),
+			key: EQueryType.QUERY_BUILDER.toString(),
+			disabled: true,
+		},
+		{
+			label: t('tab_chquery'),
+			key: EQueryType.CLICKHOUSE.toString(),
+		},
+	];
+
+	const items = [
+		{ label: t('tab_qb'), key: EQueryType.QUERY_BUILDER.toString() },
+		{ label: t('tab_chquery'), key: EQueryType.CLICKHOUSE.toString() },
+		{ label: t('tab_promql'), key: EQueryType.PROM.toString() },
+	];
+
 	const renderTabs = (typ: AlertTypes): JSX.Element | null => {
 		switch (typ) {
 			case AlertTypes.TRACES_BASED_ALERT:
@@ -303,14 +320,8 @@ function QuerySection({
 								)}
 							</span>
 						}
-					>
+						items={tabs}
-						<TabPane
-							tab={t('tab_qb')}
-							key={EQueryType.QUERY_BUILDER.toString()}
-							disabled
 					/>
-						<TabPane tab={t('tab_chquery')} key={EQueryType.CLICKHOUSE.toString()} />
-					</Tabs>
 				);
 			case AlertTypes.METRICS_BASED_ALERT:
 			default:
@@ -330,11 +341,8 @@ function QuerySection({
 								)}
 							</span>
 						}
-					>
+						items={items}
-						<TabPane tab={t('tab_qb')} key={EQueryType.QUERY_BUILDER.toString()} />
+					/>
-						<TabPane tab={t('tab_chquery')} key={EQueryType.CLICKHOUSE.toString()} />
-						<TabPane tab={t('tab_promql')} key={EQueryType.PROM.toString()} />
-					</Tabs>
 				);
 		}
 	};

frontend/src/container/Licenses/index.tsx

@@ -8,8 +8,6 @@ import { useQuery } from 'react-query';
 import ApplyLicenseForm from './ApplyLicenseForm';
 import ListLicenses from './ListLicenses';
 
-const { TabPane } = Tabs;
-
 function Licenses(): JSX.Element {
 	const { t } = useTranslation(['licenses']);
 	const { data, isError, isLoading, refetch } = useQuery({
@@ -28,17 +26,21 @@ function Licenses(): JSX.Element {
 	const allValidLicense =
 		data?.payload?.filter((license) => license.isCurrent) || [];
 
-	return (
+	const tabs = [
-		<Tabs destroyInactiveTabPane defaultActiveKey="licenses">
+		{
-			<TabPane tabKey="licenses" tab={t('tab_current_license')} key="licenses">
+			label: t('tab_current_license'),
-				<ApplyLicenseForm licenseRefetch={refetch} />
+			key: 'licenses',
-				<ListLicenses licenses={allValidLicense} />
+			children: <ApplyLicenseForm licenseRefetch={refetch} />,
-			</TabPane>
+		},
+		{
+			label: t('tab_license_history'),
+			key: 'history',
+			children: <ListLicenses licenses={allValidLicense} />,
+		},
+	];
 
-			<TabPane tabKey="history" tab={t('tab_license_history')} key="history">
+	return (
-				<ListLicenses licenses={allValidLicense} />
+		<Tabs destroyInactiveTabPane defaultActiveKey="licenses" items={tabs} />
-			</TabPane>
-		</Tabs>
 	);
 }
 

frontend/src/container/LogDetailedView/index.tsx

@@ -24,6 +24,19 @@ function LogDetailedView(): JSX.Element {
 		});
 	};
 
+	const items = [
+		{
+			label: 'Table',
+			key: '1',
+			children: detailedLog && <TableView logData={detailedLog} />,
+		},
+		{
+			label: 'JSON',
+			key: '2',
+			children: detailedLog && <JSONView logData={detailedLog} />,
+		},
+	];
+
 	return (
 		<Drawer
 			width="60%"
@@ -35,14 +48,7 @@ function LogDetailedView(): JSX.Element {
 			style={{ overscrollBehavior: 'contain' }}
 			destroyOnClose
 		>
-			<Tabs defaultActiveKey="1">
+			<Tabs defaultActiveKey="1" items={items} />
-				<Tabs.TabPane tab="Table" key="1">
-					{detailedLog && <TableView logData={detailedLog} />}
-				</Tabs.TabPane>
-				<Tabs.TabPane tab="JSON" key="2">
-					{detailedLog && <JSONView logData={detailedLog} />}
-				</Tabs.TabPane>
-			</Tabs>
 		</Drawer>
 	);
 }

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -27,8 +27,9 @@ function QueryConditionField({
 	return (
 		<Select
 			defaultValue={
-				(query as any).value &&
+				(query as QueryFields).value &&
-				(((query as any)?.value as any) as string).toUpperCase()
+				(((((query as QueryFields)
+					?.value as unknown) as QueryFields) as unknown) as string).toUpperCase()
 			}
 			onChange={(e): void => {
 				onUpdate({ ...query, value: e }, queryIndex);

frontend/src/container/NewDashboard/DashboardSettings/index.tsx

@@ -4,19 +4,13 @@ import React from 'react';
 import GeneralDashboardSettings from './General';
 import VariablesSetting from './Variables';
 
-const { TabPane } = Tabs;
-
 function DashboardSettingsContent(): JSX.Element {
-	return (
+	const items = [
-		<Tabs>
+		{ label: 'General', key: 'general', children: <GeneralDashboardSettings /> },
-			<TabPane tab="General" key="general">
+		{ label: 'Variables', key: 'variables', children: <VariablesSetting /> },
-				<GeneralDashboardSettings />
+	];
-			</TabPane>
+
-			<TabPane tab="Variables" key="variables">
+	return <Tabs items={items} />;
-				<VariablesSetting />
-			</TabPane>
-		</Tabs>
-	);
 }
 
 export default DashboardSettingsContent;

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

@@ -34,7 +34,6 @@ import TabHeader from './TabHeader';
 import { getQueryKey } from './utils/getQueryKey';
 import { showUnstagedStashConfirmBox } from './utils/userSettings';
 
-const { TabPane } = Tabs;
 function QuerySection({
 	handleUnstagedChanges,
 	updateQuery,
@@ -144,6 +143,77 @@ function QuerySection({
 		setLocalQueryChanges(cloneDeep(updatedQuery));
 	};
 
+	const items = [
+		{
+			key: EQueryType.QUERY_BUILDER.toString(),
+			tab: (
+				<TabHeader
+					tabName="Query Builder"
+					hasUnstagedChanges={queryDiff(
+						query,
+						localQueryChanges,
+						EQueryType.QUERY_BUILDER,
+					)}
+				/>
+			),
+			children: (
+				<QueryBuilderQueryContainer
+					key={rctTabKey.QUERY_BUILDER}
+					queryData={localQueryChanges}
+					updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
+						handleLocalQueryUpdate({ updatedQuery });
+					}}
+					metricsBuilderQueries={
+						localQueryChanges[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME]
+					}
+					selectedGraph={selectedGraph}
+				/>
+			),
+		},
+		{
+			key: EQueryType.CLICKHOUSE.toString(),
+			tab: (
+				<TabHeader
+					tabName="ClickHouse Query"
+					hasUnstagedChanges={queryDiff(
+						query,
+						localQueryChanges,
+						EQueryType.CLICKHOUSE,
+					)}
+				/>
+			),
+			children: (
+				<ClickHouseQueryContainer
+					key={rctTabKey.CLICKHOUSE}
+					queryData={localQueryChanges}
+					updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
+						handleLocalQueryUpdate({ updatedQuery });
+					}}
+					clickHouseQueries={localQueryChanges[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]}
+				/>
+			),
+		},
+		{
+			key: EQueryType.PROM.toString(),
+			tab: (
+				<TabHeader
+					tabName="PromQL"
+					hasUnstagedChanges={queryDiff(query, localQueryChanges, EQueryType.PROM)}
+				/>
+			),
+			children: (
+				<PromQLQueryContainer
+					key={rctTabKey.PROM}
+					queryData={localQueryChanges}
+					updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
+						handleLocalQueryUpdate({ updatedQuery });
+					}}
+					promQLQueries={localQueryChanges[WIDGET_PROMQL_QUERY_KEY_NAME]}
+				/>
+			),
+		},
+	];
+
 	return (
 		<>
 			<div style={{ display: 'flex' }}>
@@ -165,77 +235,8 @@ function QuerySection({
 							</Button>
 						</span>
 					}
-				>
+					items={items}
-					<TabPane
-						tab={
-							<TabHeader
-								tabName="Query Builder"
-								hasUnstagedChanges={queryDiff(
-									query,
-									localQueryChanges,
-									EQueryType.QUERY_BUILDER,
-								)}
 				/>
-						}
-						key={EQueryType.QUERY_BUILDER.toString()}
-					>
-						<QueryBuilderQueryContainer
-							key={rctTabKey.QUERY_BUILDER}
-							queryData={localQueryChanges}
-							updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
-								handleLocalQueryUpdate({ updatedQuery });
-							}}
-							metricsBuilderQueries={
-								localQueryChanges[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME]
-							}
-							selectedGraph={selectedGraph}
-						/>
-					</TabPane>
-					<TabPane
-						tab={
-							<TabHeader
-								tabName="ClickHouse Query"
-								hasUnstagedChanges={queryDiff(
-									query,
-									localQueryChanges,
-									EQueryType.CLICKHOUSE,
-								)}
-							/>
-						}
-						key={EQueryType.CLICKHOUSE.toString()}
-					>
-						<ClickHouseQueryContainer
-							key={rctTabKey.CLICKHOUSE}
-							queryData={localQueryChanges}
-							updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
-								handleLocalQueryUpdate({ updatedQuery });
-							}}
-							clickHouseQueries={localQueryChanges[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]}
-						/>
-					</TabPane>
-					<TabPane
-						tab={
-							<TabHeader
-								tabName="PromQL"
-								hasUnstagedChanges={queryDiff(
-									query,
-									localQueryChanges,
-									EQueryType.PROM,
-								)}
-							/>
-						}
-						key={EQueryType.PROM.toString()}
-					>
-						<PromQLQueryContainer
-							key={rctTabKey.PROM}
-							queryData={localQueryChanges}
-							updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
-								handleLocalQueryUpdate({ updatedQuery });
-							}}
-							promQLQueries={localQueryChanges[WIDGET_PROMQL_QUERY_KEY_NAME]}
-						/>
-					</TabPane>
-				</Tabs>
 			</div>
 			{/* {localQueryChanges.map((e, index) => (
 				// <Query

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -15,8 +15,6 @@ import {
 } from './styles';
 import Tags from './Tags';
 
-const { TabPane } = Tabs;
-
 function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 	const { tree, firstSpanStartTime } = props;
 
@@ -44,6 +42,33 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 
 	const { tags, nonChildReferences } = tree;
 
+	const items = [
+		{
+			label: 'Tags',
+			key: '1',
+			children: (
+				<Tags
+					onToggleHandler={onToggleHandler}
+					setText={setText}
+					tags={tags}
+					linkedSpans={nonChildReferences}
+				/>
+			),
+		},
+		{
+			label: 'Events',
+			key: '2',
+			children: (
+				<Events
+					events={tree.event}
+					onToggleHandler={onToggleHandler}
+					setText={setText}
+					firstSpanStartTime={firstSpanStartTime}
+				/>
+			),
+		},
+	];
+
 	return (
 		<CardContainer>
 			<StyledSpace
@@ -81,24 +106,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				)}
 			</Modal>
 
-			<Tabs defaultActiveKey="1">
+			<Tabs defaultActiveKey="1" items={items} />
-				<TabPane tab="Tags" key="1">
-					<Tags
-						onToggleHandler={onToggleHandler}
-						setText={setText}
-						tags={tags}
-						linkedSpans={nonChildReferences}
-					/>
-				</TabPane>
-				<TabPane tab="Events" key="2">
-					<Events
-						events={tree.event}
-						onToggleHandler={onToggleHandler}
-						setText={setText}
-						firstSpanStartTime={firstSpanStartTime}
-					/>
-				</TabPane>
-			</Tabs>
 		</CardContainer>
 	);
 }

frontend/src/pages/AlertList/index.tsx

@@ -4,31 +4,23 @@ import AllAlertRules from 'container/ListAlertRules';
 import TriggeredAlerts from 'container/TriggeredAlerts';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 function AllAlertList(): JSX.Element {
+	const items = [
+		{ label: 'Alert Rules', key: 'Alert Rules', children: <AllAlertRules /> },
+		{
+			label: 'Triggered Alerts',
+			key: 'Triggered Alerts',
+			children: <TriggeredAlerts />,
+		},
+		// {
+		// 	label: 'Map Alert Channels',
+		// 	key = 'Map Alert Channels',
+		// 	children: <MapAlertChannels />,
+		// },
+	];
+
 	return (
-		<Tabs destroyInactiveTabPane defaultActiveKey="Alert Rules">
+		<Tabs destroyInactiveTabPane defaultActiveKey="Alert Rules" items={items} />
-			<TabPane tabKey="Alert Rules" tab="Alert Rules" key="Alert Rules">
-				<AllAlertRules />
-			</TabPane>
-
-			<TabPane
-				tabKey="Triggered Alerts"
-				key="Triggered Alerts"
-				tab="Triggered Alerts"
-			>
-				<TriggeredAlerts />
-			</TabPane>
-
-			{/* <TabPane
-				tabKey="Map Alert Channels"
-				key="Map Alert Channels"
-				tab="Map Alert Channels"
-			>
-				<MapAlertChannels />
-			</TabPane> */}
-		</Tabs>
 	);
 }