feat: use custom component for time of day setting

plugin.json

@@ -25,11 +25,9 @@
     "footer": "",
     "settings": [
       {
-        "key": "TimeOfDay",
-        "display_name": "Time of day:",
-        "type": "text",
-        "help_text": "Time of day to run the Legal Hold task, in the form 'HH:MM ±HHMM' (e.g. '3:00am -0700').  Use +0000 for UTC.",
-        "default": "1:00am -0700"
+        "key": "CommonSettings",
+        "display_name": "Common Settings:",
+        "type": "custom"
       },
       {
         "key": "LegalHoldsSettings",

webapp/src/components/admin_console_settings/select_setting.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import BaseSetting from './base_setting';
+import ReactSelect, { ActionMeta } from 'react-select';
+
+export type OptionType = {
+    label: string | JSX.Element;
+    value: string;
+}
+
+type Props = {
+    id: string;
+    name: string;
+    helpText: string;
+    onChange: (value: OptionType) => void;
+    value: OptionType;
+    getOptions: () => OptionType[];
+    disabled?: boolean;
+};
+
+const SelectSetting = (props: Props) => {
+    return (
+        <BaseSetting
+            {...props}
+        >
+            <ReactSelect
+                id={props.id}
+                onChange={props.onChange}
+                isDisabled={props.disabled}
+                value={props.value}
+                hideSelectedOptions={true}
+                isSearchable={true}
+                options={props.getOptions()}
+            />
+        </BaseSetting>
+    );
+};
+
+export default SelectSetting;

webapp/src/components/common_settings.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { IntlProvider } from 'react-intl';
+
+import SelectSetting, { OptionType } from './admin_console_settings/select_setting';
+import { func } from 'prop-types';
+
+type CommonSettingsData = {
+    TimeOfDay: OptionType;
+};
+
+const useCommonSettingsForm = (initialValue: CommonSettingsData | undefined, onChange: (id: string, value: CommonSettingsData) => void) => {
+    const [formState, setFormState] = useState<CommonSettingsData>({
+        TimeOfDay: initialValue?.TimeOfDay ?? { label: '12:00am', value: '00:00' },
+    });
+
+    return useMemo(() => ({
+        formState,
+        setFormValue: <T extends keyof CommonSettingsData>(key: T, value: CommonSettingsData[T]) => {
+            const newState = {
+                ...formState,
+                [key]: value,
+            };
+
+            setFormState(newState);
+            onChange('PluginSettings.Plugins.com+mattermost+plugin-legal-hold.commonsettings', newState);
+        },
+    }), [formState, setFormState, onChange]);
+};
+
+type Props = {
+    value: CommonSettingsData | undefined;
+    onChange: (id: string, value: CommonSettingsData) => void;
+};
+
+const getJobTimeOptions = () => {
+    const options: OptionType[] = [];
+    return () => {
+        if (options.length > 0) {
+            return options;
+        }
+        const minuteIntervals = ['00', '15', '30', '45'];
+        for (let h = 0; h < 24; h++) {
+            let hourLabel = h;
+            let hourValue = `${h}`;
+            const timeOfDay = h >= 12 ? 'pm' : 'am';
+            if (hourLabel < 10) {
+                hourValue = `0${hourValue}`;
+            }
+            if (hourLabel > 12) {
+                hourLabel -= 12;
+            }
+            if (hourLabel === 0) {
+                hourLabel = 12;
+            }
+            for (let i = 0; i < minuteIntervals.length; i++) {
+                options.push({
+                    label: `${hourLabel}:${minuteIntervals[i]}${timeOfDay}`,
+                    value: `${hourValue}:${minuteIntervals[i]}`
+                });
+            }
+        }
+
+        return options;
+    };
+};
+
+const CommonSettings = (props: Props) => {
+    const { formState, setFormValue } = useCommonSettingsForm(props.value, props.onChange);
+
+    return (
+        <IntlProvider locale='en-US'>
+            <SelectSetting
+                id={'com.mattermost.plugin-legal-hold.TimeOfDay'}
+                name={'Time of day'}
+                helpText={'Time of day to run the Legal Hold task'}
+                value={formState.TimeOfDay}
+                onChange={(value) => setFormValue('TimeOfDay', value)}
+                getOptions={getJobTimeOptions()}
+            />
+        </IntlProvider>
+    );
+};
+
+export default CommonSettings;

webapp/src/index.tsx

@@ -7,11 +7,13 @@ import {manifest} from '@/manifest';
 import {PluginRegistry} from '@/types/mattermost-webapp';
 import LegalHoldsSetting from '@/components/legal_holds_setting';
 import AmazonS3BucketSettings from '@/components/amazon_s3_bucket_settings';
+import CommonSettings from '@/components/common_settings';
 
 export default class Plugin {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
         // @see https://developers.mattermost.com/extend/plugins/webapp/reference/
+        registry.registerAdminConsoleCustomSetting('CommonSettings', CommonSettings, {showTitle: false});
         registry.registerAdminConsoleCustomSetting('LegalHoldsSettings', LegalHoldsSetting, {showTitle: false});
         registry.registerAdminConsoleCustomSetting('AmazonS3BucketSettings', AmazonS3BucketSettings, {showTitle: false});
     }