Merge pull request #36 from GoldenLabHuji:ShlomiShitrit/issue33

ShlomiShitrit · web-flow · commit 07da3700189a · 2024-11-07T10:26:12.000+02:00
issue33: add "help" button
diff --git a/src/app/components/CSVButton/CSVButton.tsx b/src/app/components/CSVButton/CSVButton.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@mui/material";
 import { saveAs } from "file-saver";
 import { parse } from "json2csv";
 import { WordData } from "@/app/general/interfaces";
 import { styles } from "@/app/components/CSVButton/CSVButton.style";
+import CustomButton from "@/app/components/CustomButton";
+import { DOWNLOAD_RESULTS } from "@/app/general/constants";
 
 export default function CSVButton({ queryWords }: { queryWords: WordData[] }) {
     const handleDownload = () => {
@@ -12,13 +13,10 @@ export default function CSVButton({ queryWords }: { queryWords: WordData[] }) {
     };
 
     return (
-        <Button
-            variant="contained"
-            color="primary"
+        <CustomButton
             onClick={handleDownload}
             sx={styles.button}
-        >
-            Download Results
-        </Button>
+            text={DOWNLOAD_RESULTS}
+        />
     );
 }
diff --git a/src/app/components/ChatButton/ChatButton.style.ts b/src/app/components/ChatButton/ChatButton.style.ts
@@ -1 +1,3 @@
-export const styles = {};
+export const styles = {
+    button: { width: "120%" },
+};
diff --git a/src/app/components/ChatButton/ChatButton.tsx b/src/app/components/ChatButton/ChatButton.tsx
@@ -1,18 +1,19 @@
-import { Button, Grid } from "@mui/material";
+"use client";
+import { Grid } from "@mui/material";
+import CustomButton from "@/app/components/CustomButton";
 import SendIcon from "@mui/icons-material/Send";
+import { styles } from "./ChatButton.style";
+import { SEND } from "@/app/general/constants";
 
 export default function ChatButton() {
     return (
         <Grid item xs={2}>
-            <Button
-                sx={{ width: "120%" }}
-                color="primary"
-                variant="contained"
+            <CustomButton
+                sx={styles.button}
                 endIcon={<SendIcon />}
                 type="submit"
-            >
-                Send
-            </Button>
+                text={SEND}
+            />
         </Grid>
     );
 }
diff --git a/src/app/components/CustomButton/CustomButton.style.ts b/src/app/components/CustomButton/CustomButton.style.ts
@@ -0,0 +1 @@
+export const styles = {}
diff --git a/src/app/components/CustomButton/CustomButton.test.tsx b/src/app/components/CustomButton/CustomButton.test.tsx
@@ -0,0 +1,29 @@
+import "@testing-library/jest-dom/jest-globals";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import CustomButton from "@/app/components/CustomButton";
+import { CustomButtonProps } from "@/app/general/interfaces";
+
+describe("CustomButton", () => {
+    const defaultProps: CustomButtonProps = {
+        text: "Click Me",
+    };
+
+    it("renders the button with the provided text", () => {
+        render(<CustomButton {...defaultProps} />);
+        const buttonElement = screen.getByRole("button", { name: /click me/i });
+        expect(buttonElement).toBeInTheDocument();
+    });
+
+    it("applies additional props to the Button component", () => {
+        render(<CustomButton {...defaultProps} disabled />);
+        const buttonElement = screen.getByRole("button", { name: /click me/i });
+        expect(buttonElement).toBeDisabled();
+    });
+
+    it("applies primary color and contained variant by default", () => {
+        render(<CustomButton {...defaultProps} />);
+        const buttonElement = screen.getByRole("button", { name: /click me/i });
+        expect(buttonElement).toHaveClass("MuiButton-containedPrimary");
+    });
+});
diff --git a/src/app/components/CustomButton/CustomButton.tsx b/src/app/components/CustomButton/CustomButton.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { CustomButtonProps } from "@/app/general/interfaces";
+import { Button, ButtonProps } from "@mui/material";
+import { styles } from "./CustomButton.style";
+
+export default function CustomButton({
+    text,
+    ...props
+}: CustomButtonProps & ButtonProps) {
+    return (
+        <Button {...props} color="primary" variant="contained">
+            {text}
+        </Button>
+    );
+}
diff --git a/src/app/components/CustomButton/index.ts b/src/app/components/CustomButton/index.ts
@@ -0,0 +1,3 @@
+import CustomButton from './CustomButton'
+
+export default CustomButton;
diff --git a/src/app/components/Dialog/Dialog.tsx b/src/app/components/Dialog/Dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { DialogProps } from "@/app/general/interfaces";
+import CustomButton from "@/app/components/CustomButton";
 import {
-    Button,
     Dialog as MuiDialog,
     DialogActions,
     DialogContent,
@@ -24,9 +24,11 @@ export default function Dialog({
                 {children}
             </DialogContent>
             <DialogActions>
-                <Button onClick={() => setOpen(false)} autoFocus>
-                    Close
-                </Button>
+                <CustomButton
+                    onClick={() => setOpen(false)}
+                    autoFocus
+                    text="Close"
+                />
             </DialogActions>
         </MuiDialog>
     );
diff --git a/src/app/components/Header/Header.style.ts b/src/app/components/Header/Header.style.ts
@@ -3,25 +3,21 @@ export const styles = {
         display: "flex",
         backgroundColor: "#f8f9fa",
         padding: 2,
-        justifyContent: "center",
         color: "black",
     },
     typContainer: {
         width: "34%",
         textAlign: "center",
         justifyContent: "center",
     },
-    dataContainer: {
-        width: "33%",
-        direction: "rtl",
-    },
-    buttonContainer: {
-        width: "33%",
-    },
-    attributeButton: {
-        width: "25%",
+    button: {
+        width: "22%",
+        height: "80%",
+        fontSize: "14px",
+        borderRadius: "15px",
+        margin: "5px",
     },
-    dataButton: {
-        width: "25%",
+    buttonsContainer: {
+        width: "30%",
     },
 };
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,9 +1,10 @@
 "use client";
 import { useState } from "react";
 import { styles } from "./Header.style";
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import Table from "@/app/components/Table";
 import Dialog from "@/app/components/Dialog";
+import CustomButton from "@/app/components/CustomButton";
 import {
     HeaderProps,
     NameAndDescription,
@@ -14,81 +15,80 @@ import {
     SAMPLE_SIZE,
     ATTRIBUTES_BUTTON_TEXT,
     SAMPLE_BUTTON_TEXT,
+    NO_HELP_DESCRIPTION,
 } from "@/app/general/constants";
+import { getTableInfo } from "@/app/general/utils";
 
 export default function Header({ bot }: HeaderProps) {
     const [openAttribute, setOpenAttribute] = useState<boolean>(false);
     const [openData, setOpenData] = useState<boolean>(false);
+    const [openHelp, setOpenHelp] = useState<boolean>(false);
 
-    const botHeaders = bot?._data.headers;
-    const botColumns = bot?._data.columns;
-
-    const rows: generalObject<strOrNum>[] = botHeaders.map((_, index) => {
-        const row: generalObject<strOrNum> = {};
-        botColumns.forEach((col) => {
-            row[col.displayName] = col.rows[index];
-        });
-        return row;
-    });
-
+    const helpDescription = bot?._details.helpDescription;
+    const { botHeaders, botColumns, rows } = getTableInfo(bot);
     const sampleRows = rows.slice(0, SAMPLE_SIZE);
 
     const attributesRows = botColumns?.map((column) => ({
         name: column.displayName,
         description: column._description,
     }));
 
+    const buttons = [
+        { onClick: () => setOpenAttribute(true), text: ATTRIBUTES_BUTTON_TEXT },
+        { onClick: () => setOpenData(true), text: SAMPLE_BUTTON_TEXT },
+        { onClick: () => setOpenHelp(true), text: "Help!" },
+    ];
+
+    const dialogs = [
+        {
+            open: openAttribute,
+            setOpen: setOpenAttribute,
+            title: "Details of Attributes",
+            children: (
+                <Table<NameAndDescription>
+                    headers={["name", "description"]}
+                    rows={attributesRows}
+                />
+            ),
+        },
+        {
+            open: openData,
+            setOpen: setOpenData,
+            title: "Sample of Data",
+            children: (
+                <Table<generalObject<strOrNum>>
+                    headers={botHeaders}
+                    rows={sampleRows}
+                />
+            ),
+        },
+        {
+            open: openHelp,
+            setOpen: setOpenHelp,
+            title: "Help!",
+            content: helpDescription ?? NO_HELP_DESCRIPTION,
+        },
+    ];
+
     return (
         <Box component="header" sx={styles.box}>
-            <Box component="div" sx={styles.buttonContainer}>
-                <Button
-                    variant="contained"
-                    color="primary"
-                    sx={styles.attributeButton}
-                    onClick={() => setOpenAttribute(true)}
-                >
-                    {ATTRIBUTES_BUTTON_TEXT}
-                </Button>
+            <Box component="div" sx={styles.buttonsContainer}>
+                {buttons.map((button, index) => (
+                    <CustomButton key={index} sx={styles.button} {...button} />
+                ))}
             </Box>
             <Box component="div" sx={styles.typContainer}>
                 <Typography variant="h4" component="h1">
                     {bot?._details.name as string}
                 </Typography>
             </Box>
-            <Box component="div" sx={styles.dataContainer}>
-                <Button
-                    variant="contained"
-                    color="primary"
-                    sx={styles.dataButton}
-                    onClick={() => setOpenData(true)}
-                >
-                    {SAMPLE_BUTTON_TEXT}
-                </Button>
-            </Box>
-            <Dialog
-                title="Details of Attributes"
-                content=""
-                open={openAttribute}
-                setOpen={setOpenAttribute}
-                children={
-                    <Table<NameAndDescription>
-                        headers={["name", "description"]}
-                        rows={attributesRows}
-                    />
-                }
-            ></Dialog>
-            <Dialog
-                title="Sample of Data"
-                content=""
-                open={openData}
-                setOpen={setOpenData}
-                children={
-                    <Table<generalObject<strOrNum>>
-                        headers={botHeaders}
-                        rows={sampleRows}
-                    />
-                }
-            ></Dialog>
+            {dialogs.map((dialog, index) => (
+                <Dialog
+                    key={index}
+                    content={dialog?.content ?? ""}
+                    {...dialog}
+                />
+            ))}
         </Box>
     );
 }
diff --git a/src/app/general/constants.ts b/src/app/general/constants.ts
@@ -1,6 +1,7 @@
 export const NO_RESULTS_FOUND = "No results found";
-
 export const SAMPLE_SIZE = 5;
-
 export const ATTRIBUTES_BUTTON_TEXT = "Display Attributes";
-export const SAMPLE_BUTTON_TEXT = "Display Data Sample";
+export const SAMPLE_BUTTON_TEXT = "Display Data Sample";
+export const NO_HELP_DESCRIPTION = "No help description available";
+export const DOWNLOAD_RESULTS = "Download Results";
+export const SEND = "Send";
diff --git a/src/app/general/interfaces.ts b/src/app/general/interfaces.ts
@@ -58,10 +58,13 @@ interface BotData {
 
 export interface NameAndDescription {
     name: string;
-    description: string;
+    description?: string;
 }
 
-interface BotDetails extends NameAndDescription {}
+interface BotDetails extends NameAndDescription {
+    helpDescription?: string;
+    mailInfo?: string;
+}
 
 interface BotMessages {
     customMessages: CustomMessages;
@@ -123,6 +126,8 @@ interface TextProp {
     text: string;
 }
 
+export interface CustomButtonProps extends TextProp {}
+
 export interface HeaderProps extends BotProperty {}
 
 export interface InfoTooltipProps extends TextProp {}
diff --git a/src/app/general/utils.ts b/src/app/general/utils.ts
@@ -1,8 +1,8 @@
 import * as fs from "fs";
 import * as path from "path";
 import { OPERATORS } from "@/app/operators/operators";
-import { Message, Bot } from "@/app/general/interfaces";
-import { Sender, TypeOfQuestion } from "@/app/general/types";
+import { Message, Bot, generalObject } from "@/app/general/interfaces";
+import { Sender, TypeOfQuestion, strOrNum } from "@/app/general/types";
 
 export function isNumberArray(value: any): value is number[] {
     const isArray = Array.isArray(value);
@@ -48,3 +48,18 @@ export function createOperatorsFiles(bot: Bot) {
         );
     });
 }
+
+export function getTableInfo(bot: Bot) {
+    const botHeaders = bot?._data.headers;
+    const botColumns = bot?._data.columns;
+
+    const rows: generalObject<strOrNum>[] = botHeaders.map((_, index) => {
+        const row: generalObject<strOrNum> = {};
+        botColumns.forEach((col) => {
+            row[col.displayName] = col.rows[index];
+        });
+        return row;
+    });
+
+    return { botHeaders, botColumns, rows };
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import CustomButton from './CustomButton'`
	`2`	`+`
	`3`	`+export default CustomButton;`