feat: CL-7: Add shortcut to system settings

razinj · Jun 23, 2024 · a2b09ef · a2b09ef
1 parent 9708d23
commit a2b09ef
Show file tree

Hide file tree

Showing 12 changed files with 299 additions and 112 deletions.
diff --git a/android/app/src/main/java/com/razinj/context_launcher/AppsModule.kt b/android/app/src/main/java/com/razinj/context_launcher/AppsModule.kt
@@ -108,7 +108,17 @@ class AppsModule internal constructor(
 
     @ReactMethod
     fun launchApplication(packageName: String) {
-        val intent = reactContext.packageManager.getLaunchIntentForPackage(packageName)
+        val intent =
+            reactContext.packageManager
+                .getLaunchIntentForPackage(packageName)
+                ?.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+
+        reactContext.startActivity(intent)
+    }
+
+    @ReactMethod
+    fun openSystemSettings() {
+        val intent = Intent(Settings.ACTION_SETTINGS).addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
 
         reactContext.startActivity(intent)
     }

diff --git a/jest-setup.js b/jest-setup.js
@@ -22,6 +22,7 @@ jest.mock('react-native', () => {
       buildNumber: '12',
     }),
     launchApplication: jest.fn(),
+    openSystemSettings: jest.fn(),
     showApplicationDetails: jest.fn(),
     requestApplicationUninstall: jest.fn(),
     getApplications: jest.fn(),

diff --git a/src/components/Settings/SettingsHeader.test.tsx b/src/components/Settings/SettingsHeader.test.tsx
@@ -16,6 +16,7 @@ jest.mock('react-redux', () => ({
 describe('<SettingsHeader /> Tests', () => {
   beforeAll(() => {
     jest.spyOn(AppsModule, 'showAppDetails')
+    jest.spyOn(AppsModule, 'openSystemSettings')
   })
 
   it('should render correctly and match snapshot', () => {
@@ -24,9 +25,10 @@ describe('<SettingsHeader /> Tests', () => {
     expect(screen.toJSON()).toMatchSnapshot()
     expect(screen.getByTestId('wrapper')).toBeOnTheScreen()
     expect(screen.getByTestId('app-info-button')).toBeOnTheScreen()
+    expect(screen.getByTestId('system-settings-button')).toBeOnTheScreen()
   })
 
-  it('should call function to display settings bottom sheet when pressed', () => {
+  it('should call function to open app details page', () => {
     renderWithProvider(<SettingsHeader />)
 
     const appInfoButton = screen.getByTestId('app-info-button')
@@ -35,7 +37,20 @@ describe('<SettingsHeader /> Tests', () => {
 
     fireEvent.press(appInfoButton)
 
-    expect(useDispatchMock).toHaveBeenCalledWith(setDisplaySettings(false))
     expect(AppsModule.showAppDetails).toHaveBeenCalledWith(APP_ID)
+    expect(useDispatchMock).toHaveBeenCalledWith(setDisplaySettings(false))
+  })
+
+  it('should call function to open system settings', () => {
+    renderWithProvider(<SettingsHeader />)
+
+    const systemSettingsButton = screen.getByTestId('system-settings-button')
+
+    expect(systemSettingsButton).toBeOnTheScreen()
+
+    fireEvent.press(systemSettingsButton)
+
+    expect(useDispatchMock).toHaveBeenCalledWith(setDisplaySettings(false))
+    expect(AppsModule.openSystemSettings).toHaveBeenCalled()
   })
 })
diff --git a/src/components/Settings/SettingsHeader.tsx b/src/components/Settings/SettingsHeader.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
-import { Pressable, PressableAndroidRippleConfig, StyleSheet, Text, View } from 'react-native'
+import { PressableAndroidRippleConfig, StyleSheet, Text, View } from 'react-native'
 import { useDispatch } from 'react-redux'
 import { APP_BUILD_NUMBER, APP_ID, APP_VERSION } from '../../constants'
 import { setDisplaySettings } from '../../slices/appState'
-import { showAppDetails } from '../../utils/apps-module'
+import { openSystemSettings, showAppDetails } from '../../utils/apps-module'
 import CustomIcon from '../shared/CustomIcon'
+import CustomPressable from '../shared/CustomPressable'
 
-const appInfoIconRippleConfig: PressableAndroidRippleConfig = {
+const pressableRippleConfig: PressableAndroidRippleConfig = {
   borderless: true,
   foreground: true,
   color: '#e5e5e5',
@@ -21,6 +22,11 @@ const SettingsHeader = () => {
     dispatch(setDisplaySettings(false))
   }
 
+  const onSystemSettingsClick = () => {
+    openSystemSettings()
+    dispatch(setDisplaySettings(false))
+  }
+
   return (
     <View style={styles.wrapper} testID='wrapper'>
       <Text style={styles.title}>
@@ -29,13 +35,22 @@ const SettingsHeader = () => {
           &nbsp;&nbsp;v{APP_VERSION} ({APP_BUILD_NUMBER})
         </Text>
       </Text>
-      <Pressable
-        onPress={onAppInfoClick}
-        android_disableSound={true}
-        android_ripple={appInfoIconRippleConfig}
-        testID='app-info-button'>
-        <CustomIcon name='information-outline' size={34} color='#808080' />
-      </Pressable>
+      <View style={styles.pressablesWrapper}>
+        <CustomPressable
+          onPress={onAppInfoClick}
+          android_disableSound={true}
+          android_ripple={pressableRippleConfig}
+          testID='app-info-button'>
+          <CustomIcon name='information-outline' size={34} color='#808080' />
+        </CustomPressable>
+        <CustomPressable
+          onPress={onSystemSettingsClick}
+          android_disableSound={true}
+          android_ripple={pressableRippleConfig}
+          testID='system-settings-button'>
+          <CustomIcon name='cog-outline' size={34} color='#808080' />
+        </CustomPressable>
+      </View>
     </View>
   )
 }
@@ -47,6 +62,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  pressablesWrapper: {
+    flexDirection: 'row',
+    gap: 10,
+  },
   title: {
     fontSize: 20,
     color: '#808080',

diff --git a/src/components/Settings/__snapshots__/Settings.test.tsx.snap b/src/components/Settings/__snapshots__/Settings.test.tsx.snap
@@ -196,58 +196,121 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                   </Text>
                 </Text>
                 <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
+                  style={
                     {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
+                      "flexDirection": "row",
+                      "gap": 10,
                     }
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="app-info-button"
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#808080",
-                          "fontSize": 34,
-                        },
-                        undefined,
-                        {
-                          "fontFamily": "Material Design Icons",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    testID="app-info-button"
                   >
-                    󰋽
-                  </Text>
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#808080",
+                            "fontSize": 34,
+                          },
+                          undefined,
+                          {
+                            "fontFamily": "Material Design Icons",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      󰋽
+                    </Text>
+                  </View>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    testID="system-settings-button"
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#808080",
+                            "fontSize": 34,
+                          },
+                          undefined,
+                          {
+                            "fontFamily": "Material Design Icons",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      󰢻
+                    </Text>
+                  </View>
                 </View>
               </View>
               <View