Majority of Dropdown Overlay Menu refactors.

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

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";
@@ -16,19 +16,16 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
-  const menuItems = bodyshop.md_messaging_presets.map((i, idx) => ({
+
+  const items = bodyshop.md_messaging_presets.map((i, idx) => ({
     key: idx,
-    label: i.label,
+    label: (i.label),
     onClick: () => setMessage(i.text),
   }));
 
-  const menu = (
-    <Menu items={menuItems} />
-  );
-
   return (
     <div className={className}>
-      <Dropdown trigger={["click"]} menu={menu}>
+      <Dropdown trigger={["click"]} menu={{items}}>
         <PlusCircleOutlined />
       </Dropdown>
     </div>

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

@@ -24,11 +24,8 @@ export function ContractsRatesChangeButton({ disabled, form, bodyshop }) {
     value: i,
   }));
 
-  const menu = (
+  const menu = {items: menuItems, onClick: handleClick}
-    <div>
+
-      <Menu onClick={handleClick} items={menuItems} />
-    </div>
-  );
 
   return (
     <Dropdown menu={menu} disabled={disabled}>

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

@@ -179,7 +179,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       )
     : courtesycars;
 
-  const menuItems = [
+  const items = [
     {
       key: "courtesycar_inventory",
       label: t("printcenter.courtesycarcontract.courtesy_car_inventory"),
@@ -205,11 +205,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
-          <Dropdown
+          <Dropdown trigger="click" menu={{items}}
-            trigger="click"
-            menu={
-              <Menu items={menuItems} />
-            }
           >
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -131,9 +131,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     disabled: existingLayoutKeys.includes(key),
   }));
 
-  const addComponentOverlay = (
+  const menu = {items: menuItems, onClick: handleAddComponent};
-    <Menu onClick={handleAddComponent} items={menuItems} />
-  );
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -145,7 +143,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
-            <Dropdown menu={addComponentOverlay} trigger={["click"]}>
+            <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>
           </Space>

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

@@ -291,9 +291,8 @@ export function DmsPostForm({bodyshop, socket, job, logsRef}) {
                                                 label={
                                                     <div>
                                                         {t("jobs.fields.dms.payer.controlnumber")}{" "}
-                                                        <Dropdown
+                                                        <Dropdown menu={{
-                                                            menu={<Menu
+                                                            items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
-                                                                items={bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
                                                                 key: idx,
                                                                 label: key.name,
                                                                 onClick: () => {
@@ -307,9 +306,8 @@ export function DmsPostForm({bodyshop, socket, job, logsRef}) {
                                                                         }),
                                                                     });
                                                                 },
-                                                                }))}
+                                                            }))
-                                                            />}
+                                                        }}>
-                                                        >
                                                             <a href=" #" onClick={(e) => e.preventDefault()}>
                                                                 <DownOutlined/>
                                                             </a>

client/src/components/email-overlay/email-overlay.component.jsx

@@ -1,5 +1,5 @@
 import {UploadOutlined, UserAddOutlined} from "@ant-design/icons";
-import {Button, Divider, Dropdown, Form, Input, Menu, Select, Space, Tabs, Upload,} from "antd";
+import {Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload,} from "antd";
 import _ from "lodash";
 import React from "react";
 import {useTranslation} from "react-i18next";
@@ -50,10 +50,8 @@ export function EmailOverlayComponent({
         });
     };
 
