import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { Command } from "cmdk"; import { Dialog, Transition } from "@headlessui/react"; // services import { WorkspaceService } from "services/workspace.service"; import { IssueService } from "services/issue"; // hooks import useDebounce from "hooks/use-debounce"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // components import { ChangeInterfaceTheme, ChangeIssueAssignee, ChangeIssuePriority, ChangeIssueState, commandGroups, } from "components/command-palette"; // ui import { FileText, FolderPlus, LinkIcon, MessageSquare, Rocket, Settings, Signal, Trash2, UserMinus2, UserPlus2, } from "lucide-react"; import { ContrastIcon, DiceIcon, DoubleCircleIcon, LayersIcon, Loader, PhotoFilterIcon, ToggleSwitch, Tooltip, UserGroupIcon, } from "@plane/ui"; // icons import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import { IIssue, IWorkspaceSearchResults } from "types"; // fetch-keys import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; type Props = { deleteIssue: () => void; isPaletteOpen: boolean; closePalette: () => void; }; // services const workspaceService = new WorkspaceService(); const issueService = new IssueService(); export const CommandModal: React.FC = (props) => { const { deleteIssue, isPaletteOpen, closePalette } = props; // router const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; // states const [placeholder, setPlaceholder] = useState("Type a command or search..."); const [resultsCount, setResultsCount] = useState(0); const [isLoading, setIsLoading] = useState(false); const [isSearching, setIsSearching] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [results, setResults] = useState({ results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [], }, }); const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false); const [pages, setPages] = useState([]); const page = pages[pages.length - 1]; const debouncedSearchTerm = useDebounce(searchTerm, 500); const { setToastAlert } = useToast(); const { user } = useUser(); const { data: issueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? () => issueService.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) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false ); const payload = { ...formData }; await issueService .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user) .then(() => { mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); mutate(ISSUE_DETAILS(issueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, issueId, projectId, user] ); const handleIssueAssignees = (assignee: string) => { if (!issueDetails) return; closePalette(); const updatedAssignees = issueDetails.assignees ?? []; if (updatedAssignees.includes(assignee)) { updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1); } else { updatedAssignees.push(assignee); } updateIssue({ assignees_list: updatedAssignees }); }; const redirect = (path: string) => { closePalette(); router.push(path); }; const createNewWorkspace = () => { closePalette(); router.push("/create-workspace"); }; 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]); useEffect( () => { if (!workspaceSlug) return; setIsLoading(true); if (debouncedSearchTerm) { setIsSearching(true); workspaceService .searchWorkspace(workspaceSlug as string, { ...(projectId ? { project_id: projectId.toString() } : {}), search: debouncedSearchTerm, workspace_search: !projectId ? true : isWorkspaceLevel, }) .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, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes ); if (!user) return null; return ( { setSearchTerm(""); }} as={React.Fragment} > closePalette()}>
{ if (value.toLowerCase().includes(search.toLowerCase())) return 1; return 0; }} onKeyDown={(e) => { // when search is empty and page is undefined // when user tries to close the modal with esc if (e.key === "Escape" && !page && !searchTerm) { closePalette(); } // 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..."); } }} >
{issueDetails && (
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id} {issueDetails.name}
)} {projectId && (
setIsWorkspaceLevel((prevData) => !prevData)} />
)}
{searchTerm !== "" && (
Search results for{" "} {'"'} {searchTerm} {'"'} {" "} in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
)} {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
No results found.
)} {(isLoading || isSearching) && ( )} {debouncedSearchTerm !== "" && Object.keys(results.results).map((key) => { const section = (results.results as any)[key]; const currentSection = commandGroups[key]; if (section.length > 0) { return ( {section.map((item: any) => ( { closePalette(); router.push(currentSection.path(item)); }} value={`${key}-${item?.name}`} className="focus:outline-none" >
{currentSection.icon}

{currentSection.itemName(item)}

))}
); } })} {!page && ( <> {issueId && ( { closePalette(); 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
{ closePalette(); copyIssueUrlToClipboard(); }} className="focus:outline-none" >
Copy issue URL
)} { closePalette(); const e = new KeyboardEvent("keydown", { key: "c", }); document.dispatchEvent(e); }} className="focus:bg-custom-background-80" >
Create new issue
C
{workspaceSlug && ( { closePalette(); const e = new KeyboardEvent("keydown", { key: "p", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Create new project
P
)} {projectId && ( <> { closePalette(); const e = new KeyboardEvent("keydown", { key: "q", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Create new cycle
Q
{ closePalette(); const e = new KeyboardEvent("keydown", { key: "m", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Create new module
M
{ closePalette(); const e = new KeyboardEvent("keydown", { key: "v", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Create new view
V
{ closePalette(); const e = new KeyboardEvent("keydown", { key: "d", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Create new page
D
)} { setPlaceholder("Search workspace settings..."); setSearchTerm(""); setPages([...pages, "settings"]); }} className="focus:outline-none" >
Search settings...
Create new workspace
{ setPlaceholder("Change interface theme..."); setSearchTerm(""); setPages([...pages, "change-interface-theme"]); }} className="focus:outline-none" >
Change interface theme...
{ closePalette(); const e = new KeyboardEvent("keydown", { key: "h", }); document.dispatchEvent(e); }} className="focus:outline-none" >
Open keyboard shortcuts
{ closePalette(); window.open("https://docs.plane.so/", "_blank"); }} className="focus:outline-none" >
Open Plane documentation
{ closePalette(); window.open("https://discord.com/invite/A92xrEGCge", "_blank"); }} className="focus:outline-none" >
Join our Discord
{ closePalette(); window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank"); }} className="focus:outline-none" >
Report a bug
{ closePalette(); (window as any).$crisp.push(["do", "chat:open"]); }} className="focus:outline-none" >
Chat with us
)} {page === "settings" && workspaceSlug && ( <> redirect(`/${workspaceSlug}/settings`)} className="focus:outline-none" >
General
redirect(`/${workspaceSlug}/settings/members`)} className="focus:outline-none" >
Members
redirect(`/${workspaceSlug}/settings/billing`)} className="focus:outline-none" >
Billing and Plans
redirect(`/${workspaceSlug}/settings/integrations`)} className="focus:outline-none" >
Integrations
redirect(`/${workspaceSlug}/settings/imports`)} className="focus:outline-none" >
Import
redirect(`/${workspaceSlug}/settings/exports`)} className="focus:outline-none" >
Export
)} {page === "change-issue-state" && issueDetails && ( )} {page === "change-issue-priority" && issueDetails && ( )} {page === "change-issue-assignee" && issueDetails && ( )} {page === "change-interface-theme" && }
); };