[NU-2197] save and deploy buttons changes

designer/client/cypress/e2e/compareVersions.cy.ts

@@ -50,7 +50,7 @@ describe("Compare versions", () => {
         cy.contains(/^apply/i)
             .should("be.enabled")
             .click();
-        cy.contains(/^save\*$/i).click();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
         cy.get("[data-testid=window]").should("not.exist");
 
@@ -60,7 +60,9 @@ describe("Compare versions", () => {
         cy.contains(/^apply/i)
             .should("be.enabled")
             .click();
-        cy.contains(/^save\*$/i).click();
+        cy.get("[data-testid=window]").should("not.exist");
+        cy.verifySaveIndicator();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
 
         // Open the compare dialog and select values to compare

designer/client/cypress/e2e/components.cy.ts

@@ -201,7 +201,8 @@ describe("Components list", () => {
                 },
                 force: true,
             });
-        cy.contains(/^save\*$/i).click();
+        cy.verifySaveIndicator();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
 
         cy.viewport(1400, 600);

designer/client/cypress/e2e/description.cy.ts

@@ -40,7 +40,8 @@ describe("Description", () => {
         cy.contains("description header").should("be.visible");
         cy.get("[data-testid=window]").should("be.visible").find("header").find("[name=close]").click();
 
-        cy.contains(/^save\*$/i).click();
+        cy.verifySaveIndicator();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
 
         cy.reload();

designer/client/cypress/e2e/fragment.cy.ts

@@ -177,7 +177,10 @@ describe("Fragment", () => {
             cy.get("@window")
                 .contains(/^apply$/i)
                 .click();
-            cy.contains(/^save\*$/i).click();
+
+            cy.get("@window").should("not.exist");
+            cy.verifySaveIndicator();
+            cy.contains(/^save$/i).click();
             cy.contains(/^ok$/i).click();
 
             exportToFixture("fragmentWithInput");
@@ -333,7 +336,10 @@ describe("Fragment", () => {
             cy.contains(/^apply/i)
                 .should("be.enabled")
                 .click();
-            cy.contains(/^save\*$/i).click();
+
+            cy.get("@window").should("not.exist");
+            cy.verifySaveIndicator();
+            cy.contains(/^save$/i).click();
             cy.contains(/^ok$/i).click();
             cy.get("@window").should("not.exist");
 
@@ -355,7 +361,10 @@ describe("Fragment", () => {
             cy.get("@window")
                 .contains(/^apply$/i)
                 .click();
-            cy.contains(/^save\*$/i).click();
+
+            cy.get("@window").should("not.exist");
+            cy.verifySaveIndicator();
+            cy.contains(/^save$/i).click();
             cy.contains(/^ok$/i).click();
 
             // Go back to the Scenario
@@ -470,7 +479,8 @@ describe("Fragment", () => {
         });
         cy.layoutScenario();
 
-        cy.contains(/^save\*$/i).click();
+        cy.verifySaveIndicator();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
 
         cy.visitProcess("@fragmentName");
@@ -494,7 +504,8 @@ describe("Fragment", () => {
         cy.get("@output").click({ force: true }).type("{backspace}");
         cy.layoutScenario();
 
-        cy.contains(/^save\*$/i).click();
+        cy.verifySaveIndicator();
+        cy.contains(/^save$/i).click();
         cy.contains(/^ok$/i).click();
         cy.contains(/^save$/i).should("be.disabled");
 

designer/client/cypress/e2e/nodeWindow.cy.ts

@@ -111,7 +111,8 @@ describe("Node window", () => {
                     },
                     force: true,
                 });
-            cy.contains(/^save\*$/i).click();
+            cy.verifySaveIndicator();
+            cy.contains(/^save$/i).click();
             cy.contains(/^ok$/i).click();
 
             cy.visit("/components/usages/builtin-filter");

designer/client/cypress/e2e/process.cy.ts

@@ -152,7 +152,8 @@ describe("Process", () => {
                 });
             cy.get("[data-testid=graphPage]").matchImage(screenshotOptions);
             //why save and test snapshot? mistake?
-            cy.contains(/^save\*$/i).click();
+            cy.verifySaveIndicator();
+            cy.contains(/^save$/i).click();
             cy.get("[data-testid=window]").contains(/^ok$/i).click();
             cy.get("[data-testid=window]").should("not.exist");
             cy.get("#nk-graph-main").should("be.visible");

designer/client/cypress/support/process.ts

@@ -32,6 +32,7 @@ declare global {
             archiveProcess: typeof archiveProcess;
             unarchiveProcess: typeof unarchiveProcess;
             migrateProcess: typeof migrateProcess;
+            verifySaveIndicator: typeof verifySaveIndicator;
         }
     }
 }
@@ -365,6 +366,15 @@ function cancelScenario(comment = "issues/123") {
     cy.contains(/^ok$/i).should("be.enabled").click();
 }
 
+function verifySaveIndicator() {
+    cy.contains(/^save$/i)
+        .find('[data-testid="toolbarButton-label"]')
+        .then(($el) => {
+            const afterContent = window.getComputedStyle($el[0], ":after").getPropertyValue("content");
+            expect(afterContent.includes("*")).to.be.true;
+        });
+}
+
 Cypress.Commands.add("createTestProcess", createTestProcess);
 Cypress.Commands.add("deleteTestProcess", deleteTestProcess);
 Cypress.Commands.add("getTestProcesses", getTestProcesses);
@@ -391,4 +401,5 @@ Cypress.Commands.add("getTestProcessName", getTestProcessName);
 Cypress.Commands.add("archiveProcess", archiveProcess);
 Cypress.Commands.add("unarchiveProcess", unarchiveProcess);
 Cypress.Commands.add("migrateProcess", migrateProcess);
+Cypress.Commands.add("verifySaveIndicator", verifySaveIndicator);
 export default {};

designer/client/src/components/modals/saveScenario/SaveScenarioDialog.tsx

@@ -0,0 +1,49 @@
+import { css, cx } from "@emotion/css";
+import { Typography } from "@mui/material";
+import type { WindowButtonProps, WindowContentProps } from "@touk/window-manager";
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { PromptContent } from "../../../windowManager";
+import { LoadingButtonTypes } from "../../../windowManager/LoadingButton";
+import { CommentInput } from "../../comment/CommentInput";
+import { useSaveScenario } from "./useSaveScenario";
+
+export function SaveScenarioDialog(props: WindowContentProps): JSX.Element {
+    const { handleSaveScenarioAction } = useSaveScenario();
+
+    const [comment, setState] = useState("");
+
+    const confirmAction = useCallback(async () => {
+        await handleSaveScenarioAction(comment);
+        props.close();
+    }, [props, handleSaveScenarioAction, comment]);
+
+    const { t } = useTranslation();
+    const buttons: WindowButtonProps[] = useMemo(
+        () => [
+            { title: t("dialog.button.cancel", "Cancel"), action: () => props.close(), classname: LoadingButtonTypes.secondaryButton },
+            { title: t("dialog.button.ok", "Ok"), action: () => confirmAction() },
+        ],
+        [confirmAction, props, t],
+    );
+
+    return (
+        <PromptContent {...props} buttons={buttons}>
+            <div className={cx("modalContentDark", css({ minWidth: 600 }))}>
+                <Typography variant={"h3"}>{props.data.title}</Typography>
+                <CommentInput
+                    onChange={(e) => setState(e.target.value)}
+                    value={comment}
+                    className={css({
+                        minWidth: 600,
+                        minHeight: 80,
+                    })}
+                    autoFocus
+                />
+            </div>
+        </PromptContent>
+    );
+}
+
+export default SaveScenarioDialog;

designer/client/src/components/modals/saveScenario/useSaveScenario.ts

@@ -0,0 +1,64 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { displayCurrentProcessVersion, loadProcessToolbarsConfiguration } from "../../../actions/nk";
+import { getScenarioActivities } from "../../../actions/nk/scenarioActivities";
+import type { ThunkAction } from "../../../actions/reduxTypes";
+import { visualizationUrl } from "../../../common/VisualizationUrl";
+import HttpService from "../../../http/HttpService";
+import {
+    getProcessName,
+    getProcessUnsavedNewName,
+    getScenarioGraph,
+    getScenarioLabels,
+    isProcessRenamed,
+} from "../../../reducers/selectors/graph";
+
+export const useSaveScenario = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+
+    const saveScenario = useCallback(
+        (comment = ""): ThunkAction => {
+            return async (dispatch, getState) => {
+                const state = getState();
+                const scenarioGraph = getScenarioGraph(state);
+                const currentProcessName = getProcessName(state);
+                const labels = getScenarioLabels(state);
+
+                // save changes before rename and force same processName everywhere
+                await HttpService.saveProcess(currentProcessName, scenarioGraph, comment, labels);
+
+                const unsavedNewName = getProcessUnsavedNewName(state);
+                const isRenamed = isProcessRenamed(state) && (await HttpService.changeProcessName(currentProcessName, unsavedNewName));
+                const processName = isRenamed ? unsavedNewName : currentProcessName;
+
+                await dispatch(displayCurrentProcessVersion(processName));
+                await dispatch(await getScenarioActivities(processName));
+
+                if (isRenamed) {
+                    await dispatch(loadProcessToolbarsConfiguration(unsavedNewName));
+                    navigate(
+                        {
+                            ...location,
+                            pathname: location.pathname.replace(visualizationUrl(currentProcessName), visualizationUrl(unsavedNewName)),
+                        },
+                        { replace: true },
+                    );
+                }
+            };
+        },
+        [location, navigate],
+    );
+
+    const handleSaveScenarioAction = useCallback(
+        async (comment = "") => {
+            await dispatch(saveScenario(comment));
+        },
+        [dispatch, saveScenario],
+    );
+
+    return { handleSaveScenarioAction };
+};

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

@@ -46,7 +46,7 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                     color: hasError ? theme.palette.error.main : isActive ? theme.palette.success.main : null,
                 })}
             >
-                <Badge color="warning" overlap={"circular"} variant={showIndicator ? "dot" : null}>
+                <Badge color="warning" overlap={"circular"} variant={showIndicator && variant === ButtonsVariant.xs ? "dot" : null}>
                     <Icon
                         title={title}
                         className={"toolbarButton-Icon"}
@@ -82,6 +82,7 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                             : "overline"
                     }
                     className={"toolbarButton-Label"}
+                    data-testid={"toolbarButton-label"}
                     sx={{
                         color: "inherit",
                         display: [ButtonsVariant.small, ButtonsVariant.xs].includes(variant) ? "none" : null,
@@ -92,6 +93,17 @@ export const ButtonRoot = forwardRef<HTMLButtonElement, Omit<ToolbarButtonProps,
                             : [ButtonsVariant.horizontal].includes(variant)
                             ? 1
                             : null,
+                        position: "relative",
+                        ...(showIndicator && {
+                            "&::after": {
+                                content: '"*"',
+                                color: "warning.main",
+                                marginLeft: "2px",
+                                position: "absolute",
+                                right: -8, // Position to the right of text
+                                top: 0,
+                            },
+                        }),
                     }}
                 >
                     {name}