Function WorkflowList

frontend/src/pages/WorkflowList.tsx:76–497

()

}

export function WorkflowList() {
  const navigate = useNavigate();
  const [workflows, setWorkflows] = useState<WorkflowMetadataNormalized[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [retryCount, setRetryCount] = useState(0);
  const retryCountRef = useRef(0); // Use ref to track actual count
  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const roles = useAuthStore((state) => state.roles);
  const canManageWorkflows = hasAdminRole(roles);
  const isReadOnly = !canManageWorkflows;
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [workflowToDelete, setWorkflowToDelete] = useState<WorkflowMetadataNormalized | null>(null);
  const [deleteError, setDeleteError] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const { isAuthenticated, isLoading: authLoading } = useAuth();
  const token = useAuthStore((state) => state.token);
  const adminUsername = useAuthStore((state) => state.adminUsername);

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  const handleDragEnd = useCallback((event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    setWorkflows((prev) => {
      const oldIndex = prev.findIndex((w) => w.id === active.id);
      const newIndex = prev.findIndex((w) => w.id === over.id);
      if (oldIndex !== -1 && newIndex !== -1) {
        const reordered = arrayMove(prev, oldIndex, newIndex);
        saveOrder(reordered.map((w) => w.id));
        return reordered;
      }
      return prev;
    });
  }, []);

  const MAX_RETRY_ATTEMPTS = 30; // Try for ~60 seconds (30 attempts × 2s)
  const RETRY_INTERVAL_MS = 2000; // 2 seconds between retries

  useEffect(() => {
    // Wait for auth to be ready before loading workflows
    if (authLoading) {
      return;
    }

    // Check if we have authentication (either token or admin credentials)
    const hasAuth = isAuthenticated || token || adminUsername;

    if (hasAuth) {
      loadWorkflows();
    } else {
      setIsLoading(false);
      setError('Please log in to view workflows');
    }
  }, [isAuthenticated, authLoading, token, adminUsername]);