Bump Blueprint; remove obsolete hotfixes, deprecations (#2773)

* Bump minimum Blueprint version

Done to allow compatibility with new React 18 `createRoot`.

* Migrate from deprecated `Tooltip2`, `Popover2`

Done partially so far, with the full migration in a subsequent commit.

* Migrate more components to fix deprecations

* Update test snapshots

* Migrate remaining components to fix deprecations

* Remove deprecated package from `requireProvider`

This would necessitate a corresponding change in modules to ensure they
don't import the deprecated package, or simply just mark it as
non-external.

* Remove `@blueprintjs/popover2` package completely

* Fix format

* Fix format

* Reformat files post-merge

* Bump Blueprint version

* Use BP `Classes` utility instead of raw strings

Prevents regressions when the CSS namespace changes in the meantime
while we still have yet to migrate away fully from the CSS API.

* Fix lint

* Migrate to new notifications API

Removes the old hotfix now that Blueprint supports it.

Author: RichDom2185

package.json

@@ -26,11 +26,10 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.7.0",
-    "@blueprintjs/datetime2": "^2.2.7",
-    "@blueprintjs/icons": "^5.5.0",
-    "@blueprintjs/popover2": "^2.0.0",
-    "@blueprintjs/select": "^5.0.0",
+    "@blueprintjs/core": "^5.10.1",
+    "@blueprintjs/datetime2": "^2.3.3",
+    "@blueprintjs/icons": "^5.9.0",
+    "@blueprintjs/select": "^5.1.3",
     "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",

src/commons/SimpleDropdown.tsx

@@ -1,13 +1,12 @@
-import { Button, Menu, MenuItem } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Button, Menu, MenuItem, Popover } from '@blueprintjs/core';
 
 type OptionType = { value: any; label: string };
 type Props<T extends OptionType> = {
   options: T[];
   selectedValue?: T['value'];
   onClick?: (v: T['value']) => void;
   buttonProps?: Partial<React.ComponentProps<typeof Button> & { 'data-testid': string }>;
-  popoverProps?: Partial<React.ComponentProps<typeof Popover2>>;
+  popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
 };
 
 const SimpleDropdown = <T extends OptionType>({
@@ -27,7 +26,7 @@ const SimpleDropdown = <T extends OptionType>({
   };
 
   return (
-    <Popover2
+    <Popover
       {...popoverProps}
       interactionKind="click"
       content={
@@ -39,7 +38,7 @@ const SimpleDropdown = <T extends OptionType>({
       }
     >
       <Button {...buttonProps}>{buttonLabel()}</Button>
-    </Popover2>
+    </Popover>
   );
 };
 

src/commons/achievement/control/achievementEditor/AchievementSettings.tsx

@@ -1,6 +1,5 @@
-import { Button, Checkbox, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Checkbox, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementItem } from 'src/features/achievement/AchievementTypes';
 
@@ -33,9 +32,9 @@ const AchievementSettings: React.FC<Props> = ({
 
   return (
     <>
-      <Tooltip2 content="More Settings">
+      <Tooltip content="More Settings">
         <Button icon={IconNames.WRENCH} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="More Settings" icon={IconNames.WRENCH} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>

src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSuccessMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 
@@ -16,9 +15,9 @@ const AchievmenetUuidCopier: React.FC<Props> = ({ uuid }) => {
   };
 
   return (
-    <Tooltip2 content={hoverText}>
+    <Tooltip content={hoverText}>
       <Button icon={IconNames.CLIPBOARD} onClick={copy} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 

src/commons/achievement/control/achievementEditor/EditableCard.tsx

@@ -1,6 +1,5 @@
-import { EditableText, NumericInput } from '@blueprintjs/core';
+import { EditableText, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { cloneDeep } from 'lodash';
 import React, { useContext, useMemo, useReducer, useState } from 'react';
 
@@ -225,7 +224,7 @@ const EditableCard: React.FC<Props> = ({
           <EditableText onChange={changeTitle} placeholder="Enter your title here" value={title} />
         </h3>
         <div className="xp">
-          <Tooltip2 content="XP">
+          <Tooltip content="XP">
             <NumericInput
               value={xp}
               min={0}
@@ -234,7 +233,7 @@ const EditableCard: React.FC<Props> = ({
               placeholder="XP"
               onValueChange={changeXp}
             />
-          </Tooltip2>
+          </Tooltip>
         </div>
         <div className="details">
           <EditableDate changeDate={changeRelease} date={release} type="Release" />

src/commons/achievement/control/achievementEditor/EditableDate.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}

src/commons/achievement/control/achievementEditor/EditableView.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementView } from 'src/features/achievement/AchievementTypes';
 
@@ -25,9 +24,9 @@ const EditableView: React.FC<Props> = ({ changeView, view }) => {
 
   return (
     <>
-      <Tooltip2 content="Edit View">
+      <Tooltip content="Edit View">
         <Button icon={IconNames.WIDGET_HEADER} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="Edit View" icon={IconNames.WIDGET_HEADER} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>

src/commons/achievement/control/common/ItemDeleter.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 
@@ -23,9 +22,9 @@ const ItemDeleter: React.FC<Props> = ({ deleteItem, item }) => {
   };
 
   return (
-    <Tooltip2 content="Delete">
+    <Tooltip content="Delete">
       <Button icon={IconNames.TRASH} intent="danger" onClick={confirmDelete} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 

src/commons/achievement/control/common/ItemSaver.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import {
   showSuccessMessage,
@@ -25,13 +24,13 @@ const ItemSaver: React.FC<Props> = ({ discardChanges, saveChanges }) => {
 
   return (
     <>
-      <Tooltip2 content="Save Changes">
+      <Tooltip content="Save Changes">
         <Button icon={IconNames.FLOPPY_DISK} intent="primary" onClick={handleSaveChanges} />
-      </Tooltip2>
+      </Tooltip>
 
-      <Tooltip2 content="Discard Changes">
+      <Tooltip content="Discard Changes">
         <Button icon={IconNames.CROSS} intent="danger" onClick={handleDiscardChanges} />
-      </Tooltip2>
+      </Tooltip>
     </>
   );
 };

src/commons/achievement/control/goalEditor/EditableDate.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}