Empty layouts for dedup (#1767)

* init

* remaining styling

* fix conflicts

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss

@@ -0,0 +1,66 @@
+@use 'styles/colors';
+
+.wrapper {
+    display: flex;
+    margin-right: 1.5rem;
+    height: 100vh;
+
+    .header {
+        background-color: colors.$base-white;
+        padding: 1.5rem;
+        display: flex;
+        justify-content: space-between;
+
+        .title {
+            font-size: 1.375rem;
+            font-style: normal;
+            font-weight: 700;
+            line-height: normal;
+        }
+
+        .backButton {
+            box-shadow: none;
+            color: colors.$primary;
+        }
+    }
+
+    .configurationListContainer {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .configurationListTitle {
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 162%;
+        color: colors.$base;
+    }
+
+    .configurationListIcon {
+        width: 1.5;
+    }
+
+    .configurationList {
+        background-color: colors.$base-white;
+        margin-right: 1rem;
+        display: flex;
+        flex-direction: column;
+        padding: 1.5rem 1rem;
+        border-right: 1px solid colors.$base-lighter;
+        width: 18.75rem;
+        min-height: 100%;
+
+        .noConfigurationText {
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 162%;
+            color: colors.$base;
+        }
+    }
+
+    .configurationDetails {
+        width: 100rem;
+    }
+}

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx

@@ -0,0 +1,23 @@
+import { Button, Icon } from '@trussworks/react-uswds';
+import styles from './MatchConfiguration.module.scss';
+import NoPassConfigurations from './PassConfiguration/NoPassConfigurations';
+
+const MatchConfiguration = () => {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.configurationList}>
+                <h3>Pass configurations</h3>
+                <p className={styles.noConfigurationText}>No pass configurations have been created.</p>
+                <Button unstyled type={'button'}>
+                    <Icon.Add />
+                    Add new pass configuration
+                </Button>
+            </div>
+            <div className={styles.configurationDetails}>
+                <NoPassConfigurations />
+            </div>
+        </div>
+    );
+};
+
+export default MatchConfiguration;

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/NoPassConfigurations.module.scss

@@ -0,0 +1,26 @@
+@use 'styles/colors';
+
+.content {
+    padding: 1.5rem;
+    background-color: colors.$base-white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+    width: 100%;
+
+    .heading {
+        font-family: 'Public Sans';
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    .text {
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 162%;
+    }
+}

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/NoPassConfigurations.tsx

@@ -0,0 +1,14 @@
+import styles from './NoPassConfigurations.module.scss';
+
+const NoPassConfigurations = () => {
+    return (
+        <div className={styles.content}>
+            <h3 className={styles.heading}>No pass configurations have been created</h3>
+            <p className={styles.text}>
+                To get started, select <span>"Add pass configuration"</span> from the left panel.
+            </p>
+        </div>
+    );
+};
+
+export default NoPassConfigurations;

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss

@@ -0,0 +1,7 @@
+@use 'styles/colors';
+
+.criteria {
+    background-color: colors.$base-white;
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+}

apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx

@@ -0,0 +1,13 @@
+import styles from './PassConfiguration.module.scss';
+
+const PassConfiguration = () => {
+    return (
+        <div className={styles.configurationDetails}>
+            <div className={styles.criteria}>Blocking criteria</div>
+            <div className={styles.criteria}>Matching criteria</div>
+            <div className={styles.matchingBounds}>Matching criteria</div>
+        </div>
+    );
+};
+
+export default PassConfiguration;

apps/modernization-ui/src/apps/dedup-config/NoDataElements.module.scss

@@ -0,0 +1,21 @@
+@use 'styles/colors';
+
+.content {
+    display: flex;
+    padding: 1.5rem;
+    flex-direction: column;
+    align-items: center;
+    background-color: colors.$base-white;
+    margin: 1rem;
+
+    .heading {
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    .configButton {
+        margin-bottom: 2.25rem;
+    }
+}

apps/modernization-ui/src/apps/dedup-config/NoDataElementsContent.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@trussworks/react-uswds';
+import styles from './NoDataElements.module.scss';
+
+type Props = {
+    onConfigClick: () => void;
+};
+
+const NoDataElements = ({ onConfigClick }: Props) => {
+    return (
+        <div className={styles.content}>
+            <h3 className={styles.heading}>Data elements not configured</h3>
+            <p>
+                To get started configuring the algorithm, the data elements the algorithm will use must first be
+                configured.
+            </p>
+            <Button type={'button'} onClick={onConfigClick} className={styles.configButton}>
+                Configure data elements
+            </Button>
+        </div>
+    );
+};
+
+export default NoDataElements;

apps/modernization-ui/src/apps/dedup-config/PatientMatchConfig.module.scss

@@ -5,6 +5,8 @@
     background-color: colors.$base-white;
     justify-content: space-between;
     padding: 1rem;
+    border-bottom: 1px solid colors.$base-lighter;
+
     .dataConfigButton {
         text-decoration: none !important;
     }

apps/modernization-ui/src/apps/dedup-config/PatientMatchConfiguration.tsx

@@ -2,9 +2,17 @@ import styles from './PatientMatchConfig.module.scss';
 import { Button, Icon } from '@trussworks/react-uswds';
 import DataElementsConfiguration from './DataElementsConfiguration/DataElementsConfiguration';
 import { useDedupeContext } from './context/DedupeContext';
+import { useDataElementsContext } from './context/DataElementsContext';
+import NoDataElements from './NoDataElementsContent';
+import MatchConfiguration from './MatchConfiguration/MatchConfiguration';
 
 const PatientMatchConfiguration = () => {
     const { mode, setMode } = useDedupeContext();
+    const { dataElements } = useDataElementsContext();
+
+    const handleSetDataMode = () => {
+        setMode('data');
+    };
 
     return (
         <div>
@@ -14,15 +22,11 @@ const PatientMatchConfiguration = () => {
                 <>
                     <div className={styles.header}>
                         <h2>Patient match configuration</h2>
-                        <Button
-                            unstyled
-                            type="button"
-                            className={styles.dataConfigButton}
-                            onClick={() => setMode('data')}>
+                        <Button unstyled type="button" className={styles.dataConfigButton} onClick={handleSetDataMode}>
                             <Icon.Settings size={3} /> Data elements configuration
                         </Button>
                     </div>
-                    <div className={styles.content}>CONTENT</div>
+                    {!dataElements ? <NoDataElements onConfigClick={handleSetDataMode} /> : <MatchConfiguration />}
                 </>
             )}
         </div>

apps/modernization-ui/src/apps/dedup-config/context/DataElementsContext.tsx

@@ -3,7 +3,7 @@ import React, { createContext, useContext, useState } from 'react';
 const DataElementsContext = createContext<DataElementsContextProps | undefined>(undefined);
 
 type DataElementsContextProps = {
-    dataElements: typeof DataElements;
+    dataElements: typeof DataElements | null;
     setDataElements: (dataElements: typeof DataElements) => void;
 };
 
@@ -31,6 +31,7 @@ const DataElementsContextProvider: React.FC<{
     children: React.ReactNode;
 }> = ({ children }) => {
     const [dataElements, setDataElements] = useState(DataElements);
+
     return (
         <DataElementsContext.Provider value={{ dataElements, setDataElements }}>
             {children}
@@ -40,9 +41,11 @@ const DataElementsContextProvider: React.FC<{
 
 export const useDataElementsContext = () => {
     const context = useContext(DataElementsContext);
+
     if (context === undefined) {
         throw new Error('useDataElementsContext must be used inside DataElementsContextProvider');
     }
+
     return context;
 };