From ac46b2b6c9b1acff32d4959c1cd92c9f0787b752 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 30 Apr 2024 00:10:33 +0200 Subject: [PATCH] Passed Table props to page --- src/frontend/package-lock.json | 4 +- src/frontend/package.json | 4 +- .../src/components/tableComponent/index.tsx | 92 ++++--------------- .../src/pages/GlobalVariablesPage/index.tsx | 65 ++++++++++++- 4 files changed, 84 insertions(+), 81 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 5e6b7fe67..e7c71d62b 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -48,10 +48,10 @@ "million": "^3.0.6", "moment": "^2.29.4", "playwright": "^1.42.0", - "react": "^18.2.0", + "react": "^18.2.21", "react-ace": "^10.1.0", "react-cookie": "^4.1.1", - "react-dom": "^18.2.0", + "react-dom": "^18.2.21", "react-error-boundary": "^4.0.11", "react-icons": "^5.0.1", "react-laag": "^2.0.5", diff --git a/src/frontend/package.json b/src/frontend/package.json index 9b95e7acc..26dc911af 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -43,10 +43,10 @@ "million": "^3.0.6", "moment": "^2.29.4", "playwright": "^1.42.0", - "react": "^18.2.0", + "react": "^18.2.21", "react-ace": "^10.1.0", "react-cookie": "^4.1.1", - "react-dom": "^18.2.0", + "react-dom": "^18.2.21", "react-error-boundary": "^4.0.11", "react-icons": "^5.0.1", "react-laag": "^2.0.5", diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 43a9106b1..20b9083d9 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -1,89 +1,29 @@ -import { ColDef, ColGroupDef } from "ag-grid-community"; 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 { 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 { Button } from "../ui/button"; - -export default function TableComponent() { - // Column Definitions: Defines the columns to be displayed. - const [colDefs, setColDefs] = useState<(ColDef | ColGroupDef)[]>([ - { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others - { - - field: "type", - cellEditor: "agSelectCellEditor", - cellEditorParams: { - values: ["Prompt", "Credential"], - valueListGap: 10, - }, - flex: 1, - editable: true, - }, - { - field: "value", - cellEditor: "agLargeTextCellEditor", - cellEditorPopup: true, - flex: 2, - editable: true, - }, - { - headerName: "Apply To Fields", - field: "defaultFields", - flex: 1, - editable: true, - }, - ]); - - const [rowData, setRowData] = useState([ - { - name: "OpenAI Key", - type: "Credential", - value: "apijpioj09u302j0982ejf", - defaultFields: "Open AI API Key", - }, - { - name: "Prompt", - type: "Prompt", - value: `Answer user's questions based on the document below: - - --- - - {Document} - - --- - - Question: - {Question} - - Answer: - `, - defaultFields: ["Prompt"], - }, - { - name: "Azure Key", - type: "Credential", - value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23", - defaultFields: ["Azure API Key"], - }, - ]); +const TableComponent = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ ...props }, ref) => { const dark = useDarkStore((state) => state.dark); return (
-
- -
+
+ +
); -} +}); + +export default TableComponent; diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx index 5d3b3a981..ed4092413 100644 --- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx +++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx @@ -4,8 +4,71 @@ import { Button } from "../../components/ui/button"; import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton"; import ForwardedIconComponent from "../../components/genericIconComponent"; import TableComponent from "../../components/tableComponent"; +import { useState } from "react"; +import { ColDef, ColGroupDef } from "ag-grid-community"; export default function GlobalVariablesPage() { + // Column Definitions: Defines the columns to be displayed. + const [colDefs, setColDefs] = useState<(ColDef | ColGroupDef)[]>([ + { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others + { + field: "type", + cellEditor: "agSelectCellEditor", + cellEditorParams: { + values: ["Prompt", "Credential"], + valueListGap: 10, + }, + flex: 1, + editable: true, + }, + { + field: "value", + cellEditor: "agLargeTextCellEditor", + cellEditorPopup: true, + flex: 2, + editable: true, + }, + { + headerName: "Apply To Fields", + field: "defaultFields", + flex: 1, + editable: true, + }, + ]); + + const [rowData, setRowData] = useState([ + { + name: "OpenAI Key", + type: "Credential", + value: "apijpioj09u302j0982ejf", + defaultFields: "Open AI API Key", + }, + { + name: "Prompt", + type: "Prompt", + value: `Answer user's questions based on the document below: + + --- + + {Document} + + --- + + Question: + {Question} + + Answer: + `, + defaultFields: ["Prompt"], + }, + { + name: "Azure Key", + type: "Credential", + value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23", + defaultFields: ["Azure API Key"], + }, + ]); + return (
@@ -33,7 +96,7 @@ export default function GlobalVariablesPage() {
- +
);