chore: remove routing policies feature flag (#9249)

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -13,14 +13,12 @@ import APIError from 'types/api/error';
 import { useCreateAlertState } from '../context';
 import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
 import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
 import AlertThreshold from './AlertThreshold';
 import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
-	const showCondensedLayoutFlag = showCondensedLayout();
 
 	const {
 		data,
@@ -108,11 +106,9 @@ function AlertCondition(): JSX.Element {
 					refreshChannels={refreshChannels}
 				/>
 			)}
-			{showCondensedLayoutFlag ? (
 			<div className="condensed-advanced-options-container">
 				<AdvancedOptions />
 			</div>
-			) : null}
 		</div>
 	);
 }

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -18,7 +18,6 @@ import {
 	THRESHOLD_OPERATOR_OPTIONS,
 } from '../context/constants';
 import EvaluationSettings from '../EvaluationSettings/EvaluationSettings';
-import { showCondensedLayout } from '../utils';
 import ThresholdItem from './ThresholdItem';
 import { AnomalyAndThresholdProps, UpdateThreshold } from './types';
 import {
@@ -43,8 +42,6 @@ function AlertThreshold({
 		setNotificationSettings,
 	} = useCreateAlertState();
 
-	const showCondensedLayoutFlag = showCondensedLayout();
-
 	const { currentQuery } = useQueryBuilder();
 
 	const queryNames = getQueryNames(currentQuery);
@@ -163,17 +160,12 @@ function AlertThreshold({
 		}),
 	);
 
-	const evaluationWindowContext = showCondensedLayoutFlag ? (
-		<EvaluationSettings />
-	) : (
-		<strong>Evaluation Window.</strong>
-	);
-
 	return (
 		<div
-			className={classNames('alert-threshold-container', {
+			className={classNames(
-				'condensed-alert-threshold-container': showCondensedLayoutFlag,
+				'alert-threshold-container',
-			})}
+				'condensed-alert-threshold-container',
+			)}
 		>
 			{/* Main condition sentence */}
 			<div className="alert-condition-sentences">
@@ -219,7 +211,7 @@ function AlertThreshold({
 						options={matchTypeOptionsWithTooltips}
 					/>
 					<Typography.Text className="sentence-text">
-						during the {evaluationWindowContext}
+						during the <EvaluationSettings />
 					</Typography.Text>
 				</div>
 			</div>

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -110,7 +110,6 @@ jest.mock('container/NewWidget/RightContainer/alertFomatCategories', () => ({
 
 jest.mock('container/CreateAlertV2/utils', () => ({
 	...jest.requireActual('container/CreateAlertV2/utils'),
-	showCondensedLayout: jest.fn().mockReturnValue(false),
 }));
 
 const TEST_STRINGS = {
@@ -159,7 +158,9 @@ describe('AlertThreshold', () => {
 		expect(screen.getByText('Send a notification when')).toBeInTheDocument();
 		expect(screen.getByText('the threshold(s)')).toBeInTheDocument();
 		expect(screen.getByText('during the')).toBeInTheDocument();
-		expect(screen.getByText('Evaluation Window.')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('condensed-evaluation-settings-container'),
+		).toBeInTheDocument();
 	});
 
 	it('renders query selection dropdown', async () => {

frontend/src/container/CreateAlertV2/CreateAlertV2.tsx

@@ -8,12 +8,11 @@ import AlertCondition from './AlertCondition';
 import { CreateAlertProvider } from './context';
 import { buildInitialAlertDef } from './context/utils';
 import CreateAlertHeader from './CreateAlertHeader';
-import EvaluationSettings from './EvaluationSettings';
 import Footer from './Footer';
 import NotificationSettings from './NotificationSettings';
 import QuerySection from './QuerySection';
 import { CreateAlertV2Props } from './types';
-import { showCondensedLayout, Spinner } from './utils';
+import { Spinner } from './utils';
 
 function CreateAlertV2({ alertType }: CreateAlertV2Props): JSX.Element {
 	const queryToRedirect = buildInitialAlertDef(alertType);
@@ -23,8 +22,6 @@ function CreateAlertV2({ alertType }: CreateAlertV2Props): JSX.Element {
 
 	useShareBuilderUrl({ defaultValue: currentQueryToRedirect });
 
-	const showCondensedLayoutFlag = showCondensedLayout();
-
 	return (
 		<CreateAlertProvider initialAlertType={alertType}>
 			<Spinner />
@@ -32,7 +29,6 @@ function CreateAlertV2({ alertType }: CreateAlertV2Props): JSX.Element {
 				<CreateAlertHeader />
 				<QuerySection />
 				<AlertCondition />
-				{!showCondensedLayoutFlag ? <EvaluationSettings /> : null}
 				<NotificationSettings />
 			</div>
 			<Footer />

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx

@@ -1,28 +1,19 @@
 import './styles.scss';
 
-import { Button, Popover, Typography } from 'antd';
+import { Button, Popover } from 'antd';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { useCreateAlertState } from '../context';
-import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
-import AdvancedOptions from './AdvancedOptions';
 import EvaluationWindowPopover from './EvaluationWindowPopover';
 import { getEvaluationWindowTypeText, getTimeframeText } from './utils';
 
 function EvaluationSettings(): JSX.Element {
-	const {
+	const { evaluationWindow, setEvaluationWindow } = useCreateAlertState();
-		alertType,
-		evaluationWindow,
-		setEvaluationWindow,
-	} = useCreateAlertState();
 	const [
 		isEvaluationWindowPopoverOpen,
 		setIsEvaluationWindowPopoverOpen,
 	] = useState(false);
-	const showCondensedLayoutFlag = showCondensedLayout();
 
 	const popoverContent = (
 		<Popover
@@ -57,8 +48,6 @@ function EvaluationSettings(): JSX.Element {
 		</Popover>
 	);
 
-	// Layout consists of only the evaluation window popover
-	if (showCondensedLayoutFlag) {
 	return (
 		<div
 			className="condensed-evaluation-settings-container"
@@ -69,23 +58,4 @@ function EvaluationSettings(): JSX.Element {
 	);
 }
 
-	// Layout consists of
-	// - Stepper header
-	// - Evaluation window popover
-	// - Advanced options
-	return (
-		<div className="evaluation-settings-container">
-			<Stepper stepNumber={3} label="Evaluation settings" />
-			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && (
-				<div className="evaluate-alert-conditions-container">
-					<Typography.Text>Check conditions using data from</Typography.Text>
-					<div className="evaluate-alert-conditions-separator" />
-					{popoverContent}
-				</div>
-			)}
-			<AdvancedOptions />
-		</div>
-	);
-}
-
 export default EvaluationSettings;

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationSettings.test.tsx

@@ -1,14 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import * as alertState from 'container/CreateAlertV2/context';
-import * as utils from 'container/CreateAlertV2/utils';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import EvaluationSettings from '../EvaluationSettings';
 import { createMockAlertContextState } from './testUtils';
 
 jest.mock('container/CreateAlertV2/utils', () => ({
 	...jest.requireActual('container/CreateAlertV2/utils'),
-	showCondensedLayout: jest.fn().mockReturnValue(false),
 }));
 
 const mockSetEvaluationWindow = jest.fn();
@@ -18,52 +15,14 @@ jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
 	}),
 );
 
-jest.mock('../AdvancedOptions', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="advanced-options">AdvancedOptions</div>
-	),
-}));
-
-const EVALUATION_SETTINGS_TEXT = 'Evaluation settings';
-const CHECK_CONDITIONS_USING_DATA_FROM_TEXT =
-	'Check conditions using data from';
-
 describe('EvaluationSettings', () => {
-	it('should render the default evaluation settings layout', () => {
-		render(<EvaluationSettings />);
-		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
-		expect(
-			screen.getByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('advanced-options')).toBeInTheDocument();
-	});
-
-	it('should not render evaluation window for anomaly based alert', () => {
-		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
-			createMockAlertContextState({
-				alertType: AlertTypes.ANOMALY_BASED_ALERT,
-			}),
-		);
-		render(<EvaluationSettings />);
-		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
-		expect(
-			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).not.toBeInTheDocument();
-	});
-
 	it('should render the condensed evaluation settings layout', () => {
-		jest.spyOn(utils, 'showCondensedLayout').mockReturnValueOnce(true);
 		render(<EvaluationSettings />);
-		// Header, check conditions using data from and advanced options should be hidden
-		expect(screen.queryByText(EVALUATION_SETTINGS_TEXT)).not.toBeInTheDocument();
-		expect(
-			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('advanced-options')).not.toBeInTheDocument();
-		// Only evaluation window popover should be visible
 		expect(
 			screen.getByTestId('condensed-evaluation-settings-container'),
 		).toBeInTheDocument();
+		// Verify that default option is selected
+		expect(screen.getByText('Rolling')).toBeInTheDocument();
+		expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();
 	});
 });

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -9,13 +9,10 @@ import {
 } from '../context/constants';
 import AdvancedOptionItem from '../EvaluationSettings/AdvancedOptionItem';
 import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
 import MultipleNotifications from './MultipleNotifications';
 import NotificationMessage from './NotificationMessage';
 
 function NotificationSettings(): JSX.Element {
-	const showCondensedLayoutFlag = showCondensedLayout();
-
 	const {
 		notificationSettings,
 		setNotificationSettings,
@@ -82,10 +79,7 @@ function NotificationSettings(): JSX.Element {
 
 	return (
 		<div className="notification-settings-container">
-			<Stepper
+			<Stepper stepNumber={3} label="Notification settings" />
-				stepNumber={showCondensedLayoutFlag ? 3 : 4}
-				label="Notification settings"
-			/>
 			<NotificationMessage />
 			<div className="notification-settings-content">
 				<MultipleNotifications />

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/NotificationSettings.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as createAlertContext from 'container/CreateAlertV2/context';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
-import * as utils from 'container/CreateAlertV2/utils';
 
 import NotificationSettings from '../NotificationSettings';
 
@@ -26,7 +25,6 @@ jest.mock(
 
 jest.mock('container/CreateAlertV2/utils', () => ({
 	...jest.requireActual('container/CreateAlertV2/utils'),
-	showCondensedLayout: jest.fn().mockReturnValue(false),
 }));
 
 const initialNotificationSettings = createMockAlertContextState()
@@ -42,10 +40,10 @@ const REPEAT_NOTIFICATIONS_TEXT = 'Repeat notifications';
 const ENTER_TIME_INTERVAL_TEXT = 'Enter time interval...';
 
 describe('NotificationSettings', () => {
-	it('renders the notification settings tab with step number 4 and default values', () => {
+	it('renders the notification settings tab with step number 3 and default values', () => {
 		render(<NotificationSettings />);
 		expect(screen.getByText('Notification settings')).toBeInTheDocument();
-		expect(screen.getByText('4')).toBeInTheDocument();
+		expect(screen.getByText('3')).toBeInTheDocument();
 		expect(screen.getByTestId('multiple-notifications')).toBeInTheDocument();
 		expect(screen.getByTestId('notification-message')).toBeInTheDocument();
 		expect(screen.getByText(REPEAT_NOTIFICATIONS_TEXT)).toBeInTheDocument();
@@ -56,15 +54,6 @@ describe('NotificationSettings', () => {
 		).toBeInTheDocument();
 	});
 
-	it('renders the notification settings tab with step number 3 in condensed layout', () => {
-		jest.spyOn(utils, 'showCondensedLayout').mockReturnValueOnce(true);
-		render(<NotificationSettings />);
-		expect(screen.getByText('Notification settings')).toBeInTheDocument();
-		expect(screen.getByText('3')).toBeInTheDocument();
-		expect(screen.getByTestId('multiple-notifications')).toBeInTheDocument();
-		expect(screen.getByTestId('notification-message')).toBeInTheDocument();
-	});
-
 	describe('Repeat notifications', () => {
 		it('renders the repeat notifications with inputs hidden when the repeat notifications switch is off', () => {
 			render(<NotificationSettings />);

frontend/src/container/CreateAlertV2/utils.tsx

@@ -27,16 +27,6 @@ import {
 import { EVALUATION_WINDOW_TIMEFRAME } from './EvaluationSettings/constants';
 import { GetCreateAlertLocalStateFromAlertDefReturn } from './types';
 
-// UI side feature flag
-export const showNewCreateAlertsPage = (): boolean =>
-	localStorage.getItem('showNewCreateAlertsPage') === 'true';
-
-// UI side FF to switch between the 2 layouts of the create alert page
-// Layout 1 - Default layout
-// Layout 2 - Condensed layout
-export const showCondensedLayout = (): boolean =>
-	localStorage.getItem('hideCondensedLayout') !== 'true';
-
 export function Spinner(): JSX.Element | null {
 	const { isCreatingAlertRule, isUpdatingAlertRule } = useCreateAlertState();
 

frontend/src/container/EditAlertV2/EditAlertV2.tsx

@@ -8,11 +8,10 @@ import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 
 import AlertCondition from '../CreateAlertV2/AlertCondition';
 import { buildInitialAlertDef } from '../CreateAlertV2/context/utils';
-import EvaluationSettings from '../CreateAlertV2/EvaluationSettings';
 import Footer from '../CreateAlertV2/Footer';
 import NotificationSettings from '../CreateAlertV2/NotificationSettings';
 import QuerySection from '../CreateAlertV2/QuerySection';
-import { showCondensedLayout, Spinner } from '../CreateAlertV2/utils';
+import { Spinner } from '../CreateAlertV2/utils';
 
 interface EditAlertV2Props {
 	alertType?: AlertTypes;
@@ -33,15 +32,12 @@ function EditAlertV2({
 
 	useShareBuilderUrl({ defaultValue: currentQueryToRedirect });
 
-	const showCondensedLayoutFlag = showCondensedLayout();
-
 	return (
 		<>
 			<Spinner />
 			<div className="create-alert-v2-container">
 				<QuerySection />
 				<AlertCondition />
-				{!showCondensedLayoutFlag ? <EvaluationSettings /> : null}
 				<NotificationSettings />
 			</div>
 			<Footer />

frontend/src/container/RoutingPolicies/utils.tsx

@@ -5,10 +5,6 @@ import { SuccessResponseV2 } from 'types/api';
 
 import { RoutingPolicy } from './types';
 
-export function showRoutingPoliciesPage(): boolean {
-	return localStorage.getItem('showRoutingPoliciesPage') === 'true';
-}
-
 export function mapApiResponseToRoutingPolicies(
 	response: SuccessResponseV2<GetRoutingPoliciesResponse>,
 ): RoutingPolicy[] {

frontend/src/pages/AlertList/index.tsx

@@ -8,7 +8,6 @@ import ROUTES from 'constants/routes';
 import AllAlertRules from 'container/ListAlertRules';
 import { PlannedDowntime } from 'container/PlannedDowntime/PlannedDowntime';
 import RoutingPolicies from 'container/RoutingPolicies';
-import { showRoutingPoliciesPage } from 'container/RoutingPolicies/utils';
 import TriggeredAlerts from 'container/TriggeredAlerts';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -28,10 +27,7 @@ function AllAlertList(): JSX.Element {
 
 	const search = urlQuery.get('search');
 
-	const showRoutingPoliciesPageFlag = showRoutingPoliciesPage();
-
 	const configurationTab = useMemo(() => {
-		if (showRoutingPoliciesPageFlag) {
 		const tabs = [
 			{
 				label: 'Planned Downtime',
@@ -51,13 +47,7 @@ function AllAlertList(): JSX.Element {
 				items={tabs}
 			/>
 		);
-		}
+	}, []);
-		return (
-			<div className="planned-downtime-container">
-				<PlannedDowntime />
-			</div>
-		);
-	}, [showRoutingPoliciesPageFlag]);
 
 	const items: TabsProps['items'] = [
 		{