plane/web/components/issues/issue-detail/parent-select.tsx

import React from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Pencil, X } from "lucide-react";
// hooks
import { useIssueDetail, useProject } from "hooks/store";
// components
import { ParentIssuesListModal } from "components/issues";
// ui
import { Tooltip } from "@plane/ui";
// helpers
import { cn } from "helpers/common.helper";
// types
import { TIssueOperations } from "./root";

type TIssueParentSelect = {
  className?: string;
  disabled?: boolean;
  issueId: string;
  issueOperations: TIssueOperations;
  projectId: string;
  workspaceSlug: string;
};

export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
  const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props;
  // store hooks
  const { getProjectById } = useProject();
  const {
    issue: { getIssueById },
  } = useIssueDetail();
  const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
  // derived values
  const issue = getIssueById(issueId);
  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
  const parentIssueProjectDetails =
    parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;

  const handleParentIssue = async (_issueId: string | null = null) => {
    try {
      await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
      await issueOperations.fetch(workspaceSlug, projectId, issueId);
      toggleParentIssueModal(false);
    } catch (error) {
      console.error("something went wrong while fetching the issue");
    }
  };

  if (!issue) return <></>;

  return (
    <>
      <ParentIssuesListModal
        projectId={projectId}
        issueId={issueId}
        isOpen={isParentIssueModalOpen}
        handleClose={() => toggleParentIssueModal(false)}
        onChange={(issue: any) => handleParentIssue(issue?.id)}
      />
      <button
        type="button"
        className={cn(
          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
          {
            "cursor-not-allowed": disabled,
            "hover:bg-custom-background-80": !disabled,
            "bg-custom-background-80": isParentIssueModalOpen,
          },
          className
        )}
        onClick={() => toggleParentIssueModal(true)}
        disabled={disabled}
      >
        {issue.parent_id && parentIssue ? (
          <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
            <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name}>
              <Link
                href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs font-medium"
                onClick={(e) => e.stopPropagation()}
              >
                {parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
              </Link>
            </Tooltip>

            {!disabled && (
              <Tooltip tooltipContent="Remove" position="bottom">
                <span
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    handleParentIssue(null);
                  }}
                >
                  <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
                </span>
              </Tooltip>
            )}
          </div>
        ) : (
          <span className="text-sm text-custom-text-400">Add parent issue</span>
        )}
        {!disabled && (
          <span
            className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
              "text-custom-text-400": !issue.parent_id && !parentIssue,
            })}
          >
            <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
          </span>
        )}
      </button>
    </>
  );
});