Merge pull request #545 from aws-samples/fix-logout

Fix sign out not working when a cluster is selected

Author: mendaomn

frontend/locales/en/strings.json

@@ -9,6 +9,16 @@
       "users": "Users",
       "viewLicense": "View License"
     },
+    "topBar": {
+      "signOut": "Sign out",
+      "logoAltText": "$t(global.projectName} logo",
+      "regionSelector": {
+        "defaultRegionText": "Region",
+        "ariaLabel": "Region"
+      },
+      "overflowMenuTitleText": "All",
+      "overflowMenuTriggerText": "More"
+    },
     "docs": {
       "title": "$t(global.projectName) documentation",
       "link": "https://pcluster.cloud/"

frontend/src/components/TopBar.tsx

@@ -8,8 +8,7 @@
 // or in the "LICENSE.txt" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
 // OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions and
 // limitations under the License.
-
-import * as React from 'react'
+import React, {useMemo} from 'react'
 
 import {useState, setState} from '../store'
 import {LoadInitialState} from '../model'
@@ -18,6 +17,8 @@ import {LoadInitialState} from '../model'
 import TopNavigation from '@cloudscape-design/components/top-navigation'
 import {useQueryClient} from 'react-query'
 import {NavigateFunction, useNavigate} from 'react-router-dom'
+import {ButtonDropdownProps} from '@cloudscape-design/components'
+import {useTranslation} from 'react-i18next'
 
 export function regions(selected: string) {
   const supportedRegions = [
@@ -103,18 +104,16 @@ export const clearClusterOnRegionChange = (
 }
 
 export default function Topbar() {
+  const {t} = useTranslation()
   let username = useState(['identity', 'attributes', 'email'])
   const queryClient = useQueryClient()
   const navigate = useNavigate()
 
-  const defaultRegion = useState(['aws', 'region']) || 'DEFAULT'
+  const defaultRegionText = t('global.topBar.regionSelector.defaultRegionText')
+  const defaultRegion = useState(['aws', 'region']) || defaultRegionText
   const selectedRegion = useState(['app', 'selectedRegion']) || defaultRegion
   const displayedRegions = regions(selectedRegion)
 
-  const handleLogout = () => {
-    window.location.href = 'logout'
-  }
-
   const selectRegion = (region: any) => {
     let newRegion = region.detail.id
     setState(['app', 'selectedRegion'], newRegion)
@@ -123,17 +122,26 @@ export default function Topbar() {
     queryClient.invalidateQueries()
   }
 
-  const profileActions = [{type: 'button', id: 'signout', text: 'Sign out'}]
+  const profileActions: ButtonDropdownProps.Items = useMemo(
+    () => [
+      {
+        id: 'signout',
+        text: t('global.topBar.signOut'),
+        href: '/logout',
+      },
+    ],
+    [t],
+  )
 
   return (
     <div id="top-bar">
       <TopNavigation
         identity={{
-          title: 'AWS ParallelCluster UI',
+          title: t('global.projectName'),
           href: '/',
           logo: {
             src: '/img/pcluster.svg',
-            alt: 'AWS ParallelCluster UI Logo',
+            alt: t('global.topBar.logoAltText'),
           },
         }}
         utilities={[
@@ -143,34 +151,29 @@ export default function Topbar() {
                   type: 'menu-dropdown',
                   text: username || 'user',
                   iconName: 'user-profile',
-                  onItemClick: handleLogout,
                   items: profileActions,
                 }
               : {
                   type: 'button',
-                  text: 'loading...',
+                  text: t('global.loading'),
                 },
           ],
           ...[
             selectedRegion && {
               type: 'menu-dropdown',
-              ariaLabel: 'Region',
+              ariaLabel: t('global.topBar.regionSelector.ariaLabel'),
               disableUtilityCollapse: true,
               text: (
-                <span style={{fontWeight: 'normal'}}>
-                  {selectedRegion || 'region'}
-                </span>
+                <span style={{fontWeight: 'normal'}}>{selectedRegion}</span>
               ),
               onItemClick: selectRegion,
               items: regionsToDropdownItems(displayedRegions, selectedRegion),
             },
           ],
         ]}
-        // @ts-expect-error TS(2741) FIXME: Property 'overflowMenuTitleText' is missing in typ... Remove this comment to see the full error message
         i18nStrings={{
-          searchIconAriaLabel: 'Search',
-          searchDismissIconAriaLabel: 'Close search',
-          overflowMenuTriggerText: 'More',
+          overflowMenuTitleText: t('global.topBar.overflowMenuTitleText'),
+          overflowMenuTriggerText: t('global.topBar.overflowMenuTriggerText'),
         }}
       />
     </div>