[Nu-1892] add missing tooltips (#7193)

* NU-1892 add missing tooltips
TouK · Nov 21, 2024 · 7aa80a8 · 7aa80a8
1 parent 59f3ac4
commit 7aa80a8
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 3 deletions.
diff --git 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<ScenarioParametersCombination[]>([]);
     const [isAllCombinationsLoading, setIsAllCombinationsLoading] = useState<boolean>(false);
 
@@ -33,7 +35,11 @@ export const CategoryDetails = ({ scenario }: { scenario: Scenario }) => {
             {isAllCombinationsLoading ? (
                 <Skeleton variant="text" sx={{ fontSize: "1.25rem" }} width={"50%"} />
             ) : (
-                isCategoryFieldVisible && <Typography variant={"body2"}>{scenario.processCategory} /</Typography>
+                isCategoryFieldVisible && (
+                    <Typography title={t("panels.scenarioDetails.tooltip.category", "Category")} variant={"body2"}>
+                        {scenario.processCategory} /
+                    </Typography>
+                )
             )}
         </>
     );

diff --git 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
@@ -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 (
                                     <StyledLabelChip
+                                        title={t("panels.scenarioDetails.tooltip.label", "Scenario label: {{label}}", {
+                                            label: option.title,
+                                        })}
                                         key={key}
                                         data-testid={`scenario-label-${index}`}
                                         color={labelError ? "error" : "default"}

diff --git a/designer/submodules/packages/components/src/common/categoryChip.tsx b/designer/submodules/packages/components/src/common/categoryChip.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { Button, Chip, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 interface Props {
     category: string;
@@ -23,6 +24,7 @@ export function CategoryChip({ category, filterValues, setFilter }: Props): JSX.
 }
 
 export function CategoryButton({ category, filterValues, setFilter }: Props): JSX.Element {
+    const { t } = useTranslation();
     const isSelected = useMemo(() => filterValues.includes(category), [filterValues, category]);
 
     const onClick = useCallback(
@@ -36,6 +38,7 @@ export function CategoryButton({ category, filterValues, setFilter }: Props): JS
 
     return (
         <Typography
+            title={t("scenariosList.tooltip.category", "Category")}
             component={Button}
             color={isSelected ? "primary" : "inherit"}
             sx={{

diff --git a/designer/submodules/packages/components/src/common/labelChip.tsx b/designer/submodules/packages/components/src/common/labelChip.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { Chip, styled } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 interface Props {
     id: string;
@@ -13,6 +14,7 @@ const StyledLabelChip = styled(Chip)({
 });
 
 export function LabelChip({ id, value, filterValue, setFilter }: Props): JSX.Element {
+    const { t } = useTranslation();
     const isSelected = useMemo(() => filterValue.includes(value), [filterValue, value]);
 
     const onClick = useCallback(
@@ -26,6 +28,7 @@ export function LabelChip({ id, value, filterValue, setFilter }: Props): JSX.Ele
 
     return (
         <StyledLabelChip
+            title={t("scenariosList.tooltip.label", "Scenario label: {{label}}", { label: value })}
             key={id}
             color={isSelected ? "primary" : "default"}
             size="small"

diff --git a/designer/submodules/packages/components/src/scenarios/list/processingMode.tsx b/designer/submodules/packages/components/src/scenarios/list/processingMode.tsx
@@ -6,6 +6,7 @@ import i18next from "i18next";
 import Streaming from "../../assets/icons/streaming.svg";
 import Batch from "../../assets/icons/batch.svg";
 import RequestResponse from "../../assets/icons/request-response.svg";
+import { useTranslation } from "react-i18next";
 
 export enum ProcessingMode {
     "streaming" = "Unbounded-Stream",
@@ -36,6 +37,7 @@ interface Props {
     filtersContext: FiltersContextType<ScenariosFiltersModel>;
 }
 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 (
         <Button
+            title={t("scenariosList.tooltip.processingMode", "Processing mode")}
             color={isSelected ? "primary" : "inherit"}
             sx={{ textTransform: "capitalize", display: "flex", gap: 1, alignItems: "center", fontSize: "1rem", py: 0.25, mx: 0 }}
             onClick={onClick}

diff --git a/designer/submodules/packages/components/src/scenarios/list/scenarioAvatar.tsx b/designer/submodules/packages/components/src/scenarios/list/scenarioAvatar.tsx
@@ -3,11 +3,16 @@ import React from "react";
 import { TableCellAvatar } from "./tableCellAvatar";
 import ScanarioIcon from "../../assets/icons/scenario.svg";
 import FragmentIcon from "../../assets/icons/fragment.svg";
+import { useTranslation } from "react-i18next";
 
 export function ScenarioAvatar({ scenario }: { scenario: Pick<Scenario, "isFragment" | "state"> }) {
+    const { t } = useTranslation();
     const { isFragment } = scenario;
+
     return (
-        <TableCellAvatar>
+        <TableCellAvatar
+            title={isFragment ? t("scenariosList.tooltip.fragment", "Fragment") : t("scenariosList.tooltip.scenario", "Scenario")}
+        >
             {isFragment ? <FragmentIcon width={"1em"} height={"1em"} /> : <ScanarioIcon width={"1em"} height={"1em"} />}
         </TableCellAvatar>
     );

diff --git a/designer/submodules/packages/components/src/scenarios/list/scenarioStatus.tsx b/designer/submodules/packages/components/src/scenarios/list/scenarioStatus.tsx
@@ -31,6 +31,7 @@ export const ScenarioStatus = ({ state, filtersContext }: Props) => {
 
     return (
         <Button
+            title={t("scenariosList.tooltip.status", "Status")}
             color={isSelected ? "primary" : "inherit"}
             sx={{ textTransform: "capitalize", display: "flex", gap: 1, alignItems: "center", fontSize: "1rem", py: 0.25, px: 0.25 }}
             onClick={onClick}

diff --git a/designer/submodules/packages/components/src/scenarios/list/tableCellAvatar.tsx b/designer/submodules/packages/components/src/scenarios/list/tableCellAvatar.tsx
@@ -1,7 +1,7 @@
 import { Avatar } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
-export function TableCellAvatar({ children }: PropsWithChildren<unknown>) {
+export function TableCellAvatar({ children, title }: PropsWithChildren<{ title?: string }>) {
     return (
         <Avatar
             variant="rounded"
@@ -24,6 +24,7 @@ export function TableCellAvatar({ children }: PropsWithChildren<unknown>) {
                     fontSize: "1em",
                 },
             }}
+            title={title}
         >
             {children}
         </Avatar>

diff --git a/docs/Changelog.md b/docs/Changelog.md
@@ -103,6 +103,7 @@
 * [#7182](https://github.com/TouK/nussknacker/pull/7182) Provide an unique validation message to the scenario labels
 * [#7178](https://github.com/TouK/nussknacker/pull/7178) Remove autocompletion from markdown editors
 * [#7159](https://github.com/TouK/nussknacker/pull/7159) Fix running scenario tests with provided fragment input validation 
+* [#7193](https://github.com/TouK/nussknacker/pull/7193) Provide tooltips to the scenarios list and scenario details elements
 * [#7187](https://github.com/TouK/nussknacker/pull/7187) Fix "Failed to get node validation" when using literal lists that mixes different types of elements
 
 ## 1.17