Merged in feature/IO-2869-Production-Board-List-Alert-2 (pull request #1583)

- Fix alert in table view - (modify some docs)

Approved-by: Allan Carr

client/src/components/production-board-kanban/production-board-kanban-card.component.jsx

@@ -360,14 +360,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
   const headerContent = (
     <div className="header-content-container">
       <div className="inner-container">
-        <ProductionAlert
-          record={{
-            id: card.id,
-            production_vars: card?.metadata.production_vars,
-            refetch: card?.refetch
-          }}
-          key="alert"
-        />
+        <ProductionAlert id={card.id} productionVars={metadata?.production_vars} refetch={card?.refetch} key="alert" />
         {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
         {metadata?.iouparent && (
           <EllipsesToolTip

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

@@ -1,6 +1,6 @@
-import { ExclamationCircleFilled } from "@ant-design/icons";
+import { ExclamationCircleFilled, PlusCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useCallback } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -8,6 +8,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -22,22 +23,24 @@ const mapDispatchToProps = (dispatch) => ({
     )
 });
 
-const ProductionListColumnAlert = ({ record, insertAuditTrail }) => {
+const ProductionListColumnAlert = ({ id, productionVars, refetch, insertAuditTrail }) => {
   const [updateAlert] = useMutation(UPDATE_JOB);
+  const { t } = useTranslation();
 
   const handleAlertToggle = useCallback(() => {
     logImEXEvent("production_toggle_alert");
 
-    const newAlertState = !!record.production_vars?.alert ? !record.production_vars.alert : true;
+    const newAlertState = !!productionVars?.alert ? !productionVars?.alert : true;
+    const finalProductionVars = {
+      ...productionVars,
+      alert: newAlertState
+    };
 
     updateAlert({
       variables: {
-        jobId: record.id,
+        jobId: id,
         job: {
-          production_vars: {
-            ...record.production_vars,
-            alert: newAlertState
-          }
+          production_vars: finalProductionVars
         }
       }
     }).catch((err) => {
@@ -45,17 +48,26 @@ const ProductionListColumnAlert = ({ record, insertAuditTrail }) => {
     });
 
     insertAuditTrail({
-      jobid: record.id,
+      jobid: id,
       operation: AuditTrailMapping.alertToggle(newAlertState),
       type: "alertToggle"
     });
 
-    if (record.refetch) record.refetch();
-  }, [updateAlert, insertAuditTrail, record]);
+    if (refetch) refetch();
+  }, [updateAlert, insertAuditTrail, id, productionVars, refetch]);
 
-  if (!record.production_vars?.alert) return null;
-
-  return <Button className="production-alert" icon={<ExclamationCircleFilled />} onClick={handleAlertToggle} />;
+  return productionVars?.alert ? (
+    <Popconfirm
+      title={t("general.actions.remove_alert")}
+      onConfirm={handleAlertToggle}
+      okText={t("general.labels.yes")}
+      cancelText={t("general.labels.no")}
+    >
+      <Button className="production-alert" icon={<ExclamationCircleFilled />} />
+    </Popconfirm>
+  ) : (
+    <Button className="muted-button" icon={<PlusCircleFilled />} onClick={handleAlertToggle} />
+  );
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionListColumnAlert);

client/src/components/production-list-columns/production-list-columns.data.jsx

@@ -23,7 +23,7 @@ import ProductionListColumnPartsReceived from "./production-list-columns.partsre
 import ProductionListColumnNote from "./production-list-columns.productionnote.component";
 import ProductionListColumnCategory from "./production-list-columns.status.category";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
-import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
+import ProductionListColumnTouchTime from "./prodution-list-columns.touchtime.component";
 import { store } from "../../redux/store";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
@@ -349,7 +349,9 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       key: "alert",
       sorter: (a, b) => Number(a.production_vars?.alert || false) - Number(b.production_vars?.alert || false),
       sortOrder: state.sortedInfo.columnKey === "alert" && state.sortedInfo.order,
-      render: (text, record) => <ProductionListColumnAlert record={{ record }} />
+      render: (text, record) => (
+        <ProductionListColumnAlert id={record.id} productionVars={record?.production_vars} refetch={refetch} />
+      )
     },
     {
       title: i18n.t("production.labels.note"),
@@ -370,7 +372,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       dataIndex: "tt",
       key: "tt",
       render: (text, record) => {
-        return <ProductionlistColumnTouchTime job={record} />;
+        return <ProductionListColumnTouchTime job={record} />;
       }
     },
     {