feat: init

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { DraftIcon } from "@plane/propel/icons";
+import { EIssuesStoreType } from "@plane/types";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { CountChip } from "@/components/common/count-chip";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+
+export const WorkspaceDraftHeader = observer(() => {
+  // state
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { paginationInfo } = useWorkspaceDraftIssues();
+  const { joinedProjectIds } = useProject();
+
+  const { t } = useTranslation();
+  // check if user is authorized to create draft work item
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isDraftIssueModalOpen}
+        storeType={EIssuesStoreType.WORKSPACE_DRAFT}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        isDraft
+      />
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
+              />
+            </Breadcrumbs>
+            {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
+              <CountChip count={paginationInfo?.total_count} />
+            ) : (
+              <></>
+            )}
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          {joinedProjectIds && joinedProjectIds.length > 0 && (
+            <Button
+              variant="primary"
+              size="sm"
+              className="items-center gap-1"
+              onClick={() => setIsDraftIssueModalOpen(true)}
+              disabled={!isAuthorizedUser}
+            >
+              {t("workspace_draft_issues.draft_an_issue")}
+            </Button>
+          )}
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});