From 95cc0f40b2e84dec4fb3847fe1dfc1e2d9c01896 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:57:26 +0000
Subject: [PATCH 1/2] build(deps): Bump the mui group with 2 updates

Bumps the mui group with 2 updates: [@mui/icons-material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-icons-material) and [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material).


Updates `@mui/icons-material` from 6.3.1 to 6.4.0
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v6.4.0/packages/mui-icons-material)

Updates `@mui/material` from 6.3.1 to 6.4.0
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v6.4.0/packages/mui-material)

---
updated-dependencies:
- dependency-name: "@mui/icons-material"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: mui
- dependency-name: "@mui/material"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: mui
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |  4 +--
 yarn.lock    | 78 ++++++++++++++++++++++++++--------------------------
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 867002931f..8102b4019b 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,9 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.3.1",
+    "@mui/icons-material": "^6.4.0",
     "@mui/lab": "^6.0.0-beta.21",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@types/styled-components": "^5.1.34",
     "ansi-styles": "^6.2.1",
     "d3": "^7.9.0",
diff --git a/yarn.lock b/yarn.lock
index e2e3dde117..6a55715302 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2423,26 +2423,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/core-downloads-tracker@npm:6.3.1"
-  checksum: 10c0/a996ad8db6bd8c981c4e2e2d243526c838dd29f0bbe7dc5ab6933be357e41f748781d322b1decf79ae1c9abba24190162559d84deedcb7c8824a68754dddf216
+"@mui/core-downloads-tracker@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/core-downloads-tracker@npm:6.4.0"
+  checksum: 10c0/48112fb90df2fe58fdbc8ca9c8fac3487dc3aa0fbc31bd1e6b373f43f5bbb23d6fc673686b42cb46723e2d8c66ae914ecb9397c38e7d43a340ec6cbe07e1469d
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/icons-material@npm:6.3.1"
+"@mui/icons-material@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/icons-material@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
   peerDependencies:
-    "@mui/material": ^6.3.1
+    "@mui/material": ^6.4.0
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/edaf71b7368c14cfbfed6f475ef96187871a010e972b9e7608d23cadae5ce52a3a6888b32453721dc1d86e2e7ad9c61aadde83ba5cd94363782bf83803d1ab36
+  checksum: 10c0/5e05dbb67e0f7e0c046d5665bebf41df487b31ce617987ac0e8da9c539221bad7e523bf77f0f0153b35aadb56f02146aded567e8032ba608696f70b708d505c0
   languageName: node
   linkType: hard
 
@@ -2475,15 +2475,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/material@npm:6.3.1"
+"@mui/material@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/material@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/core-downloads-tracker": "npm:^6.3.1"
-    "@mui/system": "npm:^6.3.1"
+    "@mui/core-downloads-tracker": "npm:^6.4.0"
+    "@mui/system": "npm:^6.4.0"
     "@mui/types": "npm:^7.2.21"
-    "@mui/utils": "npm:^6.3.1"
+    "@mui/utils": "npm:^6.4.0"
     "@popperjs/core": "npm:^2.11.8"
     "@types/react-transition-group": "npm:^4.4.12"
     clsx: "npm:^2.1.1"
@@ -2494,7 +2494,7 @@ __metadata:
   peerDependencies:
     "@emotion/react": ^11.5.0
     "@emotion/styled": ^11.3.0
-    "@mui/material-pigment-css": ^6.3.1
+    "@mui/material-pigment-css": ^6.4.0
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -2507,7 +2507,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/7fb91acd9bc021dde78e70d495a2abd69d0e2df35e526e0730e060c3177bb10cc3058ee27c72b5ec9bc7622d9c2ef99831b89f511f6700bc3717f979e2cb0152
+  checksum: 10c0/5bd9757b578827d841934725a7145ae1d295cbc979fec4fb1a099c439ae0db1a67ace47b2a94f289ac5289d16b0167ebba9a4e98b0499840555b60fb5b549923
   languageName: node
   linkType: hard
 
