MM-39711 Gekidou Settings - Display Main Screen (#6287)

* added chevron to menu item component

* starting with the skeleton

* starting with the skeleton

* starting with the skeleton

* starting with the skeleton

* remove extra line

* tested on tablets

* some corrections

* corrections as per review

* starting with notification skeleton

* attached notification settings to navigation

* added auto responder

* update translation

* update snapshot

* updated snapshot

* correction after review

* removed unnecessary screen

* refactored

* updated the testIDs

* Update Package.resolved

* refactor

* removed Mattermost as default server name

* fix ts

* refactored settings constant

* display settings skeleton

- pending: query for allowed themes

* added 'allowedThemes' query

* correction after review

* correction after review

* removed extra notification_settings line

* Update en.json

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

app/constants/screens.ts

@@ -16,6 +16,7 @@ export const CREATE_OR_EDIT_CHANNEL = 'CreateOrEditChannel';
 export const CREATE_TEAM = 'CreateTeam';
 export const CUSTOM_STATUS = 'CustomStatus';
 export const CUSTOM_STATUS_CLEAR_AFTER = 'CustomStatusClearAfter';
+export const DISPLAY_SETTINGS = 'DisplaySettings';
 export const EDIT_POST = 'EditPost';
 export const EDIT_PROFILE = 'EditProfile';
 export const EDIT_SERVER = 'EditServer';
@@ -32,6 +33,7 @@ export const LATEX = 'Latex';
 export const LOGIN = 'Login';
 export const MENTIONS = 'Mentions';
 export const MFA = 'MFA';
+export const NOTIFICATION_SETTINGS = 'NotificationSettings';
 export const PERMALINK = 'Permalink';
 export const POST_OPTIONS = 'PostOptions';
 export const REACTIONS = 'Reactions';
@@ -40,7 +42,6 @@ export const SEARCH = 'Search';
 export const SELECT_TEAM = 'SelectTeam';
 export const SERVER = 'Server';
 export const SETTINGS = 'Settings';
-export const NOTIFICATION_SETTINGS = 'NotificationSettings';
 export const SNACK_BAR = 'SnackBar';
 export const SSO = 'SSO';
 export const THREAD = 'Thread';
@@ -64,6 +65,7 @@ export default {
     CREATE_TEAM,
     CUSTOM_STATUS,
     CUSTOM_STATUS_CLEAR_AFTER,
+    DISPLAY_SETTINGS,
     EDIT_POST,
     EDIT_PROFILE,
     EDIT_SERVER,

app/queries/servers/system.ts

@@ -5,6 +5,7 @@ import {Database, Q} from '@nozbe/watermelondb';
 import {of as of$, Observable} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
+import {Preferences} from '@constants';
 import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database';
 import {PUSH_PROXY_STATUS_UNKNOWN} from '@constants/push_proxy';
 
@@ -395,3 +396,21 @@ export const observeOnlyUnreads = (database: Database) => {
         switchMap((model) => of$(model.value as boolean)),
     );
 };
+
+export const observeAllowedThemes = (database: Database) => {
+    const defaultThemeKeys = Object.keys(Preferences.THEMES);
+    return observeConfigValue(database, 'AllowedThemes').pipe(
+        switchMap((allowedThemes) => {
+            let acceptableThemes = defaultThemeKeys;
+
+            if (allowedThemes) {
+                const allowedThemeKeys = (allowedThemes || '').split(',').filter(String);
+                if (allowedThemeKeys.length) {
+                    acceptableThemes = defaultThemeKeys.filter((k) => allowedThemeKeys.includes(k));
+                }
+            }
+
+            return acceptableThemes;
+        }),
+    );
+};

app/screens/index.tsx

@@ -188,6 +188,9 @@ Navigation.setLazyComponentRegistrator((screenName) => {
         case Screens.NOTIFICATION_SETTINGS:
             screen = withServerDatabase(require('@screens/settings/notifications').default);
             break;
+        case Screens.DISPLAY_SETTINGS:
+            screen = withServerDatabase(require('@screens/settings/display').default);
+            break;
     }
 
     if (screen) {

app/screens/settings/constant.ts

@@ -55,7 +55,29 @@ export const NotificationsOptionConfig = {
     },
 };
 
+export const DisplayOptionConfig = {
+    clock: {
+        defaultMessage: 'Clock Display',
+        i18nId: t('mobile.display_settings.clockDisplay'),
+        iconName: 'clock-outline',
+        testID: 'display_settings.clock',
+    },
+    theme: {
+        defaultMessage: 'Theme',
+        i18nId: t('mobile.display_settings.theme'),
+        iconName: 'palette-outline',
+        testID: 'display_settings.theme',
+    },
+    timezone: {
+        defaultMessage: 'Timezone',
+        i18nId: t('mobile.display_settings.timezone'),
+        iconName: 'globe',
+        testID: 'display_settings.timezone',
+    },
+};
+
 export default {
     ...SettingOptionConfig,
     ...NotificationsOptionConfig,
+    ...DisplayOptionConfig,
 };

app/screens/settings/display/display.tsx

@@ -0,0 +1,82 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Alert, Platform, ScrollView, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {useTheme} from '@context/theme';
+import SettingOption from '@screens/settings/setting_option';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.centerChannelBg,
+        },
+        wrapper: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
+            ...Platform.select({
+                ios: {
+                    flex: 1,
+                    paddingTop: 35,
+                },
+            }),
+        },
+        divider: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
+            height: 1,
+            width: '100%',
+        },
+    };
+});
+
+type DisplayProps = {
+    isTimezoneEnabled: boolean;
+    isThemeSwitchingEnabled: boolean;
+}
+const Display = ({isTimezoneEnabled, isThemeSwitchingEnabled}: DisplayProps) => {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    const onPressHandler = () => {
+        return Alert.alert(
+            'The functionality you are trying to use has not yet been implemented.',
+        );
+    };
+
+    return (
+        <SafeAreaView
+            edges={['left', 'right']}
+            testID='notification_settings.screen'
+            style={styles.container}
+        >
+            <ScrollView
+                contentContainerStyle={styles.wrapper}
+                alwaysBounceVertical={false}
+            >
+                <View style={styles.divider}/>
+                {isThemeSwitchingEnabled && (
+                    <SettingOption
+                        optionName='theme'
+                        onPress={onPressHandler}
+                    />
+                )}
+                <SettingOption
+                    optionName='clock'
+                    onPress={onPressHandler}
+                />
+                {isTimezoneEnabled && (
+                    <SettingOption
+                        optionName='timezone'
+                        onPress={onPressHandler}
+                    />
+                )}
+                <View style={styles.divider}/>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default Display;

app/screens/settings/display/index.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
+import withObservables from '@nozbe/with-observables';
+import {combineLatest, of as of$} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+
+import {observeAllowedThemes, observeConfigBooleanValue} from '@queries/servers/system';
+import {WithDatabaseArgs} from '@typings/database/database';
+
+import DisplaySettings from './display';
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
+    const isTimezoneEnabled = observeConfigBooleanValue(database, 'ExperimentalTimezone');
+
+    const allowsThemeSwitching = observeConfigBooleanValue(database, 'EnableThemeSelection');
+    const allowedThemes = observeAllowedThemes(database);
+
+    const isThemeSwitchingEnabled = combineLatest([allowsThemeSwitching, allowedThemes]).pipe(
+        switchMap(([ts, ath]) => {
+            return of$(ts && ath.length > 1);
+        }),
+    );
+
+    return {
+        isTimezoneEnabled,
+        isThemeSwitchingEnabled,
+    };
+});
+
+export default withDatabase(enhanced(DisplaySettings));

