From 123aaf526f4437cc85a1399253b113ee33f92448 Mon Sep 17 00:00:00 2001
From: Dominic Berzin <berzindominic@gmail.com>
Date: Tue, 26 Mar 2024 21:37:23 +0800
Subject: [PATCH 1/5] update admin search page to use acc req component

---
 .../account-request-table.component.html      |  2 +-
 .../admin-search-page.component.html          | 64 +-----------------
 .../admin-search-page.component.ts            | 66 +++++++------------
 .../admin-search-page.module.ts               |  4 ++
 4 files changed, 29 insertions(+), 107 deletions(-)

diff --git a/src/web/app/components/account-requests-table/account-request-table.component.html b/src/web/app/components/account-requests-table/account-request-table.component.html
index 7dcb95031c7..2959ee3b480 100644
--- a/src/web/app/components/account-requests-table/account-request-table.component.html
+++ b/src/web/app/components/account-requests-table/account-request-table.component.html
@@ -68,7 +68,7 @@
             </td>
           </tr>
           <tr *ngIf="accountRequest.showLinks && searchString">
-            <td colspan="8">
+            <td colspan="100">
               <ul class="list-group" *ngIf="accountRequest.showLinks" @collapseAnim>
                 <li class="list-group-item list-group-item-info">
                   <strong>Account Registration Link</strong>
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
index a76f9796f0e..f1619e05289 100644
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
@@ -203,66 +203,4 @@
   </div>
 </div>
 
-<div class="card bg-light top-padded" *ngIf="accountRequests.length">
-  <div class="card-header bg-primary text-white">
-    <strong>Account Requests Found</strong>
-    <div class="card-header-btn-toolbar">
-      <button id="show-account-request-links" class="btn btn-light btn-sm" style="margin-right: 10px;" type="button" (click)="showAllAccountRequestsLinks()">Expand All</button>
-      <button id="hide-account-request-links" class="btn btn-light btn-sm" type="button" (click)="hideAllAccountRequestsLinks()">Collapse All</button>
-    </div>
-  </div>
-
-  <div class="table-responsive">
-    <table class="table table-striped data-table" id="search-table-account-request">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Email</th>
-          <th>Institute</th>
-          <th>Created At</th>
-          <th>Registered At</th>
-          <th>Options</th>
-        </tr>
-      </thead>
-      <tbody>
-        <ng-container *ngFor="let accountRequest of accountRequests; let i = index">
-          <tr (click)="accountRequest.showLinks = !accountRequest.showLinks">
-            <td [innerHtml]="accountRequest.name | highlighter:searchString:true">
-              <br>
-              <div class="col-sm-1">
-                <button *ngIf="!accountRequest.showLinks" class="btn" aria-label="Expand">
-                  <i class="fas fa-chevron-circle-down" style="color: blue;"></i>
-                </button>
-                <button *ngIf="accountRequest.showLinks" class="btn" aria-label="Collapse">
-                  <i class="fas fa-chevron-circle-up" style="color: blue;"></i>
-                </button>
-              </div>
-            </td>
-            <td [innerHtml]="accountRequest.email | highlighter:searchString:true">{{ accountRequest.email }}</td>
-            <td [innerHtml]="accountRequest.institute | highlighter:searchString:true">{{ accountRequest.institute }}</td>
-            <td>{{ accountRequest.createdAtText }}</td>
-            <td>{{ accountRequest.registeredAtText || 'Not Registered Yet' }}</td>
-            <td>
-              <a id="reset-account-request-{{i}}" href="javascript:;" (click)="$event.stopPropagation(); resetAccountRequest(accountRequest);" *ngIf="accountRequest.registeredAtText">
-                <i class="fas fa-sync"></i> Reset Account Request
-              </a>
-              <div class="ngb-tooltip-class" [ngbTooltip]="accountRequest.registeredAtText && 'Account requests of registered instructors cannot be deleted'">
-                <button id="delete-account-request-{{i}}" class="btn btn-danger" [disabled]="accountRequest.registeredAtText" (click)="$event.stopPropagation(); deleteAccountRequest(accountRequest);">Delete</button>
-              </div>
-            </td>
-          </tr>
-          <tr *ngIf="accountRequest.showLinks">
-            <td colspan="6">
-              <ul class="list-group" *ngIf="accountRequest.showLinks" @collapseAnim>
-                <li class="list-group-item list-group-item-info">
-                  <strong>Account Registration Link</strong>
-                  <input [value]="accountRequest.registrationLink" disabled class="form-control">
-                </li>
-              </ul>
-            </td>
-          </tr>
-        </ng-container>
-      </tbody>
-    </table>
-  </div>
-</div>
+<tm-account-requests-table *ngIf="accountRequests.length" [accountRequests]="accountRequests" [searchString]="searchQuery"></tm-account-requests-table>
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
index 702cbea0791..0d1b4187206 100755
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
@@ -18,6 +18,9 @@ import { StatusMessageService } from '../../../services/status-message.service';
 import { StudentService } from '../../../services/student.service';
 import { ApiConst } from '../../../types/api-const';
 import { Email, MessageOutput, RegenerateKey } from '../../../types/api-output';
