[PM-7352] - Browser Send Type Groupings Fix (#8727)

* Removed type counts and just calculated counts off the sends

* Fixing key spec test case

apps/browser/src/models/browserSendComponentState.ts

@@ -1,5 +1,3 @@
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { DeepJsonify } from "@bitwarden/common/types/deep-jsonify";
 
@@ -7,13 +5,6 @@ import { BrowserComponentState } from "./browserComponentState";
 
 export class BrowserSendComponentState extends BrowserComponentState {
   sends: SendView[];
-  typeCounts: Map<SendType, number>;
-
-  toJSON() {
-    return Utils.merge(this, {
-      typeCounts: Utils.mapToRecord(this.typeCounts),
-    });
-  }
 
   static fromJSON(json: DeepJsonify<BrowserSendComponentState>) {
     if (json == null) {
@@ -22,7 +13,6 @@ export class BrowserSendComponentState extends BrowserComponentState {
 
     return Object.assign(new BrowserSendComponentState(), json, {
       sends: json.sends?.map((s) => SendView.fromJSON(s)),
-      typeCounts: Utils.recordToMap(json.typeCounts),
     });
   }
 }

apps/browser/src/tools/popup/send/send-groupings.component.html

@@ -61,7 +61,7 @@
             <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file-text"></i></div>
             <span class="text">{{ "sendTypeText" | i18n }}</span>
           </div>
-          <span class="row-sub-label">{{ typeCounts.get(sendType.Text) || 0 }}</span>
+          <span class="row-sub-label">{{ getSendCount(sends, sendType.Text) }}</span>
           <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button
@@ -74,7 +74,7 @@
             <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file"></i></div>
             <span class="text">{{ "sendTypeFile" | i18n }}</span>
           </div>
-          <span class="row-sub-label">{{ typeCounts.get(sendType.File) || 0 }}</span>
+          <span class="row-sub-label">{{ getSendCount(sends, sendType.File) }}</span>
           <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>

apps/browser/src/tools/popup/send/send-groupings.component.ts

@@ -29,8 +29,6 @@ const ComponentId = "SendComponent";
 export class SendGroupingsComponent extends BaseSendComponent {
   // Header
   showLeftHeader = true;
-  // Send Type Calculations
-  typeCounts = new Map<SendType, number>();
   // State Handling
   state: BrowserSendComponentState;
   private loadedTimeout: number;
@@ -65,7 +63,6 @@ export class SendGroupingsComponent extends BaseSendComponent {
       dialogService,
     );
     super.onSuccessfulLoad = async () => {
-      this.calculateTypeCounts();
       this.selectAll();
     };
   }
@@ -174,17 +171,8 @@ export class SendGroupingsComponent extends BaseSendComponent {
     return this.hasSearched || (!this.searchPending && this.isSearchable);
   }
 
-  private calculateTypeCounts() {
-    // Create type counts
-    const typeCounts = new Map<SendType, number>();
-    this.sends.forEach((s) => {
-      if (typeCounts.has(s.type)) {
-        typeCounts.set(s.type, typeCounts.get(s.type) + 1);
-      } else {
-        typeCounts.set(s.type, 1);
-      }
-    });
-    this.typeCounts = typeCounts;
+  getSendCount(sends: SendView[], type: SendType): number {
+    return sends.filter((s) => s.type === type).length;
   }
 
   private async saveState() {
@@ -192,7 +180,6 @@ export class SendGroupingsComponent extends BaseSendComponent {
       scrollY: BrowserPopupUtils.getContentScrollY(window),
       searchText: this.searchText,
       sends: this.sends,
-      typeCounts: this.typeCounts,
     });
     await this.stateService.setBrowserSendComponentState(this.state);
   }
@@ -206,9 +193,6 @@ export class SendGroupingsComponent extends BaseSendComponent {
     if (this.state.sends != null) {
       this.sends = this.state.sends;
     }
-    if (this.state.typeCounts != null) {
-      this.typeCounts = this.state.typeCounts;
-    }
 
     return true;
   }

apps/browser/src/tools/popup/services/browser-send-state.service.spec.ts

@@ -6,7 +6,6 @@ import { FakeStateProvider } from "@bitwarden/common/../spec/fake-state-provider
 import { awaitAsync } from "@bitwarden/common/../spec/utils";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 import { UserId } from "@bitwarden/common/types/guid";
 
 import { BrowserComponentState } from "../../../models/browserComponentState";
@@ -33,7 +32,6 @@ describe("Browser Send State Service", () => {
       const state = new BrowserSendComponentState();
       state.scrollY = 0;
       state.searchText = "test";
-      state.typeCounts = new Map<SendType, number>().set(SendType.File, 1);
 
       await stateService.setBrowserSendComponentState(state);
 

apps/browser/src/tools/popup/services/browser-send-state.service.ts

@@ -42,7 +42,7 @@ export class BrowserSendStateService {
   }
 
   /** Set the active user's browser send component state
-   *  @param { BrowserSendComponentState } value sets the sends and type counts along with the scroll position and search text for
+   *  @param { BrowserSendComponentState } value sets the sends along with the scroll position and search text for
    *  the send component on the browser
    */
   async setBrowserSendComponentState(value: BrowserSendComponentState): Promise<void> {

apps/browser/src/tools/popup/services/key-definitions.spec.ts

@@ -1,7 +1,5 @@
 import { Jsonify } from "type-fest";
 
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-
 import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
 
 import { BROWSER_SEND_COMPONENT, BROWSER_SEND_TYPE_COMPONENT } from "./key-definitions";
@@ -12,7 +10,8 @@ describe("Key definitions", () => {
       const keyDef = BROWSER_SEND_COMPONENT;
 
       const expectedState = {
-        typeCounts: new Map<SendType, number>(),
+        scrollY: 0,
+        searchText: "test",
       };
 
       const result = keyDef.deserializer(