From dc3351e8c0daec1b1a0fc8e7e629de44ad4ba3d4 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 5 Feb 2025 16:05:49 -0500
Subject: [PATCH 1/3] revise UI of search bars with labels, create component

---
 .../includes/member_domains_edit_table.html   | 46 ++--------------
 .../includes/member_domains_table.html        | 52 +++++--------------
 src/registrar/templates/includes/search.html  | 34 ++++++++++++
 3 files changed, 50 insertions(+), 82 deletions(-)
 create mode 100644 src/registrar/templates/includes/search.html

diff --git a/src/registrar/templates/includes/member_domains_edit_table.html b/src/registrar/templates/includes/member_domains_edit_table.html
index 0b8ff005a..cefc30c15 100644
--- a/src/registrar/templates/includes/member_domains_edit_table.html
+++ b/src/registrar/templates/includes/member_domains_edit_table.html
@@ -36,47 +36,9 @@ <h2>
 
   <div class="section-outlined__header margin-bottom-3 grid-row">
     <!-- ---------- SEARCH ---------- -->
-    <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
-      <section aria-label="Member domains search component">
-        <form class="usa-search usa-search--show-label" method="POST" role="search">
-          {% csrf_token %}
-          <label class="usa-label display-block margin-bottom-05" for="edit-member-domains__search-field">
-            {% if has_edit_members_portfolio_permission %}
-              Search all domains
-            {% else %}
-              Search domains assigned to
-              {% if member %}
-                {{ member.email }}
-              {% else %}
-                {{ portfolio_invitation.email }}
-              {% endif %}
-            {% endif %}
-          </label>            
-          <div class="usa-search--show-label__input-wrapper">
-              <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="edit-member-domains__reset-search" type="button">
-                  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                    <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                  </svg>
-                  Reset
-              </button>
-              <input
-              class="usa-input"
-              id="edit-member-domains__search-field"
-              type="search"
-              name="member-domains-search"
-              />
-              <button class="usa-button" type="submit" id="edit-member-domains__search-field-submit">
-                  <span class="usa-search__submit-text">Search </span>
-                  <img
-                      src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                      class="usa-search__submit-icon"
-                      alt="Search"
-                  />
-              </button>
-          </div>
-        </form>
-      </section>
-    </div>
+    {% with label_text="Search all domains" item_name="edit-member-domains" aria_label_text="Member domains search component" %}
+      {% include "includes/search.html" %}
+    {% endwith %}
   </div>
 
   <!-- ---------- MAIN TABLE ---------- -->
@@ -85,7 +47,7 @@ <h2>
       <caption class="sr-only">member domains</caption>
       <thead>
         <tr>
-          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105"><span class="sr-only">Assigned domains</span></th>
+          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
           <!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
           <th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
         </tr>
diff --git a/src/registrar/templates/includes/member_domains_table.html b/src/registrar/templates/includes/member_domains_table.html
index d7839e485..4e63fdbc3 100644
--- a/src/registrar/templates/includes/member_domains_table.html
+++ b/src/registrar/templates/includes/member_domains_table.html
@@ -1,5 +1,3 @@
-{% load static %}
-
 {% if member %}
   <span 
     id="portfolio-js-value" 
@@ -34,45 +32,19 @@ <h2>
       {% endif %}
     </h2>
 
-  <div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
+    <div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
       <!-- ---------- SEARCH ---------- -->
-      <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
-        <section aria-label="Member domains search component">
-          <form class="usa-search usa-search--show-label" method="POST" role="search">
-            {% csrf_token %}
-            <label class="usa-label display-block margin-bottom-05" for="member-domains__search-field">
-              Search domains assigned to 
-              {% if member %}
-                {{ member.email }}
-              {% else %}
-                {{ portfolio_invitation.email }}
-              {% endif %}
-            </label>            
-            <div class="usa-search--show-label__input-wrapper">
-                <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="member-domains__reset-search" type="button">
-                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                      <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                    </svg>
-                    Reset
-                </button>
-                <input
-                class="usa-input"
-                id="member-domains__search-field"
-                type="search"
-                name="member-domains-search"
-                />
-                <button class="usa-button" type="submit" id="member-domains__search-field-submit">
-                    <span class="usa-search__submit-text">Search </span>
-                    <img
-                        src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                        class="usa-search__submit-icon"
-                        alt="Search"
-                    />
-                </button>
-            </div>
-          </form>
-        </section>
-      </div>
+      {% with label_text="Domains assigned to " %}
+        {% if member %}
+          {% with label_text=label_text|add:member.email item_name="member-domains" aria_label_text="Member domains search component" %}
+            {% include "includes/search.html" %}
+          {% endwith %}
+        {% else %}
+          {% with label_text=label_text|add:portfolio_invitation.email item_name="member-domains" aria_label_text="Member domains search component" %}
+            {% include "includes/search.html" %}
+          {% endwith %}
+        {% endif %}
+      {% endwith %}
     </div>
 
     <!-- ---------- MAIN TABLE ---------- -->
diff --git a/src/registrar/templates/includes/search.html b/src/registrar/templates/includes/search.html
new file mode 100644
index 000000000..a276f27f1
--- /dev/null
+++ b/src/registrar/templates/includes/search.html
@@ -0,0 +1,34 @@
+{% load static %}
+
+<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
+    <section aria-label="{{aria_label_text}}">
+        <form class="usa-search usa-search--show-label" method="POST" role="search">
+            {% csrf_token %}
+            <label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
+                {{ label_text }}
+            </label>            
+            <div class="usa-search--show-label__input-wrapper flex-align-self-end">
+                <input
+                class="usa-input minw-15"
+                id="{{item_name}}__search-field"
+                type="search"
+                name="{{item_name}}-search"
+                />
+                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
+                    <span class="usa-search__submit-text">Search </span>
+                    <img
+                        src="{% static 'img/usa-icons-bg/search--white.svg' %}"
+                        class="usa-search__submit-icon"
+                        alt="Search"
+                    />
+                </button>
+                <button class="usa-button usa-button--unstyled margin-left-3 display-none" id="{{item_name}}__reset-search" type="button">
+                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                        <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                    </svg>
+                    Reset
+                </button>
+            </div>
+        </form>
+    </section>
+</div>

From f1b76ceb03a68afe6408cb54a9f71b54e2bd65c1 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 5 Feb 2025 16:12:02 -0500
Subject: [PATCH 2/3] cleanp

---
 src/registrar/templates/includes/member_domains_edit_table.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/registrar/templates/includes/member_domains_edit_table.html b/src/registrar/templates/includes/member_domains_edit_table.html
index cefc30c15..fd63e5aa7 100644
--- a/src/registrar/templates/includes/member_domains_edit_table.html
+++ b/src/registrar/templates/includes/member_domains_edit_table.html
@@ -1,5 +1,3 @@
-{% load static %}
-
 {% if member %}
   <span 
     id="portfolio-js-value" 

From e7b91e348b39d91fe91d09132bba6f9a4762285b Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Thu, 6 Feb 2025 13:09:27 -0500
Subject: [PATCH 3/3] layout tweak

---
 src/registrar/templates/includes/search.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/templates/includes/search.html b/src/registrar/templates/includes/search.html
index a276f27f1..8c9f60cdb 100644
--- a/src/registrar/templates/includes/search.html
+++ b/src/registrar/templates/includes/search.html
@@ -22,7 +22,7 @@
                         alt="Search"
                     />
                 </button>
-                <button class="usa-button usa-button--unstyled margin-left-3 display-none" id="{{item_name}}__reset-search" type="button">
+                <button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
                     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
                         <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
                     </svg>