STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

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

@@ -5,13 +5,12 @@ import {
   Checkbox,
   Descriptions,
   Dropdown,
-  
   Menu,
   notification,
   PageHeader,
   Tag
 } from "antd";
-import {DownCircleFilled} from "@ant-design/icons";
+import { DownCircleFilled } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
@@ -34,7 +33,7 @@ export default connect(
   job,
   mutationConvertJob,
   refetch,
-  handleSubmit,
+  handleFinish,
   scheduleModalState,
   bodyshop,
   updateJobStatus
@@ -44,7 +43,7 @@ export default connect(
 
   const tombstoneTitle = (
     <div>
-      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
       {`${t("jobs.fields.ro_number")} ${
         job.ro_number ? job.ro_number : t("general.labels.na")
       }`}
@@ -55,7 +54,8 @@ export default connect(
     <Menu
       onClick={e => {
         updateJobStatus(e.key);
-      }}>
+      }}
+    >
       {bodyshop.md_ro_statuses.statuses.map(item => (
         <Menu.Item key={item}>{item}</Menu.Item>
       ))}
@@ -63,23 +63,24 @@ export default connect(
   );
 
   const menuExtra = [
-    <Dropdown overlay={statusmenu} key='changestatus'>
+    <Dropdown overlay={statusmenu} key="changestatus">
       <Button>
         {t("jobs.actions.changestatus")} <DownCircleFilled />
       </Button>
     </Dropdown>,
-    <Badge key='schedule' count={job.appointments_aggregate.aggregate.count}>
+    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
       <Button
         //TODO Enabled logic based on status.
         onClick={() => {
           setscheduleModalVisible(true);
-        }}>
+        }}
+      >
         {t("jobs.actions.schedule")}
       </Button>
     </Badge>,
     <Button
-      key='convert'
-      type='dashed'
+      key="convert"
+      type="dashed"
       disabled={job.converted}
       onClick={() => {
         mutationConvertJob({
@@ -91,14 +92,11 @@ export default connect(
             message: t("jobs.successes.converted")
           });
         });
-      }}>
+      }}
+    >
       {t("jobs.actions.convert")}
     </Button>,
-    <Button
-      type='primary'
-      key='submit'
-      htmlType='button'
-      onClick={handleSubmit}>
+    <Button type="primary" key="submit" htmlType="submit">
       {t("general.labels.save")}
     </Button>
   ];
@@ -111,9 +109,9 @@ export default connect(
       title={tombstoneTitle}
       //subTitle={tombstoneSubtitle}
       tags={
-        <span key='job-status'>
-          {job.status ? <Tag color='blue'>{job.status}</Tag> : null}
-          <Tag color='red'>
+        <span key="job-status">
+          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
+          <Tag color="red">
             {job.owner ? (
               <Link to={`/manage/owners/${job.owner.id}`}>
                 {`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln ||
@@ -123,7 +121,7 @@ export default connect(
               t("jobs.errors.noowner")
             )}
           </Tag>
-          <Tag color='green'>
+          <Tag color="green">
             {job.vehicle ? (
               <Link to={`/manage/vehicles/${job.vehicle.id}`}>
                 {job.vehicle.v_model_yr || t("general.labels.na")}{" "}
@@ -137,27 +135,37 @@ export default connect(
           <BarcodePopup value={job.id} />
         </span>
       }
-      extra={menuExtra}>
-      <Descriptions size='small' column={5}>
-        <Descriptions.Item label={t("jobs.fields.repairtotal")}>
+      extra={menuExtra}
+    >
+      <Descriptions size="small" column={5}>
+        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
           <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.customerowing")}>
+        <Descriptions.Item
+          key="custowing"
+          label={t("jobs.fields.customerowing")}
+        >
           ##NO BINDING YET##
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>
+        <Descriptions.Item
+          key="scp"
+          label={t("jobs.fields.specialcoveragepolicy")}
+        >
           <Checkbox checked={job.special_coverage_policy} />
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.scheduled_completion")}>
+        <Descriptions.Item
+          key="sched_comp"
+          label={t("jobs.fields.scheduled_completion")}
+        >
           {job.scheduled_completion ? (
-            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
+            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
           ) : null}
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.servicecar")}>
+        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
           {job.service_car}
         </Descriptions.Item>
       </Descriptions>