[EC-1026] Use primary action when clicking on vault row (#4541)

apps/web/src/app/organizations/vault/vault-items.component.ts

@@ -163,10 +163,6 @@ export class VaultItemsComponent extends BaseVaultItemsComponent implements OnDe
     }
   }
 
-  selectRow(item: VaultItemRow) {
-    this.checkRow(item);
-  }
-
   checkRow(item: VaultItemRow, select?: boolean) {
     if (item instanceof TreeNode && item.node.id == null) {
       return;

apps/web/src/app/organizations/vault/vault.component.html

@@ -86,7 +86,7 @@
         [activeFilter]="activeFilter"
         [initOrganization]="organization"
         (activeFilterChanged)="applyVaultFilter($event)"
-        (onCipherClicked)="editCipher($event)"
+        (onCipherClicked)="navigateToCipher($event)"
         (onAttachmentsClicked)="editCipherAttachments($event)"
         (onAddCipher)="addCipher()"
         (onEditCipherCollectionsClicked)="editCipherCollections($event)"

apps/web/src/app/organizations/vault/vault.component.ts

@@ -294,6 +294,10 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
   }
 
+  async navigateToCipher(cipher: CipherView) {
+    this.go({ itemId: cipher?.id });
+  }
+
   async editCipher(cipher: CipherView) {
     return this.editCipherId(cipher?.id);
   }

apps/web/src/app/vault/vault-items.component.html

@@ -71,8 +71,14 @@
       </tr>
     </ng-container>
     <ng-template body>
-      <tr bitRow *ngFor="let col of filteredCollections" alignContent="middle">
+      <tr
-        <td bitCell (click)="selectRow(col)">
+        bitRow
+        *ngFor="let col of filteredCollections"
+        (click)="navigateCollection(col)"
+        class="tw-cursor-pointer"
+        alignContent="middle"
+      >
+        <td bitCell (click)="checkRow(col)" appStopProp>
           <input
             *ngIf="canDeleteCollection(col.node)"
             class="tw-cursor-pointer"
@@ -81,12 +87,12 @@
             appStopProp
           />
         </td>
-        <td bitCell (click)="selectRow(col)">
+        <td bitCell>
           <div class="icon" aria-hidden="true">
             <i class="bwi bwi-fw bwi-lg bwi-collection"></i>
           </div>
         </td>
-        <td bitCell (click)="selectRow(col)">
+        <td bitCell>
           <button
             bitLink
             class="tw-text-start"
@@ -96,7 +102,7 @@
             {{ col.node.name }}
           </button>
         </td>
-        <td bitCell (click)="selectRow(col)">
+        <td bitCell>
           <ng-container *ngIf="!organization">
             <app-org-badge
               organizationName="{{ col.node.organizationId | orgNameFromId: organizations }}"
@@ -114,7 +120,7 @@
             ></app-group-badge>
           </ng-container>
         </td>
-        <td bitCell class="tw-text-right" (click)="selectRow(col)">
+        <td bitCell class="tw-text-right">
           <button
             *ngIf="canEditCollection(col.node) || canDeleteCollection(col.node)"
             [bitMenuTriggerFor]="collectionOptions"
@@ -154,14 +160,20 @@
           </bit-menu>
         </td>
       </tr>
-      <tr bitRow *ngFor="let c of filteredCiphers" alignContent="middle">
+      <tr
-        <td bitCell (click)="selectRow(c)">
+        bitRow
+        *ngFor="let c of filteredCiphers"
+        class="tw-cursor-pointer"
+        (click)="selectCipher(c)"
+        alignContent="middle"
+      >
+        <td bitCell (click)="checkRow(c)" appStopProp>
           <input type="checkbox" [(ngModel)]="$any(c).checked" appStopProp />
         </td>
-        <td bitCell (click)="selectRow(c)">
+        <td bitCell>
           <app-vault-icon [cipher]="c"></app-vault-icon>
         </td>
-        <td bitCell class="tw-break-all" (click)="selectRow(c)">
+        <td bitCell class="tw-break-all">
           <button
             bitLink
             class="tw-text-start"
@@ -193,7 +205,7 @@
           <br />
           <span class="tw-text-sm tw-text-muted" appStopProp>{{ c.subTitle }}</span>
         </td>
-        <td bitCell (click)="selectRow(c)">
+        <td bitCell>
           <ng-container *ngIf="!organization">
             <app-org-badge
               organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
@@ -211,7 +223,7 @@
             ></app-collection-badge>
           </ng-container>
         </td>
-        <td bitCell class="tw-text-right" (click)="selectRow(c)">
+        <td bitCell class="tw-text-right">
           <button
             [bitMenuTriggerFor]="cipherOptions"
             size="small"

apps/web/src/app/vault/vault-items.component.ts

@@ -453,14 +453,6 @@ export class VaultItemsComponent extends BaseVaultItemsComponent implements OnDe
     }
   }
 
-  selectRow(item: VaultItemRow) {
-    if (item instanceof CipherView) {
-      this.checkRow(item);
-    } else if (item instanceof TreeNode) {
-      this.navigateCollection(item);
-    }
-  }
-
   navigateCollection(node: TreeNode<CollectionFilter>) {
     const filter = this.activeFilter;
     filter.selectedCollectionNode = node;
@@ -507,12 +499,6 @@ export class VaultItemsComponent extends BaseVaultItemsComponent implements OnDe
     );
   }
 
-  async selectCipher(cipher: CipherView) {
-    if (await this.repromptCipher(cipher)) {
-      super.selectCipher(cipher);
-    }
-  }
-
   onOrganizationClicked(organizationId: string) {
     this.onOrganzationBadgeClicked.emit(organizationId);
   }

apps/web/src/app/vault/vault.component.html

@@ -60,7 +60,7 @@
       <app-vault-items
         [activeFilter]="activeFilter"
         (activeFilterChanged)="applyVaultFilter($event)"
-        (onCipherClicked)="editCipher($event)"
+        (onCipherClicked)="navigateToCipher($event)"
         (onAttachmentsClicked)="editCipherAttachments($event)"
         (onAddCipher)="addCipher()"
         (onShareClicked)="shareCipher($event)"

apps/web/src/app/vault/vault.component.ts

@@ -332,6 +332,10 @@ export class VaultComponent implements OnInit, OnDestroy {
     component.folderId = this.activeFilter.folderId;
   }
 
+  async navigateToCipher(cipher: CipherView) {
+    this.go({ itemId: cipher?.id });
+  }
+
   async editCipher(cipher: CipherView) {
     return this.editCipherId(cipher?.id);
   }