improvement: command palette search results (#6761)
This commit is contained in:
parent
807148671f
commit
1bf683e044
6 changed files with 27 additions and 15 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import { TStaticViewTypes } from "@plane/types";
|
import { TStaticViewTypes, IWorkspaceSearchResults } from "@plane/types";
|
||||||
import { EUserWorkspaceRoles } from "./user";
|
import { EUserWorkspaceRoles } from "./user";
|
||||||
|
|
||||||
export const ORGANIZATION_SIZE = [
|
export const ORGANIZATION_SIZE = [
|
||||||
|
|
@ -324,3 +324,15 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarN
|
||||||
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
|
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
|
||||||
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
|
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const WORKSPACE_DEFAULT_SEARCH_RESULT: IWorkspaceSearchResults = {
|
||||||
|
results: {
|
||||||
|
workspace: [],
|
||||||
|
project: [],
|
||||||
|
issue: [],
|
||||||
|
cycle: [],
|
||||||
|
module: [],
|
||||||
|
issue_view: [],
|
||||||
|
page: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -16,14 +16,16 @@ import { generateWorkItemLink } from "@/helpers/issue.helper";
|
||||||
// plane web components
|
// plane web components
|
||||||
import { IssueIdentifier } from "@/plane-web/components/issues";
|
import { IssueIdentifier } from "@/plane-web/components/issues";
|
||||||
|
|
||||||
export const commandGroups: {
|
export type TCommandGroups = {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
icon: JSX.Element | null;
|
icon: JSX.Element | null;
|
||||||
itemName: (item: any) => React.ReactNode;
|
itemName: (item: any) => React.ReactNode;
|
||||||
path: (item: any, projectId: string | undefined) => string;
|
path: (item: any, projectId: string | undefined) => string;
|
||||||
title: string;
|
title: string;
|
||||||
};
|
};
|
||||||
} = {
|
};
|
||||||
|
|
||||||
|
export const commandGroups: TCommandGroups = {
|
||||||
cycle: {
|
cycle: {
|
||||||
icon: <ContrastIcon className="h-3 w-3" />,
|
icon: <ContrastIcon className="h-3 w-3" />,
|
||||||
itemName: (cycle: IWorkspaceDefaultSearchResult) => (
|
itemName: (cycle: IWorkspaceDefaultSearchResult) => (
|
||||||
3
web/ce/components/command-palette/index.ts
Normal file
3
web/ce/components/command-palette/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export * from "./actions";
|
||||||
|
export * from "./modals";
|
||||||
|
export * from "./helpers";
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
|
|
||||||
import { Command } from "cmdk";
|
import { Command } from "cmdk";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
// types
|
// plane imports
|
||||||
import { IWorkspaceSearchResults } from "@plane/types";
|
import { IWorkspaceSearchResults } from "@plane/types";
|
||||||
// helpers
|
|
||||||
import { commandGroups } from "@/components/command-palette";
|
|
||||||
// hooks
|
// hooks
|
||||||
import { useAppRouter } from "@/hooks/use-app-router";
|
import { useAppRouter } from "@/hooks/use-app-router";
|
||||||
|
// plane web imports
|
||||||
|
import { commandGroups } from "@/plane-web/components/command-palette";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
closePalette: () => void;
|
closePalette: () => void;
|
||||||
|
|
@ -25,9 +25,9 @@ export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Object.keys(results.results).map((key) => {
|
{Object.keys(results.results).map((key) => {
|
||||||
|
// TODO: add type for results
|
||||||
const section = (results.results as any)[key];
|
const section = (results.results as any)[key];
|
||||||
const currentSection = commandGroups[key];
|
const currentSection = commandGroups[key];
|
||||||
|
|
||||||
if (!currentSection) return null;
|
if (!currentSection) return null;
|
||||||
if (section.length > 0) {
|
if (section.length > 0) {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import useSWR from "swr";
|
||||||
import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react";
|
import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react";
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
// plane imports
|
// plane imports
|
||||||
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_DEFAULT_SEARCH_RESULT } from "@plane/constants";
|
||||||
import { useTranslation } from "@plane/i18n";
|
import { useTranslation } from "@plane/i18n";
|
||||||
import { IWorkspaceSearchResults } from "@plane/types";
|
import { IWorkspaceSearchResults } from "@plane/types";
|
||||||
import { LayersIcon, Loader, ToggleSwitch } from "@plane/ui";
|
import { LayersIcon, Loader, ToggleSwitch } from "@plane/ui";
|
||||||
|
|
@ -58,9 +58,7 @@ export const CommandModal: React.FC = observer(() => {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [isSearching, setIsSearching] = useState(false);
|
const [isSearching, setIsSearching] = useState(false);
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
const [results, setResults] = useState<IWorkspaceSearchResults>({
|
const [results, setResults] = useState<IWorkspaceSearchResults>(WORKSPACE_DEFAULT_SEARCH_RESULT);
|
||||||
results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] },
|
|
||||||
});
|
|
||||||
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
|
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
|
||||||
const [pages, setPages] = useState<string[]>([]);
|
const [pages, setPages] = useState<string[]>([]);
|
||||||
const [searchInIssue, setSearchInIssue] = useState(false);
|
const [searchInIssue, setSearchInIssue] = useState(false);
|
||||||
|
|
@ -151,9 +149,7 @@ export const CommandModal: React.FC = observer(() => {
|
||||||
setIsSearching(false);
|
setIsSearching(false);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
setResults({
|
setResults(WORKSPACE_DEFAULT_SEARCH_RESULT);
|
||||||
results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] },
|
|
||||||
});
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setIsSearching(false);
|
setIsSearching(false);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,3 @@ export * from "./actions";
|
||||||
export * from "./shortcuts-modal";
|
export * from "./shortcuts-modal";
|
||||||
export * from "./command-modal";
|
export * from "./command-modal";
|
||||||
export * from "./command-palette";
|
export * from "./command-palette";
|
||||||
export * from "./helpers";
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue