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,
} 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 { useForm } from "../../../components/common/useForm";

const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
  editMode,
}) => {
  const { t } = useTranslation<typeof Namespaces.Common>();
  const { userId } = useParams<{ userId: string }>();

  // useForm promoted to the parent
  const form = useForm({
    loaded: false,
    data: {
      name: "",
    } 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")),
  };

  // -----------------------------
  // 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);
        }
      }

      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" });
      }
    } 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}
      />
    </Tab>,

    <Tab key="tasks" id="tasks" label={t("Tasks")}>
      <div>Tasks editor coming soon…</div>
    </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>

          {renderError("_general", errors)}

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

export default WorkflowTemplateDetails;