COMP-328: Requirement information display+Delete button style (front)

bcgov · Feb 5, 2025 · 1f67843 · 1f67843
1 parent 456f82d
commit 1f67843
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 188 deletions.
diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/GridLabelValuePair.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/GridLabelValuePair.tsx
@@ -0,0 +1,32 @@
+import { Grid, Typography, Tooltip } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+import { FC, ReactNode, memo } from "react";
+
+const GridLabelValuePair: FC<{
+  label: string;
+  value: ReactNode;
+  gridProps?: { xs: number };
+}> = memo(({ label, value, gridProps = { xs: 12 } }) => (
+  <Grid item {...gridProps}>
+    <Typography
+      variant="body2"
+      color={BCDesignTokens.typographyColorPlaceholder}
+    >
+      {label}
+    </Typography>
+    <Tooltip title={value}>
+      <Typography
+        variant="body1"
+        sx={{
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {value}
+      </Typography>
+    </Tooltip>
+  </Grid>
+));
+
+export default GridLabelValuePair;
diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementCard.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementCard.tsx
@@ -10,6 +10,7 @@ import {
   isRequirementSourceCondition,
   REGULATORY_CONSIDERATION_TYPE_ID,
 } from "./RequirementUtils";
+import GridLabelValuePair from "./GridLabelValuePair";
 
 interface RequirementCardProps {
   requirement: InspectionRequirement;
@@ -18,22 +19,6 @@ interface RequirementCardProps {
   isActive: boolean;
 }
 
-const LabelValuePair: React.FC<{
-  label: string;
-  value: React.ReactNode;
-  gridProps?: { xs: number };
-}> = React.memo(({ label, value, gridProps = { xs: 12 } }) => (
-  <Grid item {...gridProps}>
-    <Typography
-      variant="body2"
-      color={BCDesignTokens.typographyColorPlaceholder}
-    >
-      {label}
-    </Typography>
-    <Typography variant="body1">{value}</Typography>
-  </Grid>
-));
-
 const cardStyles = {
   card: {
     backgroundColor: BCDesignTokens.surfaceColorBackgroundWhite,
@@ -98,13 +83,13 @@ const RequirementCard: React.FC<RequirementCardProps> = memo(
     const renderRegulatoryContent = useCallback(
       () => (
         <>
-          <LabelValuePair label="Summary" value={requirement.summary} />
-          <LabelValuePair
+          <GridLabelValuePair label="Summary" value={requirement.summary} />
+          <GridLabelValuePair
             label="Topic"
             value={requirement.topic.name}
             gridProps={{ xs: 4 }}
           />
-          <LabelValuePair
+          <GridLabelValuePair
             label="Agency"
             value={requirement.agency?.name ?? ""}
             gridProps={{ xs: 8 }}
@@ -117,16 +102,16 @@ const RequirementCard: React.FC<RequirementCardProps> = memo(
     const renderRequirementContent = useCallback(
       () => (
         <>
-          <LabelValuePair label="Topic" value={requirement.topic.name} />
-          <LabelValuePair
+          <GridLabelValuePair label="Topic" value={requirement.topic.name} />
+          <GridLabelValuePair
             label="Source"
             value={
               requirement.requirement_source_details?.[0]?.requirement_source
                 ?.name
             }
             gridProps={{ xs: 4 }}
           />
-          <LabelValuePair
+          <GridLabelValuePair
             label={isCondition ? "Condition #" : "Section #"}
             value={
               isCondition
@@ -135,12 +120,12 @@ const RequirementCard: React.FC<RequirementCardProps> = memo(
             }
             gridProps={{ xs: 8 }}
           />
-          <LabelValuePair
+          <GridLabelValuePair
             label="Compliance Finding"
             value={requirement.compliance_finding?.name}
             gridProps={{ xs: 4 }}
           />
-          <LabelValuePair
+          <GridLabelValuePair
             label="Enforcement Action"
             value={requirement.enforcement_action_data
               .map((action) => action.name)

diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementDrawer.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementDrawer.tsx
@@ -216,6 +216,7 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
               setSelectedRequirementType(requirementType ?? undefined);
             }}
             isRegulatoryConsiderationExists={isRegulatoryConsiderationExists}
+            isEditMode={!!inspectionRequirementData}
           />
           {isRequirement && (
             <RequirementFormRight