Skip to content

Commit 677e817

Browse files
yyassi-heartexyyassi-heartex
committed
Revert "feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector (#7257)"
This reverts commit ddb598a.
1 parent ddb598a commit 677e817

File tree

84 files changed

+2981
-1506
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+2981
-1506
lines changed

‎label_studio/core/static/css/uikit.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ body {
2222
display: block;
2323
}
2424
.field--wide > *:not(:first-child) {
25-
display: flex;
25+
display: block;
2626
margin-top: 4px;
2727
width: 100%;
2828
box-sizing: border-box;

‎label_studio/data_manager/actions/predictions_to_annotations.py

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ def predictions_to_annotations_form(user, project):
9191
'name': 'model_version',
9292
'label': 'Choose predictions',
9393
'options': versions,
94-
'value': first,
9594
}
9695
],
9796
}
@@ -107,7 +106,7 @@ def predictions_to_annotations_form(user, project):
107106
'dialog': {
108107
'title': 'Create Annotations From Predictions',
109108
'text': 'Create annotations from predictions using selected predictions set '
110-
'for each selected task. '
109+
'for each selected task.'
111110
'Your account will be assigned as an owner to those annotations. ',
112111
'type': 'confirm',
113112
'form': predictions_to_annotations_form,

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
.input-ls,
22
.select-ls,
33
.textarea-ls {
4-
--input-size: 40px;
5-
6-
height: var(--input-size);
7-
min-height: var(--input-size);
4+
height: 40px;
5+
min-height: 40px;
86
background: var(--sand_0);
97
font-size: 16px;
108
line-height: 22px;

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

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
22
import { cn } from "../../../../utils/bem";
33
import { FormField } from "../../FormField";
44
import { default as Label } from "../Label/Label";
5-
import { Select as SelectUI } from "@humansignal/ui";
5+
import "./Select.scss";
66

77
const SelectOption = ({ value, label, disabled = false, hidden = false, ...props }) => {
88
return (
@@ -24,23 +24,16 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
2424
return groupedOptions;
2525
}, {});
2626

27+
const renderOptions = (option) => {
28+
return <SelectOption {...(option.value ? { ...option, key: option.value } : { value: option, key: option })} />;
29+
};
30+
2731
const classList = rootClass.mod({ ghost }).mix(className);
2832

2933
useEffect(() => {
3034
setValue(initialValue);
3135
}, [initialValue]);
3236

33-
const selectOptions = useMemo(() => {
34-
return Object.keys(grouped).flatMap((group) => {
35-
return group === "NoGroup"
36-
? grouped[group]
37-
: (grouped[group] = {
38-
label: group,
39-
children: grouped[group],
40-
});
41-
});
42-
}, [grouped]);
43-
4437
const selectWrapper = (
4538
<FormField
4639
name={props.name}
@@ -53,16 +46,32 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
5346
>
5447
{(ref) => {
5548
return (
56-
<SelectUI
57-
{...props}
58-
value={value}
59-
onChange={(val) => {
60-
setValue(val);
61-
props.onChange?.(val);
62-
}}
63-
ref={ref}
64-
options={selectOptions}
65-
/>
49+
<div className={classList}>
50+
<select
51+
{...props}
52+
value={value}
53+
onChange={(e) => {
54+
setValue(e.target.value);
55+
props.onChange?.(e);
56+
}}
57+
ref={ref}
58+
className={rootClass.elem("list")}
59+
>
60+
{props.placeholder && (!props.defaulValue || !props.value) && (
61+
<option value="" disabled hidden>
62+
{props.placeholder}
63+
</option>
64+
)}
65+
66+
{Object.keys(grouped).map((group) => {
67+
return group === "NoGroup" ? (
68+
grouped[group].map(renderOptions)
69+
) : (
70+
<optgroup label={group}>{grouped[group].map(renderOptions)}</optgroup>
71+
);
72+
})}
73+
</select>
74+
</div>
6675
);
6776
}}
6877
</FormField>

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.select-ls {
2+
position: relative;
3+
4+
&__list {
5+
top: 0;
6+
left: 0;
7+
width: 100%;
8+
height: 100%;
9+
padding: 0 16px;
10+
margin: 0;
11+
border: none;
12+
border-radius: 3px;
13+
position: absolute;
14+
background-color: transparent;
15+
transition: box-shadow 80ms ease;
16+
font-size: inherit;
17+
border-right: 10px solid transparent;
18+
}
19+
20+
&_ghost {
21+
margin-left: -10px;
22+
border: 1px solid transparent;
23+
24+
&__list {
25+
padding: 0 5px;
26+
}
27+
28+
&:hover {
29+
border: 1px solid var(--sand_300);
30+
}
31+
}
32+
}
33+
34+
select:disabled {
35+
background: var(--sand_200);
36+
color: var(--sand_500);
37+
opacity: 1;
38+
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.pagination-ls {
2-
--pagination-height: 40px;
3-
4-
height: var(--pagination-height);
2+
height: 40px;
53
display: inline-flex;
64
align-items: center;
75

@@ -116,12 +114,14 @@
116114

117115
&__input {
118116
width: 100px;
119-
height: var(--pagination-height);
117+
height: 38px;
120118
text-align: center;
121119
display: flex;
122120
align-items: center;
123121
justify-content: center;
124122
border: 1px solid #D9D9D9;
123+
border-top: none;
124+
border-bottom: none;
125125
background: var(--sand_100);
126126
margin: 1px 0;
127127

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { Block, Elem } from "../../utils/bem";
1212
import { clamp, isDefined } from "../../utils/helpers";
1313
import { useValueTracker } from "../Form/Utils";
14-
import { Select } from "@humansignal/ui";
14+
import { Select } from "../Form/Elements";
1515
import "./Pagination.scss";
1616
import { useUpdateEffect } from "../../utils/hooks";
1717

@@ -263,8 +263,8 @@ export const Pagination: FC<PaginationProps> = forwardRef(
263263
<Select
264264
value={pageSize}
265265
options={pageSizeOptions.map((v) => ({ label: `${v} per page`, value: v }))}
266-
onChange={(val: string) => {
267-
const newPageSize = Number.parseInt(val);
266+
onChange={(e: any) => {
267+
const newPageSize = Number.parseInt(e.target.value);
268268

269269
setPageSize(newPageSize);
270270

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

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import "codemirror/lib/codemirror.css";
22
import "codemirror/mode/xml/xml";
3-
import React, { useEffect, useMemo, useState } from "react";
3+
import React, { useEffect, useState } from "react";
44
import { UnControlled as CodeMirror } from "react-codemirror2";
55
import CM from "codemirror";
66
import "codemirror/addon/hint/show-hint";
77
import "codemirror/addon/hint/show-hint.css";
88

99
import { Button, ToggleItems } from "../../../components";
10-
import { Form, Input } from "../../../components/Form";
10+
import { Form } from "../../../components/Form";
1111
import { useAPI } from "../../../providers/ApiProvider";
1212
import { Block, cn, Elem } from "../../../utils/bem";
1313
import { Palette } from "../../../utils/colors";
@@ -22,7 +22,7 @@ import "./codemirror.css";
2222
import "./config-hint";
2323
import tags from "./schema.json";
2424
import { UnsavedChanges } from "./UnsavedChanges";
25-
import { Checkbox, Select } from "@humansignal/ui";
25+
import { Checkbox } from "@humansignal/ui";
2626
import { toSnakeCase } from "strman";
2727

2828
const wizardClass = cn("wizard");
@@ -154,25 +154,26 @@ const ConfigureSettings = ({ template }) => {
154154

155155
switch (type) {
156156
case Array:
157-
onChange = (val) => {
157+
onChange = (e) => {
158158
if (typeof options.param === "function") {
159-
options.param($tag, val);
159+
options.param($tag, e.target.value);
160160
} else {
161-
$object.setAttribute(options.param, val);
161+
$object.setAttribute(options.param, e.target.value);
162162
}
163163
template.render();
164164
};
165165
return (
166166
<li key={key}>
167-
<Select
168-
className="border"
169-
value={value}
170-
onChange={onChange}
171-
options={options.type}
172-
label={options.title}
173-
isInline={true}
174-
dataTestid={`select-trigger-${options.title.replace(/\s+/g, "-").replace(":", "").toLowerCase()}-${value}`}
175-
/>
167+
<label>
168+
{options.title}{" "}
169+
<select className="border" value={value} onChange={onChange}>
170+
{options.type.map((option) => (
171+
<option key={option} value={option}>
172+
{option}
173+
</option>
174+
))}
175+
</select>
176+
</label>
176177
</li>
177178
);
178179
case Boolean:
@@ -246,7 +247,9 @@ const ConfigureColumn = ({ template, obj, columns }) => {
246247
template.render();
247248
};
248249

249-
const selectValue = (value) => {
250+
const selectValue = (e) => {
251+
const value = e.target.value;
252+
250253
if (value === "-") {
251254
setIsManual(true);
252255
return;
@@ -275,40 +278,23 @@ const ConfigureColumn = ({ template, obj, columns }) => {
275278
}
276279
};
277280

278-
const columnsList = useMemo(() => {
279-
const cols = (columns ?? []).map((col) => {
280-
return {
281-
value: col,
282-
label: col === DEFAULT_COLUMN ? "<imported file>" : `$${col}`,
283-
};
284-
});
285-
if (!columns?.length) {
286-
cols.push({ value, label: "<imported file>" });
287-
}
288-
cols.push({ value: "-", label: "<set manually>" });
289-
return cols;
290-
}, [columns, DEFAULT_COLUMN, value]);
291-
292281
return (
293-
<>
294-
<Select
295-
onChange={selectValue}
296-
value={isManual ? "-" : value}
297-
options={columnsList}
298-
isInline={true}
299-
label={
300-
<>
301-
Use {obj.tagName.toLowerCase()}
302-
{template.objects > 1 && ` for ${obj.getAttribute("name")}`}
303-
{" from "}
304-
{columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
305-
</>
306-
}
307-
labelProps={{ className: "inline-flex" }}
308-
dataTestid={`select-trigger-use-image-from-field-${isManual ? "-" : value}`}
309-
/>
310-
{isManual && <Input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
311-
</>
282+
<p>
283+
Use {obj.tagName.toLowerCase()}
284+
{template.objects > 1 && ` for ${obj.getAttribute("name")}`}
285+
{" from "}
286+
{columns?.length > 0 && columns[0] !== DEFAULT_COLUMN && "field "}
287+
<select className="border" onChange={selectValue} value={isManual ? "-" : value}>
288+
{columns?.map((column) => (
289+
<option key={column} value={column}>
290+
{column === DEFAULT_COLUMN ? "<imported file>" : `$${column}`}
291+
</option>
292+
))}
293+
{!columns?.length && <option value={value}>{"<imported file>"}</option>}
294+
<option value="-">{"<set manually>"}</option>
295+
</select>
296+
{isManual && <input value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
297+
</p>
312298
);
313299
};
314300

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,6 @@ $scroll-width: 5px;
309309
margin-left: 8px;
310310
padding: 4px 8px;
311311
line-height: 1.4em;
312-
height: 40px;
313-
border-radius: var(--corner-radius-smaller);
314312
}
315313

316314
select {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EnterpriseBadge, Select } from "@humansignal/ui";
1+
import { EnterpriseBadge } from "@humansignal/ui";
22
import React from "react";
33
import { useHistory } from "react-router";
44
import { Button, ToggleItems } from "../../components";
@@ -12,7 +12,7 @@ import "./CreateProject.scss";
1212
import { ImportPage } from "./Import/Import";
1313
import { useImportPage } from "./Import/useImportPage";
1414
import { useDraftProject } from "./utils/useDraftProject";
15-
import { Input, TextArea } from "../../components/Form";
15+
import { Input, Select, TextArea } from "../../components/Form";
1616
import { Caption } from "../../components/Caption/Caption";
1717
import { FF_LSDV_E_297, isFF } from "../../utils/feature-flags";
1818
import { createURL } from "../../components/HeidiTips/utils";

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,9 @@ export const ModelVersionSelector = ({
8282
name={name}
8383
disabled={!versions.length && !models.length}
8484
value={version}
85-
onChange={setVersion}
85+
onChange={(e) => setVersion(e.target.value)}
8686
options={[...models, ...versions]}
87-
placeholder={placeholder || "Please select model or predictions"}
88-
isInProgress={loading}
87+
placeholder={loading ? "Loading ..." : placeholder ? placeholder : "Please select model or predictions"}
8988
{...props}
9089
/>
9190
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { EnterpriseBadge, Select } from "@humansignal/ui";
1+
import { EnterpriseBadge } from "@humansignal/ui";
22
import { useCallback, useContext } from "react";
33
import { Button } from "../../components";
4-
import { Form, Input, TextArea } from "../../components/Form";
4+
import { Form, Input, Select, TextArea } from "../../components/Form";
55
import { RadioGroup } from "../../components/Form/Elements/RadioGroup/RadioGroup";
66
import { ProjectContext } from "../../providers/ProjectProvider";
77
import { Block, Elem } from "../../utils/bem";

0 commit comments

Comments
 (0)