@shzlx/ui-default 4.58.2

package/components/problemconfig/ProblemConfigEditor.tsx

@@ -0,0 +1,170 @@
+import type { ProblemConfigFile, TestCaseConfig } from 'hydrooj/src/interface';
+import { diffLines } from 'diff';
+import $ from 'jquery';
+import yaml from 'js-yaml';
+import { isEqual } from 'lodash';
+import type { editor } from 'monaco-editor';
+import React from 'react';
+import { connect } from 'react-redux';
+import Editor from 'vj/components/editor';
+import { load } from 'vj/components/monaco/loader';
+
+const mapStateToProps = (state) => ({
+  config: state.config,
+});
+const mapDispatchToProps = (dispatch) => ({
+  handleUpdateCode: (code) => {
+    dispatch({
+      type: 'CONFIG_CODE_UPDATE',
+      payload: code,
+    });
+  },
+});
+
+interface Props {
+  config: any;
+  handleUpdateCode: (val: string) => void;
+}
+
+const configKey = [
+  'type', 'subType', 'target', 'score', 'time',
+  'memory', 'filename', 'checker_type', 'checker', 'interactor',
+  'manager', 'num_processes', 'multi_pass', 'validator', 'user_extra_files',
+  'judge_extra_files', 'detail', 'outputs', 'redirect', 'cases',
+  'subtasks', 'langs', 'key', 'time_limit_rate', 'memory_limit_rate',
+];
+
+const subtasksKey = [
+  'time', 'memory', 'score', 'if', 'id',
+  'type', 'cases',
+];
+
+const casesKey = ['time', 'memory', 'input', 'output'];
+
+export function configYamlFormat(config: ProblemConfigFile) {
+  const formatConfig: ProblemConfigFile = {};
+  configKey.forEach((key) => {
+    if (config[key] !== undefined) {
+      if (key === 'subType' && ['single', 'multi'].includes(config[key]) && config.type !== 'submit_answer') return;
+      if (key === 'checker_type' && config.type !== 'default') return;
+      if (key === 'checker'
+        && (['default', 'strict'].includes(formatConfig.checker_type) || !formatConfig.checker_type)) return;
+      if (key === 'interactor' && config.type !== 'interactive') return;
+      if (key === 'multi_pass' && (!Number.isInteger(config.multi_pass) || config.multi_pass <= 1 || config.multi_pass > 20)) return;
+      if (key === 'subtasks') {
+        formatConfig[key] = [];
+        config[key].forEach((subtask) => {
+          const formatSubtask: object = {};
+          subtasksKey.forEach((subtaskKey) => {
+            if (subtask && subtask[subtaskKey] !== undefined) {
+              formatSubtask[subtaskKey] = subtask[subtaskKey];
+            }
+          });
+          formatConfig[key].push(formatSubtask);
+        });
+      } else if (key === 'cases') {
+        formatConfig[key] = [];
+        config[key].forEach((caseItem) => {
+          const formatCase: TestCaseConfig = {
+            time: '1000ms', memory: '256MB', input: '', output: '',
+          };
+          casesKey.forEach((caseKey) => {
+            if (caseItem[caseKey] !== undefined) formatCase[caseKey] = caseItem[caseKey];
+            else delete formatCase[caseKey];
+          });
+          formatConfig[key].push(formatCase);
+        });
+      } else formatConfig[key] = config[key];
+    }
+  });
+  if (formatConfig.type === 'objective') {
+    Object.keys(formatConfig).filter((i) => !['type', 'answers'].includes(i)).forEach((i) => delete formatConfig[i]);
+    formatConfig.answers = config.answers || {};
+  }
+  Object.keys(formatConfig).filter((i) => i.startsWith('__')).forEach((i) => delete formatConfig[i]);
+  return formatConfig;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent<Props> {
+  disposable = [];
+  containerElement: HTMLElement;
+  __preventUpdate = false;
+  __preventFormat = false;
+
+  editor: editor.IStandaloneCodeEditor;
+  model: editor.ITextModel;
+  vjEditor: Editor;
+
+  async componentDidMount() {
+    const { monaco } = await load(['yaml']);
+    const uri = monaco.Uri.parse('hydro://problem/file/config.yaml');
+    this.model = monaco.editor.createModel(yaml.dump(configYamlFormat(this.props.config), { noArrayIndent: true }), 'yaml', uri);
+    this.vjEditor = Editor.getOrConstruct($(this.containerElement), {
+      language: 'yaml',
+      model: this.model,
+      lineNumbers: 'off',
+      onChange: (value: string) => {
+        this.__preventUpdate = true;
+        if (!this.__preventFormat) this.props.handleUpdateCode(value);
+        this.__preventUpdate = false;
+      },
+    }) as Editor;
+    this.editor = this.vjEditor.editor;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.__preventUpdate || !this.model || !this.props.config.__valid) return;
+    if (yaml.dump(prevProps.config, { noArrayIndent: true }) === yaml.dump(this.props.config, { noArrayIndent: true })) return;
+    const curValue = this.model.getValue();
+    const pending = configYamlFormat(this.props.config);
+    try {
+      const curConfig = yaml.load(curValue);
+      if (isEqual(curConfig, pending)) return;
+    } catch { }
+    this.__preventFormat = true;
+    const diff = diffLines(curValue, yaml.dump(pending, { noArrayIndent: true }));
+    const ops = [];
+    let cursor = 1;
+    for (const line of diff) {
+      if (line.added) {
+        let range = this.model.getFullModelRange();
+        range = range.setStartPosition(cursor, 0);
+        range = range.setEndPosition(cursor, 0);
+        ops.push({ range, text: line.value });
+      } else if (line.removed) {
+        let range = this.model.getFullModelRange();
+        range = range.setStartPosition(cursor, 0);
+        cursor += line.count;
+        range = range.setEndPosition(cursor, 0);
+        ops.push({ range, text: '' });
+      } else cursor += line.count;
+    }
+    this.model.pushEditOperations([], ops, undefined);
+    this.__preventFormat = false;
+  }
+
+  componentWillUnmount() {
+    if (this.vjEditor) this.vjEditor.destroy();
+    if (this.model) this.model.dispose();
+    if (this.editor) this.editor.dispose();
+    this.disposable.map((i) => i.dispose());
+  }
+
+  assignRef = (component) => {
+    this.containerElement = component;
+  };
+
+  render() {
+    return (
+      <div
+        ref={this.assignRef}
+        style={{
+          minHeight: '500px',
+          height: '100%',
+          width: '100%',
+        }}
+        className="ConfigMonacoEditor"
+      />
+    );
+  }
+});

