From f0560d121fb9234104ba46f2ec2c10a25b0ff5af Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Mon, 29 Aug 2022 19:46:56 +0530
Subject: [PATCH] Fix(UI): Updated labels for add and edit announcement modals
 (#6988)

* announcement add and edit modal label updated

* Added feature to see the local time zone while creating or editing announcement

* fixed failing unit tests

* improved the function to get time zone
---
 .../AddAnnouncementModal.test.tsx                |  1 +
 .../AnnouncementModal/AddAnnouncementModal.tsx   |  6 +++---
 .../EditAnnouncementModal.test.tsx               |  1 +
 .../AnnouncementModal/EditAnnouncementModal.tsx  | 10 +++++++---
 .../src/main/resources/ui/src/utils/TimeUtils.ts | 16 ++++++++++++++++
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.test.tsx
index aa1bdde9752..100d7cb7f60 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.test.tsx
@@ -42,6 +42,7 @@ jest.mock('../../../utils/EntityUtils', () => ({
 
 jest.mock('../../../utils/TimeUtils', () => ({
   getUTCDateTime: jest.fn(),
+  getTimeZone: jest.fn(),
 }));
 
 jest.mock('../../../utils/ToastUtils', () => ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
index 61375d77a5b..ab52bc0c7ba 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
@@ -26,7 +26,7 @@ import {
   validateMessages,
 } from '../../../utils/AnnouncementsUtils';
 import { getEntityFeedLink } from '../../../utils/EntityUtils';
-import { getUTCDateTime } from '../../../utils/TimeUtils';
+import { getTimeZone, getUTCDateTime } from '../../../utils/TimeUtils';
 import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import RichTextEditor from '../../common/rich-text-editor/RichTextEditor';
 import './AnnouncementModal.less';
@@ -130,7 +130,7 @@ const AddAnnouncementModal: FC<Props> = ({
         </Form.Item>
         <Space className="announcement-date-space" size={16}>
           <Form.Item
-            label="Start Date (UTC):"
+            label={`Start Date: (${getTimeZone()})`}
             name="startDate"
             rules={[
               {
@@ -144,7 +144,7 @@ const AddAnnouncementModal: FC<Props> = ({
             />
           </Form.Item>
           <Form.Item
-            label="End Date (UTC):"
+            label={`End Date: (${getTimeZone()})`}
             name="endtDate"
             rules={[
               {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.test.tsx
index 389c5ca228e..0dd2f30ca32 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.test.tsx
@@ -28,6 +28,7 @@ jest.mock('../../../utils/EntityUtils', () => ({
 jest.mock('../../../utils/TimeUtils', () => ({
   getUTCDateTime: jest.fn(),
   getLocaleDate: jest.fn(),
+  getTimeZone: jest.fn(),
 }));
 
 jest.mock('../../common/rich-text-editor/RichTextEditor', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
index 1f60c854e3a..1dab10963f6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
@@ -19,7 +19,11 @@ import {
   announcementInvalidStartTime,
   validateMessages,
 } from '../../../utils/AnnouncementsUtils';
-import { getLocaleDate, getUTCDateTime } from '../../../utils/TimeUtils';
+import {
+  getLocaleDate,
+  getTimeZone,
+  getUTCDateTime,
+} from '../../../utils/TimeUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import RichTextEditor from '../../common/rich-text-editor/RichTextEditor';
 import './AnnouncementModal.less';
@@ -108,7 +112,7 @@ const EditAnnouncementModal: FC<Props> = ({
         </Form.Item>
         <Space className="announcement-date-space" size={16}>
           <Form.Item
-            label="Start Date (UTC):"
+            label={`Start Date: (${getTimeZone()})`}
             name="startDate"
             rules={[
               {
@@ -122,7 +126,7 @@ const EditAnnouncementModal: FC<Props> = ({
             />
           </Form.Item>
           <Form.Item
-            label="End Date (UTC):"
+            label={`End Date: (${getTimeZone()})`}
             name="endDate"
             rules={[
               {
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
index 0b749068e6a..09d5c11cad2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
@@ -128,3 +128,19 @@ export const getDateTimeByTimeStamp = (timeStamp: number): string => {
 export const getLocaleDate = (timeStamp: number): string => {
   return moment(timeStamp, 'x').format('yyyy-MM-DDThh:mm');
 };
+
+export const getTimeZone = (): string => {
+  // Getting local time zone
+  const timeZoneToString = new Date()
+    .toLocaleDateString('en-US', {
+      day: '2-digit',
+      timeZoneName: 'long',
+    })
+    .slice(4);
+
+  // Line below finds out the abbrevation for time zone
+  // e.g. India Standard Time --> IST
+  const abbreviation = timeZoneToString.match(/\b[A-Z]+/g)?.join('') || '';
+
+  return abbreviation;
+};