- Enhance Production Alert

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

client/src/App/App.styles.scss

@@ -161,3 +161,15 @@
 .rowWithColor > td {
   background-color: var(--bgColor) !important;
 }
+
+.muted-button {
+  color: grey;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 16px; /* Adjust as needed */
+}
+
+.muted-button:hover {
+  color: darkgrey;
+}

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({});
 
@@ -24,6 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 const ProductionListColumnAlert = ({ id, productionVars, refetch, insertAuditTrail }) => {
   const [updateAlert] = useMutation(UPDATE_JOB);
+  const { t } = useTranslation();
 
   const handleAlertToggle = useCallback(() => {
     logImEXEvent("production_toggle_alert");
@@ -55,8 +57,17 @@ const ProductionListColumnAlert = ({ id, productionVars, refetch, insertAuditTra
   }, [updateAlert, insertAuditTrail, id, productionVars, refetch]);
 
   return productionVars?.alert ? (
-    <Button className="production-alert" icon={<ExclamationCircleFilled />} onClick={handleAlertToggle} />
-  ) : null;
+    <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/translations/en_us/common.json

@@ -1160,7 +1160,8 @@
         "submit": "Submit",
         "tryagain": "Try Again",
         "view": "View",
-        "viewreleasenotes": "See What's Changed"
+        "viewreleasenotes": "See What's Changed",
+        "remove_alert": "Are you sure you want to dismiss the alert?"
       },
       "errors": {
         "fcm": "You must allow notification permissions to have real time messaging.  Click to try again.",

client/src/translations/es/common.json

@@ -1160,7 +1160,8 @@
         "submit": "",
         "tryagain": "",
         "view": "",
-        "viewreleasenotes": ""
+        "viewreleasenotes": "",
+        "remove_alert": ""
       },
       "errors": {
         "fcm": "",

client/src/translations/fr/common.json

@@ -1160,7 +1160,8 @@
         "submit": "",
         "tryagain": "",
         "view": "",
-        "viewreleasenotes": ""
+        "viewreleasenotes": "",
+        "remove_alert": ""
       },
       "errors": {
         "fcm": "",