[WEB-5088] feat: Power K v2 (#7905)
* feat: add project shortcut in command palette * feat: global project switcher shortcut * refactor: generalize command palette entity handling * feat: extend command palette navigation * feat: add issue shortcut to command palette * feat: add modular project selection for cycle navigation * chore: add reusable command palette utilities * fix: update key sequence handling to use window methods for timeout management * fix: build errors * chore: minor ux copy improvements * feat: implement a new command registry and renderer for enhanced command palette functionality * feat: introduce new command palette components and enhance search functionality * feat: enhance command palette components with improved initialization and loading indicators * feat: Implement new command palette architecture with multi-step commands, context-aware filtering, and reusable components. Add comprehensive documentation and integration guides. Enhance command execution with a dedicated executor and context provider. Introduce new command types and improve existing command definitions for better usability and maintainability. * refactor: hook arguments * refactor: folder structure * refactor: update import paths * fix: context prop drilling * refactor: update search components * refactor: create actions * chore: add type to pages * chore: init contextual actions * refactor: context based actions code split * chore: module context-based actions * refactor: streamline command execution flow and enhance multi-step handling in command palette * refactor: remove placeholder management from command execution and implement centralized placeholder mapping * chore: cycle context based actions * refactor: simplify command execution by consolidating selection steps and adding page change handling * chore: added more options to work item contextual actions * chore: page context actions * refactor: update step type definitions and enhance page mapping for command execution * feat: implement Command Palette V2 with global shortcuts and enhanced context handling * refactor: power k v2 * refactor: creation commands * feat: add navigation utility for Power K context handling * feat: implement comprehensive navigation commands for Power K * refactor: work item contextual actions * fix: build errors * refactor: remaining contextual actions * refactor: remove old code * chore: update placeholder * refactor: enhance command registry with observable properties and context-aware shortcut handling * refactor: improve command filtering logic in CommandPaletteModal * chore: context indicator * chore: misc actions * style: shortcut badge * feat: add open entity actions and enhance navigation commands for Power K * refactor: rename and reorganize Power K components for improved clarity and structure * refactor: update CommandPalette components and streamline global shortcuts handling * refactor: adjust debounce timing in CommandPaletteModal for improved responsiveness * feat: implement shortcuts modal and enhance command registry for better shortcut management * fix: search implemented * refactor: search results code split * refactor: search results code split * feat: introduce creation and navigation command modules for Power K, enhancing command organization and functionality * chore: update menu logos * refactor: remove unused PowerKOpenEntityActionsExtended component from command palette * refactor: search menu * fix: clear context on backspace and manual clear * refactor: rename creation command keys for consistency and clarity in Power K * chore: added intake in global search * chore: preferences menu * chore: removed the empty serach params * revert: command palette changes * cleanup * refactor: update command IDs to use underscores for consistency across Power K components * refactor: extended context based actions * chore: modal command item status props * refactor: replace CommandPalette with CommandPaletteProvider in settings and profile layouts * refactor: update settings menu to use translated labels instead of i18n labels * refactor: update command titles to use translation keys for creation actions * refactor: update navigation command titles to use translation keys for consistency * chore: minor cleanup * chore: misc commands added * chore: code split for no search results command * chore: state menu items for work item context based commands * chore: add more props to no search results command * chore: add more props to no search results command * refactor: remove shortcut key for create workspace command * Refactor command palette to use PowerK store - Replaced instances of `useCommandPalette` with `usePowerK` across various components, including `AppSearch`, `CommandModal`, and `CommandPalette`. - Introduced `PowerKStore` to manage modal states and commands, enhancing the command palette functionality. - Updated modal handling to toggle `PowerKModal` and `ShortcutsListModal` instead of the previous command palette modals. - Refactored related components to ensure compatibility with the new store structure and maintain functionality. * Refactor PowerK command handling to remove context dependency - Updated `usePowerKCommands` and `usePowerKCreationCommands` to eliminate the need for a context parameter, simplifying their usage. - Adjusted related command records to utilize the new structure, ensuring consistent access to command configurations. - Enhanced permission checks in creation commands to utilize user project roles for better access control. * chore: add context indicator * chore: update type import * chore: migrate toast implementation from @plane/ui to @plane/propel/toast across multiple command files * refactor: power k modal wrapper and provider * fix: type imports * chore: update creation command shortcuts * fix: page context commands * chore: update navigation and open command shortcuts * fix: work item standalone page modals * fix: context indicator visibility * fix: potential error points * fix: build errors * fix: lint errors * fix: import order --------- Co-authored-by: Vihar Kurama <vihar.kurama@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
73e0e8d529
commit
350107d6c1
126 changed files with 5944 additions and 1784 deletions
|
|
@ -3,6 +3,7 @@ import { computedFn } from "mobx-utils";
|
|||
import type { TCreateModalStoreTypes, TCreatePageModal } from "@plane/constants";
|
||||
import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess } from "@plane/constants";
|
||||
import { EIssuesStoreType } from "@plane/types";
|
||||
import { store } from "@/lib/store-context";
|
||||
|
||||
export interface ModalData {
|
||||
store: EIssuesStoreType;
|
||||
|
|
@ -11,8 +12,6 @@ export interface ModalData {
|
|||
|
||||
export interface IBaseCommandPaletteStore {
|
||||
// observables
|
||||
isCommandPaletteOpen: boolean;
|
||||
isShortcutModalOpen: boolean;
|
||||
isCreateProjectModalOpen: boolean;
|
||||
isCreateCycleModalOpen: boolean;
|
||||
isCreateModuleModalOpen: boolean;
|
||||
|
|
@ -27,8 +26,6 @@ export interface IBaseCommandPaletteStore {
|
|||
projectListOpenMap: Record<string, boolean>;
|
||||
getIsProjectListOpen: (projectId: string) => boolean;
|
||||
// toggle actions
|
||||
toggleCommandPaletteModal: (value?: boolean) => void;
|
||||
toggleShortcutModal: (value?: boolean) => void;
|
||||
toggleCreateProjectModal: (value?: boolean) => void;
|
||||
toggleCreateCycleModal: (value?: boolean) => void;
|
||||
toggleCreateViewModal: (value?: boolean) => void;
|
||||
|
|
@ -43,8 +40,6 @@ export interface IBaseCommandPaletteStore {
|
|||
|
||||
export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStore {
|
||||
// observables
|
||||
isCommandPaletteOpen: boolean = false;
|
||||
isShortcutModalOpen: boolean = false;
|
||||
isCreateProjectModalOpen: boolean = false;
|
||||
isCreateCycleModalOpen: boolean = false;
|
||||
isCreateModuleModalOpen: boolean = false;
|
||||
|
|
@ -61,8 +56,6 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
|
|||
constructor() {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
isCommandPaletteOpen: observable.ref,
|
||||
isShortcutModalOpen: observable.ref,
|
||||
isCreateProjectModalOpen: observable.ref,
|
||||
isCreateCycleModalOpen: observable.ref,
|
||||
isCreateModuleModalOpen: observable.ref,
|
||||
|
|
@ -75,10 +68,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
|
|||
createWorkItemAllowedProjectIds: observable,
|
||||
allStickiesModal: observable,
|
||||
projectListOpenMap: observable,
|
||||
// projectPages: computed,
|
||||
// toggle actions
|
||||
toggleCommandPaletteModal: action,
|
||||
toggleShortcutModal: action,
|
||||
toggleCreateProjectModal: action,
|
||||
toggleCreateCycleModal: action,
|
||||
toggleCreateViewModal: action,
|
||||
|
|
@ -103,7 +93,7 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
|
|||
this.isCreateProjectModalOpen ||
|
||||
this.isCreateModuleModalOpen ||
|
||||
this.isCreateViewModalOpen ||
|
||||
this.isShortcutModalOpen ||
|
||||
store.powerK.isShortcutsListModalOpen ||
|
||||
this.isBulkDeleteIssueModalOpen ||
|
||||
this.isDeleteIssueModalOpen ||
|
||||
this.createPageModal.isOpen ||
|
||||
|
|
@ -123,32 +113,6 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
|
|||
else this.projectListOpenMap[projectId] = !this.projectListOpenMap[projectId];
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the command palette modal
|
||||
* @param value
|
||||
* @returns
|
||||
*/
|
||||
toggleCommandPaletteModal = (value?: boolean) => {
|
||||
if (value !== undefined) {
|
||||
this.isCommandPaletteOpen = value;
|
||||
} else {
|
||||
this.isCommandPaletteOpen = !this.isCommandPaletteOpen;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the shortcut modal
|
||||
* @param value
|
||||
* @returns
|
||||
*/
|
||||
toggleShortcutModal = (value?: boolean) => {
|
||||
if (value !== undefined) {
|
||||
this.isShortcutModalOpen = value;
|
||||
} else {
|
||||
this.isShortcutModalOpen = !this.isShortcutModalOpen;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the create project modal
|
||||
* @param value
|
||||
|
|
|
|||
93
apps/web/core/store/base-power-k.store.ts
Normal file
93
apps/web/core/store/base-power-k.store.ts
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { observable, action, makeObservable } from "mobx";
|
||||
// plane imports
|
||||
import type { EIssuesStoreType } from "@plane/types";
|
||||
// components
|
||||
import type { IPowerKCommandRegistry } from "@/components/power-k/core/registry";
|
||||
import { PowerKCommandRegistry } from "@/components/power-k/core/registry";
|
||||
import type { TPowerKContextType, TPowerKPageType } from "@/components/power-k/core/types";
|
||||
|
||||
export interface ModalData {
|
||||
store: EIssuesStoreType;
|
||||
viewId: string;
|
||||
}
|
||||
|
||||
export interface IBasePowerKStore {
|
||||
// observables
|
||||
isPowerKModalOpen: boolean;
|
||||
isShortcutsListModalOpen: boolean;
|
||||
commandRegistry: IPowerKCommandRegistry;
|
||||
activeContext: TPowerKContextType | null;
|
||||
activePage: TPowerKPageType | null;
|
||||
setActiveContext: (entity: TPowerKContextType | null) => void;
|
||||
setActivePage: (page: TPowerKPageType | null) => void;
|
||||
// toggle actions
|
||||
togglePowerKModal: (value?: boolean) => void;
|
||||
toggleShortcutsListModal: (value?: boolean) => void;
|
||||
}
|
||||
|
||||
export abstract class BasePowerKStore implements IBasePowerKStore {
|
||||
// observables
|
||||
isPowerKModalOpen: boolean = false;
|
||||
isShortcutsListModalOpen: boolean = false;
|
||||
commandRegistry: IPowerKCommandRegistry = new PowerKCommandRegistry();
|
||||
activeContext: TPowerKContextType | null = null;
|
||||
activePage: TPowerKPageType | null = null;
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
isPowerKModalOpen: observable.ref,
|
||||
isShortcutsListModalOpen: observable.ref,
|
||||
commandRegistry: observable.ref,
|
||||
activeContext: observable,
|
||||
activePage: observable,
|
||||
// toggle actions
|
||||
togglePowerKModal: action,
|
||||
toggleShortcutsListModal: action,
|
||||
setActiveContext: action,
|
||||
setActivePage: action,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the active context entity
|
||||
* @param entity
|
||||
*/
|
||||
setActiveContext = (entity: TPowerKContextType | null) => {
|
||||
this.activeContext = entity;
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the active page
|
||||
* @param page
|
||||
*/
|
||||
setActivePage = (page: TPowerKPageType | null) => {
|
||||
this.activePage = page;
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the command palette modal
|
||||
* @param value
|
||||
* @returns
|
||||
*/
|
||||
togglePowerKModal = (value?: boolean) => {
|
||||
if (value !== undefined) {
|
||||
this.isPowerKModalOpen = value;
|
||||
} else {
|
||||
this.isPowerKModalOpen = !this.isPowerKModalOpen;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the shortcut modal
|
||||
* @param value
|
||||
* @returns
|
||||
*/
|
||||
toggleShortcutsListModal = (value?: boolean) => {
|
||||
if (value !== undefined) {
|
||||
this.isShortcutsListModalOpen = value;
|
||||
} else {
|
||||
this.isShortcutsListModalOpen = !this.isShortcutsListModalOpen;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ import type { IAnalyticsStore } from "@/plane-web/store/analytics.store";
|
|||
import { AnalyticsStore } from "@/plane-web/store/analytics.store";
|
||||
import type { ICommandPaletteStore } from "@/plane-web/store/command-palette.store";
|
||||
import { CommandPaletteStore } from "@/plane-web/store/command-palette.store";
|
||||
import { PowerKStore } from "@/plane-web/store/power-k.store";
|
||||
import type { IPowerKStore } from "@/plane-web/store/power-k.store";
|
||||
import type { RootStore } from "@/plane-web/store/root.store";
|
||||
import type { IStateStore } from "@/plane-web/store/state.store";
|
||||
import { StateStore } from "@/plane-web/store/state.store";
|
||||
|
|
@ -95,6 +97,7 @@ export class CoreRootStore {
|
|||
stickyStore: IStickyStore;
|
||||
editorAssetStore: IEditorAssetStore;
|
||||
workItemFilters: IWorkItemFilterStore;
|
||||
powerK: IPowerKStore;
|
||||
|
||||
constructor() {
|
||||
this.router = new RouterStore();
|
||||
|
|
@ -126,6 +129,7 @@ export class CoreRootStore {
|
|||
this.editorAssetStore = new EditorAssetStore();
|
||||
this.analytics = new AnalyticsStore();
|
||||
this.workItemFilters = new WorkItemFilterStore();
|
||||
this.powerK = new PowerKStore();
|
||||
}
|
||||
|
||||
resetOnSignOut() {
|
||||
|
|
@ -159,5 +163,6 @@ export class CoreRootStore {
|
|||
this.stickyStore = new StickyStore();
|
||||
this.editorAssetStore = new EditorAssetStore();
|
||||
this.workItemFilters = new WorkItemFilterStore();
|
||||
this.powerK = new PowerKStore();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue