feat: issue empty state

packages/types/src/ai.d.ts

@@ -7,3 +7,9 @@ export interface IGptResponse {
   project_detail: IProjectLite;
   workspace_detail: IWorkspaceLite;
 }
+
+export type TProjectPlannerInput = {
+  data: string;
+  workspace_id: string;
+  project_id: string;
+};

web/ce/components/issues/index.ts

@@ -4,3 +4,4 @@ export * from "./issue-modal";
 export * from "./issue-details";
 export * from "./quick-add";
 export * from "./filters";
+export * from "./issue-layouts/empty-states";

web/ce/components/issues/issue-layouts/empty-states/index.ts

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

web/ce/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -0,0 +1,43 @@
+import { observer } from "mobx-react";
+// components
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssuesStoreType, TCreateModalStoreTypes } from "@/constants/issue";
+
+type TProps = {
+  issueFilterCount: number;
+  additionalPath?: string;
+  handleClearAllFilters: () => void;
+  toggleCreateIssueModal: (value?: boolean | undefined, storeType?: TCreateModalStoreTypes | undefined) => void;
+  setTrackElement: (element: string) => void;
+  emptyStateType?: EmptyStateType;
+};
+export const ResolvedProjectEmptyState: React.FC<TProps> = observer((props) => {
+  const {
+    issueFilterCount,
+    additionalPath,
+    handleClearAllFilters,
+    toggleCreateIssueModal,
+    setTrackElement,
+    emptyStateType,
+  } = props;
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <EmptyState
+        type={emptyStateType || EmptyStateType.PROJECT_NO_ISSUES}
+        additionalPath={additionalPath}
+        primaryButtonOnClick={
+          issueFilterCount > 0
+            ? undefined
+            : () => {
+                setTrackElement("Project issue empty state");
+                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+              }
+        }
+        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
+      />
+    </div>
+  );
+});

web/core/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -3,13 +3,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
 import { IIssueFilterOptions } from "@plane/types";
-// components
-import { EmptyState } from "@/components/empty-state";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useCommandPalette, useEventTracker, useIssues } from "@/hooks/store";
+// components
+import { ResolvedProjectEmptyState } from "@/plane-web/components/issues";
 
 export const ProjectEmptyState: React.FC = observer(() => {
   // router
@@ -40,23 +40,17 @@ export const ProjectEmptyState: React.FC = observer(() => {
     });
   };
 
-  const emptyStateType = issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_NO_ISSUES;
-  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
+  const additionalPath = issueFilterCount > 0 ? (activeLayout ?? "list") : undefined;
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState
-        type={emptyStateType}
+      <ResolvedProjectEmptyState
+        issueFilterCount={issueFilterCount}
         additionalPath={additionalPath}
-        primaryButtonOnClick={
-          issueFilterCount > 0
-            ? undefined
-            : () => {
-                setTrackElement("Project issue empty state");
-                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-              }
-        }
-        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
+        handleClearAllFilters={handleClearAllFilters}
+        toggleCreateIssueModal={toggleCreateIssueModal}
+        setTrackElement={setTrackElement}
+        emptyStateType={issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : undefined}
       />
     </div>
   );