@@ -2528,12 +2528,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/private-theming@npm:6.3.1"
+"@mui/private-theming@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/private-theming@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/utils": "npm:^6.3.1"
+    "@mui/utils": "npm:^6.4.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -2541,7 +2541,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/aafaca0d7e5fd4d83c2cade28b7de554c0d848595f8f23f26c8f7daf3fc664053c9c81342d44d24e0a04a4813b58d6f0c1d135ae2775380acda91468a21f9684
+  checksum: 10c0/3e89ff9e6baf85b1bdb0ed55e1ef50dadd95991ed498928e1764c1255fa174c0d134a46beebb1e4faabc22820b404923911c2bf6e9692fd269a77522c356eb6c
   languageName: node
   linkType: hard
 
@@ -2568,9 +2568,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/styled-engine@npm:6.3.1"
+"@mui/styled-engine@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/styled-engine@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
     "@emotion/cache": "npm:^11.13.5"
@@ -2587,7 +2587,7 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/81bbf8f2016b1c7debbbaab1a44ebaf8e494e8c9d32d2201b28f8c653a082177f6570fef779bf835bad1a9120af219a64b1d7a9a8a569c9c07045f00affe6b87
+  checksum: 10c0/bff35147ca9ef586679b53786d840e98837f0c1e5bf10a3510d4b2b68c340ae4ab69befe94b69ef25f6846bada5b3c355d25fa3a179d1598499e28c51f28d5d2
   languageName: node
   linkType: hard
 
@@ -2619,15 +2619,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/system@npm:6.3.1"
+"@mui/system@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/system@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
-    "@mui/private-theming": "npm:^6.3.1"
-    "@mui/styled-engine": "npm:^6.3.1"
+    "@mui/private-theming": "npm:^6.4.0"
+    "@mui/styled-engine": "npm:^6.4.0"
     "@mui/types": "npm:^7.2.21"
-    "@mui/utils": "npm:^6.3.1"
+    "@mui/utils": "npm:^6.4.0"
     clsx: "npm:^2.1.1"
     csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
@@ -2643,7 +2643,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/49613b001f7e60c7ed70f3e2ee3ffc4f3a2719509e4f9ec18faf73a354597b8d894d0ee8861bf3a5b5db763efca36bcfb75989505c88e009c1627b114bac88ef
+  checksum: 10c0/5e8d82674693d747b947ce4e5c1a11fff148c5242b2af898d80575e780f0abd3857f234a47b1cec16ca02334ecc7450f0afb5e311ddee9e9cf342e5bf3c7c1fc
   languageName: node
   linkType: hard
 
@@ -2691,9 +2691,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "@mui/utils@npm:6.3.1"
+"@mui/utils@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@mui/utils@npm:6.4.0"
   dependencies:
     "@babel/runtime": "npm:^7.26.0"
     "@mui/types": "npm:^7.2.21"
@@ -2707,7 +2707,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/b111bca7ad065b1028714d55a8df90267c47a72ffb2bfad7a1709cef0d5d9036b463855d431b3606967c9351c7ee23f1dee02457b2f3ed02513744f0173eb00c
+  checksum: 10c0/c72ab7685affb577f1b48a5f5be02d11254cddf858cc35d61e0483434249cc064f2d145e9e72be60c344f31ccc7d6e61c59a256413b7e68077e883c0ffc8882e
   languageName: node
   linkType: hard
 
@@ -4374,9 +4374,9 @@ __metadata:
     "@emotion/react": "npm:^11.14.0"
     "@emotion/styled": "npm:^11.14.0"
     "@eslint/js": "npm:9.18.0"
-    "@mui/icons-material": "npm:^6.3.1"
+    "@mui/icons-material": "npm:^6.4.0"
     "@mui/lab": "npm:^6.0.0-beta.21"
-    "@mui/material": "npm:^6.3.1"
+    "@mui/material": "npm:^6.4.0"
     "@parcel/config-default": "npm:^2.13.3"
     "@parcel/core": "npm:^2.13.3"
     "@parcel/optimizer-data-url": "npm:^2.13.3"

From 9119d167ab7aee2698d962c9b8cb5cfcfd034858 Mon Sep 17 00:00:00 2001
From: Martin Proffitt <mproffitt@choclab.net>
Date: Wed, 15 Jan 2025 08:35:59 +0100
Subject: [PATCH 2/2] Fix snapshots

---
 .../__snapshots__/DataTable.test.tsx.snap     | 20 ++--
 .../__snapshots__/SyncActions.test.tsx.snap   | 56 ++++++-----
 .../__snapshots__/SyncControls.test.tsx.snap  | 92 +++++++++++--------
 .../__snapshots__/Page.test.tsx.snap          | 12 ++-
 4 files changed, 111 insertions(+), 69 deletions(-)

