fix(NavigationSearch): swaps Ctrl for Cmd on Macs

src/components/navigation/GlobalNavigation/GlobalNavigation.tsx

@@ -1,6 +1,6 @@
 import 'src/styles/_variables.css'
 import './global-navigation.css'
-import { Layout } from 'src/components'
+import { type IAvatarProps, Layout } from 'src/components'
 import { Flex } from 'src/components'
 import { Center } from 'src/components'
 import { type INavigationCreateProps } from 'src/components'
@@ -12,9 +12,9 @@ import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/Nav
 import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector'
 import { type IGlobalNavigationManagement } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { type IGlobalNavigationTool } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
-import { type INavigationOrg } from "src/components";
+import { type INavigationOrg } from 'src/components'
 import MpLogo from 'src/assets/svg/mpLogo.svg?react'
-import { type IGlobalNavigationLogo } from "src/components";
+import { type IGlobalNavigationLogo } from 'src/components'
 
 export interface IGlobalNavigationProps {
   logo: IGlobalNavigationLogo
@@ -29,6 +29,7 @@ export interface IGlobalNavigationProps {
   onSuiteLogoClick?: () => void
   onMpHomeClick: () => void
   hideMpHome?: boolean
+  avatarOptions?: IAvatarProps
   signoutOptions?: {
     label?: string
     onSignout: () => void
@@ -45,8 +46,8 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
           <div>
             <SuiteLogo {...props.logo} />
 
-            <div className="globalNavigation__divider"/>
-            
+            <div className="globalNavigation__divider" />
+
             <Center vertical>
               {props.onSearchClick && <NavigationSearch onClick={props.onSearchClick} />}
               {props.createItems && <NavigationCreate createItems={props.createItems} />}
@@ -58,7 +59,13 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
           <div>
             <NavigationList items={props.management} />
 
-            {props.orgs && <WorkspaceSelector orgs={props.orgs} signoutOptions={props.signoutOptions} />}
+            {props.orgs && (
+              <WorkspaceSelector
+                orgs={props.orgs}
+                signoutOptions={props.signoutOptions}
+                avatarOptions={props.avatarOptions}
+              />
+            )}
 
             {!props.hideMpHome && (
               <Tooltip title="mParticle Overview" placement="right">
@@ -77,4 +84,4 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
       </Layout.Sider>
     </Layout>
   )
-}
+}

src/components/navigation/GlobalNavigation/NavigationSearch.tsx

@@ -3,6 +3,7 @@ import { Space } from 'src/components'
 import { Center } from 'src/components'
 import { Button } from 'src/components'
 import SearchIcon from 'src/assets/svg/search.svg?react'
+import { getOS } from 'src/utils/utils'
 
 interface INavigationSearchProps {
   onClick: () => void
@@ -16,14 +17,18 @@ export function NavigationSearch(props: INavigationSearchProps) {
         title={
           <Space size="large">
             <>Search</>
-            <>Ctrl + K</>
+            <>{getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl'} + K</>
           </Space>
         }
       >
         <Center className="globalNavigation__searchButtonWrapper">
-          <Button className="globalNavigation__searchButton" shape="round" icon={<SearchIcon className="globalNavigation__searchIcon"/>} />
+          <Button
+            className="globalNavigation__searchButton"
+            shape="round"
+            icon={<SearchIcon className="globalNavigation__searchIcon" />}
+          />
         </Center>
       </Tooltip>
     </span>
   )
-}
+}

src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx

@@ -2,6 +2,7 @@ import 'src/utils/utils.css'
 import './workspace-selector.css'
 import {
   Avatar,
+  type IAvatarProps,
   type INavigationAccount,
   type INavigationOrg,
   type INavigationWorkspace,
@@ -22,6 +23,7 @@ import { WorkspaceSelectorContent } from 'src/components/navigation/GlobalNaviga
 
 export interface IWorkspaceSelectorProps {
   orgs: INavigationOrg[]
+  avatarOptions?: IAvatarProps
   signoutOptions?: {
     label?: string
     onSignout: () => void
@@ -130,7 +132,9 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
       }
     >
       <div className="globalNavigation__item workspaceSelector__menuItem">
-        <Avatar className="workspaceSelector__avatar">{getInitials(activeWorkspace?.label)}</Avatar>
+        <Avatar className="workspaceSelector__avatar" {...props.avatarOptions}>
+          {!props.avatarOptions?.src && getInitials(activeWorkspace?.label)}
+        </Avatar>
       </div>
     </Popover>
   )

src/utils/utils.spec.ts

@@ -1,21 +1,53 @@
-import { getInitials } from './utils'
-
-describe('Testing getInitials', () => {
-  it.each([
-    ['Ren & Stimpy', 'RS'],
-    ['Ren & Stimpy-Wein', 'RS'],
-    ['Ren & Stimpy- Wein', 'RW'],
-    ['Ren & Stimpy - Wein', 'RW'],
-    ['R. N. Stimpy', 'RS'],
-    ['1Ren Stimpy', 'RS'],
-    ['Ren', 'R'],
-    ['* Ren & Stimpy', 'RS'],
-    ['234* Ren & Stimpy', 'RS'],
-  ])('it should take "%s" and return "%s"', (words, expectedInitials) => {
-    // act
-    const actualInitials = getInitials(words)
-
-    // assert
-    expect(actualInitials).toBe(expectedInitials)
+import { getInitials, getOS } from './utils'
+
+describe('Testing utils', () => {
+  describe('Testing getInitials', () => {
+    it.each([
+      ['Ren & Stimpy', 'RS'],
+      ['Ren & Stimpy-Wein', 'RS'],
+      ['Ren & Stimpy- Wein', 'RW'],
+      ['Ren & Stimpy - Wein', 'RW'],
+      ['R. N. Stimpy', 'RS'],
+      ['1Ren Stimpy', 'RS'],
+      ['Ren', 'R'],
+      ['* Ren & Stimpy', 'RS'],
+      ['234* Ren & Stimpy', 'RS'],
+    ])('it should take "%s" and return "%s"', (words, expectedInitials) => {
+      // act
+      const actualInitials = getInitials(words)
+
+      // assert
+      expect(actualInitials).toBe(expectedInitials)
+    })
+  })
+
+  describe('Testing getOS', () => {
+    it('it should return "Windows" when the user agent includes "Win"', () => {
+      // arrange
+      Object.defineProperty(navigator, 'userAgent', {
+        value: 'Windows',
+        configurable: true,
+      })
+
+      // act
+      const actualOS = getOS()
+
+      // assert
+      expect(actualOS).toBe('Windows')
+    })
+
+    it('it should return "Macintosh" when the user agent includes "Mac"', () => {
+      // arrange
+      Object.defineProperty(navigator, 'userAgent', {
+        value: 'Macintosh',
+        configurable: true,
+      })
+
+      // act
+      const actualOS = getOS()
+
+      // assert
+      expect(actualOS).toBe('Macintosh')
+    })
   })
 })

src/utils/utils.ts

@@ -1,13 +1,14 @@
 export function getInitials(str: string = ''): string {
   const getInitialsRegex = new RegExp(
-    "(?:[\\W\\d]*\\b)*" +   // Ignore non-word abd number characters that may exist at the beginning of the word
-    "([A-Za-z])\\w*\\b" +   // Get the first alpha character of the first word
-    "(?:" +                 // Conditionally capture a second initial candidate
-    ".*" +                    // Ignore everything in between
-    "\\s(\\w)[\\w-]*$" +      // Until the last word, where we include the first letter of a hyphenated word
-    ")?"                    // Ignore second candidate if missing it and capture a single initial 
-    , "i");
-  return str.replace(getInitialsRegex, "$1$2")?.toUpperCase();
+    '(?:[\\W\\d]*\\b)*' + // Ignore non-word abd number characters that may exist at the beginning of the word
+      '([A-Za-z])\\w*\\b' + // Get the first alpha character of the first word
+      '(?:' + // Conditionally capture a second initial candidate
+      '.*' + // Ignore everything in between
+      '\\s(\\w)[\\w-]*$' + // Until the last word, where we include the first letter of a hyphenated word
+      ')?', // Ignore second candidate if missing it and capture a single initial
+    'i',
+  )
+  return str.replace(getInitialsRegex, '$1$2')?.toUpperCase()
 }
 
 export const debounce = (callback: (...args: any[]) => void, wait: number): ((...args: unknown[]) => void) => {
@@ -19,4 +20,16 @@ export const debounce = (callback: (...args: any[]) => void, wait: number): ((..
       callback(...args)
     }, wait)
   }
-}
+}
+
+type OSNames = 'Windows' | 'Macintosh' | 'Linux' | 'Android' | 'iOS' | 'Unknown OS'
+
+export const getOS = (): OSNames => {
+  if (navigator.userAgent.includes('Win')) return 'Windows'
+  if (navigator.userAgent.includes('Mac')) return 'Macintosh'
+  if (navigator.userAgent.includes('Linux')) return 'Linux'
+  if (navigator.userAgent.includes('Android')) return 'Android'
+  if (navigator.userAgent.includes('like Mac')) return 'iOS'
+
+  return 'Unknown OS'
+}