changes for the antd v5 components

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -18,24 +18,39 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) {
   return (
     <Row className="breadcrumb-container">
       <Col xs={24} sm={24} md={16}>
-        <Breadcrumb separator=">">
-          <Breadcrumb.Item>
-            <Link to={`/manage`}>
-              <HomeFilled />{" "}
-              {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
-                ""}
-            </Link>
-          </Breadcrumb.Item>
-          {breadcrumbs.map((item) =>
-            item.link ? (
-              <Breadcrumb.Item key={item.label}>
-                <Link to={item.link}>{item.label} </Link>
-              </Breadcrumb.Item>
-            ) : (
-              <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
-            )
-          )}
-        </Breadcrumb>
+        <Breadcrumb
+          separator=">"
+          items={[
+            {
+              title: (
+                <Link to={`/manage`}>
+                  <HomeFilled />{" "}
+                  {(bodyshop &&
+                    bodyshop.shopname &&
+                    `(${bodyshop.shopname})`) ||
+                    ""}
+                </Link>
+              ),
+            },
+            ...breadcrumbs.map((item) =>
+              item.link
+                ? {
+                    title: (
+                      <Link key={item.label} to={item.link}>
+                        {item.label}{" "}
+                      </Link>
+                    ),
+                  }
+                : {
+                    title: (
+                      <React.Fragment key={item.label}>
+                        {item.label}
+                      </React.Fragment>
+                    ),
+                  }
+            ),
+          ]}
+        ></Breadcrumb>
       </Col>
       <Col xs={24} sm={24} md={8}>
         <GlobalSearch />

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

@@ -1,6 +1,6 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { PageHeader } from '@ant-design/pro-layout';
+import { PageHeader } from "@ant-design/pro-layout";
 import { Button, Dropdown, Menu, notification, Space } from "antd";
 import i18next from "i18next";
 import _ from "lodash";
@@ -139,7 +139,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
-            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+            <Dropdown menu={addComponentOverlay} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>
           </Space>

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

@@ -104,7 +104,7 @@ export function EmailOverlayComponent({
         label={
           <Space>
             {t("emails.fields.to")}
-            <Dropdown overlay={menu}>
+            <Dropdown menu={menu}>
               <a
                 className="ant-dropdown-link"
                 href=" #"

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -3,7 +3,7 @@ import {
   useApolloClient,
   useLazyQuery,
   useMutation,
-  useQuery
+  useQuery,
 } from "@apollo/client";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import { Col, notification, Row } from "antd";
@@ -20,7 +20,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   DELETE_AVAILABLE_JOB,
   QUERY_AVAILABLE_JOBS,
-  QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK
+  QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK,
 } from "../../graphql/available-jobs.queries";
 import { INSERT_NEW_JOB, UPDATE_JOB } from "../../graphql/jobs.queries";
 import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
@@ -28,7 +28,7 @@ import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
   selectBodyshop,
-  selectCurrentUser
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import confirmDialog from "../../utils/asyncConfirm";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
@@ -363,7 +363,7 @@ export function JobsAvailableContainer({
         owner={owner}
         selectedOwner={selectedOwner}
         setSelectedOwner={setSelectedOwner}
-        visible={ownerModalVisible}
+        open={ownerModalVisible}
         onOk={onOwnerFindModalOk}
         onCancel={onOwnerModalCancel}
       />
@@ -373,7 +373,7 @@ export function JobsAvailableContainer({
         selectedJob={selectedJob}
         setSelectedJob={setSelectedJob}
         importOptionsState={importOptionsState}
-        visible={jobModalVisible}
+        open={jobModalVisible}
         onOk={onJobFindModalOk}
         onCancel={onJobModalCancel}
         modalSearchState={modalSearchState}

client/src/components/jobs-find-modal/jobs-find-modal.container.jsx

@@ -32,7 +32,7 @@ export default connect(
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
     },
-    skip: !modalProps.visible,
+    skip: !modalProps.open,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -30,13 +30,13 @@ export default function OwnerFindModalContainer({
   );
 
   useEffect(() => {
-    if (modalProps.visible && owner) {
+    if (modalProps.open && owner) {
       const s = OwnerNameDisplayFunction(owner, true);
 
       setSearchText(s.trim());
       callSearchowners({ variables: { search: s.trim() } });
     }
-  }, [callSearchowners, modalProps.visible, owner]);
+  }, [callSearchowners, modalProps.open, owner]);
 
   return (
     <Modal

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

@@ -87,7 +87,7 @@ export default function PartsOrderModalPriceChange({ form, field }) {
     />
   );
   return (
-    <Dropdown overlay={menu} trigger="click">
+    <Dropdown menu={menu} trigger="click">
       <Space>
         %
         <DownOutlined />

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

@@ -56,7 +56,7 @@ export default function ProductionListDate({
       style={{
         height: "19px",
       }}
-      overlay={
+      menu={
         <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
           <FormDatePicker
             onClick={(e) => e.stopPropagation()}

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

@@ -97,7 +97,7 @@ export function ProductionLastContacted({ currentUser, record }) {
         style={{
           height: "19px",
         }}
-        overlay={
+        menu={
           <Card
             style={{ padding: "1rem" }}
             onClick={(e) => e.stopPropagation()}

client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx

@@ -90,7 +90,7 @@ export default function ScoreboardEntryEdit({ entry }) {
 
   return (
     <div>
-      <Dropdown open={visible} overlay={popContent}>
+      <Dropdown open={visible} menu={popContent}>
         <Button
           onClick={(e) => {
             e.stopPropagation();

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

@@ -81,7 +81,7 @@ export function ShopTemplateAddComponent({
   );
 
   return (
-    <Dropdown overlay={menu}>
+    <Dropdown menu={menu}>
       <span>
         {t("bodyshop.actions.addtemplate")} <DownOutlined />
       </span>

client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx

@@ -41,7 +41,7 @@ export default function TimeTicketsDatesSelector() {
         end ? moment(end) : moment().endOf("week"),
       ]}
       format="MM/DD/YYYY"
-      ranges={DatePickerRanges}
+      presets={DatePickerRanges}
       onCalendarChange={handleChange}
     />
   );

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

@@ -1,4 +1,4 @@
-import { PageHeader } from '@ant-design/pro-layout';
+import { PageHeader } from "@ant-design/pro-layout";
 import { Button, Result, Space, Steps } from "antd";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,16 +19,11 @@ export default function JobsCreateComponent({ form }) {
     {
       title: t("jobs.labels.create.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"),
       content: <JobsCreateOwnerInfoContainer />,
-      validation: !!state.owner.new || !!state.owner.selectedid,
       error: t("owners.errors.selectexistingornew"),
     },
     {
@@ -43,7 +38,6 @@ export default function JobsCreateComponent({ form }) {
   const prev = () => {
     setPageIndex(pageIndex - 1);
   };
-  const { Step } = Steps;
 
   const ProgressButtons = ({ top }) => {
     return (
@@ -80,31 +74,23 @@ export default function JobsCreateComponent({ form }) {
         }
       >
         {top && (
-          <Steps current={pageIndex}>
-            {steps.map((item, idx) => (
-              <Step
-                key={item.title}
-                title={item.title}
-                style={{
-                  cursor: "pointer",
-                  fontWeight: idx === pageIndex && "bolder",
-                }}
-                onClick={() => {
-                  form
-                    .validateFields()
-                    .then((r) => {
-                      if (steps[pageIndex].validation) {
-                        setErrorMessage(null);
-                        setPageIndex(idx);
-                      } else {
-                        setErrorMessage(steps[pageIndex].error);
-                      }
-                    })
-                    .catch((error) => console.log("error", error));
-                }}
-              />
-            ))}
-          </Steps>
+          <Steps
+            current={pageIndex}
+            onChange={(idx) => {
+              form
+                .validateFields()
+                .then((r) => {
+                  if (steps[pageIndex].validation) {
+                    setErrorMessage(null);
+                    setPageIndex(idx);
+                  } else {
+                    setErrorMessage(steps[pageIndex].error);
+                  }
+                })
+                .catch((error) => console.log("error", error));
+            }}
+            items={steps}
+          />
         )}
       </PageHeader>
     );

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -54,32 +54,29 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
               search: queryString.stringify(searchParams),
             });
           }}
-        >
-          <Tabs.TabPane
-            tab={
-              <span>
-                <Icon component={FaShieldAlt} />
-                {t("scoreboard.labels.jobs")}
-              </span>
-            }
-            destroyInactiveTabPane
-            key="sb"
-          >
-            <ScoreboardDisplay />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={
-              <span>
-                <FieldTimeOutlined />
-                {t("scoreboard.labels.timetickets")}
-              </span>
-            }
-            destroyInactiveTabPane
-            key="tickets"
-          >
-            <ScoreboardTimeTickets />
-          </Tabs.TabPane>
-        </Tabs>
+          items={[
+            {
+              key: "sb",
+              label: (
+                <span>
+                  <Icon component={FaShieldAlt} />
+                  {t("scoreboard.labels.jobs")}
+                </span>
+              ),
+              children: <ScoreboardDisplay />,
+            },
+            {
+              key: "tickets",
+              label: (
+                <span>
+                  <FieldTimeOutlined />
+                  {t("scoreboard.labels.timetickets")}
+                </span>
+              ),
+              children: <ScoreboardTimeTickets />,
+            },
+          ]}
+        ></Tabs>
       </RbacWrapper>
     </FeatureWrapper>
   );