fix: Use unique id instead of indices as keys for DraggableList (apps…

…mithorg#13553)

* gitignore

* fix: Use unique id instead of indices as keys for DraggableList(appsmithorg#9991).

* removed duplicate 'stacks' from gitignore

* revert change to cypress selector for draggable list

* use 'id' ad key name for consistency and that it doesn't break in other places

app/client/src/components/ads/DraggableList.tsx

@@ -236,7 +236,7 @@ function DraggableList(props: any) {
  <animated.div
  {...bind(i)}
  data-rbd-draggable-id={items[i].id}
- key={i}
+ key={items[i].id}
  style={{
  zIndex,
  width: "100%",

app/client/src/pages/Editor/PagesEditor/index.tsx

@@ -9,7 +9,10 @@ import { ControlIcons } from "icons/ControlIcons";
 import { IconWrapper } from "components/ads/Icon";
 import Button, { Size } from "components/ads/Button";
 import PageListItem, { Action } from "./PageListItem";
-import { Page } from "@appsmith/constants/ReduxActionConstants";
+import {
+ Page,
+ PageListPayload,
+} from "@appsmith/constants/ReduxActionConstants";
 import {
  getCurrentApplicationId,
  getPageList,
@@ -61,11 +64,15 @@ const NewPageButton = styled(Button)`
 
 const CloseIcon = ControlIcons.CLOSE_CONTROL;
 
+type PageListPayloadWithId = PageListPayload & { id?: string };
+
 function PagesEditor() {
  const theme = useTheme();
  const dispatch = useDispatch();
  const history = useHistory();
- const pages = useSelector(getPageList);
+ const pages: PageListPayloadWithId = useSelector(
+ getPageList,
+ )?.map((page) => ({ ...page, id: page.pageId }));
  const currentApp = useSelector(getCurrentApplication);
  const applicationId = useSelector(getCurrentApplicationId) as string;