fix UI errors

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -5,6 +5,7 @@ import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
+import { sortByName } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
@@ -23,14 +24,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
   );
 
-  const availableFields = Array.from(componentFields).filter(
+  const availableFields = () => {
-    (field) => !unavaliableFields.has(field)
+    const fields = Array.from(componentFields).filter(
-  );
+      (field) => !unavaliableFields.has(field),
+    );
+
+    return sortByName(fields);
+  };
+
   const addGlobalVariable = useGlobalVariablesStore(
-    (state) => state.addGlobalVariable
+    (state) => state.addGlobalVariable,
   );
 
   function handleSaveVariable() {
@@ -113,7 +119,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
             password={false}
-            options={availableFields}
+            options={availableFields()}
             placeholder="Choose a field for the variable..."
             id={"apply-to-fields"}
           ></InputComponent>

src/frontend/src/components/cardComponent/index.tsx

@@ -11,7 +11,6 @@ import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn, convertTestName } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import ShadTooltip from "../shadTooltipComponent";
-import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import {
   Card,
@@ -172,7 +171,7 @@ export default function CollectionCardComponent({
         data-testid={`card-${convertTestName(data.name)}`}
         //TODO check color schema
         className={cn(
-          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#202635]",
+          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
         )}

src/frontend/src/components/chatComponent/index.tsx

@@ -50,7 +50,7 @@ export default function FlowToolbar(): JSX.Element {
             "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
             !hasApiKey || !validApiKey || !hasStore
               ? " button-disable text-muted-foreground  "
-              : ""
+              : "",
           )}
         >
           <ForwardedIconComponent
@@ -59,14 +59,14 @@ export default function FlowToolbar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : ""
+                : "",
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore]
+    [hasApiKey, validApiKey, currentFlow, hasStore],
   );
 
   return (
@@ -108,7 +108,7 @@ export default function FlowToolbar(): JSX.Element {
                       "message-button-icon h-5 w-5 fill-muted-foreground stroke-muted-foreground transition-all"
                     }
                   />
-                  Run
+                  Playground
                 </div>
               )}
             </div>
@@ -120,7 +120,7 @@ export default function FlowToolbar(): JSX.Element {
                 <ApiModal flow={currentFlow}>
                   <div
                     className={classNames(
-                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
+                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
                     )}
                   >
                     <ForwardedIconComponent

src/frontend/src/components/csvOutputComponent/index.tsx

@@ -69,7 +69,7 @@ function CsvOutputComponent({
     if (file) {
       const { rowData: data, colDefs: columns } = convertCSVToData(
         file,
-        separator
+        separator,
       );
       setRowData(data);
       setColDefs(columns);
@@ -114,14 +114,14 @@ function CsvOutputComponent({
     (params: any) => {
       updateRowHeight(params);
     },
-    [updateRowHeight]
+    [updateRowHeight],
   );
 
   const onGridSizeChanged = useCallback(
     (params: any) => {
       updateRowHeight(params);
     },
-    [updateRowHeight]
+    [updateRowHeight],
   );
 
   return (
@@ -167,6 +167,7 @@ function CsvOutputComponent({
             onFirstDataRendered={onFirstDataRendered}
             onGridSizeChanged={onGridSizeChanged}
             scrollbarWidth={8}
+            overlayNoRowsTemplate="No data available"
           />
         </div>
       )}

src/frontend/src/components/tableComponent/index.tsx

@@ -5,6 +5,7 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
+import { Card, CardContent } from "../ui/card";
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
@@ -17,10 +18,18 @@ const TableComponent = forwardRef<
       <div
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-          "ag-theme-shadcn flex h-full flex-col"
+          "ag-theme-shadcn flex h-full flex-col",
         )} // applying the grid theme
       >
-        <AgGridReact ref={ref} {...props} />
+        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
+          <CardContent>
+            <AgGridReact
+              overlayNoRowsTemplate="No data available"
+              ref={ref}
+              {...props}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

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

@@ -117,7 +117,7 @@ export default function IOModal({
 
   return (
     <BaseModal
-      size={selectedTab === 0 ? "large-thin" : "md-thin"}
+      size={selectedTab === 0 ? "sm-thin" : "md-thin"}
       open={open}
       setOpen={setOpen}
       disable={disable}

src/frontend/src/modals/baseModal/index.tsx

@@ -79,6 +79,7 @@ interface BaseModalProps {
     | "small-h-full"
     | "medium-h-full"
     | "md-thin"
+    | "sm-thin"
     | "smaller-h-full";
 
   disable?: boolean;
@@ -154,6 +155,11 @@ function BaseModal({
       height = "h-[70vh]";
       break;
 
+    case "sm-thin":
+      minWidth = "min-w-[65vw]";
+      height = "h-[70vh]";
+      break;
+
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       break;

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

@@ -15,13 +15,13 @@ import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
+    (state) => state.globalVariablesEntries,
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable
+    (state) => state.removeGlobalVariable,
   );
   const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables
+    (state) => state.globalVariables,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
@@ -154,7 +154,7 @@ export default function GlobalVariablesPage() {
             <IconComponent
               name="Trash2"
               className={cn(
-                "h-5 w-5 text-destructive group-disabled:text-primary"
+                "h-5 w-5 text-destructive group-disabled:text-primary",
               )}
             />
           </Button>
@@ -174,6 +174,8 @@ export default function GlobalVariablesPage() {
           }}
           rowSelection="multiple"
           suppressRowClickSelection={true}
+          domLayout="autoHeight"
+          pagination={false}
           columnDefs={colDefs}
           rowData={rowData}
         />

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

@@ -2,13 +2,6 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../../components/ui/card";
 
 export default function ShortcutsPage() {
   const advancedShortcut = "Ctrl + Shift + A";
@@ -84,7 +77,7 @@ export default function ShortcutsPage() {
       shortcut: redoShortcut,
     },
   ]);
-  
+
   return (
     <div className="flex h-full w-full flex-col gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -97,22 +90,17 @@ export default function ShortcutsPage() {
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Manage Shortcuts for quick access to
+            Manage Shortcuts for quick access to frequently used actions.
-            frequently used actions.
           </p>
         </div>
       </div>
       <div className="grid gap-6 pb-8">
-        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
+        <TableComponent
-          <CardContent>
+          domLayout="autoHeight"
-            <TableComponent
+          pagination={false}
-              domLayout="autoHeight"
+          columnDefs={colDefs}
-              pagination={false}
+          rowData={nodesRowData}
-              columnDefs={colDefs}
+        />
-              rowData={nodesRowData}
-            />
-          </CardContent>
-        </Card>
       </div>
     </div>
   );

src/frontend/src/utils/utils.ts

@@ -719,3 +719,7 @@ export function freezeObject(obj: any) {
 export function convertTestName(name: string): string {
   return name.replace(/ /g, "-").toLowerCase();
 }
+
+export function sortByName(stringList: string[]): string[] {
+  return stringList.sort((a, b) => a.localeCompare(b));
+}

src/frontend/tests/end-to-end/userSettings.spec.ts

@@ -63,7 +63,7 @@ test("should interact with global variables", async ({ page }) => {
     .nth(0)
     .click();
   await page.getByTestId("icon-Trash2").click();
-  await page.getByText("No Rows To Show").isVisible();
+  await page.getByText("No data available").isVisible();
 });
 
 test("should see shortcuts", async ({ page }) => {