Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import React from "react";
import { Step } from "../../../../types/index.ts";
import TaskNode from "./TaskNode.tsx";
import { useSelector } from "react-redux";
import { currentPlaybookSelector } from "../../../../store/features/playbook/playbookSlice.ts";
import { Handle, NodeToolbar, Position } from "reactflow";
import AddButtonOptions from "../../card/AddButtonOptions.tsx";
import useIsPrefetched from "../../../../hooks/playbooks/useIsPrefetched.ts";
import StepTitle from "../../steps/StepTitle.tsx";
import StepButtons from "../../steps/StepButtons.tsx";
import handleStepBorderColor from "../../../../utils/playbook/handleStepBorderColor.ts";
// import useHasChildren from "../../../../hooks/useHasChildren.ts";
import ExternalLinksList from "../../../common/ExternalLinksList/index.tsx";
import MarkdownOutput from "../../card/MarkdownOutput.tsx";
import useStepDimensions from "../../../../hooks/playbooks/step/useStepDimensions.ts";
function StepNode({ data }) {
const currentPlaybook = useSelector(currentPlaybookSelector);
const tasks = currentPlaybook?.ui_requirement?.tasks;
const step: Step = data.step;
const isPrefetched = useIsPrefetched();
// const hasChildren = useHasChildren(step?.id);
const stepRef = useStepDimensions(step?.id);
const showPopup = (step?.external_links?.length ?? 0) > 0 || step.notes;
return (
<>
<div
ref={stepRef}
style={{ borderColor: handleStepBorderColor(step.id) }}
className="p-2 rounded bg-gray-50 border-2 w-[350px] step-information">
<StepTitle step={step} />
<div className="flex flex-col gap-1 mt-2">
{step?.tasks?.map((stepTask) => {
const taskId =
typeof stepTask === "string" ? stepTask : stepTask.id;
const task = tasks?.find((task) => task.id === taskId);
Iif (!task) return null;
return <TaskNode key={taskId} taskId={taskId} />;
})}
</div>
{!isPrefetched && <StepButtons id={step.id} />}
{step?.ui_requirement?.stepIndex !== 0 && (
<Handle
type="target"
position={Position.Top}
className="!bg-white !w-5 !h-5 absolute !top-0 !transform !-translate-x-1/2 !-translate-y-1/2 !border-violet-500 !border-2"
/>
)}
{/* {hasChildren && ( */}
<Handle
type="source"
position={Position.Bottom}
className="!bg-white !w-5 !h-5 absolute !bottom-0 !transform !-translate-x-1/2 !translate-y-1/2 !border-violet-500 !border-2"
/>
{/* )} */}
{!isPrefetched && (
<NodeToolbar isVisible={true} position={Position.Bottom}>
<AddButtonOptions stepId={step.id} />
</NodeToolbar>
)}
</div>
{showPopup && (
<div className="step-notes absolute top-1/2 left-full -translate-x-1/4 rounded-3xl overflow-hidden max-w-md shadow-xl rounded-tl-none bg-white">
<div className="px-3 py-1">
<ExternalLinksList id={step?.id} />
</div>
<MarkdownOutput content={step?.notes} />
</div>
)}
</>
);
}
export default StepNode;
|