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

🌱 Refactor table filterCategories definitions, rename the prop key to categoryKey #1800

Merged
merged 2 commits into from
Mar 28, 2024
Merged
Changes from all commits
Commits
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
24 changes: 12 additions & 12 deletions client/src/app/components/FilterToolbar/FilterToolbar.tsx
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ export interface IBasicFilterCategory<
TFilterCategoryKey extends string, // Unique identifiers for each filter category (inferred from key properties if possible)
> {
/** For use in the filterValues state object. Must be unique per category. */
key: TFilterCategoryKey;
categoryKey: TFilterCategoryKey;
/** Title of the filter as displayed in the filter selection dropdown and filter chip groups. */
title: string;
/** Type of filter component to use to select the filter's content. */
@@ -119,22 +119,22 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] =
React.useState(false);
const [currentFilterCategoryKey, setCurrentFilterCategoryKey] =
React.useState(filterCategories[0].key);
React.useState(filterCategories[0].categoryKey);

const onCategorySelect = (
category: FilterCategory<TItem, TFilterCategoryKey>
) => {
setCurrentFilterCategoryKey(category.key);
setCurrentFilterCategoryKey(category.categoryKey);
setIsCategoryDropdownOpen(false);
};

const setFilterValue = (
category: FilterCategory<TItem, TFilterCategoryKey>,
newValue: FilterValue
) => setFilterValues({ ...filterValues, [category.key]: newValue });
) => setFilterValues({ ...filterValues, [category.categoryKey]: newValue });

const currentFilterCategory = filterCategories.find(
(category) => category.key === currentFilterCategoryKey
(category) => category.categoryKey === currentFilterCategoryKey
);

