feat: Add Messages page to SettingsPage

Refactor the SettingsPage component to include a new "Messages" page. This page will be accessible through the "/settings/messages" route and will display messages related to user settings. The necessary changes have been made to the index.tsx file of the SettingsPage component and the routes.tsx file.

src/frontend/src/controllers/API/index.ts

@@ -1022,12 +1022,14 @@ export async function getTransactionTable(
 }
 
 export async function getMessagesTable(
-  id: string,
   mode: "intersection" | "union",
+  id?: string,
   params = {},
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
-  config["params"] = { flow_id: id };
+  if (id) {
+    config["params"] = { flow_id: id };
+  }
   if (params) {
     config["params"] = { ...config["params"], ...params };
   }

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -53,7 +53,7 @@ export default function FlowLogsModal({
         setRows(rows);
       });
     } else if (activeTab === "Messages") {
-      getMessagesTable(currentFlowId, "union").then((data) => {
+      getMessagesTable("union", currentFlowId).then((data) => {
         const { columns, rows } = data;
         setColumns(columns.map((col) => ({ ...col, editable: true })));
         setRows(rows);

src/frontend/src/pages/SettingsPage/index.tsx

@@ -43,6 +43,13 @@ export default function SettingsPage(): JSX.Element {
         <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
       ),
     },
+    {
+      title: "Messages",
+      href: "/settings/messages",
+      icon: (
+        <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
+      ),
+    },
   ];
   return (
     <PageLayout

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -0,0 +1,114 @@
+import IconComponent from "../../../../components/genericIconComponent";
+import { Button } from "../../../../components/ui/button";
+
+import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
+import { useEffect, useState } from "react";
+import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import Dropdown from "../../../../components/dropdownComponent";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import TableComponent from "../../../../components/tableComponent";
+import { Badge } from "../../../../components/ui/badge";
+import { Card, CardContent } from "../../../../components/ui/card";
+import {
+  deleteGlobalVariable,
+  getMessagesTable,
+} from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
+import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables";
+import { cn } from "../../../../utils/utils";
+
+export default function MessagesPage() {
+  const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
+  const [rows, setRows] = useState<any>([]);
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable,
+  );
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
+
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+
+  async function removeVariables() {
+    const deleteGlobalVariablesPromise = selectedRows.map(async (row) => {
+      const id = getVariableId(row);
+      const deleteGlobalVariables = deleteGlobalVariable(id!);
+      await deleteGlobalVariables;
+    });
+    Promise.all(deleteGlobalVariablesPromise)
+      .then(() => {
+        selectedRows.forEach((row) => {
+          removeGlobalVariable(row);
+        });
+      })
+      .catch(() => {
+        setErrorData({
+          title: `Error deleting global variables.`,
+        });
+      });
+  }
+
+  useEffect(() => {
+    console.log("MessagesPage useEffect");
+    getMessagesTable("union").then((data) => {
+      const { columns, rows } = data;
+      console.log(data);
+      setColumns(columns.map((col) => ({ ...col, editable: true })));
+      setRows(rows);
+    });
+  }, []);
+
+  return (
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            Messages
+            <ForwardedIconComponent
+              name="MessagesSquare"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Manage your messages as you like.
+          </p>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <Button
+            data-testid="api-key-button-store"
+            variant="primary"
+            className="group px-2"
+            disabled={selectedRows.length === 0}
+            onClick={removeVariables}
+          >
+            <IconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary",
+              )}
+            />
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex h-full w-full flex-col justify-between pb-8">
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <TableComponent
+              overlayNoRowsTemplate="No data available"
+              onSelectionChanged={(event: SelectionChangedEvent) => {
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.name),
+                );
+              }}
+              rowSelection="multiple"
+              suppressRowClickSelection={true}
+              pagination={true}
+              columnDefs={columns}
+              rowData={rows}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/frontend/src/routes.tsx

@@ -20,6 +20,7 @@ import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
 import SignUp from "./pages/SignUpPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
+import MessagesPage from "./pages/SettingsPage/pages/messagesPage";
 
 const Router = () => {
   return (
@@ -58,6 +59,7 @@ const Router = () => {
         <Route path="global-variables" element={<GlobalVariablesPage />} />
         <Route path="general" element={<GeneralPage />} />
         <Route path="shortcuts" element={<ShortcutsPage />} />
+        <Route path="Messages" element={<MessagesPage />} />
       </Route>
       <Route
         path="/store"