diff --git a/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index bcf774431f..654091e7ff 100644
--- a/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -266,8 +266,9 @@ exports[`DataTable snapshots renders 1`] = `
                 className="c5"
               >
                 <button
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-1j6t5ub-MuiButtonBase-root-MuiButton-root"
-                  disabled={false}
+                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-9wcwzo-MuiButtonBase-root-MuiButton-root"
+                  disabled={null}
+                  id=":r0:"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onContextMenu={[Function]}
@@ -316,8 +317,9 @@ exports[`DataTable snapshots renders 1`] = `
                 className="c5"
               >
                 <button
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-1j6t5ub-MuiButtonBase-root-MuiButton-root"
-                  disabled={false}
+                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-9wcwzo-MuiButtonBase-root-MuiButton-root"
+                  disabled={null}
+                  id=":r1:"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onContextMenu={[Function]}
@@ -358,8 +360,9 @@ exports[`DataTable snapshots renders 1`] = `
                 className="c5"
               >
                 <button
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-1j6t5ub-MuiButtonBase-root-MuiButton-root"
-                  disabled={false}
+                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-9wcwzo-MuiButtonBase-root-MuiButton-root"
+                  disabled={null}
+                  id=":r2:"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onContextMenu={[Function]}
@@ -400,8 +403,9 @@ exports[`DataTable snapshots renders 1`] = `
                 className="c5"
               >
                 <button
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-1j6t5ub-MuiButtonBase-root-MuiButton-root"
-                  disabled={false}
+                  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit c6 css-9wcwzo-MuiButtonBase-root-MuiButton-root"
+                  disabled={null}
+                  id=":r3:"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onContextMenu={[Function]}
diff --git a/ui/components/Sync/__tests__/__snapshots__/SyncActions.test.tsx.snap b/ui/components/Sync/__tests__/__snapshots__/SyncActions.test.tsx.snap
index 5d214255f6..fda29ee02a 100644
--- a/ui/components/Sync/__tests__/__snapshots__/SyncActions.test.tsx.snap
+++ b/ui/components/Sync/__tests__/__snapshots__/SyncActions.test.tsx.snap
@@ -155,8 +155,9 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
   className="c0 c1 c2"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":rg:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -173,7 +174,7 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c4 c5"
@@ -209,9 +210,10 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":ri:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -261,9 +263,10 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
-      disabled={false}
+      disabled={null}
+      id=":rk:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -313,9 +316,10 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
       disabled={true}
+      id=":rm:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -523,8 +527,9 @@ exports[`SyncActions snapshots non-suspended 1`] = `
   className="c0 c1 c2"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":r0:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -541,7 +546,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c4 c5"
