plane/web/components/integration/github/import-users.tsx

import { FC } from "react";

// react-hook-form
import { UseFormWatch } from "react-hook-form";
// ui
import { PrimaryButton, SecondaryButton } from "components/ui";
// types
import {
  IUserDetails,
  SingleUserSelect,
  TFormValues,
  TIntegrationSteps,
} from "components/integration";

type Props = {
  handleStepChange: (value: TIntegrationSteps) => void;
  users: IUserDetails[];
  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
  watch: UseFormWatch<TFormValues>;
};

export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
  const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;

  return (
    <div className="mt-6">
      <div>
        <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
          <div className="text-custom-text-200">Name</div>
          <div className="text-custom-text-200">Import as...</div>
          <div className="text-right">
            {users.filter((u) => u.import !== false).length} users selected
          </div>
        </div>
        <div className="space-y-2">
          {watch("collaborators").map((collaborator, index) => (
            <SingleUserSelect
              key={collaborator.id}
              collaborator={collaborator}
              index={index}
              users={users}
              setUsers={setUsers}
            />
          ))}
        </div>
      </div>
      <div className="mt-6 flex items-center justify-end gap-2">
        <SecondaryButton onClick={() => handleStepChange("repo-details")}>Back</SecondaryButton>
        <PrimaryButton onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
          Next
        </PrimaryButton>
      </div>
    </div>
  );
};