More work on the create activity page

public/locales/en/common.json

@@ -2,6 +2,7 @@
   "Account": "Account",
   "Activate": "Activate",
   "Active": "Active",
+  "ActivityWithNameCreated": "Activity '{{activityName}}' created",
   "ActivityNameTemplate": "Activity Name Template",
   "Add": "Add",
   "AddWithValue": "Add {{value}}",

src/modules/manager/activity/CreateActivity.tsx

@@ -4,11 +4,13 @@ import { useFormWithGuard } from "../../../components/common/useFormRouter";
 import Joi from "joi";
 import { useEffect, useState } from "react";
 import {
+  renderButton,
   renderInput,
   renderWorkflowTemplatePicker,
 } from "../../../components/common/formHelpers";
 import { InputType } from "../../../components/common/Input";
 import templateVersionsService from "../workflowTemplates/services/WorkflowTemplateService";
+import { toast } from "react-toastify";
 
 const CreateActivity: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
@@ -17,16 +19,14 @@ const CreateActivity: React.FC = () => {
 
   const form = useFormWithGuard({
     loaded: true,
-    data: {
-      workflowTemplate: undefined,
-    },
+    data: { workflowTemplate: undefined, activityName: "" },
     errors: {},
     redirect: "",
   });
 
   form.schema = {
     workflowTemplate: Joi.object().required().label(t("WorkflowTemplate")),
-    activityName: Joi.string().max(450).label(t("ActivityName")),
+    activityName: Joi.string().allow("").max(450).label(t("ActivityName")),
   };
 
   useEffect(() => {
@@ -61,8 +61,46 @@ const CreateActivity: React.FC = () => {
   const datePrefix = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, "0")}${String(now.getDate()).padStart(2, "0")} ${String(now.getHours()).padStart(2, "0")}${String(now.getMinutes()).padStart(2, "0")}${String(now.getSeconds()).padStart(2, "0")}`;
   const defaultActivityName = `${datePrefix} ${selectedWorkflowTemplateName ?? "New Activity"}`;
 
+  const doSubmit = async (buttonName: string) => {
+    try {
+      const { workflowTemplate, activityName } = form.state.data;
+
+      const actualActivityName =
+        activityName == "" ? defaultActivityName : activityName;
+
+      // const response = await ssoManagerService.postSsoProvider(
+      //   nameStr,
+      //   clientIdStr,
+      //   clientSecretStr,
+      //   validIssuerStr,
+      //   authorizationEndpointStr,
+      //   tokenEndpointStr,
+      //   isPublicValue,
+      // );
+      //if (response) {
+      toast.info(
+        t("ActivityWithNameCreated", {
+          activityName: actualActivityName,
+        }),
+      );
+      //}
+
+      //   if (buttonName === "save") {
+      //     form.setState({ redirect: "/ssoManager" });
+      //   }
+
+      form.markAsSaved();
+    } catch (ex: any) {
+      form.handleGeneralError(ex);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    form.handleSubmit(e, doSubmit);
+  };
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       {renderWorkflowTemplatePicker(
         true,
         "workflowTemplate",
@@ -71,7 +109,8 @@ const CreateActivity: React.FC = () => {
         form.state.errors,
         form.handleWorkflowTemplatePickerChange,
       )}
-      {renderInput(
+      {selectedWorkflowTemplateName &&
+        renderInput(
           "activityName",
           t("ActivityName"),
           form.state.data,
@@ -85,6 +124,8 @@ const CreateActivity: React.FC = () => {
           undefined,
           form.handleChange,
         )}
+      {selectedWorkflowTemplateName &&
+        renderButton(t("CreateActivity"), form.state.errors, "save")}
     </form>
   );
 };