From e4753e6b44021acd2cc5806a7a3db0d252f07bbc Mon Sep 17 00:00:00 2001 From: Sudeep MP Date: Mon, 2 Sep 2024 17:59:37 +0100 Subject: [PATCH] Feat/fix ux copy kafka view (#5814) * feat: add view templates option to dashboard menu * feat: increase dropdown overlay width Set the dropdown overlay width to 200px to provide breathing space for the dropdown button. Added flex to wrap the dropdown button to create space between the right icon and the left elements. * feat: add localization for messaging queues Kafka overview page Added localization support for the messaging queues Kafka overview page. Closes #1735 --------- Co-authored-by: Pranay Prateek --- .../en-GB/messagingQueuesKafkaOverview.json | 30 +++++++++++++ .../en/messagingQueuesKafkaOverview.json | 30 +++++++++++++ .../pages/MessagingQueues/MessagingQueues.tsx | 43 ++++++++----------- 3 files changed, 78 insertions(+), 25 deletions(-) create mode 100644 frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json create mode 100644 frontend/public/locales/en/messagingQueuesKafkaOverview.json diff --git a/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json b/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json new file mode 100644 index 0000000000..5061a5ddcb --- /dev/null +++ b/frontend/public/locales/en-GB/messagingQueuesKafkaOverview.json @@ -0,0 +1,30 @@ +{ + "breadcrumb": "Messaging Queues", + "header": "Kafka / Overview", + "overview": { + "title": "Start sending data in as little as 20 minutes", + "subtitle": "Connect and Monitor Your Data Streams" + }, + "configureConsumer": { + "title": "Configure Consumer", + "description": "Add consumer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "configureProducer": { + "title": "Configure Producer", + "description": "Add producer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "monitorKafka": { + "title": "Monitor kafka", + "description": "Add your Kafka source to gain insights and enhance activity tracking.", + "button": "Get Started" + }, + "summarySection": { + "viewDetailsButton": "View Details" + }, + "confirmModal": { + "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.", + "okText": "Proceed" + } +} \ No newline at end of file diff --git a/frontend/public/locales/en/messagingQueuesKafkaOverview.json b/frontend/public/locales/en/messagingQueuesKafkaOverview.json new file mode 100644 index 0000000000..5061a5ddcb --- /dev/null +++ b/frontend/public/locales/en/messagingQueuesKafkaOverview.json @@ -0,0 +1,30 @@ +{ + "breadcrumb": "Messaging Queues", + "header": "Kafka / Overview", + "overview": { + "title": "Start sending data in as little as 20 minutes", + "subtitle": "Connect and Monitor Your Data Streams" + }, + "configureConsumer": { + "title": "Configure Consumer", + "description": "Add consumer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "configureProducer": { + "title": "Configure Producer", + "description": "Add producer data sources to gain insights and enhance monitoring.", + "button": "Get Started" + }, + "monitorKafka": { + "title": "Monitor kafka", + "description": "Add your Kafka source to gain insights and enhance activity tracking.", + "button": "Get Started" + }, + "summarySection": { + "viewDetailsButton": "View Details" + }, + "confirmModal": { + "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.", + "okText": "Proceed" + } +} \ No newline at end of file diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx index 103fc15827..ebac021fd2 100644 --- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx +++ b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx @@ -8,6 +8,7 @@ import ROUTES from 'constants/routes'; import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; import { Calendar, ListMinus } from 'lucide-react'; import { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { isCloudUser } from 'utils/app'; @@ -19,6 +20,7 @@ import { ComingSoon } from './MQCommon/MQCommon'; function MessagingQueues(): JSX.Element { const history = useHistory(); + const { t } = useTranslation('messagingQueuesKafkaOverview'); const { confirm } = Modal; @@ -30,8 +32,7 @@ function MessagingQueues(): JSX.Element { confirm({ icon: , - content: - 'Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.', + content: t('confirmModal.content'), className: 'overview-confirm-modal', onOk() { logEvent('Messaging Queues: Proceed button clicked', { @@ -39,7 +40,7 @@ function MessagingQueues(): JSX.Element { }); history.push(ROUTES.MESSAGING_QUEUES_DETAIL); }, - okText: 'Proceed', + okText: t('confirmModal.okText'), }); }; @@ -65,24 +66,20 @@ function MessagingQueues(): JSX.Element {
- Messaging Queues + {t('breadcrumb')}
-
Kafka / Overview
+
{t('header')}
-

- Start sending data in as little as 20 minutes -

-

Connect and Monitor Your Data Streams

+

{t('overview.title')}

+

{t('overview.subtitle')}

-

Configure Consumer

-

- Connect your consumer and producer data sources to start monitoring. -

+

{t('configureConsumer.title')}

+

{t('configureConsumer.description')}

-

Configure Producer

-

- Connect your consumer and producer data sources to start monitoring. -

+

{t('configureProducer.title')}

+

{t('configureProducer.description')}

-

Monitor kafka

-

- Set up your Kafka monitoring to track consumer and producer activities. -

+

{t('monitorKafka.title')}

+

{t('monitorKafka.description')}

@@ -152,7 +145,7 @@ function MessagingQueues(): JSX.Element {