From e6ff1d15d503534820acdf0afc5d44d6fd98c8fe Mon Sep 17 00:00:00 2001
From: adele-usdr <146878468+adele-usdr@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:28:33 -0800
Subject: [PATCH 1/5] fix: #2218 remove grants table feature flag, and logic
 specific to old grants table

---
 packages/client/src/components/Layout.vue     |  7 +------
 .../client/src/helpers/featureFlags/index.js  |  3 ---
 packages/client/src/router/index.js           | 21 +------------------
 packages/client/src/views/Dashboard.vue       |  9 ++------
 packages/client/src/views/Grants.vue          |  5 +----
 packages/client/src/views/MyGrants.vue        |  5 +----
 6 files changed, 6 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/components/Layout.vue b/packages/client/src/components/Layout.vue
index d988fd887..f1b277290 100755
--- a/packages/client/src/components/Layout.vue
+++ b/packages/client/src/components/Layout.vue
@@ -64,8 +64,6 @@
       <b-nav tabs justified fill style="margin-top: 20px">
           <b-nav-item to="/my-grants" exact exact-active-class="active">My Grants</b-nav-item>
           <b-nav-item to="/grants" exact exact-active-class="active">Browse Grants</b-nav-item>
-          <b-nav-item v-if="!useNewGrantsTable" to="/eligibility-codes" exact exact-active-class="active">Eligibility Codes</b-nav-item>
-          <b-nav-item v-if="!useNewGrantsTable" to="/keywords" exact exact-active-class="active">Keywords</b-nav-item>
           <b-nav-item to="/dashboard" exact exact-active-class="active">Dashboard</b-nav-item>
           <b-nav-item to="/users" exact exact-active-class="active" v-if="userRole === 'admin'">Users</b-nav-item>
           <b-nav-item :to="newTerminologyEnabled ? '/teams' : '/agencies'" exact exact-active-class="active">{{newTerminologyEnabled ? 'Teams' : 'Agencies'}}</b-nav-item>
@@ -86,7 +84,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { myProfileEnabled, newTerminologyEnabled, useNewGrantsTable } from '@/helpers/featureFlags';
+import { myProfileEnabled, newTerminologyEnabled } from '@/helpers/featureFlags';
 import ProfileSettingsModal from '@/components/Modals/ProfileSettings.vue';
 import AlertBox from '../arpa_reporter/components/AlertBox.vue';
 import UserAvatar from './UserAvatar.vue';
