Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/ce/components/command-palette/actions/index.ts

@@ -0,0 +1 @@
+export * from "./work-item-actions";

apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx

@@ -0,0 +1,50 @@
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { Check } from "lucide-react";
+// plane imports
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { Spinner } from "@plane/ui";
+// store hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+export type TChangeWorkItemStateListProps = {
+  projectId: string | null;
+  currentStateId: string | null;
+  handleStateChange: (stateId: string) => void;
+};
+
+export const ChangeWorkItemStateList = observer((props: TChangeWorkItemStateListProps) => {
+  const { projectId, currentStateId, handleStateChange } = props;
+  // store hooks
+  const { getProjectStates } = useProjectState();
+  // derived values
+  const projectStates = getProjectStates(projectId);
+
+  return (
+    <>
+      {projectStates ? (
+        projectStates.length > 0 ? (
+          projectStates.map((state) => (
+            <Command.Item key={state.id} onSelect={() => handleStateChange(state.id)} className="focus:outline-none">
+              <div className="flex items-center space-x-3">
+                <StateGroupIcon
+                  stateGroup={state.group}
+                  color={state.color}
+                  size={EIconSize.LG}
+                  percentage={state?.order}
+                />
+                <p>{state.name}</p>
+              </div>
+              <div>{state.id === currentStateId && <Check className="h-3 w-3" />}</div>
+            </Command.Item>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </>
+  );
+});

apps/web/ce/components/command-palette/actions/work-item-actions/index.ts

@@ -0,0 +1 @@
+export * from "./change-state-list";

apps/web/ce/components/command-palette/helpers.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { LayoutGrid } from "lucide-react";
+// plane imports
+import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
+import type {
+  IWorkspaceDefaultSearchResult,
+  IWorkspaceIssueSearchResult,
+  IWorkspacePageSearchResult,
+  IWorkspaceProjectSearchResult,
+  IWorkspaceSearchResult,
+} from "@plane/types";
+import { generateWorkItemLink } from "@plane/utils";
+// plane web components
+import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
+
+export type TCommandGroups = {
+  [key: string]: {
+    icon: React.ReactNode | null;
+    itemName: (item: any) => React.ReactNode;
+    path: (item: any, projectId: string | undefined) => string;
+    title: string;
+  };
+};
+
+export const commandGroups: TCommandGroups = {
+  cycle: {
+    icon: <CycleIcon className="h-3 w-3" />,
+    itemName: (cycle: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
+      </h6>
+    ),
+    path: (cycle: IWorkspaceDefaultSearchResult) =>
+      `/${cycle?.workspace__slug}/projects/${cycle?.project_id}/cycles/${cycle?.id}`,
+    title: "Cycles",
+  },
+  issue: {
+    icon: null,
+    itemName: (issue: IWorkspaceIssueSearchResult) => (
+      <div className="flex gap-2">
+        <IssueIdentifier
+          projectId={issue.project_id}
+          issueTypeId={issue.type_id}
+          projectIdentifier={issue.project__identifier}
+          issueSequenceId={issue.sequence_id}
+          textContainerClassName="text-xs"
+        />{" "}
+        {issue.name}
+      </div>
+    ),
+    path: (issue: IWorkspaceIssueSearchResult) =>
+      generateWorkItemLink({
+        workspaceSlug: issue?.workspace__slug,
+        projectId: issue?.project_id,
+        issueId: issue?.id,
+        projectIdentifier: issue.project__identifier,
+        sequenceId: issue?.sequence_id,
+      }),
+    title: "Work items",
+  },
+  issue_view: {
+    icon: <ViewsIcon className="h-3 w-3" />,
+    itemName: (view: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
+      </h6>
+    ),
+    path: (view: IWorkspaceDefaultSearchResult) =>
+      `/${view?.workspace__slug}/projects/${view?.project_id}/views/${view?.id}`,
+    title: "Views",
+  },
+  module: {
+    icon: <ModuleIcon className="h-3 w-3" />,
+    itemName: (module: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
+      </h6>
+    ),
+    path: (module: IWorkspaceDefaultSearchResult) =>
+      `/${module?.workspace__slug}/projects/${module?.project_id}/modules/${module?.id}`,
+    title: "Modules",
+  },
+  page: {
+    icon: <PageIcon className="h-3 w-3" />,
+    itemName: (page: IWorkspacePageSearchResult) => (
+      <h6>
+        <span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name}
+      </h6>
+    ),
+    path: (page: IWorkspacePageSearchResult, projectId: string | undefined) => {
+      let redirectProjectId = page?.project_ids?.[0];
+      if (!!projectId && page?.project_ids?.includes(projectId)) redirectProjectId = projectId;
+      return redirectProjectId
+        ? `/${page?.workspace__slug}/projects/${redirectProjectId}/pages/${page?.id}`
+        : `/${page?.workspace__slug}/wiki/${page?.id}`;
+    },
+    title: "Pages",
+  },
+  project: {
+    icon: <ProjectIcon className="h-3 w-3" />,
+    itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
+    path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    title: "Projects",
+  },
+  workspace: {
+    icon: <LayoutGrid className="h-3 w-3" />,
+    itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
+    path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
+    title: "Workspaces",
+  },
+};

apps/web/ce/components/command-palette/index.ts

@@ -0,0 +1,2 @@
+export * from "./actions";
+export * from "./helpers";

apps/web/ce/components/command-palette/modals/project-level.tsx

@@ -0,0 +1,62 @@
+import { observer } from "mobx-react";
+// components
+import { CycleCreateUpdateModal } from "@/components/cycles/modal";
+import { CreateUpdateModuleModal } from "@/components/modules";
+import { CreatePageModal } from "@/components/pages/modals/create-page-modal";
+import { CreateUpdateProjectViewModal } from "@/components/views/modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+
+export type TProjectLevelModalsProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectLevelModals = observer((props: TProjectLevelModalsProps) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const {
+    isCreateCycleModalOpen,
+    toggleCreateCycleModal,
+    isCreateModuleModalOpen,
+    toggleCreateModuleModal,
+    isCreateViewModalOpen,
+    toggleCreateViewModal,
+    createPageModal,
+    toggleCreatePageModal,
+  } = useCommandPalette();
+
+  return (
+    <>
+      <CycleCreateUpdateModal
+        isOpen={isCreateCycleModalOpen}
+        handleClose={() => toggleCreateCycleModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreateUpdateModuleModal
+        isOpen={isCreateModuleModalOpen}
+        onClose={() => toggleCreateModuleModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreateUpdateProjectViewModal
+        isOpen={isCreateViewModalOpen}
+        onClose={() => toggleCreateViewModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreatePageModal
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        isModalOpen={createPageModal.isOpen}
+        pageAccess={createPageModal.pageAccess}
+        handleModalClose={() => toggleCreatePageModal({ isOpen: false })}
+        redirectionEnabled
+        storeType={EPageStoreType.PROJECT}
+      />
+    </>
+  );
+});

apps/web/ce/components/command-palette/modals/work-item-level.tsx

@@ -0,0 +1,105 @@
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+// components
+import { BulkDeleteIssuesModal } from "@/components/core/modals/bulk-delete-issues-modal";
+import { DeleteIssueModal } from "@/components/issues/delete-issue-modal";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+
+export type TWorkItemLevelModalsProps = {
+  workItemIdentifier: string | undefined;
+};
+
+export const WorkItemLevelModals: FC<TWorkItemLevelModalsProps> = observer((props) => {
+  const { workItemIdentifier } = props;
+  // router
+  const { workspaceSlug, cycleId, moduleId } = useParams();
+  const router = useAppRouter();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const workItemId = workItemIdentifier ? getIssueIdByIdentifier(workItemIdentifier) : undefined;
+  const workItemDetails = workItemId ? getIssueById(workItemId) : undefined;
+
+  const { removeIssue: removeEpic } = useIssuesActions(EIssuesStoreType.EPIC);
+  const { removeIssue: removeWorkItem } = useIssuesActions(EIssuesStoreType.PROJECT);
+
+  const {
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
+    isBulkDeleteIssueModalOpen,
+    toggleBulkDeleteIssueModal,
+    createWorkItemAllowedProjectIds,
+  } = useCommandPalette();
+  // derived values
+  const { fetchSubIssues: fetchSubWorkItems } = useIssueDetail();
+  const { fetchSubIssues: fetchEpicSubWorkItems } = useIssueDetail(EIssueServiceType.EPICS);
+
+  const handleDeleteIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const isEpic = workItemDetails?.is_epic;
+      const deleteAction = isEpic ? removeEpic : removeWorkItem;
+      const redirectPath = `/${workspaceSlug}/projects/${projectId}/${isEpic ? "epics" : "issues"}`;
+
+      await deleteAction(projectId, issueId);
+      router.push(redirectPath);
+    } catch (error) {
+      console.error("Failed to delete issue:", error);
+    }
+  };
+
+  const handleCreateIssueSubmit = async (newIssue: TIssue) => {
+    if (!workspaceSlug || !newIssue.project_id || !newIssue.id || newIssue.parent_id !== workItemDetails?.id) return;
+
+    const fetchAction = workItemDetails?.is_epic ? fetchEpicSubWorkItems : fetchSubWorkItems;
+    await fetchAction(workspaceSlug?.toString(), newIssue.project_id, workItemDetails.id);
+  };
+
+  const getCreateIssueModalData = () => {
+    if (cycleId) return { cycle_id: cycleId.toString() };
+    if (moduleId) return { module_ids: [moduleId.toString()] };
+    return undefined;
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isCreateIssueModalOpen}
+        onClose={() => toggleCreateIssueModal(false)}
+        data={getCreateIssueModalData()}
+        onSubmit={handleCreateIssueSubmit}
+        allowedProjectIds={createWorkItemAllowedProjectIds}
+      />
+      {workspaceSlug && workItemId && workItemDetails && workItemDetails.project_id && (
+        <DeleteIssueModal
+          handleClose={() => toggleDeleteIssueModal(false)}
+          isOpen={isDeleteIssueModalOpen}
+          data={workItemDetails}
+          onSubmit={() =>
+            handleDeleteIssue(workspaceSlug.toString(), workItemDetails.project_id!, workItemId?.toString())
+          }
+          isEpic={workItemDetails?.is_epic}
+        />
+      )}
+      <BulkDeleteIssuesModal
+        isOpen={isBulkDeleteIssueModalOpen}
+        onClose={() => toggleBulkDeleteIssueModal(false)}
+        user={currentUser}
+      />
+    </>
+  );
+});

apps/web/ce/components/command-palette/modals/workspace-level.tsx

@@ -0,0 +1,25 @@
+import { observer } from "mobx-react";
+// components
+import { CreateProjectModal } from "@/components/project/create-project-modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+
+export type TWorkspaceLevelModalsProps = {
+  workspaceSlug: string;
+};
+
+export const WorkspaceLevelModals = observer((props: TWorkspaceLevelModalsProps) => {
+  const { workspaceSlug } = props;
+  // store hooks
+  const { isCreateProjectModalOpen, toggleCreateProjectModal } = useCommandPalette();
+
+  return (
+    <>
+      <CreateProjectModal
+        isOpen={isCreateProjectModalOpen}
+        onClose={() => toggleCreateProjectModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+      />
+    </>
+  );
+});

apps/web/ce/components/command-palette/power-k/constants.ts

@@ -0,0 +1,6 @@
+// core
+import type { TPowerKModalPageDetails } from "@/components/power-k/ui/modal/constants";
+// local imports
+import type { TPowerKPageTypeExtended } from "./types";
+
+export const POWER_K_MODAL_PAGE_DETAILS_EXTENDED: Record<TPowerKPageTypeExtended, TPowerKModalPageDetails> = {};

apps/web/ce/components/command-palette/power-k/context-detector.ts

@@ -0,0 +1,5 @@
+import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+// local imports
+import type { TPowerKContextTypeExtended } from "./types";
+
+export const detectExtendedContextFromURL = (_params: Params): TPowerKContextTypeExtended | null => null;

apps/web/ce/components/command-palette/power-k/hooks/use-extended-context-indicator.ts

@@ -0,0 +1,8 @@
+// local imports
+import type { TPowerKContextTypeExtended } from "../types";
+
+type TArgs = {
+  activeContext: TPowerKContextTypeExtended | null;
+};
+
+export const useExtendedContextIndicator = (_args: TArgs): string | null => null;

apps/web/ce/components/command-palette/power-k/pages/context-based/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/ce/components/command-palette/power-k/pages/context-based/root.tsx

@@ -0,0 +1,11 @@
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+import type { ContextBasedActionsProps, TContextEntityMap } from "@/components/power-k/ui/pages/context-based";
+// local imports
+import type { TPowerKContextTypeExtended } from "../../types";
+
+export const CONTEXT_ENTITY_MAP_EXTENDED: Record<TPowerKContextTypeExtended, TContextEntityMap> = {};
+
+export const PowerKContextBasedActionsExtended: React.FC<ContextBasedActionsProps> = () => null;
+
+export const usePowerKContextBasedExtendedActions = (): TPowerKCommandConfig[] => [];

apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane types
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState } from "@plane/types";
+// components
+import { PowerKModalCommandItem } from "@/components/power-k/ui/modal/command-item";
+
+export type TPowerKProjectStatesMenuItemsProps = {
+  handleSelect: (stateId: string) => void;
+  projectId: string | undefined;
+  selectedStateId: string | undefined;
+  states: IState[];
+  workspaceSlug: string;
+};
+
+export const PowerKProjectStatesMenuItems: React.FC<TPowerKProjectStatesMenuItemsProps> = observer((props) => {
+  const { handleSelect, selectedStateId, states } = props;
+
+  return (
+    <>
+      {states.map((state) => (
+        <PowerKModalCommandItem
+          key={state.id}
+          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="shrink-0 size-3.5" />}
+          label={state.name}
+          isSelected={state.id === selectedStateId}
+          onSelect={() => handleSelect(state.id)}
+        />
+      ))}
+    </>
+  );
+});

apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx

@@ -0,0 +1,36 @@
+import { Command } from "cmdk";
+import { Search } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+// plane web imports
+import { PowerKModalCommandItem } from "@/components/power-k/ui/modal/command-item";
+
+export type TPowerKModalNoSearchResultsCommandProps = {
+  context: TPowerKContext;
+  searchTerm: string;
+  updateSearchTerm: (value: string) => void;
+};
+
+export const PowerKModalNoSearchResultsCommand: React.FC<TPowerKModalNoSearchResultsCommandProps> = (props) => {
+  const { updateSearchTerm } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <Command.Group>
+      <PowerKModalCommandItem
+        icon={Search}
+        value="no-results"
+        label={
+          <p className="flex items-center gap-2">
+            {t("power_k.search_menu.no_results")}{" "}
+            <span className="shrink-0 text-sm text-custom-text-300">{t("power_k.search_menu.clear_search")}</span>
+          </p>
+        }
+        onSelect={() => updateSearchTerm("")}
+      />
+    </Command.Group>
+  );
+};

apps/web/ce/components/command-palette/power-k/search/search-results-map.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+// components
+import type { TPowerKSearchResultGroupDetails } from "@/components/power-k/ui/modal/search-results-map";
+// local imports
+import type { TPowerKSearchResultsKeysExtended } from "../types";
+
+type TSearchResultsGroupsMapExtended = Record<TPowerKSearchResultsKeysExtended, TPowerKSearchResultGroupDetails>;
+
+export const SEARCH_RESULTS_GROUPS_MAP_EXTENDED: TSearchResultsGroupsMapExtended = {};

apps/web/ce/components/command-palette/power-k/types.ts

@@ -0,0 +1,5 @@
+export type TPowerKContextTypeExtended = never;
+
+export type TPowerKPageTypeExtended = never;
+
+export type TPowerKSearchResultsKeysExtended = never;