[WEB - 2779] feat: Added sort order for issue activity

web/ce/components/issues/worklog/activity/sort-root.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { FC, memo } from "react";
+import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
+import { getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export type TActivitySortRoot = {
+  sortOrder: "asc" | "desc";
+  toggleSort: () => void;
+};
+export const ActivitySortRoot: FC<TActivitySortRoot> = memo((props) => (
+  <div
+    className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300 cursor-pointer")}
+    onClick={() => {
+      props.toggleSort();
+    }}
+  >
+    {props.sortOrder === "asc" ? (
+      <ArrowUpWideNarrow className="size-4 " />
+    ) : (
+      <ArrowDownWideNarrow className="size-4 " />
+    )}
+  </div>
+));
+
+ActivitySortRoot.displayName = "ActivitySortRoot";

web/ce/store/issue/issue-details/activity.store.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-useless-catch */
 
 import concat from "lodash/concat";
+import orderBy from "lodash/orderBy";
 import set from "lodash/set";
-import sortBy from "lodash/sortBy";
 import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
@@ -29,17 +29,20 @@ export interface IIssueActivityStoreActions {
 
 export interface IIssueActivityStore extends IIssueActivityStoreActions {
   // observables
+  sortOrder: 'asc' | 'desc'
   loader: TActivityLoader;
   activities: TIssueActivityIdMap;
   activityMap: TIssueActivityMap;
   // helper methods
   getActivitiesByIssueId: (issueId: string) => string[] | undefined;
   getActivityById: (activityId: string) => TIssueActivity | undefined;
   getActivityCommentByIssueId: (issueId: string) => TIssueActivityComment[] | undefined;
+  toggleSortOrder: ()=>void;
 }
 
 export class IssueActivityStore implements IIssueActivityStore {
   // observables
+  sortOrder: "asc" | "desc" = 'asc';
   loader: TActivityLoader = "fetch";
   activities: TIssueActivityIdMap = {};
   activityMap: TIssueActivityMap = {};
@@ -50,11 +53,13 @@ export class IssueActivityStore implements IIssueActivityStore {
   constructor(protected store: CoreRootStore) {
     makeObservable(this, {
       // observables
+      sortOrder: observable.ref,
       loader: observable.ref,
       activities: observable,
       activityMap: observable,
       // actions
       fetchActivities: action,
+      toggleSortOrder: action
     });
     // services
     this.issueActivityService = new IssueActivityService();
@@ -99,11 +104,15 @@ export class IssueActivityStore implements IIssueActivityStore {
       });
     });
 
-    activityComments = sortBy(activityComments, "created_at");
+    activityComments = orderBy(activityComments, (e)=>new Date(e.created_at || 0), this.sortOrder);
 
     return activityComments;
   });
 
+  toggleSortOrder = ()=>{
+    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+  }
+
   // actions
   public async fetchActivities(
     workspaceSlug: string,

web/core/components/issues/issue-detail/issue-activity/root.tsx

@@ -14,6 +14,7 @@ import { IssueActivityCommentRoot } from "@/components/issues/issue-detail";
 import { useIssueDetail, useProject, useUser, useUserPermissions } from "@/hooks/store";
 // plane web components
 import { ActivityFilterRoot, IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog";
+import { ActivitySortRoot } from "@/plane-web/components/issues/worklog/activity/sort-root";
 // plane web constants
 import { TActivityFilters, defaultActivityFilters } from "@/plane-web/constants/issues";
 import { EUserPermissions } from "@/plane-web/constants/user-permissions";
@@ -43,6 +44,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   // hooks
   const {
     issue: { getIssueById },
+    activity: { sortOrder, toggleSortOrder},
     createComment,
     updateComment,
     removeComment,
@@ -162,6 +164,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               disabled={disabled}
             />
           )}
+          <ActivitySortRoot sortOrder={sortOrder} toggleSort={toggleSortOrder}/>
           <ActivityFilterRoot
             selectedFilters={selectedFilters}
             toggleFilter={toggleFilter}