Issue35: add mail button

src/app/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
 import { styles } from "./Header.style";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Link } from "@mui/material";
 import Table from "@/app/components/Table";
 import Dialog from "@/app/components/Dialog";
 import CustomButton from "@/app/components/CustomButton";
@@ -13,18 +13,21 @@
 import { strOrNum } from "@/app/general/types";
 import {
     SAMPLE_SIZE,
-    ATTRIBUTES_BUTTON_TEXT,
-    SAMPLE_BUTTON_TEXT,
+    HEADER_BUTTONS_TEXTS,
     NO_HELP_DESCRIPTION,
+    NO_MAIL_PROVIDED,
+    HEADER_DIALOGS_TITLES,
 } 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 [openMail, setOpenMail] = useState<boolean>(false);
 
     const helpDescription = bot?._details.helpDescription;
+    const mailInfo = bot?._details.mailInfo;
     const { botHeaders, botColumns, rows } = getTableInfo(bot);
     const sampleRows = rows.slice(0, SAMPLE_SIZE);
 
@@ -34,16 +37,20 @@
     }));
 
     const buttons = [
-        { onClick: () => setOpenAttribute(true), text: ATTRIBUTES_BUTTON_TEXT },
-        { onClick: () => setOpenData(true), text: SAMPLE_BUTTON_TEXT },
-        { onClick: () => setOpenHelp(true), text: "Help!" },
+        {
+            onClick: () => setOpenAttribute(true),
+            text: HEADER_BUTTONS_TEXTS.attributes,
+        },
+        { onClick: () => setOpenData(true), text: HEADER_BUTTONS_TEXTS.data },
+        { onClick: () => setOpenHelp(true), text: HEADER_BUTTONS_TEXTS.help },
+        { onClick: () => setOpenMail(true), text: HEADER_BUTTONS_TEXTS.mail },
     ];
 
     const dialogs = [
         {
             open: openAttribute,
             setOpen: setOpenAttribute,
-            title: "Details of Attributes",
+            title: HEADER_DIALOGS_TITLES.attributes,
             children: (
                 <Table<NameAndDescription>
                     headers={["name", "description"]}
@@ -54,7 +61,7 @@
         {
             open: openData,
             setOpen: setOpenData,
-            title: "Sample of Data",
+            title: HEADER_DIALOGS_TITLES.data,
             children: (
                 <Table<generalObject<strOrNum>>
                     headers={botHeaders}
@@ -65,9 +72,19 @@
         {
             open: openHelp,
             setOpen: setOpenHelp,
-            title: "Help!",
+            title: HEADER_DIALOGS_TITLES.help,
             content: helpDescription ?? NO_HELP_DESCRIPTION,
         },
+        {
+            open: openMail,
+            setOpen: setOpenMail,
+            title: HEADER_DIALOGS_TITLES.mail,
+            children: (
+                <Link href={`mailto:${mailInfo}`}>
+                    {mailInfo ?? NO_MAIL_PROVIDED}
+                </Link>
+            ),
+        },
     ];
 
     return (

src/app/general/constants.ts

@@ -1,7 +1,20 @@
 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 NO_HELP_DESCRIPTION = "No help description available";
+export const NO_MAIL_PROVIDED = "No mail provided for comments";
 export const DOWNLOAD_RESULTS = "Download Results";
 export const SEND = "Send";
+
+export const HEADER_BUTTONS_TEXTS = {
+    attributes: "Display Attributes",
+    data: "Display Data Sample",
+    help: "Help!",
+    mail: "Leave us a comment",
+};
+export const HEADER_DIALOGS_TITLES = {
+    attributes: "Details of Attributes",
+    data: "Sample of Data",
+    help: "Help!",
+    mail: "Leave us a comment",
+};
+