From 2ac328449cddbe03c417b8603fc8f2cebaed441f Mon Sep 17 00:00:00 2001
From: Rudraprasad Das <rudra@appsmith.com>
Date: Thu, 18 Apr 2024 13:38:29 +0530
Subject: [PATCH] fix: adding ordering to page changes (#32761)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Adding alphabetical ordering to page changes in status modal

Fixes #32744

## Automation

/ok-to-test tags="@tag.Git"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8733997632>
> Commit: 57dd39ba2eeeaddd65fa1993df781d9e42d9cd96
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8733997632&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Improved the handling of page changes in the editor, with enhanced
sorting and distinction between static and expandable changes for better
user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../NewChangesList/PageChanges.tsx            | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/client/src/pages/Editor/gitSync/components/GitChangesList/NewChangesList/PageChanges.tsx b/app/client/src/pages/Editor/gitSync/components/GitChangesList/NewChangesList/PageChanges.tsx
index 931c7a1b16..0a088a6553 100644
--- a/app/client/src/pages/Editor/gitSync/components/GitChangesList/NewChangesList/PageChanges.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/GitChangesList/NewChangesList/PageChanges.tsx
@@ -148,23 +148,35 @@ export default function PageChanges({ status }: PageChangesProps) {
     queriesRemoved,
   } = status;
 
-  const allPagesChangedSet = new Set([
+  const staticPageChangeSet = new Set([
+    ...pagesModified,
+    ...pagesAdded,
+    ...pagesRemoved,
+  ]);
+
+  const staticPageChanges = Array.from(staticPageChangeSet).sort();
+
+  const expandablePageChangeSet = new Set([
     ...jsObjectsModified.map((jsObject) => jsObject.split("/")[0]),
     ...jsObjectsAdded.map((jsObject) => jsObject.split("/")[0]),
     ...jsObjectsRemoved.map((jsObject) => jsObject.split("/")[0]),
     ...queriesModified.map((query) => query.split("/")[0]),
     ...queriesAdded.map((query) => query.split("/")[0]),
     ...queriesRemoved.map((query) => query.split("/")[0]),
-    ...pagesModified,
-    ...pagesAdded,
-    ...pagesRemoved,
   ]);
 
-  if (allPagesChangedSet.size === 0) return null;
+  const expandablePageChanges = Array.from(expandablePageChangeSet).sort();
+
+  const allPagesChangeSet = new Set([
+    ...staticPageChanges,
+    ...expandablePageChanges,
+  ]);
+
+  if (allPagesChangeSet.size === 0) return null;
 
   return (
     <>
-      {Array.from(allPagesChangedSet).map((page) => {
+      {Array.from(allPagesChangeSet).map((page) => {
         return <SinglePageChange key={page} page={page} status={status} />;
       })}
     </>