From d74804b9214a5fbc80815bb719da31218fc6950e Mon Sep 17 00:00:00 2001 From: gskrobisz Date: Thu, 9 Jan 2025 16:59:56 +0100 Subject: [PATCH] separate modal --- .../components/modals/DeployProcessDialog.tsx | 55 +------- .../modals/DeployWithParametersDialog.tsx | 125 ++++++++++++++++++ .../scenarioActions/buttons/DeployButton.tsx | 4 +- .../buttons/RunOffScheduleButton.tsx | 2 +- .../src/windowManager/ContentGetter.tsx | 5 + .../client/src/windowManager/WindowKind.tsx | 1 + 6 files changed, 137 insertions(+), 55 deletions(-) create mode 100644 designer/client/src/components/modals/DeployWithParametersDialog.tsx diff --git a/designer/client/src/components/modals/DeployProcessDialog.tsx b/designer/client/src/components/modals/DeployProcessDialog.tsx index f3ee8207db9..369209ca610 100644 --- a/designer/client/src/components/modals/DeployProcessDialog.tsx +++ b/designer/client/src/components/modals/DeployProcessDialog.tsx @@ -3,7 +3,7 @@ import { WindowButtonProps, WindowContentProps } from "@touk/window-manager"; import React, { useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; -import { getActivityParameters, getProcessName } from "../../reducers/selectors/graph"; +import { getProcessName } from "../../reducers/selectors/graph"; import { getFeatureSettings } from "../../reducers/selectors/settings"; import { ProcessName } from "../Process/types"; import { PromptContent, WindowKind } from "../../windowManager"; @@ -11,40 +11,18 @@ import CommentInput from "../comment/CommentInput"; import ProcessDialogWarnings from "./ProcessDialogWarnings"; import { FormHelperText, Typography } from "@mui/material"; import { LoadingButtonTypes } from "../../windowManager/LoadingButton"; -import { ActivityNodeParameters } from "../../types/activity"; -import { AdvancedParametersSection } from "./AdvancedParametersSection"; -import { mapValues } from "lodash"; -import { NodesDeploymentData } from "../../http/HttpService"; -import { ActivityProperty } from "./ActivityProperty"; -import { NodeTable } from "../graph/node-modal/NodeDetailsContent/NodeTable"; export type ToggleProcessActionModalData = { - action: (processName: ProcessName, comment: string, nodeData: NodesDeploymentData) => Promise; + action: (processName: ProcessName, comment: string) => Promise; displayWarnings?: boolean; }; -function initialNodesData(params: ActivityNodeParameters[]) { - return params.reduce( - (paramObj, { nodeId, parameters }) => ({ - ...paramObj, - [nodeId]: mapValues(parameters, (value) => value.defaultValue || ""), - }), - {}, - ); -} - export function DeployProcessDialog(props: WindowContentProps): JSX.Element { // TODO: get rid of meta const { meta: { action, displayWarnings }, } = props.data; const processName = useSelector(getProcessName); - - const activityParameters = useSelector(getActivityParameters); - const activityNodeParameters = activityParameters["DEPLOY"] || ([] as ActivityNodeParameters[]); - const initialValues = useMemo(() => initialNodesData(activityNodeParameters), [activityNodeParameters]); - const [values, setValues] = useState(initialValues); - const [comment, setComment] = useState(""); const [validationError, setValidationError] = useState(""); const featureSettings = useSelector(getFeatureSettings); @@ -54,7 +32,7 @@ export function DeployProcessDialog(props: WindowContentProps { try { - await action(processName, comment, values); + await action(processName, comment); props.close(); } catch (error) { setValidationError(error?.response?.data); @@ -90,33 +68,6 @@ export function DeployProcessDialog(props: WindowContentProps {validationError} - {activityNodeParameters.map((anp: ActivityNodeParameters) => ( - - - {Object.entries(anp.parameters).map(([paramName, paramConfig]) => { - return ( - { - setValues({ - ...values, - [nodeId]: { - ...values[nodeId], - [paramName]: newValue, - }, - }); - }} - nodesData={values} - /> - ); - })} - - - ))} ); diff --git a/designer/client/src/components/modals/DeployWithParametersDialog.tsx b/designer/client/src/components/modals/DeployWithParametersDialog.tsx new file mode 100644 index 00000000000..717e7c1ba7c --- /dev/null +++ b/designer/client/src/components/modals/DeployWithParametersDialog.tsx @@ -0,0 +1,125 @@ +import { css, cx } from "@emotion/css"; +import { WindowButtonProps, WindowContentProps } from "@touk/window-manager"; +import React, { useCallback, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useDispatch, useSelector } from "react-redux"; +import { getActivityParameters, getProcessName } from "../../reducers/selectors/graph"; +import { getFeatureSettings } from "../../reducers/selectors/settings"; +import { ProcessName } from "../Process/types"; +import { PromptContent, WindowKind } from "../../windowManager"; +import CommentInput from "../comment/CommentInput"; +import ProcessDialogWarnings from "./ProcessDialogWarnings"; +import { FormHelperText, Typography } from "@mui/material"; +import { LoadingButtonTypes } from "../../windowManager/LoadingButton"; +import { ActivityNodeParameters } from "../../types/activity"; +import { AdvancedParametersSection } from "./AdvancedParametersSection"; +import { mapValues } from "lodash"; +import { NodesDeploymentData } from "../../http/HttpService"; +import { ActivityProperty } from "./ActivityProperty"; +import { NodeTable } from "../graph/node-modal/NodeDetailsContent/NodeTable"; + +export type ToggleProcessActionModalData = { + action: (processName: ProcessName, comment: string, nodeData: NodesDeploymentData) => Promise; + displayWarnings?: boolean; +}; + +function initialNodesData(params: ActivityNodeParameters[]) { + return params.reduce( + (paramObj, { nodeId, parameters }) => ({ + ...paramObj, + [nodeId]: mapValues(parameters, (value) => value.defaultValue || ""), + }), + {}, + ); +} + +export function DeployWithParametersDialog(props: WindowContentProps): JSX.Element { + // TODO: get rid of meta + const { + meta: { action, displayWarnings }, + } = props.data; + const processName = useSelector(getProcessName); + + const activityParameters = useSelector(getActivityParameters); + const activityNodeParameters = activityParameters["DEPLOY"] || ([] as ActivityNodeParameters[]); + const initialValues = useMemo(() => initialNodesData(activityNodeParameters), [activityNodeParameters]); + const [values, setValues] = useState(initialValues); + + const [comment, setComment] = useState(""); + const [validationError, setValidationError] = useState(""); + const featureSettings = useSelector(getFeatureSettings); + const deploymentCommentSettings = featureSettings.deploymentCommentSettings; + + const dispatch = useDispatch(); + + const confirmAction = useCallback(async () => { + try { + await action(processName, comment, values); + props.close(); + } catch (error) { + setValidationError(error?.response?.data); + } + }, [action, comment, dispatch, processName, props]); + + 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 ( + +
+ {props.data.title} + {displayWarnings && } + setComment(e.target.value)} + value={comment} + defaultValue={deploymentCommentSettings?.exampleComment} + className={cx( + css({ + minWidth: 600, + minHeight: 80, + }), + )} + autoFocus + /> + + {validationError} + + {activityNodeParameters.map((anp: ActivityNodeParameters) => ( + + + {Object.entries(anp.parameters).map(([paramName, paramConfig]) => { + return ( + { + setValues({ + ...values, + [nodeId]: { + ...values[nodeId], + [paramName]: newValue, + }, + }); + }} + nodesData={values} + /> + ); + })} + + + ))} +
+ + ); +} + +export default DeployWithParametersDialog; diff --git a/designer/client/src/components/toolbars/scenarioActions/buttons/DeployButton.tsx b/designer/client/src/components/toolbars/scenarioActions/buttons/DeployButton.tsx index f6fa2e4e7de..a12b8cf69bf 100644 --- a/designer/client/src/components/toolbars/scenarioActions/buttons/DeployButton.tsx +++ b/designer/client/src/components/toolbars/scenarioActions/buttons/DeployButton.tsx @@ -8,7 +8,7 @@ import { getProcessName, getProcessVersionId, hasError, isDeployPossible, isSave import { getCapabilities } from "../../../../reducers/selectors/other"; import { useWindows } from "../../../../windowManager"; import { WindowKind } from "../../../../windowManager"; -import { ToggleProcessActionModalData } from "../../../modals/DeployProcessDialog"; +import { ToggleProcessActionModalData } from "../../../modals/DeployWithParametersDialog"; import { ToolbarButton } from "../../../toolbarComponents/toolbarButtons"; import { ToolbarButtonProps } from "../../types"; import { ACTION_DIALOG_WIDTH } from "../../../../stylesheets/variables"; @@ -55,7 +55,7 @@ export default function DeployButton(props: ToolbarButtonProps) { onClick={() => open({ title: message, - kind: WindowKind.deployProcess, + kind: WindowKind.deployWithParameters, width: ACTION_DIALOG_WIDTH, meta: { action, displayWarnings: true }, }) diff --git a/designer/client/src/components/toolbars/scenarioActions/buttons/RunOffScheduleButton.tsx b/designer/client/src/components/toolbars/scenarioActions/buttons/RunOffScheduleButton.tsx index 599dff503f3..082bba24177 100644 --- a/designer/client/src/components/toolbars/scenarioActions/buttons/RunOffScheduleButton.tsx +++ b/designer/client/src/components/toolbars/scenarioActions/buttons/RunOffScheduleButton.tsx @@ -12,7 +12,7 @@ import { } from "../../../../reducers/selectors/graph"; import { getCapabilities } from "../../../../reducers/selectors/other"; import { useWindows, WindowKind } from "../../../../windowManager"; -import { ToggleProcessActionModalData } from "../../../modals/DeployProcessDialog"; +import { ToggleProcessActionModalData } from "../../../modals/DeployWithParametersDialog"; import { ToolbarButton } from "../../../toolbarComponents/toolbarButtons"; import { ToolbarButtonProps } from "../../types"; import { ACTION_DIALOG_WIDTH } from "../../../../stylesheets/variables"; diff --git a/designer/client/src/windowManager/ContentGetter.tsx b/designer/client/src/windowManager/ContentGetter.tsx index c77c7b18379..09e441af7cf 100644 --- a/designer/client/src/windowManager/ContentGetter.tsx +++ b/designer/client/src/windowManager/ContentGetter.tsx @@ -27,6 +27,9 @@ const AdhocTestingDialog = loadable(() => import("../components/modals/AdhocTest const DeployProcessDialog = loadable(() => import("../components/modals/DeployProcessDialog"), { fallback: , }); +const DeployWithParametersDialog = loadable(() => import("../components/modals/DeployWithParametersDialog"), { + fallback: , +}); const GenericConfirmDialog = loadable(() => import("../components/modals/GenericConfirmDialog"), { fallback: , }); @@ -69,6 +72,8 @@ const contentGetter: React.FC> = (props) => { return ; case WindowKind.deployProcess: return ; + case WindowKind.deployWithParameters: + return ; case WindowKind.calculateCounts: return ; case WindowKind.generateTestData: diff --git a/designer/client/src/windowManager/WindowKind.tsx b/designer/client/src/windowManager/WindowKind.tsx index fce905913a5..1f3c754c882 100644 --- a/designer/client/src/windowManager/WindowKind.tsx +++ b/designer/client/src/windowManager/WindowKind.tsx @@ -8,6 +8,7 @@ export enum WindowKind { addFragment, saveProcess, deployProcess, + deployWithParameters, calculateCounts, generateTestData, generateDataAndTest,