fix: cmd-k project level action in work item detail page (#6637)
This commit is contained in:
parent
64752de3a8
commit
51c2ea6fcb
2 changed files with 47 additions and 22 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
|
import { FC } from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { useParams, usePathname } from "next/navigation";
|
import { useParams, usePathname } from "next/navigation";
|
||||||
import useSWR from "swr";
|
|
||||||
// components
|
// components
|
||||||
import { BulkDeleteIssuesModal } from "@/components/core";
|
import { BulkDeleteIssuesModal } from "@/components/core";
|
||||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
|
||||||
|
|
@ -10,17 +10,25 @@ import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store";
|
||||||
import { useAppRouter } from "@/hooks/use-app-router";
|
import { useAppRouter } from "@/hooks/use-app-router";
|
||||||
import { useIssuesStore } from "@/hooks/use-issue-layout-store";
|
import { useIssuesStore } from "@/hooks/use-issue-layout-store";
|
||||||
|
|
||||||
export const IssueLevelModals = observer(() => {
|
type Props = {
|
||||||
|
projectId: string | undefined;
|
||||||
|
issueId: string | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const IssueLevelModals: FC<Props> = observer((props) => {
|
||||||
|
const { projectId, issueId } = props;
|
||||||
// router
|
// router
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { workspaceSlug, projectId: paramsProjectId, workItem, cycleId, moduleId } = useParams();
|
const { workspaceSlug, cycleId, moduleId } = useParams();
|
||||||
const router = useAppRouter();
|
const router = useAppRouter();
|
||||||
// store hooks
|
// store hooks
|
||||||
const { data: currentUser } = useUser();
|
const { data: currentUser } = useUser();
|
||||||
|
const {
|
||||||
|
issue: { getIssueById },
|
||||||
|
} = useIssueDetail();
|
||||||
const {
|
const {
|
||||||
issues: { removeIssue },
|
issues: { removeIssue },
|
||||||
} = useIssuesStore();
|
} = useIssuesStore();
|
||||||
const { fetchIssueWithIdentifier } = useIssueDetail();
|
|
||||||
const {
|
const {
|
||||||
isCreateIssueModalOpen,
|
isCreateIssueModalOpen,
|
||||||
toggleCreateIssueModal,
|
toggleCreateIssueModal,
|
||||||
|
|
@ -30,21 +38,9 @@ export const IssueLevelModals = observer(() => {
|
||||||
toggleBulkDeleteIssueModal,
|
toggleBulkDeleteIssueModal,
|
||||||
} = useCommandPalette();
|
} = useCommandPalette();
|
||||||
// derived values
|
// derived values
|
||||||
|
const issueDetails = issueId ? getIssueById(issueId) : undefined;
|
||||||
const isDraftIssue = pathname?.includes("draft-issues") || false;
|
const isDraftIssue = pathname?.includes("draft-issues") || false;
|
||||||
|
|
||||||
const projectIdentifier = workItem?.toString().split("-")[0];
|
|
||||||
const sequence_id = workItem?.toString().split("-")[1];
|
|
||||||
|
|
||||||
const { data: issueDetails } = useSWR(
|
|
||||||
workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
|
|
||||||
workspaceSlug && workItem
|
|
||||||
? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const issueId = issueDetails?.id;
|
|
||||||
const projectId = paramsProjectId ?? issueDetails?.project_id;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CreateUpdateIssueModal
|
<CreateUpdateIssueModal
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import React, { useCallback, useEffect, FC, useMemo } from "react";
|
import React, { useCallback, useEffect, FC, useMemo } from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
|
import useSWR from "swr";
|
||||||
// ui
|
// ui
|
||||||
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
||||||
import { TOAST_TYPE, setToast } from "@plane/ui";
|
import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||||
|
|
@ -11,7 +12,14 @@ import { CommandModal, ShortcutsModal } from "@/components/command-palette";
|
||||||
// helpers
|
// helpers
|
||||||
import { copyTextToClipboard } from "@/helpers/string.helper";
|
import { copyTextToClipboard } from "@/helpers/string.helper";
|
||||||
// hooks
|
// hooks
|
||||||
import { useEventTracker, useUser, useAppTheme, useCommandPalette, useUserPermissions } from "@/hooks/store";
|
import {
|
||||||
|
useEventTracker,
|
||||||
|
useUser,
|
||||||
|
useAppTheme,
|
||||||
|
useCommandPalette,
|
||||||
|
useUserPermissions,
|
||||||
|
useIssueDetail,
|
||||||
|
} from "@/hooks/store";
|
||||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||||
// plane web components
|
// plane web components
|
||||||
import {
|
import {
|
||||||
|
|
@ -30,8 +38,9 @@ import {
|
||||||
|
|
||||||
export const CommandPalette: FC = observer(() => {
|
export const CommandPalette: FC = observer(() => {
|
||||||
// router params
|
// router params
|
||||||
const { workspaceSlug, projectId, workItem } = useParams();
|
const { workspaceSlug, projectId: paramsProjectId, workItem } = useParams();
|
||||||
// store hooks
|
// store hooks
|
||||||
|
const { fetchIssueWithIdentifier } = useIssueDetail();
|
||||||
const { toggleSidebar } = useAppTheme();
|
const { toggleSidebar } = useAppTheme();
|
||||||
const { setTrackElement } = useEventTracker();
|
const { setTrackElement } = useEventTracker();
|
||||||
const { platform } = usePlatformOS();
|
const { platform } = usePlatformOS();
|
||||||
|
|
@ -40,15 +49,35 @@ export const CommandPalette: FC = observer(() => {
|
||||||
const { allowPermissions } = useUserPermissions();
|
const { allowPermissions } = useUserPermissions();
|
||||||
|
|
||||||
// derived values
|
// derived values
|
||||||
|
const projectIdentifier = workItem?.toString().split("-")[0];
|
||||||
|
const sequence_id = workItem?.toString().split("-")[1];
|
||||||
|
|
||||||
|
const { data: issueDetails } = useSWR(
|
||||||
|
workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
|
||||||
|
workspaceSlug && workItem
|
||||||
|
? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const issueId = issueDetails?.id;
|
||||||
|
const projectId = paramsProjectId?.toString() ?? issueDetails?.project_id;
|
||||||
|
|
||||||
const canPerformWorkspaceMemberActions = allowPermissions(
|
const canPerformWorkspaceMemberActions = allowPermissions(
|
||||||
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
||||||
EUserPermissionsLevel.WORKSPACE
|
EUserPermissionsLevel.WORKSPACE
|
||||||
);
|
);
|
||||||
const canPerformProjectMemberActions = allowPermissions(
|
const canPerformProjectMemberActions = allowPermissions(
|
||||||
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
||||||
EUserPermissionsLevel.PROJECT
|
EUserPermissionsLevel.PROJECT,
|
||||||
|
workspaceSlug?.toString(),
|
||||||
|
projectId
|
||||||
|
);
|
||||||
|
const canPerformProjectAdminActions = allowPermissions(
|
||||||
|
[EUserPermissions.ADMIN],
|
||||||
|
EUserPermissionsLevel.PROJECT,
|
||||||
|
workspaceSlug?.toString(),
|
||||||
|
projectId
|
||||||
);
|
);
|
||||||
const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
|
|
||||||
|
|
||||||
const copyIssueUrlToClipboard = useCallback(() => {
|
const copyIssueUrlToClipboard = useCallback(() => {
|
||||||
if (!workItem) return;
|
if (!workItem) return;
|
||||||
|
|
@ -236,7 +265,7 @@ export const CommandPalette: FC = observer(() => {
|
||||||
{workspaceSlug && projectId && (
|
{workspaceSlug && projectId && (
|
||||||
<ProjectLevelModals workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
<ProjectLevelModals workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||||
)}
|
)}
|
||||||
<IssueLevelModals />
|
<IssueLevelModals projectId={projectId} issueId={issueId} />
|
||||||
<CommandModal />
|
<CommandModal />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue