- Add Additional tags (prettier also fixed some double spaced imports)

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/header/header.component.jsx

@@ -278,10 +278,12 @@ function Header({
     {
       key: "home",
       icon: <HomeFilled />,
+      id: "header-home",
       label: <Link to="/manage/">{t("menus.header.home")}</Link>
     },
     {
       key: "schedule",
+      id: "header-schedule",
       icon: <Icon component={FaCalendarAlt} />,
       label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
     },
@@ -293,16 +295,19 @@ function Header({
       children: [
         {
           key: "activejobs",
+          id: "header-active-jobs",
           icon: <FileFilled />,
           label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
         },
         {
           key: "readyjobs",
+          id: "header-ready-jobs",
           icon: <CheckCircleOutlined />,
           label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
         },
         {
           key: "parts-queue",
+          id: "header-parts-queue",
           icon: <ToolFilled />,
           label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
         },
@@ -314,6 +319,7 @@ function Header({
         },
         {
           key: "newjob",
+          id: "header-new-job",
           icon: <FileAddOutlined />,
           label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
         },
@@ -322,6 +328,7 @@ function Header({
         },
         {
           key: "alljobs",
+          id: "header-all-jobs",
           icon: <UnorderedListOutlined />,
           label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
         },
@@ -330,6 +337,7 @@ function Header({
         },
         {
           key: "productionlist",
+          id: "header-production-list",
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
@@ -341,6 +349,7 @@ function Header({
           ? [
               {
                 key: "productionboard",
+                id: "header-production-board",
                 icon: <Icon component={BsKanban} />,
                 label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
               }
@@ -358,6 +367,7 @@ function Header({
               },
               {
                 key: "scoreboard",
+                id: "header-scoreboard",
                 icon: <LineChartOutlined />,
                 label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
               }
@@ -368,15 +378,18 @@ function Header({
     {
       key: "customers",
       icon: <UserOutlined />,
+      id: "header-customers",
       label: t("menus.header.customers"),
       children: [
         {
           key: "owners",
+          id: "header-owners",
           icon: <TeamOutlined />,
           label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
         },
         {
           key: "vehicles",
+          id: "header-vehicles",
           icon: <CarFilled />,
           label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
         }
@@ -390,21 +403,25 @@ function Header({
       ? [
           {
             key: "ccs",
+            id: "header-css",
             icon: <CarFilled />,
             label: t("menus.header.courtesycars"),
             children: [
               {
                 key: "courtesycarsall",
+                id: "header-courtesycars-all",
                 icon: <CarFilled />,
                 label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
               },
               {
                 key: "contracts",
+                id: "header-contracts",
                 icon: <FileFilled />,
                 label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
               },
               {
                 key: "newcontract",
+                id: "header-newcontract",
                 icon: <FileAddFilled />,
                 label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
               }
@@ -417,6 +434,7 @@ function Header({
       ? [
           {
             key: "accounting",
+            id: "header-accounting",
             icon: <DollarCircleFilled />,
             label: t("menus.header.accounting"),
             children: accountingChildren
@@ -425,6 +443,7 @@ function Header({
       : []),
     {
       key: "phonebook",
+      id: "header-phonebook",
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
@@ -436,6 +455,7 @@ function Header({
       ? [
           {
             key: "temporarydocs",
+            id: "header-temporarydocs",
             icon: <PaperClipOutlined />,
             label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
           }
@@ -443,21 +463,25 @@ function Header({
       : []),
     {
       key: "shopsubmenu",
+      id: "header-shopsubmenu",
       icon: <SettingOutlined />,
       label: t("menus.header.shop"),
       children: [
         {
           key: "shop",
+          id: "header-shop",
           icon: <Icon component={GiSettingsKnobs} />,
           label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
         },
         {
           key: "dashboard",
+          id: "header-dashboard",
           icon: <DashboardFilled />,
           label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
         },
         {
           key: "reportcenter",
+          id: "header-reportcenter",
           icon: <BarChartOutlined />,
           label: t("menus.header.reportcenter"),
           onClick: () => {
@@ -469,6 +493,7 @@ function Header({
         },
         {
           key: "shop-vendors",
+          id: "header-shop-vendors",
           icon: <Icon component={IoBusinessOutline} />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
@@ -480,6 +505,7 @@ function Header({
           ? [
               {
                 key: "shop-csi",
+                id: "header-shop-csi",
                 icon: <Icon component={RiSurveyLine} />,
                 label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
               }
@@ -493,6 +519,7 @@ function Header({
       children: [
         {
           key: "signout",
+          id: "header-signout",
           icon: <Icon component={FiLogOut} />,
           danger: true,
           label: t("user.actions.signout"),
@@ -500,6 +527,7 @@ function Header({
         },
         {
           key: "help",
+          id: "header-help",
           icon: <Icon component={QuestionCircleFilled} />,
           label: t("menus.header.help"),
           onClick: () => {
@@ -531,6 +559,7 @@ function Header({
           ? [
               {
                 key: "shiftclock",
+                id: "header-shiftclock",
                 icon: <Icon component={GiPlayerTime} />,
                 label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
               }
@@ -538,6 +567,7 @@ function Header({
           : []),
         {
           key: "profile",
+          id: "header-profile",
           icon: <UserOutlined />,
           label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
         }
@@ -573,6 +603,7 @@ function Header({
     {
       key: "recent",
       icon: <ClockCircleFilled />,
+      id: "header-recent",
       children: recentItems.map((i, idx) => ({
         key: idx,
         label: <Link to={i.url}>{i.label}</Link>
@@ -586,6 +617,7 @@ function Header({
     imex: () => {
       menuItems.push({
         key: "beta-switch",
+        id: "header-beta-switch",
         style: { marginLeft: "auto" },
         label: (
           <Tooltip

client/src/components/shop-info/shop-info.component.jsx

@@ -1,25 +1,25 @@
-import {  useSplitTreatments  } from '@splitsoftware/splitio-react';
-import {  Button, Card, Tabs  } from 'antd';
-import React from 'react';
-import {  useTranslation  } from 'react-i18next';
-import {  connect  } from 'react-redux';
-import {  createStructuredSelector  } from 'reselect';
-import {  selectBodyshop  } from '../../redux/user/user.selectors';
-import ShopInfoGeneral from './shop-info.general.component';
-import ShopInfoIntakeChecklistComponent from './shop-info.intake.component';
-import ShopInfoLaborRates from './shop-info.laborrates.component';
-import ShopInfoOrderStatusComponent from './shop-info.orderstatus.component';
-import ShopInfoPartsScan from './shop-info.parts-scan';
-import ShopInfoRbacComponent from './shop-info.rbac.component';
-import ShopInfoResponsibilityCenterComponent from './shop-info.responsibilitycenters.component';
-import ShopInfoROStatusComponent from './shop-info.rostatus.component';
-import ShopInfoSchedulingComponent from './shop-info.scheduling.component';
-import ShopInfoSpeedPrint from './shop-info.speedprint.component';
-import {  useLocation, useNavigate  } from 'react-router-dom';
-import ShopInfoTaskPresets from './shop-info.task-presets.component';
-import queryString from 'query-string';
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
-import ShopInfoRoGuard from './shop-info.roguard.component';
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Tabs } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ShopInfoGeneral from "./shop-info.general.component";
+import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
+import ShopInfoLaborRates from "./shop-info.laborrates.component";
+import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
+import ShopInfoPartsScan from "./shop-info.parts-scan";
+import ShopInfoRbacComponent from "./shop-info.rbac.component";
+import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
+import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
+import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
+import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import { useLocation, useNavigate } from "react-router-dom";
+import ShopInfoTaskPresets from "./shop-info.task-presets.component";
+import queryString from "query-string";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import ShopInfoRoGuard from "./shop-info.roguard.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -47,44 +47,52 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "general",
       label: t("bodyshop.labels.shopinfo"),
-      children: <ShopInfoGeneral form={form} />
+      children: <ShopInfoGeneral form={form} />,
+      id: "tab-shop-general"
     },
     {
       key: "speedprint",
       label: t("bodyshop.labels.speedprint"),
-      children: <ShopInfoSpeedPrint form={form} />
+      children: <ShopInfoSpeedPrint form={form} />,
+      id: "tab-shop-speedprint"
     },
     {
       key: "rbac",
       label: t("bodyshop.labels.rbac"),
-      children: <ShopInfoRbacComponent form={form} />
+      children: <ShopInfoRbacComponent form={form} />,
+      id: "tab-shop-rbac"
     },
     {
       key: "roStatus",
       label: t("bodyshop.labels.jobstatuses"),
-      children: <ShopInfoROStatusComponent form={form} />
+      children: <ShopInfoROStatusComponent form={form} />,
+      id: "tab-shop-rostatus"
     },
     {
       key: "scheduling",
       label: t("bodyshop.labels.scheduling"),
-      children: <ShopInfoSchedulingComponent form={form} />
+      children: <ShopInfoSchedulingComponent form={form} />,
+      id: "tab-shop-scheduling"
     },
     {
       key: "orderStatus",
       label: t("bodyshop.labels.orderstatuses"),
-      children: <ShopInfoOrderStatusComponent form={form} />
+      children: <ShopInfoOrderStatusComponent form={form} />,
+      id: "tab-shop-orderstatus"
     },
     {
       key: "responsibilityCenters",
       label: t("bodyshop.labels.responsibilitycenters.title"),
-      children: <ShopInfoResponsibilityCenterComponent form={form} />
+      children: <ShopInfoResponsibilityCenterComponent form={form} />,
+      id: "tab-shop-responsibilitycenters"
     },
     ...InstanceRenderManager({
       imex: [
         {
           key: "checklists",
           label: t("bodyshop.labels.checklists"),
-          children: <ShopInfoIntakeChecklistComponent form={form} />
+          children: <ShopInfoIntakeChecklistComponent form={form} />,
+          id: "tab-shop-checklists"
         }
       ],
       rome: "USE_IMEX",
@@ -93,14 +101,16 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),
-      children: <ShopInfoLaborRates form={form} />
+      children: <ShopInfoLaborRates form={form} />,
+      id: "tab-shop-laborrates"
     },
     ...(CriticalPartsScanning.treatment === "on"
       ? [
           {
             key: "partsscan",
             label: t("bodyshop.labels.partsscan"),
-            children: <ShopInfoPartsScan form={form} />
+            children: <ShopInfoPartsScan form={form} />,
+            id: "tab-shop-partsscan"
           }
         ]
       : []),
@@ -109,21 +119,23 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
           {
             key: "task-presets",
             label: t("bodyshop.labels.task-presets"),
-            children: <ShopInfoTaskPresets form={form} />
+            children: <ShopInfoTaskPresets form={form} />,
+            id: "tab-shop-task-presets"
           }
         ]
       : []),
-      ...InstanceRenderManager({
-        imex: [
-          {
-            key: 'roguard',
-            label: t('bodyshop.labels.roguard.title'),
-            children: <ShopInfoRoGuard form={form} />,
-          },
-        ],
-        rome: 'USE_IMEX',
-        promanager: [],
-      }),
+    ...InstanceRenderManager({
+      imex: [
+        {
+          key: "roguard",
+          label: t("bodyshop.labels.roguard.title"),
+          children: <ShopInfoRoGuard form={form} />,
+          id: "tab-shop-roguard"
+        }
+      ],
+      rome: "USE_IMEX",
+      promanager: []
+    })
   ];
   return (
     <Card

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -20,18 +20,21 @@ export default function JobsCreateComponent({ form }) {
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
+      id: "step-job-vehicleinfo",
       content: <JobsCreateVehicleInfoContainer form={form} />,
       validation: !!state.vehicle.new || !!state.vehicle.selectedid || !!state.vehicle.none,
       error: t("vehicles.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
+      id: "step-job-ownerinfo",
       content: <JobsCreateOwnerInfoContainer />,
       validation: !!state.owner.new || !!state.owner.selectedid,
       error: t("owners.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.jobinfo"),
+      id: "step-job-jobinfo",
       content: <JobsCreateJobsInfo form={form} selected={pageIndex === 2} />
     }
   ];