diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #0.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #0.png
index 92071466a54..96fac7c2011 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #0.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #0.png differ
diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #2.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #2.png
index 9a1f6d10481..c6d43f459ab 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #2.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #2.png differ
diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #3.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #3.png
index 142e3b6736b..2dab2dfdb68 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #3.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Activities should display activities #3.png differ
diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should add text to note and display it as markdown #0.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should add text to note and display it as markdown #0.png
index 7cf3a281fd8..2dd76fb30dc 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should add text to note and display it as markdown #0.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should add text to note and display it as markdown #0.png differ
diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png
index 77404342dfd..605d94e27b4 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png differ
diff --git a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should disable sticky note when scenario is not saved #0.png b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should disable sticky note when scenario is not saved #0.png
index e3022e7c644..df07fd6e218 100644
Binary files a/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should disable sticky note when scenario is not saved #0.png and b/designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should disable sticky note when scenario is not saved #0.png differ
diff --git a/designer/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx b/designer/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx
index 8de06c5afbc..8976e6bd133 100644
--- a/designer/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx
+++ b/designer/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 = (
- ({
- color: theme.palette.text.primary,
- overflow: "hidden",
- textOverflow: "ellipsis",
- textWrap: "noWrap",
- padding: !openVersionEnable && theme.spacing(0, 1),
- })}
- >
- {text}
-
+ <>
+ ({
+ color: theme.palette.text.primary,
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ textWrap: "noWrap",
+ padding: !openVersionEnable && theme.spacing(0, 1),
+ })}
+ >
+ {text}
+
+ {activeItemIndicatorText && (
+
+
+
+ )}
+ >
);
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 (
-
+
{getHeaderTitle}
diff --git a/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts b/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts
index 0afdb0b454c..9e03f525c46 100644
--- a/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts
+++ b/designer/client/src/components/toolbars/activities/helpers/activityItemColors.ts
@@ -4,6 +4,8 @@ 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);
@@ -11,8 +13,15 @@ const highlightedActiveFoundHeaderBackground = (theme: Theme) => blend(theme.pal
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",