@@ -720,9 +725,10 @@ exports[`SyncActions snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":r3:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -772,9 +778,10 @@ exports[`SyncActions snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
-      disabled={false}
+      disabled={null}
+      id=":r5:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -824,9 +831,10 @@ exports[`SyncActions snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
       disabled={true}
+      id=":r7:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -1034,8 +1042,9 @@ exports[`SyncActions snapshots suspended 1`] = `
   className="c0 c1 c2"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c3 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
     disabled={true}
+    id=":r8:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -1052,7 +1061,7 @@ exports[`SyncActions snapshots suspended 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c4 c5"
@@ -1233,9 +1242,10 @@ exports[`SyncActions snapshots suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
       disabled={true}
+      id=":rb:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -1285,9 +1295,10 @@ exports[`SyncActions snapshots suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
       disabled={true}
+      id=":rd:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -1337,9 +1348,10 @@ exports[`SyncActions snapshots suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c3 c8 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
-      disabled={false}
+      disabled={null}
+      id=":rf:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
diff --git a/ui/components/Sync/__tests__/__snapshots__/SyncControls.test.tsx.snap b/ui/components/Sync/__tests__/__snapshots__/SyncControls.test.tsx.snap
index 2ad7901aa7..baae0d5cb4 100644
--- a/ui/components/Sync/__tests__/__snapshots__/SyncControls.test.tsx.snap
+++ b/ui/components/Sync/__tests__/__snapshots__/SyncControls.test.tsx.snap
@@ -167,8 +167,9 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
   className="c0 c1"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
     disabled={true}
+    id=":r8:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -185,7 +186,7 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c3 c4"
@@ -366,9 +367,10 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
       disabled={true}
+      id=":rb:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -418,9 +420,10 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
       disabled={true}
+      id=":rd:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -469,9 +472,10 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation Mui-disabled MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
       disabled={true}
+      id=":rf:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -673,8 +677,9 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
   className="c0 c1"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":rr:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -691,7 +696,7 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c3 c4"
@@ -870,9 +875,10 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":ru:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -922,9 +928,10 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
-      disabled={false}
+      disabled={null}
+      id=":r10:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -973,9 +980,10 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
-      disabled={false}
+      disabled={null}
+      id=":r12:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -1134,8 +1142,9 @@ exports[`SyncControls snapshots hideSuspend 1`] = `
   className="c0 c1"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":rn:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -1152,7 +1161,7 @@ exports[`SyncControls snapshots hideSuspend 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c3 c4"
@@ -1331,9 +1340,10 @@ exports[`SyncControls snapshots hideSuspend 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":rq:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -1520,8 +1530,9 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
   className="c0 c1"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":rg:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -1538,7 +1549,7 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c3 c4"
@@ -1574,9 +1585,10 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":ri:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -1626,9 +1638,10 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
-      disabled={false}
+      disabled={null}
+      id=":rk:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -1677,9 +1690,10 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c6 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
-      disabled={false}
+      disabled={null}
+      id=":rm:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -1881,8 +1895,9 @@ exports[`SyncControls snapshots non-suspended 1`] = `
   className="c0 c1"
 >
   <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-1o1fn1r-MuiButtonBase-root-MuiButton-root"
-    disabled={false}
+    className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation c2 sync-icon-button css-157ho6v-MuiButtonBase-root-MuiButton-root"
+    disabled={null}
+    id=":r0:"
     onBlur={[Function]}
     onContextMenu={[Function]}
     onDragLeave={[Function]}
@@ -1899,7 +1914,7 @@ exports[`SyncControls snapshots non-suspended 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-dm569u-MuiButton-startIcon"
+      className="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         className="c3 c4"
@@ -2078,9 +2093,10 @@ exports[`SyncControls snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="sync-button"
-      disabled={false}
+      disabled={null}
+      id=":r3:"
       onBlur={[Function]}
       onClick={[Function]}
       onContextMenu={[Function]}
@@ -2130,9 +2146,10 @@ exports[`SyncControls snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="suspend-button"
-      disabled={false}
+      disabled={null}
+      id=":r5:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
@@ -2181,9 +2198,10 @@ exports[`SyncControls snapshots non-suspended 1`] = `
     onTouchStart={[Function]}
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-pr9cf-MuiButtonBase-root-MuiButton-root"
+      className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation c2 c7 css-1fh7grq-MuiButtonBase-root-MuiButton-root"
       data-testid="resume-button"
-      disabled={false}
+      disabled={null}
+      id=":r7:"
       onBlur={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
diff --git a/ui/components/__tests__/__snapshots__/Page.test.tsx.snap b/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
index 62681f64ce..56b7a6b7f5 100644
--- a/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
@@ -246,9 +246,10 @@ exports[`Page snapshots default 1`] = `
       <a
         aria-label="Docs"
         aria-labelledby={null}
-        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium c10 c11 Link css-aixiz9-MuiButtonBase-root-MuiIconButton-root"
+        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium c10 c11 Link css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
         data-mui-internal-clone-element={true}
         href="https://docs.gitops.weaveworks.org/"
+        id=":r2:"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -266,6 +267,9 @@ exports[`Page snapshots default 1`] = `
         tabIndex={0}
         target="_blank"
       >
+        <span
+          className="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           className="c4 c12"
         >
@@ -286,9 +290,10 @@ exports[`Page snapshots default 1`] = `
         aria-haspopup="true"
         aria-label="Account settings"
         aria-labelledby={null}
-        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium c10 css-aixiz9-MuiButtonBase-root-MuiIconButton-root"
+        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium c10 css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
         data-mui-internal-clone-element={true}
         disabled={false}
+        id=":r4:"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -307,6 +312,9 @@ exports[`Page snapshots default 1`] = `
         tabIndex={0}
         type="button"
       >
+        <span
+          className="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           className="c4 c12"
         >