[NU-1986] provide currently selected and deployed items visual adjust…

…ments (#7477) * NU-1986 provide currently selected and deployed items visual adjustments * NU-1986 provide i18n * Updated snapshots (#7478) Co-authored-by: Dzuming <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dzuming <[email protected]>
TouK · Jan 20, 2025 · 53ff3f7 · 53ff3f7
1 parent 0a840b4
commit 53ff3f7
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 28 deletions.
diff --git a/.../__image_snapshots__/electron/Linux/Activities should display activities #0.png b/.../__image_snapshots__/electron/Linux/Activities should display activities #0.png
diff --git a/.../__image_snapshots__/electron/Linux/Activities should display activities #2.png b/.../__image_snapshots__/electron/Linux/Activities should display activities #2.png
diff --git a/.../__image_snapshots__/electron/Linux/Activities should display activities #3.png b/.../__image_snapshots__/electron/Linux/Activities should display activities #3.png
diff --git a/...on/Linux/Sticky notes should add text to note and display it as markdown #0.png b/...on/Linux/Sticky notes should add text to note and display it as markdown #0.png
diff --git a/...snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png b/...snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png
diff --git a/...Linux/Sticky notes should disable sticky note when scenario is not saved #0.png b/...Linux/Sticky notes should disable sticky note when scenario is not saved #0.png
diff --git a/...ner/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx b/...ner/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useMemo } from "react";
-import { Button, styled, Typography } from "@mui/material";
+import { Button, styled, Tooltip, Typography } from "@mui/material";
 import { SearchHighlighter } from "../../creator/SearchHighlighter";
 import HttpService from "../../../../http/HttpService";
 import { ActionMetadata, ActivityAttachment, ActivityComment, ActivityType } from "../types";
@@ -20,6 +20,7 @@ import { ActivityItemCommentModify } from "./ActivityItemCommentModify";
 import { getLoggedUser } from "../../../../reducers/selectors/settings";
 import { getCapabilities } from "../../../../reducers/selectors/other";
 import { EventTrackingSelector, getEventTrackingProps } from "../../../../containers/event-tracking";
