Wired Timezone settings to use real data

refs https://github.com/TryGhost/Team/issues/3150

- wires Timezone setting to read list of timezones and allow editing/saving new value
- handles read/write of real timezone setting from settings context
- uses `@tryghost/timezone-data` to fetch list of all timezones
- adds typings.d.ts to handle missing types for @tryghost/timezone-data

ghost/admin-x-settings/package.json

@@ -27,6 +27,7 @@
   },
   "scripts": {
     "dev": "concurrently \"vite preview\" \"vite build --watch\"",
+    "dev:start": "vite",
     "build": "tsc && vite build",
     "lint": "yarn run lint:js",
     "lint:js": "eslint --ext .js,.ts,.cjs,.tsx --cache src test",
@@ -40,7 +41,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@tryghost/timezone-data": "0.3.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.0.12",

ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx

@@ -17,7 +17,7 @@ interface SettingGroupProps {
 }
 
 const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, customHeader, customButtons, children, onStateChange, onSave}) => {
-    const handleEdit = () => {        
+    const handleEdit = () => {
         if (onStateChange) {
             onStateChange('edit');
         }
@@ -44,11 +44,11 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
     case 'edit':
         styles = 'border-grey-500';
         break;
-        
+
     case 'unsaved':
         styles = 'border-green';
         break;
-            
+
     default:
         styles = 'border-grey-200';
         break;
@@ -84,9 +84,9 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
 
     return (
         <div className={`flex flex-col gap-6 rounded border p-5 md:p-7 ${styles}`}>
-            {customHeader ? customHeader : 
+            {customHeader ? customHeader :
                 <SettingGroupHeader description={description} title={title!}>
-                    {customButtons ? customButtons : 
+                    {customButtons ? customButtons :
                         <ButtonGroup buttons={state === 'view' ? viewButtons : editButtons} link={true} />}
                 </SettingGroupHeader>
             }

ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx

@@ -1,14 +1,21 @@
-import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
+import Dropdown from '../../../admin-x-ds/global/Dropdown';
 import React, {useContext, useEffect, useState} from 'react';
-import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroup, {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
+import timezoneData from '@tryghost/timezone-data';
 import {SettingsContext} from '../../SettingsProvider';
 import {getLocalTime, getSettingValue} from '../../../utils/helpers';
 
+interface TimezoneDataDropdownOption {
+    name: string;
+    label: string;
+}
+
 const TimeZone: React.FC = () => {
-    const {settings} = useContext(SettingsContext) || {};
-    const publicationTimezone = getSettingValue(settings, 'timezone');
+    const [currentState, setCurrentState] = useState<TSettingGroupStates>('view');
+    const {settings, saveSettings} = useContext(SettingsContext) || {};
+    const savedPublicationTimezone = getSettingValue(settings, 'timezone');
+    const [publicationTimezone, setPublicationTimezone] = useState(savedPublicationTimezone);
 
     const [currentTime, setCurrentTime] = useState(getLocalTime(publicationTimezone));
     useEffect(() => {
@@ -21,12 +28,19 @@ const TimeZone: React.FC = () => {
         };
     }, [publicationTimezone]);
 
-    const buttons = [
-        {
-            label: 'Edit',
-            color: 'green'
-        }
-    ];
+    const handleStateChange = (newState: TSettingGroupStates) => {
+        setCurrentState(newState);
+    };
+
+    const handleSave = () => {
+        saveSettings?.([
+            {
+                key: 'timezone',
+                value: publicationTimezone
+            }
+        ]);
+        setCurrentState('view');
+    };
 
     const viewValues = [
         {
@@ -36,18 +50,37 @@ const TimeZone: React.FC = () => {
         }
     ];
 
-    const customHeader = (
-        <SettingGroupHeader
-            description="Set the time and date of your publication, used for all published posts"
-            title="Site timezone"
-        >
-            <ButtonGroup buttons={buttons} link={true} />
-        </SettingGroupHeader>
+    const timezoneOptions = timezoneData.map((tzOption: TimezoneDataDropdownOption) => {
+        return {
+            value: tzOption.name,
+            label: tzOption.label
+        };
+    });
+
+    const inputFields = (
+        <SettingGroupContent columns={1}>
+            <Dropdown
+                defaultSelectedOption={publicationTimezone}
+                hint={`The local time here is currently ${currentTime}`}
+                options={timezoneOptions}
+                title="Site timezone"
+                onSelect={(value) => {
+                    setCurrentState('unsaved');
+                    setPublicationTimezone(value);
+                }}
+            />
+        </SettingGroupContent>
     );
 
     return (
-        <SettingGroup customHeader={customHeader}>
-            <SettingGroupContent values={viewValues} />
+        <SettingGroup
+            description='Set the time and date of your publication, used for all published posts'
+            state={currentState}
+            title='Site timezone'
+            onSave={handleSave}
+            onStateChange={handleStateChange}
+        >
+            {currentState === 'view' ? <SettingGroupContent values={viewValues} /> : inputFields}
         </SettingGroup>
     );
 };

ghost/admin-x-settings/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '@tryghost/timezone-data'