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

label_studio/core/static/css/uikit.css

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

label_studio/data_manager/actions/predictions_to_annotations.py

@@ -91,7 +91,6 @@ def predictions_to_annotations_form(user, project):
                     'name': 'model_version',
                     'label': 'Choose predictions',
                     'options': versions,
-                    'value': first,
                 }
             ],
         }
@@ -107,7 +106,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,10 +1,8 @@
 .input-ls,
 .select-ls,
 .textarea-ls {
-  --input-size: 40px;
-
-  height: var(--input-size);
-  min-height: var(--input-size);
+  height: 40px;
+  min-height: 40px;
   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 as SelectUI } from "@humansignal/ui";
+import "./Select.scss";
 
 const SelectOption = ({ value, label, disabled = false, hidden = false, ...props }) => {
   return (
@@ -24,23 +24,16 @@ 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}
@@ -53,16 +46,32 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     >
       {(ref) => {
         return (
-          <SelectUI
-            {...props}
-            value={value}
-            onChange={(val) => {
-              setValue(val);
-              props.onChange?.(val);
-            }}
-            ref={ref}
-            options={selectOptions}
-          />
+          <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>
         );
       }}
     </FormField>

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

@@ -0,0 +1,38 @@
+.select-ls {
+  position: relative;
+
+  &__list {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    margin: 0;
+    border: none;
+    border-radius: 3px;
+    position: absolute;
+    background-color: transparent;
+    transition: box-shadow 80ms ease;
+    font-size: inherit;
+    border-right: 10px solid transparent;
+  }
+
+  &_ghost {
+    margin-left: -10px;
+    border: 1px solid transparent;
+
+    &__list {
+      padding: 0 5px;
+    }
+
+    &:hover {
+      border: 1px solid var(--sand_300);
+    }
+  }
+}
+
+select:disabled {
+  background: var(--sand_200);
+  color: var(--sand_500);
+  opacity: 1;
+}

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

@@ -1,7 +1,5 @@
 .pagination-ls {
-  --pagination-height: 40px;
-
-  height: var(--pagination-height);
+  height: 40px;
   display: inline-flex;
   align-items: center;
 
@@ -116,12 +114,14 @@
 
   &__input {
     width: 100px;
-    height: var(--pagination-height);
+    height: 38px;
     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 "@humansignal/ui";
+import { Select } from "../Form/Elements";
 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={(val: string) => {
-                const newPageSize = Number.parseInt(val);
+              onChange={(e: any) => {
+                const newPageSize = Number.parseInt(e.target.value);
 
                 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, useMemo, useState } from "react";
+import React, { useEffect, 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, Input } from "../../../components/Form";
+import { Form } 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, Select } from "@humansignal/ui";
+import { Checkbox } from "@humansignal/ui";
 import { toSnakeCase } from "strman";
 
 const wizardClass = cn("wizard");
@@ -154,25 +154,26 @@ const ConfigureSettings = ({ template }) => {
 
     switch (type) {
       case Array:
-        onChange = (val) => {
+        onChange = (e) => {
           if (typeof options.param === "function") {
-            options.param($tag, val);
+            options.param($tag, e.target.value);
           } else {
-            $object.setAttribute(options.param, val);
+            $object.setAttribute(options.param, e.target.value);
           }
           template.render();
         };
         return (
           <li key={key}>
-            <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}`}
-            />
+            <label>
+              {options.title}{" "}
+              <select className="border" value={value} onChange={onChange}>
+                {options.type.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </label>
           </li>
         );
       case Boolean:
@@ -246,7 +247,9 @@ const ConfigureColumn = ({ template, obj, columns }) => {
     template.render();
   };
 
-  const selectValue = (value) => {
+  const selectValue = (e) => {
+    const value = e.target.value;
+
     if (value === "-") {
       setIsManual(true);
       return;
@@ -275,40 +278,23 @@ 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 (
-    <>
-      <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} />}
-    </>
+    <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>
   );
 };
 

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

@@ -309,8 +309,6 @@ $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, Select } from "@humansignal/ui";
+import { EnterpriseBadge } 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, TextArea } from "../../components/Form";
+import { Input, Select, 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,10 +82,9 @@ export const ModelVersionSelector = ({
             name={name}
             disabled={!versions.length && !models.length}
             value={version}
-            onChange={setVersion}
+            onChange={(e) => setVersion(e.target.value)}
             options={[...models, ...versions]}
-            placeholder={placeholder || "Please select model or predictions"}
-            isInProgress={loading}
+            placeholder={loading ? "Loading ..." : placeholder ? placeholder : "Please select model or predictions"}
             {...props}
           />
         </div>

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

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