diff --git a/web/core/components/command-palette/actions/issue-actions/actions-list.tsx b/web/core/components/command-palette/actions/issue-actions/actions-list.tsx index b2fce17f2c0..5d15365babf 100644 --- a/web/core/components/command-palette/actions/issue-actions/actions-list.tsx +++ b/web/core/components/command-palette/actions/issue-actions/actions-list.tsx @@ -4,14 +4,13 @@ import { Command } from "cmdk"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react"; -import { EIssuesStoreType } from "@plane/constants"; import { TIssue } from "@plane/types"; // hooks import { DoubleCircleIcon, TOAST_TYPE, setToast } from "@plane/ui"; // helpers import { copyTextToClipboard } from "@/helpers/string.helper"; // hooks -import { useCommandPalette, useIssues, useUser } from "@/hooks/store"; +import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store"; type Props = { closePalette: () => void; @@ -27,9 +26,7 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => { // router const { workspaceSlug, projectId, issueId } = useParams(); // hooks - const { - issues: { updateIssue }, - } = useIssues(EIssuesStoreType.PROJECT); + const { updateIssue } = useIssueDetail(); const { toggleCommandPaletteModal, toggleDeleteIssueModal } = useCommandPalette(); const { data: currentUser } = useUser(); @@ -65,16 +62,10 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => { const url = new URL(window.location.href); copyTextToClipboard(url.href) .then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Copied to clipboard", - }); + setToast({ type: TOAST_TYPE.SUCCESS, title: "Copied to clipboard" }); }) .catch(() => { - setToast({ - type: TOAST_TYPE.ERROR, - title: "Some error occurred", - }); + setToast({ type: TOAST_TYPE.ERROR, title: "Some error occurred" }); }); }; diff --git a/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx b/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx index f9eee044ae4..2b8e2af1e18 100644 --- a/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx +++ b/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx @@ -4,8 +4,6 @@ import { Command } from "cmdk"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import { Check } from "lucide-react"; -// plane constants -import { EIssuesStoreType } from "@plane/constants"; // plane types import { TIssue } from "@plane/types"; // plane ui @@ -13,21 +11,16 @@ import { Avatar } from "@plane/ui"; // helpers import { getFileURL } from "@/helpers/file.helper"; // hooks -import { useIssues, useMember } from "@/hooks/store"; +import { useIssueDetail, useMember } from "@/hooks/store"; -type Props = { - closePalette: () => void; - issue: TIssue; -}; +type Props = { closePalette: () => void; issue: TIssue }; export const ChangeIssueAssignee: React.FC = observer((props) => { const { closePalette, issue } = props; // router params const { workspaceSlug, projectId } = useParams(); // store - const { - issues: { updateIssue }, - } = useIssues(EIssuesStoreType.PROJECT); + const { updateIssue } = useIssueDetail(); const { project: { projectMemberIds, getProjectMemberDetails }, } = useMember(); diff --git a/web/core/components/command-palette/actions/issue-actions/change-priority.tsx b/web/core/components/command-palette/actions/issue-actions/change-priority.tsx index d5fd09a55a5..2d4752d24ca 100644 --- a/web/core/components/command-palette/actions/issue-actions/change-priority.tsx +++ b/web/core/components/command-palette/actions/issue-actions/change-priority.tsx @@ -5,28 +5,23 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import { Check } from "lucide-react"; // plane constants -import { EIssuesStoreType, ISSUE_PRIORITIES } from "@plane/constants"; +import { ISSUE_PRIORITIES } from "@plane/constants"; // plane types import { TIssue, TIssuePriorities } from "@plane/types"; // mobx store import { PriorityIcon } from "@plane/ui"; -import { useIssues } from "@/hooks/store"; +import { useIssueDetail } from "@/hooks/store"; // ui // types // constants -type Props = { - closePalette: () => void; - issue: TIssue; -}; +type Props = { closePalette: () => void; issue: TIssue }; export const ChangeIssuePriority: React.FC = observer((props) => { const { closePalette, issue } = props; // router params const { workspaceSlug, projectId } = useParams(); - const { - issues: { updateIssue }, - } = useIssues(EIssuesStoreType.PROJECT); + const { updateIssue } = useIssueDetail(); const submitChanges = async (formData: Partial) => { if (!workspaceSlug || !projectId || !issue) return; diff --git a/web/core/components/command-palette/actions/issue-actions/change-state.tsx b/web/core/components/command-palette/actions/issue-actions/change-state.tsx index f60ee7dcaa1..c6e90612615 100644 --- a/web/core/components/command-palette/actions/issue-actions/change-state.tsx +++ b/web/core/components/command-palette/actions/issue-actions/change-state.tsx @@ -5,27 +5,21 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; // hooks import { Check } from "lucide-react"; -import { EIssuesStoreType } from "@plane/constants"; import { TIssue } from "@plane/types"; import { Spinner, StateGroupIcon } from "@plane/ui"; -import { useProjectState, useIssues } from "@/hooks/store"; +import { useProjectState, useIssueDetail } from "@/hooks/store"; // ui // icons // types -type Props = { - closePalette: () => void; - issue: TIssue; -}; +type Props = { closePalette: () => void; issue: TIssue }; export const ChangeIssueState: React.FC = observer((props) => { const { closePalette, issue } = props; // router params const { workspaceSlug, projectId } = useParams(); // store hooks - const { - issues: { updateIssue }, - } = useIssues(EIssuesStoreType.PROJECT); + const { updateIssue } = useIssueDetail(); const { projectStates } = useProjectState(); const submitChanges = async (formData: Partial) => { diff --git a/web/core/components/command-palette/command-modal.tsx b/web/core/components/command-palette/command-modal.tsx index 19bf7eb5bee..e58c7f9c160 100644 --- a/web/core/components/command-palette/command-modal.tsx +++ b/web/core/components/command-palette/command-modal.tsx @@ -5,13 +5,14 @@ import { Command } from "cmdk"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import useSWR from "swr"; -import { CommandIcon, FolderPlus, Search, Settings } from "lucide-react"; +import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; // plane imports import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { IWorkspaceSearchResults } from "@plane/types"; import { LayersIcon, Loader, ToggleSwitch } from "@plane/ui"; +import { cn } from "@plane/utils"; // components import { ChangeIssueAssignee, @@ -56,18 +57,11 @@ export const CommandModal: React.FC = observer(() => { const [isSearching, setIsSearching] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [results, setResults] = useState({ - results: { - workspace: [], - project: [], - issue: [], - cycle: [], - module: [], - issue_view: [], - page: [], - }, + results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] }, }); - const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(true); + const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false); const [pages, setPages] = useState([]); + const [searchInIssue, setSearchInIssue] = useState(false); // plane hooks const { t } = useTranslation(); // hooks @@ -96,6 +90,20 @@ export const CommandModal: React.FC = observer(() => { : null ); + useEffect(() => { + if (issueDetails && isCommandPaletteOpen) { + setSearchInIssue(true); + } + }, [issueDetails, isCommandPaletteOpen]); + + useEffect(() => { + if (!projectId && !isWorkspaceLevel) { + setIsWorkspaceLevel(true); + } else { + setIsWorkspaceLevel(false); + } + }, [projectId]); + const closePalette = () => { toggleCommandPaletteModal(false); }; @@ -133,15 +141,7 @@ export const CommandModal: React.FC = observer(() => { }); } else { setResults({ - results: { - workspace: [], - project: [], - issue: [], - cycle: [], - module: [], - issue_view: [], - page: [], - }, + results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] }, }); setIsLoading(false); setIsSearching(false); @@ -152,7 +152,16 @@ export const CommandModal: React.FC = observer(() => { return ( setSearchTerm("")} as={React.Fragment}> - closePalette()}> + { + closePalette(); + if (searchInIssue) { + setSearchInIssue(true); + } + }} + > { nextItem.setAttribute("aria-selected", "true"); selectedItem?.setAttribute("aria-selected", "false"); nextItem.focus(); - nextItem.scrollIntoView({ - behavior: "smooth", - block: "nearest", - }); + nextItem.scrollIntoView({ behavior: "smooth", block: "nearest" }); } } @@ -237,32 +243,40 @@ export const CommandModal: React.FC = observer(() => { } }} > -
- {issueDetails && ( -
- {issueDetails.project_id && ( - - )} - {issueDetails.name} -
- )} -
-
-