export function StepSeparator()

in src/components/StepSeparator/index.tsx [38:80]


export function StepSeparator({ index, step }: IStepSeparator) {
  const testStatus = useStepResultStatus(
    step.actions.length ? step.actions[0].title : undefined,
    step.name
  );
  const [showControls, setShowControls] = useState(false);
  const [canDelete, setCanDelete] = useState(true);
  const { isDraggable } = useDragAndDrop(index);

  return (
    <div
      onMouseEnter={() => setShowControls(true)}
      onMouseLeave={() => setShowControls(false)}
      data-test-subj="step-div"
    >
      <StepSeparatorAccordion
        extraAction={
          <SeparatorActions
            canDelete={canDelete}
            index={index}
            isDraggable={isDraggable}
            showControls={showControls}
            step={step}
          />
        }
        id={`step-separator-${index}`}
        initialIsOpen
        onToggle={(isOpen: boolean) => setCanDelete(isOpen)}
      >
        {step.actions.map((actionContext, actionIndex) => (
          <ActionElement
            key={`action-${actionIndex}-for-step-${index}`}
            actionContext={actionContext}
            actionIndex={actionIndex}
            stepIndex={index}
            testStatus={testStatus}
            isLast={actionIndex === step.actions.length - 1}
          />
        ))}
      </StepSeparatorAccordion>
    </div>
  );
}