@@ -120,9 +118,6 @@ export default {
     myProfileEnabled() {
       return myProfileEnabled();
     },
-    useNewGrantsTable() {
-      return useNewGrantsTable();
-    },
     showTabs() {
       return !(this.$route.meta.hideLayoutTabs === true);
     },
diff --git a/packages/client/src/helpers/featureFlags/index.js b/packages/client/src/helpers/featureFlags/index.js
index e1881b47a..b85756ba8 100644
--- a/packages/client/src/helpers/featureFlags/index.js
+++ b/packages/client/src/helpers/featureFlags/index.js
@@ -3,9 +3,6 @@ import { getFeatureFlags } from './utils';
 /**
  * @returns { boolean } true if the new grants table should be active, else false.
  */
-export function useNewGrantsTable() {
-  return getFeatureFlags().useNewTable === true;
-}
 
 export function myProfileEnabled() {
   return getFeatureFlags().myProfileEnabled === true;
diff --git a/packages/client/src/router/index.js b/packages/client/src/router/index.js
index c19f6ff04..3e9f09b95 100644
--- a/packages/client/src/router/index.js
+++ b/packages/client/src/router/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { myProfileEnabled, newTerminologyEnabled, useNewGrantsTable } from '@/helpers/featureFlags';
+import { myProfileEnabled, newTerminologyEnabled } from '@/helpers/featureFlags';
 import Login from '../views/Login.vue';
 import Layout from '../components/Layout.vue';
 import ArpaAnnualPerformanceReporter from '../views/ArpaAnnualPerformanceReporter.vue';
@@ -73,24 +73,6 @@ const routes = [
           requiresAuth: true,
         },
       },
-      {
-        path: '/eligibility-codes',
-        name: 'eligibilityCodes',
-        component: () => import('../views/EligibilityCodes.vue'),
-        meta: {
-          requiresAuth: true,
-          enabledWithOldGrantsTableOnly: true,
-        },
-      },
-      {
-        path: '/keywords',
-        name: 'keywords',
-        component: () => import('../views/Keywords.vue'),
-        meta: {
-          requiresAuth: true,
-          enabledWithOldGrantsTableOnly: true,
-        },
-      },
       {
         path: '/tenants',
         name: 'tenants',
@@ -173,7 +155,6 @@ router.beforeEach((to, from, next) => {
   } else if (to.name === 'login' && authenticated) {
     next({ name: 'grants' });
   } else if (to.name === 'not-found'
-    || (to.meta.enabledWithOldGrantsTableOnly && useNewGrantsTable())
     || (to.meta.requiresMyProfileEnabled && !myProfileEnabled())
     || (to.meta.requiresNewTerminologyEnabled && !newTerminologyEnabled())
   ) {
diff --git a/packages/client/src/views/Dashboard.vue b/packages/client/src/views/Dashboard.vue
index 5e97ee84a..570dd78fd 100644
--- a/packages/client/src/views/Dashboard.vue
+++ b/packages/client/src/views/Dashboard.vue
@@ -112,6 +112,7 @@
         </template>
       </b-table>
     </b-card>
+
     <GrantDetails :selected-grant.sync="selectedGrant" />
   </section>
 </template>
@@ -145,7 +146,7 @@
 import { mapActions, mapGetters } from 'vuex';
 import resizableTableMixin from '@/mixin/resizableTable';
 import GrantDetails from '@/components/Modals/GrantDetails.vue';
-import { newTerminologyEnabled, useNewGrantsTable } from '@/helpers/featureFlags';
+import { newTerminologyEnabled } from '@/helpers/featureFlags';
 
 export default {
   components: { GrantDetails },
@@ -325,9 +326,6 @@ export default {
       team: 'users/agency',
       currentGrant: 'grants/currentGrant',
     }),
-    showStats() {
-      return !useNewGrantsTable();
-    },
     activityItems() {
       const rtf = new Intl.RelativeTimeFormat('en', {
         numeric: 'auto',
@@ -399,9 +397,6 @@ export default {
       fetchClosestGrants: 'grants/fetchClosestGrants',
     }),
     async setup() {
-      if (this.showStats) {
-        this.fetchDashboard();
-      }
       this.fetchGrantsInterested({ perPage: this.perPage, currentPage: this.currentPage });
       this.fetchClosestGrants({ perPage: this.perPageClosest, currentPage: this.currentPage });
     },
diff --git a/packages/client/src/views/Grants.vue b/packages/client/src/views/Grants.vue
index 16ce2104f..a99b7e17a 100644
--- a/packages/client/src/views/Grants.vue
+++ b/packages/client/src/views/Grants.vue
@@ -4,12 +4,9 @@
 
 <script>
 
-import GrantsTable from '@/components/GrantsTable.vue';
 import GrantsTableNext from '@/components/GrantsTableNext.vue';
-import { useNewGrantsTable } from '@/helpers/featureFlags';
 
 export default {
-  components: { GrantsTable },
   data() {
     return {
 
@@ -18,7 +15,7 @@ export default {
   methods: {},
   computed: {
     tableComponent() {
-      return useNewGrantsTable() ? GrantsTableNext : GrantsTable;
+      return GrantsTableNext;
     },
   },
 };
diff --git a/packages/client/src/views/MyGrants.vue b/packages/client/src/views/MyGrants.vue
index a5ed7c2c9..636a93f0d 100644
--- a/packages/client/src/views/MyGrants.vue
+++ b/packages/client/src/views/MyGrants.vue
@@ -20,12 +20,9 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import GrantsTable from '@/components/GrantsTable.vue';
 import GrantsTableNext from '@/components/GrantsTableNext.vue';
-import { useNewGrantsTable } from '@/helpers/featureFlags';
 
 export default {
-  components: { GrantsTable },
   data() {
     return {
 
@@ -36,7 +33,7 @@ export default {
       selectedAgencyId: 'users/selectedAgencyId',
     }),
     tableComponent() {
-      return useNewGrantsTable() ? GrantsTableNext : GrantsTable;
+      return GrantsTableNext;
     },
   },
   methods: {},

From 10c82037ce11d1f73719a857f88c7291d5ae4c69 Mon Sep 17 00:00:00 2001
From: adele-usdr <146878468+adele-usdr@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:31:53 -0800
Subject: [PATCH 2/5] fix: moving GrantsTableNext.vue to GrantsTable.vue

---
 .../client/src/components/GrantsTable.vue     | 326 ++++++++++--------
 packages/client/src/views/Grants.vue          |   2 +-
 packages/client/src/views/MyGrants.vue        |   2 +-
 3 files changed, 181 insertions(+), 149 deletions(-)

diff --git a/packages/client/src/components/GrantsTable.vue b/packages/client/src/components/GrantsTable.vue
index 2e3e83516..c49f4d5ab 100644
--- a/packages/client/src/components/GrantsTable.vue
+++ b/packages/client/src/components/GrantsTable.vue
@@ -1,64 +1,73 @@
 <template>
-  <section class="container-fluid">
-    <b-row class="mt-3 mb-3" align-h="between">
-      <b-col cols="5">
-        <b-input-group size="md">
-          <b-input-group-text>
-            <b-icon icon="search" />
-          </b-input-group-text>
-          <b-form-input type="text" @input="debounceSearchInput"></b-form-input>
-        </b-input-group>
-      </b-col>
-      <b-col class="d-flex justify-content-end">
-        <b-button @click="exportCSV" :disabled="loading" variant="outline-secondary">
-          <b-icon icon="download" class="mr-1 mb-1" font-scale="0.9" aria-hidden="true" />
-          Export to CSV
-        </b-button>
-      </b-col>
+  <section class="container-fluid grants-table-container">
+    <b-row class="my-3" v-if="showSearchControls">
+      <div class="ml-3">
+        <SavedSearchPanel :isDisabled="loading" />
+      </div>
+      <div class="ml-2">
+        <SearchPanel :isDisabled="loading" ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
+      </div>
     </b-row>
-    <b-row class="mt-3 mb-3" align-h="start" style="position: relative; z-index: 999">
-      <b-col v-if="!showInterested && !showRejected && !showResult && !showAssignedToAgency" cols="3">
-        <multiselect v-model="reviewStatusFilters" :options="reviewStatusOptions" :multiple="true"
-          :close-on-select="false" :clear-on-select="false" placeholder="Review Status" :show-labels="false">
-        </multiselect>
-      </b-col>
-      <b-col cols="3">
-        <multiselect v-model="opportunityStatusFilters" :options="opportunityStatusOptions" :multiple="true"
-                     :close-on-select="false" :clear-on-select="false" placeholder="Opportunity Status" :show-labels="false">
-        </multiselect>
+    <b-row  class="grants-table-title-control">
+      <b-col v-if="showSearchControls" >
+        <SearchFilter :isDisabled="loading" :filterKeys="searchFilters" @filter-removed="clearSearch" />
       </b-col>
-      <b-col cols="3">
-        <multiselect v-model="opportunityCategoryFilters" :options="opportunityCategoryOptions" :multiple="true"
-                     :close-on-select="false" :clear-on-select="false" placeholder="Opportunity Category" :show-labels="false">
-        </multiselect>
+      <b-col align-self="end" v-if="!showSearchControls">
+        <h4 class="mb-0">{{ searchTitle }}</h4>
       </b-col>
-      <b-col cols="2">
-        <multiselect v-model="costSharingFilter" :options="costSharingOptions" :multiple="false"
-                     :close-on-select="true" :clear-on-select="false" placeholder="Cost Sharing" :show-labels="false">
-        </multiselect>
+      <b-col align-self="end">
+        <p class="mb-0 text-right text-nowrap"><a href="#" @click="exportCSV" :disabled="loading" variant="outline-primary border-0">Export CSV</a></p>
       </b-col>
     </b-row>
-    <b-table id="grants-table" sticky-header="600px" hover :items="formattedGrants" :fields="fields.filter( field => !field.hideGrantItem)" selectable striped
-      :sort-by.sync="orderBy" :sort-desc.sync="orderDesc" :no-local-sorting="true"
-      select-mode="single" :busy="loading" @row-selected="onRowSelected">
-      <template #cell(award_floor)="row">
-        <p> {{ formatMoney(row.item.award_floor) }}</p>
-      </template>
-      <template #cell(award_ceiling)="row">
-        <p> {{ formatMoney(row.item.award_ceiling) }}</p>
-      </template>
-      <template #table-busy>
-        <div class="text-center text-danger my-2">
-          <b-spinner class="align-middle"></b-spinner>
-          <strong> Loading...</strong>
-        </div>
-      </template>
-    </b-table>
     <b-row align-v="center">
-      <b-pagination class="m-0" v-model="currentPage" :total-rows="totalRows" :per-page="perPage" first-number
-        last-number first-text="First" prev-text="Prev" next-text="Next" last-text="Last"
-        aria-controls="grants-table" />
-      <b-button class="ml-2" variant="outline-primary disabled">{{ grants.length }} of {{ totalRows }}</b-button>
+      <b-col cols="12">
+        <b-table id="grants-table" sticky-header="70vh" hover :items="formattedGrants"
+          :fields="fields.filter(field => !field.hideGrantItem)" selectable striped :sort-by.sync="orderBy"
+          :sort-desc.sync="orderDesc" :no-local-sorting="true" :bordered="true" select-mode="single" :busy="loading"
+          @row-selected="onRowSelected" show-empty emptyText="No matches found">
+          <template #cell(award_floor)="row">
+            <p> {{ formatMoney(row.item.award_floor) }}</p>
+          </template>
+          <template #cell(award_ceiling)="row">
+            <p> {{ formatMoney(row.item.award_ceiling) }}</p>
+          </template>
+          <template #table-busy>
+            <div class="text-center text-info my-2" style="height: 1200px;">
+              <b-spinner class="align-middle"></b-spinner>
+              <strong> Loading...</strong>
+            </div>
+          </template>
+          <template #empty="scope">
+            &emsp;
+            &emsp;
+            <div class="text-center">
+              <p class="empty-text"><strong>{{ scope.emptyText }}</strong></p>
+              <div v-if="showSearchControls">
+              <p class="empty-text">Tip: Broaden your search or adjust your keywords for more results</p>
+              &nbsp;
+              <p><a @click="initEditSearch(searchId);" class="link">
+                  Edit Search Criteria
+                </a></p>
+              </div>
+            </div>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+    <b-row class="grants-table-pagination">
+      <b-col cols="11" class="grants-table-pagination-component">
+        <b-pagination
+          class="m-0"
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          first-text="First"
+          prev-text="Prev"
+          next-text="Next"
+          last-text="Last"
+          aria-controls="grants-table" />
+          <div class="my-1 rounded py-1 px-2 page-item">{{ totalRows }} total grant{{ totalRows == 1 ? '' : 's' }}</div>
+      </b-col>
     </b-row>
     <GrantDetails :selected-grant.sync="selectedGrant" />
   </section>
@@ -66,23 +75,29 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { debounce } from 'lodash';
-import Multiselect from 'vue-multiselect';
 import { titleize } from '../helpers/form-helpers';
 import GrantDetails from './Modals/GrantDetails.vue';
+import SearchPanel from './Modals/SearchPanel.vue';
+import SavedSearchPanel from './Modals/SavedSearchPanel.vue';
+import SearchFilter from './SearchFilter.vue';
 
 export default {
   components: {
-    GrantDetails, Multiselect,
+    GrantDetails, SearchPanel, SavedSearchPanel, SearchFilter,
   },
   props: {
-    showMyInterested: Boolean,
     showInterested: Boolean,
     showRejected: Boolean,
     showResult: Boolean,
-    showAging: Boolean,
     showAssignedToAgency: String,
-    hideGrantItems: Boolean,
+    showSearchControls: {
+      type: Boolean,
+      default: true,
+    },
+    searchTitle: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -90,13 +105,6 @@ export default {
       currentPage: 1,
       loading: false,
       fields: [
-        {
-          key: 'grant_number',
-          label: 'Opportunity Number',
-          variant: 'dark',
-          stickyColumn: true, // was in the grant id col but not sure if necessary
-          hideGrantItem: this.hideGrantItems,
-        },
         {
           key: 'title',
         },
@@ -118,9 +126,6 @@ export default {
         {
           key: 'cost_sharing',
         },
-        {
-          key: 'award_floor',
-        },
         {
           key: 'award_ceiling',
           sortable: true,
@@ -136,18 +141,9 @@ export default {
       ],
       selectedGrant: null,
       selectedGrantIndex: null,
-      orderBy: 'open_date',
-      orderDesc: true,
-      searchInput: null,
-      debouncedSearchInput: null,
-      reviewStatusFilters: [],
-      opportunityStatusFilters: ['Forecasted', 'Posted'],
-      opportunityCategoryFilters: [],
-      costSharingFilter: null,
-      reviewStatusOptions: ['interested', 'result', 'rejected'],
-      opportunityStatusOptions: ['Forecasted', 'Posted', 'Closed / Archived'],
-      opportunityCategoryOptions: ['Discretionary', 'Mandatory', 'Earmark', 'Continuation'],
-      costSharingOptions: ['Yes', 'No'],
+      orderBy: '',
+      orderDesc: false,
+      searchId: null,
     };
   },
   mounted() {
@@ -160,6 +156,9 @@ export default {
       grantsPagination: 'grants/grantsPagination',
       agency: 'users/agency',
       selectedAgency: 'users/selectedAgency',
+      activeFilters: 'grants/activeFilters',
+      selectedSearchId: 'grants/selectedSearchId',
+      editingSearchId: 'grants/editingSearchId',
     }),
     totalRows() {
       return this.grantsPagination ? this.grantsPagination.total : 0;
@@ -172,8 +171,14 @@ export default {
       const warningThreshold = (this.agency.warning_threshold || 30) * DAYS_TO_MILLISECS;
       const dangerThreshold = (this.agency.danger_threshold || 15) * DAYS_TO_MILLISECS;
       const now = new Date();
+      const generateTitle = (t) => {
+        const txt = document.createElement('textarea');
+        txt.innerHTML = t;
+        return txt.value;
+      };
       return this.grants.map((grant) => ({
         ...grant,
+        title: generateTitle(grant.title),
         interested_agencies: grant.interested_agencies
           .map((v) => v.agency_abbreviation)
           .join(', '),
@@ -197,30 +202,30 @@ export default {
         })(),
       }));
     },
+    searchFilters() {
+      return this.activeFilters;
+    },
   },
   watch: {
-    reviewStatusFilters() {
-      this.paginateGrants();
-    },
-    opportunityStatusFilters() {
-      this.paginateGrants();
-    },
-    opportunityCategoryFilters() {
-      this.paginateGrants();
-    },
-    costSharingFilter() {
-      this.paginateGrants();
-    },
     selectedAgency() {
       this.setup();
     },
     currentPage() {
+      if (this.loading) {
+        return;
+      }
       this.paginateGrants();
     },
     orderBy() {
+      if (this.loading) {
+        return;
+      }
       this.paginateGrants();
     },
     orderDesc() {
+      if (this.loading) {
+        return;
+      }
       this.paginateGrants();
     },
     selectedGrantIndex() {
@@ -230,62 +235,80 @@ export default {
     grants() {
       this.changeSelectedGrant();
     },
-    debouncedSearchInput() {
-      this.paginateGrants();
-    },
-    async selectedGrant() {
-      if (!this.selectedGrant) {
-        await this.paginateGrants();
+    selectedSearchId() {
+      this.loading = true;
+      this.searchId = (this.selectedSearchId === null || Number.isNaN(this.selectedSearchId)) ? null : Number(this.selectedSearchId);
+      const filterKeys = this.activeFilters.map((f) => f.key);
+      if (this.searchId !== null && (filterKeys.includes('includeKeywords') || filterKeys.includes('excludeKeywords'))) {
+        // only if include/exclude keywords are selected
+        this.orderBy = 'rank';
+        this.orderDesc = false;
+      } else {
+        this.orderBy = 'open_date';
+        this.orderDesc = true;
       }
+      this.paginateGrants();
     },
   },
   methods: {
     ...mapActions({
-      fetchGrants: 'grants/fetchGrants',
+      fetchGrants: 'grants/fetchGrantsNext',
       navigateToExportCSV: 'grants/exportCSV',
+      clearSelectedSearch: 'grants/clearSelectedSearch',
+      initEditSearch: 'grants/initEditSearch',
+      applyFilters: 'grants/applyFilters',
     }),
     setup() {
+      this.clearSelectedSearch();
       this.paginateGrants();
     },
+    clearSearch() {
+      this.loading = true;
+      this.orderBy = 'open_date';
+      this.orderDesc = true;
+    },
     titleize,
-    debounceSearchInput: debounce(function bounce(newVal) {
-      this.debouncedSearchInput = newVal;
-      this.searchFilters.include = newVal;
-    }, 500),
     async paginateGrants() {
       try {
+        if (!this.searchId) {
+          // apply custom filters based on props
+          await this.applyFilters({
+            reviewStatus: [
+              `${this.showInterested ? 'Interested' : ''}`,
+              `${this.showResult ? 'Applied' : ''}`,
+              `${this.showRejected ? 'Not Applying' : ''}`,
+              `${this.showAssignedToAgency ? 'Assigned' : ''}`,
+            ].filter((r) => r),
+          });
+        }
         this.loading = true;
         await this.fetchGrants({
           perPage: this.perPage,
           currentPage: this.currentPage,
           orderBy: this.orderBy,
           orderDesc: this.orderDesc,
-          searchTerm: this.debouncedSearchInput,
-          interestedByAgency: this.showInterested || this.showResult || this.showRejected,
-          interestedByMe: this.showMyInterested,
-          aging: this.showAging,
+          showInterested: this.showInterested,
+          showResult: this.showResult,
+          showRejected: this.showRejected,
           assignedToAgency: this.showAssignedToAgency,
-          positiveInterest: this.showInterested || (this.reviewStatusFilters.includes('interested') ? true : null),
-          result: this.showResult || (this.reviewStatusFilters.includes('result') ? true : null),
-          rejected: this.showRejected || (this.reviewStatusFilters.includes('rejected') ? true : null),
-          opportunityStatuses: this.parseOpportunityStatusFilters(),
-          opportunityCategories: this.opportunityCategoryFilters,
-          costSharing: this.costSharingFilter,
         });
       } catch (e) {
+        this.notifyError();
         console.log(e);
       } finally {
         this.loading = false;
       }
     },
+    notifyError() {
+      this.$bvToast.toast('We encountered an error while retriving grants data. For the most accurate results please refresh the page and try again.', {
+        title: 'Something went wrong',
+        variant: 'danger',
+        solid: true,
+        noAutoHide: true,
+        toaster: 'b-toaster-top-center',
+      });
+    },
     getAwardFloor(grant) {
-      // First try to get the award floor amount from the award_floor field
-      const floor = parseInt(grant.award_floor, 10);
-      if (!Number.isNaN(floor)) {
-        return floor;
-      }
-
-      // Fall back to getting award floor amount from the raw_body
       let body;
       try {
         body = JSON.parse(grant.raw_body);
@@ -300,11 +323,11 @@ export default {
         return undefined;
       }
 
-      const synopsisFloor = parseInt(body.synopsis && body.synopsis.awardFloor, 10);
-      if (Number.isNaN(synopsisFloor)) {
+      const floor = parseInt(body.synopsis && body.synopsis.awardFloor, 10);
+      if (Number.isNaN(floor)) {
         return undefined;
       }
-      return synopsisFloor;
+      return floor;
     },
     onRowSelected(items) {
       const [row] = items;
@@ -362,34 +385,18 @@ export default {
     },
     exportCSV() {
       this.navigateToExportCSV({
+        perPage: this.perPage,
+        currentPage: this.currentPage,
         orderBy: this.orderBy,
         orderDesc: this.orderDesc,
-        searchTerm: this.debouncedSearchInput,
-        interestedByAgency: this.showInterested || this.showResult || this.showRejected,
-        interestedByMe: this.showMyInterested,
-        aging: this.showAging,
+        showInterested: this.showInterested,
+        showResult: this.showResult,
+        showRejected: this.showRejected,
         assignedToAgency: this.showAssignedToAgency,
-        positiveInterest: this.showInterested || (this.reviewStatusFilters.includes('interested') ? true : null),
-        result: this.showResult || (this.reviewStatusFilters.includes('result') ? true : null),
-        rejected: this.showRejected || (this.reviewStatusFilters.includes('rejected') ? true : null),
-        opportunityStatuses: this.parseOpportunityStatusFilters(),
-        opportunityCategories: this.opportunityCategoryFilters,
-        costSharing: this.costSharingFilter,
       });
     },
-    parseOpportunityStatusFilters() {
-      const filtersCopy = this.opportunityStatusFilters.map((status) => status.toLowerCase());
-      const i = filtersCopy.indexOf('closed / archived');
-      if (i === -1) {
-        return filtersCopy;
-      }
-      filtersCopy.splice(i, 1);
-      filtersCopy.push('closed');
-      filtersCopy.push('archived');
-      return filtersCopy;
-    },
     formatMoney(value) {
-      if (value === undefined) {
+      if (value === undefined || value === null) {
         return '';
       }
       const res = Number(value).toLocaleString('en-US', {
@@ -403,3 +410,28 @@ export default {
   },
 };
 </script>
+<style>
+.empty-text {
+  margin: 2px;
+}
+
+.grants-table-container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+/* set first columnheader th to 300px*/
+#grants-table th:nth-child(1) {
+  width: 300px;
+}
+.grants-table-title-control {
+  padding-bottom: .75rem;
+}
+.grants-table-pagination {
+  padding-bottom: .75rem;
+}
+.grants-table-pagination-component {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+</style>
diff --git a/packages/client/src/views/Grants.vue b/packages/client/src/views/Grants.vue
index a99b7e17a..dcbf7a7e4 100644
--- a/packages/client/src/views/Grants.vue
+++ b/packages/client/src/views/Grants.vue
@@ -4,7 +4,7 @@
 
 <script>
 
-import GrantsTableNext from '@/components/GrantsTableNext.vue';
+import GrantsTableNext from '@/components/GrantsTable.vue';
 
 export default {
   data() {
diff --git a/packages/client/src/views/MyGrants.vue b/packages/client/src/views/MyGrants.vue
index 636a93f0d..6f27301d5 100644
--- a/packages/client/src/views/MyGrants.vue
+++ b/packages/client/src/views/MyGrants.vue
@@ -20,7 +20,7 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import GrantsTableNext from '@/components/GrantsTableNext.vue';
+import GrantsTableNext from '@/components/GrantsTable.vue';
 
 export default {
   data() {

From 875b0a808a71c629d8647a2d6ad482fabc0522fd Mon Sep 17 00:00:00 2001
From: adele-usdr <146878468+adele-usdr@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:34:55 -0800
Subject: [PATCH 3/5] fix: remove use of GrantsTableNext completely

---
 packages/client/src/views/Grants.vue   | 4 ++--
 packages/client/src/views/MyGrants.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/views/Grants.vue b/packages/client/src/views/Grants.vue
index dcbf7a7e4..d01038ecf 100644
--- a/packages/client/src/views/Grants.vue
+++ b/packages/client/src/views/Grants.vue
@@ -4,7 +4,7 @@
 
 <script>
 
-import GrantsTableNext from '@/components/GrantsTable.vue';
+import GrantsTable from '@/components/GrantsTable.vue';
 
 export default {
   data() {
@@ -15,7 +15,7 @@ export default {
   methods: {},
   computed: {
     tableComponent() {
-      return GrantsTableNext;
+      return GrantsTable;
     },
   },
 };
diff --git a/packages/client/src/views/MyGrants.vue b/packages/client/src/views/MyGrants.vue
index 6f27301d5..5f2208905 100644
--- a/packages/client/src/views/MyGrants.vue
+++ b/packages/client/src/views/MyGrants.vue
@@ -20,7 +20,7 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import GrantsTableNext from '@/components/GrantsTable.vue';
+import GrantsTable from '@/components/GrantsTable.vue';
 
 export default {
   data() {
@@ -33,7 +33,7 @@ export default {
       selectedAgencyId: 'users/selectedAgencyId',
     }),
     tableComponent() {
-      return GrantsTableNext;
+      return GrantsTable;
     },
   },
   methods: {},

From 646cd2077021b63aa61c6fda648a2ac5b12f547d Mon Sep 17 00:00:00 2001
From: adele-usdr <146878468+adele-usdr@users.noreply.github.com>
Date: Mon, 4 Dec 2023 08:57:48 -0800
Subject: [PATCH 4/5] fix: remove stray newline

---
 packages/client/src/views/Dashboard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/views/Dashboard.vue b/packages/client/src/views/Dashboard.vue
index 570dd78fd..313191adc 100644
--- a/packages/client/src/views/Dashboard.vue
+++ b/packages/client/src/views/Dashboard.vue
@@ -112,7 +112,6 @@
         </template>
       </b-table>
     </b-card>
-
     <GrantDetails :selected-grant.sync="selectedGrant" />
   </section>
 </template>

From 8f6cc2f4e682e7345f485ddd2010bf916cb483b8 Mon Sep 17 00:00:00 2001
From: adele-usdr <146878468+adele-usdr@users.noreply.github.com>
Date: Tue, 5 Dec 2023 09:02:52 -0800
Subject: [PATCH 5/5] fix: removed some additional instances of the flag

---
 packages/client/public/deploy-config.js | 1 -
 terraform/sandbox.tfvars                | 1 -
 terraform/staging.tfvars                | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/client/public/deploy-config.js b/packages/client/public/deploy-config.js
index 1f6284675..8d0b32431 100644
--- a/packages/client/public/deploy-config.js
+++ b/packages/client/public/deploy-config.js
@@ -20,7 +20,6 @@ window.APP_CONFIG.overrideFeatureFlag = (flagName, overrideValue) => {
 // For local development only. Register feature flags for Staging and Production by
 //  configuring the `website_feature_flags` input variable in Terraform (see `terraform/*.tfvars`).
 window.APP_CONFIG.featureFlags = {
-  useNewTable: true,
   myProfileEnabled: true,
   newTerminologyEnabled: true,
 };
diff --git a/terraform/sandbox.tfvars b/terraform/sandbox.tfvars
index 7ac2511da..8b1d9d02f 100644
--- a/terraform/sandbox.tfvars
+++ b/terraform/sandbox.tfvars
@@ -14,7 +14,6 @@ website_enabled           = true
 website_domain_name       = "sandbox.grants.usdr.dev"
 website_managed_waf_rules = {}
 website_feature_flags = {
-  useNewTable           = true,
   myProfileEnabled      = true,
   newTerminologyEnabled = false
 }
diff --git a/terraform/staging.tfvars b/terraform/staging.tfvars
index a62b75542..555016fea 100644
--- a/terraform/staging.tfvars
+++ b/terraform/staging.tfvars
@@ -36,7 +36,6 @@ website_managed_waf_rules = {
   }
 }
 website_feature_flags = {
-  useNewTable           = true,
   myProfileEnabled      = true,
   newTerminologyEnabled = true
 }