import { useRouter } from "next/router"; import React, { useCallback, useEffect, useState } from "react"; import useSWR, { mutate } from "swr"; // icons import { ArrowRightIcon, ChartBarIcon, ChatBubbleOvalLeftEllipsisIcon, DocumentTextIcon, FolderPlusIcon, LinkIcon, MagnifyingGlassIcon, RocketLaunchIcon, Squares2X2Icon, TrashIcon, UserMinusIcon, UserPlusIcon, UsersIcon, } from "@heroicons/react/24/outline"; import { AssignmentClipboardIcon, ContrastIcon, DiscordIcon, DocumentIcon, GithubIcon, LayerDiagonalIcon, PeopleGroupIcon, SettingIcon, ViewListIcon, } from "components/icons"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // cmdk import { Command } from "cmdk"; // hooks import useTheme from "hooks/use-theme"; import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; import useDebounce from "hooks/use-debounce"; // components import { ShortcutsModal, ChangeIssueState, ChangeIssuePriority, ChangeIssueAssignee, } from "components/command-palette"; import { BulkDeleteIssuesModal } from "components/core"; import { CreateUpdateCycleModal } from "components/cycles"; import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues"; import { CreateUpdateModuleModal } from "components/modules"; import { CreateProjectModal } from "components/project"; import { CreateUpdateViewModal } from "components/views"; import { CreateUpdatePageModal } from "components/pages"; import { Spinner } from "components/ui"; // helpers import { capitalizeFirstLetter, copyTextToClipboard, replaceUnderscoreIfSnakeCase, } from "helpers/string.helper"; // services import issuesService from "services/issues.service"; import workspaceService from "services/workspace.service"; // types import { IIssue, IWorkspaceSearchResults } from "types"; // fetch keys import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; export const CommandPalette: React.FC = () => { const [isPaletteOpen, setIsPaletteOpen] = useState(false); const [isIssueModalOpen, setIsIssueModalOpen] = useState(false); const [isProjectModalOpen, setIsProjectModalOpen] = useState(false); const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false); const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false); const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false); const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false); const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false); const [searchTerm, setSearchTerm] = React.useState(""); const [results, setResults] = useState({ results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [], }, }); const [resultsCount, setResultsCount] = useState(0); const [isLoading, setIsLoading] = useState(false); const [isSearching, setIsSearching] = useState(false); const debouncedSearchTerm = useDebounce(searchTerm, 500); const [placeholder, setPlaceholder] = React.useState("Type a command or search..."); const [pages, setPages] = React.useState([]); const page = pages[pages.length - 1]; const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { user } = useUser(); const { setToastAlert } = useToast(); const { toggleCollapsed } = useTheme(); const { data: issueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string) : null ); const updateIssue = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; mutate( ISSUE_DETAILS(issueId as string), (prevData: IIssue) => ({ ...prevData, ...formData, }), false ); const payload = { ...formData }; await issuesService .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload) .then(() => { mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); mutate(ISSUE_DETAILS(issueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, issueId, projectId] ); const handleIssueAssignees = (assignee: string) => { if (!issueDetails) return; setIsPaletteOpen(false); const updatedAssignees = issueDetails.assignees ?? []; if (updatedAssignees.includes(assignee)) { updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1); } else { updatedAssignees.push(assignee); } updateIssue({ assignees_list: updatedAssignees }); }; const copyIssueUrlToClipboard = useCallback(() => { if (!router.query.issueId) return; const url = new URL(window.location.href); copyTextToClipboard(url.href) .then(() => { setToastAlert({ type: "success", title: "Copied to clipboard", }); }) .catch(() => { setToastAlert({ type: "error", title: "Some error occurred", }); }); }, [router, setToastAlert]); const handleKeyDown = useCallback( (e: KeyboardEvent) => { const singleShortcutKeys = ["p", "v", "d", "h", "q", "m"]; const { key, ctrlKey, metaKey, altKey, shiftKey } = e; if (!key) return; const keyPressed = key.toLowerCase(); if ( !(e.target instanceof HTMLTextAreaElement) && !(e.target instanceof HTMLInputElement) && !(e.target as Element).classList?.contains("remirror-editor") ) { if ((ctrlKey || metaKey) && keyPressed === "k") { e.preventDefault(); setIsPaletteOpen(true); } else if ((ctrlKey || metaKey) && keyPressed === "c") { if (altKey) { e.preventDefault(); copyIssueUrlToClipboard(); } } else if (keyPressed === "c") { e.preventDefault(); setIsIssueModalOpen(true); } else if ((ctrlKey || metaKey) && keyPressed === "b") { e.preventDefault(); toggleCollapsed(); } else if (key === "Delete") { e.preventDefault(); setIsBulkDeleteIssuesModalOpen(true); } else if ( singleShortcutKeys.includes(keyPressed) && (ctrlKey || metaKey || altKey || shiftKey) ) { e.preventDefault(); } else if (keyPressed === "p") { setIsProjectModalOpen(true); } else if (keyPressed === "v") { setIsCreateViewModalOpen(true); } else if (keyPressed === "d") { setIsCreateUpdatePageModalOpen(true); } else if (keyPressed === "h") { setIsShortcutsModalOpen(true); } else if (keyPressed === "q") { setIsCreateCycleModalOpen(true); } else if (keyPressed === "m") { setIsCreateModuleModalOpen(true); } } }, [toggleCollapsed, copyIssueUrlToClipboard] ); useEffect(() => { document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [handleKeyDown]); useEffect( () => { if (!workspaceSlug || !projectId) return; setIsLoading(true); // this is done prevent subsequent api request // or searchTerm has not been updated within last 500ms. if (debouncedSearchTerm) { setIsSearching(true); workspaceService .searchWorkspace(workspaceSlug as string, projectId as string, debouncedSearchTerm) .then((results) => { setResults(results); const count = Object.keys(results.results).reduce( (accumulator, key) => (results.results as any)[key].length + accumulator, 0 ); setResultsCount(count); }) .finally(() => { setIsLoading(false); setIsSearching(false); }); } else { setResults({ results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [], }, }); setIsLoading(false); setIsSearching(false); } }, [debouncedSearchTerm, workspaceSlug, projectId] // Only call effect if debounced search term changes ); if (!user) return null; const createNewWorkspace = () => { setIsPaletteOpen(false); router.push("/create-workspace"); }; const createNewProject = () => { setIsPaletteOpen(false); setIsProjectModalOpen(true); }; const createNewIssue = () => { setIsPaletteOpen(false); setIsIssueModalOpen(true); }; const createNewCycle = () => { setIsPaletteOpen(false); setIsCreateCycleModalOpen(true); }; const createNewView = () => { setIsPaletteOpen(false); setIsCreateViewModalOpen(true); }; const createNewPage = () => { setIsPaletteOpen(false); setIsCreateUpdatePageModalOpen(true); }; const createNewModule = () => { setIsPaletteOpen(false); setIsCreateModuleModalOpen(true); }; const deleteIssue = () => { setIsPaletteOpen(false); setDeleteIssueModal(true); }; const goToSettings = (path: string = "") => { setIsPaletteOpen(false); router.push(`/${workspaceSlug}/settings/${path}`); }; return ( <> {workspaceSlug && ( )} {projectId && ( <> setIsCreateCycleModalOpen(false)} /> setIsCreateViewModalOpen(false)} isOpen={isCreateViewModalOpen} /> setIsCreateUpdatePageModalOpen(false)} /> )} {issueId && issueDetails && ( setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetails} /> )} setIsIssueModalOpen(false)} /> { setSearchTerm(""); }} as={React.Fragment} > setIsPaletteOpen(false)}>
{ if (value.toLowerCase().includes(search.toLowerCase())) return 1; return 0; }} onKeyDown={(e) => { // when seach is empty and page is undefined // when user tries to close the modal with esc if (e.key === "Escape" && !page && !searchTerm) { setIsPaletteOpen(false); } // Escape goes to previous page // Backspace goes to previous page when search is empty if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) { e.preventDefault(); setPages((pages) => pages.slice(0, -1)); setPlaceholder("Type a command or search..."); } }} > {issueId && issueDetails && (

{issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "} {issueDetails?.name}

)}
{!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
No results found.
)} {(isLoading || isSearching) && (
)} {debouncedSearchTerm !== "" && ( <> {Object.keys(results.results).map((key) => { const section = (results.results as any)[key]; if (section.length > 0) { return ( {section.map((item: any) => { let path = ""; let value = item.name; let Icon: any = ArrowRightIcon; if (key === "workspace") { path = `/${item.slug}`; Icon = FolderPlusIcon; } else if (key == "project") { path = `/${item.workspace__slug}/projects/${item.id}/issues`; Icon = AssignmentClipboardIcon; } else if (key === "issue") { path = `/${item.workspace__slug}/projects/${item.project_id}/issues/${item.id}`; // user can search id-num idnum or issue name value = `${item.project__identifier}-${item.sequence_id} ${item.project__identifier}${item.sequence_id} ${item.name}`; Icon = LayerDiagonalIcon; } else if (key === "issue_view") { path = `/${item.workspace__slug}/projects/${item.project_id}/views/${item.id}`; Icon = ViewListIcon; } else if (key === "module") { path = `/${item.workspace__slug}/projects/${item.project_id}/modules/${item.id}`; Icon = PeopleGroupIcon; } else if (key === "page") { path = `/${item.workspace__slug}/projects/${item.project_id}/pages/${item.id}`; Icon = DocumentTextIcon; } else if (key === "cycle") { path = `/${item.workspace__slug}/projects/${item.project_id}/cycles/${item.id}`; Icon = ContrastIcon; } return ( { router.push(path); setIsPaletteOpen(false); }} value={value} className="focus:outline-none" >

{item.name}

); })}
); } })} )} {!page && ( <> {issueId && ( <> { setPlaceholder("Change state..."); setSearchTerm(""); setPages([...pages, "change-issue-state"]); }} className="focus:outline-none" >
Change state...
{ setPlaceholder("Change priority..."); setSearchTerm(""); setPages([...pages, "change-issue-priority"]); }} className="focus:outline-none" >
Change priority...
{ setPlaceholder("Assign to..."); setSearchTerm(""); setPages([...pages, "change-issue-assignee"]); }} className="focus:outline-none" >
Assign to...
{ handleIssueAssignees(user.id); setSearchTerm(""); }} className="focus:outline-none" >
{issueDetails?.assignees.includes(user.id) ? ( <> Un-assign from me ) : ( <> Assign to me )}
Delete issue
{ setIsPaletteOpen(false); copyIssueUrlToClipboard(); }} className="focus:outline-none" >
Copy issue URL to clipboard
)}
Create new issue
C
{workspaceSlug && (
Create new project
P
)} {projectId && ( <>
Create new cycle
Q
Create new module
M
Create new view
V
Create new page
D
)} { setPlaceholder("Search workspace settings..."); setSearchTerm(""); setPages([...pages, "settings"]); }} className="focus:outline-none" >
Search settings...
Create new workspace
{ setIsPaletteOpen(false); const e = new KeyboardEvent("keydown", { key: "h", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Open keyboard shortcuts
{ setIsPaletteOpen(false); window.open("https://docs.plane.so/", "_blank"); }} className="focus:outline-none" >
Open Plane documentation
{ setIsPaletteOpen(false); window.open("https://discord.com/invite/A92xrEGCge", "_blank"); }} className="focus:outline-none" >
Join our Discord
{ setIsPaletteOpen(false); window.open( "https://github.com/makeplane/plane/issues/new/choose", "_blank" ); }} className="focus:outline-none" >
Report a bug
{ setIsPaletteOpen(false); (window as any).$crisp.push(["do", "chat:open"]); }} className="focus:outline-none" >
Chat with us
)} {page === "settings" && workspaceSlug && ( <> goToSettings()} className="focus:outline-none" >
General
goToSettings("members")} className="focus:outline-none" >
Members
goToSettings("billing")} className="focus:outline-none" >
Billings and Plans
goToSettings("integrations")} className="focus:outline-none" >
Integrations
goToSettings("import-export")} className="focus:outline-none" >
Import/Export
)} {page === "change-issue-state" && issueDetails && ( <> )} {page === "change-issue-priority" && issueDetails && ( )} {page === "change-issue-assignee" && issueDetails && ( )}
); };