+import {
+  AccountRequestData,
+} from '../../components/account-requests-table/account-requests-table.component';
 import { SimpleModalType } from '../../components/simple-modal/simple-modal-type';
 import { collapseAnim } from '../../components/teammates-common/collapse-anim';
 import { ErrorMessageOutput } from '../../error-message-output';
@@ -76,10 +79,9 @@ export class AdminSearchPageComponent {
 
         this.instructors = resp.instructors;
         this.students = resp.students;
-        this.accountRequests = resp.accountRequests;
+        this.accountRequests = this.formatAccountRequests(resp.accountRequests);
         this.hideAllInstructorsLinks();
         this.hideAllStudentsLinks();
-        this.hideAllAccountRequestsLinks();
 
         // prompt user to use more specific terms if search results limit reached
         const limit: number = ApiConst.SEARCH_QUERY_SIZE_LIMIT;
@@ -109,6 +111,25 @@ export class AdminSearchPageComponent {
     });
   }
 
+  private formatAccountRequests(accountRequests: AccountRequestSearchResult[]): AccountRequestData[] {
+    return accountRequests.map((accountRequest: AccountRequestSearchResult): AccountRequestData => {
+      const [institute, country] = accountRequest.institute.split(', ').length === 2
+      ? accountRequest.institute.split(', ') : [accountRequest.institute, ''];
+      return {
+        name: accountRequest.name,
+        email: accountRequest.email,
+        status: accountRequest.status,
+        institute,
+        country,
+        createdAtText: accountRequest.createdAtText,
+        registeredAtText: accountRequest.registeredAtText || '',
+        comments: accountRequest.comments,
+        registrationLink: accountRequest.registrationLink,
+        showLinks: accountRequest.showLinks,
+      };
+    });
+  }
+
   /**
    * Shows all instructors' links in the page.
    */
@@ -145,24 +166,6 @@ export class AdminSearchPageComponent {
     }
   }
 
-  /**
-   * Shows all account requests' links in the page.
-   */
-  showAllAccountRequestsLinks(): void {
-    for (const accountRequest of this.accountRequests) {
-      accountRequest.showLinks = true;
-    }
-  }
-
-  /**
-   * Hides all account requests' links in the page.
-   */
-  hideAllAccountRequestsLinks(): void {
-    for (const accountRequest of this.accountRequests) {
-      accountRequest.showLinks = false;
-    }
-  }
-
   /**
    * Resets the instructor's Google ID.
    */
@@ -266,29 +269,6 @@ export class AdminSearchPageComponent {
     }, () => {});
   }
 
