ShlomiShitrit/issue15 - Add Description

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "elp-query-ui",
+  "name": "dbbot-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/app/__tests__/resources.ts

@@ -0,0 +1,100 @@
+import "@testing-library/jest-dom/jest-globals";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Bot } from "@/app/general/interfaces";
+import { DataType } from "@/app/general/types";
+
+export const botMock: Bot = {
+    dataMap: {},
+    _details: {
+        name: "Bot",
+        description: "A bot for testing",
+    },
+    _data: {
+        headers: ["Name", "Age"],
+        columns: [
+            {
+                _id: "name",
+                displayName: "Name",
+                dataType: DataType.STRING,
+                operatorsArray: [
+                    {
+                        id: "equals",
+                        displayName: "equals",
+                        params: [
+                            {
+                                isArray: false,
+                                dataType: DataType.STRING,
+                                name: "cell",
+                            },
+                        ],
+                    },
+                    {
+                        id: "contains",
+                        displayName: "contains",
+                        params: [
+                            {
+                                isArray: false,
+                                dataType: DataType.STRING,
+                                name: "cell",
+                            },
+                        ],
+                    },
+                ],
+                rows: ["Alice", "Bob"],
+                _description: "The name of the person",
+            },
+        ],
+    },
+    _messages: {
+        customMessages: {
+            errorMessage: "Invalid input",
+            attributeMessage: "Please select an attribute",
+            operatorMessage: "Choose an operator",
+            continueMessage: "Continue",
+            resultMessage: "Here is the result",
+        },
+        slots: {
+            welcomeSlot: ["Welcome to the bot"],
+            restartSlot: ["Restarting the process"],
+        },
+    },
+    currentOperatorIndex: 0,
+    filePath: "path/to/file",
+    operatorsData: [
+        {
+            id: "equals",
+            displayName: "equals",
+            params: [
+                {
+                    isArray: false,
+                    dataType: DataType.STRING,
+                    name: "cell",
+                },
+            ],
+        },
+        {
+            id: "contains",
+            displayName: "contains",
+            params: [
+                {
+                    isArray: false,
+                    dataType: DataType.STRING,
+                    name: "cell",
+                },
+            ],
+        },
+    ],
+    operatorsFiles: {
+        functions: {
+            startsWithBAndEndsWithX:
+                '\n\n        export const startsWithBAndEndsWithX = function (cell, value) {\n        return cell.startsWith("B") && cell.endsWith(value);\n    };',
+        },
+        main: '\nimport {\n    greaterOperator,\n    lowerOperator,\n    equalOperator,\n    rangeOperator,\n    startWithOperator,\n    endWithOperator,\n    containsOperator,\n    equalStringOperator,\n    chooseOneOperator,\n    chooseMultipleOperator,   \n} from "@/app/operators";\n\nexport const OPERATORS = {\n    greater: greaterOperator,\n    lower: lowerOperator,\n    equal: equalOperator,\n    range: rangeOperator,\n    startWith: startWithOperator,\n    endWith: endWithOperator,\n    contains: containsOperator,\n    equalString: equalStringOperator,\n    chooseOne: chooseOneOperator,\n    chooseMultiple: chooseMultipleOperator,\n};\n\nimport { startsWithBAndEndsWithX } from "@/app/operators/startsWithBAndEndsWithX";\n\nOPERATORS["startsWithBAndEndsWithX" as keyof typeof OPERATORS] = startsWithBAndEndsWithX;',
+    },
+    colors: { bot: "green", user: "blue" },
+};
+
+describe("Resources", () => {
+    it("Test", () => {});
+});

src/app/__tests__/useInput.test.ts

@@ -2,100 +2,12 @@ import "@testing-library/jest-dom/jest-globals";
 import "@testing-library/jest-dom";
 import { renderHook, act } from "@testing-library/react";
 import useInput from "@/app/hooks/useInput";
-import { Bot, Message } from "@/app/general/interfaces";
-import { Sender, TypeOfQuestion, DataType } from "@/app/general/types";
+import { Message } from "@/app/general/interfaces";
+import { Sender, TypeOfQuestion } from "@/app/general/types";
 import { botMessages, botAddMessages } from "@/app/general/resources";
+import { botMock } from "@/app/__tests__/resources";
 
 // Mock data for testing
