IO-2143 Add truncation for long vehicle notes.

client/src/components/data-label/data-label.component.jsx

@@ -8,6 +8,8 @@ export default function DataLabel({
   vertical,
   visible = true,
   valueStyle = {},
+  valueClassName,
+  onValueClick,
   ...props
 }) {
   if (!visible || (hideIfNull && !!!children)) return null;
@@ -28,7 +30,10 @@ export default function DataLabel({
           marginLeft: ".3rem",
           fontWeight: "bolder",
           wordWrap: "break-word",
+          cursor: onValueClick !== undefined ? "pointer" : "",
         }}
+        className={valueClassName}
+        onClick={onValueClick}
       >
         {typeof children === "string" ? (
           <Typography.Text style={valueStyle}>{children}</Typography.Text>

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

@@ -5,7 +5,7 @@ import {
   BranchesOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -56,7 +56,7 @@ const colSpan = {
 
 export function JobsDetailHeader({ job, bodyshop, disabled }) {
   const { t } = useTranslation();
-
+  const [notesClamped, setNotesClamped] = useState(true);
   const vehicleTitle = `${job.v_model_yr || ""} ${job.v_color || ""}
   ${job.v_make_desc || ""} 
   ${job.v_model_desc || ""}`.trim();
@@ -229,6 +229,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               <DataLabel
                 label={t("vehicles.fields.notes")}
                 valueStyle={{ whiteSpace: "pre-wrap" }}
+                valueClassName={notesClamped ? "clamp" : ""}
+                onValueClick={() => setNotesClamped(!notesClamped)}
               >
                 {job.vehicle.notes}
               </DataLabel>

client/src/components/jobs-detail-header/jobs-detail-header.styles.scss

@@ -6,3 +6,12 @@
   display: flex;
   flex-wrap: wrap;
 }
+
+.clamp {
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+}

client/yarn.lock

@@ -2305,18 +2305,6 @@
     shallowequal "^1.1.0"
     unfetch "^4.2.0"
 
-"@stripe/react-stripe-js@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.9.0.tgz#74809a274d7db110c3daf6f68ca4d62c6e6559c7"
-  integrity sha512-Fn49X+Gu5fOTxhPOita1cPMi0jw+0v4xfJ3FCXbbvmfuuDl3M7ZvpRkoijBjql11NXsaXO3TMm3rkN3mEolJzw==
-  dependencies:
-    prop-types "^15.7.2"
-
-"@stripe/stripe-js@^1.32.0":
-  version "1.32.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.32.0.tgz#4ecdd298db61ad9b240622eafed58da974bd210e"
-  integrity sha512-7EvBnbBfS1aynfLRmBFcuumHNGjKxnNkO47rorFBktqDYHwo7Yw6pfDW2iqq0R8r7i7XiJEdWPvvEgQAiDrx3A==
-
 "@surma/rollup-plugin-off-main-thread@^1.1.1":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"