Replace MUI Components with Jupyterlab UI toolkit

.gitignore

@@ -135,4 +135,6 @@ dmypy.json
 .vscode
 
 # vim stuff
-*.swp
+*.swp
+
+venv

package.json

@@ -58,6 +58,7 @@
     "dependencies": {
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
+        "@jupyter/react-components": "^0.13.3",
         "@jupyterlab/application": "^4.0.6",
         "@jupyterlab/apputils": "^4.1.6",
         "@jupyterlab/codeeditor": "^4.0.6",

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
@@ -26,7 +27,7 @@ export interface IActionButtonProps {
   /**
    * On-click event handler
    */
-  onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (event?: React.MouseEvent) => void;
 }
 
 /**
@@ -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/BranchMenu.tsx

@@ -30,6 +30,7 @@ import { CommandIDs, Git, IGitExtension } from '../tokens';
 import { ActionButton } from './ActionButton';
 import { NewBranchDialog } from './NewBranchDialog';
 import { showError } from '../notifications';
+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
@@ -196,13 +197,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
@@ -286,9 +286,7 @@ export class BranchMenu extends React.Component<
               className={hiddenButtonStyle}
               icon={trashIcon}
               title={this.props.trans.__('Delete this branch locally')}
-              onClick={async (
-                event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-              ) => {
+              onClick={async (event?: React.MouseEvent) => {
                 event?.stopPropagation();
                 await this._onDeleteBranch(branch.name);
               }}
@@ -299,9 +297,7 @@ export class BranchMenu extends React.Component<
               title={this.props.trans.__(
                 'Merge this branch into the current one'
               )}
-              onClick={(
-                event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-              ) => {
+              onClick={(event?: React.MouseEvent) => {
                 event?.stopPropagation();
                 this._onMergeBranch(branch.name);
               }}

src/components/CommitBox.tsx

@@ -180,8 +180,8 @@ export class CommitBox extends React.Component<
     const title = !this.props.hasFiles
       ? this.props.trans.__('Disabled: No files are staged for commit')
       : !this.props.summary && !this.props.amend
-      ? this.props.trans.__('Disabled: No commit message summary')
-      : this.props.label;
+        ? this.props.trans.__('Disabled: No commit message summary')
+        : this.props.label;
 
     const shortcutHint = CommandRegistry.formatKeystroke(
       this._getSubmitKeystroke()

src/components/CommitComparisonBox.tsx

@@ -58,7 +58,7 @@ export interface ICommitComparisonBoxProps {
   /**
    * Returns a callback to be invoked on close.
    */
-  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onClose: (event?: React.MouseEvent) => void;
 
   /**
    * Returns a callback to be invoked on click to display a file diff.
@@ -158,7 +158,7 @@ export function CommitComparisonBox(
         <ActionButton
           title={props.trans.__('Close')}
           icon={closeIcon}
-          onClick={(event?: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          onClick={(event?: React.MouseEvent) => {
             props.onClose(event);
           }}
         ></ActionButton>

src/components/FileItem.tsx

@@ -249,8 +249,8 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
               {this.props.file.status === 'unmerged'
                 ? '!'
                 : this.props.file.y === '?'
-                ? 'U'
-                : status_code}
+                  ? 'U'
+                  : status_code}
             </span>
           </div>
         </div>

src/components/FileList.tsx

@@ -213,9 +213,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   };
 
   /** Reset all staged files */
-  resetAllStagedFiles = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  resetAllStagedFiles = async (event?: React.MouseEvent): Promise<void> => {
     event?.stopPropagation();
     await this.props.model.reset();
   };
@@ -245,18 +243,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   };
 
   /** Add all unstaged files */
-  addAllUnstagedFiles = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  addAllUnstagedFiles = async (event?: React.MouseEvent): Promise<void> => {
     event?.stopPropagation();
 
     await this.props.model.addAllUnstaged();
   };
 
   /** Discard changes in all unstaged files */
-  discardAllUnstagedFiles = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  discardAllUnstagedFiles = async (event?: React.MouseEvent): Promise<void> => {
     event?.stopPropagation();
 
     const result = await showDialog({
@@ -282,9 +276,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   };
 
   /** Discard changes in all unstaged and staged files */
-  discardAllChanges = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  discardAllChanges = async (event?: React.MouseEvent): Promise<void> => {
     event?.stopPropagation();
     await discardAllChanges(this.props.model, this.props.trans);
   };
@@ -308,9 +300,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   };
 
   /** Add all untracked files */
-  addAllUntrackedFiles = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  addAllUntrackedFiles = async (event?: React.MouseEvent): Promise<void> => {
     event?.stopPropagation();
     await this.props.model.addAllUntracked();
   };
@@ -570,9 +560,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     }
   };
 
