Replace MUI Components with Jupyterlab UI toolkit

package.json

@@ -59,6 +59,7 @@
     ],
     "styleModule": "style/index.js",
     "dependencies": {
+        "@jupyter/react-components": "^0.13.3",
         "@jupyterlab/application": "^3.0.0",
         "@jupyterlab/apputils": "^3.0.0",
         "@jupyterlab/codemirror": "^3.0.0",

src/components/ActionButton.tsx

@@ -2,6 +2,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { classes } from 'typestyle';
 import { actionButtonStyle } from '../style/ActionButtonStyle';
+import { Button, Tooltip } from '@jupyter/react-components';
 
 /**
  * Action button properties interface
@@ -39,13 +40,16 @@ export const ActionButton: React.FunctionComponent<IActionButtonProps> = (
 ) => {
   const { disabled, className, title, onClick, icon } = props;
   return (
-    <button
-      disabled={disabled}
-      className={classes(actionButtonStyle, className)}
-      title={title}
-      onClick={onClick}
-    >
-      <icon.react elementPosition="center" tag="span" />
-    </button>
+    <>
+      <Tooltip anchor={title}>{title}</Tooltip>
+      <Button
+        id={title}
+        className={classes(actionButtonStyle, className)}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <icon.react elementPosition="center" tag="span" />
+      </Button>
+    </>
   );
 };

src/components/Alert.tsx

@@ -1,11 +1,12 @@
 import { TranslationBundle } from '@jupyterlab/translation';
 import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
-import { Button } from '@material-ui/core';
+import { Button } from '@jupyter/react-components';
 import Portal from '@material-ui/core/Portal';
 import Slide from '@material-ui/core/Slide';
 import Snackbar from '@material-ui/core/Snackbar';
 import { Color, default as MuiAlert } from '@material-ui/lab/Alert';
 import * as React from 'react';
+import { alertStyle } from '../style/AlertStyle';
 
 /**
  * Returns a React component for "sliding-in" an alert.
@@ -100,7 +101,9 @@ export class Alert extends React.Component<IAlertProps> {
       action = (
         <Button
           color="inherit"
-          size="small"
+          style={{
+            background: '#bc2a2a'
+          }}
           onClick={() => {
             showErrorMessage(this.props.trans.__('Error'), this.props.error, [
               Dialog.warnButton({ label: this.props.trans.__('Dismiss') })
@@ -113,8 +116,9 @@ export class Alert extends React.Component<IAlertProps> {
     } else if (this.props.details) {
       action = (
         <Button
-          color="inherit"
-          size="small"
+          style={{
+            background: '#bc2a2a'
+          }}
           onClick={() => {
             showDialog({
               title: this.props.trans.__('Detailed message'),
@@ -144,7 +148,14 @@ export class Alert extends React.Component<IAlertProps> {
           onClick={this._onClick}
           onClose={this._onClose}
         >
-          <MuiAlert action={action} variant="filled" severity={severity}>
+          <MuiAlert
+            action={action}
+            variant="filled"
+            severity={severity}
+            classes={{
+              filledError: alertStyle
+            }}
+          >
             {this.props.message || this.props.trans.__('(missing message)')}
           </MuiAlert>
         </Snackbar>

src/components/BranchMenu.tsx

@@ -25,6 +25,7 @@ import { branchIcon, mergeIcon, trashIcon } from '../style/icons';
 import { CommandIDs, Git, IGitExtension, Level } from '../tokens';
 import { ActionButton } from './ActionButton';
 import { NewBranchDialog } from './NewBranchDialog';
+import { Button } from '@jupyter/react-components';
 
 const ITEM_HEIGHT = 24.8; // HTML element height for a single branch
 const MIN_HEIGHT = 150; // Minimal HTML element height for the branches list
@@ -202,13 +203,12 @@ export class BranchMenu extends React.Component<
             title={this.props.trans.__('Filter branch menu')}
           />
           {this.state.filter ? (
-            <button className={filterClearClass}>
+            <Button className={filterClearClass} onClick={this._resetFilter}>
               <ClearIcon
                 titleAccess={this.props.trans.__('Clear the current filter')}
                 fontSize="small"
-                onClick={this._resetFilter}
               />
-            </button>
+            </Button>
           ) : null}
         </div>
         <input

src/components/StatusWidget.tsx

@@ -2,7 +2,7 @@ import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStatusBar } from '@jupyterlab/statusbar';
 import { TranslationBundle } from '@jupyterlab/translation';
-import { Badge } from '@material-ui/core';
+import { Badge } from '@jupyter/react-components';
 import React from 'react';
 import { classes } from 'typestyle';
 import { Operation, showGitOperationDialog } from '../commandsAndMenu';
@@ -52,8 +52,10 @@ export class StatusWidget extends ReactWidget {
           {(_, needsCredentials) => (
             <Badge
               className={badgeClass}
-              variant="dot"
-              invisible={!needsCredentials}
+              circular
+              style={{
+                display: `${!needsCredentials ? 'none' : 'inline-flex'}`
+              }}
               data-test-id="git-credential-badge"
             >
               <ActionButton

src/components/Toolbar.tsx

@@ -5,7 +5,8 @@ import {
   refreshIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
-import { Badge, Tab, Tabs } from '@material-ui/core';
+import { Tab, Tabs } from '@material-ui/core';
+import { Badge } from '@jupyter/react-components';
 import * as React from 'react';
 import { classes } from 'typestyle';
 import { Logger } from '../logger';
@@ -169,8 +170,14 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
         <span className={spacer} />
         <Badge
           className={badgeClass}
-          variant="dot"
-          invisible={!hasRemote || this.props.nCommitsBehind === 0}
+          circular
+          style={{
+            display: `${
+              !hasRemote || this.props.nCommitsBehind === 0
+                ? 'none'
+                : 'inline-flex'
+            }`
+          }}
           data-test-id="pull-badge"
         >
           <ActionButton
@@ -192,12 +199,16 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
           />
         </Badge>
         <Badge
-          className={badgeClass}
-          variant="dot"
-          invisible={
-            !hasRemote || (this.props.nCommitsAhead === 0 && hasUpstream)
-          }
           data-test-id="push-badge"
+          className={badgeClass}
+          circular
+          style={{
+            display: `${
+              !hasRemote || (this.props.nCommitsBehind === 0 && hasUpstream)
+                ? 'none'
+                : 'inline-flex'
+            }`
+          }}
         >
           <ActionButton
             className={toolbarButtonClass}
@@ -442,7 +453,7 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
       this.props.logger.log({
         level: Level.ERROR,
         message: this.props.trans.__('Failed to refresh.'),
-        error
+        error: error as Error
       });
     }
   };

src/components/WarningBox.tsx

@@ -1,9 +1,10 @@
 import { CardContent } from '@material-ui/core';
-import Card from '@material-ui/core/Card';
+// import Card from '@material-ui/core/Card';
+import { Card } from '@jupyter/react-components';
 import CardHeader from '@material-ui/core/CardHeader';
 import * as React from 'react';
 import {
-  commitRoot,
+  // commitRoot,
   dirtyStagedFilesWarningBoxClass,
   dirtyStagedFilesWarningBoxContentClass,
   dirtyStagedFilesWarningBoxHeaderClass
@@ -33,11 +34,11 @@ export interface IWarningBoxProps {
 export function WarningBox(props: IWarningBoxProps): JSX.Element {
   return (
     <Card
-      classes={{
-        root: commitRoot
-      }}
+      // classes={{
+      //   root: commitRoot
+      // }}
       className={dirtyStagedFilesWarningBoxClass}
-      variant="outlined"
+      // variant="outlined"
     >
       <CardHeader
         className={dirtyStagedFilesWarningBoxHeaderClass}

src/style/AlertStyle.ts

@@ -0,0 +1,12 @@
+import { style } from 'typestyle';
+
+export const alertStyle = style({
+  $nest: {
+    '& .MuiAlert-filledError': {
+      display: 'flex',
+      alignItems: 'center',
+      color: '#fff',
+      fontWeight: '500'
+    }
+  }
+});

yarn.lock

@@ -1428,6 +1428,26 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@jupyter/react-components@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@jupyter/react-components/-/react-components-0.13.3.tgz#0fac19cc56c780b2da880e3b82b2e0aab9ae4e6b"
+  integrity sha512-Td7xQbOx0NAWNfZqCAyv4T9Fb6e9XUXx1vdcadpxqvK6Ysxp2t/uV2M9kNoa4m/slMqw6pEmqi2wnNP7iZlo9w==
+  dependencies:
+    "@jupyter/web-components" "^0.13.3"
+    "@microsoft/fast-react-wrapper" "^0.3.18"
+    react ">=17.0.0 <19.0.0"
+
+"@jupyter/web-components@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@jupyter/web-components/-/web-components-0.13.3.tgz#a4b7899c014360448402016281c6420c87aead37"
+  integrity sha512-rYhgFMn/kHii3ImInlAtaNclBLvHEHbjxVfFYC5YBCGTrwGBGN4G7UPZ2O94xt6I3DoJyLeKmuj9aCfAuj1Qjg==
+  dependencies:
+    "@microsoft/fast-colors" "^5.3.1"
+    "@microsoft/fast-components" "^2.30.6"
+    "@microsoft/fast-element" "^1.12.0"
+    "@microsoft/fast-foundation" "^2.49.0"
+    "@microsoft/fast-web-utilities" "^6.0.0"
+
 "@jupyter/ydoc@~0.2.4":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@jupyter/ydoc/-/ydoc-0.2.5.tgz#8241bce5798a3c10761df7e7045c0b4e24abf868"
@@ -2232,6 +2252,59 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@microsoft/fast-colors@^5.3.0", "@microsoft/fast-colors@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz#defc59874176e42316be7e6d24c31885ead8ca56"
+  integrity sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA==
+
+"@microsoft/fast-components@^2.30.6":
+  version "2.30.6"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components/-/fast-components-2.30.6.tgz#22449f41c300060831b3545c27906cea03a72476"
+  integrity sha512-q6nPiRyA/8HHqCbN4ClziJfOfFaTIVIyBUTSJTcO7ODzkr8oEin7VzKJNoIP/qMpKMkg90wxwLOucr6nsokApw==
+  dependencies:
+    "@microsoft/fast-colors" "^5.3.0"
+    "@microsoft/fast-element" "^1.10.1"
+    "@microsoft/fast-foundation" "^2.46.2"
+    "@microsoft/fast-web-utilities" "^5.4.1"
+    tslib "^1.13.0"
+
+"@microsoft/fast-element@^1.10.1", "@microsoft/fast-element@^1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.12.0.tgz#aabfc75518c3a9000710cce5f66dfc677de8c254"
+  integrity sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA==
+
+"@microsoft/fast-foundation@^2.46.2", "@microsoft/fast-foundation@^2.49.0", "@microsoft/fast-foundation@^2.49.4":
+  version "2.49.4"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.49.4.tgz#322150cd6f0bed89d6d2238a700e6b9db94ac694"
+  integrity sha512-5I2tSPo6bnOfVAIX7XzX+LhilahwvD7h+yzl3jW0t5IYmMX9Lci9VUVyx5f8hHdb1O9a8Y9Atb7Asw7yFO/u+w==
+  dependencies:
+    "@microsoft/fast-element" "^1.12.0"
+    "@microsoft/fast-web-utilities" "^5.4.1"
+    tabbable "^5.2.0"
+    tslib "^1.13.0"
+
+"@microsoft/fast-react-wrapper@^0.3.18":
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.3.22.tgz#fe68ed7bccbd1919c36afc3105b572d76215ad25"
+  integrity sha512-XhlX4m6znh7XW92oPvlKoG9USUn9JtF9rP1qtUoIbkaDaFtUS+H8o1Jn6/oK/rS44LbBLJXrvRkInmSWlDiGFw==
+  dependencies:
+    "@microsoft/fast-element" "^1.12.0"
+    "@microsoft/fast-foundation" "^2.49.4"
+
+"@microsoft/fast-web-utilities@^5.4.1":
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz#8e3082ee2ff2b5467f17e7cb1fb01b0e4906b71f"
+  integrity sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==
+  dependencies:
+    exenv-es6 "^1.1.1"
+
+"@microsoft/fast-web-utilities@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-6.0.0.tgz#7678c2b2cd12aeef785f4e2288da93a4db9e38a6"
+  integrity sha512-ckCA4Xn91ja1Qz+jhGGL1Q3ZeuRpA5VvYcRA7GzA1NP545sl14bwz3tbHCq8jIk+PL7mkSaIveGMYuJB2L4Izg==
+  dependencies:
+    exenv-es6 "^1.1.1"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -5157,6 +5230,11 @@ execa@^7.0.0, execa@^7.1.1:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+exenv-es6@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exenv-es6/-/exenv-es6-1.1.1.tgz#80b7a8c5af24d53331f755bac07e84abb1f6de67"
+  integrity sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -8756,7 +8834,7 @@ react-window@^1.8.5:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^17.0.0, react@^17.0.1:
+"react@>=17.0.0 <19.0.0", react@^17.0.0, react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -9812,6 +9890,11 @@ systeminformation@^5.8.6:
   resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.21.8.tgz#18395187e5983698619ed07ca8640ae48ec232b2"
   integrity sha512-Xf1KDMUTQHLOT9Z7MjpSpsbaICOHcm4OZ9c9qqpkCoXuxq5MoyDrgu5GIQYpoiralXNPrqxDz3ND8MdllpXeQA==
 
+tabbable@^5.2.0:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
+  integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
@@ -10029,7 +10112,7 @@ ts-jest@^26.0.0, ts-jest@^26.3.0:
     semver "7.x"
     yargs-parser "20.x"
 
-tslib@^1.9.0:
+tslib@^1.13.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==