From 4bf3c6c98c841d9b7925f51c390a8fe18f8fcd4e Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Fri, 20 Oct 2023 15:19:04 +0530
Subject: [PATCH] Adding timezone label on UI and Updated
 @tryghost/timezone-data for Admin-X Settings (#18702)

Ref.
https://www.notion.so/ghost/Kyiv-Kiev-timezone-issue-https-ghost-slack-com-archives-C0568LN2CGJ-p1697467598549909-cc0a8b6388df45018f48e0a917490bf4
---
 apps/admin-x-settings/package.json                           | 2 +-
 .../src/components/settings/general/TimeZone.tsx             | 4 +++-
 .../test/acceptance/general/timeZone.test.ts                 | 4 ++--
 yarn.lock                                                    | 5 -----
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/admin-x-settings/package.json b/apps/admin-x-settings/package.json
index a74856bb80..7e0c5ffeb5 100644
--- a/apps/admin-x-settings/package.json
+++ b/apps/admin-x-settings/package.json
@@ -48,7 +48,7 @@
     "@tryghost/color-utils": "0.1.24",
     "@tryghost/limit-service": "^1.2.10",
     "@tryghost/nql": "0.11.0",
-    "@tryghost/timezone-data": "0.3.0",
+    "@tryghost/timezone-data": "0.3.8",
     "@uiw/react-codemirror": "^4.21.9",
     "clsx": "2.0.0",
     "react": "18.2.0",
diff --git a/apps/admin-x-settings/src/components/settings/general/TimeZone.tsx b/apps/admin-x-settings/src/components/settings/general/TimeZone.tsx
index 3f1ee49ce0..3967f9d762 100644
--- a/apps/admin-x-settings/src/components/settings/general/TimeZone.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/TimeZone.tsx
@@ -56,6 +56,8 @@ const TimeZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
         };
     });
 
+    const publicationTimezoneData = timezoneOptions.find(option => option.value === publicationTimezone);
+
     const handleTimezoneChange = (value?: string) => {
         updateSetting('timezone', value || null);
     };
@@ -65,7 +67,7 @@ const TimeZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
             {
                 key: 'site-timezone',
                 value: <div className='flex flex-col'>
-                    {publicationTimezone}
+                    {publicationTimezoneData?.label || publicationTimezone}
                     <span className='text-sm'><Hint timezone={publicationTimezone} /></span>
                 </div>
             }
diff --git a/apps/admin-x-settings/test/acceptance/general/timeZone.test.ts b/apps/admin-x-settings/test/acceptance/general/timeZone.test.ts
index 0cbf200268..0776eb46f9 100644
--- a/apps/admin-x-settings/test/acceptance/general/timeZone.test.ts
+++ b/apps/admin-x-settings/test/acceptance/general/timeZone.test.ts
@@ -14,7 +14,7 @@ test.describe('Time zone settings', async () => {
 
         const section = page.getByTestId('timezone');
 
-        await expect(section.getByText('Etc/UTC')).toHaveCount(1);
+        await expect(section.getByText('(GMT) UTC')).toHaveCount(1);
 
         await section.getByRole('button', {name: 'Edit'}).click();
 
@@ -24,7 +24,7 @@ test.describe('Time zone settings', async () => {
 
         await expect(section.getByTestId('timezone-select')).toHaveCount(0);
 
-        await expect(section.getByText('America/Anchorage')).toHaveCount(1);
+        await expect(section.getByText('(GMT -9:00) Alaska')).toHaveCount(1);
 
         expect(lastApiRequests.editSettings?.body).toEqual({
             settings: [
diff --git a/yarn.lock b/yarn.lock
index e6d02f64ec..8facc08431 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8086,11 +8086,6 @@
   dependencies:
     unidecode "^0.1.8"
 
-"@tryghost/timezone-data@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@tryghost/timezone-data/-/timezone-data-0.3.0.tgz#5b0940a370a22a0fa3bdf506850dabbc6af574fa"
-  integrity sha512-3vdaEugCY7cTOlo8TuEYTXnXJa1CeNKJ34EU9uJPxWfUsd0BwaSN0hNcXLHhKxnPQnnJkSjradkXSvTfUsYZiA==
-
 "@tryghost/timezone-data@0.3.8":
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/@tryghost/timezone-data/-/timezone-data-0.3.8.tgz#413f8c7efa972bbdb186d95f4eab8d2799704010"