Pass config init layout (#1784)

* [FIX] Patient sorting (#1766)

* local environment

* adds support for legalname sorting

* Clear county when state value is cleared. Hook error fix (#1756)

* Clear county when state value is cleared. Hook error fix

* Make better

---------

Co-authored-by: Michael Peels <michaelpeels@Michael-Peels.local>

* [CNFT1-2939] List view sort options (#1769)

* sorting preferences

* saving list sorting

* passing down size prop (#1773)

* init

* fix linting

---------

Co-authored-by: Adam Loup <124325935+adamloup-enquizit@users.noreply.github.com>
Co-authored-by: Michael Peels <109251240+mpeels@users.noreply.github.com>
Co-authored-by: Michael Peels <michaelpeels@Michael-Peels.local>
Co-authored-by: Henry Clark <111446161+hclarkEnq@users.noreply.github.com>

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 
 # local environment set up
 application-local.yml
+
 local.env
 .env
 

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

@@ -72,5 +72,6 @@
 
     .configurationDetails {
         width: 100rem;
+        margin-top: 1.5rem;
     }
 }

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

@@ -13,7 +13,8 @@ type ConfigurationListItem = {
 
 const MatchConfiguration = () => {
     const [configurations, setConfigurations] = useState<ConfigurationListItem[]>([]);
-    const [selectedConfigurationIndex, setSelectedConfigurationIndex] = useState<number>(0);
+    const [selectedConfigurationIndex, setSelectedConfigurationIndex] = useState<number | null>(null);
+    const [isEditingConfiguration, setIsEditingConfiguration] = useState<boolean>(false);
 
     const handleAddConfiguration = () => {
         const configs = [...configurations];
@@ -24,12 +25,16 @@ const MatchConfiguration = () => {
         });
         setConfigurations(configs);
         setSelectedConfigurationIndex(configurations.length);
+        setIsEditingConfiguration(true);
     };
 
     const handleConfigListItemClick = (index: number) => {
         setSelectedConfigurationIndex(index);
+        setIsEditingConfiguration(true);
     };
 
+    const showConfiguration = isEditingConfiguration && configurations.length;
+
     return (
         <div className={styles.wrapper}>
             <div className={styles.configurationList}>
@@ -56,7 +61,7 @@ const MatchConfiguration = () => {
                 </Button>
             </div>
             <div className={styles.configurationDetails}>
-                {selectedConfigurationIndex ? <PassConfiguration /> : <NoPassConfigurations />}
+                {showConfiguration ? <PassConfiguration /> : <NoPassConfigurations />}
             </div>
         </div>
     );

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

@@ -3,5 +3,24 @@
 .criteria {
     background-color: colors.$base-white;
     margin-bottom: 1rem;
-    padding: 1.5rem;
+    border: 1px solid colors.$base-lighter;
+    border-radius: 0.3125rem;
+
+    &.disabled {
+        background-color: colors.$disabled-light;
+    }
+
+    .criteriaHeadingContainer {
+        padding: 1.5rem;
+        border-bottom: 1px solid colors.$base-lighter;
+    }
+
+    .criteriaContentContainer {
+        padding: 1.5rem;
+
+        .criteriaRequest {
+            border-bottom: 1px solid colors.$base-lighter;
+            padding-bottom: 1.5rem;
+        }
+    }
 }

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

@@ -1,11 +1,38 @@
+import { Button, Icon } from '@trussworks/react-uswds';
 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 bounds</div>
+            <div className={styles.criteria}>
+                <div className={styles.criteriaHeadingContainer}>
+                    <h4>Blocking criteria</h4>
+                    <span>Include records that meet all these conditions</span>
+                </div>
+                <div className={styles.criteriaContentContainer}>
+                    <p className={styles.criteriaRequest}>Please add blocking criteria to get started</p>
+                    <Button unstyled type={'button'}>
+                        <Icon.Add />
+                        Add blocking criteria
+                    </Button>
+                </div>
+            </div>
+            <div className={`${styles.criteria} ${styles.disabled}`}>
+                <div className={styles.criteriaHeadingContainer}>
+                    <h4>Matching criteria</h4>
+                    <span>Include records that meet all these conditions</span>
+                </div>
+                <div className={styles.criteriaContentContainer}>
+                    <p className={styles.criteriaRequest}>Please add a matching attribute to continue</p>
+                    <Button unstyled type={'button'} disabled>
+                        <Icon.Add />
+                        Add matching criteria
+                    </Button>
+                </div>
+            </div>
+            <div className={styles.matchingBounds}>
+                <h4>Matching bounds</h4>
+            </div>
         </div>
     );
 };