package/components/problemconfig/ProblemConfigForm.tsx

@@ -0,0 +1,140 @@
+import { Card, Switch, Text, TextInput } from '@mantine/core';
+import { isEqual } from 'lodash';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
+import LanguageSelectAutoComplete from '../autocomplete/components/LanguageSelectAutoComplete';
+import { FormItem } from './BasicForm';
+import ProblemType from './ProblemType';
+import type { RootState } from './reducer/index';
+
+function FileIOConfig() {
+  const filename = useSelector((state: RootState) => state.config.filename);
+  const dispatch = useDispatch();
+  return (
+    <FormItem columns={6} label="FileIOConfig" disableLabel>
+      <Card withBorder style={{ padding: 10, overflow: 'visible' }}>
+        <div className="row">
+          <FormItem columns={12} label="FileIO">
+            <TextInput
+              rightSection={<Text size="sm">.in/.out</Text>}
+              rightSectionWidth={100}
+              rightSectionPointerEvents="none"
+              value={filename || ''}
+              onChange={(ev) => {
+                dispatch({ type: 'problemconfig/updateFileIO', filename: ev.currentTarget.value });
+              }}
+              style={{ width: '100%' }}
+            />
+          </FormItem>
+        </div>
+      </Card>
+    </FormItem>
+  );
+}
+
+function MultiPassConfig() {
+  const multiPass = useSelector((state: RootState) => state.config.multi_pass);
+  const dispatch = useDispatch();
+  const [enabled, setEnabled] = useState(multiPass > 1);
+  return (
+    <FormItem columns={6} label="Multi-pass" disableLabel>
+      <Card withBorder style={{ padding: 10, overflow: 'visible' }}>
+        <div className="row">
+          <FormItem columns={6} label="Multi Pass">
+            <Switch
+              styles={{ body: { display: 'flex', height: '36px', alignItems: 'center' } }}
+              checked={enabled}
+              label={i18n('Enabled')}
+              onChange={() => {
+                setEnabled(!enabled);
+                dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'multi_pass', value: enabled ? 0 : 2 });
+              }}
+            />
+          </FormItem>
+          {enabled && (
+            <FormItem columns={6} label={i18n('Max Passes')}>
+              <TextInput
+                type="number"
+                min={2}
+                max={10}
+                value={multiPass}
+                onChange={(ev) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'multi_pass', value: +ev.currentTarget.value })}
+              />
+            </FormItem>
+          )}
+        </div>
+      </Card>
+    </FormItem>
+  );
+}
+
+function ExtraFilesConfig() {
+  const Files = useSelector((state: RootState) => state.testdata);
+  const userExtraFiles = useSelector((state: RootState) => state.config.user_extra_files || [], isEqual);
+  const judgeExtraFiles = useSelector((state: RootState) => state.config.judge_extra_files || [], isEqual);
+  const dispatch = useDispatch();
+  return (
+    <FormItem columns={12} label="ExtraFilesConfig" disableLabel>
+      <Card withBorder style={{ padding: 10, overflow: 'visible' }}>
+        <div className="row">
+          <FormItem columns={12} label={i18n('user_extra_files')}>
+            <FileSelectAutoComplete
+              data={Files}
+              selectedKeys={userExtraFiles}
+              onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'user_extra_files', value: val.split(',') })}
+              multi
+            />
+          </FormItem>
+          <FormItem columns={12} label={i18n('judge_extra_files')}>
+            <FileSelectAutoComplete
+              data={Files}
+              selectedKeys={judgeExtraFiles}
+              onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'judge_extra_files', value: val.split(',') })}
+              multi
+            />
+          </FormItem>
+        </div>
+      </Card>
+    </FormItem>
+  );
+}
+
+function LangConfig() {
+  const langs = useSelector((state: RootState) => state.config.langs) || [];
+  const dispatch = useDispatch();
+  return (
+    <FormItem columns={12} label="langs" disableLabel>
+      <Card withBorder style={{ padding: 10, overflow: 'visible' }}>
+        <div className="row">
+          <FormItem columns={12} label="langs">
+            <LanguageSelectAutoComplete
+              placeholder={!langs.length ? i18n('Unlimited') : i18n('Code language')}
+              selectedKeys={langs}
+              onChange={(value) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'langs', value: value.split(',') })}
+              multi
+            />
+          </FormItem>
+        </div>
+      </Card>
+    </FormItem>
+  );
+}
+
+export default function ProblemConfigForm() {
+  const Type = useSelector((state: RootState) => state.config.type);
+  return (
+    <div className="row problem-config-form">
+      <ProblemType />
+      {Type === 'default' && <FileIOConfig />}
+      {['default', 'interactive'].includes(Type) && <MultiPassConfig />}
+      {!['submit_answer', 'objective'].includes(Type) && (
+        <>
+          <ExtraFilesConfig />
+          <LangConfig />
+        </>
+      )}
+    </div>
+  );
+}

