From 4df4c58263ce29d0ad524a1be2f7d4eb654e5520 Mon Sep 17 00:00:00 2001
From: Adam Loup <124325935+adamloup-enquizit@users.noreply.github.com>
Date: Wed, 4 Sep 2024 13:08:01 -0500
Subject: [PATCH 1/6] [FIX] Patient sorting (#1766)

* local environment

* adds support for legalname sorting
---
 .gitignore                                    |  5 +-
 .../PatientSearchCriteriaSortResolver.java    | 44 ++++++++++--------
 .../test/java/gov/cdc/nbs/RunCucumber.java    |  2 +-
 .../search/PatientSearchSortingSteps.java     |  2 +
 .../PatientSearchVerificationSteps.java       |  7 +--
 .../search/PatientSearch.sorting.feature      | 46 ++++++++++++++++---
 6 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0bf9acd6e1..108c2495a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,7 +28,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# local environment set up
 application-local.yml
-
-# merged .graphqls files used in code generation
-ui/src/generated/schema.graphqls
\ No newline at end of file
+local.env
\ No newline at end of file
diff --git a/apps/modernization-api/src/main/java/gov/cdc/nbs/patient/search/PatientSearchCriteriaSortResolver.java b/apps/modernization-api/src/main/java/gov/cdc/nbs/patient/search/PatientSearchCriteriaSortResolver.java
index 60e2432e56..bddb5d3123 100644
--- a/apps/modernization-api/src/main/java/gov/cdc/nbs/patient/search/PatientSearchCriteriaSortResolver.java
+++ b/apps/modernization-api/src/main/java/gov/cdc/nbs/patient/search/PatientSearchCriteriaSortResolver.java
@@ -7,6 +7,7 @@
 import org.springframework.stereotype.Component;
 
 import java.util.List;
+import java.util.stream.Stream;
 
 import static gov.cdc.nbs.search.SearchSorting.asSortOption;
 import static gov.cdc.nbs.search.SearchSorting.asSortOrder;
@@ -18,31 +19,34 @@ class PatientSearchCriteriaSortResolver {
   List<SortOptions> resolve(final Pageable pageable) {
     return pageable.getSort()
         .stream()
-        .map(this::asOption)
+        .flatMap(this::asOption)
         .toList();
   }
 
-  private SortOptions asOption(final Sort.Order sorting) {
+  private Stream<SortOptions> asOption(final Sort.Order sorting) {
     SortOrder order = asSortOrder(sorting.getDirection());
 
-    return switch (sorting.getProperty()) {
-      case ADDRESS -> asSortOption(ADDRESS, "address.streetAddr1.keyword", order);
-      case "birthTime" -> asSortOption("birth_time", order);
-      case "city" -> asSortOption(ADDRESS, "address.city.keyword", order);
-      case "county" -> asSortOption(ADDRESS, "address.cntyText.keyword", order);
-      case "country" -> asSortOption(ADDRESS, "address.cntryText.keyword", order);
-      case "email" -> asSortOption("email", "email.emailAddress.keyword", order);
-      case "firstNm" -> asSortOption("name", "name.firstNm.keyword", order);
-      case "id" -> asSortOption("patient", order);
-      case "identification" -> asSortOption("entity_id", "entity_id.rootExtensionTxt.keyword", order);
-      case "lastNm" -> asSortOption("name", "name.lastNm.keyword", order);
-      case "phoneNumber" -> asSortOption("phone", "phone.telephoneNbr.keyword", order);
-      case "relevance" -> asSortOption("_score", order);
-      case "state" -> asSortOption(ADDRESS, "address.stateText.keyword", order);
-      case "sex" -> asSortOption("curr_sex_cd", order);
-      case "zip" -> asSortOption(ADDRESS, "address.zip.keyword", order);
-      // local_id :
-      default -> asSortOption(sorting.getProperty(), order);
+    return switch (sorting.getProperty().toLowerCase()) {
+      case "patientid" -> Stream.of(asSortOption("local_id", order));
+      case "legalname" -> Stream.of(
+          asSortOption("name", "name.lastNm.keyword", order),
+          asSortOption("name", "name.firstNm.keyword", order)
+      );
+      case "lastnm" -> Stream.of(asSortOption("name", "name.lastNm.keyword", order));
+      case "firstnm" -> Stream.of(asSortOption("name", "name.firstNm.keyword", order));
+      case ADDRESS -> Stream.of(asSortOption(ADDRESS, "address.streetAddr1.keyword", order));
+      case "birthtime", "birthday" -> Stream.of(asSortOption("birth_time", order));
+      case "city" -> Stream.of(asSortOption(ADDRESS, "address.city.keyword", order));
+      case "county" -> Stream.of(asSortOption(ADDRESS, "address.cntyText.keyword", order));
+      case "country" -> Stream.of(asSortOption(ADDRESS, "address.cntryText.keyword", order));
+      case "email" -> Stream.of(asSortOption("email", "email.emailAddress.keyword", order));
+      case "id" -> Stream.of(asSortOption("patient", order));
+      case "identification" -> Stream.of(asSortOption("entity_id", "entity_id.rootExtensionTxt.keyword", order));
+      case "phonenumber" -> Stream.of(asSortOption("phone", "phone.telephoneNbr.keyword", order));
+      case "state" -> Stream.of(asSortOption(ADDRESS, "address.stateText.keyword", order));
+      case "sex" -> Stream.of(asSortOption("curr_sex_cd", order));
+      case "zip" -> Stream.of(asSortOption(ADDRESS, "address.zip.keyword", order));
+      default -> Stream.of(asSortOption("_score", order));
     };
   }
 }
diff --git a/apps/modernization-api/src/test/java/gov/cdc/nbs/RunCucumber.java b/apps/modernization-api/src/test/java/gov/cdc/nbs/RunCucumber.java
index bd17d92d46..fee3a07f74 100644
--- a/apps/modernization-api/src/test/java/gov/cdc/nbs/RunCucumber.java
+++ b/apps/modernization-api/src/test/java/gov/cdc/nbs/RunCucumber.java
@@ -30,7 +30,7 @@
 @CucumberContextConfiguration
 @SpringBootTest
 @Import(PatientLocalIdentifierGeneratorTestConfiguration.class)
-@ActiveProfiles({"default", "test"})
+@ActiveProfiles({"default", "test", "local"})
 @AutoConfigureMockMvc
 @Testcontainers
 @EmbeddedNbsDatabase
diff --git a/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchSortingSteps.java b/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchSortingSteps.java
index 93b7caf927..e78923e591 100644
--- a/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchSortingSteps.java
+++ b/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchSortingSteps.java
@@ -18,9 +18,11 @@ public void i_want_patients_sorted_by(final String sortBy, final String directio
     Sort.Direction sortDirection = direction.equalsIgnoreCase("desc") ? Sort.Direction.DESC : Sort.Direction.ASC;
 
     String field = switch (sortBy.toLowerCase()) {
+      case "local_id", "patient id" -> "patientid";
       case "birthday" -> "birthTime";
       case "first name" -> "firstNm";
       case "last name" -> "lastNm";
+      case "legal name" -> "legalName";
       case "phone" -> "phoneNumber";
       default -> sortBy.toLowerCase();
     };
diff --git a/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchVerificationSteps.java b/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchVerificationSteps.java
index 0b5641c3dd..933ab0cde5 100644
--- a/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchVerificationSteps.java
+++ b/apps/modernization-api/src/test/java/gov/cdc/nbs/patient/search/PatientSearchVerificationSteps.java
@@ -45,7 +45,8 @@ public void i_am_not_able_to_execute_the_search() throws Exception {
   public void search_result_n_has_a_x_of_y(
       final int position,
       final String field,
-      final String value) throws Exception {
+      final String value
+  ) throws Exception {
 
     int index = position - 1;
 
@@ -118,7 +119,7 @@ private JsonPathResultMatchers matchingPath(final String field, final String pos
           "$.data.findPatientsByFilter.content[%s].identification[*].value",
           position
       );
-      case "local id" -> jsonPath("$.data.findPatientsByFilter.content[%s].shortId", position);
+      case "patientid", "patient id", "short id" -> jsonPath("$.data.findPatientsByFilter.content[%s].shortId", position);
       default -> throw new AssertionError("Unexpected property check %s".formatted(field));
     };
   }
@@ -126,7 +127,7 @@ private JsonPathResultMatchers matchingPath(final String field, final String pos
   private Matcher<?> matchingValue(final String field, final String value) {
     return switch (field.toLowerCase()) {
       case "birthday", "sex" -> equalTo(value);
-      case "local id" -> equalTo(Integer.parseInt(value));
+      case "patientid","patient id", "short id" -> equalTo(Integer.parseInt(value));
       case "status" -> hasItem(PatientStatusCriteriaResolver.resolve(value).name());
       default -> hasItem(value);
     };
diff --git a/apps/modernization-api/src/test/resources/features/patient/search/PatientSearch.sorting.feature b/apps/modernization-api/src/test/resources/features/patient/search/PatientSearch.sorting.feature
index 22eb954384..e00bd64121 100644
--- a/apps/modernization-api/src/test/resources/features/patient/search/PatientSearch.sorting.feature
+++ b/apps/modernization-api/src/test/resources/features/patient/search/PatientSearch.sorting.feature
@@ -32,6 +32,38 @@ Feature: Patient Search Sorting
     And search result 2 has a "birthday" of "1987-01-15"
     And search result 3 has a "birthday" of "1974-05-29"
 
+  Scenario: I can find the most relevant patient when sorting by legal name  ascending
+    Given the patient has the "legal" name "Wanda" "Maximoff"
+    And I have another patient
+    And the patient has the "legal" name "Helen" "Cho"
+    And I have another patient
+    And the patient has the "legal" name "Pietro" "Maximoff"
+    And patients are available for search
+    And I want patients sorted by "legal name" "asc"
+    When I search for patients
+    Then search result 1 has a "first name" of "Helen"
+    And search result 1 has a "last name" of "Cho"
+    And search result 2 has a "first name" of "Pietro"
+    And search result 2 has a "last name" of "Maximoff"
+    And search result 3 has a "first name" of "Wanda"
+    And search result 3 has a "last name" of "Maximoff"
+
+  Scenario: I can find the most relevant patient when sorting by legal name descending
+    Given the patient has the "legal" name "Wanda" "Maximoff"
+    And I have another patient
+    And the patient has the "legal" name "Helen" "Cho"
+    And I have another patient
+    And the patient has the "legal" name "Pietro" "Maximoff"
+    And patients are available for search
+    And I want patients sorted by "last name" "desc"
+    When I search for patients
+    Then search result 1 has a "first name" of "Wanda"
+    And search result 1 has a "last name" of "Maximoff"
+    And search result 2 has a "first name" of "Pietro"
+    And search result 2 has a "last name" of "Maximoff"
+    And search result 3 has a "first name" of "Helen"
+    And search result 3 has a "last name" of "Cho"
+
   Scenario: I can find the most relevant patient when sorting by last name  ascending
     Given the patient has the "legal" name "Timothy" "Jackson"
     And I have another patient
@@ -281,9 +313,9 @@ Feature: Patient Search Sorting
     And patients are available for search
     And I want patients sorted by "local_id" "asc"
     When I search for patients
-    Then search result 1 has an "local id" of "120"
-    And search result 2 has an "local id" of "220"
-    And search result 3 has an "local id" of "320"
+    Then search result 1 has a "patient id" of "120"
+    And search result 2 has a "patient id" of "220"
+    And search result 3 has a "patient id" of "320"
 
   Scenario: I can find the most relevant patient when sorting by local id descending
     Given the patient has an "local id" of "PSN10000120GA01"
@@ -292,11 +324,11 @@ Feature: Patient Search Sorting
     And I have another patient
     And the patient has an "local id" of "PSN10000220GA01"
     And patients are available for search
-    And I want patients sorted by "local_id" "desc"
+    And I want patients sorted by "patient id" "desc"
     When I search for patients
-    Then search result 1 has an "local id" of "320"
-    And search result 2 has an "local id" of "220"
-    And search result 3 has an "local id" of "120"
+    Then search result 1 has a "patient id" of "320"
+    And search result 2 has a "patient id" of "220"
+    And search result 3 has a "patient id" of "120"
 
   Scenario: I can find the most relevant patient when sorting by state ascending
     Given the patient has a "state" of "01"

From 523cc08599fea97dab591dd44a782949b94023c8 Mon Sep 17 00:00:00 2001
From: Michael Peels <109251240+mpeels@users.noreply.github.com>
Date: Thu, 5 Sep 2024 09:49:51 -0400
Subject: [PATCH 2/6] 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>
---
 .../sexBirth/BirthAndGenderEntryFields.tsx    | 20 ++++++++++---------
 .../src/location/useCountyCodedValues.ts      |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/modernization-ui/src/apps/patient/profile/sexBirth/BirthAndGenderEntryFields.tsx b/apps/modernization-ui/src/apps/patient/profile/sexBirth/BirthAndGenderEntryFields.tsx
index c596ffd5d2..e96a244c3e 100644
--- a/apps/modernization-ui/src/apps/patient/profile/sexBirth/BirthAndGenderEntryFields.tsx
+++ b/apps/modernization-ui/src/apps/patient/profile/sexBirth/BirthAndGenderEntryFields.tsx
@@ -3,8 +3,8 @@ import { DatePickerInput } from 'components/FormInputs/DatePickerInput';
 import { Input } from 'components/FormInputs/Input';
 import { SelectInput } from 'components/FormInputs/SelectInput';
 import { calculateAge } from 'date';
-import { CountiesCodedValues, useCountyCodedValues } from 'location';
-import { useMemo } from 'react';
+import { useCountyCodedValues } from 'location';
+import { useEffect, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { maxLengthRule } from 'validation/entry';
 import { BirthAndGenderEntry } from './BirthAndGenderEntry';
@@ -13,20 +13,22 @@ import { usePatientSexBirthCodedValues } from './usePatientSexBirthCodedValues';
 const UNKNOWN_GENDER = 'U';
 
 export const BirthAndGenderEntryFields = () => {
-    const { control } = useFormContext<BirthAndGenderEntry>();
+    const { control, setValue } = useFormContext<BirthAndGenderEntry>();
     const currentBirthday = useWatch({ control, name: 'birth.bornOn' });
-
     const age = useMemo(() => calculateAge(currentBirthday), [currentBirthday]);
-
     const selectedCurrentGender = useWatch({ control, name: 'gender.current' });
-
     const selectedState = useWatch({ control, name: 'birth.state' });
-
     const selectedMultipleBirth = useWatch({ control, name: 'birth.multipleBirth' });
 
     const coded = usePatientSexBirthCodedValues();
 
-    const byState: CountiesCodedValues = selectedState ? useCountyCodedValues(selectedState) : { counties: [] };
+    const { counties } = useCountyCodedValues(selectedState);
+
+    useEffect(() => {
+        if (!selectedState) {
+            setValue('birth.county', '');
+        }
+    }, [selectedState]);
 
     return (
         <section>
@@ -244,7 +246,7 @@ export const BirthAndGenderEntryFields = () => {
                         id={name}
                         name={name}
                         htmlFor={name}
-                        options={byState.counties}
+                        options={counties}
                     />
                 )}
             />
diff --git a/apps/modernization-ui/src/location/useCountyCodedValues.ts b/apps/modernization-ui/src/location/useCountyCodedValues.ts
index af4efcdcc6..d0760ed247 100644
--- a/apps/modernization-ui/src/location/useCountyCodedValues.ts
+++ b/apps/modernization-ui/src/location/useCountyCodedValues.ts
@@ -30,7 +30,7 @@ type CountiesCodedValues = {
     counties: GroupedCodedValue[];
 };
 
-const useCountyCodedValues = (state?: string | undefined) => {
+const useCountyCodedValues = (state?: string | undefined | null) => {
     const [coded, setCoded] = useState<CountiesCodedValues>(initial);
 
     const [getCodedValues] = useCodedValueQuery({ onCompleted: setCoded });

From 40987d41672df29a9c30cf4b18c911f9c408f3d8 Mon Sep 17 00:00:00 2001
From: Adam Loup <124325935+adamloup-enquizit@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:55:08 -0500
Subject: [PATCH 3/6] [CNFT1-2939] List view sort options (#1769)

* sorting preferences

* saving list sorting
---
 .../src/apps/search/basic/BasicPatient.tsx    |  12 ++
 .../investigation/InvestigationSearch.tsx     |  56 ++++----
 .../LaboratoryReportSearch.tsx                |  47 ++++---
 .../options/list/SearchResultsListOptions.tsx |  70 +++-------
 .../search-results-list-options.module.scss   |  26 +---
 .../search/layout/search-layout.module.scss   |   2 -
 .../src/apps/search/patient/PatientSearch.tsx |  40 +++---
 .../src/design-system/icon/Icon.tsx           |   6 +-
 .../src/design-system/icon/icon.module.scss   |   5 +
 .../panel/closable/ClosablePanel.spec.tsx     | 104 ++++++++++++++
 .../panel/closable/ClosablePanel.tsx          |  57 ++++++++
 .../panel/closable/closable-panel.module.scss |  26 ++++
 .../src/design-system/panel/closable/index.ts |   2 +
 .../sorting/preferences/SortPreference.tsx    |  22 +++
 .../preferences/SortingPreferencesPanel.tsx   |  23 ++++
 .../sorting/preferences/index.ts              |   3 +
 .../sorting/preferences/selectable.ts         |   9 ++
 .../preferences/sort-preference.module.scss   |  30 ++++
 .../useSortingPreferences.spec.tsx            | 124 +++++++++++++++++
 .../preferences/useSortingPreferences.tsx     | 130 ++++++++++++++++++
 .../src/sorting/useSorting.tsx                |   1 -
 .../modernization-ui/src/styles/_tooltip.scss |   2 +-
 apps/modernization-ui/tsconfig.json           |   2 +
 23 files changed, 660 insertions(+), 139 deletions(-)
 create mode 100644 apps/modernization-ui/src/design-system/icon/icon.module.scss
 create mode 100644 apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.spec.tsx
 create mode 100644 apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.tsx
 create mode 100644 apps/modernization-ui/src/design-system/panel/closable/closable-panel.module.scss
 create mode 100644 apps/modernization-ui/src/design-system/panel/closable/index.ts
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/SortPreference.tsx
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/SortingPreferencesPanel.tsx
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/index.ts
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/selectable.ts
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/sort-preference.module.scss
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.spec.tsx
 create mode 100644 apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.tsx

diff --git a/apps/modernization-ui/src/apps/search/basic/BasicPatient.tsx b/apps/modernization-ui/src/apps/search/basic/BasicPatient.tsx
index 40c9947b6e..eb52b6b951 100644
--- a/apps/modernization-ui/src/apps/search/basic/BasicPatient.tsx
+++ b/apps/modernization-ui/src/apps/search/basic/BasicPatient.tsx
@@ -2,6 +2,8 @@ import { Link } from 'react-router-dom';
 import { displayName } from 'name';
 import { asSelectableGender } from 'options/gender';
 import { Mapping, Maybe } from 'utils';
+import { SortingSelectable } from 'design-system/sorting/preferences';
+import { Direction } from 'sorting';
 
 type BasicPatient = {
     birthTime?: string | null;
@@ -28,3 +30,13 @@ const displayProfileLink = (patient: Maybe<BasicPatient>) => (
 const displayGender = (patient: Maybe<BasicPatient>) => asSelectableGender(patient?.currSexCd)?.name;
 
 export { withPatient, displayProfileLink, displayGender };
+
+const sorting: SortingSelectable[] = [
+    { property: 'relavance', direction: Direction.Descending, name: 'Closest match' },
+    { property: 'legalName', direction: Direction.Ascending, name: 'Patient name (A-Z)' },
+    { property: 'legalName', direction: Direction.Descending, name: 'Patient name (Z-A)' },
+    { property: 'birthday', direction: Direction.Ascending, name: 'Date of birth (Ascending)' },
+    { property: 'birthday', direction: Direction.Descending, name: 'Date of birth (Descending)' }
+];
+
+export { sorting };
diff --git a/apps/modernization-ui/src/apps/search/investigation/InvestigationSearch.tsx b/apps/modernization-ui/src/apps/search/investigation/InvestigationSearch.tsx
index f552b3820d..b3a28f11ab 100644
--- a/apps/modernization-ui/src/apps/search/investigation/InvestigationSearch.tsx
+++ b/apps/modernization-ui/src/apps/search/investigation/InvestigationSearch.tsx
@@ -4,6 +4,8 @@ import { findByValue } from 'options';
 import { SearchLayout, SearchResultList } from 'apps/search/layout';
 import { useSearchResultDisplay } from 'apps/search/useSearchResultDisplay';
 import { Investigation } from 'generated/graphql/schema';
+import { SortingPreferenceProvider } from 'design-system/sorting/preferences';
+import { sorting } from 'apps/search/basic';
 import { InvestigationSearchResultListItem } from './result/list';
 import { InvestigationSearchForm } from './InvestigationSearchForm';
 import { InvestigationFilterEntry } from './InvestigationFormTypes';
@@ -34,32 +36,34 @@ const InvestigationSearch = () => {
 
     return (
         <ColumnPreferenceProvider id="search.investigations.preferences.columns" defaults={preferences}>
-            <FormProvider {...form}>
-                <SearchLayout
-                    onRemoveTerm={handleRemoveTerm}
-                    criteria={() => <InvestigationSearchForm />}
-                    resultsAsList={() => (
-                        <SearchResultList<Investigation>
-                            results={results}
-                            render={(result) => (
-                                <InvestigationSearchResultListItem
-                                    result={result}
-                                    notificationStatusResolver={notificationStatusResolver}
-                                />
-                            )}
-                        />
-                    )}
-                    resultsAsTable={() => (
-                        <InvestigationSearchResultsTable
-                            results={results}
-                            notificationStatusResolver={notificationStatusResolver}
-                        />
-                    )}
-                    searchEnabled={enabled}
-                    onSearch={search}
-                    onClear={clear}
-                />
-            </FormProvider>
+            <SortingPreferenceProvider id="search.investigations.preferences.sorting" available={sorting}>
+                <FormProvider {...form}>
+                    <SearchLayout
+                        onRemoveTerm={handleRemoveTerm}
+                        criteria={() => <InvestigationSearchForm />}
+                        resultsAsList={() => (
+                            <SearchResultList<Investigation>
+                                results={results}
+                                render={(result) => (
+                                    <InvestigationSearchResultListItem
+                                        result={result}
+                                        notificationStatusResolver={notificationStatusResolver}
+                                    />
+                                )}
+                            />
+                        )}
+                        resultsAsTable={() => (
+                            <InvestigationSearchResultsTable
+                                results={results}
+                                notificationStatusResolver={notificationStatusResolver}
+                            />
+                        )}
+                        searchEnabled={enabled}
+                        onSearch={search}
+                        onClear={clear}
+                    />
+                </FormProvider>
+            </SortingPreferenceProvider>
         </ColumnPreferenceProvider>
     );
 };
diff --git a/apps/modernization-ui/src/apps/search/laboratory-report/LaboratoryReportSearch.tsx b/apps/modernization-ui/src/apps/search/laboratory-report/LaboratoryReportSearch.tsx
index 3c54ef22b0..15feca0c13 100644
--- a/apps/modernization-ui/src/apps/search/laboratory-report/LaboratoryReportSearch.tsx
+++ b/apps/modernization-ui/src/apps/search/laboratory-report/LaboratoryReportSearch.tsx
@@ -3,6 +3,8 @@ import { SearchLayout, SearchResultList } from 'apps/search/layout';
 import { removeTerm } from 'apps/search/terms';
 import { useSearchResultDisplay } from 'apps/search/useSearchResultDisplay';
 import { LabReport } from 'generated/graphql/schema';
+import { SortingPreferenceProvider } from 'design-system/sorting/preferences';
+import { sorting } from 'apps/search/basic';
 import { useLaboratoryReportSearch } from './useLaboratoryReportSearch';
 import { LabReportFilterEntry, initial as defaultValues } from './labReportFormTypes';
 import { LaboratoryReportSearchResultListItem } from './result/list';
@@ -34,26 +36,31 @@ const LaboratoryReportSearch = () => {
 
     return (
         <ColumnPreferenceProvider id="search.laboratory-reports.preferences.columns" defaults={preferences}>
-            <FormProvider {...form}>
-                <SearchLayout
-                    onRemoveTerm={handleRemoveTerm}
-                    criteria={() => <LaboratoryReportSearchCriteria />}
-                    resultsAsList={() => (
-                        <SearchResultList<LabReport>
-                            results={results}
-                            render={(result) => (
-                                <LaboratoryReportSearchResultListItem result={result} jurisdictionResolver={findById} />
-                            )}
-                        />
-                    )}
-                    resultsAsTable={() => (
-                        <LaboratoryReportSearchResultsTable results={results} jurisdictionResolver={findById} />
-                    )}
-                    searchEnabled={enabled}
-                    onSearch={search}
-                    onClear={clear}
-                />
-            </FormProvider>
+            <SortingPreferenceProvider id="search.laboratory-reports.preferences.sorting" available={sorting}>
+                <FormProvider {...form}>
+                    <SearchLayout
+                        onRemoveTerm={handleRemoveTerm}
+                        criteria={() => <LaboratoryReportSearchCriteria />}
+                        resultsAsList={() => (
+                            <SearchResultList<LabReport>
+                                results={results}
+                                render={(result) => (
+                                    <LaboratoryReportSearchResultListItem
+                                        result={result}
+                                        jurisdictionResolver={findById}
+                                    />
+                                )}
+                            />
+                        )}
+                        resultsAsTable={() => (
+                            <LaboratoryReportSearchResultsTable results={results} jurisdictionResolver={findById} />
+                        )}
+                        searchEnabled={enabled}
+                        onSearch={search}
+                        onClear={clear}
+                    />
+                </FormProvider>
+            </SortingPreferenceProvider>
         </ColumnPreferenceProvider>
     );
 };
diff --git a/apps/modernization-ui/src/apps/search/layout/result/header/options/list/SearchResultsListOptions.tsx b/apps/modernization-ui/src/apps/search/layout/result/header/options/list/SearchResultsListOptions.tsx
index f8dca0d856..737807704d 100644
--- a/apps/modernization-ui/src/apps/search/layout/result/header/options/list/SearchResultsListOptions.tsx
+++ b/apps/modernization-ui/src/apps/search/layout/result/header/options/list/SearchResultsListOptions.tsx
@@ -1,62 +1,32 @@
-import { ButtonActionMenu } from 'components/ButtonActionMenu/ButtonActionMenu';
-import styles from './search-results-list-options.module.scss';
-import { Direction, useSorting } from 'sorting';
-import { SortField } from 'generated/graphql/schema';
-import { useEffect } from 'react';
 import { Button } from 'components/button';
 import { Icon } from 'design-system/icon';
-import classNames from 'classnames';
+import { SortingPreferencesPanel } from 'design-system/sorting/preferences';
+import { OverlayPanel } from 'overlay';
+
+import styles from './search-results-list-options.module.scss';
 
 type Props = {
     disabled?: boolean;
 };
 
 const SearchResultsListOptions = ({ disabled = false }: Props) => {
-    const { sortBy, property, direction } = useSorting();
-
-    const savePreferences = (selection: SortField, direction: Direction) => {
-        localStorage.setItem('searchResultsSortBy', selection);
-        localStorage.setItem('searchResultsSortDirection', direction);
-    };
-
-    useEffect(() => {
-        const sortName = localStorage.getItem('searchResultsSortBy');
-        const sortDirection = localStorage.getItem('searchResultsSortDirection');
-
-        if (sortName && sortDirection) {
-            sortBy(sortName, sortDirection as Direction);
-        }
-    }, []);
-
-    const isActive = (field: SortField, dir: Direction) => property === field && direction === dir;
-
-    const renderSortButton = (field: SortField, dir: Direction, label: string) => (
-        <Button
-            className={classNames(styles.optionItem, { [styles.active]: isActive(field, dir) })}
-            icon={isActive(field, dir) ? <Icon name="check" className={styles.check} /> : undefined}
-            labelPosition="right"
-            type="button"
-            onClick={() => {
-                sortBy(field, dir);
-                savePreferences(field, dir);
-            }}>
-            {label}
-        </Button>
-    );
-
     return (
-        <ButtonActionMenu
-            className={styles.option}
-            ariaLabel="Sort by list"
-            outline
-            icon={<Icon className={styles.sortArrow} name="sort_arrow" />}
-            disabled={disabled}>
-            {renderSortButton(SortField.Relevance, Direction.Descending, 'Closest match')}
-            {renderSortButton(SortField.LastNm, Direction.Ascending, 'Patient name (A-Z)')}
-            {renderSortButton(SortField.LastNm, Direction.Descending, 'Patient name (Z-A)')}
-            {renderSortButton(SortField.BirthTime, Direction.Ascending, 'Date of birth (Ascending)')}
-            {renderSortButton(SortField.BirthTime, Direction.Descending, 'Date of birth (Descending)')}
-        </ButtonActionMenu>
+        <OverlayPanel
+            className={styles.options}
+            position="right"
+            toggle={({ toggle }) => (
+                <Button
+                    className={styles.opener}
+                    aria-label="Sort settings"
+                    data-tooltip-position="top"
+                    outline
+                    disabled={disabled}
+                    icon={<Icon name="sort_arrow" className={styles.icon} />}
+                    onClick={toggle}
+                />
+            )}
+            render={(close) => <SortingPreferencesPanel onClose={close} />}
+        />
     );
 };
 
diff --git a/apps/modernization-ui/src/apps/search/layout/result/header/options/list/search-results-list-options.module.scss b/apps/modernization-ui/src/apps/search/layout/result/header/options/list/search-results-list-options.module.scss
index 11b710f3b6..a08ffcc66b 100644
--- a/apps/modernization-ui/src/apps/search/layout/result/header/options/list/search-results-list-options.module.scss
+++ b/apps/modernization-ui/src/apps/search/layout/result/header/options/list/search-results-list-options.module.scss
@@ -1,26 +1,14 @@
 @use 'styles/colors.scss';
 
-.option {
-    .sortArrow {
-        width: 1.75rem;
-        height: 1.75rem;
-        margin: 0;
-        fill: colors.$primary;
-    }
+.options {
+    --modal-min-width: max-content;
 }
 
-.optionItem {
-    padding: 0.625rem 2.75rem !important;
-    gap: 0.5rem !important;
+.opener {
+    color: colors.$primary;
 
-    &.active {
-        padding: 0.625rem 1rem !important;
-
-        .check {
-            width: 1.25rem;
-            height: 1.25rem;
-            margin: 0 !important;
-            fill: colors.$primary;
-        }
+    .icon {
+        width: 1.75rem;
+        height: 1.75rem;
     }
 }
diff --git a/apps/modernization-ui/src/apps/search/layout/search-layout.module.scss b/apps/modernization-ui/src/apps/search/layout/search-layout.module.scss
index 95d7e9c13f..c19ded3567 100644
--- a/apps/modernization-ui/src/apps/search/layout/search-layout.module.scss
+++ b/apps/modernization-ui/src/apps/search/layout/search-layout.module.scss
@@ -24,8 +24,6 @@ $content-height: calc($search-height - $navigation-height - 3rem);
 
         background-color: colors.$base-white;
 
-        overflow-y: clip;
-
         @include borders.bordered();
         @include borders.rounded();
 
diff --git a/apps/modernization-ui/src/apps/search/patient/PatientSearch.tsx b/apps/modernization-ui/src/apps/search/patient/PatientSearch.tsx
index 6645d71c44..e82a5b8832 100644
--- a/apps/modernization-ui/src/apps/search/patient/PatientSearch.tsx
+++ b/apps/modernization-ui/src/apps/search/patient/PatientSearch.tsx
@@ -3,6 +3,8 @@ import { ColumnPreferenceProvider } from 'design-system/table/preferences';
 import { SearchLayout, SearchResultList } from 'apps/search/layout';
 import { Term, useSearchResultDisplay } from 'apps/search';
 import { PatientSearchResult } from 'generated/graphql/schema';
+import { SortingPreferenceProvider } from 'design-system/sorting/preferences';
+import { sorting } from 'apps/search/basic';
 import { usePatientSearch } from './usePatientSearch';
 import { PatientSearchResultListItem } from './result/list';
 import { NoPatientResults } from './result/none';
@@ -37,24 +39,26 @@ const PatientSearch = () => {
 
     return (
         <ColumnPreferenceProvider id="search.patients.preferences.columns" defaults={preferences}>
-            <FormProvider {...form}>
-                <SearchLayout
-                    onRemoveTerm={handleRemoveTerm}
-                    actions={() => <PatientSearchActions />}
-                    criteria={() => <PatientCriteria />}
-                    resultsAsList={() => (
-                        <SearchResultList<PatientSearchResult>
-                            results={results}
-                            render={(result) => <PatientSearchResultListItem result={result} />}
-                        />
-                    )}
-                    resultsAsTable={() => <PatientSearchResultTable results={results} />}
-                    searchEnabled={enabled}
-                    onSearch={search}
-                    noResults={() => <NoPatientResults />}
-                    onClear={clear}
-                />
-            </FormProvider>
+            <SortingPreferenceProvider id="search.patients.preferences.sorting" available={sorting}>
+                <FormProvider {...form}>
+                    <SearchLayout
+                        onRemoveTerm={handleRemoveTerm}
+                        actions={() => <PatientSearchActions />}
+                        criteria={() => <PatientCriteria />}
+                        resultsAsList={() => (
+                            <SearchResultList<PatientSearchResult>
+                                results={results}
+                                render={(result) => <PatientSearchResultListItem result={result} />}
+                            />
+                        )}
+                        resultsAsTable={() => <PatientSearchResultTable results={results} />}
+                        searchEnabled={enabled}
+                        onSearch={search}
+                        noResults={() => <NoPatientResults />}
+                        onClear={clear}
+                    />
+                </FormProvider>
+            </SortingPreferenceProvider>
         </ColumnPreferenceProvider>
     );
 };
diff --git a/apps/modernization-ui/src/design-system/icon/Icon.tsx b/apps/modernization-ui/src/design-system/icon/Icon.tsx
index 0b437be6ff..ab187eb7a2 100644
--- a/apps/modernization-ui/src/design-system/icon/Icon.tsx
+++ b/apps/modernization-ui/src/design-system/icon/Icon.tsx
@@ -2,16 +2,18 @@ import { SVGProps as ReactSVGProps } from 'react';
 import uswds from '@uswds/uswds/img/sprite.svg';
 import classNames from 'classnames';
 
+import styles from './icon.module.scss';
+
 type Icons = USWDSIcons | ExtendedIcons;
 
 type Props = { name: Icons } & ReactSVGProps<SVGSVGElement>;
 
-const Icon = ({ name, role = 'img', ...props }: Props) => {
+const Icon = ({ name, role = 'img', className, ...props }: Props) => {
     const location = resolveLocation(name);
 
     return (
         <svg
-            className={classNames(props.className)}
+            className={classNames(styles.icon, className)}
             role={role}
             aria-hidden={props['aria-hidden'] || !props['aria-label'] || !props['aria-labelledby']}
             {...props}>
diff --git a/apps/modernization-ui/src/design-system/icon/icon.module.scss b/apps/modernization-ui/src/design-system/icon/icon.module.scss
new file mode 100644
index 0000000000..fe099a2476
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/icon/icon.module.scss
@@ -0,0 +1,5 @@
+.icon {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+}
diff --git a/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.spec.tsx b/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.spec.tsx
new file mode 100644
index 0000000000..a41de502cc
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.spec.tsx
@@ -0,0 +1,104 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+
+import { ClosablePanel } from './ClosablePanel';
+
+describe('CloseablePanel', () => {
+    it('should render with no accessibility violations', async () => {
+        const { container } = render(
+            <ClosablePanel title="title" onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('should render the title', () => {
+        const { getByText } = render(
+            <ClosablePanel title="title-value" onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const title = getByText('title-value');
+
+        expect(title).toBeInTheDocument();
+    });
+
+    it('should render the title as an h2', () => {
+        const { getByRole } = render(
+            <ClosablePanel title="title-value" headingLevel={2} onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const title = getByRole('heading');
+
+        expect(title).toHaveTextContent('title-value');
+    });
+
+    it('should render the title as an h3', () => {
+        const { getByRole } = render(
+            <ClosablePanel title="title-value" headingLevel={3} onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const title = getByRole('heading');
+
+        expect(title).toHaveTextContent('title-value');
+    });
+
+    it('should render the title as an h4', () => {
+        const { getByRole } = render(
+            <ClosablePanel title="title-value" headingLevel={4} onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const title = getByRole('heading');
+
+        expect(title).toHaveTextContent('title-value');
+    });
+
+    it('should render the title as an h5', () => {
+        const { getByRole } = render(
+            <ClosablePanel title="title-value" headingLevel={5} onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const title = getByRole('heading');
+
+        expect(title).toHaveTextContent('title-value');
+    });
+
+    it('should render the content', () => {
+        const { getByText } = render(
+            <ClosablePanel title="title-value" onClose={jest.fn()}>
+                content
+            </ClosablePanel>
+        );
+
+        const content = getByText('content');
+
+        expect(content).toBeInTheDocument();
+    });
+
+    it('should invoke the onClose when icon close called', () => {
+        const onClose = jest.fn();
+        const { getByLabelText } = render(
+            <ClosablePanel title="title-value" onClose={onClose}>
+                content
+            </ClosablePanel>
+        );
+
+        const closer = getByLabelText('Close title-value');
+
+        userEvent.click(closer);
+
+        expect(onClose).toBeCalled();
+    });
+});
diff --git a/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.tsx b/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.tsx
new file mode 100644
index 0000000000..cbc92e2cd0
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/panel/closable/ClosablePanel.tsx
@@ -0,0 +1,57 @@
+import { Icon } from 'design-system/icon';
+import { ReactNode } from 'react';
+
+import styles from './closable-panel.module.scss';
+
+type HeadingLevel = 2 | 3 | 4 | 5;
+
+type CloseHander = () => void;
+
+type Closable = {
+    onClose: CloseHander;
+};
+
+type FooterRenderer = (closeable: Closable) => ReactNode;
+
+type Props = {
+    title: string;
+    headingLevel?: HeadingLevel;
+    children: ReactNode;
+    footer?: FooterRenderer;
+} & Closable;
+
+const ClosablePanel = ({ title, headingLevel, children, footer, onClose }: Props) => {
+    return (
+        <div className={styles.panel}>
+            <header>
+                {renderHeader(title, headingLevel)}
+                <Icon
+                    name="close"
+                    role="button"
+                    className={styles.closer}
+                    onClick={onClose}
+                    aria-label={`Close ${title}`}
+                />
+            </header>
+            {children}
+            {footer && <footer>{footer({ onClose })}</footer>}
+        </div>
+    );
+};
+
+const renderHeader = (title: string, headingLevel?: HeadingLevel) => {
+    if (headingLevel === 2) {
+        return <h2>{title}</h2>;
+    } else if (headingLevel === 3) {
+        return <h3>{title}</h3>;
+    } else if (headingLevel === 4) {
+        return <h4>{title}</h4>;
+    } else if (headingLevel === 5) {
+        return <h5>{title}</h5>;
+    } else {
+        return title;
+    }
+};
+
+export { ClosablePanel };
+export type { Closable };
diff --git a/apps/modernization-ui/src/design-system/panel/closable/closable-panel.module.scss b/apps/modernization-ui/src/design-system/panel/closable/closable-panel.module.scss
new file mode 100644
index 0000000000..578be49138
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/panel/closable/closable-panel.module.scss
@@ -0,0 +1,26 @@
+@use 'styles/borders';
+
+.panel {
+    display: flex;
+    flex-direction: column;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 1.5rem;
+
+        @extend %thin-bottom;
+
+        .closer {
+            cursor: pointer;
+            width: 2rem;
+            height: 2rem;
+        }
+
+        h2 {
+            margin: 0;
+        }
+    }
+}
diff --git a/apps/modernization-ui/src/design-system/panel/closable/index.ts b/apps/modernization-ui/src/design-system/panel/closable/index.ts
new file mode 100644
index 0000000000..b65e1cb68f
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/panel/closable/index.ts
@@ -0,0 +1,2 @@
+export { ClosablePanel } from './ClosablePanel';
+export type { Closable } from './ClosablePanel';
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/SortPreference.tsx b/apps/modernization-ui/src/design-system/sorting/preferences/SortPreference.tsx
new file mode 100644
index 0000000000..afd73302b6
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/SortPreference.tsx
@@ -0,0 +1,22 @@
+import { Icon } from 'design-system/icon';
+import classNames from 'classnames';
+import { SortingSelectable } from './selectable';
+
+import styles from './sort-preference.module.scss';
+
+type Props = {
+    className?: string;
+    active?: boolean;
+    selectable: SortingSelectable;
+    onSelect: (selectable: SortingSelectable) => void;
+};
+
+const SortPreference = ({ className, active, selectable, onSelect }: Props) => (
+    <span className={classNames(styles.preference, className)} onClick={() => onSelect(selectable)}>
+        {active && <Icon className={styles.indicator} name="check" />}
+        {!active && <span className={styles.placeholder} />}
+        {selectable.name}
+    </span>
+);
+
+export { SortPreference };
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/SortingPreferencesPanel.tsx b/apps/modernization-ui/src/design-system/sorting/preferences/SortingPreferencesPanel.tsx
new file mode 100644
index 0000000000..2968c7e70a
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/SortingPreferencesPanel.tsx
@@ -0,0 +1,23 @@
+import { Closable, ClosablePanel } from 'design-system/panel/closable';
+import { SortingSelectable } from './selectable';
+import { SortPreference } from './SortPreference';
+import { useSortingPreferences } from './useSortingPreferences';
+
+type Props = Closable;
+
+const SortingPreferencesPanel = ({ onClose }: Props) => {
+    const { available, sortOn, active } = useSortingPreferences();
+
+    const isActive = (selectable: SortingSelectable) =>
+        selectable.property === active?.property && selectable.direction === active?.direction;
+
+    return (
+        <ClosablePanel title="Sort by list" headingLevel={2} onClose={onClose}>
+            {available.map((selectable, index) => (
+                <SortPreference key={index} selectable={selectable} active={isActive(selectable)} onSelect={sortOn} />
+            ))}
+        </ClosablePanel>
+    );
+};
+
+export { SortingPreferencesPanel };
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/index.ts b/apps/modernization-ui/src/design-system/sorting/preferences/index.ts
new file mode 100644
index 0000000000..2f1bf74d04
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/index.ts
@@ -0,0 +1,3 @@
+export { SortingPreferencesPanel } from './SortingPreferencesPanel';
+export { useSortingPreferences, SortingPreferenceProvider } from './useSortingPreferences';
+export type { SortingSelectable } from './selectable';
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/selectable.ts b/apps/modernization-ui/src/design-system/sorting/preferences/selectable.ts
new file mode 100644
index 0000000000..7797696299
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/selectable.ts
@@ -0,0 +1,9 @@
+import { Direction } from 'sorting';
+
+type SortingSelectable = {
+    property: string;
+    direction: Direction;
+    name: string;
+};
+
+export type { SortingSelectable };
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/sort-preference.module.scss b/apps/modernization-ui/src/design-system/sorting/preferences/sort-preference.module.scss
new file mode 100644
index 0000000000..dbbd042652
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/sort-preference.module.scss
@@ -0,0 +1,30 @@
+@use 'styles/colors.scss';
+@use 'styles/borders.scss';
+
+.preference {
+    display: flex;
+    padding: 0.625rem 1rem;
+    align-items: flex-start;
+    gap: 0.5rem;
+
+    color: colors.$base-darkest;
+
+    font-size: 0.875rem;
+    line-height: 162%;
+
+    &:not(:last-child) {
+        @extend %thin-bottom;
+    }
+
+    cursor: pointer;
+
+    .placeholder {
+        min-width: 1.25rem;
+    }
+
+    .indicator {
+        color: colors.$primary;
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.spec.tsx b/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.spec.tsx
new file mode 100644
index 0000000000..92f400f612
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.spec.tsx
@@ -0,0 +1,124 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { ActiveSorting, SortingPreferenceProvider, useSortingPreferences } from './useSortingPreferences';
+import { ReactNode } from 'react';
+import { Direction } from 'sorting';
+
+let mockProperty: string | undefined = undefined;
+let mockDirection: Direction | undefined = undefined;
+const mockReset = jest.fn();
+const mockSortBy = jest.fn();
+
+jest.mock('sorting', () => ({
+    useSorting: () => ({
+        property: mockProperty,
+        direction: mockDirection,
+        reset: mockReset,
+        sortBy: mockSortBy
+    })
+}));
+
+let mockValue: ActiveSorting | undefined = undefined;
+const mockSave = jest.fn();
+const mockRemove = jest.fn();
+
+jest.mock('storage', () => ({
+    useLocalStorage: () => ({ value: mockValue, save: mockSave, remove: mockRemove })
+}));
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+    <SortingPreferenceProvider id="test.sorting">{children}</SortingPreferenceProvider>
+);
+
+describe('useSortingPreferences', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should initialize unsorted', () => {
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        expect(result.current.active).toBeUndefined();
+    });
+
+    it('should update the active sorting when sorting', () => {
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        act(() => {
+            result.current.sortOn({ property: 'property-value', direction: 'asc' as Direction });
+        });
+
+        expect(result.current.active).toEqual(
+            expect.objectContaining({ property: 'property-value', direction: 'asc' })
+        );
+
+        expect(mockSortBy).toBeCalledWith('property-value', 'asc');
+    });
+
+    it('should reset the active sorting', () => {
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        act(() => {
+            result.current.sortOn({ property: 'property-value', direction: 'asc' as Direction });
+        });
+
+        act(() => {
+            result.current.sortOn();
+        });
+
+        expect(result.current.active).toBeUndefined();
+
+        expect(mockReset).toBeCalled();
+    });
+
+    it('should sync with active sort changes', () => {
+        mockProperty = 'new-active-property';
+        mockDirection = 'desc' as Direction;
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        expect(result.current.active).toEqual(
+            expect.objectContaining({ property: 'new-active-property', direction: 'desc' })
+        );
+    });
+
+    it('should initialize the active sorting from sorting preferences when present', () => {
+        mockValue = { property: 'initial-value', direction: 'desc' as Direction };
+
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        expect(result.current.active).toEqual(
+            expect.objectContaining({ property: 'initial-value', direction: 'desc' })
+        );
+
+        expect(mockSortBy).toBeCalledWith('initial-value', 'desc');
+    });
+
+    it('should save sorting preferences when active sorting is changed', () => {
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        act(() => {
+            result.current.sortOn({ property: 'property-value', direction: 'asc' as Direction });
+        });
+
+        act(() => {
+            result.current.sortOn();
+        });
+
+        expect(mockSave).toBeCalledWith(expect.objectContaining({ property: 'property-value', direction: 'asc' }));
+    });
+
+    it('should remove sorting preferences when active sorting is reset', () => {
+        const { result } = renderHook(() => useSortingPreferences(), { wrapper });
+
+        act(() => {
+            result.current.sortOn({ property: 'property-value', direction: 'asc' as Direction });
+        });
+
+        act(() => {
+            result.current.sortOn();
+        });
+
+        expect(result.current.active).toBeUndefined();
+
+        expect(mockRemove).toBeCalled();
+    });
+});
diff --git a/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.tsx b/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.tsx
new file mode 100644
index 0000000000..66c3f872a8
--- /dev/null
+++ b/apps/modernization-ui/src/design-system/sorting/preferences/useSortingPreferences.tsx
@@ -0,0 +1,130 @@
+import { createContext, ReactNode, useContext, useEffect, useReducer } from 'react';
+import { Direction, useSorting } from 'sorting';
+import { useLocalStorage } from 'storage';
+import { SortingSelectable } from './selectable';
+
+type ActiveSorting = {
+    property: string;
+    direction: Direction;
+};
+
+type Interaction = {
+    available: SortingSelectable[];
+    active?: ActiveSorting;
+    sortOn: (selectable?: ActiveSorting) => void;
+};
+
+const SortingPreferencesContext = createContext<Interaction | undefined>(undefined);
+
+type State = {
+    status: 'sorted' | 'unsorted';
+    changed?: Date;
+    active?: ActiveSorting;
+};
+
+type Action =
+    | { type: 'sort'; active: ActiveSorting }
+    | { type: 'load'; active: ActiveSorting }
+    | { type: 'sync'; property?: string; direction?: Direction }
+    | { type: 'reset' };
+
+const reducer = (current: State, action: Action): State => {
+    switch (action.type) {
+        case 'sync': {
+            if (current.active?.property !== action.property && current.active?.direction !== action.direction) {
+                //  the active sorting differs from the preference
+                return action.property && action.direction
+                    ? //  update the preference to match the active sorting
+                      {
+                          changed: new Date(),
+                          status: 'sorted',
+                          active: { property: action.property, direction: action.direction }
+                      }
+                    : //  reset the preference to match the active sorting
+                      { changed: new Date(), status: 'unsorted' };
+            }
+            return current;
+        }
+        case 'sort': {
+            return { changed: new Date(), status: 'sorted', active: { ...action.active } };
+        }
+        case 'reset': {
+            return { changed: new Date(), status: 'unsorted' };
+        }
+        case 'load': {
+            return { ...current, status: 'sorted', active: { ...action.active } };
+        }
+        default:
+            return current;
+    }
+};
+
+type Props = {
+    id: string;
+    children: ReactNode;
+    available?: SortingSelectable[];
+};
+
+const SortingPreferenceProvider = ({ id, children, available = [] }: Props) => {
+    const [state, dispatch] = useReducer(reducer, { status: 'unsorted' });
+
+    const { value, save, remove } = useLocalStorage<ActiveSorting>({ key: id });
+
+    useEffect(() => {
+        if (value) {
+            //  use the stored sorting
+            dispatch({ type: 'load', active: value });
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if (state.changed) {
+            //  update the stored sorting when active is changed
+            if (state.active) {
+                save(state.active);
+            } else {
+                remove();
+            }
+        }
+    }, [state.changed, state.active?.property, state.active?.direction]);
+
+    const { sortBy, reset, property, direction } = useSorting();
+
+    useEffect(() => {
+        dispatch({ type: 'sync', property, direction });
+    }, [property, direction]);
+
+    useEffect(() => {
+        if (state.status === 'sorted' && state.active) {
+            sortBy(state.active.property, state.active.direction);
+        } else if (state.status === 'unsorted') {
+            reset();
+        }
+    }, [state.active, state.status]);
+
+    const sortOn = (selectable?: ActiveSorting) =>
+        selectable
+            ? dispatch({ type: 'sort', active: { property: selectable.property, direction: selectable.direction } })
+            : dispatch({ type: 'reset' });
+
+    const interaction = {
+        available,
+        active: state.active,
+        sortOn
+    };
+
+    return <SortingPreferencesContext.Provider value={interaction}>{children}</SortingPreferencesContext.Provider>;
+};
+
+const useSortingPreferences = () => {
+    const context = useContext(SortingPreferencesContext);
+
+    if (context === undefined) {
+        throw new Error('useSortingPreferences must be used within a SortingPreferenceProvider');
+    }
+
+    return context;
+};
+
+export { useSortingPreferences, SortingPreferenceProvider };
+export type { ActiveSorting };
diff --git a/apps/modernization-ui/src/sorting/useSorting.tsx b/apps/modernization-ui/src/sorting/useSorting.tsx
index e156b22b93..232a736f3a 100644
--- a/apps/modernization-ui/src/sorting/useSorting.tsx
+++ b/apps/modernization-ui/src/sorting/useSorting.tsx
@@ -126,7 +126,6 @@ const SortingProvider = ({ appendToUrl = false, children }: SortingProviderProps
             setSearchParams((current) => {
                 current.set(SORT_ON_PARAMETER, property);
                 current.set(DIRECTION_PARAMETER, direction);
-                console.log({ current });
                 return current;
             });
         }
diff --git a/apps/modernization-ui/src/styles/_tooltip.scss b/apps/modernization-ui/src/styles/_tooltip.scss
index 23a73f521f..f147d531a0 100644
--- a/apps/modernization-ui/src/styles/_tooltip.scss
+++ b/apps/modernization-ui/src/styles/_tooltip.scss
@@ -5,7 +5,6 @@ $bubbleWidth: calc($arrowWidth + 100%);
 
 [data-tooltip-position][aria-label] {
     position: relative;
-    z-index: 1000;
 
     &::before {
         content: attr(aria-label);
@@ -21,6 +20,7 @@ $bubbleWidth: calc($arrowWidth + 100%);
         font-weight: normal;
         font-size: 0.875rem;
         line-height: 1.3;
+        z-index: 1000;
     }
 
     &::after {
diff --git a/apps/modernization-ui/tsconfig.json b/apps/modernization-ui/tsconfig.json
index 052dfbecb6..773772effd 100644
--- a/apps/modernization-ui/tsconfig.json
+++ b/apps/modernization-ui/tsconfig.json
@@ -16,6 +16,8 @@
         "isolatedModules": true,
         "declaration": true,
         "emitDeclarationOnly": true,
+        "removeComments": true,
+        "preserveConstEnums": true,
         "jsx": "react-jsx",
         "types": ["node"],
         "plugins": [{ "name": "typescript-plugin-css-modules" }]

From 9693349d7422bbd426a6ea6fcaf9f129798a1a2c Mon Sep 17 00:00:00 2001
From: Henry Clark <111446161+hclarkEnq@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:26:56 -0700
Subject: [PATCH 4/6] passing down size prop (#1773)

---
 .../autocompete/ResultedTestsAutocomplete.tsx        | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx b/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
index 7dd61fd552..270cc97f38 100644
--- a/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
+++ b/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
@@ -24,16 +24,8 @@ const resolver = (criteria: string, limit?: number) =>
         return onSelectableResultedTest(response);
     });
 
-const ResultedTestsAutocomplete = ({ id, label, onChange, required, onBlur }: AutocompleteSingleProps) => (
-    <Autocomplete
-        resolver={resolver}
-        onChange={onChange}
-        required={required}
-        onBlur={onBlur}
-        id={id}
-        label={label}
-        asSuggestion={renderSuggestion}
-    />
+const ResultedTestsAutocomplete = (props: AutocompleteSingleProps) => (
+    <Autocomplete resolver={resolver} {...props} asSuggestion={renderSuggestion} />
 );
 
 export { ResultedTestsAutocomplete };

From e8d5acdd6f10d0ca65dd9a7125ffea3e8c4da241 Mon Sep 17 00:00:00 2001
From: Richard <rkrussel@enquizit.com>
Date: Tue, 10 Sep 2024 11:46:58 -0500
Subject: [PATCH 5/6] init

---
 .../MatchConfiguration.module.scss            |  1 +
 .../MatchConfiguration/MatchConfiguration.tsx |  9 +++--
 .../PassConfiguration.module.scss             | 21 +++++++++++-
 .../PassConfiguration/PassConfiguration.tsx   | 33 +++++++++++++++++--
 4 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
index 17d6f770f5..4e20d79982 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
+++ b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.module.scss
@@ -72,5 +72,6 @@
 
     .configurationDetails {
         width: 100rem;
+        margin-top: 1.5rem;
     }
 }
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx
index a0fd4457ba..f5e09cfff0 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/MatchConfiguration.tsx
+++ b/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>
     );
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss
index 358432c18e..c88eac4821 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.module.scss
+++ b/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;
+        }
+    }
 }
diff --git a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx b/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx
index 3dc8873ab5..6b76ae9520 100644
--- a/apps/modernization-ui/src/apps/dedup-config/MatchConfiguration/PassConfiguration/PassConfiguration.tsx
+++ b/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>
     );
 };

From 0516fcf9a985e5e457203799c66996a8fbdcc5bf Mon Sep 17 00:00:00 2001
From: Richard <rkrussel@enquizit.com>
Date: Tue, 10 Sep 2024 16:36:02 -0500
Subject: [PATCH 6/6] fix linting

---
 .../src/options/autocompete/ResultedTestsAutocomplete.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx b/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
index beb1af9512..56d94d75ec 100644
--- a/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
+++ b/apps/modernization-ui/src/options/autocompete/ResultedTestsAutocomplete.tsx
@@ -10,7 +10,6 @@ const resolver = (criteria: string, limit?: number) =>
         limit: limit
     }).then((response) => response as Selectable[]);
 
-
 const ResultedTestsAutocomplete = (props: TextAutocompleteSingleProps) => (
     <TextAutocomplete resolver={resolver} {...props} asSuggestion={renderSuggestion} />
 );