NODEDC_TASKMANAGER/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useCallback, useEffect } from "react";
import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { IconButton } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TNameDescriptionLoader } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { ControlLink, Header, Row } from "@plane/ui";
import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
import { useProject } from "@/hooks/store/use-project";
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
import { useAppRouter } from "@/hooks/use-app-router";
import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
import { InboxIssueStatus } from "@/components/inbox/inbox-issue-status";

type Props = {
  workspaceSlug: string;
  projectId: string;
  inboxIssue: IInboxIssueStore | undefined;
  isSubmitting: TNameDescriptionLoader;
  isMobileSidebar: boolean;
  setIsMobileSidebar: (value: boolean) => void;
};

export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
  const { workspaceSlug, projectId, inboxIssue, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
  const { t } = useTranslation();
  const router = useAppRouter();
  const { currentTab, filteredInboxIssueIds } = useProjectInbox();
  const { getProjectById } = useProject();

  const issue = inboxIssue?.issue;
  const currentInboxIssueId = issue?.id;

  const redirectToRelativeIssue = useCallback(
    (direction: "next" | "prev") => {
      if (!filteredInboxIssueIds || !currentInboxIssueId) return;
      const currentIssueIndex = filteredInboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId);
      const nextIssueIndex =
        direction === "next"
          ? (currentIssueIndex + 1) % filteredInboxIssueIds.length
          : (currentIssueIndex - 1 + filteredInboxIssueIds.length) % filteredInboxIssueIds.length;
      const nextIssueId = filteredInboxIssueIds[nextIssueIndex];
      if (!nextIssueId) return;
      router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
    },
    [currentInboxIssueId, currentTab, filteredInboxIssueIds, projectId, router, workspaceSlug]
  );

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "ArrowUp") redirectToRelativeIssue("prev");
      if (event.key === "ArrowDown") redirectToRelativeIssue("next");
    };

    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [redirectToRelativeIssue]);

  if (!issue || !inboxIssue) return null;

  const workItemLink = generateWorkItemLink({
    workspaceSlug: workspaceSlug?.toString(),
    projectId: issue.project_id,
    issueId: currentInboxIssueId,
    projectIdentifier: getProjectById(issue.project_id)?.identifier,
    sequenceId: issue.sequence_id,
  });

  const showWorkflowToast = (actionLabel: string) =>
    setToast({
      type: TOAST_TYPE.INFO,
      title: t("external_contours_page.actions.unsupported_title"),
      message: t("external_contours_page.actions.unsupported_message", { action: actionLabel.toLowerCase() }),
    });

  const handleCopyLink = () =>
    copyUrlToClipboard(workItemLink).then(() =>
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: t("common.link_copied"),
        message: t("common.copied_to_clipboard"),
      })
    );

  const isOpenTab = currentTab === EInboxIssueCurrentTab.OPEN;

  return (
    <>
      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
        <div className="flex items-center gap-4">
          {issue?.project_id && issue.sequence_id && (
            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
              {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
            </h3>
          )}
          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
          <div className="flex w-full items-center justify-end">
            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
          </div>
        </div>

        <div className="flex items-center gap-2">
          <div className="flex items-center gap-x-2">
            <IconButton variant="secondary" size="lg" icon={ChevronUpIcon} aria-label="Previous request" onClick={() => redirectToRelativeIssue("prev")} />
            <IconButton variant="secondary" size="lg" icon={ChevronDownIcon} aria-label="Next request" onClick={() => redirectToRelativeIssue("next")} />
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {isOpenTab ? (
              <>
                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.send"))}>
                  <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
                  {t("external_contours_page.actions.send")}
                </Button>
                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
                  <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
                  {t("external_contours_page.actions.decline")}
                </Button>
              </>
            ) : (
              <>
                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.accept"))}>
                  <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
                  {t("external_contours_page.actions.accept")}
                </Button>
                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
                  <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
                  {t("external_contours_page.actions.decline")}
                </Button>
              </>
            )}

            <Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
              {t("external_contours_page.actions.copy")}
            </Button>
            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
              <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
                {t("external_contours_page.actions.open")}
              </Button>
            </ControlLink>
          </div>
        </div>
      </Row>

      <Header className="justify-start lg:hidden">
        <PanelLeft
          onClick={() => setIsMobileSidebar(!isMobileSidebar)}
          className={`my-auto mr-2 h-4 w-4 flex-shrink-0 ${isMobileSidebar ? "text-accent-primary" : "text-secondary"}`}
        />
        <div className="flex w-full items-center gap-2">
          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
          <div className="ml-auto flex items-center gap-2">
            <Button variant="secondary" size="sm" onClick={() => showWorkflowToast(isOpenTab ? t("external_contours_page.actions.send") : t("external_contours_page.actions.accept"))}>
              {isOpenTab ? t("external_contours_page.actions.send") : t("external_contours_page.actions.accept")}
            </Button>
            <Button variant="secondary" size="sm" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
              {t("external_contours_page.actions.decline")}
            </Button>
          </div>
        </div>
      </Header>
    </>
  );
});