-    const menu = (
+    const emailsToMenu = {
-            <Menu
+        items: [
-                onClick={handleClick}
-                items={[
             ...bodyshop.employees
                 .filter((e) => e.user_email)
                 .map((e, idx) => ({
@@ -66,15 +64,11 @@ export function EmailOverlayComponent({
                 label: e.label,
                 value: e.emails,
             })),
-                ]}
+        ],
-            />
+        onClick: handleClick,
-    );
+    };
-
+    const menuCC = {
-    const menuCC = (
+        items: [
-        <div>
-            <Menu
-                onClick={handle_CC_Click}
-                items={[
             ...bodyshop.employees
                 .filter((e) => e.user_email)
                 .map((e, idx) => ({
@@ -87,10 +81,9 @@ export function EmailOverlayComponent({
                 label: e.label,
                 value: e.emails,
             })),
-                ]}
+        ],
-            />
+        onClick: handle_CC_Click,
-        </div>
+    };
-    );
 
     return (
         <div>
@@ -119,7 +112,7 @@ export function EmailOverlayComponent({
                 label={
                     <Space>
                         {t("emails.fields.to")}
-                        <Dropdown menu={menu}>
+                        <Dropdown menu={emailsToMenu}>
                             <a
                                 className="ant-dropdown-link"
                                 href=" #"

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

@@ -4,7 +4,7 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -37,19 +37,19 @@ export function JobAltTransportChange({ bodyshop, job }) {
       });
     }
   };
-  const menu = (
+
-      <Menu
+  const menu = {
-          selectedKeys={[job && job.alt_transport]}
+      items: [
-          onClick={onClick}
-          items={[
           ...(bodyshop.appt_alt_transport || []).map((alt) => ({
               key: alt,
               label: alt,
           })),
           { key: "null", label: t("general.actions.clear") },
-          ]}
+      ],
-      />
+      onClick: onClick,
-  );
+      defaultSelectedKeys: [job && job.alt_transport]
+  }
+
   return (
     <Dropdown menu={menu}>
       <a href=" #" onClick={(e) => e.preventDefault()}>

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

@@ -4,7 +4,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -44,11 +44,11 @@ export function ScheduleEventColor({ bodyshop, event }) {
     bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
       ?.label;
 
-  const menu = (
+
-      <Menu
+  const menu = {
-          selectedKeys={[event.color]}
+      defaultSelectedKeys: [event.color],
-          onClick={onClick}
+      onClick: onClick,
-          items={[
+      items: [
         ...(bodyshop.appt_colors || []).map((color) => ({
             key: color.color.hex,
             label: color.label,
@@ -56,9 +56,8 @@ export function ScheduleEventColor({ bodyshop, event }) {
         })),
         { key: "divider", label: <hr />, disabled: true },
         { key: "null", label: t("general.actions.clear") },
-          ]}
+      ]
-      />
+  };
-  );
 
   return (
     <Dropdown menu={menu}>
@@ -69,4 +68,5 @@ export function ScheduleEventColor({ bodyshop, event }) {
     </Dropdown>
   );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);

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

@@ -5,7 +5,6 @@ import {
   Dropdown,
   Form,
   Input,
-  Menu,
   notification,
   Popover,
   Select,
@@ -185,9 +184,7 @@ export function ScheduleEventComponent({
         ) : null}
         {event.job ? (
           <Dropdown
-            menu={
+            menu={{items: [
-                <Menu
-                    items={[
                     {
                         key: "email",
                         label: t("general.labels.email"),
@@ -234,9 +231,7 @@ export function ScheduleEventComponent({
                             }
                         },
                     },
-                    ]}
+                ]}}
-                />
-            }
           >
             <Button>{t("appointments.actions.sendreminder")}</Button>
           </Dropdown>

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

@@ -13,7 +13,6 @@ import {
   Button,
   Dropdown,
   Input,
-  Menu,
   Space,
   Table,
   Tag,
@@ -410,19 +409,17 @@ export function JobLinesComponent({
     }
   };
 
-  const markMenu = (
+  const markMenu = {
-      <Menu
+    onClick: handleMark,
-          onClick={handleMark}
+    items: [
-          items={[
       { key: "PAA", label: t("joblines.fields.part_types.PAA") },
       { key: "PAN", label: t("joblines.fields.part_types.PAN") },
       { key: "PAL", label: t("joblines.fields.part_types.PAL") },
       { key: "PAS", label: t("joblines.fields.part_types.PAS") },
       { key: "divider", label: <hr />, disabled: true },
       { key: "clear", label: t("general.labels.clear") },
-          ]}
+    ]
-      />
+  }
-  );
 
   return (
     <div>

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";
@@ -21,22 +21,21 @@ export function JoblinePresetButton({ bodyshop, form }) {
     form.setFieldsValue(item);
   };
 
-  const menu = (
+
-      <Menu
+  const menu = {
-          style={{
+      items: bodyshop.md_jobline_presets.map((i, idx) => ({
-              columnCount: Math.max(
-                  Math.floor(bodyshop.md_jobline_presets.length / 15),
-                  1
-              ),
-          }}
-          items={bodyshop.md_jobline_presets.map((i, idx) => ({
           key: idx,
           label: i.label,
           style: { breakInside: "avoid" },
           onClick: () => handleSelect(i),
-          }))}
+      })),
-      />
+        style: {
-  );
+            columnCount: Math.max(
+                Math.floor(bodyshop.md_jobline_presets.length / 15),
+                1
+            ),
+        },
+  }
 
   return (
     <div>

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

@@ -40,20 +40,18 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
       });
   };
 
-  const statusmenu = (
+  const statusMenu = {
-    <Menu
+    items: bodyshop.md_ro_statuses.statuses.map((item) => ({
-      onClick={(e) => {
-        updateJobStatus(e.key);
-      }}
-      items={bodyshop.md_ro_statuses.statuses.map((item) => ({
       key: item,
       label: item,
-      }))}
+    })),
-    />
+    onClick: (e) => {
-  );
+      updateJobStatus(e.key);
+    },
+  }
 
   return (
-    <Dropdown menu={statusmenu} trigger={["click"]} key="changestatus">
+    <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
       <Button shape="round">
         <span>{job.status}</span>
 

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";
@@ -81,12 +81,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
     }
   }, [job, setAvailableStatuses, bodyshop]);
 
-  const statusmenu = (
+  const statusMenu = {
-    <Menu
+   items: [
-      onClick={(e) => {
-        updateJobStatus(e.key);
-      }}
-      items={[
      ...availableStatuses.map((item) => ({
        key: item,
        label: item,
@@ -100,13 +96,13 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
            })),
          ]
          : []),
-      ]}
+   ],
-    />
+    onClick: (e) => updateJobStatus(e.key)
-  );
+  }
 
   return (
     <Dropdown
-      menu={statusmenu}
+      menu={statusMenu}
       trigger={["click"]}
       key="changestatus"
       disabled={jobRO || !job.converted}

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";
@@ -62,19 +62,17 @@ export function JobsCloseAutoAllocate({ bodyshop, joblines, form, disabled }) {
     );
   };
 
-  const overlay = (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
+  const menu = {
-    <Menu
+    items: bodyshop.md_responsibility_centers.dms_defaults.map((mapping) => ({
-      onClick={handleMenuClick}
-      items={bodyshop.md_responsibility_centers.dms_defaults.map((mapping) => ({
       key: mapping.name,
       label: mapping.name,
       disabled: disabled,
-      }))}
+    })),
-    />
+    onClick: handleMenuClick,
-  );
+  }
 
   return bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ? (
-    <Dropdown menu={overlay}>
+    <Dropdown menu={menu}>
       <Button disabled={disabled}>{t("jobs.actions.dmsautoallocate")}</Button>
     </Dropdown>
   ) : (

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";
@@ -15,16 +15,14 @@ export function JobsDetailChangeEstimator({ disabled, form, bodyshop }) {
     form.setFieldsValue(est);
   };
 
-  const menu = (
+  const menu = {
-        <Menu
+        items: bodyshop.md_estimators.map((est, idx) => ({
-          onClick={handleClick}
-          items={bodyshop.md_estimators.map((est, idx) => ({
             key: idx,
             label: `${est.est_ct_fn} ${est.est_ct_ln}`,
             value: est,
-          }))}
+        })),
-        />
+        onClick: handleClick
-  );
+  }
 
   return (
     <Dropdown menu={menu} disabled={disabled}>

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

@@ -15,20 +15,18 @@ export function JobsDetailChangeFilehandler({ disabled, form, bodyshop }) {
     form.setFieldsValue(est);
   };
 
-  const menu = (
+  const menu = {
-    <Menu
+      items: bodyshop.md_filehandlers.map((est, idx) => ({
-      onClick={handleClick}
-      style={{
-        columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
-      }}
-      items={bodyshop.md_filehandlers.map((est, idx) => ({
           key: idx,
           label: `${est.ins_ct_fn} ${est.ins_ct_ln}`,
           value: est,
           style: { breakInside: "avoid" },
-      }))}
+      })),
-    />
+      style: {
-  );
+          columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
+      },
+      onClick: handleClick
+  }
 
   return (
     <Dropdown menu={menu} disabled={disabled}>

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,16 +18,14 @@ export function JobsDetailRatesChangeButton({ disabled, form, bodyshop }) {
     form.setFieldsValue({ ...rate, labor_rate_desc: rate.rate_label });
   };
 
-  const menu = (
+  const menu = {
-        <Menu
+      items: bodyshop.md_labor_rates.map((rate, idx) => ({
-          onClick={handleClick}
-          items={bodyshop.md_labor_rates.map((rate, idx) => ({
           key: idx,
           label: rate.rate_label,
           value: rate,
-          }))}
+      })),
-        />
+      onClick: handleClick
-  );
+  }
 
   return (
     <Dropdown menu={menu} disabled={disabled}>

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,19 +21,18 @@ export function NotesPresetButton({ bodyshop, form }) {
         form.setFieldsValue({text: item.text});
     };
 
-  const menu = (
+
-    <Menu
+    const menu = {
-      style={{
+        items: bodyshop.md_notes_presets.map((i, idx) => ({
-        columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
-      }}
-      items={bodyshop.md_notes_presets.map((i, idx) => ({
             key: idx,
             label: i.label,
             style: {breakInside: "avoid"},
             onClick: () => handleSelect(i),
-      }))}
+        })),
-    />
+        style: {
-  );
+            columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
+        },
+    }
 
     return (
         <div>

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

@@ -1,30 +1,12 @@
 import {DownOutlined} from "@ant-design/icons";
-import { Dropdown, InputNumber, Menu, Space } from "antd";
+import {Dropdown, InputNumber, Space} from "antd";
 import React from "react";
 import {useTranslation} from "react-i18next";
+
 export default function PartsOrderModalPriceChange({form, field}) {
     const {t} = useTranslation();
-  const menu = (
+    const menu = {
-    <Menu
+        items: [
-      onClick={({ key }) => {
-        if (key === "custom") return;
-        const values = form.getFieldsValue();
-
-        const { parts_order_lines } = values;
-
-        form.setFieldsValue({
-          parts_order_lines: {
-            data: parts_order_lines.data.map((p, idx) => {
-              if (idx !== field.name) return p;
-              return {
-                ...p,
-                act_price: (p.act_price || 0) * ((100 - key) / 100),
-              };
-            }),
-          },
-        });
-      }}
-      items={[
             {
                 key: "5",
                 label: t("parts_orders.labels.discount", {percent: "5%"}),
@@ -83,9 +65,25 @@ export default function PartsOrderModalPriceChange({ form, field }) {
                     />
                 ),
             },
-      ]}
+        ],
-    />
+        onClick: ({key}) => {
-  );
+            if (key === "custom") return;
+            const values = form.getFieldsValue();
+            const {parts_order_lines} = values;
+            form.setFieldsValue({
+                parts_order_lines: {
+                    data: parts_order_lines.data.map((p, idx) => {
+                        if (idx !== field.name) return p;
+                        return {
+                            ...p,
+                            act_price: (p.act_price || 0) * ((100 - key) / 100),
+                        };
+                    }),
+                },
+            });
+        }
+    };
+
     return (
         <Dropdown menu={menu} trigger="click">
             <Space>

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

@@ -39,16 +39,14 @@ export function PartsOrderModalComponent({bodyshop, vendorList, sendTypeState, i
         form.setFieldsValue({comments: item.props.value});
     };
 
-    const menu = (
+    const menu = {
-            <Menu
+        items: bodyshop.md_parts_order_comment.map((comment, idx) => ({
-              onClick={handleClick}
-              items={bodyshop.md_parts_order_comment.map((comment, idx) => ({
             key: idx,
             label: comment.label,
             value: comment.comment,
-              }))}
+        })),
-            />
+        onClick: handleClick
-    );
+    };
 
     return (
         <div>

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

@@ -47,21 +47,21 @@ export function ProductionColumnsComponent({
     state: tableState,
     activeStatuses: bodyshop.md_ro_statuses.active_statuses,
   });
-  const menu = (
+
-    <Menu
+  const menu = {
-      onClick={handleAdd}
+    items: cols
-      style={{
-        columnCount: Math.max(Math.floor(cols.length / 10), 1),
-      }}
-      items={cols
       .filter((i) => !columnKeys.includes(i.key))
       .map((item) => ({
         key: item.key,
         label: item.title,
         style: { breakInside: "avoid" },
-        }))}
+      })),
-    />
+    style: {
-  );
+      columnCount: Math.max(Math.floor(cols.length / 10), 1),
+    },
+    onClick: handleAdd,
+  };
+  
   return (
     <div>
       <Dropdown menu={menu}>

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

@@ -1,6 +1,6 @@
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -51,11 +51,8 @@ export function ProductionListColumnAlert({ record, insertAuditTrail }) {
     });
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: [
-      menu={
-        <Menu
-          items={[
       {
         key: "toggleAlert",
         label: record.production_vars && record.production_vars.alert
@@ -63,11 +60,12 @@ export function ProductionListColumnAlert({ record, insertAuditTrail }) {
             : t("production.labels.alerton"),
         onClick: handleAlertToggle,
       },
-          ]}
+    ]
-        />
+  };
-      }
+
-      trigger={["contextMenu"]}
+  return (
-    >
+    <Dropdown
+      menu={menu} trigger={["contextMenu"]}>
       <div
         style={{
           //width: "100%",

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

@@ -29,12 +29,8 @@ export default function ProductionListColumnBodyPriority({ record }) {
     });
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: [
-      menu={
-        <Menu
-          onClick={handleSetBodyPriority}
-          items={[
       {
         key: "clearBodyPriority",
         label: t("production.actions.bodypriority-clear"),
@@ -51,11 +47,12 @@ export default function ProductionListColumnBodyPriority({ record }) {
           ),
         })),
       },
-          ]}
+    ],
-        />
+    onClick: handleSetBodyPriority
-      }
+  };
-      trigger={["click"]}
+
-    >
+  return (
+    <Dropdown menu={menu} trigger={["click"]}>
       <div style={{ width: "100%", height: "19px" }}>
         {record.production_vars && record.production_vars.bodypriority}
       </div>

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

@@ -29,12 +29,8 @@ export default function ProductionListColumnDetailPriority({ record }) {
     });
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: [
-      menu={
-        <Menu
-          onClick={handleSetDetailPriority}
-          items={[
       {
         key: "clearDetailPriority",
         label: t("production.actions.detailpriority-clear"),
@@ -51,11 +47,13 @@ export default function ProductionListColumnDetailPriority({ record }) {
           ),
         })),
       },
-          ]}
+    ],
-        />
+    onClick: handleSetDetailPriority
   }
-      trigger={["click"]}
+
-    >
+  return (
+    <Dropdown
+      menu={menu} trigger={["click"]}>
       <div style={{ width: "100%", height: "19px" }}>
         {record.production_vars && record.production_vars.detailpriority}
       </div>

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

@@ -1,5 +1,5 @@
 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";
@@ -29,12 +29,8 @@ export default function ProductionListColumnPaintPriority({ record }) {
     });
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: [
-      menu={
-         <Menu
-          onClick={handleSetPaintPriority}
-          items={[
       {
         key: "clearPaintPriority",
         label: t("production.actions.paintpriority-clear"),
@@ -51,11 +47,12 @@ export default function ProductionListColumnPaintPriority({ record }) {
           ),
         })),
       },
-          ]}
+    ],
-        />
+    onClick: handleSetPaintPriority
-      }
+  };
-      trigger={["click"]}
+
-    >
+  return (
+    <Dropdown menu={menu} trigger={["click"]}>
       <div style={{ width: "100%", height: "19px" }}>
         {record.production_vars && record.production_vars.paintpriority}
       </div>

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";
@@ -36,20 +36,20 @@ export function ProductionListColumnCategory({ record, bodyshop }) {
     setLoading(false);
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: bodyshop.md_categories.map((item) => ({
-      menu={
-        <Menu
-          style={{ maxHeight: "200px", overflowY: "auto" }}
-          onClick={handleSetStatus}
-          items={bodyshop.md_categories.map((item) => ({
       key: item,
       label: item,
-          }))}
+    })),
-        />
+    onClick: handleSetStatus,
+    style: {
+        maxHeight: "200px",
+        overflowY: "auto",
     }
-      trigger={["click"]}
+  };
-    >
+
+  return (
+    <Dropdown menu={menu} trigger={["click"]}>
       <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
         {record.category}
         {loading && <Spin />}

client/src/components/production-list-columns/production-list-columns.status.component.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";
@@ -45,20 +45,20 @@ export function ProductionListColumnStatus({
     setLoading(false);
   };
 
-  return (
+  const menu = {
-    <Dropdown
+    items: bodyshop.md_ro_statuses.production_statuses.map((item) => ({
-      menu={
-        <Menu
-          style={{ maxHeight: "200px", overflowY: "auto" }}
-          onClick={handleSetStatus}
-          items={bodyshop.md_ro_statuses.production_statuses.map((item) => ({
       key: item,
       label: item,
-          }))}
+    })),
-        />
+    onClick: handleSetStatus,
+    style: {
+        maxHeight: "200px",
+        overflowY: "auto",
     }
-      trigger={["click"]}
+  };
-    >
+
+  return (
+    <Dropdown menu={menu} trigger={["click"]}>
       <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>
         {record.status}
         {loading && <Spin />}

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

@@ -1,4 +1,4 @@
-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";
@@ -28,24 +28,8 @@ export default connect(
 export function ProductionListPrint({ bodyshop }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  return (
+  const menu = {
-    <Dropdown
+      items: [
-      trigger="click"
-      menu={
-        <Menu
-            onClick={async (e) => {
-              setLoading(true);
-              await GenerateDocument(
-                  {
-                    name: ProdTemplates[e.key].key,
-                    // variables: { id: contract.id },
-                  },
-                  {},
-                  "p"
-              );
-              setLoading(false);
-            }}
-            items={[
           ...Object.keys(ProdTemplates).map((key) => ({
               key: key,
               label: ProdTemplates[key].title,
@@ -76,10 +60,23 @@ export function ProductionListPrint({ bodyshop }) {
                   label: e,
               })),
           },
-            ]}
+      ],
-        />
+      onClick: async (e) => {
+          setLoading(true);
+          await GenerateDocument(
+              {
+                  name: ProdTemplates[e.key].key,
+                  // variables: { id: contract.id },
+              },
+              {},
+              "p"
+          );
+          setLoading(false);
+      },
+
   }
-    >
+  return (
+    <Dropdown trigger="click" menu={menu}>
       <Button loading={loading}>{t("general.labels.print")}</Button>
     </Dropdown>
   );

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

@@ -1,6 +1,6 @@
 import {SyncOutlined} from "@ant-design/icons";
 import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import {Button, Dropdown, Input, Menu, Space, Statistic, Table,} from "antd";
+import {Button, Dropdown, Input, Space, Statistic, Table,} from "antd";
 import {PageHeader} from "@ant-design/pro-layout";
 import React, {useMemo, useState} from "react";
 import ReactDragListView from "react-drag-listview";
@@ -105,25 +105,28 @@ export function ProductionListTable({loading, data, refetch, bodyshop, technicia
                 setColumns(nextColumns);
             };
 
-    const headerItem = (col) => (
+
-        <Dropdown
+    const headerItem = (col) => {
-            className="prod-header-dropdown"
+        const menu = {
-            menu={
+            onClick: removeColumn,
-                <Menu
+            items: [
-                  onClick={removeColumn}
-                  items={[
                 {
                     key: col.key,
                     label: t("production.actions.removecolumn"),
                 },
-                  ]}
+            ]
-                />
         }
+
+        return (
+            <Dropdown
+                className="prod-header-dropdown"
+                menu={menu}
                 trigger={["contextMenu"]}
             >
                 <span>{col.title}</span>
             </Dropdown>
-    );
+        )
+    };
 
     const dataSource =
         searchText === ""

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu, notification } from "antd";
+import { Dropdown, notification } from "antd";
 import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -55,17 +55,15 @@ export function ScheduleBlockDay({
     }
   };
 
-  const menu = (
+  const menu = {
-    <Menu
+    items: [
-      onClick={handleMenu}
-      items={[
       {
         key: "block",
         label: t("appointments.actions.block"),
       },
-      ]}
+    ],
-    />
+    onClick: handleMenu,
-  );
+  }
 
   return (
     <Dropdown

client/src/components/shop-template-add/shop-template-add.component.jsx

@@ -1,17 +1,14 @@
 import {DownOutlined} from "@ant-design/icons";
 import {useMutation} from "@apollo/client";
-import { Dropdown, Menu } from "antd";
+import {Dropdown} from "antd";
 import queryString from "query-string";
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 import {createStructuredSelector} from "reselect";
 import {logImEXEvent} from "../../firebase/firebase.utils";
-import {
+import {INSERT_TEMPLATE, QUERY_TEMPLATES_BY_NAME_FOR_DUPE,} from "../../graphql/templates.queries";
-  INSERT_TEMPLATE,
-  QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
-} from "../../graphql/templates.queries";
 import {selectBodyshop} from "../../redux/user/user.selectors";
 import client from "../../utils/GraphQLClient";
 import {TemplateList} from "../../utils/TemplateConstants";
@@ -23,11 +20,7 @@ const mapStateToProps = createStructuredSelector({
 
 export default connect(mapStateToProps, null)(ShopTemplateAddComponent);
 
-export function ShopTemplateAddComponent({
+export function ShopTemplateAddComponent({ bodyshop, shopTemplateList, refetch}) {
-  bodyshop,
-  shopTemplateList,
-  refetch,
-}) {
     const {t} = useTranslation();
     const search = queryString.parse(useLocation().search);
     const history = useNavigate();
@@ -68,11 +61,10 @@ export function ShopTemplateAddComponent({
         if (!!refetch) refetch();
     };
     const TemplateListGenerated = TemplateList();
-  const menu = (
+    const menu = {
-    <Menu
+        onClick: handleAdd,
-      onClick={handleAdd}
+
-      items={
+        items: availableTemplateKeys.length > 0
-        availableTemplateKeys.length > 0
             ? availableTemplateKeys.map((tkey) => ({
                 key: tkey,
                 label: TemplateListGenerated[tkey].title,
@@ -84,9 +76,7 @@ export function ShopTemplateAddComponent({
                     disabled: true,
                 },
             ]
-      }
+    };
-    />
-  );
 
     return (
         <Dropdown menu={menu}>

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

@@ -1,20 +1,12 @@
-import {
+import {Button, Col, Dropdown, Form, Row, Space, Typography,} from "antd";
-  Button,
-  Col,
-  Dropdown,
-  Form,
-  Menu,
-  Row,
-  Space,
-  Typography,
-} from "antd";
 import {PageHeader} from "@ant-design/pro-layout";
 
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
 import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
-import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
+import ContractCourtesyCarBlock
+    from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
 import ContractFormComponent from "../../components/contract-form/contract-form.component";
 import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
 import {setModalContext} from "../../redux/modals/modals.actions";
@@ -26,15 +18,7 @@ const mapDispatchToProps = (dispatch) => ({
         dispatch(setModalContext({context: context, modal: "courtesyCarReturn"})),
 });
 
-export function ContractDetailPage({
+export function ContractDetailPage({contract, job, courtesyCar, setCourtesyCarReturnModalContext, refetch, form, saveLoading}) {
-  contract,
-  job,
-  courtesyCar,
-  setCourtesyCarReturnModalContext,
-  refetch,
-  form,
-  saveLoading,
-}) {
     const {t} = useTranslation();
     return (
         <div>
@@ -49,6 +33,33 @@ export function ContractDetailPage({
                 extra={
                     <Form.Item shouldUpdate>
                         {() => {
+                            const menu = {
+                                onClick: (e) => {
+                                    GenerateDocument(
+                                        {
+                                            name: TemplateList("courtesycarcontract")[e.key].key,
+                                            variables: {id: contract.id},
+                                        },
+                                        {},
+                                        "p"
+                                    );
+                                },
+                                items: [
+                                    {
+                                        key: "courtesy_car_contract",
+                                        label: t("contracts.actions.printcontract"),
+                                    },
+                                    {
+                                        key: "courtesy_car_terms",
+                                        label: t("printcenter.courtesycarcontract.courtesy_car_terms"),
+                                    },
+                                    {
+                                        key: "courtesy_car_impound",
+                                        label: t("printcenter.courtesycarcontract.courtesy_car_impound"),
+                                    },
+                                ]
+                            };
+
                             return (
                                 <Space>
                                     <Button
@@ -75,37 +86,7 @@ export function ContractDetailPage({
                                     >
                                         {t("courtesycars.actions.return")}
                                     </Button>
-                  <Dropdown
+                                    <Dropdown trigger="click" menu={menu}>
-                    trigger="click"
-                    menu={
-                      <Menu
-                        onClick={(e) => {
-                          GenerateDocument(
-                            {
-                              name: TemplateList("courtesycarcontract")[e.key].key,
-                              variables: { id: contract.id },
-                            },
-                            {},
-                            "p"
-                          );
-                        }}
-                        items={[
-                          {
-                            key: "courtesy_car_contract",
-                            label: t("contracts.actions.printcontract"),
-                          },
-                          {
-                            key: "courtesy_car_terms",
-                            label: t("printcenter.courtesycarcontract.courtesy_car_terms"),
-                          },
-                          {
-                            key: "courtesy_car_impound",
-                            label: t("printcenter.courtesycarcontract.courtesy_car_impound"),
-                          },
-                        ]}
-                      />
-                    }
-                  >
                                         <Button>{t("general.labels.print")}</Button>
                                     </Dropdown>
 
@@ -133,4 +114,5 @@ export function ContractDetailPage({
         </div>
     );
 }
+
 export default connect(null, mapDispatchToProps)(ContractDetailPage);