feat: init

apps/web/ce/components/issues/issue-details/additional-activity-root.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+
+export type TAdditionalActivityRoot = {
+  activityId: string;
+  showIssue?: boolean;
+  ends: "top" | "bottom" | undefined;
+  field: string | undefined;
+};
+
+export const AdditionalActivityRoot: FC<TAdditionalActivityRoot> = observer(() => <></>);

apps/web/ce/components/issues/issue-details/additional-properties.tsx

@@ -0,0 +1,14 @@
+import type { FC } from "react";
+import React from "react";
+// plane imports
+
+export type TWorkItemAdditionalSidebarProperties = {
+  workItemId: string;
+  workItemTypeId: string | null;
+  projectId: string;
+  workspaceSlug: string;
+  isEditable: boolean;
+  isPeekView?: boolean;
+};
+
+export const WorkItemAdditionalSidebarProperties: FC<TWorkItemAdditionalSidebarProperties> = () => <></>;

apps/web/ce/components/issues/issue-details/index.ts

@@ -0,0 +1,7 @@
+export * from "./issue-identifier";
+export * from "./issue-properties-activity";
+export * from "./issue-type-switcher";
+export * from "./issue-type-activity";
+export * from "./parent-select-root";
+export * from "./issue-creator";
+export * from "./additional-activity-root";

apps/web/ce/components/issues/issue-details/issue-creator.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+import Link from "next/link";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type TIssueUser = {
+  activityId: string;
+  customUserName?: string;
+};
+
+export const IssueCreatorDisplay: FC<TIssueUser> = (props) => {
+  const { activityId, customUserName } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  return (
+    <>
+      {customUserName ? (
+        <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+      ) : (
+        <Link
+          href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
+          className="hover:underline text-custom-text-100 font-medium"
+        >
+          {activity.actor_detail?.display_name}
+        </Link>
+      )}
+    </>
+  );
+};

apps/web/ce/components/issues/issue-details/issue-identifier.tsx

@@ -0,0 +1,105 @@
+import type { FC } from "react";
+import { observer } from "mobx-react";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueDisplayProperties } from "@plane/types";
+// ui
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+
+type TIssueIdentifierBaseProps = {
+  projectId: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  textContainerClassName?: string;
+  displayProperties?: IIssueDisplayProperties | undefined;
+  enableClickToCopyIdentifier?: boolean;
+};
+
+type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
+  issueId: string;
+};
+
+type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
+  issueTypeId?: string | null;
+  projectIdentifier: string;
+  issueSequenceId: string | number;
+};
+
+export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
+
+type TIssueTypeIdentifier = {
+  issueTypeId: string;
+  size?: "xs" | "sm" | "md" | "lg";
+};
+
+export const IssueTypeIdentifier: FC<TIssueTypeIdentifier> = observer((props) => <></>);
+
+type TIdentifierTextProps = {
+  identifier: string;
+  enableClickToCopyIdentifier?: boolean;
+  textContainerClassName?: string;
+};
+
+export const IdentifierText: React.FC<TIdentifierTextProps> = (props) => {
+  const { identifier, enableClickToCopyIdentifier = false, textContainerClassName } = props;
+  // handlers
+  const handleCopyIssueIdentifier = () => {
+    if (enableClickToCopyIdentifier) {
+      navigator.clipboard.writeText(identifier).then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Work item ID copied to clipboard",
+        });
+      });
+    }
+  };
+
+  return (
+    <Tooltip tooltipContent="Click to copy" disabled={!enableClickToCopyIdentifier} position="top">
+      <span
+        className={cn(
+          "text-base font-medium text-custom-text-300",
+          {
+            "cursor-pointer": enableClickToCopyIdentifier,
+          },
+          textContainerClassName
+        )}
+        onClick={handleCopyIssueIdentifier}
+      >
+        {identifier}
+      </span>
+    </Tooltip>
+  );
+};
+
+export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props) => {
+  const { projectId, textContainerClassName, displayProperties, enableClickToCopyIdentifier = false } = props;
+  // store hooks
+  const { getProjectIdentifierById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // Determine if the component is using store data or not
+  const isUsingStoreData = "issueId" in props;
+  // derived values
+  const issue = isUsingStoreData ? getIssueById(props.issueId) : null;
+  const projectIdentifier = isUsingStoreData ? getProjectIdentifierById(projectId) : props.projectIdentifier;
+  const issueSequenceId = isUsingStoreData ? issue?.sequence_id : props.issueSequenceId;
+  const shouldRenderIssueID = displayProperties ? displayProperties.key : true;
+
+  if (!shouldRenderIssueID) return null;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <IdentifierText
+        identifier={`${projectIdentifier}-${issueSequenceId}`}
+        enableClickToCopyIdentifier={enableClickToCopyIdentifier}
+        textContainerClassName={textContainerClassName}
+      />
+    </div>
+  );
+});

apps/web/ce/components/issues/issue-details/issue-properties-activity/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+
+type TIssueAdditionalPropertiesActivity = {
+  activityId: string;
+  ends: "top" | "bottom" | undefined;
+};
+
+export const IssueAdditionalPropertiesActivity: FC<TIssueAdditionalPropertiesActivity> = () => <></>;

apps/web/ce/components/issues/issue-details/issue-type-activity.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+
+export type TIssueTypeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueTypeActivity: FC<TIssueTypeActivity> = observer(() => <></>);

apps/web/ce/components/issues/issue-details/issue-type-switcher.tsx

@@ -0,0 +1,24 @@
+import { observer } from "mobx-react";
+// store hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// plane web components
+import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
+
+export type TIssueTypeSwitcherProps = {
+  issueId: string;
+  disabled: boolean;
+};
+
+export const IssueTypeSwitcher: React.FC<TIssueTypeSwitcherProps> = observer((props) => {
+  const { issueId } = props;
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+
+  if (!issue || !issue.project_id) return <></>;
+
+  return <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" enableClickToCopyIdentifier />;
+});

apps/web/ce/components/issues/issue-details/parent-select-root.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// components
+import type { TIssueOperations } from "@/components/issues/issue-detail";
+import { IssueParentSelect } from "@/components/issues/issue-detail/parent-select";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type TIssueParentSelect = {
+  className?: string;
+  disabled?: boolean;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const IssueParentSelectRoot: React.FC<TIssueParentSelect> = observer((props) => {
+  const { issueId, issueOperations, projectId, workspaceSlug } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const {
+    toggleParentIssueModal,
+    removeSubIssue,
+    subIssues: { setSubIssueHelpers, fetchSubIssues },
+  } = useIssueDetail();
+
+  // derived values
+  const issue = getIssueById(issueId);
+  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_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, false);
+      if (_issueId) await fetchSubIssues(workspaceSlug, projectId, _issueId);
+      toggleParentIssueModal(null);
+    } catch (error) {
+      console.error("something went wrong while fetching the issue");
+    }
+  };
+
+  const handleRemoveSubIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string
+  ) => {
+    try {
+      setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+      await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+      await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
+      setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+    } catch (error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("common.error.label"),
+        message: t("common.something_went_wrong"),
+      });
+    }
+  };
+
+  const workItemLink = `/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue?.id}`;
+
+  if (!issue) return <></>;
+
+  return (
+    <IssueParentSelect
+      {...props}
+      handleParentIssue={handleParentIssue}
+      handleRemoveSubIssue={handleRemoveSubIssue}
+      workItemLink={workItemLink}
+    />
+  );
+});