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

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

@@ -0,0 +1,19 @@
+"use client"
+
+import { FC } 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> = (props)=>{
+    return <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>
+}

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

@@ -2,7 +2,7 @@
 
 import concat from "lodash/concat";
 import set from "lodash/set";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
@@ -29,17 +29,20 @@
 
 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 @@
   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();
@@ -98,12 +103,16 @@
         created_at: comment.created_at,
       });
     });
-
-    activityComments = sortBy(activityComments, "created_at");
+    
+    activityComments = orderBy(activityComments, (e)=>new Date(e.created_at||''), 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

@@ -19,6 +19,7 @@
 import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { FileService } from "@/services/file.service";
+import { ActivitySortRoot } from "@/plane-web/components/issues/worklog/activity/sort-root";
 const fileService = new FileService();
 
 type TIssueActivity = {
@@ -43,6 +44,7 @@
   // hooks
   const {
     issue: { getIssueById },
+    activity: { sortOrder, toggleSortOrder},
     createComment,
     updateComment,
     removeComment,
@@ -162,6 +164,7 @@
               disabled={disabled}
             />
           )}
+          <ActivitySortRoot sortOrder={sortOrder} toggleSort={toggleSortOrder}/>
           <ActivityFilterRoot
             selectedFilters={selectedFilters}
             toggleFilter={toggleFilter}