fix: adding ordering to page changes (#32761)

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

Fixes #32744 

## Automation

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

### 🔍 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 -->
This commit is contained in:
Rudraprasad Das 2024-04-18 13:38:29 +05:30 committed by GitHub
parent 4e6f3c599e
commit 2ac328449c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -148,23 +148,35 @@ export default function PageChanges({ status }: PageChangesProps) {
queriesRemoved, queriesRemoved,
} = status; } = 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]), ...jsObjectsModified.map((jsObject) => jsObject.split("/")[0]),
...jsObjectsAdded.map((jsObject) => jsObject.split("/")[0]), ...jsObjectsAdded.map((jsObject) => jsObject.split("/")[0]),
...jsObjectsRemoved.map((jsObject) => jsObject.split("/")[0]), ...jsObjectsRemoved.map((jsObject) => jsObject.split("/")[0]),
...queriesModified.map((query) => query.split("/")[0]), ...queriesModified.map((query) => query.split("/")[0]),
...queriesAdded.map((query) => query.split("/")[0]), ...queriesAdded.map((query) => query.split("/")[0]),
...queriesRemoved.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 ( return (
<> <>
{Array.from(allPagesChangedSet).map((page) => { {Array.from(allPagesChangeSet).map((page) => {
return <SinglePageChange key={page} page={page} status={status} />; return <SinglePageChange key={page} page={page} status={status} />;
})} })}
</> </>