Add e2e jobs for Chrome and firefox browsers

.github/workflows/frontend-e2e-tests.yml

@@ -0,0 +1,41 @@
+name: OpenELis Frontend QA framework workflow
+on:
+  push:
+    branches:
+      - develop_3x
+  workflow_dispatch:
+jobs:
+  e2e:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout OpenELIS-Global2
+        uses: actions/checkout@v2
+        with:
+         repository: ${{github.repository}} 
+
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "14"
+
+      - name: Install Dependencies
+        run: npm i
+        working-directory: frontend
+
+      - name: Run Cypress
+        uses: cypress-io/[email protected]
+        with:
+          start: npm run start
+
+      - name: E2E on Chrome
+        uses: actions/checkout@v4
+      - uses: cypress-io/[email protected]
+        with:
+          browser: chrome    
+
+      - name: E2E on Firefox
+        uses: actions/checkout@v4
+      - uses: cypress-io/github-action@v6
+        with:
+          browser: firefox

frontend/src/components/admin/Admin.js

@@ -34,6 +34,7 @@ import {
   SideNavMenu,
   SideNavMenuItem,
 } from "@carbon/react";
+import GenericHomeBreadCrumb from "../common/GenericBreadCrumb";
 import { CommonProperties } from "./menu/CommonProperties";
 import ConfigMenuDisplay from "./formEntry/common/ConfigMenuDisplay";
 import ProviderMenu from "./ProviderMenu/ProviderMenu";
@@ -63,6 +64,7 @@ function Admin() {
         defaultExpanded={true}
         isRail={isSmallScreen}
       >
+        <GenericHomeBreadCrumb/>
         <SideNavItems className="adminSideNav">
           <SideNavMenu
             renderIcon={Microscope}

frontend/src/components/common/GenericBreadCrumb.js

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Column,
+  } from "@carbon/react";
+  import { useIntl } from "react-intl";
+  import { Link, useLocation } from 'react-router-dom';
+
+  const GenericHomeBreadCrumb = () => {
+    const intl = useIntl();
+
+
+const Breadcrumbs = ({ title, breadcrumbs }) => {
+  return (
+    <Grid fullWidth={true}>
+    <Column lg={16}>
+      <Breadcrumb>
+        <BreadcrumbItem href="/">
+
+        {breadcrumbs.map((crumb, index) => (
+        <span key={index}>
+          {index < breadcrumbs.length - 1 ? (
+            <Link to={crumb.link}>{crumb.label}</Link>
+          ) : (
+            <span>{crumb.label}</span>
+          )}
+          {index < breadcrumbs.length - 1 && '>'}
+        </span>
+      ))}
+
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </Column>
+   </Grid>
+  );
+};
+
+const breadcrumbData = [
+  { path: '/', title: intl.formatMessage({ id: "home.label" }) },
+  { path: '/ResultValidation', title: intl.formatMessage({ id: "sidenav.label.validation" }) }
+  // { path: '/validation/:productId', title: ({ match }) => `Product: ${match.params.productId}` },
+
+];
+
+const location = useLocation();
+const currentPath = location.pathname;
+const currentData = breadcrumbData[currentPath];
+
+
+    return(
+      <>
+      {currentData && <Breadcrumbs {...currentData} />}
+       <Grid fullWidth={true}>
+        <Column lg={16}>
+          <Breadcrumb>
+            <BreadcrumbItem href="/">
+              {intl.formatMessage({ id: "home.label" })}
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </Column>
+       </Grid>
+      </>
+    );
+  };
+
+  export default GenericHomeBreadCrumb;

frontend/src/components/validation/Index.js

@@ -21,6 +21,7 @@ const Index = () => {
           <Section>
             <Section>
               <Heading>
+                <GenericHomeBreadCrumb/>
                 <FormattedMessage id="sidenav.label.validation" />
               </Heading>
             </Section>