-  pullFromRemote = async (
-    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): Promise<void> => {
+  pullFromRemote = async (event?: React.MouseEvent): Promise<void> => {
     await this.props.commands.execute(CommandIDs.gitPull, {});
   };
 
@@ -607,7 +595,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
       return (
         <div className={fileListWrapperClass}>
           <AutoSizer disableWidth={true}>
-            {({ height }) => (
+            {({ height }: { height: number }) => (
               <>
                 {this._renderUnmerged(unmergedFiles, height, false)}
                 {this._renderRemoteChanged(remoteChangedFiles, height)}
@@ -660,7 +648,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           onContextMenu={event => event.preventDefault()}
         >
           <AutoSizer disableWidth={true}>
-            {({ height }) => (
+            {({ height }: { height: number }) => (
               <>
                 {this._renderUnmerged(unmergedFiles, height)}
                 {this._renderRemoteChanged(remoteChangedFiles, height)}

src/components/GitPanel.tsx

@@ -483,8 +483,8 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
         ? this.props.trans.__('Commit (Amend) and Push')
         : this.props.trans.__('Commit and Push')
       : this.state.commitAmend
-      ? this.props.trans.__('Commit (Amend)')
-      : this.props.trans.__('Commit');
+        ? this.props.trans.__('Commit (Amend)')
+        : this.props.trans.__('Commit');
     const warningTitle = this.props.trans.__('Warning');
     const inSimpleMode = this.props.settings.composite[
       'simpleStaging'

src/components/HistorySideBar.tsx

@@ -70,15 +70,15 @@ export interface IHistorySideBarProps {
    */
   onSelectForCompare?: (
     commit: Git.ISingleCommitInfo
-  ) => (event?: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void>;
+  ) => (event?: React.MouseEvent) => Promise<void>;
 
   /**
    * Callback invoked upon clicking to compare a commit against the selected.
    * @param event - event object
    */
   onCompareWithSelected?: (
     commit: Git.ISingleCommitInfo
-  ) => (event?: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void>;
+  ) => (event?: React.MouseEvent) => Promise<void>;
 }
 
 export const CONTEXT_COMMANDS = [ContextCommandIDs.gitTagAdd];

src/components/NewTagDialog.tsx

@@ -286,7 +286,7 @@ export const SingleCommitNode: React.FunctionComponent<ISingleCommitProps> = (
             isBold ? commitItemBoldClass : null
           )}
         >
-          {+props.commit.commit in Git.Diff.SpecialRef
+          {(+props.commit.commit) in Git.Diff.SpecialRef
             ? Git.Diff.SpecialRef[+props.commit.commit]
             : props.commit.commit.slice(0, 7)}
         </span>

src/components/PastCommitNode.tsx

@@ -88,9 +88,7 @@ export interface IPastCommitNodeProps {
    *
    * @param event - event object
    */
-  onSelectForCompare?: (
-    event?: React.MouseEvent<HTMLElement, MouseEvent>
-  ) => Promise<void>;
+  onSelectForCompare?: (event?: React.MouseEvent) => Promise<void>;
 
   /**
    * Callback invoked upon clicking to compare a commit against the selected.
@@ -99,9 +97,7 @@ export interface IPastCommitNodeProps {
    *
    * @param event - event object
    */
-  onCompareWithSelected?: (
-    event?: React.MouseEvent<HTMLElement, MouseEvent>
-  ) => Promise<void>;
+  onCompareWithSelected?: (event?: React.MouseEvent) => Promise<void>;
   /**
    * Whether the PastCommitNode is expanded
    */
@@ -159,8 +155,8 @@ export class PastCommitNode extends React.Component<
           !this.props.children && !!this.props.onOpenDiff
             ? singleFileCommitClass
             : this.props.expanded
-            ? commitExpandedClass
-            : null,
+              ? commitExpandedClass
+              : null,
           this.props.isReferenceCommit && referenceCommitNodeClass,
           this.props.isChallengerCommit && challengerCommitNodeClass
         )}
@@ -182,7 +178,7 @@ export class PastCommitNode extends React.Component<
             {this.props.commit.author}
           </span>
           <span className={commitHeaderItemClass}>
-            {+this.props.commit.commit in Git.Diff.SpecialRef
+            {(+this.props.commit.commit) in Git.Diff.SpecialRef
               ? Git.Diff.SpecialRef[+this.props.commit.commit]
               : this.props.commit.commit.slice(0, 7)}
           </span>

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 '@mui/material';
+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

@@ -7,7 +7,8 @@ import {
   refreshIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
-import { Badge, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
+import { Badge } from '@jupyter/react-components';
 import * as React from 'react';
 import { classes } from 'typestyle';
 import { showError } from '../notifications';
@@ -165,8 +166,15 @@ 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
             className={toolbarButtonClass}
@@ -188,10 +196,14 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
         </Badge>
         <Badge
           className={badgeClass}
-          variant="dot"
-          invisible={
-            !hasRemote || (this.props.nCommitsAhead === 0 && hasUpstream)
-          }
+          circular
+          style={{
+            display: `${
+              !hasRemote || (this.props.nCommitsBehind === 0 && hasUpstream)
+                ? 'none'
+                : 'inline-flex'
+            }`
+          }}
         >
           <ActionButton
             className={toolbarButtonClass}

src/utils.ts

@@ -18,9 +18,9 @@ export function extractFilename(path: string): string {
  * @returns Mouse event handler that stops event from propagating
  */
 export function stopPropagationWrapper(
-  fn: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
-): (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void {
-  return (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  fn: (event?: React.MouseEvent) => void
+): (event?: React.MouseEvent) => void {
+  return (event?: React.MouseEvent) => {
     event?.stopPropagation();
     fn(event);
   };