update changelog

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

@@ -1,9 +1,10 @@
 import {
-  Button, ControlGroup, Dialog, DialogBody, DialogFooter, Icon, InputGroup,
+  Button, Dialog, DialogBody, DialogFooter, Icon,
 } from '@blueprintjs/core';
 import { readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useSelector, useStore } from 'react-redux';
+import FileSelectAutoComplete from '../../autocomplete/components/FileSelectAutoComplete';
 import { RootState } from '../reducer';
 
 export function AddTestcase() {
@@ -13,9 +14,28 @@ export function AddTestcase() {
   const [valid, setValid] = React.useState(false);
   const testdata = useSelector((state: RootState) => state.testdata);
   const store = useStore<RootState>();
+  const refInput = useRef();
+  const refOutput = useRef();
 
   useEffect(() => {
     setValid(testdata.find((i) => i.name === input) && testdata.find((i) => i.name === output));
+    if (input && !output) {
+      const filename = input.substring(0, input.lastIndexOf('.'));
+      let outputFile = '';
+      if (testdata.find((i) => i.name === `${filename}.out`)) outputFile = `${filename}.out`;
+      else if (testdata.find((i) => i.name === `${filename}.ans`)) outputFile = `${filename}.ans`;
+      // @ts-ignore
+      refOutput.current!.setSelectedItems([outputFile]);
+      setOutput(outputFile);
+    }
+    if (output && !input) {
+      const filename = output.substring(0, output.lastIndexOf('.'));
+      if (testdata.find((i) => i.name === `${filename}.in`)) {
+        // @ts-ignore
+        refInput.current!.setSelectedItems([`${filename}.in`]);
+        setInput(`${filename}.in`);
+      }
+    }
   }, [input, output]);
 
   function onConfirm() {
@@ -57,32 +77,52 @@ export function AddTestcase() {
     </li>
     <li
       className="bp4-tree-node"
-      onClick={() => setOpen(true)}
+      onClick={() => {
+        setInput('');
+        setOutput('');
+        setOpen(true);
+      }}
     >
       <div className="bp4-tree-node-content bp4-tree-node-content-0">
         <Icon icon="clean" />&nbsp;
         <span className="bp4-tree-node-label">Add testcase</span>
       </div>
     </li>
-    <Dialog title="Add testcasse" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
+    <Dialog title="Add testcase" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
       <DialogBody>
-        <ControlGroup fill={true} vertical={false}>
-          {/* TODO: autocomplete */}
-          <InputGroup
-            leftElement={<Icon icon="import" />}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Input"
-            value={input || ''}
-          />
-          <InputGroup
-            leftElement={<Icon icon="export" />}
-            onChange={(e) => setOutput(e.target.value)}
-            placeholder="Output"
-            value={output || ''}
-          />
-        </ControlGroup>
+        <div className="row">
+          <div className="columns medium-6">
+            <FileSelectAutoComplete
+              ref={refInput}
+              data={testdata}
+              label="Input"
+              width="100%"
+              onChange={(e) => setInput(e)}
+              placeholder="Input"
+              value={input || ''}
+            />
+          </div>
+          <div className="columns medium-6">
+            <FileSelectAutoComplete
+              ref={refOutput}
+              data={testdata}
+              label="Output"
+              width="100%"
+              onChange={(e) => setOutput(e)}
+              placeholder="Output"
+              value={input || ''}
+            />
+          </div>
+        </div>
       </DialogBody>
-      <DialogFooter actions={<Button onClick={onConfirm} disabled={!valid} intent="primary" text="Save" />} />
+      <DialogFooter actions={
+        <Button
+          className={`primary rounded button${valid ? '' : ' disabled'}`}
+          onClick={onConfirm}
+          disabled={!valid}
+          intent="primary"
+          text="Save"
+        />} />
     </Dialog>
   </>);
 }

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

@@ -65,7 +65,7 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
           />
         </ControlGroup>
       </DialogBody>
-      <DialogFooter actions={<Button onClick={onConfirm} intent="primary" text="Save" />} />
+      <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">
@@ -123,7 +123,7 @@ export function GlobalSettings() {
           />
         </ControlGroup>
       </DialogBody>
-      <DialogFooter actions={<Button onClick={onConfirm} intent="primary" text="Save" />} />
+      <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">

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.48.0",
+  "version": "4.48.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "index.ts",

packages/ui-default/pages/problem_config.page.styl

@@ -15,6 +15,37 @@
   .bp4-tab-panel
     margin-top: 5px
 
+  .bp4-dialog
+    font-family: var(--code-font-family)
+    background: #fff
+
+    .autocomplete-container
+      font-size: 0.875rem
+      color: #666
+
+    .bp4-dialog-footer-fixed
+      border-top: 0
+
+      .button
+        margin: 0
+
+  .bp4-input-group
+    input
+      appearance: none
+      display: block
+      width: 100%
+      font-size: 0.875rem
+      height: 2.1875rem
+      line-height: 1.2
+      padding: 0.3125rem;
+      border: 1px solid #ddd
+      color: inherit
+      border-radius: 0
+      outline: 2px solid transparent
+      transition: outline-color 0.2s, border-color 0.2s
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
+      box-shadow: none
+
   .problem-config-form
     font-family: var(--code-font-family)
   
@@ -27,24 +58,6 @@
       background: transparent
     .bp4-input-action
       pointer-events: none
-    .bp4-input-group
-      input
-        appearance: none
-        display: block
-        width: 100%
-        font-size: 0.875rem
-        height: 2.1875rem
-        line-height: 1.2
-        padding: 0.3125rem;
-        border: 1px solid #ddd
-        color: inherit
-        border-radius: 0
-        background-color: transparent
-        outline: 2px solid transparent
-        transition: outline-color 0.2s, border-color 0.2s
-        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
-        box-shadow: none
-      
 
     .data-table
       tr

packages/ui-default/theme/dark.styl

@@ -390,3 +390,15 @@ $hover-background-color = #424242
     .omnibar-content-section
       background-color: $main-background-color !important
       border-color: #3d3d3d !important
+
+  .bp4-tab
+    color: #aaa
+
+    &[aria-disabled=true]
+      color: #555
+  
+  .bp4-card,.bp4-dialog,.bp4-dialog-header,.bp4-dialog-footer
+    background-color: #1f1f1f !important
+  
+  .bp4-input-group input
+    border-color: #3d3d3d!important