All files / src/components/common/PermanentDrawers StepDetailsDrawer.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { CircularProgress } from "@mui/material";
import { useEffect, useRef } from "react";
import updateStepById from "../../../utils/playbook/step/updateStepById.ts";
import Step from "../../Playbooks/steps/Step.tsx";
import CustomInput from "../../Inputs/CustomInput.tsx";
import { InputTypes } from "../../../types/inputs/inputTypes.ts";
import useIsPrefetched from "../../../hooks/playbooks/useIsPrefetched.ts";
import useCurrentStep from "../../../hooks/playbooks/step/useCurrentStep.ts";
 
function StepDetailsDrawer() {
  const [step, currentStepId] = useCurrentStep();
  const stepRef = useRef<HTMLDivElement>(null);
  const isPrefetched = useIsPrefetched();
 
  const handleUpdateStepName = (val: string) => {
    updateStepById("description", val, currentStepId!);
  };
 
  useEffect(() => {
    stepRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, [stepRef, currentStepId]);
 
  Iif (Object.keys(step ?? {}).length === 0) return <>No Step Found</>;
 
  return (
    <div ref={stepRef} className="p-2 min-h-screen mb-16">
      <h2 className="font-bold mb-2 flex items-center gap-2 justify-between mr-2">
        Title{" "}
        {step?.ui_requirement?.outputLoading && <CircularProgress size={20} />}
      </h2>
 
      <CustomInput
        inputType={InputTypes.TEXT}
        value={step?.description ?? ""}
        handleChange={handleUpdateStepName}
        disabled={!!isPrefetched}
        className="!w-full"
        containerClassName="w-full"
        placeholder="Enter step name"
      />
 
      {currentStepId && <Step id={currentStepId} />}
    </div>
  );
}
 
export default StepDetailsDrawer;