[fix] General bugs (#62)

* fix(websocket-events): wrongfully opened websocket will now be closed using backend specified code

* refactor(setup-cloud-page): rename tenant to workspace

* fix(panel-app-bar): make logos clickable to home

src/core/events/WebSocketEvents.tsx

@@ -5,6 +5,7 @@ import { WebSocketEvent } from 'src/shared/types/server'
 import { WebSocketEventsContext } from './WebSocketEventsContext'
 
 const WS_CLOSE_CODE_NO_RETRY = 4001
+const WS_SERVER_CLOSE_CODE_NO_RETRY = 4401
 
 export const WebSocketEvents = ({ children }: PropsWithChildren) => {
   const { selectedWorkspace, isAuthenticated, logout } = useUserProfile()
@@ -25,13 +26,8 @@ export const WebSocketEvents = ({ children }: PropsWithChildren) => {
       const randomId = `${Math.random()}|${id}`
       listeners.current[randomId] = (ev: MessageEvent<string>) => {
         try {
-          const message = JSON.parse(ev.data) as WebSocketEvent | { error: 'Unauthorized' }
-          if ('error' in message && message.error === 'Unauthorized') {
-            noRetry.current = true
-            void logout()
-          } else {
-            onMessage(message as WebSocketEvent)
-          }
+          const message = JSON.parse(ev.data) as WebSocketEvent
+          onMessage(message)
         } catch {
           /* empty */
         }
@@ -41,7 +37,7 @@ export const WebSocketEvents = ({ children }: PropsWithChildren) => {
       }
       return () => handleRemoveListener(randomId)
     },
-    [handleRemoveListener, logout],
+    [handleRemoveListener],
   )
 
   const handleSendData = useCallback((data: WebSocketEvent) => {
@@ -69,7 +65,9 @@ export const WebSocketEvents = ({ children }: PropsWithChildren) => {
     if (isAuthenticated && selectedWorkspace?.id) {
       let retryTimeout = env.webSocketRetryTimeout
       const onClose = (ev: CloseEvent) => {
-        if (ev.code !== WS_CLOSE_CODE_NO_RETRY && !noRetry.current) {
+        if (ev.code === WS_SERVER_CLOSE_CODE_NO_RETRY) {
+          void logout()
+        } else if (ev.code !== WS_CLOSE_CODE_NO_RETRY && !noRetry.current) {
           if (isAuthenticated && selectedWorkspace?.id) {
             window.setTimeout(createWebSocket, retryTimeout)
             retryTimeout *= 2
@@ -123,7 +121,7 @@ export const WebSocketEvents = ({ children }: PropsWithChildren) => {
     } else {
       noRetry.current = false
     }
-  }, [selectedWorkspace?.id, isAuthenticated])
+  }, [selectedWorkspace?.id, isAuthenticated, logout])
 
   return (
     <WebSocketEventsContext.Provider value={{ addListener: handleAddListener, websocket, send: handleSendData }}>

src/locales/de-DE/messages.po

@@ -163,13 +163,13 @@ msgstr "Wolken"
 msgid "Compliance"
 msgstr "Compliance"
 
-#: src/pages/panel/setup-cloud/TenantId.tsx:16
+#: src/pages/panel/setup-cloud/WorkspaceId.tsx:16
 #: src/shared/utils/useCopyString.ts:11
 msgid "Copied to Clipboard!"
 msgstr "In die Zwischenablage kopiert!"
 
 #: src/pages/panel/setup-cloud/ExternalId.tsx:56
-#: src/pages/panel/setup-cloud/TenantId.tsx:46
+#: src/pages/panel/setup-cloud/WorkspaceId.tsx:46
 msgid "Copy"
 msgstr "Kopieren"
 
@@ -395,7 +395,7 @@ msgstr "Ups! Ihre Eingabe entspricht nicht unserem Format. Bitte überprüfen Si
 msgid "Oops! Something went wrong."
 msgstr "Hoppla! Etwas ist schief gelaufen."
 
-#: src/shared/layouts/panel-layout/PanelAppBar.tsx:69
+#: src/shared/layouts/panel-layout/PanelAppBar.tsx:71
 msgid "Open drawer"
 msgstr "Öffene die Schublade"
 
@@ -516,10 +516,6 @@ msgstr "Stichworte"
 #~ msgid "Task \"{0}\" with workflow \"{1}\" failed: {2}"
 #~ msgstr "Aufgabe \"{0}\" mit Workflow \"{1}\" ist fehlgeschlagen: {2}"
 
-#: src/pages/panel/setup-cloud/SetupCloudPage.tsx:144
-msgid "Tenant Id"
-msgstr "Tenant Id"
-
 #: src/pages/panel/setup-cloud/SetupCloudPage.tsx:115
 msgid "The Stack requires the following parameters"
 msgstr "Der Stack erfordert die folgenden Parameter"
@@ -583,6 +579,10 @@ msgstr "Wir entschuldigen uns für die Unannehmlichkeiten. Unser Team wurde bena
 msgid "We've identified {0} non-compliant resources out of {1} through {2} {3}-severity security checks."
 msgstr "Wir haben {0} nicht konforme Ressourcen von insgesamt {1} durch {2} {3}-Severity Security-Checks identifiziert."
 
+#: src/pages/panel/setup-cloud/SetupCloudPage.tsx:144
+msgid "Workspace Id"
+msgstr "Workspace Id"
+
 #: src/pages/auth/login/LoginPage.tsx:126
 msgid "You have successfully verified your account."
 msgstr "Sie haben Ihr Konto erfolgreich verifiziert."

src/locales/en-US/messages.po

@@ -163,13 +163,13 @@ msgstr "Clouds"
 msgid "Compliance"
 msgstr "Compliance"
 
-#: src/pages/panel/setup-cloud/TenantId.tsx:16
+#: src/pages/panel/setup-cloud/WorkspaceId.tsx:16
 #: src/shared/utils/useCopyString.ts:11
 msgid "Copied to Clipboard!"
 msgstr "Copied to Clipboard!"
 
 #: src/pages/panel/setup-cloud/ExternalId.tsx:56
-#: src/pages/panel/setup-cloud/TenantId.tsx:46
+#: src/pages/panel/setup-cloud/WorkspaceId.tsx:46
 msgid "Copy"
 msgstr "Copy"
 
@@ -395,7 +395,7 @@ msgstr "Oops! It looks like your query didn't match our format. Please check and
 msgid "Oops! Something went wrong."
 msgstr "Oops! Something went wrong."
 
-#: src/shared/layouts/panel-layout/PanelAppBar.tsx:69
+#: src/shared/layouts/panel-layout/PanelAppBar.tsx:71
 msgid "Open drawer"
 msgstr "Open drawer"
 
@@ -516,10 +516,6 @@ msgstr "Tags"
 #~ msgid "Task \"{0}\" with workflow \"{1}\" failed: {2}"
 #~ msgstr "Task \"{0}\" with workflow \"{1}\" failed: {2}"
 
-#: src/pages/panel/setup-cloud/SetupCloudPage.tsx:144
-msgid "Tenant Id"
-msgstr "Tenant Id"
-
 #: src/pages/panel/setup-cloud/SetupCloudPage.tsx:115
 msgid "The Stack requires the following parameters"
 msgstr "The Stack requires the following parameters"
@@ -583,6 +579,10 @@ msgstr "We're sorry for the inconvenience. Our team has been notified, and the i
 msgid "We've identified {0} non-compliant resources out of {1} through {2} {3}-severity security checks."
 msgstr "We've identified {0} non-compliant resources out of {1} through {2} {3}-severity security checks."
 
+#: src/pages/panel/setup-cloud/SetupCloudPage.tsx:144
+msgid "Workspace Id"
+msgstr "Workspace Id"
+
 #: src/pages/auth/login/LoginPage.tsx:126
 msgid "You have successfully verified your account."
 msgstr "You have successfully verified your account."

src/pages/panel/setup-cloud/SetupCloudPage.tsx

@@ -12,7 +12,7 @@ import { ExternalIdSkeleton } from './ExternalId.skeleton'
 import { SetupCloudButton } from './SetupCloudButton'
 import { SetupTemplateButton } from './SetupTemplateButton'
 import { SetupTemplateButtonSkeleton } from './SetupTemplateButton.skeleton'
-import { TenantId } from './TenantId'
+import { WorkspaceId } from './WorkspaceId'
 
 export default function SetupCloud() {
   const { addListener } = useEvents()
@@ -141,9 +141,9 @@ export default function SetupCloud() {
               alignSelf="center"
             >
               <Typography variant="body1" mb={{ xs: 1, md: 0 }} alignSelf={{ xs: 'start', md: 'center' }} width={100}>
-                <Trans>Tenant Id</Trans>:
+                <Trans>Workspace Id</Trans>:
               </Typography>
-              <TenantId />
+              <WorkspaceId />
             </Box>
           </div>
         </AccordionDetails>

src/pages/panel/setup-cloud/TenantId.tsx → src/pages/panel/setup-cloud/WorkspaceId.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Typography, useTheme } from '@mui/material'
 import { useUserProfile } from 'src/core/auth'
 import { useSnackbar } from 'src/core/snackbar'
 
-export const TenantId = () => {
+export const WorkspaceId = () => {
   const theme = useTheme()
   const { showSnackbar } = useSnackbar()
   const { selectedWorkspace } = useUserProfile()

src/shared/layouts/panel-layout/PanelAppBar.tsx

@@ -1,7 +1,8 @@
 import { t } from '@lingui/macro'
 import MenuIcon from '@mui/icons-material/Menu'
-import { Box, IconButton, AppBar as MuiAppBar, Toolbar, styled } from '@mui/material'
+import { Box, ButtonBase, IconButton, AppBar as MuiAppBar, Toolbar, styled } from '@mui/material'
 import { PropsWithChildren, MouseEvent as ReactMouseEvent } from 'react'
+import { useAbsoluteNavigate } from 'src/shared/absolute-navigate'
 import { panelUI } from 'src/shared/constants'
 import { DarkModeSwitch } from 'src/shared/dark-mode-switch'
 import { EventButton } from 'src/shared/event-button'
@@ -61,6 +62,7 @@ const AppBarActions = styled(Box)(({ theme }) => ({
 }))
 
 export const PanelAppBar = ({ children, open, isDesktop, onDrawerOpen, onDrawerToggle }: PanelAppBarProps) => {
+  const navigate = useAbsoluteNavigate()
   const Content = (
     <AppBar position="fixed" open={open} isDesktop={isDesktop}>
       <Toolbar>
@@ -74,7 +76,11 @@ export const PanelAppBar = ({ children, open, isDesktop, onDrawerOpen, onDrawerT
         >
           <MenuIcon />
         </MenuIconButton>
-        {!open || !isDesktop ? <AppBarLogo>{children}</AppBarLogo> : null}
+        {!open || !isDesktop ? (
+          <ButtonBase onClick={() => navigate('/')}>
+            <AppBarLogo>{children}</AppBarLogo>
+          </ButtonBase>
+        ) : null}
         <AppBarActions>
           <DarkModeSwitch whiteMode />
           <EventButton />

src/shared/layouts/panel-layout/PanelDrawer.tsx

@@ -1,6 +1,7 @@
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
-import { Divider, DrawerProps, IconButton, Drawer as MuiDrawer, drawerClasses, styled } from '@mui/material'
+import { ButtonBase, Divider, DrawerProps, IconButton, Drawer as MuiDrawer, drawerClasses, styled } from '@mui/material'
 import { PropsWithChildren, MouseEvent as ReactMouseEvent } from 'react'
+import { useAbsoluteNavigate } from 'src/shared/absolute-navigate'
 import { panelUI } from 'src/shared/constants'
 import { drawerClosedMixin, drawerOpenedMixin } from 'src/shared/utils/mixins'
 import { shouldForwardPropWithBlackList } from 'src/shared/utils/shouldForwardProp'
@@ -40,10 +41,11 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }))
 
 const DrawerContent = ({ children, onDrawerClose, open, isDesktop }: PanelAppBarProps) => {
+  const navigate = useAbsoluteNavigate()
   return (
     <>
       <DrawerHeader>
-        <IconButton>{children}</IconButton>
+        <ButtonBase onClick={() => navigate('/')}>{children}</ButtonBase>
         <IconButton onClick={onDrawerClose}>
           <ChevronLeftIcon />
         </IconButton>