Bugs - Global Variables (#1839)

Fixed height and resizability of Global Variables table, made value of
credentials variable as password field

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

@@ -106,6 +106,16 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             id={"type-global-variables"}
           ></InputComponent>
           <Label>Value</Label>
+          {type === "Credential" ? (
+            <InputComponent
+              password
+              value={value}
+              onChange={(e) => {
+                setValue(e);
+              }}
+              placeholder="Insert a value for the variable..."
+            />
+          ) : (
             <Textarea
               value={value}
               onChange={(e) => {
@@ -114,6 +124,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
               placeholder="Insert a value for the variable..."
               className="w-full resize-none custom-scroll"
             />
+          )}
+
           <Label>Apply To Fields (optional)</Label>
           <InputComponent
             setSelectedOptions={(value) => setFields(value)}

src/frontend/src/components/inputComponent/index.tsx

@@ -76,7 +76,7 @@ export default function InputComponent({
               editNode ? " input-edit-node " : "",
               password && editNode ? "pr-8" : "",
               password && !editNode ? "pr-10" : "",
-              className!
+              className!,
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
@@ -120,7 +120,7 @@ export default function InputComponent({
                 required={required}
                 className={classNames(
                   password &&
-                    selectedOption === "" &&
+                    (!setSelectedOption || selectedOption === "") &&
                     !pwdVisible &&
                     value !== ""
                     ? " text-clip password "
@@ -134,7 +134,7 @@ export default function InputComponent({
                     ? "pr-8"
                     : "",
 
-                  className!
+                  className!,
                 )}
                 placeholder={password && editNode ? "Key" : placeholder}
                 onChange={(e) => {
@@ -194,15 +194,15 @@ export default function InputComponent({
                             setSelectedOption(
                               currentValue === selectedOption
                                 ? ""
-                                : currentValue
+                                : currentValue,
                             );
                           setSelectedOptions &&
                             setSelectedOptions(
                               selectedOptions?.includes(currentValue)
                                 ? selectedOptions.filter(
-                                    (item) => item !== currentValue
+                                    (item) => item !== currentValue,
                                   )
-                                : [...selectedOptions, currentValue]
+                                : [...selectedOptions, currentValue],
                             );
                           !setSelectedOptions && setShowOptions(false);
                         }}
@@ -215,7 +215,7 @@ export default function InputComponent({
                                 selectedOption === option ||
                                   selectedOptions?.includes(option)
                                   ? "opacity-100"
-                                  : "opacity-0"
+                                  : "opacity-0",
                               )}
                             >
                               <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@@ -254,7 +254,7 @@ export default function InputComponent({
                 ((selectedOptions?.length !== 0 || !onChange) &&
                   setSelectedOptions)
                 ? ""
-                : "hidden"
+                : "hidden",
             )}
             onClick={
               ((selectedOption !== "" || !onChange) && setSelectedOption) ||
@@ -275,7 +275,7 @@ export default function InputComponent({
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2.5"
+            "absolute inset-y-0 flex items-center pr-2.5",
           )}
         >
           <button
@@ -286,7 +286,7 @@ export default function InputComponent({
               selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground"
+              "hover:text-accent-foreground",
             )}
           >
             <ForwardedIconComponent
@@ -298,7 +298,7 @@ export default function InputComponent({
         </span>
       )}
 
-      {password && selectedOption === "" && (
+      {password && (!setSelectedOption || selectedOption === "") && (
         <button
           type="button"
           tabIndex={-1}
@@ -306,16 +306,14 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button"
+              : "input-component-false-button",
           )}
           onClick={(event) => {
             event.preventDefault();
             setPwdVisible(!pwdVisible);
           }}
         >
-          {password &&
+          {pwdVisible ? (
-            selectedOption === "" &&
-            (pwdVisible ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -325,7 +323,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                    : "input-component-false-svg"
+                  : "input-component-false-svg",
               )}
             >
               <path
@@ -344,7 +342,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                    : "input-component-false-svg"
+                  : "input-component-false-svg",
               )}
             >
               <path
@@ -358,7 +356,7 @@ export default function InputComponent({
                 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
               />
             </svg>
-            ))}
+          )}
         </button>
       )}
     </div>

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

@@ -5,32 +5,21 @@ 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>,
   ComponentPropsWithoutRef<typeof AgGridReact>
->(({ pagination = true, ...props }, ref) => {
+>(({ ...props }, ref) => {
   const dark = useDarkStore((state) => state.dark);
 
   return (
-    <div className="flex h-full flex-col">
     <div
       className={cn(
         dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
         "ag-theme-shadcn flex h-full flex-col",
       )} // applying the grid theme
     >
-        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
+      <AgGridReact ref={ref} {...props} />
-          <CardContent>
-            <AgGridReact
-              overlayNoRowsTemplate="No data available"
-              ref={ref}
-              {...props}
-            />
-          </CardContent>
-        </Card>
-      </div>
     </div>
   );
 });

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

@@ -8,6 +8,7 @@ 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 } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@@ -81,7 +82,7 @@ export default function GlobalVariablesPage() {
       showDisabledCheckboxes: true,
       headerName: "Variable Name",
       field: "name",
-      flex: 1,
+      flex: 2,
     }, //This column will be twice as wide as the others
     {
       field: "type",
@@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
       field: "default_fields",
       flex: 1,
       editable: false,
+      resizable: false,
     },
   ]);
 
@@ -168,17 +170,23 @@ export default function GlobalVariablesPage() {
       </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));
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.name),
+                );
               }}
               rowSelection="multiple"
               suppressRowClickSelection={true}
-          domLayout="autoHeight"
+              pagination={true}
-          pagination={false}
               columnDefs={colDefs}
               rowData={rowData}
             />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

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

@@ -2,6 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
+import { Card, CardContent } from "../../../../components/ui/card";
 
 export default function ShortcutsPage() {
   const advancedShortcut = "Ctrl + Shift + A";
@@ -95,12 +96,16 @@ export default function ShortcutsPage() {
         </div>
       </div>
       <div className="grid gap-6 pb-8">
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
             <TableComponent
               domLayout="autoHeight"
               pagination={false}
               columnDefs={colDefs}
               rowData={nodesRowData}
             />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );