Scenario status panel & minor fixes (#8118)

* optimize scenario state

* separate disabled from isLoading in buttons - enable counts

* memoize ProcessStateUtils

* extract scenario details content

* minor changes

* debug box component

* new button variant - menu

* minor styles

* new panel

* Updated snapshots (#8120)

Co-authored-by: JulianWielga <[email protected]>

* fixed reducer

* Updated snapshots (#8127)

Co-authored-by: JulianWielga <[email protected]>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: JulianWielga <[email protected]>

Author: JulianWielga

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Description should display markdown #0.png

@@ -27,7 +27,6 @@ export type ActionTypes =
     | "LOADING_FAILED"
     | "TOGGLE_PROCESS_ACTION_MODAL"
     | "TOGGLE_CUSTOM_ACTION"
-    | "PROCESS_STATE_LOADED"
     | "PROCESS_VERSIONS_LOADED"
     | "ARCHIVED"
     | "EDIT_PROPERTIES";

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Process initially clean should import JSON and save #0.png

@@ -1,14 +1,18 @@
 import { omit } from "lodash/fp";
 import { ActionCreators as UndoActionCreators } from "redux-undo";
 
-import type { ProcessName, ProcessVersionId, Scenario } from "../../components/Process/types";
+import type { ProcessName, ProcessStateType, ProcessVersionId, Scenario } from "../../components/Process/types";
 import { replaceSearchQuery } from "../../containers/hooks/useSearchQuery";
 import { getProcessDefinitionData } from "../../reducers/selectors/processDefinitionData";
 import type { ProcessDefinitionData, ScenarioGraph } from "../../types";
 import type { Action, ThunkAction } from "../reduxTypes";
 import HttpService from "./../../http/HttpService";
 
 export type ScenarioActions =
+    | {
+          type: "PROCESS_STATE_LOADED";
+          processState: ProcessStateType;
+      }
     | {
           type: "CORRECT_INVALID_SCENARIO";
           processDefinitionData: ProcessDefinitionData;

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Process initially clean should import JSON and save #1.png

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import React, { memo } from "react";
+
+const randomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
+const setDepth = (instance: HTMLDivElement) => {
+    if (!instance) return;
+    const parentDepth = getComputedStyle(instance.parentElement).getPropertyValue("--depth");
+    const numericDepth = parseInt(parentDepth || "0", 10);
+    instance.style.setProperty("--depth", `${numericDepth + 1}`);
+};
+
+export const DebugBox = memo(function DebugBox({ children }: PropsWithChildren) {
+    return (
+        <Box
+            ref={setDepth}
+            sx={{
+                outlineWidth: 2,
+                outlineStyle: "solid",
+                outlineOffset: "calc(var(--depth, 0) * -2px)",
+            }}
+            style={{
+                outlineColor: `rgba(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`,
+            }}
+        >
+            {children}
+        </Box>
+    );
+});

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Sticky notes should allow to drag sticky note #0.png

@@ -1,10 +1,13 @@
+import { memoizeByArgsWithTTL } from "../../helpers/memoizeByArgsWithTTL";
+import { WrapAllMethods } from "../../WrapAllMethods";
 import { descriptionProcessArchived, unknownDescription, unknownTooltip } from "./messages";
 import type { ActionName, ProcessStateType, Scenario } from "./types";
 import { PredefinedActionName } from "./types";
 
 export const unknownIcon = "/assets/states/status-unknown.svg";
 const archivedIcon = "/assets/process/archived.svg";
 
+@WrapAllMethods(memoizeByArgsWithTTL)
 class ProcessStateUtils {
     public canDeploy = (state: ProcessStateType): boolean => state?.allowedActions.includes(PredefinedActionName.Deploy);
 

designer/client/src/actions/actionTypes.ts

@@ -121,14 +121,14 @@ export const OverlayGrid9 = Overlay.withComponent(Grid9);
 export const AbsoluteOverlayGrid9 = AbsolutePanel.withComponent(OverlayGrid9);
 
 const StyledToolbarsContainer = styled(ToolbarsContainer)(({ theme, side }) => {
-    const padding = `calc(${theme.spacing(0.375)} / 2)`;
+    const padding = theme.spacing(0.25);
     switch (side) {
         case ToolbarsSide.LeftTop:
         case ToolbarsSide.RightTop:
-            return { paddingBottom: padding };
+            return { paddingTop: padding, paddingBottom: padding };
         case ToolbarsSide.LeftBottom:
         case ToolbarsSide.RightBottom:
-            return { paddingTop: padding };
+            return { paddingTop: padding, paddingBottom: padding };
         default:
             return {
                 padding: theme.spacing(0.5),

designer/client/src/actions/nk/process.ts

@@ -32,7 +32,7 @@ const ExpandButton = styled(Button)(({ theme }) => {
 
 export const ButtonMenu = forwardRef<HTMLButtonElement, ToolbarButtonMenuWrapperProps>(function ButtonMenu(
     { options = [], selected, onChange, className, buttonProps },
-    ref
+    ref,
 ) {
     const [anchorPosition, setAnchorPosition] = React.useState<null | PopoverPosition>(null);
     const { variant } = useContext(ToolbarButtonsContext);
@@ -58,24 +58,31 @@ export const ButtonMenu = forwardRef<HTMLButtonElement, ToolbarButtonMenuWrapper
                     },
                 },
                 ".toolbarButton-Root": {
-                    paddingRight: ButtonsVariant.horizontal === variant ? 3.5 : ButtonsVariant.xs === variant ? 2.5 : null,
+                    paddingRight: [ButtonsVariant.menu, ButtonsVariant.horizontal].includes(variant)
+                        ? 3.5
+                        : ButtonsVariant.xs === variant
+                        ? 2.5
+                        : null,
                 },
             }}
         >
             <ExpandButton
                 sx={{
                     height: ButtonsVariant.small === variant ? 20 : ButtonsVariant.label !== variant ? "auto" : null,
-                    width:
-                        ButtonsVariant.horizontal === variant
-                            ? 26
-                            : [ButtonsVariant.small, ButtonsVariant.xs].includes(variant)
-                            ? 20
-                            : null,
+                    width: [ButtonsVariant.menu, ButtonsVariant.horizontal].includes(variant)
+                        ? 26
+                        : [ButtonsVariant.small, ButtonsVariant.xs].includes(variant)
+                        ? 20
+                        : null,
                     justifyContent: "center",
                     zoom: variant === ButtonsVariant.xs ? 0.75 : null,
                     borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: [ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant) ? 0 : null,
-                    borderBottomRightRadius: [ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant) ? null : 0,
+                    borderBottomLeftRadius: [ButtonsVariant.menu, ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant)
+                        ? 0
+                        : null,
+                    borderBottomRightRadius: [ButtonsVariant.menu, ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant)
+                        ? null
+                        : 0,
                 }}
                 className={"toolbarButton-MenuExpand"}
                 disabled={buttonProps.disabled}

designer/client/src/components/DebugBox.tsx

@@ -29,16 +29,18 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                 title={title || name}
                 className={"toolbarButton-Root"}
                 sx={(theme) => ({
-                    width: [ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant)
+                    width: [ButtonsVariant.menu, ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant)
                         ? "auto"
                         : `calc(${ButtonsVariant.small === variant ? PANEL_BUTTON_SMALL_SIZE : PANEL_BUTTON_SIZE}px - 2 * var(--margin))`,
                     padding:
-                        variant === ButtonsVariant.horizontal
+                        ButtonsVariant.menu === variant
+                            ? "0 8px 0 0"
+                            : ButtonsVariant.horizontal === variant
                             ? "4px 8px"
                             : [ButtonsVariant.small, ButtonsVariant.xs].includes(variant)
                             ? 0
                             : "4px 0",
-                    flexDirection: [ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant) ? "row" : null,
+                    flexDirection: [ButtonsVariant.menu, ButtonsVariant.horizontal, ButtonsVariant.xs].includes(variant) ? "row" : null,
                     zoom: variant === ButtonsVariant.xs ? 0.75 : null,
                     borderColor: hasError ? theme.palette.error.main : null,
                     color: hasError ? theme.palette.error.main : isActive ? theme.palette.success.main : null,
@@ -49,7 +51,15 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                         title={title}
                         className={"toolbarButton-Icon"}
                         sx={
-                            variant === ButtonsVariant.horizontal
+                            [ButtonsVariant.menu].includes(variant)
+                                ? {
+                                      "&, &>*": {
+                                          flex: "none",
+                                          height: "1.5em",
+                                          width: "1.5em",
+                                      },
+                                  }
+                                : [ButtonsVariant.horizontal].includes(variant)
                                 ? {
                                       "&, &>*": {
                                           flex: "none",
@@ -64,14 +74,24 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                     </Icon>
                 </Badge>
                 <Typography
-                    variant={ButtonsVariant.horizontal === variant ? "button" : "overline"}
+                    variant={
+                        [ButtonsVariant.menu].includes(variant)
+                            ? "caption"
+                            : [ButtonsVariant.horizontal].includes(variant)
+                            ? "button"
+                            : "overline"
+                    }
                     className={"toolbarButton-Label"}
                     sx={{
                         color: "inherit",
                         display: [ButtonsVariant.small, ButtonsVariant.xs].includes(variant) ? "none" : null,
-                        whiteSpace: variant === ButtonsVariant.horizontal ? "nowrap" : null,
-                        textTransform: variant === ButtonsVariant.label ? "lowercase" : null,
-                        marginLeft: variant === ButtonsVariant.horizontal ? 1 : null,
+                        whiteSpace: [ButtonsVariant.menu, ButtonsVariant.horizontal].includes(variant) ? "nowrap" : null,
+                        textTransform: [ButtonsVariant.label].includes(variant) ? "lowercase" : "capitalize",
+                        marginLeft: [ButtonsVariant.menu].includes(variant)
+                            ? 0.5
+                            : [ButtonsVariant.horizontal].includes(variant)
+                            ? 1
+                            : null,
                     }}
                 >
                     {name}

designer/client/src/components/Process/ProcessStateUtils.ts

@@ -12,7 +12,7 @@ const ToolbarButtonComponent = forwardRef<HTMLButtonElement, ToolbarButtonProps>
     if ("isLoading" in props) {
         const { isLoading, loadingProgress, loadingVariant, children, disabled, ...passProps } = props;
         return (
-            <ToolbarButtonComponent {...passProps} ref={ref} disabled={disabled || isLoading}>
+            <ToolbarButtonComponent {...passProps} ref={ref} disabled={disabled}>
                 <ButtonProgress enabled={isLoading} variant={loadingVariant} value={loadingProgress} />
                 {children}
             </ToolbarButtonComponent>

designer/client/src/components/toolbarComponents/ToolbarsLayer.tsx

@@ -1,7 +1,7 @@
 import type { PropsOf } from "@emotion/react";
 import { styled } from "@mui/material";
 import type { PropsWithChildren } from "react";
-import React, { createContext } from "react";
+import React, { createContext, forwardRef } from "react";
 
 const ToolbarButtonsContainer = styled("div")(() => ({
     display: "flex",
@@ -14,6 +14,7 @@ export enum ButtonsVariant {
     small = "small",
     label = "label",
     horizontal = "horizontal",
+    menu = "menu",
 }
 
 export const ToolbarButtonsContext = createContext<{ variant: ButtonsVariant }>({ variant: ButtonsVariant.label });
@@ -22,10 +23,10 @@ type Props = {
     variant?: ButtonsVariant;
 } & PropsOf<typeof ToolbarButtonsContainer>;
 
-export function ToolbarButtons({ variant, ...props }: PropsWithChildren<Props>): JSX.Element {
+export const ToolbarButtons = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(function ToolbarButtons({ variant, ...props }, ref) {
     return (
         <ToolbarButtonsContext.Provider value={{ variant: variant || ButtonsVariant.label }}>
-            <ToolbarButtonsContainer {...props} />
+            <ToolbarButtonsContainer {...props} ref={ref} />
         </ToolbarButtonsContext.Provider>
     );
-}
+});

designer/client/src/components/toolbarComponents/toolbarButtons/ButtonMenu.tsx

@@ -21,13 +21,14 @@ export type ToolbarWrapperProps = PropsWithChildren<{
     onCollapse?: () => void;
     color?: string;
     disableCollapse?: boolean;
+    noDrag?: boolean;
 }>;
 
 export const TOOLBAR_WRAPPER_CLASSNAME = "toolbar-wrapper";
 
 export function ToolbarWrapper(props: ToolbarWrapperProps): React.JSX.Element | null {
     const theme = useTheme();
-    const { title, children, id, onClose, onExpand, onCollapse, color, disableCollapse } = props;
+    const { title, children, id, onClose, onExpand, onCollapse, color, disableCollapse, noDrag } = props;
     const handlerProps = useDragHandler();
 
     const dispatch = useDispatch();
@@ -64,11 +65,11 @@ export function ToolbarWrapper(props: ToolbarWrapperProps): React.JSX.Element |
             color={color || theme.palette.background.paper}
             width={SIDEBAR_WIDTH}
             data-testid={id}
-            {...(isCollapsible ? {} : handlerProps)}
+            {...(isCollapsible || noDrag ? {} : handlerProps)}
         >
             {(isCollapsible || onClose) && (
                 <PanelHeader
-                    {...(isCollapsible ? handlerProps : {})}
+                    {...(isCollapsible && !noDrag ? handlerProps : {})}
                     color={color || theme.palette.background.paper}
                     onClick={toggleCollapsed}
                     onKeyDown={(e) => {

designer/client/src/components/toolbarComponents/toolbarButtons/ButtonRoot.tsx

@@ -9,13 +9,16 @@ import { ActivitiesPanel } from "../toolbars/activities";
 import { CreatorPanel } from "../toolbars/creator/CreatorPanel";
 import ProcessActions from "../toolbars/scenarioActions/ProcessActions";
 import ScenarioDetails from "../toolbars/scenarioDetails/ScenarioDetails";
+import ScenarioStatusPanel from "../toolbars/scenarioDetails/ScenarioStatusPanel";
 import { SearchPanel } from "../toolbars/search/SearchPanel";
 import { UserSettingsPanel } from "../toolbars/UserSettingsPanel";
 import { HorizontalButtonsToolbar } from "./HorizontalButtonsToolbar";
 import type { ToolbarConfig } from "./types";
 
 export function getToolbarComponent(config?: ToolbarConfig): ComponentType<ToolbarPanelProps> {
     switch (config?.id) {
+        case "scenario-status-panel":
+            return ScenarioStatusPanel;
         case "process-info-panel":
             return ScenarioDetails;
         case "process-actions-panel":

designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButton.tsx

@@ -3,11 +3,11 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
-import type { RootState } from "../../../reducers";
-import { getProcessState } from "../../../reducers/selectors/scenarioState";
+import { getIsRunning } from "../../../reducers/selectors/scenarioState";
 import type { UIActivity } from "./ActivitiesPanel";
-import { DateItem, ActivityItem, ToggleButtonItem } from "./ActivityPanelRowItem";
+import { ActivityItem, DateItem, ToggleButtonItem } from "./ActivityPanelRowItem";
 import { ActivityItemProvider } from "./ActivityPanelRowItem/ActivityItemProvider";
+import { ActivityTypesRelatedToExecutions } from "./types";
 
 interface Props {
     index: number;
@@ -20,17 +20,19 @@ interface Props {
 }
 
 export const ActivitiesPanelRow = memo(({ index, style, setRowHeight, handleShowRows, handleHideRows, activities, searchQuery }: Props) => {
-    const scenarioState = useSelector((state: RootState) => getProcessState(state));
+    const isRunning = useSelector(getIsRunning);
 
     const { t } = useTranslation();
     const rowRef = useRef<HTMLDivElement>(null);
     const activity = useMemo(() => activities[index], [activities, index]);
     const firstDeployedIndex = useMemo(
-        () => activities.findIndex((activeItem) => activeItem.uiType === "item" && activeItem.type === "SCENARIO_DEPLOYED"),
+        () =>
+            activities.findIndex(
+                (activeItem) => activeItem.uiType === "item" && activeItem.type === ActivityTypesRelatedToExecutions.ScenarioDeployed,
+            ),
         [activities],
     );
-    const scenarioStatusesToActiveDeploy = ["RUNNING", "SCHEDULED"];
-    const isDeploymentActive = firstDeployedIndex === index && scenarioStatusesToActiveDeploy.includes(scenarioState.status.name);
+    const isDeploymentActive = firstDeployedIndex === index && isRunning;
     const isFirstDateItem = activities.findIndex((activeItem) => activeItem.uiType === "date") === index;
 
     useEffect(() => {

designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButtons.tsx

@@ -1,33 +1,21 @@
-import { Box, Typography } from "@mui/material";
 import i18next from "i18next";
 import React, { memo } from "react";
-import { useSelector } from "react-redux";
 
-import type { RootState } from "../../../reducers";
-import { getScenario } from "../../../reducers/selectors/graph";
-import { getProcessState } from "../../../reducers/selectors/scenarioState";
-import ProcessStateIcon from "../../Process/ProcessStateIcon";
-import ProcessStateUtils from "../../Process/ProcessStateUtils";
 import type { ToolbarPanelProps } from "../../toolbarComponents/ButtonsToolbar";
 import { ToolbarButtons } from "../../toolbarComponents/toolbarButtons";
 import { ToolbarWrapper } from "../../toolbarComponents/toolbarWrapper/ToolbarWrapper";
+import { PanelScenarioDetails, ScenarioDetailsItemWrapper } from "../scenarioDetails/ScenarioDetailsComponents";
+import { ScenarioState } from "./ScenarioState";
 
 const ProcessActions = memo(({ buttonsVariant, children, ...props }: ToolbarPanelProps) => {
-    const scenario = useSelector((state: RootState) => getScenario(state));
-    const processState = useSelector((state: RootState) => getProcessState(state));
-
     // TODO: better styling of process info toolbar in case of many custom actions
-
     return (
         <ToolbarWrapper {...props} title={i18next.t("panels.scenarioActions.title", "Scenario actions")}>
-            {!scenario.isFragment && (
-                <Box display={"flex"} px={2} pt={2} pb={1.5}>
-                    <ProcessStateIcon scenario={scenario} processState={processState} />
-                    <Typography component={"div"} variant={"body2"} pl={1}>
-                        {ProcessStateUtils.getStateDescription(scenario, processState)}
-                    </Typography>
-                </Box>
-            )}
+            <PanelScenarioDetails>
+                <ScenarioDetailsItemWrapper>
+                    <ScenarioState />
+                </ScenarioDetailsItemWrapper>
+            </PanelScenarioDetails>
             <ToolbarButtons variant={buttonsVariant}>{children}</ToolbarButtons>
         </ToolbarWrapper>
     );