Bugs - Global Variables (#1839)

Fixed height and resizability of Global Variables table, made value of credentials variable as password field
2024-05-06 15:37:07 -03:00 · 2024-05-06 15:37:07 -03:00 · d938fb3a3c
commit d938fb3a3c
parent a2a1642017 fabb3c9b56
5 changed files with 118 additions and 106 deletions
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@ -106,14 +106,26 @@ export default function AddNewVariableButton({ children }): JSX.Element {
            id={"type-global-variables"}
          ></InputComponent>
          <Label>Value</Label>
-          <Textarea
-            value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-            }}
-            placeholder="Insert a value for the variable..."
-            className="w-full resize-none custom-scroll"
-          />
+          {type === "Credential" ? (
+            <InputComponent
+              password
+              value={value}
+              onChange={(e) => {
+                setValue(e);
+              }}
+              placeholder="Insert a value for the variable..."
+            />
+          ) : (
+            <Textarea
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              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)}
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/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) => {
@ -104,9 +104,9 @@ export default function InputComponent({
                  (selectedOption !== "" || !onChange) && setSelectedOption
                    ? selectedOption
                    : (selectedOptions?.length !== 0 || !onChange) &&
-                      setSelectedOptions
-                    ? selectedOptions?.join(", ")
-                    : value
+                        setSelectedOptions
+                      ? selectedOptions?.join(", ")
+                      : value
                }
                autoFocus={autoFocus}
                disabled={disabled}
@ -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,59 +306,57 @@ 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 &&
-            selectedOption === "" &&
-            (pwdVisible ? (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className={classNames(
-                  editNode
-                    ? "input-component-true-svg"
-                    : "input-component-false-svg"
-                )}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                />
-              </svg>
-            ) : (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className={classNames(
-                  editNode
-                    ? "input-component-true-svg"
-                    : "input-component-false-svg"
-                )}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-              </svg>
-            ))}
+          {pwdVisible ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className={classNames(
+                editNode
+                  ? "input-component-true-svg"
+                  : "input-component-false-svg",
+              )}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className={classNames(
+                editNode
+                  ? "input-component-true-svg"
+                  : "input-component-false-svg",
+              )}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          )}
        </button>
      )}
    </div>
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/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">
-          <CardContent>
-            <AgGridReact
-              overlayNoRowsTemplate="No data available"
-              ref={ref}
-              {...props}
-            />
-          </CardContent>
-        </Card>
-      </div>
+    <div
+      className={cn(
+        dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+        "ag-theme-shadcn flex h-full flex-col",
+      )} // applying the grid theme
+    >
+      <AgGridReact ref={ref} {...props} />
    </div>
  );
 });
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/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">
-        <TableComponent
-          onSelectionChanged={(event: SelectionChangedEvent) => {
-            setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
-          }}
-          rowSelection="multiple"
-          suppressRowClickSelection={true}
-          domLayout="autoHeight"
-          pagination={false}
-          columnDefs={colDefs}
-          rowData={rowData}
-        />
+        <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={colDefs}
+              rowData={rowData}
+            />
+          </CardContent>
+        </Card>
      </div>
    </div>
  );
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/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">
-        <TableComponent
-          domLayout="autoHeight"
-          pagination={false}
-          columnDefs={colDefs}
-          rowData={nodesRowData}
-        />
+        <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>
  );