Remainder of menu refactoring updates.

client/src/components/chat-presets/chat-presets.component.jsx

@@ -1,5 +1,5 @@
 import { PlusCircleOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/contracts-rates-change-button/contracts-rates-change-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -3,21 +3,19 @@ import {
   Button,
   Card,
   Dropdown,
-  Input,
+  Input, Space,
-  Menu,
-  Space,
   Table,
-  Tooltip,
+  Tooltip
 } from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
-import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-import moment from "moment";
 import { GenerateDocument } from "../../utils/RenderTemplate";
+import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -6,12 +6,10 @@ import {
   Dropdown,
   Form,
   Input,
-  InputNumber,
+  InputNumber, Select,
-  Menu,
-  Select,
   Space,
   Statistic,
-  Typography,
+  Typography
 } from "antd";
 import Dinero from "dinero.js";
 import moment from "moment";

client/src/components/job-at-change/job-at-change.component.jsx

@@ -1,11 +1,11 @@
-import React from "react";
+import { DownOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { Dropdown, notification } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
-import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/job-at-change/schedule-event.color.component.jsx

@@ -1,11 +1,11 @@
-import React from "react";
+import { DownOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
+import { Dropdown, notification } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
-import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/job-at-change/schedule-event.component.jsx

@@ -2,11 +2,9 @@ import { AlertFilled } from "@ant-design/icons";
 import {
   Button,
   Divider,
-  Dropdown,
+  Dropdown, notification,
-  Menu,
-  notification,
   Popover,
-  Space,
+  Space
 } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import moment from "moment";
@@ -18,7 +16,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   openChatByPhone,
-  setMessage,
+  setMessage
 } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -27,11 +25,11 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,24 +1,15 @@
 import {
   DeleteFilled,
+  EditFilled,
   FilterFilled,
+  HomeOutlined,
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
   SyncOutlined,
   WarningFilled,
-  EditFilled,
-  PlusCircleTwoTone,
-  MinusCircleTwoTone,
-  HomeOutlined,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import {
+import { Button, Dropdown, Input, PageHeader, Space, Table, Tag } from "antd";
-  Button,
-  Dropdown,
-  Input,
-  Menu,
-  PageHeader,
-  Space,
-  Table,
-  Tag,
-} from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,13 +29,13 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 // import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
 // import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
-import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import _ from "lodash";
-import JobCreateIOU from "../job-create-iou/job-create-iou.component";
-import JobLinesExpander from "./job-lines-expander.component";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import moment from "moment";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobCreateIOU from "../job-create-iou/job-create-iou.component";
 import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
+import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import JobLinesExpander from "./job-lines-expander.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/components/job-lines-preset-button/job-lines-preset-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, Menu, notification } from "antd";
+import { Button, Dropdown, notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, Menu, notification } from "antd";
+import { Button, Dropdown, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/jobs-detail-change-estimator/jobs-detail-change-estimator.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
+import { Button, Dropdown, notification, Popconfirm } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -13,7 +13,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { setModalContext } from "../../redux/modals/modals.actions";
 import {
   selectBodyshop,
-  selectCurrentUser,
+  selectCurrentUser
 } from "../../redux/user/user.selectors";
 import JobsDetailHeaderActionsAddevent from "./jobs-detail-header-actions.addevent";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";

client/src/components/jobs-detail-rates-change-button/jobs-detail-rates-change-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -18,20 +18,16 @@ export function JobsDetailRatesChangeButton({ disabled, form, bodyshop }) {
     form.setFieldsValue({ ...rate, labor_rate_desc: rate.rate_label });
   };
 
-  const menu = (
+  const menu = {
-    <div>
+    onClick: handleClick,
-      <Menu onClick={handleClick}>
+    items: bodyshop.md_labor_rates.map((rate, idx) => ({
-        {bodyshop.md_labor_rates.map((rate, idx) => (
+      key: idx,
-          <Menu.Item value={rate} key={idx}>
+      value: rate,
-            {rate.rate_label}
+      label: rate.rate_label,
-          </Menu.Item>
+    })),
-        ))}
+  };
-      </Menu>
-    </div>
-  );
-
   return (
-    <Dropdown overlay={menu} disabled={disabled}>
+    <Dropdown menu={menu} disabled={disabled}>
       <a
         className="ant-dropdown-link"
         href=" #"

client/src/components/notes-preset-button/notes-preset-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -21,27 +21,21 @@ export function NotesPresetButton({ bodyshop, form }) {
     form.setFieldsValue({ text: item.text });
   };
 
-  const menu = (
+  const menu = {
-    <Menu
+    style: {
-      style={{
+      columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
-        columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
+    },
-      }}
+    items: bodyshop.md_notes_presets.map((i, idx) => ({
-    >
+      key: idx,
-      {bodyshop.md_notes_presets.map((i, idx) => (
+      style: { breakInside: "avoid" },
-        <Menu.Item
+      onClick: () => handleSelect(i),
-          onClick={() => handleSelect(i)}
+      label: i.label,
-          key={idx}
+    })),
-          style={{ breakInside: "avoid" }}
+  };
-        >
-          {i.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
 
   return (
     <div>
-      <Dropdown trigger={["click"]} overlay={menu}>
+      <Dropdown trigger={["click"]} menu={menu}>
         <a
           className="ant-dropdown-link"
           href="# "

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,17 +1,11 @@
-import { DeleteFilled, WarningFilled, DownOutlined } from "@ant-design/icons";
+import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
-  Divider,
+  Checkbox, Divider, Dropdown, Form,
-  Form,
   Input,
   InputNumber,
-  Radio,
+  Radio, Select, Space,
-  Space,
+  Tag
-  Tag,
-  Select,
-  Menu,
-  Dropdown,
-  Checkbox,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -61,17 +55,14 @@ export function PartsOrderModalComponent({
     form.setFieldsValue({ comments: item.props.value });
   };
 
-  const menu = (
+  const menu = {
-    <div>
+    onClick: handleClick,
-      <Menu onClick={handleClick}>
+    items: bodyshop.md_parts_order_comment.map((comment, idx) => ({
-        {bodyshop.md_parts_order_comment.map((comment, idx) => (
+      key: idx,
-          <Menu.Item value={comment.comment} key={idx}>
+      value: comment.comment,
-            {comment.label}
+      label: comment.label,
-          </Menu.Item>
+    })),
-        ))}
+  };
-      </Menu>
-    </div>
-  );
 
   return (
     <div>
@@ -308,7 +299,7 @@ export function PartsOrderModalComponent({
         label={
           <Space>
             {t("parts_orders.fields.comments")}
-            <Dropdown overlay={menu}>
+            <Dropdown menu={menu}>
               <a
                 className="ant-dropdown-link"
                 href=" #"

client/src/components/production-list-columns/production-list-columns.add.component.jsx

@@ -1,7 +1,7 @@
+import { Button, Dropdown } from "antd";
 import React from "react";
-import { Button, Dropdown, Menu } from "antd";
-import dataSource from "./production-list-columns.data";
 import { useTranslation } from "react-i18next";
+import dataSource from "./production-list-columns.data";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -47,37 +47,24 @@ export function ProductionColumnsComponent({
     state: tableState,
     activeStatuses: bodyshop.md_ro_statuses.active_statuses,
   });
-  const menu = (
+  const menu = {
-    <Menu
+    style: {
-      onClick={handleAdd}
+      columnCount: Math.max(Math.floor(cols.length / 10), 1),
-      style={{
+    },
-        columnCount: Math.max(Math.floor(cols.length / 10), 1),
+    onClick: handleAdd,
-      }}
+    items: cols
-    >
+      .filter((i) => !columnKeys.includes(i.key))
-      {cols
+      .map((item) => ({
-        .filter((i) => !columnKeys.includes(i.key))
+        key: item.key,
-        .map((item) => (
+        style: { breakInside: "avoid" },
-          <Menu.Item key={item.key} style={{ breakInside: "avoid" }}>
+        label: item.title,
-            {item.title}
+      })),
-          </Menu.Item>
+  };
-        ))}
-    </Menu>
-  );
   return (
     <div>
-      <Dropdown overlay={menu}>
+      <Dropdown menu={menu}>
         <Button>{t("production.actions.addcolumns")}</Button>
       </Dropdown>
     </div>
   );
 }
-
-// <Transfer
-// dataSource={dataSource}
-// titles={["Source", "Target"]}
-// targetKeys={columns.map((c) => c.key)}
-// render={(item) => item.title}
-// onChange={(nextTargetKeys, direction, moveKeys) => {
-//   setColumns(dataSource.filter((i) => nextTargetKeys.includes(i.key)));
-// }}
-// />

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -1,10 +1,10 @@
 import { ExclamationCircleFilled } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { useMutation } from "@apollo/client";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@apollo/client";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 
 export default function ProductionListColumnAlert({ record }) {
   const { t } = useTranslation();
@@ -34,15 +34,18 @@ export default function ProductionListColumnAlert({ record }) {
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu>
+        items: [
-          <Menu.Item key="toggleAlert" onClick={handleAlertToggle}>
+          {
-            {record.production_vars && record.production_vars.alert
+            key: "toggleAlert",
-              ? t("production.labels.alertoff")
+            onClick: handleAlertToggle,
-              : t("production.labels.alerton")}
+            label:
-          </Menu.Item>
+              record.production_vars && record.production_vars.alert
-        </Menu>
+                ? t("production.labels.alertoff")
-      }
+                : t("production.labels.alerton"),
+          },
+        ],
+      }}
       trigger={["contextMenu"]}
     >
       <div

client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx

@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 
 export default function ProductionListColumnBodyPriority({ record }) {
   const { t } = useTranslation();
@@ -31,25 +31,27 @@ export default function ProductionListColumnBodyPriority({ record }) {
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu onClick={handleSetBodyPriority}>
+        onClick: handleSetBodyPriority,
-          <Menu.Item key="clearBodyPriority">
+        items: [
-            {t("production.actions.bodypriority-clear")}
+          {
-          </Menu.Item>
+            key: "clearBodyPriority",
-          <Menu.SubMenu
+            label: t("production.actions.bodypriority-clear"),
-            key="set"
+          },
-            title={t("production.actions.bodypriority-set")}
+          {
-          >
+            key: "set",
-            {new Array(15).fill().map((value, index) => (
+            label: t("production.actions.bodypriority-set"),
-              <Menu.Item key={index + 1}>
+            children: new Array(15).fill().map((value, index) => ({
+              key: index + 1,
+              label: (
                 <div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
                   {index + 1}
                 </div>
-              </Menu.Item>
+              ),
-            ))}
+            })),
-          </Menu.SubMenu>
+          },
-        </Menu>
+        ],
-      }
+      }}
       trigger={["click"]}
     >
       <div style={{ width: "100%", height: "19px" }}>

client/src/components/production-list-columns/production-list-columns.detailpriority.component.jsx

@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 
 export default function ProductionListColumnDetailPriority({ record }) {
   const { t } = useTranslation();
@@ -31,25 +31,27 @@ export default function ProductionListColumnDetailPriority({ record }) {
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu onClick={handleSetDetailPriority}>
+        onClick: handleSetDetailPriority,
-          <Menu.Item key="clearDetailPriority">
+        items: [
-            {t("production.actions.detailpriority-clear")}
+          {
-          </Menu.Item>
+            key: "clearDetailPriority",
-          <Menu.SubMenu
+            label: t("production.actions.detailpriority-clear"),
-            key="set"
+          },
-            title={t("production.actions.detailpriority-set")}
+          {
-          >
+            key: "set",
-            {new Array(15).fill().map((value, index) => (
+            label: t("production.actions.detailpriority-set"),
-              <Menu.Item key={index + 1}>
+            children: new Array(15).fill().map((value, index) => ({
+              key: index + 1,
+              label: (
                 <div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
                   {index + 1}
                 </div>
-              </Menu.Item>
+              ),
-            ))}
+            })),
-          </Menu.SubMenu>
+          },
-        </Menu>
+        ],
-      }
+      }}
       trigger={["click"]}
     >
       <div style={{ width: "100%", height: "19px" }}>

client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx

@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 
 export default function ProductionListColumnPaintPriority({ record }) {
   const { t } = useTranslation();
@@ -31,25 +31,27 @@ export default function ProductionListColumnPaintPriority({ record }) {
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu onClick={handleSetPaintPriority}>
+        onClick: handleSetPaintPriority,
-          <Menu.Item key="clearPaintPriority">
+        items: [
-            {t("production.actions.paintpriority-clear")}
+          {
-          </Menu.Item>
+            key: "clearPaintPriority",
-          <Menu.SubMenu
+            label: t("production.actions.paintpriority-clear"),
-            key="set"
+          },
-            title={t("production.actions.paintpriority-set")}
+          {
-          >
+            key: "set",
-            {new Array(15).fill().map((value, index) => (
+            label: t("production.actions.paintpriority-set"),
-              <Menu.Item key={index + 1}>
+            children: new Array(15).fill().map((value, index) => ({
+              key: index + 1,
+              label: (
                 <div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
                   {index + 1}
                 </div>
-              </Menu.Item>
+              ),
-            ))}
+            })),
-          </Menu.SubMenu>
+          },
-        </Menu>
+        ],
-      }
+      }}
       trigger={["click"]}
     >
       <div style={{ width: "100%", height: "19px" }}>

client/src/components/production-list-columns/production-list-columns.status.category.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu, Spin } from "antd";
+import { Dropdown, Spin } from "antd";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -38,16 +38,14 @@ export function ProductionListColumnCategory({ record, bodyshop }) {
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu
+        style: { maxHeight: "200px", overflowY: "auto" },
-          style={{ maxHeight: "200px", overflowY: "auto" }}
+        onClick: handleSetStatus,
-          onClick={handleSetStatus}
+        items: bodyshop.md_categories.map((item) => ({
-        >
+          key: item,
-          {bodyshop.md_categories.map((item) => (
+          label: item,
-            <Menu.Item key={item}>{item}</Menu.Item>
+        })),
-          ))}
+      }}
-        </Menu>
-      }
       trigger={["click"]}
     >
       <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>

client/src/components/production-list-columns/production-list-columns.status.component.jsx

@@ -1,12 +1,12 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu, Spin } from "antd";
+import { Dropdown, Spin } from "antd";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 
 const mapStateToProps = createStructuredSelector({
@@ -47,16 +47,14 @@ export function ProductionListColumnStatus({
 
   return (
     <Dropdown
-      overlay={
+      menu={{
-        <Menu
+        style: { maxHeight: "200px", overflowY: "auto" },
-          style={{ maxHeight: "200px", overflowY: "auto" }}
+        onClick: handleSetStatus,
-          onClick={handleSetStatus}
+        items: bodyshop.md_ro_statuses.production_statuses.map((item) => ({
-        >
+          key: item,
-          {bodyshop.md_ro_statuses.production_statuses.map((item) => (
+          label: item,
-            <Menu.Item key={item}>{item}</Menu.Item>
+        })),
-          ))}
+      }}
-        </Menu>
-      }
       trigger={["click"]}
     >
       <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>

client/src/components/production-list-table/production-list-print.component.jsx

@@ -1,8 +1,8 @@
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown } from "antd";
 import React, { useState } from "react";
-import { TemplateList } from "../../utils/TemplateConstants";
 import { useTranslation } from "react-i18next";
 import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -31,98 +31,86 @@ export function ProductionListPrint({ bodyshop }) {
   return (
     <Dropdown
       trigger="click"
-      overlay={
+      menu={{
-        <Menu>
+        items: [
-          {Object.keys(ProdTemplates).map((key) => (
+          ...Object.keys(ProdTemplates).map((key) => ({
-            <Menu.Item
+            key: key,
-              key={key}
+            onClick: async () => {
-              onClick={async () => {
+              setLoading(true);
+              await GenerateDocument(
+                {
+                  name: ProdTemplates[key].key,
+                  // variables: { id: contract.id },
+                },
+                {},
+                "p"
+              );
+              setLoading(false);
+            },
+            label: ProdTemplates[key].title,
+          })),
+          {
+            key: "prodbyonetech",
+            label: t("reportcenter.templates.production_by_technician_one"),
+            children: bodyshop.employees.map((e) => ({
+              key: e.id,
+              onClick: async () => {
                 setLoading(true);
                 await GenerateDocument(
                   {
-                    name: ProdTemplates[key].key,
+                    name: production_by_technician_one.key,
-                    // variables: { id: contract.id },
+                    variables: { id: e.id },
                   },
                   {},
                   "p"
                 );
                 setLoading(false);
-              }}
+              },
-            >
+              label: `${e.first_name || ""} ${e.last_name || ""}`.trim(),
-              {ProdTemplates[key].title}
+            })),
-            </Menu.Item>
+          },
-          ))}
+          {
-          <Menu.SubMenu
+            key: "prodbycategory",
-            title={t("reportcenter.templates.production_by_technician_one")}
+            label: t("reportcenter.templates.production_by_category_one"),
-          >
+            children: bodyshop.md_categories.map((e) => ({
-            {bodyshop.employees.map((e) => (
+              key: e,
-              <Menu.Item
+              onClick: async () => {
-                key={e.id}
+                setLoading(true);
-                onClick={async () => {
+                await GenerateDocument(
-                  setLoading(true);
+                  {
-                  await GenerateDocument(
+                    name: production_by_category_one.key,
-                    {
+                    variables: { category: e },
-                      name: production_by_technician_one.key,
+                  },
-                      variables: { id: e.id },
+                  {},
-                    },
+                  "p"
-                    {},
+                );
-                    "p"
+                setLoading(false);
-                  );
+              },
-                  setLoading(false);
+              label: e,
-                }}
+            })),
-              >
+          },
-                {e.first_name} {e.last_name}
+          {
-              </Menu.Item>
+            key: "prodbyrepairstatus",
-            ))}
+            label: t("reportcenter.templates.production_by_repair_status_one"),
-          </Menu.SubMenu>
+            children: bodyshop.md_ro_statuses.production_statuses.map((e) => ({
-          <Menu.SubMenu
+              key: e,
-            title={t("reportcenter.templates.production_by_category_one")}
+              onClick: async () => {
-          >
+                setLoading(true);
-            {bodyshop.md_categories.map((e) => (
+                await GenerateDocument(
-              <Menu.Item
+                  {
-                key={e}
+                    name: production_by_repair_status_one.key,
-                onClick={async () => {
+                    variables: { status: e },
-                  setLoading(true);
+                  },
-                  await GenerateDocument(
+                  {},
-                    {
+                  "p"
-                      name: production_by_category_one.key,
+                );
-                      variables: { category: e },
+                setLoading(false);
-                    },
+              },
-                    {},
+              label: e,
-                    "p"
+            })),
-                  );
+          },
-                  setLoading(false);
+        ],
-                }}
+      }}
-              >
-                {e}
-              </Menu.Item>
-            ))}
-          </Menu.SubMenu>
-          <Menu.SubMenu
-            title={t("reportcenter.templates.production_by_repair_status_one")}
-          >
-            {bodyshop.md_ro_statuses.production_statuses.map((e) => (
-              <Menu.Item
-                key={e}
-                onClick={async () => {
-                  setLoading(true);
-                  await GenerateDocument(
-                    {
-                      name: production_by_repair_status_one.key,
-                      variables: { status: e },
-                    },
-                    {},
-                    "p"
-                  );
-                  setLoading(false);
-                }}
-              >
-                {e}
-              </Menu.Item>
-            ))}
-          </Menu.SubMenu>
-        </Menu>
-      }
     >
       <Button loading={loading}>{t("general.labels.print")}</Button>
     </Dropdown>

client/src/components/production-list-table/production-list-table.component.jsx

@@ -4,7 +4,6 @@ import {
   Button,
   Dropdown,
   Input,
-  Menu,
   PageHeader,
   Space,
   Statistic,
@@ -121,13 +120,10 @@ export function ProductionListTable({
   const headerItem = (col) => (
     <Dropdown
       className="prod-header-dropdown"
-      overlay={
+      menu={{
-        <Menu onClick={removeColumn}>
+        onClick: removeColumn,
-          <Menu.Item key={col.key}>
+        items: [{ key: col.key, label: t("production.actions.removecolumn") }],
-            {t("production.actions.removecolumn")}
+      }}
-          </Menu.Item>
-        </Menu>
-      }
       trigger={["contextMenu"]}
     >
       <span>{col.title}</span>

client/src/components/schedule-block-day/schedule-block-day.component.jsx

@@ -1,13 +1,13 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_APPOINTMENT_BLOCK } from "../../graphql/appointments.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -55,15 +55,12 @@ export function ScheduleBlockDay({
     }
   };
 
-  const menu = (
-    <Menu onClick={handleMenu}>
-      <Menu.Item key="block">{t("appointments.actions.block")}</Menu.Item>
-    </Menu>
-  );
-
   return (
     <Dropdown
-      overlay={menu}
+      menu={{
+        onClick: handleMenu,
+        items: [{ key: 'block', label: t("appointments.actions.block") }],
+      }}
       disabled={alreadyBlocked}
       trigger={["contextMenu"]}
     >

client/src/components/tech-sider/tech-sider.component.jsx

@@ -30,50 +30,68 @@ export function TechSider({ technician, techLogout }) {
 
   return (
     <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
-      <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
+      <Menu
-        <Menu.Item
+        theme="dark"
-          key="1"
+        defaultSelectedKeys={["1"]}
-          disabled={!!technician}
+        mode="inline"
-          icon={<Icon component={FiLogIn} />}
+        items={[
-        >
+          {
-          <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
+            key: "login",
-        </Menu.Item>
+            disabled: !!technician,
-        <Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
+            icon: <Icon component={FiLogIn} />,
-          <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
+            label: <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>,
-        </Menu.Item>
+          },
-        <Menu.Item
+          {
-          key="3"
+            key: "joblookup",
-          disabled={!!!technician}
+            disabled: !!!technician,
-          icon={<Icon component={FaBusinessTime} />}
+            icon: <SearchOutlined />,
-        >
+            label: (
-          <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
+              <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
-        </Menu.Item>
+            ),
-        <Menu.Item
+          },
-          key="4"
+          {
-          disabled={!!!technician}
+            key: "jobclockin",
-          icon={<Icon component={MdTimer} />}
+            disabled: !!!technician,
-        >
+            icon: <Icon component={FaBusinessTime} />,
-          <Link to={`/tech/shiftclock`}>{t("menus.tech.shiftclockin")}</Link>
+            label: (
-        </Menu.Item>
+              <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
-        <Menu.Item key="5" disabled={!!!technician} icon={<ScheduleOutlined />}>
+            ),
-          <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
+          },
-        </Menu.Item>
+          {
-        <Menu.Item
+            key: "shiftclock",
-          key="6"
+            disabled: !!!technician,
-          disabled={!!!technician}
+            icon: <Icon component={MdTimer} />,
-          icon={<Icon component={BsKanban} />}
+            label: (
-        >
+              <Link to={`/tech/shiftclock`}>
-          <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
+                {t("menus.tech.shiftclockin")}
-        </Menu.Item>
+              </Link>
-        <Menu.Item
+            ),
-          key="7"
+          },
-          disabled={!!!technician}
+          {
-          onClick={() => techLogout()}
+            key: "prodlist",
-          icon={<Icon component={FiLogOut} />}
+            disabled: !!!technician,
-        >
+            icon: <ScheduleOutlined />,
-          {t("menus.tech.logout")}
+            label: (
-        </Menu.Item>
+              <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
-      </Menu>
+            ),
+          },
+          {
+            key: "prodboard",
+            disabled: !!!technician,
+            icon: <Icon component={BsKanban} />,
+            label: (
+              <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
+            ),
+          },
+          {
+            key: "logout",
+            disabled: !!!technician,
+            onClick: () => techLogout(),
+            icon: <Icon component={FiLogOut} />,
+            label: t("menus.tech.logout"),
+          },
+        ]}
+      ></Menu>
     </Sider>
   );
 }

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -3,11 +3,10 @@ import {
   Col,
   Dropdown,
   Form,
-  Menu,
   PageHeader,
   Row,
   Space,
-  Typography,
+  Typography
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -76,10 +75,11 @@ export function ContractDetailPage({
                   </Button>
                   <Dropdown
                     trigger="click"
-                    overlay={
+                    menu={{
-                      <Menu>
+                      items: [
-                        <Menu.Item
+                        {
-                          onClick={() =>
+                          key: "contract",
+                          onClick: () =>
                             GenerateDocument(
                               {
                                 name: TemplateList("courtesycarcontract")
@@ -88,13 +88,15 @@ export function ContractDetailPage({
                               },
                               {},
                               "p"
-                            )
+                            ),
-                          }
+                          label: t("contracts.actions.printcontract"),
-                        >
+                        },
-                          {t("contracts.actions.printcontract")}
+                        {
-                        </Menu.Item>
+                          key: "terms",
-                        <Menu.Item
+                          label: t(
-                          onClick={() =>
+                            "printcenter.courtesycarcontract.courtesy_car_terms"
+                          ),
+                          onClick: () =>
                             GenerateDocument(
                               {
                                 name: TemplateList("courtesycarcontract")
@@ -103,15 +105,14 @@ export function ContractDetailPage({
                               },
                               {},
                               "p"
-                            )
+                            ),
-                          }
+                        },
-                        >
+                        {
-                          {t(
+                          key: "impound",
-                            "printcenter.courtesycarcontract.courtesy_car_terms"
+                          label: t(
-                          )}
+                            "printcenter.courtesycarcontract.courtesy_car_impound"
-                        </Menu.Item>
+                          ),
-                        <Menu.Item
+                          onClick: () =>
-                          onClick={() =>
                             GenerateDocument(
                               {
                                 name: TemplateList("courtesycarcontract")
@@ -120,15 +121,10 @@ export function ContractDetailPage({
                               },
                               {},
                               "p"
-                            )
+                            ),
-                          }
+                        },
-                        >
+                      ],
-                          {t(
+                    }}
-                            "printcenter.courtesycarcontract.courtesy_car_impound"
-                          )}
-                        </Menu.Item>
-                      </Menu>
-                    }
                   >
                     <Button>{t("general.labels.print")}</Button>
                   </Dropdown>

client/src/utils/GraphQLClient.js

@@ -142,7 +142,7 @@ middlewares.push(
 
 const cache = new InMemoryCache({});
 
-export default new ApolloClient({
+const c = new ApolloClient({
   link: ApolloLink.from(middlewares),
   cache,
   connectToDevTools: process.env.NODE_ENV !== "production",
@@ -161,3 +161,5 @@ export default new ApolloClient({
     },
   },
 });
+
+export default c;