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.

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 standard filters for languages in the Set Targets step #2045

Merged
merged 10 commits into from
Aug 14, 2024
41 changes: 20 additions & 21 deletions client/src/app/pages/applications/analysis-wizard/set-targets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Application, TagCategory, Target } from "@app/api/models";
import { useFetchTagCategories } from "@app/queries/tags";
import { SimpleSelectCheckbox } from "@app/components/SimpleSelectCheckbox";
import { getUpdatedFormLabels, toggleSelectedTargets } from "./utils";
import { unique } from "radash";

interface SetTargetsProps {
applications: Application[];
Expand Down Expand Up @@ -48,22 +49,23 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
);
};

const initialProviders = Array.from(
new Set(
applications
.flatMap((app) => app.tags || [])
.map((tag) => {
return {
category: findCategoryForTag(tag.id),
tag,
};
})
.filter((tagWithCat) => tagWithCat?.category?.name === "Language")
.map((tagWithCat) => tagWithCat.tag.name)
)
).filter(Boolean);
const allProviders = targets.flatMap((target) => target.provider);
const languageOptions = Array.from(new Set(allProviders));
rszwajko marked this conversation as resolved.
Show resolved Hide resolved

const [providers, setProviders] = useState(initialProviders);
const initialProviders = unique(
rszwajko marked this conversation as resolved.
Show resolved Hide resolved
applications
.flatMap((app) => app.tags || [])
.map((tag) => {
return {
category: findCategoryForTag(tag.id),
tag,
};
})
.filter((tag) => tag?.category?.name === "Language")
.map((languageTag) => languageTag.tag.name)
).filter((language) => languageOptions.includes(language));

const [selectedProviders, setSelectedProviders] = useState(initialProviders);

const handleOnSelectedCardTargetChange = (selectedLabelName: string) => {
const otherSelectedLabels = formLabels?.filter((formLabel) => {
Expand Down Expand Up @@ -118,16 +120,13 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
setValue("formLabels", updatedFormLabels);
};

const allProviders = targets.flatMap((target) => target.provider);
const languageOptions = Array.from(new Set(allProviders));

const targetsToRender: Target[] = !targetOrderSetting.isSuccess
? []
: targetOrderSetting.data
.map((targetId) => targets.find((target) => target.id === targetId))
.filter(Boolean)
.filter((target) =>
providers.some((p) => target.provider?.includes(p) ?? false)
selectedProviders.some((p) => target.provider?.includes(p) ?? false)
);

return (
Expand All @@ -145,15 +144,15 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
<SimpleSelectCheckbox
placeholderText="Filter by language..."
width={300}
value={providers}
value={selectedProviders}
options={languageOptions?.map((language): SelectOptionProps => {
return {
children: <div>{language}</div>,
value: language,
};
})}
onChange={(selection) => {
setProviders(selection as string[]);
setSelectedProviders(selection as string[]);
rszwajko marked this conversation as resolved.
Show resolved Hide resolved
}}
id="filter-by-language"
toggleId="action-select-toggle"
Expand Down
Loading