Upgrade Fuselage

RocketChat · Jan 4, 2024 · 85602ab · 85602ab
1 parent e5ab11b
commit 85602ab
Show file tree

Hide file tree

Showing 17 changed files with 119 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -49,16 +49,15 @@
   },
   "dependencies": {
     "@bugsnag/js": "~7.22.3",
-    "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/css": "~11.11.2",
+    "@emotion/react": "~11.11.3",
+    "@emotion/styled": "~11.11.0",
     "@ewsjs/xhr": "^2.0.1",
     "@rocket.chat/css-in-js": "~0.31.25",
-    "@rocket.chat/fuselage": "~0.36.0",
+    "@rocket.chat/fuselage": "~0.42.0",
     "@rocket.chat/fuselage-hooks": "~0.32.1",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/icons": "~0.32.0",
-    "abort-controller": "^3.0.0",
     "axios": "^1.4.0",
     "dotenv": "~16.3.1",
     "electron-dl": "~3.5.1",

diff --git a/src/ui/components/AboutDialog/index.tsx b/src/ui/components/AboutDialog/index.tsx
@@ -174,15 +174,15 @@ export const AboutDialog = () => {
 
               <Field>
                 <FieldRow>
+                  <FieldLabel htmlFor={checkForUpdatesOnStartupToggleSwitchId}>
+                    {t('dialog.about.checkUpdatesOnStart')}
+                  </FieldLabel>
                   <ToggleSwitch
                     id={checkForUpdatesOnStartupToggleSwitchId}
                     checked={isCheckForUpdatesOnStartupChecked}
                     disabled={!canSetCheckForUpdatesOnStartup}
                     onChange={handleCheckForUpdatesOnStartCheckBoxChange}
                   />
-                  <FieldLabel htmlFor={checkForUpdatesOnStartupToggleSwitchId}>
-                    {t('dialog.about.checkUpdatesOnStart')}
-                  </FieldLabel>
                 </FieldRow>
               </Field>
             </Margins>

diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   SearchInput,
   Icon,
-  Button,
   Pagination,
   Scrollable,
   IconButton,
@@ -252,13 +251,11 @@ const DownloadsManagerView = () => {
           />
         </Box>
         <Box display='flex' flexGrow={1} flexShrink={1} paddingInline={2}>
-          <Button
-            small
+          <IconButton
+            icon='trash'
             title={t('downloads.filters.clear')}
             onClick={handleClearAll}
-          >
-            <Icon name='trash' size={24} />
-          </Button>
+          />
         </Box>
       </Box>
       <Scrollable>

diff --git a/src/ui/components/ServersView/UnsupportedServer.tsx b/src/ui/components/ServersView/UnsupportedServer.tsx
@@ -33,7 +33,7 @@ const UnsupportedServer = ({
   return (
     <ErrorPane isVisible={isSupported === false}>
       <Box
-        backgroundColor='white'
+        backgroundColor='surface-light'
         display='flex'
         flexDirection='column'
         style={{

diff --git a/src/ui/components/SettingsView/GeneralTab.tsx b/src/ui/components/SettingsView/GeneralTab.tsx
@@ -12,7 +12,7 @@ import { SideBar } from './features/SideBar';
 import { TrayIcon } from './features/TrayIcon';
 
 export const GeneralTab = () => (
-  <Box is='form' margin={24} maxWidth={960} flexGrow={1} flexShrink={1}>
+  <Box is='form' padding={24} maxWidth={960} flexGrow={1} flexShrink={1}>
     <FieldGroup>
       <ReportErrors />
       <FlashFrame />

diff --git a/src/ui/components/SettingsView/SettingsView.tsx b/src/ui/components/SettingsView/SettingsView.tsx
@@ -25,7 +25,6 @@ export const SettingsView = () => {
     >
       <Box
         width='full'
-        minHeight={64}
         padding={24}
         display='flex'
         flexDirection='row'

diff --git a/src/ui/components/SettingsView/features/FlashFrame.tsx b/src/ui/components/SettingsView/features/FlashFrame.tsx
@@ -7,7 +7,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -37,15 +37,21 @@ export const FlashFrame = (props: FlashFrameProps) => {
     [dispatch]
   );
 
+  const isFlashFrameEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
-        <ToggleSwitch onChange={handleChange} checked={isFlashFrameEnabled} />
-        <FieldLabel htmlFor='toggle-switch'>
+        <FieldLabel htmlFor={isFlashFrameEnabledId}>
           {process.platform !== 'darwin'
             ? t('settings.options.flashFrame.title')
             : t('settings.options.flashFrame.titleDarwin')}
         </FieldLabel>
+        <ToggleSwitch
+          id={isFlashFrameEnabledId}
+          checked={isFlashFrameEnabled}
+          onChange={handleChange}
+        />
       </FieldRow>
       {process.platform === 'linux' && (
         <Callout

diff --git a/src/ui/components/SettingsView/features/HardwareAcceleration.tsx b/src/ui/components/SettingsView/features/HardwareAcceleration.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -37,16 +37,19 @@ export const HardwareAcceleration = (props: HardwareAccelerationProps) => {
     [dispatch]
   );
 
+  const isHardwareAccelerationEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
+        <FieldLabel htmlFor={isHardwareAccelerationEnabledId}>
+          {t('settings.options.hardwareAcceleration.title')}
+        </FieldLabel>
         <ToggleSwitch
-          onChange={handleChange}
+          id={isHardwareAccelerationEnabledId}
           checked={isHardwareAccelerationEnabled}
+          onChange={handleChange}
         />
-        <FieldLabel htmlFor='toggle-switch'>
-          {t('settings.options.hardwareAcceleration.title')}
-        </FieldLabel>
       </FieldRow>
       <FieldRow>
         <FieldHint>

diff --git a/src/ui/components/SettingsView/features/InternalVideoChatWindow.tsx b/src/ui/components/SettingsView/features/InternalVideoChatWindow.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -39,17 +39,20 @@ export const InternalVideoChatWindow = (
     [dispatch]
   );
 
+  const isInternalVideoChatWindowEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
+        <FieldLabel htmlFor={isInternalVideoChatWindowEnabledId}>
+          {t('settings.options.internalVideoChatWindow.title')}
+        </FieldLabel>
         <ToggleSwitch
+          id={isInternalVideoChatWindowEnabledId}
           disabled={process.mas}
-          onChange={handleChange}
           checked={isInternalVideoChatWindowEnabled}
+          onChange={handleChange}
         />
-        <FieldLabel htmlFor='toggle-switch'>
-          {t('settings.options.internalVideoChatWindow.title')}
-        </FieldLabel>
       </FieldRow>
       <FieldRow>
         {process.mas ? (

diff --git a/src/ui/components/SettingsView/features/MenuBar.tsx b/src/ui/components/SettingsView/features/MenuBar.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -36,13 +36,19 @@ export const MenuBar = (props: MenuBarProps) => {
     [dispatch]
   );
 
+  const isMenuBarEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
-        <ToggleSwitch onChange={handleChange} checked={isMenuBarEnabled} />
-        <FieldLabel htmlFor='toggle-switch'>
+        <FieldLabel htmlFor={isMenuBarEnabledId}>
           {t('settings.options.menubar.title')}
         </FieldLabel>
+        <ToggleSwitch
+          id={isMenuBarEnabledId}
+          checked={isMenuBarEnabled}
+          onChange={handleChange}
+        />
       </FieldRow>
       <FieldRow>
         <FieldHint>{t('settings.options.menubar.description')}</FieldHint>

diff --git a/src/ui/components/SettingsView/features/MinimizeOnClose.tsx b/src/ui/components/SettingsView/features/MinimizeOnClose.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -39,17 +39,20 @@ export const MinimizeOnClose = (props: MinimizeOnCloseProps) => {
     [dispatch]
   );
 
+  const isMinimizeOnCloseEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
+        <FieldLabel htmlFor={isMinimizeOnCloseEnabledId}>
+          {t('settings.options.minimizeOnClose.title')}
+        </FieldLabel>
         <ToggleSwitch
+          id={isMinimizeOnCloseEnabledId}
           disabled={isTrayIconEnabled}
-          onChange={handleChange}
           checked={isMinimizeOnCloseEnabled}
+          onChange={handleChange}
         />
-        <FieldLabel htmlFor='toggle-switch'>
-          {t('settings.options.minimizeOnClose.title')}
-        </FieldLabel>
       </FieldRow>
       <FieldRow>
         <FieldHint>

diff --git a/src/ui/components/SettingsView/features/NTLMCredentials.tsx b/src/ui/components/SettingsView/features/NTLMCredentials.tsx
@@ -7,7 +7,7 @@ import {
   ToggleSwitch,
 } from '@rocket.chat/fuselage';
 import type { FocusEvent } from 'react';
-import { useCallback, type ChangeEvent } from 'react';
+import { useCallback, type ChangeEvent, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -54,16 +54,19 @@ export const NTLMCredentials = (props: NTLMCredentialsProps) => {
     [dispatch]
   );
 
+  const isNTLMCredentialsEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
+        <FieldLabel htmlFor={isNTLMCredentialsEnabledId}>
+          {t('settings.options.ntlmCredentials.title')}
+        </FieldLabel>
         <ToggleSwitch
-          onChange={handleToggleChange}
+          id={isNTLMCredentialsEnabledId}
           checked={isNTLMCredentialsEnabled}
+          onChange={handleToggleChange}
         />
-        <FieldLabel htmlFor='toggle-switch'>
-          {t('settings.options.ntlmCredentials.title')}
-        </FieldLabel>
       </FieldRow>
       <FieldRow>
         <FieldHint>

diff --git a/src/ui/components/SettingsView/features/ReportErrors.tsx b/src/ui/components/SettingsView/features/ReportErrors.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -36,17 +36,20 @@ export const ReportErrors = (props: ReportErrorsProps) => {
     [dispatch]
   );
 
+  const isReportEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
+        <FieldLabel htmlFor={isReportEnabledId}>
+          {t('settings.options.report.title')}
+        </FieldLabel>
         <ToggleSwitch
+          id={isReportEnabledId}
           disabled={process.mas}
-          onChange={handleChange}
           checked={isReportEnabled}
+          onChange={handleChange}
         />
-        <FieldLabel htmlFor='toggle-switch'>
-          {t('settings.options.report.title')}
-        </FieldLabel>
       </FieldRow>
       <FieldRow>
         {process.mas ? (

diff --git a/src/ui/components/SettingsView/features/SideBar.tsx b/src/ui/components/SettingsView/features/SideBar.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -36,13 +36,19 @@ export const SideBar = (props: SideBarProps) => {
     [dispatch]
   );
 
+  const isSideBarEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
-        <ToggleSwitch onChange={handleChange} checked={isSideBarEnabled} />
-        <FieldLabel htmlFor='toggle-switch'>
+        <FieldLabel htmlFor={isSideBarEnabledId}>
           {t('settings.options.sidebar.title')}
         </FieldLabel>
+        <ToggleSwitch
+          id={isSideBarEnabledId}
+          checked={isSideBarEnabled}
+          onChange={handleChange}
+        />
       </FieldRow>
       <FieldRow>
         <FieldHint>{t('settings.options.sidebar.description')}</FieldHint>

diff --git a/src/ui/components/SettingsView/features/TrayIcon.tsx b/src/ui/components/SettingsView/features/TrayIcon.tsx
@@ -6,7 +6,7 @@ import {
   FieldHint,
 } from '@rocket.chat/fuselage';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -36,13 +36,19 @@ export const TrayIcon = (props: TrayIconProps) => {
     [dispatch]
   );
 
+  const isTrayIconEnabledId = useId();
+
   return (
     <Field className={props.className}>
       <FieldRow>
-        <ToggleSwitch onChange={handleChange} checked={isTrayIconEnabled} />
-        <FieldLabel htmlFor='toggle-switch'>
+        <FieldLabel htmlFor={isTrayIconEnabledId}>
           {t('settings.options.trayIcon.title')}
         </FieldLabel>
+        <ToggleSwitch
+          id={isTrayIconEnabledId}
+          checked={isTrayIconEnabled}
+          onChange={handleChange}
+        />
       </FieldRow>
       <FieldRow>
         <FieldHint>{t('settings.options.trayIcon.description')}</FieldHint>

diff --git a/src/ui/components/SupportedVersionDialog/index.tsx b/src/ui/components/SupportedVersionDialog/index.tsx
@@ -87,7 +87,6 @@ export const SupportedVersionDialog = () => {
 
   useEffect(() => {
     checkServerVersion();
-    console.log('checkServerVersion');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [server?.supportedVersions, server?.lastPath, currentView]);