feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector

label_studio/core/static/css/uikit.css

@@ -22,7 +22,7 @@ body {
   display: block;
 }
 .field--wide > *:not(:first-child) {
-  display: block;
+  display: flex;
   margin-top: 4px;
   width: 100%;
   box-sizing: border-box;

label_studio/data_manager/actions/predictions_to_annotations.py

@@ -91,6 +91,7 @@ def predictions_to_annotations_form(user, project):
                     'name': 'model_version',
                     'label': 'Choose predictions',
                     'options': versions,
+                    'value': first,
                 }
             ],
         }
@@ -106,7 +107,7 @@ def predictions_to_annotations_form(user, project):
         'dialog': {
             'title': 'Create Annotations From Predictions',
             'text': 'Create annotations from predictions using selected predictions set '
-            'for each selected task.'
+            'for each selected task. '
             'Your account will be assigned as an owner to those annotations. ',
             'type': 'confirm',
             'form': predictions_to_annotations_form,

web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss

@@ -1,8 +1,10 @@
 .input-ls,
 .select-ls,
 .textarea-ls {
-  height: 40px;
-  min-height: 40px;
+  --input-size: 40px;
+
+  height: var(--input-size);
+  min-height: var(--input-size);
   background: var(--sand_0);
   font-size: 16px;
   line-height: 22px;

web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";
-import "./Select.scss";
+import { Select as SelectUI } from "@humansignal/ui";
 
 const SelectOption = ({ value, label, disabled = false, hidden = false, ...props }) => {
   return (
@@ -24,16 +24,23 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     return groupedOptions;
   }, {});
 
-  const renderOptions = (option) => {
-    return <SelectOption {...(option.value ? { ...option, key: option.value } : { value: option, key: option })} />;
-  };
-
   const classList = rootClass.mod({ ghost }).mix(className);
 
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
+  const selectOptions = useMemo(() => {
+    return Object.keys(grouped).flatMap((group) => {
+      return group === "NoGroup"
+        ? grouped[group]
+        : (grouped[group] = {
+            label: group,
+            children: grouped[group],
+          });
+    });
+  }, [grouped]);
+
   const selectWrapper = (
     <FormField
       name={props.name}
@@ -46,32 +53,16 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     >
       {(ref) => {
         return (
-          <div className={classList}>
-            <select
-              {...props}
-              value={value}
-              onChange={(e) => {
-                setValue(e.target.value);
-                props.onChange?.(e);
-              }}
-              ref={ref}
-              className={rootClass.elem("list")}
-            >
-              {props.placeholder && (!props.defaulValue || !props.value) && (
-                <option value="" disabled hidden>
-                  {props.placeholder}
-                </option>
-              )}
-
-              {Object.keys(grouped).map((group) => {
-                return group === "NoGroup" ? (
-                  grouped[group].map(renderOptions)
-                ) : (
-                  <optgroup label={group}>{grouped[group].map(renderOptions)}</optgroup>
-                );
-              })}
-            </select>
-          </div>
+          <SelectUI
+            {...props}
+            value={value}
+            onChange={(val) => {
+              setValue(val);
+              props.onChange?.(val);
+            }}
+            ref={ref}
+            options={selectOptions}
+          />
         );
       }}
     </FormField>

web/apps/labelstudio/src/components/Pagination/Pagination.scss

@@ -1,5 +1,7 @@
 .pagination-ls {
-  height: 40px;
+  --pagination-height: 40px;
+
+  height: var(--pagination-height);
   display: inline-flex;
   align-items: center;
 
@@ -114,14 +116,12 @@
 
   &__input {
     width: 100px;
-    height: 38px;
+    height: var(--pagination-height);
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #D9D9D9;
-    border-top: none;
-    border-bottom: none;
     background: var(--sand_100);
     margin: 1px 0;
 

web/apps/labelstudio/src/components/Pagination/Pagination.tsx

@@ -11,7 +11,7 @@ import {
 import { Block, Elem } from "../../utils/bem";
 import { clamp, isDefined } from "../../utils/helpers";
 import { useValueTracker } from "../Form/Utils";
-import { Select } from "../Form/Elements";
+import { Select } from "@humansignal/ui";
 import "./Pagination.scss";
 import { useUpdateEffect } from "../../utils/hooks";
 
@@ -263,8 +263,8 @@ export const Pagination: FC<PaginationProps> = forwardRef(
             <Select
               value={pageSize}
               options={pageSizeOptions.map((v) => ({ label: `${v} per page`, value: v }))}
-              onChange={(e: any) => {
-                const newPageSize = Number.parseInt(e.target.value);
+              onChange={(val: string) => {
+                const newPageSize = Number.parseInt(val);
 
                 setPageSize(newPageSize);
 

web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx

@@ -1,13 +1,13 @@
 import "codemirror/lib/codemirror.css";
 import "codemirror/mode/xml/xml";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { UnControlled as CodeMirror } from "react-codemirror2";
 import CM from "codemirror";
 import "codemirror/addon/hint/show-hint";
 import "codemirror/addon/hint/show-hint.css";
 
 import { Button, ToggleItems } from "../../../components";
-import { Form } from "../../../components/Form";
+import { Form, Input } from "../../../components/Form";
 import { useAPI } from "../../../providers/ApiProvider";
 import { Block, cn, Elem } from "../../../utils/bem";
 import { Palette } from "../../../utils/colors";
@@ -22,7 +22,7 @@ import "./codemirror.css";
 import "./config-hint";
 import tags from "./schema.json";
 import { UnsavedChanges } from "./UnsavedChanges";
-import { Checkbox } from "@humansignal/ui";
+import { Checkbox, Select } from "@humansignal/ui";
 import { toSnakeCase } from "strman";
 
 const wizardClass = cn("wizard");
@@ -154,26 +154,25 @@ const ConfigureSettings = ({ template }) => {
 
     switch (type) {
       case Array:
-        onChange = (e) => {
+        onChange = (val) => {
           if (typeof options.param === "function") {
-            options.param($tag, e.target.value);
+            options.param($tag, val);
           } else {
-            $object.setAttribute(options.param, e.target.value);
+            $object.setAttribute(options.param, val);
           }
           template.render();
         };
         return (
           <li key={key}>
-            <label>
-              {options.title}{" "}
-              <select className="border" value={value} onChange={onChange}>
-                {options.type.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </select>
-            </label>
+            <Select
+              className="border"
+              value={value}
+              onChange={onChange}
+              options={options.type}
+              label={options.title}
+              isInline={true}
+              dataTestid={`select-trigger-${options.title.replace(/\s+/g, "-").replace(":", "").toLowerCase()}-${value}`}
+            />
           </li>
         );
       case Boolean:
@@ -247,9 +246,7 @@ const ConfigureColumn = ({ template, obj, columns }) => {
     template.render();
   };
 
-  const selectValue = (e) => {
-    const value = e.target.value;
-
+  const selectValue = (value) => {
     if (value === "-") {
       setIsManual(true);
       return;
@@ -278,23 +275,40 @@ const ConfigureColumn = ({ template, obj, columns }) => {
     }
   };
 
+  const columnsList = useMemo(() => {
+    const cols = (columns ?? []).map((col) => {
+      return {
+        value: col,
+        label: col === DEFAULT_COLUMN ? "<imported file>" : `$${col}`,
+      };
+    });
+    if (!columns?.length) {
+      cols.push({ value, label: "<imported file>" });
+    }
+    cols.push({ value: "-", label: "<set manually>" });
+    return cols;
+  }, [columns, DEFAULT_COLUMN, value]);
+
   return (
-    <p>
-      Use {obj.tagName.toLowerCase()}
-      {template.objects > 1 && ` for ${obj.getAttribute("name")}`}
-      {" from "}
-      {columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
-      <select className="border" onChange={selectValue} value={isManual ? "-" : value}>
-        {columns?.map((column) => (
-          <option key={column} value={column}>
-            {column === DEFAULT_COLUMN ? "<imported file>" : `$${column}`}
-          </option>
-        ))}
-        {!columns?.length && <option value={value}>{"<imported file>"}</option>}
-        <option value="-">{"<set manually>"}</option>
-      </select>
-      {isManual && <input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
-    </p>
+    <>
+      <Select
+        onChange={selectValue}
+        value={isManual ? "-" : value}
+        options={columnsList}
+        isInline={true}
+        label={
+          <>
+            Use {obj.tagName.toLowerCase()}
+            {template.objects > 1 && ` for ${obj.getAttribute("name")}`}
+            {" from "}
+            {columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
+          </>
+        }
+        labelProps={{ className: "inline-flex" }}
+        dataTestid={`select-trigger-use-image-from-field-${isManual ? "-" : value}`}
+      />
+      {isManual && <Input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
+    </>
   );
 };
 

web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss

@@ -309,6 +309,8 @@ $scroll-width: 5px;
     margin-left: 8px;
     padding: 4px 8px;
     line-height: 1.4em;
+    height: 40px;
+    border-radius: var(--corner-radius-smaller);
   }
 
   select {

web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx

@@ -1,4 +1,4 @@
-import { EnterpriseBadge } from "@humansignal/ui";
+import { EnterpriseBadge, Select } from "@humansignal/ui";
 import React from "react";
 import { useHistory } from "react-router";
 import { Button, ToggleItems } from "../../components";
@@ -12,7 +12,7 @@ import "./CreateProject.scss";
 import { ImportPage } from "./Import/Import";
 import { useImportPage } from "./Import/useImportPage";
 import { useDraftProject } from "./utils/useDraftProject";
-import { Input, Select, TextArea } from "../../components/Form";
+import { Input, TextArea } from "../../components/Form";
 import { Caption } from "../../components/Caption/Caption";
 import { FF_LSDV_E_297, isFF } from "../../utils/feature-flags";
 import { createURL } from "../../components/HeidiTips/utils";

web/apps/labelstudio/src/pages/Settings/AnnotationSettings/ModelVersionSelector.jsx

@@ -82,9 +82,10 @@ export const ModelVersionSelector = ({
             name={name}
             disabled={!versions.length && !models.length}
             value={version}
-            onChange={(e) => setVersion(e.target.value)}
+            onChange={setVersion}
             options={[...models, ...versions]}
-            placeholder={loading ? "Loading ..." : placeholder ? placeholder : "Please select model or predictions"}
+            placeholder={placeholder || "Please select model or predictions"}
+            isInProgress={loading}
             {...props}
           />
         </div>

web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx

@@ -1,7 +1,7 @@
-import { EnterpriseBadge } from "@humansignal/ui";
+import { EnterpriseBadge, Select } from "@humansignal/ui";
 import { useCallback, useContext } from "react";
 import { Button } from "../../components";
-import { Form, Input, Select, TextArea } from "../../components/Form";
+import { Form, Input, TextArea } from "../../components/Form";
 import { RadioGroup } from "../../components/Form/Elements/RadioGroup/RadioGroup";
 import { ProjectContext } from "../../providers/ProjectProvider";
 import { Block, Elem } from "../../utils/bem";