feat: add channel creation option and auto-refresh channels list on d…

…ropdown open
SigNoz · Nov 11, 2024 · 4b9a832 · 4b9a832
1 parent 6387298
commit 4b9a832
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 39 deletions.
diff --git a/frontend/src/container/FormAlertRules/BasicInfo.tsx b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -94,6 +94,10 @@ function BasicInfo({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [channels.payload, channels.loading]);
 
+	const refetchChannels = async (): Promise<void> => {
+		await channels.refetch();
+	};
+
 	return (
 		<>
 			<StepHeading> {t('alert_form_step4')} </StepHeading>
@@ -212,9 +216,8 @@ function BasicInfo({
 							]}
 						>
 							<ChannelSelect
-								disabled={
-									shouldBroadCastToAllChannels || noChannels || !!channels.loading
-								}
+								onDropdownOpen={refetchChannels}
+								disabled={shouldBroadCastToAllChannels}
 								currentValue={alertDef.preferredChannels}
 								channels={channels}
 								onSelectChannels={(preferredChannels): void => {

diff --git a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx
@@ -1,4 +1,7 @@
-import { Select } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Select, Spin } from 'antd';
+import ROUTES from 'constants/routes';
 import { State } from 'hooks/useFetch';
 import { useNotifications } from 'hooks/useNotifications';
 import { ReactNode } from 'react';
@@ -11,13 +14,15 @@ export interface ChannelSelectProps {
 	disabled?: boolean;
 	currentValue?: string[];
 	onSelectChannels: (s: string[]) => void;
+	onDropdownOpen: () => void;
 	channels: State<PayloadProps | undefined>;
 }
 
 function ChannelSelect({
 	disabled,
 	currentValue,
 	onSelectChannels,
+	onDropdownOpen,
 	channels,
 }: ChannelSelectProps): JSX.Element | null {
 	// init namespace for translations
@@ -26,6 +31,10 @@ function ChannelSelect({
 	const { notifications } = useNotifications();
 
 	const handleChange = (value: string[]): void => {
+		if (value.includes('add-new-channel')) {
+			window.open(ROUTES.CHANNELS_NEW, '_blank');
+			return;
+		}
 		onSelectChannels(value);
 	};
 
@@ -35,9 +44,28 @@ function ChannelSelect({
 			description: channels.errorMessage,
 		});
 	}
+
 	const renderOptions = (): ReactNode[] => {
 		const children: ReactNode[] = [];
 
+		if (!channels.loading) {
+			children.push(
+				<Select.Option key="add-new-channel" value="add-new-channel">
+					<div
+						style={{
+							color: Color.BG_ROBIN_500,
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<PlusOutlined />
+						Create a new channel
+					</div>
+				</Select.Option>,
+			);
+		}
+
 		if (
 			channels.loading ||
 			channels.payload === undefined ||
@@ -56,6 +84,7 @@ function ChannelSelect({
 
 		return children;
 	};
+
 	return (
 		<StyledSelect
 			disabled={disabled}
@@ -65,6 +94,12 @@ function ChannelSelect({
 			placeholder={t('placeholder_channel_select')}
 			data-testid="alert-channel-select"
 			value={currentValue}
+			notFoundContent={channels.loading && <Spin size="small" />}
+			onDropdownVisibleChange={(open): void => {
+				if (open) {
+					onDropdownOpen();
+				}
+			}}
 			onChange={(value): void => {
 				handleChange(value as string[]);
 			}}

diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 function useFetch<PayloadProps, FunctionParams>(
@@ -10,7 +10,7 @@ function useFetch<PayloadProps, FunctionParams>(
 		(arg0: any): Promise<SuccessResponse<PayloadProps> | ErrorResponse>;
 	},
 	param?: FunctionParams,
-): State<PayloadProps | undefined> {
+): State<PayloadProps | undefined> & { refetch: () => Promise<void> } {
 	const [state, setStates] = useState<State<PayloadProps | undefined>>({
 		loading: true,
 		success: null,
@@ -19,37 +19,28 @@ function useFetch<PayloadProps, FunctionParams>(
 		payload: undefined,
 	});
 
-	const loadingRef = useRef(0);
-
-	useEffect(() => {
+	const fetchData = useCallback(async (): Promise<void> => {
+		setStates((prev) => ({ ...prev, loading: true }));
 		try {
-			(async (): Promise<void> => {
-				if (state.loading) {
-					const response = await functions(param);
-
-					if (loadingRef.current === 0) {
-						loadingRef.current = 1;
+			const response = await functions(param);
 
-						if (response.statusCode === 200) {
-							setStates({
-								loading: false,
-								error: false,
-								success: true,
-								payload: response.payload,
-								errorMessage: '',
-							});
-						} else {
-							setStates({
-								loading: false,
-								error: true,
-								success: false,
-								payload: undefined,
-								errorMessage: response.error as string,
-							});
-						}
-					}
-				}
-			})();
+			if (response.statusCode === 200) {
+				setStates({
+					loading: false,
+					error: false,
+					success: true,
+					payload: response.payload,
+					errorMessage: '',
+				});
+			} else {
+				setStates({
+					loading: false,
+					error: true,
+					success: false,
+					payload: undefined,
+					errorMessage: response.error as string,
+				});
+			}
 		} catch (error) {
 			setStates({
 				payload: undefined,
@@ -59,13 +50,16 @@ function useFetch<PayloadProps, FunctionParams>(
 				errorMessage: error as string,
 			});
 		}
-		return (): void => {
-			loadingRef.current = 1;
-		};
-	}, [functions, param, state.loading]);
+	}, [functions, param]);
+
+	// Initial fetch
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
 
 	return {
 		...state,
+		refetch: fetchData,
 	};
 }