ui: upgrade to blueprintjs6

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

@@ -127,7 +127,7 @@ export function SubtaskConfigTree() {
     <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`}>
+          <div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
             <Icon icon="clean" />&nbsp;
             <span className={Classes.TREE_NODE_LABEL}>{i18n('Auto configure')}</span>
           </div>
@@ -138,7 +138,7 @@ export function SubtaskConfigTree() {
           className={Classes.TREE_NODE}
           onClick={() => dispatch({ type: 'problemconfig/addSubtask' })}
         >
-          <div className={`${Classes.TREE_NODE_CONTENT} bp5-tree-node-content-0`}>
+          <div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
             <Icon icon="folder-new" />&nbsp;
             <span className={Classes.TREE_NODE_LABEL}>{i18n('Add new subtask')}</span>
           </div>

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

@@ -35,7 +35,7 @@ export default function ProblemType() {
           renderActiveTabPanelOnly
         >
           <span className={Classes.TAB}>{i18n('Problem Type')}</span>
-          <Tabs.Expander />
+          <TabsExpander />
           <Tab
             id="default"
             title={i18n('problem_type.default')}

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

@@ -84,7 +84,7 @@ export function AddTestcase() {
 
   return (<>
     <li className={Classes.TREE_NODE} onClick={auto}>
-      <div className="bp5-tree-node-content bp5-tree-node-content-0">
+      <div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
         <Icon icon="clean" />&nbsp;
         <span className={Classes.TREE_NODE_LABEL}>{i18n('Auto detect')}</span>
       </div>
@@ -99,7 +99,7 @@ export function AddTestcase() {
         setOpen(true);
       }}
     >
-      <div className="bp5-tree-node-content bp5-tree-node-content-0">
+      <div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
         <Icon icon="clean" />&nbsp;
         <span className={Classes.TREE_NODE_LABEL}>{i18n('Add testcase')}</span>
       </div>

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

@@ -1,7 +1,7 @@
 import { CustomSelectAutoComplete } from '@hydrooj/components';
 import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
 import {
-  Button, ControlGroup,
+  Button, Classes, ControlGroup,
   Dialog, DialogBody, DialogFooter,
   Icon, InputGroup, Tag,
 } from '@blueprintjs/core';
@@ -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="bp5-tree-node" onClick={() => setOpen(true)}>
-      <div className="bp5-tree-node-content">
-        <span className="bp5-tree-node-caret-none bp5-icon-standard"></span>
+    <li className={Classes.TREE_NODE} onClick={() => setOpen(true)}>
+      <div className={Classes.TREE_NODE_CONTENT}>
+        <span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp5-tree-node-label${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
+        <span className={`${Classes.TREE_NODE_LABEL}${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
         <Icon icon="comparison" />
         &nbsp;&nbsp;
-        <span className={`bp5-tree-node-label${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
+        <span className={`${Classes.TREE_NODE_LABEL}${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
         <Icon icon="star" />
         {' '}
-        <span className="bp5-tree-node-secondary-label">{score || 0}</span>
+        <span className={Classes.TREE_NODE_SECONDARY_LABEL}>{score || 0}</span>
       </div>
     </li>
-    <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>
+    <li className={Classes.TREE_NODE} onClick={() => setDepsOpen(true)}>
+      <div className={Classes.TREE_NODE_CONTENT}>
+        <span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
         <Icon icon="diagram-tree" />
         &nbsp;&nbsp;
-        <span className="bp5-tree-node-label">{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
+        <span className={Classes.TREE_NODE_LABEL}>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
       </div>
     </li>
-    <li className="bp5-tree-node">
-      <div className="bp5-tree-node-content">
-        <span className="bp5-tree-node-caret-none bp5-icon-standard"></span>
+    <li className={Classes.TREE_NODE}>
+      <div className={Classes.TREE_NODE_CONTENT}>
+        <span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
         <Icon icon="asterisk" />
         &nbsp;&nbsp;
-        <span className="bp5-tree-node-label">{i18n('Scoring method')}</span>
-        <span className="bp5-tree-node-secondary-label">
+        <span className={Classes.TREE_NODE_LABEL}>{i18n('Scoring method')}</span>
+        <span className={Classes.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="bp5-tree-node" onClick={() => setOpen(true)}>
-      <div className="bp5-tree-node-content">
+    <li className="bp6-tree-node" onClick={() => setOpen(true)}>
+      <div className="bp6-tree-node-content">
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp5-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
+        <span className={`bp6-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
         <Icon icon="comparison" />
         {' '}
-        <span className={`bp5-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
+        <span className={`bp6-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
       </div>
     </li>
   </>);

packages/ui-default/components/upload.tsx

@@ -1,7 +1,9 @@
+import { Classes } from '@blueprintjs/core';
+import $ from 'jquery';
 import { Dialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import {
-  delay, i18n, pjax, request,
+  delay, i18n, pjax, request, tpl,
 } from 'vj/utils';
 
 function onBeforeUnload(e) {
@@ -17,15 +19,20 @@ interface UploadOptions {
 }
 export default async function uploadFiles(endpoint = '', files: File[] | FileList = [], options: UploadOptions = {}) {
   const dialog = new Dialog({
-    $body: `
-      <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
-      <div class="bp5-progress-bar bp5-intent-primary bp5-no-stripes">
-        <div class="file-progress bp5-progress-meter" style="width: 0"></div>
+    $body: $(tpl(<>
+      <div className="file-label" style={{
+        textAlign: 'center', marginBottom: '5px', color: 'gray', fontSize: 'small',
+      }}></div>
+      <div className={`${Classes.PROGRESS_BAR} ${Classes.INTENT_PRIMARY} bp5-no-stripes`}>
+        <div className={`file-progress ${Classes.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="bp5-progress-bar bp5-intent-primary bp5-no-stripes">
-        <div class="upload-progress bp5-progress-meter" style="width: 0"></div>
-      </div>`,
+      <div className="upload-label" style={{
+        textAlign: 'center', margin: '5px 0', color: 'gray', fontSize: 'small',
+      }}></div>
+      <div className={`${Classes.PROGRESS_BAR} ${Classes.INTENT_PRIMARY} bp5-no-stripes`}>
+        <div className={`upload-progress ${Classes.PROGRESS_METER}`} style={{ width: 0 }}></div>
+      </div>
+    </>)),
   });
   try {
     Notification.info(i18n('Uploading files...'));
@@ -47,8 +54,8 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
         xhr() {
           const xhr = new XMLHttpRequest();
           xhr.upload.addEventListener('loadstart', () => {
-            $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name}`);
-            $fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}%`);
+            $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name} `);
+            $fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}% `);
             $uploadLabel.text(i18n('Uploading... ({0}%)', 0));
             $uploadProgress.width(0);
           });
@@ -57,7 +64,7 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
               const percentComplete = Math.round((e.loaded / e.total) * 100);
               if (percentComplete === 100) $uploadLabel.text(i18n('Processing...'));
               else $uploadLabel.text(i18n('Uploading... ({0}%)', percentComplete));
-              $uploadProgress.width(`${percentComplete}%`);
+              $uploadProgress.width(`${percentComplete}% `);
             }
           }, false);
           return xhr;
@@ -69,9 +76,9 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
     Notification.success(i18n('File uploaded successfully.'));
     if (options.pjax) {
       let params = '';
-      if (options.type) params += `?d=${options.type}`;
-      if (options.sidebar) params += `${params ? '&' : '?'}sidebar=true`;
-      await pjax.request({ push: false, url: `${endpoint}${params || ''}` });
+      if (options.type) params += `? d = ${options.type} `;
+      if (options.sidebar) params += `${params ? '&' : '?'} sidebar = true`;
+      await pjax.request({ push: false, url: `${endpoint}${params || ''} ` });
     }
   } catch (e) {
     console.error(e);