Merge branch 'preview' of gurusainath:makeplane/plane into revamp-estimates

web/components/headers/project-inbox.tsx

@@ -46,7 +46,7 @@ export const ProjectInboxHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink label="Inbox" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
           </Breadcrumbs>

web/components/headers/project-settings.tsx

@@ -2,22 +2,17 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // ui
+import { Settings } from "lucide-react";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
-// helper
+// components
 import { BreadcrumbLink } from "@/components/common";
 import { ProjectLogo } from "@/components/project";
+// constants
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
-// constants
-// components
 
-export interface IProjectSettingHeader {
+export const ProjectSettingHeader: FC = observer(() => {
-  title: string;
-}
-
-export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
-  const { title } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -52,7 +47,12 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
                 }
               />
               <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
+                <Breadcrumbs.BreadcrumbItem
+                  type="text"
+                  link={
+                    <BreadcrumbLink label="Settings" icon={<Settings className="h-4 w-4 text-custom-text-300" />} />
+                  }
+                />
               </div>
             </Breadcrumbs>
           </div>
@@ -62,7 +62,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
           maxHeight="lg"
           customButton={
             <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
-              {title}
+              Settings
             </span>
           }
           placement="bottom-start"

web/components/headers/workspace-settings.tsx

@@ -1,21 +1,15 @@
 import { FC } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react";;
-import { useRouter } from "next/router";
 import { Settings } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
+// hooks
+import { useWorkspace } from "@/hooks/store";
 
-export interface IWorkspaceSettingHeader {
+export const WorkspaceSettingHeader: FC = observer(() => {
-  title: string;
+  const { currentWorkspace } = useWorkspace();
-}
-
-export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
-  const { title } = props;
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -26,13 +20,13 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
               type="text"
               link={
                 <BreadcrumbLink
-                  href={`/${workspaceSlug}/settings`}
+                  href={`/${currentWorkspace?.slug}/settings`}
-                  label="Settings"
+                  label={currentWorkspace?.name ?? "Workspace"}
                   icon={<Settings className="h-4 w-4 text-custom-text-300" />}
                 />
               }
             />
-            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
           </Breadcrumbs>
         </div>
       </div>

web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx

@@ -63,7 +63,7 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
 
 AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -40,7 +40,7 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
 
 EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -54,7 +54,7 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
 
 FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -93,7 +93,7 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
 
 GeneralSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -45,7 +45,7 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
 
 LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -31,7 +31,7 @@ const MembersSettingsPage: NextPageWithLayout = observer(() => {
 
 MembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -32,7 +32,7 @@ const StatesSettingsPage: NextPageWithLayout = observer(() => {
 
 StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/api-tokens.tsx

@@ -99,7 +99,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
 
 ApiTokensPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="API Tokens" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/billing.tsx

@@ -59,7 +59,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
 
 BillingSettingsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/exports.tsx

@@ -50,7 +50,7 @@ const ExportsPage: NextPageWithLayout = observer(() => {
 
 ExportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/imports.tsx

@@ -1,17 +1,17 @@
 import { observer } from "mobx-react";
-// hooks
-import { PageHead } from "components/core";
-import { WorkspaceSettingHeader } from "components/headers";
-import IntegrationGuide from "components/integration/guide";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { useUser, useWorkspace } from "hooks/store";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
-// types
+import { PageHead } from "@/components/core";
-import { NextPageWithLayout } from "lib/types";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import IntegrationGuide from "@/components/integration/guide";
 // constants
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser, useWorkspace } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
 
 const ImportsPage: NextPageWithLayout = observer(() => {
   // store hooks
@@ -49,7 +49,7 @@ const ImportsPage: NextPageWithLayout = observer(() => {
 
 ImportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/index.tsx

@@ -28,7 +28,7 @@ const WorkspaceSettingsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/integrations.tsx

@@ -2,25 +2,23 @@ import { ReactElement } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
-// services
-// layouts
 // components
-import { PageHead } from "components/core";
+import { PageHead } from "@/components/core";
-import { WorkspaceSettingHeader } from "components/headers";
+import { WorkspaceSettingHeader } from "@/components/headers";
-import { SingleIntegrationCard } from "components/integration";
+import { SingleIntegrationCard } from "@/components/integration";
-// ui
+import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/components/ui";
-import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "components/ui";
-// types
-// fetch-keys
-import { APP_INTEGRATIONS } from "constants/fetch-keys";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
-import { useUser, useWorkspace } from "hooks/store";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { AppLayout } from "layouts/app-layout";
+// hooks
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { useUser, useWorkspace } from "@/hooks/store";
-import { NextPageWithLayout } from "lib/types";
+// layouts
-import { IntegrationService } from "services/integrations";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
+// services
+import { IntegrationService } from "@/services/integrations";
 
 const integrationService = new IntegrationService();
 
@@ -73,7 +71,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Integrations Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/members.tsx

@@ -122,7 +122,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx

@@ -107,7 +107,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
 
 WebhookDetailsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/pages/[workspaceSlug]/settings/webhooks/index.tsx

@@ -102,7 +102,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
 
 WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );

web/store/issue/issue-details/attachment.store.ts

@@ -4,10 +4,11 @@ import set from "lodash/set";
 import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
-// services
-import { IssueAttachmentService } from "@/services/issue";
 // types
 import { TIssueAttachment, TIssueAttachmentMap, TIssueAttachmentIdMap } from "@plane/types";
+// services
+import { IssueAttachmentService } from "@/services/issue";
+import { IIssueRootStore } from "../root.store";
 import { IIssueDetail } from "./root.store";
 
 export interface IIssueAttachmentStoreActions {
@@ -43,11 +44,12 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
   attachments: TIssueAttachmentIdMap = {};
   attachmentMap: TIssueAttachmentMap = {};
   // root store
+  rootIssueStore: IIssueRootStore;
   rootIssueDetailStore: IIssueDetail;
   // services
   issueAttachmentService;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueRootStore) {
     makeObservable(this, {
       // observables
       attachments: observable,
@@ -61,7 +63,8 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
       removeAttachment: action,
     });
     // root store
-    this.rootIssueDetailStore = rootStore;
+    this.rootIssueStore = rootStore;
+    this.rootIssueDetailStore = rootStore.issueDetail;
     // services
     this.issueAttachmentService = new IssueAttachmentService();
   }
@@ -87,9 +90,9 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
   // actions
   addAttachments = (issueId: string, attachments: TIssueAttachment[]) => {
     if (attachments && attachments.length > 0) {
-      const _attachmentIds = attachments.map((attachment) => attachment.id);
+      const newAttachmentIds = attachments.map((attachment) => attachment.id);
       runInAction(() => {
-        update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, _attachmentIds)));
+        update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, newAttachmentIds)));
         attachments.forEach((attachment) => set(this.attachmentMap, attachment.id, attachment));
       });
     }
@@ -110,12 +113,17 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
   createAttachment = async (workspaceSlug: string, projectId: string, issueId: string, data: FormData) => {
     try {
       const response = await this.issueAttachmentService.uploadIssueAttachment(workspaceSlug, projectId, issueId, data);
+      const issueAttachmentsCount = this.getAttachmentsByIssueId(issueId)?.length ?? 0;
 
-      if (response && response.id)
+      if (response && response.id) {
         runInAction(() => {
           update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, [response.id])));
           set(this.attachmentMap, response.id, response);
+          this.rootIssueStore.issues.updateIssue(issueId, {
+            attachment_count: issueAttachmentsCount + 1, // increment attachment count
           });
+        });
+      }
 
       return response;
     } catch (error) {
@@ -131,6 +139,7 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
         issueId,
         attachmentId
       );
+      const issueAttachmentsCount = this.getAttachmentsByIssueId(issueId)?.length ?? 1;
 
       runInAction(() => {
         update(this.attachments, [issueId], (attachmentIds = []) => {
@@ -138,6 +147,9 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
           return attachmentIds;
         });
         delete this.attachmentMap[attachmentId];
+        this.rootIssueStore.issues.updateIssue(issueId, {
+          attachment_count: issueAttachmentsCount - 1, // decrement attachment count
+        });
       });
 
       return response;

web/store/issue/issue-details/root.store.ts

@@ -140,7 +140,7 @@ export class IssueDetail implements IIssueDetail {
     this.rootIssueStore = rootStore;
     this.issue = new IssueStore(this);
     this.reaction = new IssueReactionStore(this);
-    this.attachment = new IssueAttachmentStore(this);
+    this.attachment = new IssueAttachmentStore(rootStore);
     this.activity = new IssueActivityStore(this);
     this.comment = new IssueCommentStore(this);
     this.commentReaction = new IssueCommentReactionStore(this);