From 5f17d12444ebd6c34957570301d987ede1a1d27c Mon Sep 17 00:00:00 2001
From: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
Date: Wed, 23 Nov 2022 13:31:01 -0600
Subject: [PATCH] Add grid overlay when disaggregation is disabled

---
 .../MetricConfiguration/Configuration.tsx     |  8 +-
 .../RaceEthnicities.styles.tsx                | 22 ++++-
 .../RaceEthnicitiesGrid.tsx                   | 85 ++++++++++---------
 3 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/publisher/src/components/MetricConfiguration/Configuration.tsx b/publisher/src/components/MetricConfiguration/Configuration.tsx
index 1692e41bc..851eb4f28 100644
--- a/publisher/src/components/MetricConfiguration/Configuration.tsx
+++ b/publisher/src/components/MetricConfiguration/Configuration.tsx
@@ -230,7 +230,13 @@ export const Configuration: React.FC<MetricConfigurationProps> = observer(
               {/* Dimension Fields (Enable/Disable) */}
               {/* Race & Ethnicities Grid (when active disaggregation is Race / Ethnicity) */}
               {activeDisaggregationKey === RACE_ETHNICITY_DISAGGREGATION_KEY ? (
-                <RaceEthnicitiesGrid />
+                <RaceEthnicitiesGrid
+                  disaggregationEnabled={Boolean(
+                    disaggregations[systemMetricKey][
+                      RACE_ETHNICITY_DISAGGREGATION_KEY
+                    ]?.enabled
+                  )}
+                />
               ) : (
                 activeDimensionKeys?.map((dimensionKey) => {
                   const currentDisaggregation =
diff --git a/publisher/src/components/MetricConfiguration/RaceEthnicities.styles.tsx b/publisher/src/components/MetricConfiguration/RaceEthnicities.styles.tsx
index 480f07fff..7de558b13 100644
--- a/publisher/src/components/MetricConfiguration/RaceEthnicities.styles.tsx
+++ b/publisher/src/components/MetricConfiguration/RaceEthnicities.styles.tsx
@@ -19,7 +19,7 @@ import {
   palette,
   typography,
 } from "@justice-counts/common/components/GlobalStyles";
-import styled from "styled-components/macro";
+import styled, { css } from "styled-components/macro";
 
 import {
   DefinitionDisplayName,
@@ -34,8 +34,26 @@ import {
   MetricOnOffWrapper,
 } from ".";
 
-export const RaceEthnicitiesBreakdownContainer = styled.div`
+export const RaceEthnicitiesBreakdownContainer = styled.div<{
+  disaggregationEnabled?: boolean;
+}>`
   padding-top: 14px;
+  position: relative;
+
+  ${({ disaggregationEnabled }) =>
+    !disaggregationEnabled &&
+    css`
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: ${palette.solid.white};
+        opacity: 0.5;
+      }
+    `}
 `;
 
 export const CalloutBox = styled.div`
diff --git a/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx b/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx
index 9fb5e6600..892002a5c 100644
--- a/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx
+++ b/publisher/src/components/MetricConfiguration/RaceEthnicitiesGrid.tsx
@@ -36,47 +36,50 @@ import {
   RaceEthnicitiesTable,
 } from ".";
 
-export const RaceEthnicitiesGrid: React.FC = observer(() => {
-  const { metricConfigStore } = useStore();
-  const { ethnicitiesByRace } = metricConfigStore;
+export const RaceEthnicitiesGrid: React.FC<{ disaggregationEnabled: boolean }> =
+  observer(({ disaggregationEnabled }) => {
+    const { metricConfigStore } = useStore();
+    const { ethnicitiesByRace } = metricConfigStore;
 
-  return (
-    <RaceEthnicitiesBreakdownContainer>
-      <CalloutBox>
-        <Description>
-          Answer the questions on the <span>Race and Ethnicity</span> form; the
-          grid below will reflect your responses.
-        </Description>
-        <RightArrowIcon />
-      </CalloutBox>
+    return (
+      <RaceEthnicitiesBreakdownContainer
+        disaggregationEnabled={disaggregationEnabled}
+      >
+        <CalloutBox>
+          <Description>
+            Answer the questions on the <span>Race and Ethnicity</span> form;
+            the grid below will reflect your responses.
+          </Description>
+          <RightArrowIcon />
+        </CalloutBox>
 
-      <GridHeaderContainer>
-        <GridRaceHeader>Race</GridRaceHeader>
-        <GridEthnicitiesHeader>
-          <EthnicityLabel>
-            Ethnicity <RightArrowIcon />
-          </EthnicityLabel>
-          <Ethnicity>Hispanic</Ethnicity>
-          <Ethnicity>Not Hispanic</Ethnicity>
-          <Ethnicity>Unknown</Ethnicity>
-        </GridEthnicitiesHeader>
-      </GridHeaderContainer>
+        <GridHeaderContainer>
+          <GridRaceHeader>Race</GridRaceHeader>
+          <GridEthnicitiesHeader>
+            <EthnicityLabel>
+              Ethnicity <RightArrowIcon />
+            </EthnicityLabel>
+            <Ethnicity>Hispanic</Ethnicity>
+            <Ethnicity>Not Hispanic</Ethnicity>
+            <Ethnicity>Unknown</Ethnicity>
+          </GridEthnicitiesHeader>
+        </GridHeaderContainer>
 
-      <RaceEthnicitiesTable>
-        {Object.entries(ethnicitiesByRace).map(([race, ethnicities]) => (
-          <RaceEthnicitiesRow key={race}>
-            <RaceCell>{race}</RaceCell>
-            <EthnicitiesRow>
-              {Object.values(ethnicities).map((ethnicity) => (
-                <EthnicityCell
-                  key={ethnicity.key}
-                  enabled={ethnicity.enabled}
-                />
-              ))}
-            </EthnicitiesRow>
-          </RaceEthnicitiesRow>
-        ))}
-      </RaceEthnicitiesTable>
-    </RaceEthnicitiesBreakdownContainer>
-  );
-});
+        <RaceEthnicitiesTable>
+          {Object.entries(ethnicitiesByRace).map(([race, ethnicities]) => (
+            <RaceEthnicitiesRow key={race}>
+              <RaceCell>{race}</RaceCell>
+              <EthnicitiesRow>
+                {Object.values(ethnicities).map((ethnicity) => (
+                  <EthnicityCell
+                    key={ethnicity.key}
+                    enabled={ethnicity.enabled}
+                  />
+                ))}
+              </EthnicitiesRow>
+            </RaceEthnicitiesRow>
+          ))}
+        </RaceEthnicitiesTable>
+      </RaceEthnicitiesBreakdownContainer>
+    );
+  });