chore: bump fuselage packages (#2757)

* wip bump packages * chore: update Field subcomponents * chore: replace Select with SelectLegacy * chore: update deprecated colors * fix: virtuoso version * fix: import fuselage css * chore: change ServerButton selected style * fix: lint
RocketChat · Nov 10, 2023 · fe0c103 · fe0c103
1 parent 0e71f31
commit fe0c103
Show file tree

Hide file tree

Showing 21 changed files with 354 additions and 207 deletions.
diff --git a/package.json b/package.json
@@ -53,11 +53,11 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@ewsjs/xhr": "^1.5.0",
-    "@rocket.chat/css-in-js": "^0.31.23-dev.165",
-    "@rocket.chat/fuselage": "^0.32.0-dev.391",
-    "@rocket.chat/fuselage-hooks": "^0.32.0-dev.304",
-    "@rocket.chat/fuselage-polyfills": "^0.31.23-dev.165",
-    "@rocket.chat/icons": "^0.32.0-dev.373",
+    "@rocket.chat/css-in-js": "~0.31.25",
+    "@rocket.chat/fuselage": "~0.36.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",
     "electron-dl": "^3.5.0",
@@ -71,6 +71,7 @@
     "react-i18next": "^11.15.3",
     "react-keyed-flatten-children": "^1.3.0",
     "react-redux": "^7.2.6",
+    "react-virtuoso": "1.2.4",
     "redux": "^4.1.2",
     "reselect": "4.1.6",
     "rimraf": "^3.0.2",

diff --git a/src/public/index.html b/src/public/index.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8" />
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
+	<link rel="stylesheet" href="./main.css">
 	<title>Rocket.Chat</title>
 </head>
 <body style="background-color: #2f343d">

diff --git a/src/public/main.css b/src/public/main.css
@@ -0,0 +1 @@
+@import '../node_modules/@rocket.chat/fuselage/dist/fuselage.css';
diff --git a/src/ui/components/AboutDialog/index.tsx b/src/ui/components/AboutDialog/index.tsx
@@ -2,6 +2,8 @@ import {
   Box,
   Button,
   Field,
+  FieldLabel,
+  FieldRow,
   Margins,
   Throbber,
   ToggleSwitch,
@@ -170,17 +172,19 @@ export const AboutDialog: FC = () => {
                 </Box>
               )}
 
-              <Field.Row>
-                <ToggleSwitch
-                  id={checkForUpdatesOnStartupToggleSwitchId}
-                  checked={isCheckForUpdatesOnStartupChecked}
-                  disabled={!canSetCheckForUpdatesOnStartup}
-                  onChange={handleCheckForUpdatesOnStartCheckBoxChange}
-                />
-                <Field.Label htmlFor={checkForUpdatesOnStartupToggleSwitchId}>
-                  {t('dialog.about.checkUpdatesOnStart')}
-                </Field.Label>
-              </Field.Row>
+              <Field>
+                <FieldRow>
+                  <ToggleSwitch
+                    id={checkForUpdatesOnStartupToggleSwitchId}
+                    checked={isCheckForUpdatesOnStartupChecked}
+                    disabled={!canSetCheckForUpdatesOnStartup}
+                    onChange={handleCheckForUpdatesOnStartCheckBoxChange}
+                  />
+                  <FieldLabel htmlFor={checkForUpdatesOnStartupToggleSwitchId}>
+                    {t('dialog.about.checkUpdatesOnStart')}
+                  </FieldLabel>
+                </FieldRow>
+              </Field>
             </Margins>
           </Box>
         )}

