From d503b74a3f2368d884fa4982153723241143feba Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:18:24 +0200
Subject: [PATCH] Added shortcuts into right page

---
 .../components/shortcutsComponent/index.tsx   | 104 ------------------
 .../components/shortcutsPage/index.tsx        |  25 -----
 .../src/pages/ShortcutsPage/index.tsx         |  89 ++++++++++++---
 3 files changed, 76 insertions(+), 142 deletions(-)
 delete mode 100644 src/frontend/src/components/shortcutsComponent/index.tsx
 delete mode 100644 src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx

diff --git a/src/frontend/src/components/shortcutsComponent/index.tsx b/src/frontend/src/components/shortcutsComponent/index.tsx
deleted file mode 100644
index 574bacd12..000000000
--- a/src/frontend/src/components/shortcutsComponent/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
-import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { ColDef,ColGroupDef } from 'ag-grid-community';
-import { useState } from "react";
-import { Card, CardContent, CardFooter } from "../ui/card";
-
-export default function ShortcutsComponent() {
-  const advancedShortcut = "Ctrl + shift + A";
-  const minizmizeShortcut = "Ctrl + shift + Q";
-  const codeShortcut = "Ctrl + shift + C";
-  const copyShortcut = "Ctrl + C";
-  const duplicateShortcut = "Ctrl + D";
-  const shareShortcut = "Ctrl + shift + S";
-  const docsShortcut = "Ctrl + shift + D";
-  const saveShortcut = "Ctrl + S";
-  const deleteShortcut = "Backspace";
-  const interactionShortcut = "Ctrl + K";
-  const undoShortcut = "Ctrl + Z";
-  const redoShortcut = "Ctrl + Y";
-
-
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Functionality",
-     field: "name",
-      flex: 1,
-       editable: false 
-      }, //This column will be twice as wide as the others
-    {
-      field: "shortcut",
-      flex: 2,
-      editable: false,
-    }
-  ]);
-
-  const [rowData, setRowData] = useState([
-    {
-      name: "Open node advanced settings",
-      shortcut: advancedShortcut,
-    },
-    {
-      name: "Minimize",
-      shortcut: minizmizeShortcut
-    },
-    {
-      name: "Open Code modal",
-      shortcut: codeShortcut,
-    },
-    {
-      name: "Copy",
-      shortcut: copyShortcut,
-    },
-    {
-      name: "Duplicate",
-      shortcut: duplicateShortcut,
-    },
-    {
-      name: "Share",
-      shortcut: shareShortcut,
-    },
-    {
-      name: "Open docs",
-      shortcut: docsShortcut,
-    },
-    {
-      name: "Save",
-      shortcut: saveShortcut,
-    },
-    {
-      name: "Delete",
-      shortcut: deleteShortcut,
-    },
-    {
-      name: "Open interaction panel",
-      shortcut: interactionShortcut,
-    },
-    {
-      name: "Undo",
-      shortcut: undoShortcut,
-    },
-    {
-      name: "Redo",
-      shortcut: redoShortcut,
-    },
-  ]);
-
-  return (
-    <Card className="mb-12 h-full">
-      <CardContent className="flex h-full flex-col pt-4">
-        <div
-          className="ag-theme-quartz h-full" // applying the grid theme
-        >
-          <AgGridReact columnDefs={colDefs} rowData={rowData} />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
-          Showing <strong>1-3</strong> of <strong>3</strong> products
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx b/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
deleted file mode 100644
index b73efd829..000000000
--- a/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import ShortcutsComponent from "../../../../components/shortcutsComponent";
-import { Button } from "../../../../components/ui/button";
-
-export default function ShortcutsPage() {
-  return (
-    <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">Shortcuts</h2>
-          <p className="text-muted-foreground">
-            Manage and assign global shortcuts
-          </p>
-        </div>
-      </div>
-
-      <div className="flex h-full w-full flex-col justify-between">
-        <ShortcutsComponent />
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/src/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/ShortcutsPage/index.tsx
index 3c91269d9..860f5da2c 100644
--- a/src/frontend/src/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/ShortcutsPage/index.tsx
@@ -1,11 +1,82 @@
-import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
-
-import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import { useState } from "react";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
 export default function ShortcutsPage() {
+  const advancedShortcut = "Ctrl + shift + A";
+  const minizmizeShortcut = "Ctrl + shift + Q";
+  const codeShortcut = "Ctrl + shift + C";
+  const copyShortcut = "Ctrl + C";
+  const duplicateShortcut = "Ctrl + D";
+  const shareShortcut = "Ctrl + shift + S";
+  const docsShortcut = "Ctrl + shift + D";
+  const saveShortcut = "Ctrl + S";
+  const deleteShortcut = "Backspace";
+  const interactionShortcut = "Ctrl + K";
+  const undoShortcut = "Ctrl + Z";
+  const redoShortcut = "Ctrl + Y";
+
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Functionality", field: "name", flex: 1, editable: false }, //This column will be twice as wide as the others
+    {
+      field: "shortcut",
+      flex: 2,
+      editable: false,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "Open node advanced settings",
+      shortcut: advancedShortcut,
+    },
+    {
+      name: "Minimize",
+      shortcut: minizmizeShortcut,
+    },
+    {
+      name: "Open Code modal",
+      shortcut: codeShortcut,
+    },
+    {
+      name: "Copy",
+      shortcut: copyShortcut,
+    },
+    {
+      name: "Duplicate",
+      shortcut: duplicateShortcut,
+    },
+    {
+      name: "Share",
+      shortcut: shareShortcut,
+    },
+    {
+      name: "Open docs",
+      shortcut: docsShortcut,
+    },
+    {
+      name: "Save",
+      shortcut: saveShortcut,
+    },
+    {
+      name: "Delete",
+      shortcut: deleteShortcut,
+    },
+    {
+      name: "Open interaction panel",
+      shortcut: interactionShortcut,
+    },
+    {
+      name: "Undo",
+      shortcut: undoShortcut,
+    },
+    {
+      name: "Redo",
+      shortcut: redoShortcut,
+    },
+  ]);
   return (
     <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">
@@ -22,18 +93,10 @@ export default function ShortcutsPage() {
             frequently used actions.
           </p>
         </div>
-        <div className="flex-shrink-0">
-          <AddNewVariableButton>
-            <Button data-testid="api-key-button-store" variant="primary">
-              <IconComponent name="Plus" className="mr-2 w-4" />
-              Add New
-            </Button>
-          </AddNewVariableButton>
-        </div>
       </div>
 
       <div className="flex h-full w-full flex-col justify-between">
-        <TableComponent />
+        <TableComponent columnDefs={colDefs} rowData={rowData} />
       </div>
     </div>
   );