Hide Move Items From Non-Owners

The dropdown menu on an issue card still shows the Move to X items to anyone who can open the menu. Now that the server rejects those calls, a non-owner who clicks one just gets an error toast. Let’s hide the items from non-owners instead.

We need to know, inside the issue card, whether the current user owns the parent project. The card already has issue.projectId, so we can add a second useQuery(api.projects.get, { id: issue.projectId }) to fetch the project document.

Update src/components/issue-card.tsx:

function IssueCard({ issue, isOverlay }: IssueCardProps) {
  // ...existing code...
  const project = useQuery(api.projects.get, { id: issue.projectId });

  const isCreator = currentUser?._id === issue.creatorId; // existing check
  const isProjectOwner =
    currentUser !== undefined &&
    currentUser !== null &&
    project !== undefined &&
    project !== null &&
    currentUser._id === project.ownerId;
  const canEditOrDelete = isCreator && issue.status === "todo"; // existing check

  // ...rest of the component...
}

And gate each Move item on isProjectOwner:

<DropdownMenuContent align="end">
  {isProjectOwner && issue.status !== "todo" && (
    <DropdownMenuItem
      onClick={() => updateStatus({ id: issue._id, status: "todo" })}
    >
      Move to To Do
    </DropdownMenuItem>
  )}
  {isProjectOwner && issue.status !== "in-progress" && (
    <DropdownMenuItem
      onClick={() => updateStatus({ id: issue._id, status: "in-progress" })}
    >
      Move to In Progress
    </DropdownMenuItem>
  )}
  {isProjectOwner && issue.status !== "done" && (
    <DropdownMenuItem
      onClick={() => updateStatus({ id: issue._id, status: "done" })}
    >
      Move to Done
    </DropdownMenuItem>
  )}
  {isProjectOwner && canEditOrDelete && <DropdownMenuSeparator />}
  {canEditOrDelete && (
    <>
      <DropdownMenuItem onClick={() => setEditOpen(true)}>
        <Pencil className="mr-2 h-4 w-4" />
        Edit
      </DropdownMenuItem>
      <DropdownMenuItem
        className="text-destructive"
        onClick={() => removeIssue({ id: issue._id })}
      >
        <Trash2 className="mr-2 h-4 w-4" />
        Delete
      </DropdownMenuItem>
    </>
  )}
</DropdownMenuContent>

The separator is now conditional on isProjectOwner && canEditOrDelete. We only want a separator when there are items on both sides of it. If you are the owner but the issue is out of To Do, you see three move items and no separator. If you are the creator of a To Do issue in someone else’s project, you see no move items, no separator, and just Edit and Delete. If you are neither, the menu is empty, and Radix collapses it to nothing.

Try It Out

To set this up, use two GitHub accounts, or ask a classmate to sign in on your dev deployment. You need someone who is signed in but did not create the project. Open any project that is not yours. Click the ⋯ menu on any issue: no Move items show, because isProjectOwner is false. File a new issue on the project (it starts in To Do), and the ⋯ menu on that issue will show Edit and Delete, because you are the creator, but still no Move items, because you are not the owner.

Checkpoint: Commit your progress.

git add .
git commit -m "tracker-14: Hide move items from non-owners"
git push