webui/src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx

import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
import HorizontalTabs from "../../../components/common/HorizionalTabs";
import Tab from "../../../components/common/Tab";
import GeneralTab from "./components/GeneralTab";
import { Navigate, useParams } from "react-router-dom";
import templateVersionsService, {
  CreateWorkflowTemplateVersion,
  TaskDefinition,
} from "./services/WorkflowTemplateService";
import Loading from "../../../components/common/Loading";
import { toast } from "react-toastify";
import Joi from "joi";
import {
  renderButton,
  renderError,
} from "../../../components/common/formHelpers";
import ErrorBlock from "../../../components/common/ErrorBlock";
import authentication from "../../frame/services/authenticationService";
import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
import { CustomFieldValue } from "../glossary/services/glossaryService";
import TasksTab from "./components/TasksTab";
import { useFormWithGuard } from "../../../components/common/useFormRouter";

const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
  editMode,
}) => {
  const { t } = useTranslation(Namespaces.Common);
  const { userId } = useParams<{ userId: string }>();
  const [activeTab, setActiveTab] = React.useState("general");

  // useForm promoted to the parent
  const form = useFormWithGuard({
    loaded: false,
    data: {
      name: "",
      domainId: [] as CustomFieldValue[],
      activityNameTemplate: "",
      description: "",
      tasks: [] as TaskDefinition[],
    } as CreateWorkflowTemplateVersion,
    errors: {},
    redirect: "",
  });

  const heading = editMode
    ? t("EditWorkflowTemplate")
    : t("AddWorkflowTemplate");

  // -----------------------------
  // Joi schema (same pattern as original GeneralTab)
  // -----------------------------
  form.schema = {
    name: Joi.string().required().max(450).label(t("WorkflowTemplateName")),
    activityNameTemplate: Joi.string()
      .required()
      .max(450)
      .label(t("ActivityNameTemplate")),
    description: Joi.string().required().allow("").label(t("Description")),
    domainId: Joi.required(),
  };

  // -----------------------------
  // Load existing template (edit mode)
  // -----------------------------
  useEffect(() => {
    const load = async () => {
      const newData: CreateWorkflowTemplateVersion = { ...form.state.data };

      if (editMode && userId) {
        try {
          const loadedData = await templateVersionsService.getTemplateVersion(
            BigInt(userId),
          );

          if (loadedData) {
            newData.name = loadedData.name ?? "";
          }
        } catch (ex: any) {
          form.handleGeneralError(ex);
        }
      } else {
        const user = authentication.getCurrentUser();
        newData.domainId = [
          { value: MakeGeneralIdRef(user?.domainid) } as CustomFieldValue,
        ];
      }

      form.setState({ ...form.state, loaded: true, data: newData });
    };

    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editMode, userId]);

  // -----------------------------
  // Save handler (called by useForm.handleSubmit)
  // -----------------------------
  const doSubmit = async (buttonName: string) => {
    try {
      //const { name } = form.state.data;

      if (editMode) {
        //await templateVersionsService.putTemplateVersion({ name });
        toast.info(t("WorkflowTemplateEdited"));
      } else {
        //await templateVersionsService.postTemplateVersion({ name });
        toast.info(t("WorkflowTemplateAdded"));
      }

      if (buttonName === "save") {
        form.setState({ ...form.state, redirect: "/workflowTemplates" });
      }

      form.markAsSaved();
    } catch (ex: any) {
      form.handleGeneralError(ex);
    }
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    form.handleSubmit(e, doSubmit);
  };

  const { loaded, redirect, errors, data } = form.state;
  if (redirect) return <Navigate to={redirect} />;

  // -----------------------------
  // Tabs
  // -----------------------------
  const tabs = [
    <Tab key="general" id="general" label={t("General")}>
      <GeneralTab
        data={data}
        errors={errors}
        isEditMode={editMode}
        onFieldChange={form.handleChange}
        handleDomainPickerChange={form.handleDomainPickerChange}
      />
    </Tab>,

    <Tab key="tasks" id="tasks" label={t("Tasks")}>
      <TasksTab
        data={data}
        errors={errors}
        isEditMode={editMode}
        onTasksChange={form.handleTasksChange}
      />
    </Tab>,

    <Tab key="fields" id="fields" label={t("Fields")}>
      <div>Fields editor coming soon…</div>
    </Tab>,

    <Tab key="visualFlow" id="visualFlow" label={t("Visual Flow")}>
      <div>Visual Flow editor coming soon…</div>
    </Tab>,
  ];

  return (
    <Loading loaded={loaded}>
      <div>
        <form onSubmit={handleSubmit}>
          <h1>{heading}</h1>

          <div style={{ marginBottom: "1rem" }}>
            {editMode && renderButton(t("Save"), errors, "apply")}
            {renderButton(t("SaveAndClose"), errors, "save")}
          </div>

          {Object.keys(errors).length > 0 && (
            <ErrorBlock error={t("ResolveAllValidation")} />
          )}

          {renderError("_general", errors)}

          <HorizontalTabs
            hashSegment={0}
            activeTab={activeTab}
            onTabChange={setActiveTab}
          >
            {tabs}
          </HorizontalTabs>
        </form>
      </div>
    </Loading>
  );
};

export default WorkflowTemplateDetails;