upgrade deps

packages/ui-default/components/autocomplete/autocomplete.page.styl

@@ -66,7 +66,7 @@
     white-space: nowrap
     text-overflow: ellipsis
 
-  &>span.bp4-icon>svg
+  &>span.bp5-icon>svg
     font-size: 12px
     cursor: pointer
     padding: 4px
@@ -91,19 +91,19 @@
     &>div
       flex-grow: 1
 
-    &>span.bp4-icon>svg
+    &>span.bp5-icon>svg
       color: transparent
 
     &[aria-selected='true']
       background-color: #fafafa
       font-weight: 600
 
-      &>span.bp4-icon>svg
+      &>span.bp5-icon>svg
         color: #1890ff
 
     &[data-focus='true']
       background-color: #e6f7ff
       cursor: pointer
 
-      &>span.bp4-icon>svg
+      &>span.bp5-icon>svg
         color: currentColor

packages/ui-default/components/problemconfig/ProblemConfigTree.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, TreeNode } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import {
+  Button, Classes, Icon, Popover, TreeNode,
+} from '@blueprintjs/core';
 import { normalizeSubtasks, readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
 import { TestCaseConfig } from 'hydrooj';
 import { isEqual } from 'lodash';
@@ -61,12 +62,12 @@ export function SubtaskNode(props: { subtaskId: number }) {
   }
 
   return (
-    <li className="bp4-tree-node bp4-tree-node-expanded">
-      {subtaskId !== -1 && <div className="bp4-tree-node-content" onClick={() => setExpand((e) => !e)}>
+    <li className={`${Classes.TREE_NODE} ${Classes.TREE_NODE_EXPANDED}`}>
+      {subtaskId !== -1 && <div className={Classes.TREE_NODE_CONTENT} onClick={() => setExpand((e) => !e)}>
         <Icon icon={expand ? 'folder-open' : 'folder-close'} />&nbsp;
-        <span className="bp4-tree-node-label">{i18n('Subtask {0}', subtaskId)}</span>
-        <span className="bp4-tree-node-secondary-label" onClick={(ev) => ev.stopPropagation()}>
-          <Popover2
+        <span className={Classes.TREE_NODE_LABEL}>{i18n('Subtask {0}', subtaskId)}</span>
+        <span className={Classes.TREE_NODE_SECONDARY_LABEL} onClick={(ev) => ev.stopPropagation()}>
+          <Popover
             content={<div style={{ padding: 20 }}>
               <b>{i18n('Are you sure you want to delete this subtask?')}</b>
               <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 }}>
@@ -75,10 +76,10 @@ export function SubtaskNode(props: { subtaskId: number }) {
             </div>}
           >
             <Icon icon="trash" />
-          </Popover2>
+          </Popover>
         </span>
       </div>}
-      <ul className="bp4-tree-node-list" ref={drop}>
+      <ul className={Classes.TREE_NODE_LIST} ref={drop}>
         {subtaskId !== -1 && <SubtaskSettings subtaskId={subtaskId} subtaskIds={subtaskIds} time={time} memory={memory} />}
         {expand
           ? <SelectionManager subtaskId={subtaskId} subtaskIds={subtaskIds} />
@@ -91,10 +92,10 @@ export function SubtaskNode(props: { subtaskId: number }) {
             path={[0]}
           />}
         {!cases.length && (
-          <li className="bp4-tree-node">
-            <div className="bp4-tree-node-content">
-              <span className="bp4-tree-node-caret-none bp4-icon-standard"></span>
-              <span className="bp4-tree-node-label text-gray">{subtaskId === -1
+          <li className={Classes.TREE_NODE}>
+            <div className={Classes.TREE_NODE_CONTENT}>
+              <span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
+              <span className={`${Classes.TREE_NODE_LABEL} text-gray`}>{subtaskId === -1
                 ? i18n('No testcase here')
                 : i18n('Drag and drop testcases here:')}</span>
             </div>
@@ -123,23 +124,23 @@ export function SubtaskConfigTree() {
     });
   }
   return (
-    <div className="bp4-tree">
-      <ul className="bp4-tree-node-list bp4-tree-root">
-        <li className="bp4-tree-node" onClick={autoConfigure}>
-          <div className="bp4-tree-node-content bp4-tree-node-content-0">
+    <div className={Classes.TREE}>
+      <ul className={`${Classes.TREE_NODE_LIST} ${Classes.TREE_ROOT}`}>
+        <li className={Classes.TREE_NODE} onClick={autoConfigure}>
+          <div className={`${Classes.TREE_NODE_CONTENT} bp5-tree-node-content-0`}>
             <Icon icon="clean" />&nbsp;
-            <span className="bp4-tree-node-label">{i18n('Auto configure')}</span>
+            <span className={Classes.TREE_NODE_LABEL}>{i18n('Auto configure')}</span>
           </div>
         </li>
         <GlobalSettings />
         {ids.map((id) => <SubtaskNode key={id} subtaskId={id} />)}
         <li
-          className="bp4-tree-node"
+          className={Classes.TREE_NODE}
           onClick={() => dispatch({ type: 'problemconfig/addSubtask' })}
         >
-          <div className="bp4-tree-node-content bp4-tree-node-content-0">
+          <div className={`${Classes.TREE_NODE_CONTENT} bp5-tree-node-content-0`}>
             <Icon icon="folder-new" />&nbsp;
-            <span className="bp4-tree-node-label">{i18n('Add new subtask')}</span>
+            <span className={Classes.TREE_NODE_LABEL}>{i18n('Add new subtask')}</span>
           </div>
         </li>
       </ul>
@@ -155,8 +156,8 @@ export function ProblemConfigTree() {
           <SubtaskConfigTree />
         </div>
         <div className="medium-6 columns">
-          <div className="bp4-tree">
-            <ul className="bp4-tree-node-list bp4-tree-root">
+          <div className={Classes.TREE}>
+            <ul className={`${Classes.TREE_ROOT} ${Classes.TREE_NODE_LIST}`}>
               <AddTestcase />
               <SubtaskNode subtaskId={-1} />
             </ul>

packages/ui-default/components/problemconfig/ProblemType.tsx

@@ -1,5 +1,5 @@
 import {
-  Card, Switch, Tab, Tabs,
+  Card, Classes, Switch, Tab, Tabs,
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -27,7 +27,7 @@ export default function ProblemType() {
           defaultSelectedTabId="default"
           renderActiveTabPanelOnly
         >
-          <span className="bp4-tab">{i18n('Problem Type')}</span>
+          <span className={Classes.TAB}>{i18n('Problem Type')}</span>
           <Tabs.Expander />
           <Tab
             id="default"
@@ -42,7 +42,7 @@ export default function ProblemType() {
                 onChange={dispatcher({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type' })}
                 renderActiveTabPanelOnly
               >
-                <span className="bp4-tab">{i18n('CheckerType')}</span>
+                <span className={Classes.TAB}>{i18n('CheckerType')}</span>
                 <Tabs.Expander />
                 <Tab
                   id="default"

packages/ui-default/components/problemconfig/tree/AddTestcase.tsx

@@ -1,5 +1,5 @@
 import {
-  Button, Dialog, DialogBody, DialogFooter, Icon,
+  Button, Classes, Dialog, DialogBody, DialogFooter, Icon,
 } from '@blueprintjs/core';
 import { readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
 import React, { useEffect, useRef } from 'react';
@@ -83,17 +83,14 @@ export function AddTestcase() {
   }
 
   return (<>
-    <li
-      className="bp4-tree-node"
-      onClick={auto}
-    >
-      <div className="bp4-tree-node-content bp4-tree-node-content-0">
+    <li className={Classes.TREE_NODE} onClick={auto}>
+      <div className="bp5-tree-node-content bp5-tree-node-content-0">
         <Icon icon="clean" />&nbsp;
-        <span className="bp4-tree-node-label">{i18n('Auto detect')}</span>
+        <span className={Classes.TREE_NODE_LABEL}>{i18n('Auto detect')}</span>
       </div>
     </li>
     <li
-      className="bp4-tree-node"
+      className={Classes.TREE_NODE}
       onClick={() => {
         setInput('');
         setOutput('');
@@ -102,9 +99,9 @@ export function AddTestcase() {
         setOpen(true);
       }}
     >
-      <div className="bp4-tree-node-content bp4-tree-node-content-0">
+      <div className="bp5-tree-node-content bp5-tree-node-content-0">
         <Icon icon="clean" />&nbsp;
-        <span className="bp4-tree-node-label">{i18n('Add testcase')}</span>
+        <span className={Classes.TREE_NODE_LABEL}>{i18n('Add testcase')}</span>
       </div>
     </li>
     <Dialog title="Add testcase" icon="cog" isOpen={open} onClose={() => setOpen(false)}>

packages/ui-default/components/problemconfig/tree/SubtaskSettings.tsx

@@ -101,35 +101,35 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
       </DialogBody>
       <DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
     </Dialog>
-    <li className="bp4-tree-node" onClick={() => setOpen(true)}>
-      <div className="bp4-tree-node-content">
-        <span className="bp4-tree-node-caret-none bp4-icon-standard"></span>
+    <li className="bp5-tree-node" onClick={() => setOpen(true)}>
+      <div className="bp5-tree-node-content">
+        <span className="bp5-tree-node-caret-none bp5-icon-standard"></span>
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
+        <span className={`bp5-tree-node-label${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
         <Icon icon="comparison" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
+        <span className={`bp5-tree-node-label${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
         <Icon icon="star" />
         {' '}
-        <span className="bp4-tree-node-secondary-label">{score || 0}</span>
+        <span className="bp5-tree-node-secondary-label">{score || 0}</span>
       </div>
     </li>
-    <li className="bp4-tree-node" onClick={() => setDepsOpen(true)}>
-      <div className="bp4-tree-node-content">
-        <span className="bp4-tree-node-caret-none bp4-icon-standard"></span>
+    <li className="bp5-tree-node" onClick={() => setDepsOpen(true)}>
+      <div className="bp5-tree-node-content">
+        <span className="bp5-tree-node-caret-none bp5-icon-standard"></span>
         <Icon icon="diagram-tree" />
         &nbsp;&nbsp;
-        <span className="bp4-tree-node-label">{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
+        <span className="bp5-tree-node-label">{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
       </div>
     </li>
-    <li className="bp4-tree-node">
-      <div className="bp4-tree-node-content">
-        <span className="bp4-tree-node-caret-none bp4-icon-standard"></span>
+    <li className="bp5-tree-node">
+      <div className="bp5-tree-node-content">
+        <span className="bp5-tree-node-caret-none bp5-icon-standard"></span>
         <Icon icon="asterisk" />
         &nbsp;&nbsp;
-        <span className="bp4-tree-node-label">{i18n('Scoring method')}</span>
-        <span className="bp4-tree-node-secondary-label">
+        <span className="bp5-tree-node-label">{i18n('Scoring method')}</span>
+        <span className="bp5-tree-node-secondary-label">
           <select className="compact select" value={ctype} onChange={(e) => setType(e.target.value)}>
             <option value="min">Min</option>
             <option value="max">Max</option>
@@ -184,14 +184,14 @@ export function GlobalSettings() {
       </DialogBody>
       <DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
     </Dialog>
-    <li className="bp4-tree-node" onClick={() => setOpen(true)}>
-      <div className="bp4-tree-node-content">
+    <li className="bp5-tree-node" onClick={() => setOpen(true)}>
+      <div className="bp5-tree-node-content">
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
+        <span className={`bp5-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
         <Icon icon="comparison" />
         {' '}
-        <span className={`bp4-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
+        <span className={`bp5-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
       </div>
     </li>
   </>);

packages/ui-default/components/problemconfig/tree/Testcase.tsx

@@ -1,5 +1,6 @@
-import { Menu, MenuItem, TreeNode } from '@blueprintjs/core';
-import { ContextMenu2 } from '@blueprintjs/popover2';
+import {
+  ContextMenu, Menu, MenuItem, TreeNode,
+} from '@blueprintjs/core';
 import { TestCaseConfig } from 'hydrooj';
 import { omit } from 'lodash';
 import React from 'react';
@@ -22,7 +23,7 @@ export function TestcaseNode(props: TestcaseNodeProps) {
     c, selected, onClick, subtaskIds, subtaskId,
   } = props;
   return (
-    <ContextMenu2
+    <ContextMenu
       onContextMenu={onClick}
       data-subtaskid={subtaskId}
       data-index={c.input}
@@ -49,7 +50,7 @@ export function TestcaseNode(props: TestcaseNodeProps) {
         label={<>&nbsp;{c.input} / {c.output}</>}
         path={[0]}
       />
-    </ContextMenu2>
+    </ContextMenu>
   );
 }
 

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -1,5 +1,5 @@
 import { Allotment } from 'allotment';
-import AnsiUp from 'ansi_up';
+import { AnsiUp } from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
 import Icon from 'vj/components/react/IconComponent';

packages/ui-default/components/upload.ts

@@ -18,12 +18,12 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
   const dialog = new Dialog({
     $body: `
       <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
-      <div class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
-        <div class="file-progress bp4-progress-meter" style="width: 0"></div>
+      <div class="bp5-progress-bar bp5-intent-primary bp5-no-stripes">
+        <div class="file-progress bp5-progress-meter" style="width: 0"></div>
       </div>
       <div class="upload-label" style="text-align: center; margin: 5px 0; color: gray; font-size: small;"></div>
-      <div class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
-        <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
+      <div class="bp5-progress-bar bp5-intent-primary bp5-no-stripes">
+        <div class="upload-progress bp5-progress-meter" style="width: 0"></div>
       </div>`,
   });
   try {