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",