ui: drop blueprintjs 6 (#1073)

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

@@ -1,10 +1,6 @@
 import { CustomSelectAutoComplete } from '@hydrooj/components';
 import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
-import {
-  Button, Classes, ControlGroup,
-  Dialog, DialogBody, DialogFooter,
-  Icon, InputGroup, Tag,
-} from '@blueprintjs/core';
+import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
 import { isEqual } from 'lodash';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -61,83 +57,71 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
   }
 
   return (<>
-    <Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
-      <DialogBody>
-        <ControlGroup fill={true} vertical={false}>
-          <InputGroup
-            leftElement={<Icon icon="time" />}
-            rightElement={<Tag minimal>ms</Tag>}
-            onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
-            placeholder={parseTimeMS(props.time, false).toString() || '1000'}
-            value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
-          />
-          <InputGroup
-            leftElement={<Icon icon="comparison" />}
-            rightElement={<Tag minimal>MB</Tag>}
-            onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
-            placeholder={parseMemoryMB(props.memory, false).toString() || '256'}
-            value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
-          />
-          <InputGroup
-            leftElement={<Icon icon="star" />}
-            onChange={(ev) => setScore(+ev.target.value || 0)}
-            placeholder="Score"
-            type="number"
-            value={cscore.toString()}
-          />
-        </ControlGroup>
-      </DialogBody>
-      <DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
-    </Dialog>
-    <Dialog title={i18n('Set dependencies')} icon="cog" isOpen={depsOpen} onClose={() => setDepsOpen(false)}>
-      <DialogBody>
-        <CustomSelectAutoComplete
-          data={subtaskIds.map((i) => ({ _id: i, name: `${i18n('Subtask {0}', i)}` }))}
-          setSelectItems={cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i)}
-          onChange={(items) => setDeps(items)}
-          placeholder="dependencies"
-          multi
+    <Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
+      <Group grow>
+        <TextInput
+          leftSection={<i className="icon icon-stopwatch" />}
+          rightSection={<Text size="sm">ms</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
+          placeholder={parseTimeMS(props.time, false).toString() || '1000'}
+          value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
         />
-      </DialogBody>
-      <DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
-    </Dialog>
-    <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={`${Classes.TREE_NODE_LABEL}${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
-        <Icon icon="comparison" />
-        &nbsp;&nbsp;
-        <span className={`${Classes.TREE_NODE_LABEL}${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
-        <Icon icon="star" />
-        {' '}
-        <span className={Classes.TREE_NODE_SECONDARY_LABEL}>{score || 0}</span>
+        <TextInput
+          leftSection={<i className="icon icon-comparison" />}
+          rightSection={<Text size="sm">MB</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
+          placeholder={parseMemoryMB(props.memory, false).toString() || '256'}
+          value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
+        />
+        <TextInput
+          leftSection={<i className="icon icon-star" />}
+          onChange={(ev) => setScore(+ev.target.value || 0)}
+          placeholder="Score"
+          type="number"
+          value={cscore.toString()}
+        />
+      </Group>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
       </div>
-    </li>
-    <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={Classes.TREE_NODE_LABEL}>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
+    </Modal>
+    <Modal opened={depsOpen} onClose={() => setDepsOpen(false)} title={i18n('Set dependencies')}>
+      <CustomSelectAutoComplete
+        data={subtaskIds.map((i) => ({ _id: i, name: `${i18n('Subtask {0}', i)}` }))}
+        setSelectItems={cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i)}
+        onChange={(items) => setDeps(items)}
+        placeholder="dependencies"
+        multi
+      />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
       </div>
-    </li>
-    <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={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>
-            <option value="sum">Sum</option>
-          </select>
-        </span>
-      </div>
-    </li>
+    </Modal>
+    <div style={{ paddingLeft: 22, display: 'flex', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
+      <Text><i className="icon icon-stopwatch" /></Text>
+      <Text className={time ? '' : 'text-gray'}>{time || props.time || '1s'}&nbsp;&nbsp;</Text>
+      <Text><i className="icon icon-comparison" /></Text>
+      <Text className={memory ? '' : 'text-gray'}>{memory || props.memory || '256m'}&nbsp;&nbsp;</Text>
+      <Text><i className="icon icon-star" /></Text>
+      <Text>{score || 0}</Text>
+    </div>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setDepsOpen(true)}>
+      <Text><i className="icon icon-diagram-tree" /></Text>
+      <Text>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</Text>
+    </div>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', gap: 8 }}>
+      <i className="icon icon-asterisk" />
+      <Text>{i18n('Scoring method')}</Text>
+      <span style={{ marginLeft: 'auto' }}>
+        <select className="compact select" value={ctype} onChange={(e) => setType(e.target.value)}>
+          <option value="min">Min</option>
+          <option value="max">Max</option>
+          <option value="sum">Sum</option>
+        </select>
+      </span>
+    </div>
   </>);
 }
 
@@ -163,36 +147,34 @@ export function GlobalSettings() {
     setOpen(false);
   }
   return (<>
-    <Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
-      <DialogBody>
-        <ControlGroup fill={true} vertical={false}>
-          <InputGroup
-            leftElement={<Icon icon="time" />}
-            rightElement={<Tag minimal>ms</Tag>}
-            onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
-            placeholder="1000"
-            value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
-          />
-          <InputGroup
-            leftElement={<Icon icon="comparison" />}
-            rightElement={<Tag minimal>MB</Tag>}
-            onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
-            placeholder="256"
-            value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
-          />
-        </ControlGroup>
-      </DialogBody>
-      <DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
-    </Dialog>
-    <li className="bp6-tree-node" onClick={() => setOpen(true)}>
-      <div className="bp6-tree-node-content">
-        <Icon icon="time" />
-        &nbsp;&nbsp;
-        <span className={`bp6-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
-        <Icon icon="comparison" />
-        {' '}
-        <span className={`bp6-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
+    <Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
+      <Group grow>
+        <TextInput
+          leftSection={<i className="icon icon-stopwatch" />}
+          rightSection={<Text size="sm">ms</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
+          placeholder="1000"
+          value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
+        />
+        <TextInput
+          leftSection={<i className="icon icon-comparison" />}
+          rightSection={<Text size="sm">MB</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
+          placeholder="256"
+          value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
+        />
+      </Group>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
       </div>
-    </li>
+    </Modal>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
+      <i className="icon icon-stopwatch" />
+      <Text className={time ? '' : 'text-gray'}>{time || '1s'}</Text>
+      <i className="icon icon-comparison" />
+      <Text className={memory ? '' : 'text-gray'}>{memory || '256MB'}</Text>
+    </div>
   </>);
 }