update to blueprintjs 5.x

src/explorer/Explorer.test.tsx

@@ -226,6 +226,8 @@ describe('tree item', () => {
             const treeItem = explorer.getByRole('treeitem', { name: 'test.file' });
 
             await act(() => user.click(treeItem));
+
+            dispatch.mockClear();
             await act(() => user.keyboard('{Delete}'));
 
             expect(dispatch).toHaveBeenCalledWith(

src/explorer/Explorer.tsx

@@ -7,11 +7,21 @@ import './explorer.scss';
 import {
     Button,
     ButtonGroup,
+    Classes,
     Divider,
     HotkeyConfig,
-    IconName,
     useHotkeys,
 } from '@blueprintjs/core';
+import {
+    Archive,
+    Document,
+    Duplicate,
+    Edit,
+    Export,
+    Import,
+    Plus,
+    Trash,
+} from '@blueprintjs/icons';
 import React, {
     MouseEventHandler,
     useCallback,
@@ -64,7 +74,7 @@ type ActionButtonProps = {
     /** The DOM id for this instance. */
     id: string;
     /** The icon to use for the button. */
-    icon: IconName;
+    icon: JSX.Element;
     /** The tooltip/title text. */
     tooltip: string;
     /** Callback for button click event. */
@@ -134,13 +144,13 @@ const FileActionButtonGroup: React.FunctionComponent<ActionButtonGroupProps> = (
             >
                 <ActionButton
                     id={renameButtonId}
-                    icon="edit"
+                    icon={<Edit />}
                     tooltip={i18n.translate('treeItem.renameTooltip', { fileName })}
                     onClick={() => dispatch(explorerRenameFile(fileName))}
                 />
                 <ActionButton
                     id={duplicateButtonId}
-                    icon="duplicate"
+                    icon={<Duplicate />}
                     tooltip={i18n.translate('treeItem.duplicateTooltip', {
                         fileName,
                     })}
@@ -153,13 +163,13 @@ const FileActionButtonGroup: React.FunctionComponent<ActionButtonGroupProps> = (
                     // and it also matches the direction of the arrow on the
                     // archive icon which is also used to indicate an export/
                     // download operation
-                    icon="import"
+                    icon={<Import />}
                     tooltip={i18n.translate('treeItem.exportTooltip', { fileName })}
                     onClick={() => dispatch(explorerExportFile(fileName))}
                 />
                 <ActionButton
                     id={deleteButtonId}
-                    icon="trash"
+                    icon={<Trash />}
                     tooltip={i18n.translate('treeItem.deleteTooltip', { fileName })}
                     onClick={() =>
                         dispatch(explorerDeleteFile(fileName, item.index as UUID))
@@ -188,7 +198,7 @@ const Header: React.FunctionComponent = () => {
             <ButtonGroup minimal={true}>
                 <ActionButton
                     id={archiveButtonId}
-                    icon="archive"
+                    icon={<Archive />}
                     tooltip={i18n.translate('header.toolbar.exportAll')}
                     onClick={() => dispatch(explorerArchiveAllFiles())}
                 />
@@ -197,13 +207,13 @@ const Header: React.FunctionComponent = () => {
                     // NB: the "export" icon has an arrow pointing up, which is
                     // what we want here since import is analogous to upload
                     // even though this is the "import" action
-                    icon="export"
+                    icon={<Export />}
                     tooltip={i18n.translate('header.toolbar.import')}
                     onClick={() => dispatch(explorerImportFiles())}
                 />
                 <ActionButton
                     id={newButtonId}
-                    icon="plus"
+                    icon={<Plus />}
                     tooltip={i18n.translate('header.toolbar.addNew')}
                     onClick={() => dispatch(explorerCreateNewFile())}
                 />
@@ -322,7 +332,7 @@ const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>>
                 onKeyDown: handleDuplicateKeyDown,
             },
             {
-                combo: 'del',
+                combo: 'delete',
                 label: 'Delete',
                 disabled: !hotKeyActive,
                 preventDefault: true,
@@ -372,7 +382,7 @@ const FileTree: React.FunctionComponent = () => {
                     index,
                     data: {
                         fileName: file.path,
-                        icon: 'document',
+                        icon: <Document className={Classes.TREE_NODE_ICON} />,
                         secondaryLabel: (
                             <TreeItemContext.Consumer>
                                 {(item) => <FileActionButtonGroup item={item} />}

src/explorer/alerts/FileInUseAlert.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -20,7 +21,7 @@ export const fileInUse: CreateToast<{ fileName: string }> = (
     { fileName },
 ) => ({
     message: <FileInUseAlert fileName={fileName} />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/explorer/alerts/NoFilesToBackup.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Icon, Intent } from '@blueprintjs/core';
+import { InfoSign, Plus } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -11,7 +12,7 @@ const NoFilesToBackup: React.FunctionComponent = () => {
     return (
         <>
             {i18n.translate('noFilesToBackup.message', {
-                icon: <Icon icon="plus" />,
+                icon: <Icon icon={<Plus />} />,
             })}
         </>
     );
@@ -19,7 +20,7 @@ const NoFilesToBackup: React.FunctionComponent = () => {
 
 export const noFilesToBackup: CreateToast = (onAction) => ({
     message: <NoFilesToBackup />,
-    icon: 'info-sign',
+    icon: <InfoSign />,
     intent: Intent.PRIMARY,
     onDismiss: () => onAction('dismiss'),
 });

src/explorer/alerts/NoPyFiles.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { InfoSign } from '@blueprintjs/icons';
 import React from 'react';
 import { pythonFileExtension } from '../../pybricksMicropython/lib';
 import type { CreateToast } from '../../toasterTypes';
@@ -21,7 +22,7 @@ const NoPyFiles: React.FunctionComponent = () => {
 
 export const noPyFiles: CreateToast = (onAction) => ({
     message: <NoPyFiles />,
-    icon: 'info-sign',
+    icon: <InfoSign />,
     intent: Intent.PRIMARY,
     onDismiss: () => onAction('dismiss'),
 });

src/explorer/deleteFileAlert/DeleteFileAlert.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Alert, Classes, Intent } from '@blueprintjs/core';
+import { Trash } from '@blueprintjs/icons';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useSelector } from '../../reducers';
@@ -35,7 +36,7 @@ const DeleteFileAlert: React.FunctionComponent = () => {
             canEscapeKeyCancel={true}
             canOutsideClickCancel={true}
             isOpen={isOpen}
-            icon="trash"
+            icon={<Trash />}
             intent={Intent.DANGER}
             confirmButtonText={i18n.translate('action.accept')}
             cancelButtonText={i18n.translate('action.cancel')}

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -10,6 +10,7 @@ import {
     Switch,
     Text,
 } from '@blueprintjs/core';
+import { Plus } from '@blueprintjs/icons';
 import React, { useCallback, useRef, useState } from 'react';
 import { useId } from 'react-aria';
 import { useDispatch } from 'react-redux';
@@ -69,7 +70,7 @@ const NewFileWizard: React.FunctionComponent = () => {
 
     return (
         <Dialog
-            icon="plus"
+            icon={<Plus />}
             title={i18n.translate('title')}
             isOpen={isOpen}
             onOpening={() => setFileName('')}