Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: dropdown and multiselect component values on disabled and option text not truncating #3089

Merged
merged 8 commits into from
Jul 30, 2024
Merged

fix: dropdown and multiselect component values on disabled and option text not truncating #3089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dccc6e7
Fixed dropdown component showing empty value and not showing dropdown…
lucaseduoli Jul 30, 2024
30a3468
Fixed multiselect component showing empty value and not showing dropd…
lucaseduoli Jul 30, 2024
cfea262
Added disabled onChange on multiline and dropdown, with snapshot ignore
lucaseduoli Jul 30, 2024
6b6a9fe
Fixed tooltip skip delay duration that made tooltip on Dropdown unusable
lucaseduoli Jul 30, 2024
31e8f18
Fixed size of text inside dropdown and multiselect
lucaseduoli Jul 30, 2024
39b0c06
Merge remote-tracking branch 'origin/main' into fix/dropdown_component
lucaseduoli Jul 30, 2024
1682173
Merge branch 'main' into fix/dropdown_component
lucaseduoli Jul 30, 2024
12ac740
Merge branch 'main' into fix/dropdown_component
ogabrielluiz Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 42 additions & 27 deletions src/frontend/src/components/dropdownComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
import { DropDownComponentType } from "../../types/components";
import { cn } from "../../utils/utils";
import { default as ForwardedIconComponent } from "../genericIconComponent";
import ShadTooltip from "../shadTooltipComponent";
import { Button } from "../ui/button";
import {
Command,
Expand Down Expand Up @@ -47,15 +48,21 @@ export default function Dropdown({
const value = event.target.value;
const searchValues = fuse.search(value);
const filtered = searchValues.map((search) => search.item);
if (!filtered.includes(value) && combobox) filtered.push(value);
if (!filtered.includes(value) && combobox && value) filtered.push(value);
setFilteredOptions(value ? filtered : options);
setCustomValue(value);
};

useEffect(() => {
if (disabled && value !== "") {
onSelect("", undefined, true);
}
}, [disabled]);

useEffect(() => {
if (open) {
const filtered = cloneDeep(options);
if (customValue === value && combobox) {
if (customValue === value && value && combobox) {
filtered.push(customValue);
}
setFilteredOptions(filtered);
Expand All @@ -64,7 +71,7 @@ export default function Dropdown({

return (
<>
{Object.keys(options ?? [])?.length > 0 ? (
{Object.keys(options ?? [])?.length > 0 || combobox ? (
<>
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
Expand Down Expand Up @@ -131,32 +138,40 @@ export default function Dropdown({
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, id) => (
<CommandItem
<ShadTooltip
delayDuration={700}
key={id}
value={option}
onSelect={(currentValue) => {
onSelect(currentValue);
setOpen(false);
}}
className="items-center truncate"
data-testid={`${option}-${id ?? ""}-option`}
content={option}
>
{customValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
{option}
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 text-primary",
value === option ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
<div>
<CommandItem
key={id}
value={option}
onSelect={(currentValue) => {
onSelect(currentValue);
setOpen(false);
}}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${id ?? ""}-option`}
>
{customValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value === option ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/components/inputListComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function InputListComponent({
}: InputListComponentType): JSX.Element {
useEffect(() => {
if (disabled && value.length > 0 && value[0] !== "") {
onChange([""]);
onChange([""], undefined, true);
}
}, [disabled]);

Expand Down
83 changes: 50 additions & 33 deletions src/frontend/src/components/multiselectComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
import { MultiselectComponentType } from "../../types/components";
import { cn } from "../../utils/utils";
import { default as ForwardedIconComponent } from "../genericIconComponent";
import ShadTooltip from "../shadTooltipComponent";
import { Button } from "../ui/button";
import {
Command,
Expand Down Expand Up @@ -51,7 +52,7 @@ export default function MultiselectComponent({
const fuse = onlySelected ? fuseValues : fuseOptions;
const searchValues = fuse.search(v);
let filtered: string[] = searchValues.map((search) => search.item);
if (!filtered.includes(v) && combobox) filtered = [v, ...filtered];
if (!filtered.includes(v) && combobox && v) filtered = [v, ...filtered];
setFilteredOptions(
v
? filtered
Expand All @@ -61,6 +62,12 @@ export default function MultiselectComponent({
);
};

useEffect(() => {
if (disabled && value.length > 0 && value[0] !== "") {
onSelect([], undefined, true);
}
}, [disabled]);

useEffect(() => {
searchRoleByTerm(searchValue);
}, [onlySelected]);
Expand All @@ -72,7 +79,7 @@ export default function MultiselectComponent({
useEffect(() => {
setCustomValues(value.filter((v) => !defaultOptions.includes(v)) ?? []);
setOptions([
...value.filter((v) => !defaultOptions.includes(v)),
...value.filter((v) => !defaultOptions.includes(v) && v),
...defaultOptions,
]);
}, [value]);
Expand All @@ -87,7 +94,7 @@ export default function MultiselectComponent({

return (
<>
{Object.keys(options ?? [])?.length > 0 ? (
{Object.keys(options ?? [])?.length > 0 || combobox ? (
<>
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
Expand Down Expand Up @@ -171,38 +178,48 @@ export default function MultiselectComponent({
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, id) => (
<CommandItem
<ShadTooltip
delayDuration={700}
key={id}
value={option}
onSelect={(currentValue) => {
if (value.includes(currentValue)) {
onSelect(value.filter((v) => v !== currentValue));
} else {
onSelect([...value, currentValue]);
}
}}
className="items-center truncate"
data-testid={`${option}-${id ?? ""}-option`}
content={option}
>
{customValues.includes(option) ||
searchValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
{option}
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 text-primary",
value.includes(option)
? "opacity-100"
: "opacity-0",
)}
/>
</CommandItem>
<div>
<CommandItem
key={id}
value={option}
onSelect={(currentValue) => {
if (value.includes(currentValue)) {
onSelect(
value.filter((v) => v !== currentValue),
);
} else {
onSelect([...value, currentValue]);
}
}}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${id ?? ""}-option`}
>
{customValues.includes(option) ||
searchValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value.includes(option)
? "opacity-100"
: "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/contexts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
<BrowserRouter>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<TooltipProvider>
<TooltipProvider skipDelayDuration={0}>
<ReactFlowProvider>
<ApiInterceptor />
{children}
Expand Down
6 changes: 3 additions & 3 deletions src/frontend/src/types/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export type DropDownComponentType = {
value: string;
combobox?: boolean;
options: string[];
onSelect: (value: string) => void;
onSelect: (value: string, dbValue?: boolean, snapshot?: boolean) => void;
editNode?: boolean;
id?: string;
children?: ReactNode;
Expand All @@ -67,7 +67,7 @@ export type MultiselectComponentType = {
value: string[];
combobox?: boolean;
options: string[];
onSelect: (value: string[]) => void;
onSelect: (value: string[], dbValue?: boolean, snapshot?: boolean) => void;
editNode?: boolean;
id?: string;
children?: ReactNode;
Expand Down Expand Up @@ -96,7 +96,7 @@ export type ParameterComponentType = {
};
export type InputListComponentType = {
value: string[];
onChange: (value: string[]) => void;
onChange: (value: string[], dbValue?: boolean, snapshot?: boolean) => void;
disabled: boolean;
editNode?: boolean;
componentName?: string;
Expand Down
Loading