hunk.code_window:                     for (final ApplicationPage page : pages) {
                           if (pageId.equals(page.getId())) {
                               foundPage = page;
                           }
                       }
                       //Set the order for the pages which has null values. At present we dont store the order and hence we need to update the values
                       for (int i = 1; i <= pages.size(); i++) {
                           ApplicationPage page = pages.get(i - 1);
                           if (page.getOrder() == null) {
                               page.setOrder(i);
                           }
                       }
                       /* there are two cases where page is re-ordered. Lets assume there are five pages 1,2,3,4,5
                        * Case 1(isMovingUp == true): p5 to p2, order of p2,p3,p4 increases by 1.
                        *
                        * Case 2(isMovingUp == false): p2 to p5, order of p3,p4,p5 decreases by 1.
  
hunk.labels: keep keep keep keep keep replace replace replace replace replace replace replace keep keep keep keep keep
hunk.file_path: app/server/appsmith-server/src/main/java/com/appsmith/server/services/ApplicationPageServiceImpl.java
hunk.type: replace
file: import React from "react";
  import Table from "components/ads/Table";
  import Button, { Category, Size } from "components/ads/Button";
  import Icon, { IconSize } from "components/ads/Icon";
  import TableDropdown from "components/ads/TableDropdown";
  import { Position } from "@blueprintjs/core/lib/esm/common/position";
  import { StoryWrapper, Variant } from "components/ads/common";
  
  export default {
    title: "Table",
    component: Table,
  };
  
  const columns = [
    {
      Header: "NAME",
      accessor: "col1", // accessor is the "key" in the data
    },
    {
      Header: "EMAIL ID",
      accessor: "col2",
    },
    {
      Header: "ROLE",
      accessor: "col3",
    },
    {
      Header: "ACCESS LEVEL",
      accessor: "col4",
    },
    {
      Header: "STATUS",
      accessor: "col5",
    },
    {
      Header: "DELETE",
      accessor: "col6",
    },
  ];
  
  const options = [
    {
      name: "Admin",
      desc: "Can edit, view and invite other user to an app",
    },
    {
      name: "Developer",
      desc: "Can view and invite other user to an app",
    },
    {
      name: "User",
      desc: "Can view and invite other user to an app and...",
    },
  ];
  
  const data = [
    {
      col1: "Dustin Howard",
      col2: "dustin_01@jlegue.com",
      col3: (
        <TableDropdown
          onSelect={(selectedValue) => console.log(selectedValue)}
          options={options}
          position={Position.BOTTOM}
          selectedIndex={0}
        />
      ),
      col4: "App Access",
      col5: (
        <Button
          category={Category.primary}
          size={Size.small}
          text={"approve"}
          variant={Variant.info}
        />
      ),
      col6: <Icon name="delete" size={IconSize.LARGE} />,
    },
    {
      col1: "Austin Howard",
      col2: "dustin_02@jlegue.com",
      col3: (
        <TableDropdown
          onSelect={(selectedValue) => console.log(selectedValue)}
          options={options}
          position={Position.BOTTOM}
          selectedIndex={1}
        />
      ),
      col4: "Map Access",
      col5: (
        <Button
          category={Category.primary}
          size={Size.small}
          text={"accepted"}
          variant={Variant.success}
        />
      ),
      col6: <Icon name="delete" size={IconSize.LARGE} />,
    },
    {
      col1: "Justing Howard",
      col2: "dustin_03@jlegue.com",
      col3: (
        <TableDropdown
          onSelect={(selectedValue) => console.log(selectedValue)}
          options={options}
          position={Position.BOTTOM}
          selectedIndex={2}
        />
      ),
      col4: "Dm Access",
      col5: (
        <Button
          category={Category.primary}
          size={Size.small}
          text={"on hold"}
          variant={Variant.warning}
        />
      ),
      col6: <Icon name="delete" size={IconSize.LARGE} />,
    },
  ];
  
  export function TableStory() {
    return (
      <StoryWrapper>
        <Table columns={columns} data={data} />
      </StoryWrapper>
    );
  }
  