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
This commit is contained in:
Aniket Katkar 2022-08-29 19:46:56 +05:30 committed by GitHub
parent b59878e1b5
commit f0560d121f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 6 deletions

View File

@ -42,6 +42,7 @@ jest.mock('../../../utils/EntityUtils', () => ({
jest.mock('../../../utils/TimeUtils', () => ({ jest.mock('../../../utils/TimeUtils', () => ({
getUTCDateTime: jest.fn(), getUTCDateTime: jest.fn(),
getTimeZone: jest.fn(),
})); }));
jest.mock('../../../utils/ToastUtils', () => ({ jest.mock('../../../utils/ToastUtils', () => ({

View File

@ -26,7 +26,7 @@ import {
validateMessages, validateMessages,
} from '../../../utils/AnnouncementsUtils'; } from '../../../utils/AnnouncementsUtils';
import { getEntityFeedLink } from '../../../utils/EntityUtils'; import { getEntityFeedLink } from '../../../utils/EntityUtils';
import { getUTCDateTime } from '../../../utils/TimeUtils'; import { getTimeZone, getUTCDateTime } from '../../../utils/TimeUtils';
import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils'; import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
import RichTextEditor from '../../common/rich-text-editor/RichTextEditor'; import RichTextEditor from '../../common/rich-text-editor/RichTextEditor';
import './AnnouncementModal.less'; import './AnnouncementModal.less';
@ -130,7 +130,7 @@ const AddAnnouncementModal: FC<Props> = ({
</Form.Item> </Form.Item>
<Space className="announcement-date-space" size={16}> <Space className="announcement-date-space" size={16}>
<Form.Item <Form.Item
label="Start Date (UTC):" label={`Start Date: (${getTimeZone()})`}
name="startDate" name="startDate"
rules={[ rules={[
{ {
@ -144,7 +144,7 @@ const AddAnnouncementModal: FC<Props> = ({
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="End Date (UTC):" label={`End Date: (${getTimeZone()})`}
name="endtDate" name="endtDate"
rules={[ rules={[
{ {

View File

@ -28,6 +28,7 @@ jest.mock('../../../utils/EntityUtils', () => ({
jest.mock('../../../utils/TimeUtils', () => ({ jest.mock('../../../utils/TimeUtils', () => ({
getUTCDateTime: jest.fn(), getUTCDateTime: jest.fn(),
getLocaleDate: jest.fn(), getLocaleDate: jest.fn(),
getTimeZone: jest.fn(),
})); }));
jest.mock('../../common/rich-text-editor/RichTextEditor', () => { jest.mock('../../common/rich-text-editor/RichTextEditor', () => {

View File

@ -19,7 +19,11 @@ import {
announcementInvalidStartTime, announcementInvalidStartTime,
validateMessages, validateMessages,
} from '../../../utils/AnnouncementsUtils'; } from '../../../utils/AnnouncementsUtils';
import { getLocaleDate, getUTCDateTime } from '../../../utils/TimeUtils'; import {
getLocaleDate,
getTimeZone,
getUTCDateTime,
} from '../../../utils/TimeUtils';
import { showErrorToast } from '../../../utils/ToastUtils'; import { showErrorToast } from '../../../utils/ToastUtils';
import RichTextEditor from '../../common/rich-text-editor/RichTextEditor'; import RichTextEditor from '../../common/rich-text-editor/RichTextEditor';
import './AnnouncementModal.less'; import './AnnouncementModal.less';
@ -108,7 +112,7 @@ const EditAnnouncementModal: FC<Props> = ({
</Form.Item> </Form.Item>
<Space className="announcement-date-space" size={16}> <Space className="announcement-date-space" size={16}>
<Form.Item <Form.Item
label="Start Date (UTC):" label={`Start Date: (${getTimeZone()})`}
name="startDate" name="startDate"
rules={[ rules={[
{ {
@ -122,7 +126,7 @@ const EditAnnouncementModal: FC<Props> = ({
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="End Date (UTC):" label={`End Date: (${getTimeZone()})`}
name="endDate" name="endDate"
rules={[ rules={[
{ {

View File

@ -128,3 +128,19 @@ export const getDateTimeByTimeStamp = (timeStamp: number): string => {
export const getLocaleDate = (timeStamp: number): string => { export const getLocaleDate = (timeStamp: number): string => {
return moment(timeStamp, 'x').format('yyyy-MM-DDThh:mm'); 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;
};