Merged in feature/IO-3554-Form-Row-Layout (pull request #3053)

feature/feature/IO-3554-Form-Row-Layout - Drawer changes, mask closable changes, missing translation, spinner tip changes

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -7,9 +7,7 @@ export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -19,7 +17,14 @@ export default function BillDetailEditcontainer() {
     xl: "90%",
     xxl: "90%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <Drawer

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

@@ -163,7 +163,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     <Modal
       destroyOnHidden
       open={modalVisible}
-      maskClosable={false}
+      mask={{ closable: false }}
       width={"80%"}
       onOk={() => form.submit()}
       title={t("emails.labels.emailpreview")}

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

@@ -58,9 +58,7 @@ const span = {
 export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
   const { scenarioNotificationsOn } = useSocket();
   const [updateJob] = useMutation(UPDATE_JOB);
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -70,7 +68,14 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
     xl: "75%",
     xxl: "75%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -190,7 +190,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
         open={open}
         onCancel={handleModalClose}
         closable={!(earlyRoCreatedThisSession && !job.converted)}
-        maskClosable={!(earlyRoCreatedThisSession && !job.converted)}
+        mask={{ closable: !(earlyRoCreatedThisSession && !job.converted) }}
         title={t("jobs.actions.convert")}
         footer={null}
         width={700}

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

@@ -214,7 +214,7 @@ export function JobsDetailHeaderActions({
       okText,
       cancelText,
       centered: true,
-      maskClosable: false,
+      mask: { closable: false },
       onCancel: () => {
         closeConfirmById(id);
         onCancel?.();

client/src/components/jobs-list/jobs-list.component.jsx

@@ -28,9 +28,7 @@ const mapDispatchToProps = () => ({});
 export function JobsList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"]
@@ -332,7 +330,17 @@ export function JobsList({ bodyshop }) {
         rowKey="id"
         dataSource={jobs}
         scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
+          x: screens.xxl
+            ? scrollMapper.xxl
+            : screens.xl
+              ? scrollMapper.xl
+              : screens.lg
+                ? scrollMapper.lg
+                : screens.md
+                  ? scrollMapper.md
+                  : screens.sm
+                    ? scrollMapper.sm
+                    : scrollMapper.xs
         }}
         rowSelection={{
           onSelect: (record) => {

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -25,9 +25,7 @@ const mapStateToProps = createStructuredSelector({
 export function JobsReadyList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
 
   const readyStatuses = useMemo(() => {
     if (bodyshop.md_ro_statuses.ready_statuses) return bodyshop.md_ro_statuses.ready_statuses;
@@ -316,7 +314,17 @@ export function JobsReadyList({ bodyshop }) {
         rowKey="id"
         dataSource={jobs}
         scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
+          x: screens.xxl
+            ? scrollMapper.xxl
+            : screens.xl
+              ? scrollMapper.xl
+              : screens.lg
+                ? scrollMapper.lg
+                : screens.md
+                  ? scrollMapper.md
+                  : screens.sm
+                    ? scrollMapper.sm
+                    : scrollMapper.xs
         }}
         rowSelection={{
           onSelect: (record) => {

client/src/components/loading-spinner/loading-spinner.component.jsx

@@ -11,9 +11,8 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
           position: "relative",
           alignContent: "center"
         }}
-        {...(props.children ? { tip: message ? message : null } : {})}
+        {...(props.children ? { description: message ? message : null } : {})}
         delay={200}
-        // TODO: Client Update - tip only works when there are actually children, and this component is used in a lot of places where there are no children
       >
         {props.children}
       </Spin>

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -65,9 +65,7 @@ export function PartsOrderListTableDrawerComponent({
   setTaskUpsertContext,
   isPartsEntry
 }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -77,7 +75,14 @@ export function PartsOrderListTableDrawerComponent({
     xl: "75%",
     xxl: "65%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 

client/src/components/parts-queue-card/parts-queue-card.component.jsx

@@ -11,9 +11,7 @@ import PartsQueueJobLinesComponent from "./parts-queue-job-lines.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function PartsQueueDetailCard() {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -23,7 +21,14 @@ export default function PartsQueueDetailCard() {
     xl: "75%",
     xxl: "60%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -208,7 +208,7 @@ export function ScheduleJobModalContainer({
       onCancel={() => toggleModalVisible()}
       onOk={() => form.submit()}
       width={"90%"}
-      maskClosable={false}
+      mask={{ closable: false }}
       destroyOnHidden
       okButtonProps={{
         loading: loading

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

@@ -39,9 +39,7 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -51,7 +49,15 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
     xl: "50%",
     xxl: "45%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  // Get the largest active breakpoint
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <RbacWrapper action="phonebook:view">

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -8,9 +8,7 @@ export default function ShopVendorPageComponent() {
   const { selectedvendor } = Object.fromEntries(searchParams);
   const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const screens = Grid.useBreakpoint();
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
   
   const bpoints = {
     xs: "100%",
@@ -20,7 +18,14 @@ export default function ShopVendorPageComponent() {
     xl: "50%",
     xxl: "45%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <div>

client/src/translations/en_us/common.json

@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?"
       },
       "validation": {
+        "array": "Please select at least one option.",
         "dateRangeExceeded": "The date range has been exceeded.",
         "invalidemail": "Please enter a valid email.",
         "invalidphone": "Please enter a valid phone number.",

client/src/translations/es/common.json

@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": ""
       },
       "validation": {
+        "array": "Por favor seleccione al menos una opción.",
         "dateRangeExceeded": "",
         "invalidemail": "Por favor introduzca una dirección de correo electrónico válida.",
         "invalidphone": "",

client/src/translations/fr/common.json

@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": ""
       },
       "validation": {
+        "array": "Veuillez sélectionner au moins une option.",
         "dateRangeExceeded": "",
         "invalidemail": "S'il vous plaît entrer un email valide.",
         "invalidphone": "",