+import CircleIcon from "@mui/icons-material/Circle";
 
 const StyledHeaderIcon = styled(UrlIcon)(({ theme }) => ({
     width: "16px",
@@ -37,15 +38,18 @@ const StyledHeaderActionRoot = styled("div")(({ theme }) => ({
     gap: theme.spacing(0.5),
 }));
 
-const StyledActivityItemHeader = styled("div")<{ isHighlighted: boolean; isDeploymentActive: boolean; isActiveFound: boolean }>(
-    ({ theme, isHighlighted, isDeploymentActive, isActiveFound }) => ({
-        display: "flex",
-        alignItems: "center",
-        padding: theme.spacing(0.5, 0.5, 0.5, 0.75),
-        borderRadius: theme.spacing(0.5),
-        ...getHeaderColors(theme, isHighlighted, isDeploymentActive, isActiveFound),
-    }),
-);
+const StyledActivityItemHeader = styled("div")<{
+    isHighlighted: boolean;
+    isDeploymentActive: boolean;
+    isActiveFound: boolean;
+    isVersionSelected: boolean;
+}>(({ theme, isHighlighted, isDeploymentActive, isActiveFound, isVersionSelected }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0.5, 0.5, 0.75),
+    borderRadius: theme.spacing(0.5),
+    ...getHeaderColors(theme, isHighlighted, isDeploymentActive, isActiveFound, isVersionSelected),
+}));
 
 const HeaderActivity = ({
     activityAction,
@@ -233,30 +237,45 @@ const WithOpenVersion = ({
 const ActivityItemHeader = ({ activity, isDeploymentActive, isFound, isActiveFound, searchQuery }: Props) => {
     const scenario = useSelector(getScenario);
     const { processVersionId } = scenario || {};
+    const { t } = useTranslation();
 
     const isHighlighted = ["SCENARIO_DEPLOYED", "SCENARIO_CANCELED"].includes(activity.type);
     const openVersionEnable =
         ["SCENARIO_MODIFIED", "SCENARIO_DEPLOYED"].includes(activity.type) && activity.scenarioVersionId !== processVersionId;
+    const isVersionSelected = ["SCENARIO_MODIFIED"].includes(activity.type) && activity.scenarioVersionId === processVersionId;
 
     const getHeaderTitle = useMemo(() => {
         const text = activity.overrideDisplayableName || activity.activities.displayableName;
 
+        const activeItemIndicatorText = isDeploymentActive
+            ? t("activityItem.currentlyDeployedVersionText", "Currently deployed version")
+            : isVersionSelected
+            ? t("activityItem.currentlySelectedVersionText", "Currently selected version")
+            : undefined;
+
         const headerTitle = (
-            <Typography
-                variant={"caption"}
-                component={SearchHighlighter}
-                title={text}
-                highlights={[searchQuery]}
-                sx={(theme) => ({
-                    color: theme.palette.text.primary,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    textWrap: "noWrap",
-                    padding: !openVersionEnable && theme.spacing(0, 1),
-                })}
-            >
-                {text}
-            </Typography>
+            <>
+                <Typography
+                    variant={"caption"}
+                    component={SearchHighlighter}
+                    title={text}
+                    highlights={[searchQuery]}
+                    sx={(theme) => ({
+                        color: theme.palette.text.primary,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        textWrap: "noWrap",
+                        padding: !openVersionEnable && theme.spacing(0, 1),
+                    })}
+                >
+                    {text}
+                </Typography>
+                {activeItemIndicatorText && (
+                    <Tooltip title={activeItemIndicatorText}>
+                        <CircleIcon sx={{ fontSize: "10px", mx: openVersionEnable && 1 }} color={"primary"} />
+                    </Tooltip>
+                )}
+            </>
         );
 
         if (openVersionEnable) {
@@ -273,13 +292,21 @@ const ActivityItemHeader = ({ activity, isDeploymentActive, isFound, isActiveFou
         activity.overrideDisplayableName,
         activity.scenarioVersionId,
         activity.type,
+        isDeploymentActive,
         isFound,
+        isVersionSelected,
         openVersionEnable,
         searchQuery,
+        t,
     ]);
 
     return (
-        <StyledActivityItemHeader isHighlighted={isHighlighted} isDeploymentActive={isDeploymentActive} isActiveFound={isActiveFound}>
+        <StyledActivityItemHeader
+            isHighlighted={isHighlighted}
+            isDeploymentActive={isDeploymentActive}
+            isActiveFound={isActiveFound}
+            isVersionSelected={isVersionSelected}
+        >
             <StyledHeaderIcon src={activity.activities.icon} id={activity.uiGeneratedId} />
             {getHeaderTitle}
             <StyledHeaderActionRoot>

diff --git a/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts b/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts
@@ -4,15 +4,24 @@ import { getBorderColor } from "../../../../containers/theme/helpers";
 
 const defaultBorder = (theme: Theme) => `0.5px solid ${getBorderColor(theme)}`;
 const activeBorder = (theme: Theme) => `0.5px solid ${blend(theme.palette.background.paper, theme.palette.primary.main, 0.4)}`;
+const deployedBorder = (theme: Theme) => `0.5px solid ${theme.palette.primary.main}`;
+const selectedVersionBorder = (theme: Theme) => `0.5px solid ${theme.palette.primary.main}`;
 
 const runningActiveFoundHeaderBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.3);
 const highlightedHeaderBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.05);
 const highlightedActiveFoundHeaderBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.2);
 const runningHeaderBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.2);
 const activeFoundItemBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.2);
 const foundItemBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.08);
+const selectedVersionHeaderBackground = (theme: Theme) => blend(theme.palette.background.paper, theme.palette.primary.main, 0.2);
 
-export const getHeaderColors = (theme: Theme, isHighlighted: boolean, isDeploymentActive: boolean, isActiveFound: boolean) => {
+export const getHeaderColors = (
+    theme: Theme,
+    isHighlighted: boolean,
+    isDeploymentActive: boolean,
+    isActiveFound: boolean,
+    isVersionSelected: boolean,
+) => {
     if (isDeploymentActive && isActiveFound) {
         return {
             backgroundColor: runningActiveFoundHeaderBackground(theme),
@@ -30,7 +39,7 @@ export const getHeaderColors = (theme: Theme, isHighlighted: boolean, isDeployme
     if (isDeploymentActive) {
         return {
             backgroundColor: runningHeaderBackground(theme),
-            border: defaultBorder(theme),
+            border: deployedBorder(theme),
         };
     }
 
@@ -41,6 +50,13 @@ export const getHeaderColors = (theme: Theme, isHighlighted: boolean, isDeployme
         };
     }
 
+    if (isVersionSelected) {
+        return {
+            backgroundColor: selectedVersionHeaderBackground(theme),
+            border: selectedVersionBorder(theme),
+        };
+    }
+
     return {
         backgroundColor: undefined,
         border: "none",