Allow experience domains creation in task creation

CHANGELOG.md

@@ -11,6 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 ### Added
 - Added the possbility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101)
+- Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119)
 - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105)
 
 ### Changed

frontend/javascripts/admin/task/task_create_form_view.js

@@ -36,7 +36,7 @@ import SelectExperienceDomain from "components/select_experience_domain";
 import messages from "messages";
 
 const FormItem = Form.Item;
-const Option = Select.Option;
+const { Option } = Select;
 const RadioGroup = Radio.Group;
 
 type Props = {
@@ -255,6 +255,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                         placeholder="Select an Experience Domain"
                         notFoundContent={messages["task.domain_does_not_exist"]}
                         width={100}
+                        allowCreation
                       />,
                     )}
                   </FormItem>

frontend/javascripts/admin/user/experience_modal_view.js

@@ -410,7 +410,7 @@ class ExperienceModalView extends React.PureComponent<Props, State> {
         ) : null}
         <SelectExperienceDomain
           disabled={false}
-          mode="tags"
+          allowCreation
           placeholder="New Experience Domain"
           value={[]}
           width={50}

frontend/javascripts/components/select_experience_domain.js

@@ -6,31 +6,34 @@ import * as React from "react";
 import type { ExperienceDomainList } from "admin/api_flow_types";
 import { getExistingExperienceDomains } from "admin/admin_rest_api";
 
-const Option = Select.Option;
+const { Option } = Select;
 
 type Props = {
   value?: string | Array<string>,
   width: number,
   placeholder: string,
   notFoundContent?: string,
   disabled: boolean,
-  mode?: string,
   onSelect?: string => void,
   onChange?: () => void,
+  allowCreation: boolean,
   alreadyUsedDomains: ExperienceDomainList,
 };
 
 type State = {
   domains: ExperienceDomainList,
+  currentlyEnteredDomain: string,
 };
 
 class SelectExperienceDomain extends React.PureComponent<Props, State> {
   static defaultProps = {
     alreadyUsedDomains: [],
+    allowCreation: false,
   };
 
   state = {
     domains: [],
+    currentlyEnteredDomain: "",
   };
 
   componentDidMount() {
@@ -45,21 +48,45 @@ class SelectExperienceDomain extends React.PureComponent<Props, State> {
     return this.state.domains.filter(domain => !this.props.alreadyUsedDomains.includes(domain));
   }
 
+  onSearch = (domain: string) => {
+    this.setState({ currentlyEnteredDomain: domain });
+  };
+
   render() {
+    const {
+      value,
+      notFoundContent,
+      width,
+      disabled,
+      placeholder,
+      onSelect,
+      onChange,
+      allowCreation,
+    } = this.props;
+    const { currentlyEnteredDomain } = this.state;
+    let options = this.getUnusedDomains();
+    if (
+      allowCreation &&
+      !options.includes(currentlyEnteredDomain) &&
+      currentlyEnteredDomain.trim() !== ""
+    ) {
+      options = [...options, currentlyEnteredDomain];
+    }
+
     return (
       <Select
         showSearch
-        mode={this.props.mode}
-        value={this.props.value}
+        value={value}
         optionFilterProp="children"
-        notFoundContent={this.props.notFoundContent}
-        style={{ width: `${this.props.width}%` }}
-        disabled={this.props.disabled}
-        placeholder={this.props.placeholder}
-        onSelect={this.props.onSelect}
-        onChange={this.props.onChange}
+        notFoundContent={notFoundContent}
+        style={{ width: `${width}%` }}
+        disabled={disabled}
+        placeholder={placeholder}
+        onSelect={onSelect}
+        onChange={onChange}
+        onSearch={this.onSearch}
       >
-        {this.getUnusedDomains().map(domain => (
+        {options.map(domain => (
           <Option key={domain}>{domain}</Option>
         ))}
       </Select>