app/screens/settings/setting_option.tsx

@@ -9,9 +9,9 @@ import {useTheme} from '@context/theme';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
-import Options, {NotificationsOptionConfig, SettingOptionConfig} from './constant';
+import Options, {DisplayOptionConfig, NotificationsOptionConfig, SettingOptionConfig} from './constant';
 
-type SettingsConfig = keyof typeof SettingOptionConfig | keyof typeof NotificationsOptionConfig
+type SettingsConfig = keyof typeof SettingOptionConfig | keyof typeof NotificationsOptionConfig| keyof typeof DisplayOptionConfig
 type SettingOptionProps = {
     optionName: SettingsConfig;
     onPress: () => void;

app/screens/settings/settings.tsx

@@ -122,8 +122,15 @@ const Settings = ({componentId, showHelp, siteName}: SettingsProps) => {
     };
 
     const goToNotifications = preventDoubleTap(() => {
-        const screen = 'NotificationSettings';
-        const title = intl.formatMessage({id: 'user.settings.modal.notifications', defaultMessage: 'Notifications'});
+        const screen = Screens.NOTIFICATION_SETTINGS;
+        const title = intl.formatMessage({id: 'user.settings.notifications', defaultMessage: 'Notifications'});
+
+        goToScreen(screen, title);
+    });
+
+    const goToDisplaySettings = preventDoubleTap(() => {
+        const screen = Screens.DISPLAY_SETTINGS;
+        const title = intl.formatMessage({id: 'user.settings.display', defaultMessage: 'Display'});
 
         goToScreen(screen, title);
     });
@@ -160,7 +167,7 @@ const Settings = ({componentId, showHelp, siteName}: SettingsProps) => {
                     />
                     <SettingOption
                         optionName='display'
-                        onPress={onPressHandler}
+                        onPress={goToDisplaySettings}
                     />
                     <SettingOption
                         optionName='advanced_settings'

assets/base/i18n/en.json

@@ -21,6 +21,8 @@
   "alert.push_proxy_unknown.description": "This server was unable to receive push notifications for an unknown reason. This will be attempted again next time you connect.",
   "alert.push_proxy_unknown.title": "Notifications could not be received from this server",
   "alert.push_proxy.button": "Okay",
+  "alert.removed_from_channel.description": "You have been removed from channel {displayName}.",
+  "alert.removed_from_channel.title": "Removed from channel",
   "alert.removed_from_team.description": "You have been removed from team {displayName}.",
   "alert.removed_from_team.title": "Removed from team",
   "api.channel.add_guest.added": "{addedUsername} added to the channel as a guest by {username}.",
@@ -325,6 +327,9 @@
   "mobile.custom_status.clear_after.title": "Clear Custom Status After",
   "mobile.custom_status.modal_confirm": "Done",
   "mobile.direct_message.error": "We couldn't open a DM with {displayName}.",
+  "mobile.display_settings.clockDisplay": "Clock Display",
+  "mobile.display_settings.theme": "Theme",
+  "mobile.display_settings.timezone": "Timezone",
   "mobile.document_preview.failed_description": "An error occurred while opening the document. Please make sure you have a {fileType} viewer installed and try again.\n",
   "mobile.document_preview.failed_title": "Open Document failed",
   "mobile.downloader.disabled_description": "File downloads are disabled on this server. Please contact your System Admin for more details.\n",
@@ -562,7 +567,6 @@
   "servers.login": "Log in",
   "servers.logout": "Log out",
   "servers.remove": "Remove",
-  "snack.bar.follow.thread": "You're now following this thread",
   "snack.bar.link.copied": "Link copied to clipboard",
   "snack.bar.message.copied": "Text copied to clipboard",
   "snack.bar.mute.channel": "This channel was muted",
@@ -606,6 +610,7 @@
   "threads.unfollowThread": "Unfollow Thread",
   "user.edit_profile.email.auth_service": "Login occurs through {service}. Email cannot be updated. Email address used for notifications is {email}.",
   "user.edit_profile.email.web_client": "Email must be updated using a web client or desktop application.",
+  "user.settings.display": "Display",
   "user.settings.general.email": "Email",
   "user.settings.general.field_handled_externally": "Some fields below are handled through your login provider. If you want to change them, you’ll need to do so through your login provider.",
   "user.settings.general.firstName": "First Name",
@@ -613,6 +618,7 @@
   "user.settings.general.nickname": "Nickname",
   "user.settings.general.position": "Position",
   "user.settings.general.username": "Username",
+  "user.settings.notifications": "Notifications",
   "video.download": "Download video",
   "video.failed_description": "An error occurred while trying to play the video.\n",
   "video.failed_title": "Video playback failed",