-const botMock: Bot = {
-    dataMap: {},
-    _details: {
-        name: "Bot",
-        description: "A bot for testing",
-    },
-    _data: {
-        headers: ["Name", "Age"],
-        columns: [
-            {
-                _id: "name",
-                displayName: "Name",
-                dataType: DataType.STRING,
-                operatorsArray: [
-                    {
-                        id: "equals",
-                        displayName: "equals",
-                        params: [
-                            {
-                                isArray: false,
-                                dataType: DataType.STRING,
-                                name: "cell",
-                            },
-                        ],
-                    },
-                    {
-                        id: "contains",
-                        displayName: "contains",
-                        params: [
-                            {
-                                isArray: false,
-                                dataType: DataType.STRING,
-                                name: "cell",
-                            },
-                        ],
-                    },
-                ],
-                rows: ["Alice", "Bob"],
-            },
-        ],
-    },
-    _messages: {
-        customMessages: {
-            errorMessage: "Invalid input",
-            attributeMessage: "Please select an attribute",
-            operatorMessage: "Choose an operator",
-            continueMessage: "Continue",
-            resultMessage: "Here is the result",
-        },
-        slots: {
-            welcomeSlot: ["Welcome to the bot"],
-            restartSlot: ["Restarting the process"],
-        },
-    },
-    currentOperatorIndex: 0,
-    filePath: "path/to/file",
-    operatorsData: [
-        {
-            id: "equals",
-            displayName: "equals",
-            params: [
-                {
-                    isArray: false,
-                    dataType: DataType.STRING,
-                    name: "cell",
-                },
-            ],
-        },
-        {
-            id: "contains",
-            displayName: "contains",
-            params: [
-                {
-                    isArray: false,
-                    dataType: DataType.STRING,
-                    name: "cell",
-                },
-            ],
-        },
-    ],
-    operatorsFiles: {
-        functions: {
-            startsWithBAndEndsWithX:
-                '\n\n        export const startsWithBAndEndsWithX = function (cell, value) {\n        return cell.startsWith("B") && cell.endsWith(value);\n    };',
-        },
-        main: '\nimport {\n    greaterOperator,\n    lowerOperator,\n    equalOperator,\n    rangeOperator,\n    startWithOperator,\n    endWithOperator,\n    containsOperator,\n    equalStringOperator,\n    chooseOneOperator,\n    chooseMultipleOperator,   \n} from "@/app/operators";\n\nexport const OPERATORS = {\n    greater: greaterOperator,\n    lower: lowerOperator,\n    equal: equalOperator,\n    range: rangeOperator,\n    startWith: startWithOperator,\n    endWith: endWithOperator,\n    contains: containsOperator,\n    equalString: equalStringOperator,\n    chooseOne: chooseOneOperator,\n    chooseMultiple: chooseMultipleOperator,\n};\n\nimport { startsWithBAndEndsWithX } from "@/app/operators/startsWithBAndEndsWithX";\n\nOPERATORS["startsWithBAndEndsWithX" as keyof typeof OPERATORS] = startsWithBAndEndsWithX;',
-    },
-    colors: { bot: "green", user: "blue" },
-};
 
 const currentMsgMock = {
     state: [

src/app/components/Chat/Chat.tsx

@@ -94,7 +94,7 @@ export default function Chat({ bot }: ChatProps) {
 
     return (
         <Box sx={styles.headFootContainer}>
-            <Header text={bot?._details.name as string} />
+            <Header bot={bot} />
             <Box sx={styles.container}>
                 <Box sx={styles.secondContainer}>
                     {(messagesSection &&

src/app/components/Dialog/Dialog.tsx

@@ -14,12 +14,14 @@ export default function Dialog({
     content,
     open,
     setOpen,
+    children,
 }: DialogProps) {
     return (
         <MuiDialog open={open} onClose={() => setOpen(false)}>
             <DialogTitle>{title}</DialogTitle>
             <DialogContent>
                 <DialogContentText>{content}</DialogContentText>
+                {children}
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpen(false)} autoFocus>

src/app/components/Header/Header.style.ts

@@ -1,8 +1,27 @@
 export const styles = {
     box: {
+        display: "flex",
         backgroundColor: "#f8f9fa",
         padding: 2,
-        textAlign: "center",
+        justifyContent: "center",
         color: "black",
-    }
-}
+    },
+    typContainer: {
+        width: "34%",
+        textAlign: "center",
+        justifyContent: "center",
+    },
+    dataContainer: {
+        width: "33%",
+        direction: "rtl",
+    },
+    buttonContainer: {
+        width: "33%",
+    },
+    attributeButton: {
+        width: "25%",
+    },
+    dataButton: {
+        width: "25%",
+    },
+};

src/app/components/Header/Header.test.tsx

@@ -2,36 +2,24 @@ import "@testing-library/jest-dom/jest-globals";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import Header from "@/app/components/Header/Header";
+import { botMock } from "@/app/__tests__/resources";
 
 // Mock props
-const mockText = "Welcome to the Application";
+const mockText = "Bot";
 
 describe("Header Component", () => {
     it("renders the header text", () => {
-        render(<Header text={mockText} />);
+        render(<Header bot={botMock} />);
 
         // Check if the text is rendered
         expect(screen.getByText(mockText)).toBeInTheDocument();
     });
 
-    it("applies the correct styles to the header container", () => {
-        render(<Header text={mockText} />);
-
-        // Check if the Box component has correct styles
-        const headerBox = screen.getByRole('banner');
-        expect(headerBox).toHaveStyle(`
-            background-color: #f8f9fa;
-            padding: 16px;
-            text-align: center;
-            color: black;
-        `);
-    });
-
     it("renders the correct typography element", () => {
-        render(<Header text={mockText} />);
+        render(<Header bot={botMock} />);
 
         // Check if Typography is rendered as an h1
-        const typography = screen.getByRole('heading', { level: 1 });
+        const typography = screen.getByRole("heading", { level: 1 });
         expect(typography).toBeInTheDocument();
         expect(typography.tagName).toBe("H1");
     });