fix: remove 'default channel' note from channels page (#1446)

frontend/public/locales/en-GB/channels.json

@@ -1,4 +1,14 @@
 {
+  "channel_delete_unexp_error": "Something went wrong",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
+  "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channels",
   "page_title_edit": "Edit Notification Channels",
   "button_save_channel": "Save",

frontend/public/locales/en/channels.json

@@ -1,4 +1,14 @@
 {
+  "channel_delete_unexp_error": "Something went wrong",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
+  "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channels",
   "page_title_edit": "Edit Notification Channels",
   "button_save_channel": "Save",

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -5,6 +5,7 @@ import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -14,6 +15,7 @@ import AppReducer from 'types/reducer/app';
 import Delete from './Delete';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const [notifications, Element] = notification.useNotification();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -29,12 +31,12 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 
 	const columns: ColumnsType<Channels> = [
 		{
-			title: 'Name',
+			title: t('column_channel_name'),
 			dataIndex: 'name',
 			key: 'name',
 		},
 		{
-			title: 'Type',
+			title: t('column_channel_type'),
 			dataIndex: 'type',
 			key: 'type',
 		},
@@ -42,14 +44,14 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 
 	if (action) {
 		columns.push({
-			title: 'Action',
+			title: t('column_channel_action'),
 			dataIndex: 'id',
 			key: 'action',
 			align: 'center',
 			render: (id: string): JSX.Element => (
 				<>
 					<Button onClick={(): void => onClickEditHandler(id)} type="link">
-						Edit
+						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} setChannels={setChannels} notifications={notifications} />
 				</>

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,29 +1,31 @@
 import { Button } from 'antd';
 import { NotificationInstance } from 'antd/lib/notification';
-import deleteAlert from 'api/channels/delete';
+import deleteChannel from 'api/channels/delete';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Channels } from 'types/api/channels/getAll';
 
 function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const [loading, setLoading] = useState(false);
 
 	const onClickHandler = async (): Promise<void> => {
 		try {
 			setLoading(true);
-			const response = await deleteAlert({
+			const response = await deleteChannel({
 				id,
 			});
 
 			if (response.statusCode === 200) {
 				notifications.success({
 					message: 'Success',
-					description: 'Channel Deleted Successfully',
+					description: t('channel_delete_success'),
 				});
 				setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
 			} else {
 				notifications.error({
 					message: 'Error',
-					description: response.error || 'Something went wrong',
+					description: response.error || t('channel_delete_unexp_error'),
 				});
 			}
 			setLoading(false);
@@ -31,7 +33,9 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 			notifications.error({
 				message: 'Error',
 				description:
-					error instanceof Error ? error.toString() : 'Something went wrong',
+					error instanceof Error
+						? error.toString()
+						: t('channel_delete_unexp_error'),
 			});
 			setLoading(false);
 		}

frontend/src/container/AllAlertChannels/index.tsx

@@ -8,16 +8,18 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
 import AlertChannelsComponent from './AlertChannels';
-import { Button, ButtonContainer } from './styles';
+import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 const { Paragraph } = Typography;
 
 function AlertChannels(): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],
@@ -34,28 +36,28 @@ function AlertChannels(): JSX.Element {
 	}
 
 	if (loading || payload === undefined) {
-		return <Spinner tip="Loading Channels.." height="90vh" />;
+		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
 	}
 
 	return (
 		<>
 			<ButtonContainer>
 				<Paragraph ellipsis type="secondary">
-					The latest added channel is used as the default channel for sending alerts
+					{t('sending_channels_note')}
 				</Paragraph>
 
-				<div>
+				<RightActionContainer>
 					<TextToolTip
-						text="More details on how to setting notification channels"
+						text={t('tooltip_notification_channels')}
 						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					{addNewChannelPermission && (
 						<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
-							New Alert Channel
+							{t('button_new_channel')}
 						</Button>
 					)}
-				</div>
+				</RightActionContainer>
 			</ButtonContainer>
 
 			<AlertChannelsComponent allChannels={payload} />

frontend/src/container/AllAlertChannels/styles.ts

@@ -1,6 +1,13 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';
 
+export const RightActionContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;
+
 export const ButtonContainer = styled.div`
 	&&& {
 		display: flex;