Merge branch 'feature/ui_table' of personal:logspace-ai/langflow into feature/ui_table

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

@@ -11,7 +11,7 @@ import { Button } from "../ui/button";
 export default function TableComponent() {
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
     {
       field: "type",
       cellEditor: "agSelectCellEditor",
@@ -30,7 +30,7 @@ export default function TableComponent() {
       editable: true,
     },
     {
-      headerName: "Default Fields",
+      headerName: "Apply To Fields",
       field: "defaultFields",
       flex: 1,
       editable: true,

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

@@ -1,6 +1,7 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
+import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
@@ -8,8 +9,11 @@ export default function GlobalVariablesPage() {
     <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="text-xl font-bold tracking-tight">Global Variables</h2>
-          <p className="text-muted-foreground">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            Global Variables
+            <ForwardedIconComponent name="Globe" className="ml-3 w-6 h-6 text-primary"  />
+          </h2>
+          <p className="text-sm text-muted-foreground">
             Manage and assign global variables to default fields. You can add
             new global variables by clicking the button.
           </p>
@@ -17,7 +21,7 @@ export default function GlobalVariablesPage() {
         <div className="flex-shrink-0">
           <Button data-testid="api-key-button-store" variant="primary">
             <IconComponent name="Plus" className="mr-2 w-4" />
-            Add Global Variables
+            Add New
           </Button>
         </div>
       </div>

src/frontend/src/style/ag-theme-shadcn.css

@@ -15,3 +15,7 @@
   --ag-row-hover-color: hsl(var(--accent));
   --ag-header-height: 2.5rem;
 }
+
+.ag-theme-shadcn .ag-paging-panel {
+  height: 3rem;
+}