Merge pull request #2069 from element-hq/renovate/typescript-eslint-monorepo

Update typescript-eslint monorepo to v6.19.0

.github/workflows/publish.yaml

@@ -54,7 +54,7 @@ jobs:
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
 
       - name: Upload
-        uses: actions/upload-artifact@cf8714cfeaba5687a442b9bcb85b29e23f468dfa
+        uses: actions/upload-artifact@1eb3cb2b3e0f29609092a73eb033bb759a334595
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
@@ -62,7 +62,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@9dc751fe249ad99385a2583ee0d084c400eee04e
+        uses: docker/metadata-action@dbef88086f6cef02e264edb7dbf63250c17cef6c
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |

package.json

@@ -24,7 +24,7 @@
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.46.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.47.0",
     "@opentelemetry/instrumentation-document-load": "^0.34.0",
     "@opentelemetry/instrumentation-user-interaction": "^0.34.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -50,7 +50,7 @@
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^0.1.0",
-    "@vector-im/compound-web": "^1.0.0",
+    "@vector-im/compound-web": "^2.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
@@ -69,7 +69,7 @@
     "posthog-js": "^1.29.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^13.0.0",
+    "react-i18next": "^14.0.0",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
@@ -78,7 +78,7 @@
     "tinyqueue": "^2.0.3",
     "unique-names-generator": "^4.6.0",
     "uuid": "9",
-    "vaul": "^0.7.0"
+    "vaul": "^0.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -114,7 +114,7 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^49.0.0",
+    "eslint-plugin-unicorn": "^50.0.0",
     "i18next-parser": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.2",

src/App.tsx

@@ -24,6 +24,7 @@ import {
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -77,35 +78,37 @@ export const App: FC<AppProps> = ({ history }) => {
     // @ts-ignore
     <Router history={history}>
       <BackgroundProvider>
-        {loaded ? (
-          <Suspense fallback={null}>
-            <ClientProvider>
-              <MediaDevicesProvider>
-                <Sentry.ErrorBoundary fallback={errorPage}>
-                  <OverlayProvider>
-                    <DisconnectedBanner />
-                    <Switch>
-                      <SentryRoute exact path="/">
-                        <HomePage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/login">
-                        <LoginPage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/register">
-                        <RegisterPage />
-                      </SentryRoute>
-                      <SentryRoute path="*">
-                        <RoomPage />
-                      </SentryRoute>
-                    </Switch>
-                  </OverlayProvider>
-                </Sentry.ErrorBoundary>
-              </MediaDevicesProvider>
-            </ClientProvider>
-          </Suspense>
-        ) : (
-          <LoadingView />
-        )}
+        <TooltipProvider>
+          {loaded ? (
+            <Suspense fallback={null}>
+              <ClientProvider>
+                <MediaDevicesProvider>
+                  <Sentry.ErrorBoundary fallback={errorPage}>
+                    <OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
+                    </OverlayProvider>
+                  </Sentry.ErrorBoundary>
+                </MediaDevicesProvider>
+              </ClientProvider>
+            </Suspense>
+          ) : (
+            <LoadingView />
+          )}
+        </TooltipProvider>
       </BackgroundProvider>
     </Router>
   );

src/room/EncryptionLock.module.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .lock {
+  display: block;
   padding: var(--cpd-space-1x);
   border-radius: var(--cpd-radius-pill-effect);
 }

src/room/EncryptionLock.tsx

@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right">
+    <Tooltip label={label} side="right" isTriggerInteractive={false}>
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
         aria-label={label}
-        // Make the icon focusable so that the tooltip can be opened
-        // with keyboard navigation
-        // TODO: Replace this with the solution from
-        // https://github.com/vector-im/compound-web/pull/130 once it
-        // lands
-        tabIndex={0}
       />
     </Tooltip>
   );

src/room/InCallView.module.css

@@ -28,7 +28,9 @@ limitations under the License.
   flex-direction: column;
   overflow: auto;
   overflow-inline: hidden;
-  contain: strict;
+  /* There used to be a contain: strict here, but due to some bugs in Firefox,
+  this was causing the Z-ordering of modals to glitch out. It can be added back
+  if those issues appear to be resolved. */
 }
 
 .centerMessage {

src/video-grid/VideoTile.module.css

@@ -158,7 +158,8 @@ unconditionally select the container so we can use cqmin units */
   max-inline-size: 100%;
 }
 
-.nameTag > svg {
+.nameTag > svg,
+.nameTag > span {
   flex-shrink: 0;
 }
 
@@ -170,14 +171,16 @@ unconditionally select the container so we can use cqmin units */
   color: var(--cpd-color-icon-primary);
 }
 
-.nameTag span {
+.nameTag > .name {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding-inline: var(--cpd-space-2x);
+  flex-shrink: 1;
 }
 
 .errorIcon {
+  display: block;
   color: var(--cpd-color-icon-critical-primary);
 }
 

src/video-grid/VideoTile.tsx

@@ -148,22 +148,20 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
         <div className={styles.fg}>
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
-            <Text as="span" size="sm" weight="medium">
+            <Text as="span" size="sm" weight="medium" className={styles.name}>
               {nameTag}
             </Text>
             {unencryptedWarning && (
-              <Tooltip label={t("common.unencrypted")} side="bottom">
+              <Tooltip
+                label={t("common.unencrypted")}
+                side="bottom"
+                isTriggerInteractive={false}
+              >
                 <ErrorIcon
                   width={20}
                   height={20}
                   aria-label={t("common.unencrypted")}
                   className={styles.errorIcon}
-                  // Make the icon focusable so that the tooltip can be opened
-                  // with keyboard navigation
-                  // TODO: Replace this with the solution from
-                  // https://github.com/vector-im/compound-web/pull/130 once it
-                  // lands
-                  tabIndex={0}
                 />
               </Tooltip>
             )}