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

👻 use pf5 select for set-targets #1526

Merged
merged 13 commits into from
Nov 22, 2023
Merged

👻 use pf5 select for set-targets #1526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b015961
use pf5 select for set-targets
gitdallas Nov 8, 2023
97fd352
use pf5 select for set-targets
gitdallas Nov 8, 2023
d6f941e
Merge branch 'chore/1242-set-target-use-new-select' of https://github…
gitdallas Nov 9, 2023
670c21e
Merge branch 'main' into chore/1242-set-target-use-new-select
gitdallas Nov 9, 2023
aa49fae
Merge branch 'main' into chore/1242-set-target-use-new-select
gitdallas Nov 13, 2023
54d676d
Merge branch 'chore/1242-set-target-use-new-select' of https://github…
gitdallas Nov 13, 2023
a25e1cc
add option to remove clear button
gitdallas Nov 13, 2023
d9d1578
Merge branch 'main' into chore/1242-set-target-use-new-select
gitdallas Nov 13, 2023
40b85f4
Merge branch 'main' into chore/1242-set-target-use-new-select
gitdallas Nov 14, 2023
bb5731b
Merge branch 'main' into chore/1242-set-target-use-new-select
gitdallas Nov 16, 2023
e16b7e7
Merge branch 'main' into chore/1242-set-target-use-new-select
ibolton336 Nov 20, 2023
1a4f68a
clear filter value onblur
gitdallas Nov 20, 2023
177a9ad
better spot for clearing typeahead filter value
gitdallas Nov 21, 2023
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
15 changes: 11 additions & 4 deletions client/src/app/components/SimpleSelectTypeahead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
toggleId?: string;
toggleAriaLabel?: string;
selectMultiple?: boolean;
width?: number;
noResultsFoundText?: string;
hideClearButton?: boolean;
}

export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
Expand All @@ -37,7 +39,9 @@
toggleId,
toggleAriaLabel,
selectMultiple = false,
width,
noResultsFoundText,
hideClearButton = false,
}) => {
const [isOpen, setIsOpen] = React.useState(false);
const [selected, setSelected] = React.useState<string | string[]>(
Expand Down Expand Up @@ -190,7 +194,8 @@
variant="typeahead"
onClick={onToggleClick}
isExpanded={isOpen}
isFullWidth
isFullWidth={!width}
style={{ width: width && width + "px" }}
>
<TextInputGroup isPlain>
<TextInputGroupMain
Expand All @@ -199,7 +204,9 @@
onChange={onTextInputChange}
onKeyDown={onInputKeyDown}
onBlur={() => {
setInputValue("");
selectMultiple
? setInputValue("")
: setInputValue(selected.toString());

Check warning on line 209 in client/src/app/components/SimpleSelectTypeahead.tsx

View check run for this annotation

Codecov / codecov/patch

client/src/app/components/SimpleSelectTypeahead.tsx#L208-L209 

Added lines #L208 - L209 were not covered by tests
}}
id="typeahead-select-input"
autoComplete="off"
Expand Down Expand Up @@ -243,7 +250,7 @@
<TimesIcon aria-hidden />
</Button>
)}
{!selectMultiple && !!inputValue && (
{!hideClearButton && !selectMultiple && !!inputValue && (
<Button
variant="plain"
onClick={() => {
Expand All @@ -264,13 +271,13 @@
);
return (
<>
<div>selected: {[selected].join(",")}</div>
<Select
id={id}
isOpen={isOpen}
selected={selected}
onSelect={onSelect}
onOpenChange={() => {
setFilterValue("");

Check warning on line 280 in client/src/app/components/SimpleSelectTypeahead.tsx

View check run for this annotation

Codecov / codecov/patch

client/src/app/components/SimpleSelectTypeahead.tsx#L280 

Added line #L280 was not covered by tests
setIsOpen(false);
}}
toggle={toggle}
Expand Down
37 changes: 22 additions & 15 deletions client/src/app/pages/applications/analysis-wizard/set-targets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import { useSetting } from "@app/queries/settings";
import { useFetchTargets } from "@app/queries/targets";
import { Target } from "@app/api/models";
import { SimpleSelect } from "@app/components/SimpleSelect";
import { SimpleSelectTypeahead } from "@app/components/SimpleSelectTypeahead";

export const SetTargets: React.FC = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -135,20 +135,28 @@
{t("wizard.terms.setTargets")}
</Title>
<Text>{t("wizard.label.setTargets")}</Text>
<SimpleSelect
width={200}
variant="typeahead"
id="action-select"
toggleId="action-select-toggle"
toggleAriaLabel="Action select dropdown toggle"
aria-label={"Select provider"}
value={provider}
options={["Java", "Go"]}
onChange={(selection) => {
setProvider(selection as string);
}}
/>
</TextContent>
<SimpleSelectTypeahead
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the SimpleSelectTypeahead actually be contained within the above TextContent to match the location of the previous SimpleSelect?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... Nope. If the new component is inside the TextContent, the drop down menu renders weird:
image

outside of the TextContent it is fine.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this is related to my comment at the top of this PR

width={200}
value={provider}
toggleAriaLabel="Action select dropdown toggle"
toggleId="action-select-toggle"
hideClearButton
id="action-select"
ibolton336 marked this conversation as resolved.
Show resolved Hide resolved
options={[
{
value: "Java",
children: "Java",
},
{
value: "Go",
children: "Go",
},
]}
onChange={(selection) => {
setProvider(selection as string);

Check warning on line 157 in client/src/app/pages/applications/analysis-wizard/set-targets.tsx

View check run for this annotation

Codecov / codecov/patch

client/src/app/pages/applications/analysis-wizard/set-targets.tsx#L156-L157 

Added lines #L156 - L157 were not covered by tests
}}
/>
{values.selectedTargets.length === 0 &&
values.customRulesFiles.length === 0 &&
!values.sourceRepository && (
Expand All @@ -158,7 +166,6 @@
title={t("wizard.label.skipTargets")}
/>
)}

<Gallery hasGutter>
{targetOrderSetting.isSuccess
? targetOrderSetting.data.map((id, index) => {
Expand Down
Loading