diff --git a/src/ui/components/AddServerView/index.tsx b/src/ui/components/AddServerView/index.tsx
@@ -3,7 +3,10 @@ import {
   ButtonGroup,
   Callout,
   Field,
+  FieldError,
   FieldGroup,
+  FieldLabel,
+  FieldRow,
   Margins,
   TextInput,
   Tile,
@@ -166,10 +169,8 @@ export const AddServerView: FC = () => {
           </Margins>
           <FieldGroup>
             <Field>
-              <Field.Label htmlFor={inputId}>
-                {t('landing.inputUrl')}
-              </Field.Label>
-              <Field.Row>
+              <FieldLabel htmlFor={inputId}>{t('landing.inputUrl')}</FieldLabel>
+              <FieldRow>
                 <TextInput
                   ref={inputRef as React.Ref<HTMLInputElement>}
                   id={inputId}
@@ -179,8 +180,8 @@ export const AddServerView: FC = () => {
                   dir='auto'
                   onChange={handleInputChange}
                 />
-              </Field.Row>
-              <Field.Error>{errorMessage}</Field.Error>
+              </FieldRow>
+              <FieldError>{errorMessage}</FieldError>
             </Field>
 
             <ButtonGroup align='center'>

diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
@@ -1,12 +1,12 @@
 import {
   Box,
   SearchInput,
-  Select,
   Icon,
   Button,
   Pagination,
   Scrollable,
   IconButton,
+  SelectLegacy,
 } from '@rocket.chat/fuselage';
 import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import type { FC, ChangeEvent } from 'react';
@@ -175,7 +175,7 @@ const DownloadsManagerView: FC = () => {
       display={isVisible ? 'flex' : 'none'}
       flexDirection='column'
       height='100vh'
-      backgroundColor='surface'
+      backgroundColor='light'
     >
       <Box
         minHeight={64}
@@ -209,7 +209,7 @@ const DownloadsManagerView: FC = () => {
           <SearchInput
             value={searchFilter}
             placeholder={t('downloads.filters.search')}
-            addon={<Icon color='neutral-700' name='magnifier' size={20} />}
+            addon={<Icon name='magnifier' size={20} />}
             onChange={handleSearchFilterChange}
           />
         </Box>
@@ -220,23 +220,23 @@ const DownloadsManagerView: FC = () => {
           flexBasis='0'
           paddingInline={2}
         >
-          <Select
+          <SelectLegacy
             value={serverFilter}
             placeholder={t('downloads.filters.server')}
             options={serverFilterOptions}
             onChange={handleServerFilterChange}
           />
         </Box>
         <Box display='flex' flexGrow={3} flexShrink={3} paddingInline={2}>
-          <Select
+          <SelectLegacy
             value={mimeTypeFilter}
             placeholder={t('downloads.filters.mimeType')}
             options={mimeTypeOptions}
             onChange={handleMimeFilter}
           />
         </Box>
         <Box display='flex' flexGrow={3} flexShrink={3} paddingInline={2}>
-          <Select
+          <SelectLegacy
             value={statusFilter}
             placeholder={t('downloads.filters.status')}
             options={statusFilterOptions}
@@ -249,7 +249,7 @@ const DownloadsManagerView: FC = () => {
             title={t('downloads.filters.clear')}
             onClick={handleClearAll}
           >
-            <Icon color='neutral-700' name='trash' size={24} />
+            <Icon name='trash' size={24} />
           </Button>
         </Box>
       </Box>

diff --git a/src/ui/components/OutlookCredentialsDialog/index.tsx b/src/ui/components/OutlookCredentialsDialog/index.tsx
@@ -10,6 +10,9 @@ import {
   PasswordInput,
   TextInput,
   ButtonGroup,
+  FieldRow,
+  FieldError,
+  FieldLabel,
 } from '@rocket.chat/fuselage';
 import type { FC, ReactElement } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -138,24 +141,24 @@ export const OutlookCredentialsDialog: FC = () => {
         <FieldGroup>
           <Field>
             <Label>{t('Login')}</Label>
-            <Field.Row>
+            <FieldRow>
               <TextInput {...register('login', { required: true })} />
-            </Field.Row>
+            </FieldRow>
             {errors.login && (
-              <Field.Error>
+              <FieldError>
                 {t('dialog.outlookCalendar.field_required')}
-              </Field.Error>
+              </FieldError>
             )}
           </Field>
           <Field>
             <Label>{t('Password')}</Label>
-            <Field.Row>
+            <FieldRow>
               <PasswordInput {...register('password', { required: true })} />
-            </Field.Row>
+            </FieldRow>
             {errors.password && (
-              <Field.Error>
+              <FieldError>
                 {t('dialog.outlookCalendar.field_required')}
-              </Field.Error>
+              </FieldError>
             )}
           </Field>
           {!isEncryptionAvailable && rememberCredentials && (
@@ -167,7 +170,7 @@ export const OutlookCredentialsDialog: FC = () => {
             </Callout>
           )}
           <Field>
-            <Field.Row>
+            <FieldRow>
               <Controller
                 control={control}
                 name='rememberCredentials'
@@ -180,10 +183,10 @@ export const OutlookCredentialsDialog: FC = () => {
                   />
                 )}
               />
-              <Field.Label htmlFor='check-box'>
+              <FieldLabel htmlFor='check-box'>
                 {t('dialog.outlookCalendar.remember_credentials')}
-              </Field.Label>
-            </Field.Row>
+              </FieldLabel>
+            </FieldRow>
           </Field>
           <Box display='flex' alignItems='end' justifyContent='space-between'>
             <Margins block='x8'>

diff --git a/src/ui/components/ServersView/ErrorView.tsx b/src/ui/components/ServersView/ErrorView.tsx
@@ -70,7 +70,7 @@ const ErrorView: FC<ErrorViewProps> = ({ isFailed, onReload }) => {
       />
       <Box
         is='section'
-        color='alternative'
+        color='pure-white'
         display='flex'
         flexDirection='column'
         justifyContent='center'

diff --git a/src/ui/components/SettingsView/SettingsView.tsx b/src/ui/components/SettingsView/SettingsView.tsx
@@ -22,7 +22,7 @@ export const SettingsView: FC = () => {
       display={isVisible ? 'flex' : 'none'}
       flexDirection='column'
       height='full'
-      backgroundColor='surface'
+      backgroundColor='light'
     >
       <Box
         width='full'

diff --git a/src/ui/components/SettingsView/features/ClearPermittedScreenCaptureServers.tsx b/src/ui/components/SettingsView/features/ClearPermittedScreenCaptureServers.tsx
@@ -1,4 +1,4 @@
-import { Field, Button } from '@rocket.chat/fuselage';
+import { Field, Button, FieldRow, FieldHint } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,7 @@ export const ClearPermittedScreenCaptureServers: FC<Props> = (props) => {
 
   return (
     <Field className={props.className}>
-      <Field.Row>
+      <FieldRow>
         <Button
           danger
           onClick={async () => {
@@ -27,12 +27,12 @@ export const ClearPermittedScreenCaptureServers: FC<Props> = (props) => {
         >
           {t('settings.options.clearPermittedScreenCaptureServers.title')}
         </Button>
-      </Field.Row>
-      <Field.Row>
-        <Field.Hint>
+      </FieldRow>
+      <FieldRow>
+        <FieldHint>
           {t('settings.options.clearPermittedScreenCaptureServers.description')}
-        </Field.Hint>
-      </Field.Row>
+        </FieldHint>
+      </FieldRow>
     </Field>
   );
 };
diff --git a/src/ui/components/SettingsView/features/FlashFrame.tsx b/src/ui/components/SettingsView/features/FlashFrame.tsx
@@ -1,4 +1,11 @@
-import { ToggleSwitch, Field, Callout } from '@rocket.chat/fuselage';
+import {
+  ToggleSwitch,
+  Field,
+  Callout,
+  FieldRow,
+  FieldLabel,
+  FieldHint,
+} from '@rocket.chat/fuselage';
 import type { ChangeEvent, Dispatch, FC } from 'react';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,27 +38,27 @@ export const FlashFrame: FC<Props> = (props) => {
 
   return (
     <Field className={props.className}>
-      <Field.Row>
+      <FieldRow>
         <ToggleSwitch onChange={handleChange} checked={isFlashFrameEnabled} />
-        <Field.Label htmlFor='toggle-switch'>
+        <FieldLabel htmlFor='toggle-switch'>
           {process.platform !== 'darwin'
             ? t('settings.options.flashFrame.title')
             : t('settings.options.flashFrame.titleDarwin')}
-        </Field.Label>
-      </Field.Row>
+        </FieldLabel>
+      </FieldRow>
       {process.platform === 'linux' && (
         <Callout
           title={t('settings.options.flashFrame.onLinux')}
           type='warning'
         />
       )}
-      <Field.Row>
-        <Field.Hint>
+      <FieldRow>
+        <FieldHint>
           {process.platform !== 'darwin'
             ? t('settings.options.flashFrame.description')
             : t('settings.options.flashFrame.descriptionDarwin')}
-        </Field.Hint>
-      </Field.Row>
+        </FieldHint>
+      </FieldRow>
     </Field>
   );
 };
diff --git a/src/ui/components/SettingsView/features/HardwareAcceleration.tsx b/src/ui/components/SettingsView/features/HardwareAcceleration.tsx
@@ -1,4 +1,10 @@
-import { ToggleSwitch, Field } from '@rocket.chat/fuselage';
+import {
+  ToggleSwitch,
+  Field,
+  FieldRow,
+  FieldLabel,
+  FieldHint,
+} from '@rocket.chat/fuselage';
 import type { ChangeEvent, Dispatch, FC } from 'react';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,20 +38,20 @@ export const HardwareAcceleration: FC<Props> = (props) => {
 
   return (
     <Field className={props.className}>
-      <Field.Row>
+      <FieldRow>
         <ToggleSwitch
           onChange={handleChange}
           checked={isHardwareAccelerationEnabled}
         />
-        <Field.Label htmlFor='toggle-switch'>
+        <FieldLabel htmlFor='toggle-switch'>
           {t('settings.options.hardwareAcceleration.title')}
-        </Field.Label>
-      </Field.Row>
-      <Field.Row>
-        <Field.Hint>
+        </FieldLabel>
+      </FieldRow>
+      <FieldRow>
+        <FieldHint>
           {t('settings.options.hardwareAcceleration.description')}
-        </Field.Hint>
-      </Field.Row>
+        </FieldHint>
+      </FieldRow>
     </Field>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import '../node_modules/@rocket.chat/fuselage/dist/fuselage.css';