const filterGroups = filterCategories.reduce(
@@ -157,8 +157,8 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
.map((filterCategory) => {
return (
<DropdownItem
id={`filter-category-${filterCategory.key}`}
key={filterCategory.key}
id={`filter-category-${filterCategory.categoryKey}`}
key={filterCategory.categoryKey}
onClick={() => onCategorySelect(filterCategory)}
>
{filterCategory.title}
@@ -171,8 +171,8 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
} else {
return filterCategories.map((category) => (
<DropdownItem
id={`filter-category-${category.key}`}
key={category.key}
id={`filter-category-${category.categoryKey}`}
key={category.categoryKey}
onClick={() => onCategorySelect(category)}
>
{category.title}
@@ -215,13 +215,13 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({

{filterCategories.map((category) => (
<FilterControl<TItem, TFilterCategoryKey>
key={category.key}
key={category.categoryKey}
category={category}
filterValue={filterValues[category.key]}
filterValue={filterValues[category.categoryKey]}
setFilterValue={(newValue) => setFilterValue(category, newValue)}
showToolbarItem={
showFiltersSideBySide ||
currentFilterCategory?.key === category.key
currentFilterCategory?.categoryKey === category.categoryKey
}
isDisabled={isDisabled}
/>
Original file line number Diff line number Diff line change
@@ -356,7 +356,7 @@ export const MultiselectFilterControl = <TItem,>({

return (
<ToolbarFilter
id={`filter-control-${category.key}`}
id={`filter-control-${category.categoryKey}`}
chips={chips}
deleteChip={(_, chip) => onFilterClear(chip)}
deleteChipGroup={onFilterClearAll}
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ export const SearchFilterControl = <TItem, TFilterCategoryKey extends string>({
setFilterValue(trimmedValue ? [trimmedValue.replace(/\s+/g, " ")] : []);
};

const id = `${category.key}-input`;
const id = `${category.categoryKey}-input`;
return (
<ToolbarFilter
chips={filterValue || []}
Original file line number Diff line number Diff line change
@@ -82,7 +82,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({

return (
<ToolbarFilter
id={`filter-control-${category.key}`}
id={`filter-control-${category.categoryKey}`}
chips={chips}
deleteChip={(_, chip) => onFilterClear(chip as string)}
categoryName={category.title}
Original file line number Diff line number Diff line change
@@ -98,7 +98,7 @@ export const getFilterHubRequestParams = <
const { filterValues } = filterState;
objectKeys(filterValues).forEach((categoryKey) => {
const filterCategory = filterCategories?.find(
(category) => category.key === categoryKey
(category) => category.categoryKey === categoryKey
);
const filterValue = filterValues[categoryKey];
if (!filterCategory || !filterValue) return;
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export const getLocalFilterDerivedState = <
const values = filterValues[categoryKey];
if (!values || values.length === 0) return true;
const filterCategory = filterCategories.find(
(category) => category.key === categoryKey
(category) => category.categoryKey === categoryKey
);
let itemValue = (item as any)[categoryKey];
if (filterCategory?.getItemValue) {
Original file line number Diff line number Diff line change
@@ -118,7 +118,7 @@ export const CustomRules: React.FC = () => {

const filterCategories: FilterCategory<IReadFile, "name">[] = [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
Original file line number Diff line number Diff line change
@@ -338,7 +338,7 @@ export const ApplicationsTable: React.FC = () => {
}),
filterCategories: [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.multiselect,
placeholderText:
@@ -353,7 +353,7 @@ export const ApplicationsTable: React.FC = () => {
].map((name) => ({ key: name, value: name })),
},
{
key: "archetypes",
categoryKey: "archetypes",
title: t("terms.archetypes"),
type: FilterType.multiselect,
placeholderText:
@@ -382,7 +382,7 @@ export const ApplicationsTable: React.FC = () => {
logicOperator: "OR",
},
{
key: "businessService",
categoryKey: "businessService",
title: t("terms.businessService"),
placeholderText:
t("actions.filterBy", {
@@ -398,7 +398,7 @@ export const ApplicationsTable: React.FC = () => {
getItemValue: (item) => item.businessService?.name || "",
},
{
key: "identities",
categoryKey: "identities",
title: t("terms.credentialType"),
placeholderText:
t("actions.filterBy", {
@@ -423,7 +423,7 @@ export const ApplicationsTable: React.FC = () => {
},
},
{
key: "repository",
categoryKey: "repository",
title: t("terms.repositoryType"),
placeholderText:
t("actions.filterBy", {
@@ -437,7 +437,7 @@ export const ApplicationsTable: React.FC = () => {
getItemValue: (item) => item?.repository?.kind || "",
},
{
key: "binary",
categoryKey: "binary",
title: t("terms.artifact"),
placeholderText:
t("actions.filterBy", {
@@ -458,7 +458,7 @@ export const ApplicationsTable: React.FC = () => {
},
},
{
key: "tags",
categoryKey: "tags",
title: t("terms.tags"),
type: FilterType.multiselect,
placeholderText:
@@ -483,7 +483,7 @@ export const ApplicationsTable: React.FC = () => {
},
},
{
key: "risk",
categoryKey: "risk",
title: t("terms.risk"),
type: FilterType.multiselect,
placeholderText:
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ export const ApplicationFacts: React.FC<IApplicationRiskProps> = ({

const filterCategories: FilterCategory<Fact, "source">[] = [
{
key: "source",
categoryKey: "source",
title: t("terms.source"),
type: FilterType.multiselect,
placeholderText: t("terms.source"),
Original file line number Diff line number Diff line change
@@ -130,7 +130,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
"source" | "tagCategory"
>[] = [
{
key: "source",
categoryKey: "source",
title: t("terms.source"),
type: FilterType.multiselect,
placeholderText: t("terms.source"),
@@ -142,7 +142,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
logicOperator: "OR",
},
{
key: "tagCategory",
categoryKey: "tagCategory",
title: t("terms.tagCategory"),
type: FilterType.multiselect,
placeholderText: t("terms.tagCategory"),
Original file line number Diff line number Diff line change
@@ -101,7 +101,7 @@ export const ManageImportsDetails: React.FC = () => {
"Application Name"
>[] = [
{
key: "Application Name",
categoryKey: "Application Name",
title: "Application Name",
type: FilterType.search,
placeholderText: "Filter by application name...",
Original file line number Diff line number Diff line change
@@ -96,7 +96,7 @@ export const ManageImports: React.FC = () => {
hasActionsColumn: true,
filterCategories: [
{
key: "filename",
categoryKey: "filename",
title: t("terms.filename"),
type: FilterType.search,
placeholderText:
4 changes: 2 additions & 2 deletions client/src/app/pages/archetypes/archetypes-page.tsx
Original file line number Diff line number Diff line change
@@ -217,7 +217,7 @@ const Archetypes: React.FC = () => {

filterCategories: [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
@@ -229,7 +229,7 @@ const Archetypes: React.FC = () => {
},
},
{
key: "application.name",
categoryKey: "application.name",
title: t("terms.applicationName"),
type: FilterType.multiselect,
logicOperator: "OR",
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@ const AssessmentSettings: React.FC = () => {
hasActionsColumn: true,
filterCategories: [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
Original file line number Diff line number Diff line change
@@ -95,7 +95,7 @@ export const BusinessServices: React.FC = () => {
hasActionsColumn: true,
filterCategories: [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
@@ -107,7 +107,7 @@ export const BusinessServices: React.FC = () => {
},
},
{
key: "description",
categoryKey: "description",
title: t("terms.description"),
type: FilterType.search,
placeholderText:
@@ -119,7 +119,7 @@ export const BusinessServices: React.FC = () => {
},
},
{
key: "owner",
categoryKey: "owner",
title: t("terms.createdBy"),
type: FilterType.search,
placeholderText:
Original file line number Diff line number Diff line change
@@ -61,7 +61,7 @@ export const JobFunctions: React.FC = () => {

const filterCategories: FilterCategory<JobFunction, "name">[] = [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
Original file line number Diff line number Diff line change
@@ -115,7 +115,7 @@ export const StakeholderGroups: React.FC = () => {
hasActionsColumn: true,
filterCategories: [
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
@@ -127,7 +127,7 @@ export const StakeholderGroups: React.FC = () => {
},
},
{
key: "description",
categoryKey: "description",
title: t("terms.description"),
type: FilterType.search,
placeholderText:
@@ -139,7 +139,7 @@ export const StakeholderGroups: React.FC = () => {
},
},
{
key: "stakeholders",
categoryKey: "stakeholders",
title: t("terms.stakeholders"),
type: FilterType.search,
placeholderText:
8 changes: 4 additions & 4 deletions client/src/app/pages/controls/stakeholders/stakeholders.tsx
Original file line number Diff line number Diff line change
@@ -112,7 +112,7 @@ export const Stakeholders: React.FC = () => {
hasActionsColumn: true,
filterCategories: [
{
key: "email",
categoryKey: "email",
title: t("terms.email"),
type: FilterType.search,
placeholderText:
@@ -124,7 +124,7 @@ export const Stakeholders: React.FC = () => {
},
},
{
key: "name",
categoryKey: "name",
title: t("terms.name"),
type: FilterType.search,
placeholderText:
@@ -136,7 +136,7 @@ export const Stakeholders: React.FC = () => {
},
},
{
key: "jobFunction",
categoryKey: "jobFunction",
title: t("terms.jobFunction"),
type: FilterType.search,
placeholderText:
@@ -148,7 +148,7 @@ export const Stakeholders: React.FC = () => {
},
},
{
key: "stakeholderGroups",
categoryKey: "stakeholderGroups",
title: t("terms.stakeholderGroups"),
type: FilterType.search,
placeholderText:
6 changes: 3 additions & 3 deletions client/src/app/pages/controls/tags/tags.tsx
Original file line number Diff line number Diff line change
@@ -170,7 +170,7 @@ export const Tags: React.FC = () => {
"tags" | "rank" | "color"
>[] = [
{
key: "tags",
categoryKey: "tags",
title: t("terms.name"),
type: FilterType.multiselect,
placeholderText:
@@ -208,7 +208,7 @@ export const Tags: React.FC = () => {
),
},
{
key: "rank",
categoryKey: "rank",
title: t("terms.rank"),
type: FilterType.search,
placeholderText:
@@ -220,7 +220,7 @@ export const Tags: React.FC = () => {
},
},
{
key: "color",
categoryKey: "color",
title: t("terms.color"),
type: FilterType.search,
placeholderText:
Loading
Loading