diff --git a/designer/client/src/components/toolbars/scenarioDetails/CategoryDetails.tsx b/designer/client/src/components/toolbars/scenarioDetails/CategoryDetails.tsx index 60b2d1b3b3b..07be4f6473d 100644 --- a/designer/client/src/components/toolbars/scenarioDetails/CategoryDetails.tsx +++ b/designer/client/src/components/toolbars/scenarioDetails/CategoryDetails.tsx @@ -3,8 +3,10 @@ import { useProcessFormDataOptions } from "../../useProcessFormDataOptions"; import HttpService, { ScenarioParametersCombination } from "../../../http/HttpService"; import { Skeleton, Typography } from "@mui/material"; import { Scenario } from "../../Process/types"; +import { useTranslation } from "react-i18next"; export const CategoryDetails = ({ scenario }: { scenario: Scenario }) => { + const { t } = useTranslation(); const [allCombinations, setAllCombinations] = useState([]); const [isAllCombinationsLoading, setIsAllCombinationsLoading] = useState(false); @@ -33,7 +35,11 @@ export const CategoryDetails = ({ scenario }: { scenario: Scenario }) => { {isAllCombinationsLoading ? ( ) : ( - isCategoryFieldVisible && {scenario.processCategory} / + isCategoryFieldVisible && ( + + {scenario.processCategory} / + + ) )} ); diff --git a/designer/client/src/components/toolbars/scenarioDetails/ScenarioDetailsComponents.tsx b/designer/client/src/components/toolbars/scenarioDetails/ScenarioDetailsComponents.tsx index 21810a99560..1693c49d114 100644 --- a/designer/client/src/components/toolbars/scenarioDetails/ScenarioDetailsComponents.tsx +++ b/designer/client/src/components/toolbars/scenarioDetails/ScenarioDetailsComponents.tsx @@ -1,4 +1,5 @@ import { css, styled, Typography } from "@mui/material"; +import i18next from "i18next"; export const PanelScenarioDetails = styled("div")( ({ theme }) => css` @@ -26,6 +27,10 @@ export const ScenarioDetailsItemWrapper = styled("div")( export const ProcessName = styled(Typography)``; +ProcessName.defaultProps = { + title: i18next.t("panels.scenarioDetails.tooltip.name", "Name"), +}; + export const ProcessRename = styled(ProcessName)(({ theme }) => ({ color: theme.palette.warning.main, })); diff --git a/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx b/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx index 06b5c7d5d50..6126f30b30c 100644 --- a/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx +++ b/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx @@ -21,6 +21,7 @@ import i18next from "i18next"; import { editScenarioLabels } from "../../../actions/nk"; import { debounce } from "lodash"; import { ScenarioLabelValidationError } from "../../Labels/types"; +import { useTranslation } from "react-i18next"; interface AddLabelProps { onClick: () => void; @@ -107,6 +108,7 @@ interface Props { } export const ScenarioLabels = ({ readOnly }: Props) => { + const { t } = useTranslation(); const scenarioLabels = useSelector(getScenarioLabels); const scenarioLabelOptions: LabelOption[] = useMemo(() => scenarioLabels.map(toLabelOption), [scenarioLabels]); const initialScenarioLabelOptionsErrors = useSelector(getScenarioLabelsErrors).filter((error) => @@ -352,6 +354,9 @@ export const ScenarioLabels = ({ readOnly }: Props) => { const labelError = labelOptionsErrors.find((error) => error.label === toLabelValue(option)); return ( filterValues.includes(category), [filterValues, category]); const onClick = useCallback( @@ -36,6 +38,7 @@ export function CategoryButton({ category, filterValues, setFilter }: Props): JS return ( filterValue.includes(value), [filterValue, value]); const onClick = useCallback( @@ -26,6 +28,7 @@ export function LabelChip({ id, value, filterValue, setFilter }: Props): JSX.Ele return ( ; } export const ProcessingModeItem = ({ processingMode, filtersContext }: Props) => { + const { t } = useTranslation(); const { setFilter, getFilter } = filtersContext; const filterValue = useMemo(() => getFilter("PROCESSING_MODE", true), [getFilter]); @@ -58,6 +60,7 @@ export const ProcessingModeItem = ({ processingMode, filtersContext }: Props) => return (