From 56a204756047b9b9caa40a7e43ffd0686b0dcd9b Mon Sep 17 00:00:00 2001 From: Amol Umbark Date: Sun, 31 Jul 2022 09:54:58 +0530 Subject: [PATCH] fix: remove 'default channel' note from channels page (#1446) --- frontend/public/locales/en-GB/channels.json | 10 ++++++++++ frontend/public/locales/en/channels.json | 10 ++++++++++ .../container/AllAlertChannels/AlertChannels.tsx | 10 ++++++---- .../src/container/AllAlertChannels/Delete.tsx | 14 +++++++++----- .../src/container/AllAlertChannels/index.tsx | 16 +++++++++------- .../src/container/AllAlertChannels/styles.ts | 7 +++++++ 6 files changed, 51 insertions(+), 16 deletions(-) diff --git a/frontend/public/locales/en-GB/channels.json b/frontend/public/locales/en-GB/channels.json index 5e670cc536..027501f69d 100644 --- a/frontend/public/locales/en-GB/channels.json +++ b/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", diff --git a/frontend/public/locales/en/channels.json b/frontend/public/locales/en/channels.json index 5e670cc536..027501f69d 100644 --- a/frontend/public/locales/en/channels.json +++ b/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", diff --git a/frontend/src/container/AllAlertChannels/AlertChannels.tsx b/frontend/src/container/AllAlertChannels/AlertChannels.tsx index 974530c6e5..762304a871 100644 --- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx +++ b/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(allChannels); const { role } = useSelector((state) => state.app); @@ -29,12 +31,12 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element { const columns: ColumnsType = [ { - 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 => ( <> diff --git a/frontend/src/container/AllAlertChannels/Delete.tsx b/frontend/src/container/AllAlertChannels/Delete.tsx index 85116fd922..75555e199c 100644 --- a/frontend/src/container/AllAlertChannels/Delete.tsx +++ b/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 => { 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); } diff --git a/frontend/src/container/AllAlertChannels/index.tsx b/frontend/src/container/AllAlertChannels/index.tsx index 44ab948f0b..99636806ea 100644 --- a/frontend/src/container/AllAlertChannels/index.tsx +++ b/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((state) => state.app); const [addNewChannelPermission] = useComponentPermission( ['add_new_channel'], @@ -34,28 +36,28 @@ function AlertChannels(): JSX.Element { } if (loading || payload === undefined) { - return ; + return ; } return ( <> - The latest added channel is used as the default channel for sending alerts + {t('sending_channels_note')} -
+ {addNewChannelPermission && ( )} -
+ diff --git a/frontend/src/container/AllAlertChannels/styles.ts b/frontend/src/container/AllAlertChannels/styles.ts index b2d03a4cea..209860b867 100644 --- a/frontend/src/container/AllAlertChannels/styles.ts +++ b/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;