diff --git a/plane-src/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx b/plane-src/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx index c4b6f3f..7346e07 100644 --- a/plane-src/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx +++ b/plane-src/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx @@ -7,6 +7,7 @@ import { useCallback, useMemo } from "react"; import { AtSign, Briefcase } from "lucide-react"; // plane imports +import { useTranslation } from "@plane/i18n"; import { Logo } from "@plane/propel/emoji-icon-picker"; import { CalendarLayoutIcon, @@ -91,6 +92,7 @@ export type TWorkItemFiltersConfig = { export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps): TWorkItemFiltersConfig => { const { allowedFilters, cycleIds, labelIds, memberIds, moduleIds, projectId, projectIds, stateIds, workspaceSlug } = props; + const { t } = useTranslation(); // store hooks const { loader: projectLoader, getProjectById } = useProject(); const { getCycleById } = useCycle(); @@ -152,11 +154,13 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps): () => getStateGroupFilterConfig("state_group")({ isEnabled: isFilterEnabled("state_group"), + filterLabel: t("common.state_group"), filterIcon: StatePropertyIcon, + getItemLabel: (stateGroupKey) => t(`workspace_projects.state.${stateGroupKey}`), getOptionIcon: (stateGroupKey) => , ...operatorConfigs, }), - [isFilterEnabled, operatorConfigs] + [isFilterEnabled, operatorConfigs, t] ); // state filter config @@ -298,11 +302,13 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps): () => getPriorityFilterConfig("priority")({ isEnabled: isFilterEnabled("priority"), + filterLabel: t("common.priority"), filterIcon: PriorityPropertyIcon, + getItemLabel: (priorityKey) => (priorityKey === "none" ? t("common.none") : t(priorityKey)), getOptionIcon: (priority) => , ...operatorConfigs, }), - [isFilterEnabled, operatorConfigs] + [isFilterEnabled, operatorConfigs, t] ); // start date filter config diff --git a/plane-src/packages/utils/src/work-item-filters/configs/filters/priority.ts b/plane-src/packages/utils/src/work-item-filters/configs/filters/priority.ts index 0442f44..b23decf 100644 --- a/plane-src/packages/utils/src/work-item-filters/configs/filters/priority.ts +++ b/plane-src/packages/utils/src/work-item-filters/configs/filters/priority.ts @@ -18,7 +18,11 @@ import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } f /** * Priority filter specific params */ -export type TCreatePriorityFilterParams = TCreateFilterConfigParams & IFilterIconConfig; +export type TCreatePriorityFilterParams = TCreateFilterConfigParams & + IFilterIconConfig & { + filterLabel?: string; + getItemLabel?: (priorityKey: TIssuePriorities) => string; + }; /** * Helper to get the priority multi select config @@ -33,7 +37,7 @@ export const getPriorityMultiSelectConfig = ( { items: ISSUE_PRIORITIES, getId: (priority) => priority.key, - getLabel: (priority) => priority.title, + getLabel: (priority) => params.getItemLabel?.(priority.key) ?? priority.title, getValue: (priority) => priority.key, getIconData: (priority) => priority.key, }, @@ -57,7 +61,7 @@ export const getPriorityFilterConfig = (params: TCreatePriorityFilterParams) => createFilterConfig

({ id: key, - label: "Priority", + label: params.filterLabel ?? "Priority", ...params, icon: params.filterIcon, supportedOperatorConfigsMap: new Map([ diff --git a/plane-src/packages/utils/src/work-item-filters/configs/filters/state.ts b/plane-src/packages/utils/src/work-item-filters/configs/filters/state.ts index 04e8362..ac0bb8a 100644 --- a/plane-src/packages/utils/src/work-item-filters/configs/filters/state.ts +++ b/plane-src/packages/utils/src/work-item-filters/configs/filters/state.ts @@ -17,7 +17,11 @@ import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } f /** * State group filter specific params */ -export type TCreateStateGroupFilterParams = TCreateFilterConfigParams & IFilterIconConfig; +export type TCreateStateGroupFilterParams = TCreateFilterConfigParams & + IFilterIconConfig & { + filterLabel?: string; + getItemLabel?: (stateGroupKey: TStateGroups) => string; +}; /** * Helper to get the state group multi select config @@ -32,7 +36,7 @@ export const getStateGroupMultiSelectConfig = ( { items: Object.values(STATE_GROUPS), getId: (state) => state.key, - getLabel: (state) => state.label, + getLabel: (state) => params.getItemLabel?.(state.key) ?? state.label, getValue: (state) => state.key, getIconData: (state) => state.key, }, @@ -56,7 +60,7 @@ export const getStateGroupFilterConfig = (params: TCreateStateGroupFilterParams) => createFilterConfig

({ id: key, - label: "State Group", + label: params.filterLabel ?? "State Group", ...params, icon: params.filterIcon, supportedOperatorConfigsMap: new Map([