-  resetAccountRequest(accountRequest: AccountRequestSearchResult): void {
-    const modalContent = `Are you sure you want to reset the account request for
-        <strong>${accountRequest.name}</strong> with email <strong>${accountRequest.email}</strong> from
-        <strong>${accountRequest.institute}</strong>?
-        An email with the account registration link will also be sent to the instructor.`;
-    const modalRef: NgbModalRef = this.simpleModalService.openConfirmationModal(
-        `Reset account request for <strong>${accountRequest.name}</strong>?`, SimpleModalType.WARNING, modalContent);
-
-    modalRef.result.then(() => {
-      this.accountService.resetAccountRequest(accountRequest.email, accountRequest.institute)
-        .subscribe({
-          next: () => {
-            this.statusMessageService
-                .showSuccessToast(`Reset successful. An email has been sent to ${accountRequest.email}.`);
-            accountRequest.registeredAtText = '';
-          },
-          error: (resp: ErrorMessageOutput) => {
-            this.statusMessageService.showErrorToast(resp.error.message);
-          },
-        });
-    }, () => {});
-  }
-
   deleteAccountRequest(accountRequest: AccountRequestSearchResult): void {
     const modalContent: string = `Are you sure you want to delete the account request for
         <strong>${accountRequest.name}</strong> with email <strong>${accountRequest.email}</strong> from
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts b/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
index 06278b7ad5f..d13771b03d8 100644
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
@@ -4,6 +4,9 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { AdminSearchPageComponent } from './admin-search-page.component';
+import {
+  AccountRequestsTableModule,
+} from '../../components/account-requests-table/account-requests-table.module';
 import { Pipes } from '../../pipes/pipes.module';
 
 const routes: Routes = [
@@ -27,6 +30,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     NgbTooltipModule,
+    AccountRequestsTableModule,
     RouterModule.forChild(routes),
     Pipes,
   ],

From f7ab78d0e6447dbd4ec6b2de476ee59c06789286 Mon Sep 17 00:00:00 2001
From: Dominic Berzin <berzindominic@gmail.com>
Date: Tue, 26 Mar 2024 21:50:21 +0800
Subject: [PATCH 2/5] fix selector for e2e test

---
 .../teammates/e2e/pageobjects/AdminSearchPage.java     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
index 706e9ab5a20..2620d322c69 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
@@ -38,9 +38,9 @@ public class AdminSearchPage extends AppPage {
 
     private static final int ACCOUNT_REQUEST_COL_NAME = 1;
     private static final int ACCOUNT_REQUEST_COL_EMAIL = 2;
-    private static final int ACCOUNT_REQUEST_COL_INSTITUTE = 3;
-    private static final int ACCOUNT_REQUEST_COL_CREATED_AT = 4;
-    private static final int ACCOUNT_REQUEST_COL_REGISTERED_AT = 5;
+    private static final int ACCOUNT_REQUEST_COL_INSTITUTE = 4;
+    private static final int ACCOUNT_REQUEST_COL_CREATED_AT = 6;
+    private static final int ACCOUNT_REQUEST_COL_REGISTERED_AT = 7;
 
     private static final String EXPANDED_ROWS_HEADER_EMAIL = "Email";
     private static final String EXPANDED_ROWS_HEADER_COURSE_JOIN_LINK = "Course Join Link";
@@ -273,7 +273,7 @@ public void resetInstructorGoogleId(InstructorAttributes instructor) {
     public WebElement getAccountRequestRow(AccountRequestAttributes accountRequest) {
         String email = accountRequest.getEmail();
         String institute = accountRequest.getInstitute();
-        List<WebElement> rows = browser.driver.findElements(By.cssSelector("#search-table-account-request tbody tr"));
+        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-requests-table tbody tr"));
         for (WebElement row : rows) {
             List<WebElement> columns = row.findElements(By.tagName("td"));
             if (removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_EMAIL - 1)
@@ -289,7 +289,7 @@ && removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_INSTITUTE - 1)
     public WebElement getAccountRequestRow(AccountRequest accountRequest) {
         String email = accountRequest.getEmail();
         String institute = accountRequest.getInstitute();
-        List<WebElement> rows = browser.driver.findElements(By.cssSelector("#search-table-account-request tbody tr"));
+        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-requests-table tbody tr"));
         for (WebElement row : rows) {
             List<WebElement> columns = row.findElements(By.tagName("td"));
             if (removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_EMAIL - 1)

From ecf0d435a8d5d51881608475887b3e81cb08081a Mon Sep 17 00:00:00 2001
From: Dominic Berzin <berzindominic@gmail.com>
Date: Wed, 27 Mar 2024 20:22:47 +0800
Subject: [PATCH 3/5] fix spec files and imports

---
 .../admin-search-page.component.spec.ts.snap  | 195 +++++++++---------
 .../admin-search-page.component.html          |   2 +-
 .../admin-search-page.component.spec.ts       |  29 +--
 .../admin-search-page.component.ts            |  38 +---
 .../admin-search-page.module.ts               |   6 +-
 5 files changed, 121 insertions(+), 149 deletions(-)

diff --git a/src/web/app/pages-admin/admin-search-page/__snapshots__/admin-search-page.component.spec.ts.snap b/src/web/app/pages-admin/admin-search-page/__snapshots__/admin-search-page.component.spec.ts.snap
index 4a38f4cbca3..2ffcc3759be 100644
--- a/src/web/app/pages-admin/admin-search-page/__snapshots__/admin-search-page.component.spec.ts.snap
+++ b/src/web/app/pages-admin/admin-search-page/__snapshots__/admin-search-page.component.spec.ts.snap
@@ -433,119 +433,110 @@ exports[`AdminSearchPageComponent should snap with an expanded account requests
         100 characters left
       </span>
     </div>
-  </div><div
-    class="card bg-light top-padded"
-  >
+  </div><tm-account-request-table>
     <div
-      class="card-header bg-primary text-white"
+      class="card bg-light top-padded"
     >
-      <strong>
-        Account Requests Found
-      </strong>
       <div
-        class="card-header-btn-toolbar"
+        class="card-header bg-primary text-white"
       >
-        <button
-          class="btn btn-light btn-sm"
-          id="show-account-request-links"
-          style="margin-right: 10px;"
-          type="button"
-        >
-          Expand All
-        </button>
-        <button
-          class="btn btn-light btn-sm"
-          id="hide-account-request-links"
-          type="button"
-        >
-          Collapse All
-        </button>
+        <strong>
+          Pending Account Requests
+        </strong>
       </div>
-    </div>
-    <div
-      class="table-responsive"
-    >
-      <table
-        class="table table-striped data-table"
-        id="search-table-account-request"
+      <div
+        class="table-responsive"
       >
-        <thead>
-          <tr>
-            <th>
-              Name
-            </th>
-            <th>
-              Email
-            </th>
-            <th>
-              Institute
-            </th>
-            <th>
-              Created At
-            </th>
-            <th>
-              Registered At
-            </th>
-            <th>
-              Options
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              name
-            </td>
-            <td>
-              email
-            </td>
-            <td>
-              institute
-            </td>
-            <td>
-              Tue, 08 Feb 2022, 08:23 AM +00:00
-            </td>
-            <td>
-              Not Registered Yet
-            </td>
-            <td>
-              <div
-                class="ngb-tooltip-class"
+        <table
+          class="table table-striped data-table"
+          id="search-table-account-request"
+        >
+          <thead>
+            <tr>
+              <th>
+                Name
+              </th>
+              <th>
+                Email
+              </th>
+              <th>
+                Status
+              </th>
+              <th>
+                Institute, Country
+              </th>
+              <th>
+                Created At
+              </th>
+              <th>
+                Comments
+              </th>
+              <th>
+                Options
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                name
+              </td>
+              <td>
+                email
+              </td>
+              <td>
+                PENDING
+              </td>
+              <td>
+                institute
+              </td>
+              <td
+                id="timestamp-box"
               >
-                <button
-                  class="btn btn-danger"
-                  id="delete-account-request-0"
+                Tue, 08 Feb 2022, 08:23 AM +00:00
+              </td>
+              <td>
+                <div
+                  id="comment-box"
                 >
-                  Delete
-                </button>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td
-              colspan="6"
-            >
-              <ul
-                class="list-group ng-trigger ng-trigger-collapseAnim ng-animating"
+                </div>
+              </td>
+              <td
+                class="align-middle"
               >
-                <li
-                  class="list-group-item list-group-item-info"
+                <div
+                  class="d-flex flex-row align-items-center justify-content-center gap-2"
                 >
-                  <strong>
-                    Account Registration Link
-                  </strong>
-                  <input
-                    class="form-control"
-                    disabled=""
-                  />
-                </li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                  <div
+                    class="ngb-tooltip-class"
+                  >
+                    <a
+                      href="javascript:;"
+                      id="delete-account-request-0"
+                    >
+                      <i
+                        class="fa-solid fa-trash"
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <a
+                      href="javascript:;"
+                      id="view-account-request-0"
+                    >
+                      <i
+                        class="fa-solid fa-eye"
+                      />
+                    </a>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
+  </tm-account-request-table>
 </tm-admin-search-page>
 `;
 
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
index f1619e05289..e6573dbff76 100644
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.html
@@ -203,4 +203,4 @@
   </div>
 </div>
 
-<tm-account-requests-table *ngIf="accountRequests.length" [accountRequests]="accountRequests" [searchString]="searchQuery"></tm-account-requests-table>
+<tm-account-request-table *ngIf="accountRequests.length" [accountRequests]="accountRequests" [searchString]="searchQuery"></tm-account-request-table>
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.spec.ts b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.spec.ts
index ba3a2abbad5..4697bb518a1 100644
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.spec.ts
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.spec.ts
@@ -12,7 +12,6 @@ import { AccountService } from '../../../services/account.service';
 import { EmailGenerationService } from '../../../services/email-generation.service';
 import { InstructorService } from '../../../services/instructor.service';
 import {
-  AccountRequestSearchResult,
   FeedbackSessionsGroup, InstructorAccountSearchResult,
   SearchService, StudentAccountSearchResult,
 } from '../../../services/search.service';
@@ -20,6 +19,7 @@ import { StatusMessageService } from '../../../services/status-message.service';
 import { StudentService } from '../../../services/student.service';
 import { createMockNgbModalRef } from '../../../test-helpers/mock-ngb-modal-ref';
 import { AccountRequestStatus } from '../../../types/api-output';
+import { AccountRequestTableRowModel } from '../../components/account-requests-table/account-request-table-model';
 
 const DEFAULT_FEEDBACK_SESSION_GROUP: FeedbackSessionsGroup = {
   sessionName: {
@@ -69,14 +69,14 @@ const DEFAULT_INSTRUCTOR_SEARCH_RESULT: InstructorAccountSearchResult = {
   publishedSessions: DEFAULT_FEEDBACK_SESSION_GROUP,
 };
 
-const DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT: AccountRequestSearchResult = {
+const DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT: AccountRequestTableRowModel = {
   name: 'name',
   email: 'email',
-  institute: 'institute',
+  instituteAndCountry: 'institute',
   status: AccountRequestStatus.PENDING,
   registrationLink: 'registrationLink',
   createdAtText: 'Tue, 08 Feb 2022, 08:23 AM +00:00',
-  registeredAtText: null,
+  registeredAtText: '',
   showLinks: false,
   comments: '',
 };
@@ -241,11 +241,11 @@ describe('AdminSearchPageComponent', () => {
       {
         name: 'name',
         email: 'email',
-        institute: 'institute',
+        instituteAndCountry: 'institute',
         status: AccountRequestStatus.PENDING,
         registrationLink: 'registrationLink',
         createdAtText: 'Tue, 08 Feb 2022, 08:23 AM +00:00',
-        registeredAtText: null,
+        registeredAtText: '',
         showLinks: true,
         comments: '',
       },
@@ -409,11 +409,11 @@ describe('AdminSearchPageComponent', () => {
   });
 
   it('should display account request results', () => {
-    const accountRequestResults: AccountRequestSearchResult[] = [
+    const accountRequestResults: AccountRequestTableRowModel[] = [
       {
         name: 'name1',
         email: 'email1',
-        institute: 'institute1',
+        instituteAndCountry: 'institute1',
         status: AccountRequestStatus.PENDING,
         registrationLink: 'registrationLink1',
         createdAtText: 'Tue, 08 Feb 2022, 08:23 AM +00:00',
@@ -423,7 +423,7 @@ describe('AdminSearchPageComponent', () => {
       }, {
         name: 'name2',
         email: 'email2',
-        institute: 'institute2',
+        instituteAndCountry: 'institute2',
         status: AccountRequestStatus.PENDING,
         registrationLink: 'registrationLink2',
         createdAtText: 'Tue, 08 Feb 2022, 08:23 AM +00:00',
@@ -435,10 +435,12 @@ describe('AdminSearchPageComponent', () => {
     jest.spyOn(searchService, 'searchAdmin').mockReturnValue(of({
       students: [],
       instructors: [],
-      accountRequests: accountRequestResults,
+      accountRequests: accountRequestResults.map((result) => ({
+        ...result,
+        institute: result.instituteAndCountry,
+      })),
     }));
 
-    component.searchQuery = 'name';
     const button: any = fixture.debugElement.nativeElement.querySelector('#search-button');
     button.click();
 
@@ -487,8 +489,9 @@ describe('AdminSearchPageComponent', () => {
   });
 
   it('should show account request links when expand all button clicked', () => {
-    const accountRequestResult: AccountRequestSearchResult = DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT;
+    const accountRequestResult: AccountRequestTableRowModel = DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT;
     component.accountRequests = [accountRequestResult];
+    component.searchQuery = 'test'; // To show the account request table
     fixture.detectChanges();
 
     const button: any = fixture.debugElement.nativeElement.querySelector('#show-account-request-links');
@@ -954,6 +957,7 @@ describe('AdminSearchPageComponent', () => {
   it('should show error message when resetting account request is unsuccessful', () => {
     component.accountRequests = [DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT];
     component.accountRequests[0].registeredAtText = 'Wed, 09 Feb 2022, 10:23 AM +00:00';
+    component.searchQuery = 'test';
     fixture.detectChanges();
 
     jest.spyOn(ngbModal, 'open').mockImplementation(() => {
@@ -980,6 +984,7 @@ describe('AdminSearchPageComponent', () => {
   it('should show success message when resetting account request is successful', () => {
     component.accountRequests = [DEFAULT_ACCOUNT_REQUEST_SEARCH_RESULT];
     component.accountRequests[0].registeredAtText = 'Wed, 09 Feb 2022, 10:23 AM +00:00';
+    component.searchQuery = 'test';
     fixture.detectChanges();
 
     jest.spyOn(ngbModal, 'open').mockImplementation(() => {
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
index 0d1b4187206..bf5f023e4b4 100755
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.component.ts
@@ -17,10 +17,10 @@ import { SimpleModalService } from '../../../services/simple-modal.service';
 import { StatusMessageService } from '../../../services/status-message.service';
 import { StudentService } from '../../../services/student.service';
 import { ApiConst } from '../../../types/api-const';
-import { Email, MessageOutput, RegenerateKey } from '../../../types/api-output';
+import { Email, RegenerateKey } from '../../../types/api-output';
 import {
-  AccountRequestData,
-} from '../../components/account-requests-table/account-requests-table.component';
+  AccountRequestTableRowModel,
+} from '../../components/account-requests-table/account-request-table-model';
 import { SimpleModalType } from '../../components/simple-modal/simple-modal-type';
 import { collapseAnim } from '../../components/teammates-common/collapse-anim';
 import { ErrorMessageOutput } from '../../error-message-output';
@@ -40,7 +40,7 @@ export class AdminSearchPageComponent {
   searchString: string = '';
   instructors: InstructorAccountSearchResult[] = [];
   students: StudentAccountSearchResult[] = [];
-  accountRequests: AccountRequestSearchResult[] = [];
+  accountRequests: AccountRequestTableRowModel[] = [];
   characterLimit = 100;
 
   constructor(
@@ -111,16 +111,13 @@ export class AdminSearchPageComponent {
     });
   }
 
-  private formatAccountRequests(accountRequests: AccountRequestSearchResult[]): AccountRequestData[] {
-    return accountRequests.map((accountRequest: AccountRequestSearchResult): AccountRequestData => {
-      const [institute, country] = accountRequest.institute.split(', ').length === 2
-      ? accountRequest.institute.split(', ') : [accountRequest.institute, ''];
+  private formatAccountRequests(accountRequests: AccountRequestSearchResult[]): AccountRequestTableRowModel[] {
+    return accountRequests.map((accountRequest: AccountRequestSearchResult): AccountRequestTableRowModel => {
       return {
         name: accountRequest.name,
         email: accountRequest.email,
         status: accountRequest.status,
-        institute,
-        country,
+        instituteAndCountry: accountRequest.institute,
         createdAtText: accountRequest.createdAtText,
         registeredAtText: accountRequest.registeredAtText || '',
         comments: accountRequest.comments,
@@ -269,27 +266,6 @@ export class AdminSearchPageComponent {
     }, () => {});
   }
 
-  deleteAccountRequest(accountRequest: AccountRequestSearchResult): void {
-    const modalContent: string = `Are you sure you want to delete the account request for
-        <strong>${accountRequest.name}</strong> with email <strong>${accountRequest.email}</strong> from
-        <strong>${accountRequest.institute}</strong>?`;
-    const modalRef: NgbModalRef = this.simpleModalService.openConfirmationModal(
-        `Delete account request for <strong>${accountRequest.name}</strong>?`, SimpleModalType.WARNING, modalContent);
-
-    modalRef.result.then(() => {
-      this.accountService.deleteAccountRequest(accountRequest.email, accountRequest.institute)
-      .subscribe({
-        next: (resp: MessageOutput) => {
-          this.statusMessageService.showSuccessToast(resp.message);
-          this.accountRequests = this.accountRequests.filter((x: AccountRequestSearchResult) => x !== accountRequest);
-        },
-        error: (resp: ErrorMessageOutput) => {
-          this.statusMessageService.showErrorToast(resp.error.message);
-        },
-      });
-    }, () => {});
-  }
-
   /**
    * Updates the student's displayed course join and feedback session links with the value of the newKey.
    */
diff --git a/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts b/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
index d13771b03d8..6b70a93077a 100644
--- a/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
+++ b/src/web/app/pages-admin/admin-search-page/admin-search-page.module.ts
@@ -5,8 +5,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { AdminSearchPageComponent } from './admin-search-page.component';
 import {
-  AccountRequestsTableModule,
-} from '../../components/account-requests-table/account-requests-table.module';
+  AccountRequestTableModule,
+} from '../../components/account-requests-table/account-request-table.module';
 import { Pipes } from '../../pipes/pipes.module';
 
 const routes: Routes = [
@@ -30,7 +30,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     NgbTooltipModule,
-    AccountRequestsTableModule,
+    AccountRequestTableModule,
     RouterModule.forChild(routes),
     Pipes,
   ],

From 60b5762187f45b1ca265ced9481d94223c5947c7 Mon Sep 17 00:00:00 2001
From: Dominic Berzin <berzindominic@gmail.com>
Date: Wed, 27 Mar 2024 20:52:10 +0800
Subject: [PATCH 4/5] update e2e selector

---
 src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
index 2620d322c69..3e470ad2ebd 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
@@ -273,7 +273,7 @@ public void resetInstructorGoogleId(InstructorAttributes instructor) {
     public WebElement getAccountRequestRow(AccountRequestAttributes accountRequest) {
         String email = accountRequest.getEmail();
         String institute = accountRequest.getInstitute();
-        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-requests-table tbody tr"));
+        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-request-table tbody tr"));
         for (WebElement row : rows) {
             List<WebElement> columns = row.findElements(By.tagName("td"));
             if (removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_EMAIL - 1)
@@ -289,7 +289,7 @@ && removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_INSTITUTE - 1)
     public WebElement getAccountRequestRow(AccountRequest accountRequest) {
         String email = accountRequest.getEmail();
         String institute = accountRequest.getInstitute();
-        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-requests-table tbody tr"));
+        List<WebElement> rows = browser.driver.findElements(By.cssSelector("tm-account-request-table tbody tr"));
         for (WebElement row : rows) {
             List<WebElement> columns = row.findElements(By.tagName("td"));
             if (removeSpanFromText(columns.get(ACCOUNT_REQUEST_COL_EMAIL - 1)

From a5e1ac899abae65a4a9ca8edc9aa687a79a9eb51 Mon Sep 17 00:00:00 2001
From: Dominic Berzin <berzindominic@gmail.com>
Date: Wed, 27 Mar 2024 21:05:01 +0800
Subject: [PATCH 5/5] fix column numbers

---
 src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
index 3e470ad2ebd..b0e9049f481 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/AdminSearchPage.java
@@ -39,8 +39,8 @@ public class AdminSearchPage extends AppPage {
     private static final int ACCOUNT_REQUEST_COL_NAME = 1;
     private static final int ACCOUNT_REQUEST_COL_EMAIL = 2;
     private static final int ACCOUNT_REQUEST_COL_INSTITUTE = 4;
-    private static final int ACCOUNT_REQUEST_COL_CREATED_AT = 6;
-    private static final int ACCOUNT_REQUEST_COL_REGISTERED_AT = 7;
+    private static final int ACCOUNT_REQUEST_COL_CREATED_AT = 5;
+    private static final int ACCOUNT_REQUEST_COL_REGISTERED_AT = 6;
 
     private static final String EXPANDED_ROWS_HEADER_EMAIL = "Email";
     private static final String EXPANDED_ROWS_HEADER_COURSE_JOIN_LINK = "Course Join Link";