refactor: Sort columns in SessionView and MessagesPage components

Sort the columns in the SessionView and MessagesPage components using the messagesSorter utility function. This ensures consistent column ordering and improves the user experience when viewing and interacting with the tables.

src/frontend/src/modals/IOModal/components/SessionView/index.tsx

@@ -5,6 +5,7 @@ import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage
 import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
+import { messagesSorter } from "../../../../utils/utils";
 
 export default function SessionView({ rows }: { rows: Array<any> }) {
   const columns = useMessagesStore((state) => state.columns);
@@ -17,7 +18,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows
+    selectedRows,
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
@@ -49,7 +50,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
       rowSelection="multiple"
       suppressRowClickSelection={true}
       pagination={true}
-      columnDefs={columns}
+      columnDefs={columns.sort(messagesSorter)}
       rowData={rows}
     />
   );

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

@@ -12,6 +12,7 @@ import HeaderMessagesComponent from "./components/headerMessages";
 import useMessagesTable from "./hooks/use-messages-table";
 import useRemoveMessages from "./hooks/use-remove-messages";
 import useUpdateMessage from "./hooks/use-updateMessage";
+import { messagesSorter } from "../../../../utils/utils";
 
 export default function MessagesPage() {
   const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
@@ -26,7 +27,7 @@ export default function MessagesPage() {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows
+    selectedRows,
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
@@ -60,13 +61,13 @@ export default function MessagesPage() {
           overlayNoRowsTemplate="No data available"
           onSelectionChanged={(event: SelectionChangedEvent) => {
             setSelectedRows(
-              event.api.getSelectedRows().map((row) => row.index)
+              event.api.getSelectedRows().map((row) => row.index),
             );
           }}
           rowSelection="multiple"
           suppressRowClickSelection={true}
           pagination={true}
-          columnDefs={columns}
+          columnDefs={columns.sort(messagesSorter)}
           rowData={messages}
         />
       </div>

src/frontend/src/utils/utils.ts

@@ -2,7 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
-import { MODAL_CLASSES } from "../constants/constants";
+import { MESSAGES_TABLE_ORDER, MODAL_CLASSES } from "../constants/constants";
 import { APIDataType, InputFieldType } from "../types/api";
 import {
   groupedObjType,
@@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string {
 
 export function toTitleCase(
   str: string | undefined,
-  isNodeField?: boolean
+  isNodeField?: boolean,
 ): string {
   if (!str) return "";
   let result = str
@@ -65,7 +65,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -78,7 +78,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean {
 
 export function IncrementObjectKey(
   object: object,
-  key: string
+  key: string,
 ): { newKey: string; increment: number } {
   let count = 1;
   const type = removeCountFromString(key);
@@ -217,7 +217,7 @@ export function groupByFamily(
   data: APIDataType,
   baseClasses: string,
   left: boolean,
-  flow?: NodeType[]
+  flow?: NodeType[],
 ): groupedObjType[] {
   const baseClassesSet = new Set(baseClasses.split("\n"));
   let arrOfPossibleInputs: Array<{
@@ -243,7 +243,7 @@ export function groupByFamily(
         baseClassesSet.has(template.type)) ||
         (template.input_types &&
           template.input_types.some((inputType) =>
-            baseClassesSet.has(inputType)
+            baseClassesSet.has(inputType),
           )))
     );
   };
@@ -263,7 +263,7 @@ export function groupByFamily(
         hasBaseClassInBaseClasses:
           foundNode?.hasBaseClassInBaseClasses ||
           nodeData.node!.base_classes?.some((baseClass) =>
-            baseClassesSet.has(baseClass)
+            baseClassesSet.has(baseClass),
           ), //seta como anterior ou verifica se o node tem base class
         displayName: nodeData.node?.display_name,
       });
@@ -280,10 +280,10 @@ export function groupByFamily(
       if (!foundNode) {
         foundNode = {
           hasBaseClassInTemplate: Object.values(node!.template).some(
-            checkBaseClass
+            checkBaseClass,
           ),
           hasBaseClassInBaseClasses: node!.base_classes?.some((baseClass) =>
-            baseClassesSet.has(baseClass)
+            baseClassesSet.has(baseClass),
           ),
           displayName: node?.display_name,
         };
@@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean {
 export function extractColumnsFromRows(
   rows: object[],
   mode: "intersection" | "union",
-  excludeColumns?: Array<string>
+  excludeColumns?: Array<string>,
 ): (ColDef<any> | ColGroupDef<any>)[] {
   let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
   if (rows.length === 0) {
@@ -412,3 +412,14 @@ export function isThereModal(): boolean {
   const modal = document.body.getElementsByClassName(MODAL_CLASSES);
   return modal.length > 0;
 }
+
+export function messagesSorter(a: any, b: any) {
+  const indexA = MESSAGES_TABLE_ORDER.indexOf(a.field);
+  const indexB = MESSAGES_TABLE_ORDER.indexOf(b.field);
+
+  // If the field is not in the MESSAGES_TABLE_ORDER, we can place it at the end.
+  const orderA = indexA === -1 ? MESSAGES_TABLE_ORDER.length : indexA;
+  const orderB = indexB === -1 ? MESSAGES_TABLE_ORDER.length : indexB;
+
+  return orderA - orderB;
+}