package/components/problemconfig/ProblemConfigTree.tsx

@@ -0,0 +1,163 @@
+import { normalizeSubtasks, readSubtasksFromFiles } from '@hydrooj/common';
+import { TestCaseConfig } from 'hydrooj';
+import { Button, Text, Tree } from '@mantine/core';
+import { isEqual } from 'lodash';
+import React from 'react';
+import { DndProvider, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import { confirm } from 'vj/components/dialog/index';
+import { i18n } from 'vj/utils';
+import { RootState } from './reducer';
+import { AddTestcase } from './tree/AddTestcase';
+import { SelectionManager } from './tree/SelectionManager';
+import { GlobalSettings, SubtaskSettings } from './tree/SubtaskSettings';
+
+interface TestcasesDndItem {
+  cases: TestCaseConfig[];
+  subtaskId: number;
+}
+
+export function SubtaskNode(props: { subtaskId: number }) {
+  const { subtaskId } = props;
+  const subtaskIds = useSelector((s: RootState) => Object.values(s.config?.subtasks || []).map((i) => i.id), isEqual);
+  const cases = useSelector((state: RootState) => (subtaskId === -1
+    ? state.config.__cases
+    : state.config.subtasks.find((i) => i.id === subtaskId).cases || []));
+  const time = useSelector((s: RootState) => s.config?.time);
+  const memory = useSelector((s: RootState) => s.config?.memory);
+  const dispatch = useDispatch();
+  const [expand, setExpand] = React.useState(true);
+  const [, drop] = useDrop<TestcasesDndItem>(() => ({
+    accept: 'cases',
+    canDrop(item) {
+      return item.subtaskId !== subtaskId;
+    },
+    drop(item) {
+      dispatch({
+        type: 'problemconfig/moveTestcases',
+        payload: {
+          target: subtaskId,
+          source: item.subtaskId,
+          cases: item.cases,
+        },
+      });
+    },
+  }));
+
+  function deleteSubtask() {
+    dispatch({
+      type: 'problemconfig/deleteSubtask',
+      id: subtaskId,
+    });
+  }
+
+  return (
+    <div style={{ marginBottom: 8 }}>
+      {subtaskId !== -1 && (
+        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => setExpand((e) => !e)}>
+          <Text fw={600} style={{ marginRight: 8 }}>
+            {expand ? <i className="icon icon-expand_more" /> : <i className="icon icon-expand_less" />}
+          </Text>
+          <Text>{i18n('Subtask {0}', subtaskId)}</Text>
+          <Button
+            variant="subtle"
+            size="sm"
+            color="black"
+            style={{ marginLeft: 'auto' }}
+            onClick={(ev) => {
+              ev.stopPropagation();
+              confirm(i18n('Are you sure you want to delete this subtask?')).then((yes) => {
+                if (yes) deleteSubtask();
+              });
+            }}
+          >
+            <i className="icon icon-delete" />
+          </Button>
+        </div>
+      )}
+      <div ref={drop as any}>
+        {subtaskId !== -1 && expand && (
+          <SubtaskSettings subtaskId={subtaskId} subtaskIds={subtaskIds} time={time} memory={memory} />
+        )}
+        {expand
+          ? <SelectionManager subtaskId={subtaskId} subtaskIds={subtaskIds} />
+          : <div style={{ paddingLeft: 22 }}>
+            <Text>{cases.length} testcases.</Text>
+          </div>}
+        {!cases.length && (
+          <div style={{ paddingLeft: 22 }}>
+            <Text c="dimmed">{subtaskId === -1
+              ? i18n('No testcase here')
+              : i18n('Drag and drop testcases here:')}</Text>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function SubtaskConfigTree() {
+  const ids = useSelector((s: RootState) => Object.values(s.config?.subtasks || []).map((i) => i.id), isEqual);
+  const dispatch = useDispatch();
+  const store = useStore<RootState>();
+  const autoConfigure = React.useCallback(() => {
+    const state = store.getState();
+    const subtasks = readSubtasksFromFiles(state.testdata.map((t) => t.name), state.config);
+    const cases = subtasks.reduce((a, b) => a.concat(b.cases), []);
+    dispatch({
+      type: 'CONFIG_AUTOCASES_UPDATE',
+      subtasks: normalizeSubtasks(subtasks, (i) => i, state.config.time, state.config.memory, true),
+    });
+    dispatch({
+      type: 'problemconfig/delTestcases',
+      cases,
+    });
+  }, [dispatch, store]);
+  const rootNodes = React.useMemo<any[]>(() => [
+    { id: 'auto', label: i18n('Auto configure'), type: 'action' as const },
+    { id: 'global', label: i18n('Global settings'), type: 'global' as const },
+    ...ids.map((id) => ({ id: `sub-${id}`, label: i18n('Subtask {0}', id), type: 'subtask' as const, subtaskId: id })),
+    { id: 'add', label: i18n('Add new subtask'), type: 'add' as const },
+  ], [ids]);
+
+  return (
+    <Tree
+      data={rootNodes}
+      levelOffset={12}
+      renderNode={({ node }) => {
+        const n: any = node;
+        if (n.type === 'action') {
+          return <div style={{ padding: '6px 0' }} onClick={autoConfigure}>
+            <Text><i className="icon icon-settings" /> {i18n('Auto configure')}</Text>
+          </div>;
+        }
+        if (n.type === 'global') return <GlobalSettings />;
+        if (n.type === 'add') {
+          return <div style={{ padding: '6px 0' }} onClick={() => dispatch({ type: 'problemconfig/addSubtask' })}>
+            <Text><i className="icon icon-add" /> {i18n('Add new subtask')}</Text>
+          </div>;
+        }
+        return <SubtaskNode subtaskId={n.subtaskId} />;
+      }}
+    />
+  );
+}
+
+export function ProblemConfigTree() {
+  return (
+    <DndProvider backend={HTML5Backend} context={window}>
+      <div className="row">
+        <div className="medium-6 columns">
+          <SubtaskConfigTree />
+        </div>
+        <div className="medium-6 columns">
+          <div>
+            <AddTestcase />
+            <SubtaskNode subtaskId={-1} />
+          </div>
+        </div>
+      </div>
+    </DndProvider>
+  );
+}

package/components/problemconfig/ProblemType.tsx

@@ -0,0 +1,165 @@
+import { Card, SegmentedControl, Switch } from '@mantine/core';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import { testlibCheckers } from '../monaco/schema/problemconfig';
+import { FormItem, ManagedSelect, SingleFileSelect } from './BasicForm';
+import type { RootState } from './reducer/index';
+
+export default function ProblemType() {
+  const Type = useSelector((state: RootState) => state.config.type);
+  const checkerType = useSelector((state: RootState) => state.config.checker_type);
+  const filename = useSelector((state: RootState) => state.config.filename);
+  const numProcesses = useSelector((state: RootState) => state.config.num_processes);
+  const subType = useSelector((state: RootState) => state.config.subType);
+  const checker = useSelector((state: RootState) => state.config.checker);
+  const [category, setCategory] = React.useState('');
+  const dispatch = useDispatch();
+  const dispatcher = (base) => (value) => dispatch({ ...base, value });
+  useEffect(() => {
+    if (category || !checker) return;
+    const name = typeof checker === 'string' ? checker : checker.file;
+    if (name.includes('.')) setCategory('custom');
+    else setCategory('preset');
+  }, [checker]);
+  return (
+    <FormItem columns={12} label="" disableLabel>
+      <Card withBorder style={{ padding: 10, overflow: 'visible' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 3 }}>
+          <div>{i18n('Problem Type')}</div>
+          <SegmentedControl
+            value={Type}
+            onChange={dispatcher({ type: 'CONFIG_FORM_UPDATE', key: 'type' })}
+            data={[
+              { label: i18n('problem_type.default'), value: 'default' },
+              { label: i18n('problem_type.interactive'), value: 'interactive' },
+              { label: i18n('problem_type.communication'), value: 'communication' },
+              { label: i18n('problem_type.submit_answer'), value: 'submit_answer' },
+              { label: i18n('problem_type.objective'), value: 'objective' },
+            ]}
+          />
+        </div>
+
+        {['default', 'submit_answer'].includes(Type) && (
+          <>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 3 }}>
+              <div>{i18n('CheckerType')}</div>
+              <SegmentedControl
+                value={(['strict', 'default'].includes(checkerType) || !checkerType)
+                  ? 'default' : (checkerType !== 'testlib' ? 'other' : 'testlib')}
+                onChange={(value) => {
+                  dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value });
+                  if (value === 'testlib' && !category) setCategory('custom');
+                }}
+                data={[
+                  { label: i18n('default'), value: 'default' },
+                  { label: 'testlib', value: 'testlib' },
+                  { label: 'other', value: 'other' },
+                ]}
+              />
+            </div>
+
+            {((['strict', 'default'].includes(checkerType) || !checkerType)) && (
+              <Switch
+                styles={{ body: { display: 'flex' } }}
+                checked={checkerType !== 'strict'}
+                label={i18n('Ignore trailing space and enter.')}
+                onChange={() => {
+                  dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value: checkerType === 'strict' ? 'default' : 'strict' });
+                }}
+              />
+            )}
+
+            {(!['strict', 'default'].includes(checkerType) && checkerType && checkerType === 'testlib') && (
+              <div className="row">
+                <FormItem columns={4} label="Type">
+                  <select
+                    value={category}
+                    onChange={(ev) => {
+                      setCategory(ev.currentTarget.value);
+                      dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value === 'preset' ? 'acmp' : null });
+                    }}
+                    className="select"
+                  >
+                    <option value="preset">{i18n('Preset')}</option>
+                    <option value="custom">{i18n('Custom')}</option>
+                  </select>
+                </FormItem>
+                {category === 'preset'
+                  ? <FormItem columns={8} label="Checker">
+                    <select
+                      value={typeof checker === 'string' ? checker : checker.file}
+                      onChange={(ev) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value })}
+                      className="select"
+                    >
+                      {testlibCheckers.map((c) => (
+                        <option key={c} value={c}>{c}</option>
+                      ))}
+                    </select>
+                  </FormItem>
+                  : <SingleFileSelect formKey="checker" label="Checker" withLang />}
+              </div>
+            )}
+
+            {(!['strict', 'default'].includes(checkerType) && checkerType && checkerType !== 'testlib') && (
+              <div className="row">
+                <FormItem columns={4} label="Interface">
+                  <ManagedSelect options={['syzoj', 'hustoj', 'qduoj', 'lemon', 'kattis']} formKey="checker_type" />
+                </FormItem>
+                <SingleFileSelect formKey="checker" label="Checker" withLang />
+              </div>
+            )}
+          </>
+        )}
+
+        {Type === 'interactive' && (
+          <div className="row">
+            <SingleFileSelect formKey="interactor" label="Interactor" withLang />
+          </div>
+        )}
+
+        {Type === 'communication' && (
+          <div className="row">
+            <SingleFileSelect formKey="manager" label="Manager" withLang />
+            <FormItem columns={4} label="Number of Processes">
+              <input
+                defaultValue={numProcesses || 2}
+                placeholder="2"
+                onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'num_processes', value: +ev.currentTarget.value }))}
+                className="textbox"
+              />
+            </FormItem>
+          </div>
+        )}
+
+        {Type === 'submit_answer' && (
+          <div className="row">
+            <FormItem columns={6} label="Config" disableLabel>
+              <Switch
+                checked={subType === 'multi'}
+                styles={{ body: { display: 'flex' } }}
+                label={i18n('Multi-file')}
+                onChange={() => {
+                  dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'subType', value: subType === 'multi' ? 'single' : 'multi' });
+                }}
+              />
+            </FormItem>
+            <FormItem columns={6} label="Filename">
+              <input
+                defaultValue={filename || '#.txt'}
+                placeholder="#.txt"
+                disabled={subType !== 'multi'}
+                onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'filename', value: ev.currentTarget.value }))}
+                className="textbox"
+              />
+            </FormItem>
+          </div>
+        )}
+
+        {Type === 'objective' && (
+          <p>{i18n('Unsupported configure this type of problem. Please refer to the documentation.')}</p>
+        )}
+      </Card>
+    </FormItem>
+  );
+}