feat(app): add support for pinyin layout candidates in ODD keyboard (#16873)

fix EXEC-885

Author: smb2268

app/package.json

@@ -63,6 +63,7 @@
     "reselect": "4.0.0",
     "rxjs": "^6.5.1",
     "semver": "5.7.2",
+    "simple-keyboard-layouts": "3.4.41",
     "styled-components": "5.3.6",
     "typeface-open-sans": "0.0.75",
     "uuid": "3.2.1"

app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css

@@ -68,3 +68,12 @@ the rest is the same */
   height: 44.75px;
   width: 330px !important;
 }
+
+.hg-candidate-box {
+  max-width: 400px;
+}
+
+li.hg-candidate-box-list-item {
+  height: 60px;
+  width: 60px;
+}

app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { alphanumericKeyboardLayout, customDisplay } from '../constants'
+import { useSelector } from 'react-redux'
+import { getAppLanguage } from '/app/redux/config'
+import {
+  alphanumericKeyboardLayout,
+  layoutCandidates,
+  customDisplay,
+} from '../constants'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -19,6 +25,7 @@ export function AlphanumericKeyboard({
   debug = false, // If true, <ENTER> will input a \n
 }: AlphanumericKeyboardProps): JSX.Element {
   const [layoutName, setLayoutName] = React.useState<string>('default')
+  const appLanguage = useSelector(getAppLanguage)
   const onKeyPress = (button: string): void => {
     if (button === '{ABC}') handleShift()
     if (button === '{numbers}') handleNumber()
@@ -47,6 +54,9 @@ export function AlphanumericKeyboard({
       onKeyPress={onKeyPress}
       layoutName={layoutName}
       layout={alphanumericKeyboardLayout}
+      layoutCandidates={
+        appLanguage != null ? layoutCandidates[appLanguage] : undefined
+      }
       display={customDisplay}
       mergeDisplay={true}
       useButtonTag={true}

app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css

@@ -103,3 +103,12 @@
   color: #16212d;
   background-color: #e3e3e3; /* grey30 */
 }
+
+.hg-candidate-box {
+  max-width: 400px;
+}
+
+li.hg-candidate-box-list-item {
+  height: 60px;
+  width: 60px;
+}

app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
-import { customDisplay, fullKeyboardLayout } from '../constants'
+import { useSelector } from 'react-redux'
+import { getAppLanguage } from '/app/redux/config'
+import {
+  customDisplay,
+  layoutCandidates,
+  fullKeyboardLayout,
+} from '../constants'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -19,6 +25,7 @@ export function FullKeyboard({
   debug = false,
 }: FullKeyboardProps): JSX.Element {
   const [layoutName, setLayoutName] = React.useState<string>('default')
+  const appLanguage = useSelector(getAppLanguage)
   const handleShift = (button: string): void => {
     switch (button) {
       case '{shift}':
@@ -56,6 +63,9 @@ export function FullKeyboard({
       onKeyPress={onKeyPress}
       layoutName={layoutName}
       layout={fullKeyboardLayout}
+      layoutCandidates={
+        appLanguage != null ? layoutCandidates[appLanguage] : undefined
+      }
       display={customDisplay}
       mergeDisplay={true}
       useButtonTag={true}

app/src/atoms/SoftwareKeyboard/constants.ts

@@ -1,3 +1,11 @@
+import chineseLayout from 'simple-keyboard-layouts/build/layouts/chinese'
+
+type LayoutCandidates =
+  | {
+      [key: string]: string
+    }
+  | undefined
+
 export const customDisplay = {
   '{numbers}': '123',
   '{shift}': 'ABC',
@@ -69,3 +77,12 @@ export const numericalKeyboardLayout = {
 export const numericalCustom = {
   '{backspace}': 'del',
 }
+
+export const layoutCandidates: {
+  [key: string]: LayoutCandidates
+} = {
+  // @ts-expect-error layout candidates exists but is not on the type
+  // in the simple-keyboard-layouts package
+  'zh-CN': chineseLayout.layoutCandidates,
+  'en-US': undefined,
+}

app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx

@@ -180,4 +180,16 @@ describe('SystemLanguagePreferenceModal', () => {
       'zh-Hant'
     )
   })
+
+  it('should not open update modal when system language changes to an unsuppported language', () => {
+    vi.mocked(getSystemLanguage).mockReturnValue('es-MX')
+    render()
+
+    expect(screen.queryByRole('button', { name: 'Don’t change' })).toBeNull()
+    expect(
+      screen.queryByRole('button', {
+        name: 'Use system language',
+      })
+    ).toBeNull()
+  })
 })

app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx

@@ -46,11 +46,7 @@ export function SystemLanguagePreferenceModal(): JSX.Element | null {
   const storedSystemLanguage = useSelector(getStoredSystemLanguage)
 
   const showBootModal = appLanguage == null && systemLanguage != null
-  const showUpdateModal =
-    appLanguage != null &&
-    systemLanguage != null &&
-    storedSystemLanguage != null &&
-    systemLanguage !== storedSystemLanguage
+  const [showUpdateModal, setShowUpdateModal] = useState(false)
 
   const title = showUpdateModal
     ? t('system_language_preferences_update')
@@ -120,6 +116,13 @@ export function SystemLanguagePreferenceModal(): JSX.Element | null {
           void i18n.changeLanguage(systemLanguage)
         }
       }
+      // only show update modal if we support the language their system has updated to
+      setShowUpdateModal(
+        appLanguage != null &&
+          matchedSystemLanguageOption != null &&
+          storedSystemLanguage != null &&
+          systemLanguage !== storedSystemLanguage
+      )
     }
   }, [i18n, systemLanguage, showBootModal])
 

yarn.lock

@@ -3403,6 +3403,7 @@
     reselect "4.0.0"
     rxjs "^6.5.1"
     semver "5.7.2"
+    simple-keyboard-layouts "3.4.41"
     styled-components "5.3.6"
     typeface-open-sans "0.0.75"
     uuid "3.2.1"
@@ -20041,6 +20042,11 @@ simple-git@^3.15.1:
     "@kwsites/promise-deferred" "^1.1.1"
     debug "^4.3.4"
 
+[email protected]:
+  version "3.4.41"
+  resolved "https://registry.yarnpkg.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.4.41.tgz#eb1504c36626f29b0d5590d419ab39c43d06969a"
+  integrity sha512-vVnPRgZmK9DqbqUxOgZesdAlWkzY1Cvxf8YaFW3SHJHQKuvCkR8VL6TjJyrpM8BkJa3W4ry1i3CsSydlPckAoQ==
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"