build(deps): upgrade to blueprintjs@4

Author: aryanshridhar

package.json

@@ -35,9 +35,9 @@
     "forge": "./forge.config.js"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.36.0",
-    "@blueprintjs/popover2": "^0.12.2",
-    "@blueprintjs/select": "^3.15.0",
+    "@blueprintjs/core": "^4.8.0",
+    "@blueprintjs/popover2": "^1.5.1",
+    "@blueprintjs/select": "^4.5.3",
     "@octokit/rest": "^16.43.1",
     "@sentry/electron": "^2.5.3",
     "@vertedinde/fiddle-core": "^1.0.3",

src/less/blueprint.less

@@ -5,46 +5,46 @@
 @import "~@blueprintjs/core/lib/less/variables.less";
 
 // Override some of the colors
-.fiddle.bp3-dark {
-  .bp3-menu,
-  .bp3-popover .bp3-popover-content {
+.fiddle.bp4-dark {
+  .bp4-menu,
+  .bp4-popover2 .bp4-popover2-content {
     background-color: @background-1;
   }
 
-  .bp3-popover .bp3-popover-arrow-fill {
+  .bp4-popover2 .bp4-popover2-arrow-fill {
     fill: @background-1;
   }
 
-  .bp3-button:not([class*="bp3-intent-"]) {
+  .bp4-button:not([class*="bp4-intent-"]) {
     background-color: @background-1;
   }
 
-  .bp3-button.bp3-minimal {
+  .bp4-button.bp4-minimal {
     background-color: unset;
   }
 
-  .bp3-button:hover,
-  .bp3-button.bp3-minimal:hover {
+  .bp4-button:hover,
+  .bp4-button.bp4-minimal:hover {
     background-color: rgba(138, 155, 168, 0.15);
   }
 
-  .bp3-menu-item.bp3-active.bp3-intent-primary {
+  .bp4-menu-item.bp4-active.bp4-intent-primary {
     background-color: @foreground-3;
   }
 
-  .bp3-dialog {
+  .bp4-dialog {
     background-color: @background-4;
 
-    .bp3-dialog-header {
+    .bp4-dialog-header {
       background-color: @background-3;
     }
   }
 
-  .bp3-running-text {
+  .bp4-running-text {
     font-size: 14px;
   }
 
-  .bp3-alert-contents {
+  .bp4-alert-contents {
     width: 100%;
   }
 }

src/less/components/commands.less

@@ -10,8 +10,8 @@ header {
   display: flex;
   width: 100%;
 
-  .bp3-popover-target {
-    width: 100%;
+  .bp4-popover2-target {
+    width: 10%;
   }
 }
 
@@ -58,13 +58,13 @@ header {
     &:last-of-type {
       margin-right: 10px;
 
-      .bp3-button-group {
+      .bp4-button-group {
         margin-left: 5px;
       }
     }
   }
 
-  .bp3-control-group {
+  .bp4-control-group {
     margin-right: 0.5rem;
   }
 

src/less/components/dialogs.less

@@ -178,11 +178,15 @@
 }
 
 .dialog-add-version {
-  .bp3-file-input {
+  .dialog-bisect-popover .bp4-button-group {
+    display: block;
+  }
+
+  .bp4-file-input {
     width: 100%;
   }
 
-  .bp3-callout {
+  .bp4-callout {
     margin-top: 1rem;
   }
 }

src/less/components/settings.less

@@ -35,18 +35,18 @@
     width: 250px;
   }
 
- .bp3-input-group {
+ .bp4-input-group {
     margin-bottom: 15px;
   }
 
-  .bp3-divider {
+  .bp4-divider {
     margin-top: 1rem;
     margin-bottom: 1rem;
     margin-left: 0;
     margin-right: 0;
   }
 
-  .bp3-callout {
+  .bp4-callout {
     max-width: 850px;
   }
 
@@ -55,6 +55,10 @@
 
     .action {
       text-align: right;
+
+      .bp4-popover2-target {
+        display: block;
+      }
     }
   }
 
@@ -85,10 +89,6 @@
       }
     }
 
-    .bp3-popover-target {
-      display: inherit;
-    }
-
     .disabled-version {
       width: 100%;
     }

src/less/components/show-me.less

@@ -6,7 +6,7 @@
     margin-top: 0;
   };
 
-  .bp3-callout {
+  .bp4-callout {
     margin-bottom: 10px;
   }
 }

src/less/components/sidebar.less

@@ -5,15 +5,15 @@
   font-size: 14px;
 }
 
-.add-file-input .bp3-tree-node-label {
+.add-file-input .bp4-tree-node-label {
   overflow: visible;
 }
 
-.bp3-tree-node-caret-none {
+.bp4-tree-node-caret-none {
   min-width: 8px;
 }
 
-.bp3-tree-node-content-1 {
+.bp4-tree-node-content-1 {
   padding-left: 0;
 }
 
@@ -28,13 +28,13 @@
 }
 
 .package-tree {
-  .bp3-tree-node-content {
-    .bp3-tree-node-secondary-label {
+  .bp4-tree-node-content {
+    .bp4-tree-node-secondary-label {
       min-width: 100px;
     }
   }
 
-  .bp3-tree-node-list {
+  .bp4-tree-node-list {
     margin: 5px 0;
   }
 }
@@ -46,7 +46,7 @@
   background: @background-1;
   color: @dark-gray1;
 
-  .bp3-dark & {
+  .bp4-dark & {
     color: @white;
   }
 }

src/less/components/version-select.less

@@ -1,4 +1,4 @@
-.bp3-fill {
+.bp4-fill {
   .version-chooser  {
     width: 100%;
   }

src/renderer/app.tsx

@@ -221,9 +221,9 @@ export class App {
     }
 
     if (theme.isDark || theme.name.includes('dark')) {
-      document.body.classList.add('bp3-dark');
+      document.body.classList.add('bp4-dark');
     } else {
-      document.body.classList.remove('bp3-dark');
+      document.body.classList.remove('bp4-dark');
     }
   }
 

src/renderer/components/commands-action-button.tsx

@@ -5,11 +5,10 @@ import {
   ButtonGroup,
   IToastProps,
   Menu,
-  MenuItem,
-  Popover,
   Position,
   Toaster,
 } from '@blueprintjs/core';
+import { MenuItem2, Popover2 } from '@blueprintjs/popover2';
 import { clipboard } from 'electron';
 import { when } from 'mobx';
 import { observer } from 'mobx-react';
@@ -395,17 +394,17 @@ export const GistActionButton = observer(
 
       const menu = (
         <Menu>
-          <MenuItem
+          <MenuItem2
             text="Publish"
             active={actionType === GistActionType.publish}
             onClick={() => this.setActionType(GistActionType.publish)}
           />
-          <MenuItem
+          <MenuItem2
             text="Update"
             active={actionType === GistActionType.update}
             onClick={() => this.setActionType(GistActionType.update)}
           />
-          <MenuItem
+          <MenuItem2
             text="Delete"
             active={actionType === GistActionType.delete}
             onClick={() => this.setActionType(GistActionType.delete)}
@@ -414,9 +413,9 @@ export const GistActionButton = observer(
       );
 
       return (
-        <Popover content={menu} position={Position.BOTTOM}>
+        <Popover2 content={menu} placement={Position.BOTTOM}>
           <Button icon="wrench" />
-        </Popover>
+        </Popover2>
       );
     };
 
@@ -431,13 +430,13 @@ export const GistActionButton = observer(
       const privacyIcon = gitHubPublishAsPublic ? 'unlock' : 'lock';
       const privacyMenu = (
         <Menu>
-          <MenuItem
+          <MenuItem2
             text="Private"
             icon="lock"
             active={!gitHubPublishAsPublic}
             onClick={this.setPrivate}
           />
-          <MenuItem
+          <MenuItem2
             text="Public"
             icon="unlock"
             active={gitHubPublishAsPublic}
@@ -447,9 +446,9 @@ export const GistActionButton = observer(
       );
 
       return (
-        <Popover content={privacyMenu} position={Position.BOTTOM}>
+        <Popover2 content={privacyMenu} placement={Position.BOTTOM}>
           <Button icon={privacyIcon} />
-        </Popover>
+        </Popover2>
       );
     };
 

src/renderer/components/dialog-add-theme.tsx

@@ -148,16 +148,16 @@ export const AddThemeDialog = observer(
           title="Add theme"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className="bp4-dialog-body">
             <FileInput
               onInputChange={this.onChangeFile}
               inputProps={inputProps as any}
               text={text}
             />
             <br />
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );

src/renderer/components/dialog-add-version.tsx

@@ -215,7 +215,7 @@ export const AddVersionDialog = observer(
           title="Add local Electron build"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className="bp4-dialog-body">
             <FileInput
               id="custom-electron-version"
               inputProps={inputProps as any}
@@ -224,8 +224,8 @@ export const AddVersionDialog = observer(
             <br />
             {this.renderPath()}
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );

src/renderer/components/dialog-bisect.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Button, ButtonGroup, Callout, Dialog, Label } from '@blueprintjs/core';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
 
 import { RunnableVersion } from '../../interfaces';
@@ -197,6 +198,7 @@ export const BisectDialog = observer(
     public render() {
       const { isBisectDialogShowing } = this.props.appState;
       const { startIndex, endIndex, allVersions } = this.state;
+      const className = classnames('bp4-dialog-body', 'dialog-bisect-popover');
 
       return (
         <Dialog
@@ -205,7 +207,7 @@ export const BisectDialog = observer(
           title="Start a bisect session"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className={className}>
             {this.help}
             <Label>
               Earliest Version (Last &quot;known good&quot; version)
@@ -230,8 +232,8 @@ export const BisectDialog = observer(
               </ButtonGroup>
             </Label>
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );