added note section along with test support

client/package.json

@@ -46,14 +46,21 @@
   },
   "scripts": {
     "start": "vite --force",
-    "build": "vite build"
+    "build": "vite build",
+    "test": "jest"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
     "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
     "@vitejs/plugin-react": "^4.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.2.5",
     "vite": "^5.2.11",
     "vite-plugin-node-polyfills": "^0.22.0",
@@ -64,5 +71,8 @@
   },
   "prettier": {
     "semi": false
+  },
+  "jest":{
+    "testEnvironment": "jsdom"
   }
 }

client/src/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
+

client/src/Localization/translation-en-EN.js

@@ -61,6 +61,9 @@ const translationEnEN = {
   "image_tags": "Image Tags",
   "image_tags_classification_placeholder": "Image Classification",
   "loading": "Loading...",
+  "note": "Note",
+  "here": "here",
+  "more_info": "More information can be found in our documentation",
 };
 
 export default translationEnEN;

client/src/NoteSection/NoteSection.test.js

@@ -0,0 +1,29 @@
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NoteSection from './index';
+import { Info } from '@mui/icons-material';
+
+// Mock the useTranslation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: key => key }),
+}));
+
+describe('NoteSection', () => {
+  test('renders correctly with given props', () => {
+    const text = 'More information can be found in our documentation';
+    const link = 'https://example.com/documentation';
+
+    render(<NoteSection icon={Info} text={text} link={link} />);
+
+    // Check if the icon is rendered
+    expect(screen.getByTestId('NoteSection-icon')).toBeInTheDocument();
+
+    // Check if the text is rendered
+    expect(screen.getByText(text)).toBeInTheDocument();
+
+    // Check if the link is rendered
+    expect(screen.getByRole('link', { name: /here/i })).toHaveAttribute('href', link);
+  });
+});

client/src/NoteSection/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card, CardContent, Typography, Grid, Avatar, Link } from '@mui/material';
+import { useTranslation } from "react-i18next"
+
+const NoteSection = ({ icon: Icon, text, link }) => {
+const {t} = useTranslation();
+
+return (
+    <Card sx={{ margin: 'auto', mt: 5 }}>
+      <CardContent>
+        <Grid container spacing={2} alignItems="center">
+          <Grid item>
+            <Avatar sx={{ bgcolor: 'primary.main' }} data-testid="NoteSection-icon">
+              <Icon />
+            </Avatar>
+          </Grid>
+          <Grid item>
+            <Typography variant="h6">{t("info")}</Typography>
+            <Typography variant="body1">
+              {text}{' '}
+              {link && (
+                <Link href={link} target="_blank" rel="noopener noreferrer">
+                  {t("here")}
+                </Link>
+              )}
+            </Typography>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NoteSection;

client/src/SetupPage/index.jsx

@@ -17,6 +17,8 @@ import ConfigurationTask from "../ConfigurationTask";
 import ImageUpload from "../ImageUpload";
 import { useSettings } from "../SettingsProvider";
 import { useTranslation } from "react-i18next"
+import { Info } from '@mui/icons-material';
+import NoteSection from "../NoteSection";
 
 const Container = styled("div")({
   marginTop: "2rem",
@@ -105,7 +107,12 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
             {currentTab === "datatype" && (
                <Box minWidth="35vw" paddingTop={"2rem"}>
                   <ConfigurationTask config={settings} onChange={updateTaskInfo} />
-                  <Box display="flex"  justifyContent="end">
+                  <NoteSection 
+                  icon={Info} 
+                  text={t("more_info")} 
+                  link="https://annotate-docs.dwaste.live" 
+                />
+                  <Box display="flex" paddingTop="5rem" justifyContent="end">
                         <Button variant="contained" disabled={settings.taskDescription.trim().length <= 0} onClick={() => setTab("configure")} disableElevation>
                             {t("btn.next")}
                         </Button>