Defect/SG-825 - users in org w/ no personal vault still see personal vault (disabled org policies now still apply) (#4094)

* SG-825 - policy.service - Apply policies of disabled orgs

* SG-825 - OrgFilter - Show org suspended icon when org is disabled and remove personal vault policy enabled

* SG-825 - Org Filter refactor - Enterprise users can now access org options to leave orgs without selecting them (previously, you had to select an org to get the options to show up which was not possible for disabled orgs).  Users can now leave disabled orgs.

* SG-825 - fix aria label compile issue

* SG-825 - Browser - Vault filter CSS refactor - (1) Better ellipsis truncation implemented (2) Selected vault and dropdown widths now scale dynamically based on selection and container width

* SG-825 - Desktop - (1) Org suspended warning icon now displayed on disabled orgs even when personal vault removed policy applied (2) Org suspended icon now has same accessibility (title / label) as web & browser.

apps/browser/src/popup/scss/base.scss

@@ -536,10 +536,23 @@ main {
     }
     border-radius: $border-radius;
     padding: 6px 10px;
-    width: 160px;
+    width: auto;
+    max-width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .org-filter-text-container {
+      // src: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
+      display: flex;
+      flex: 1;
+      min-width: 0;
+
+      .org-filter-text-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }
 .vault-select {
@@ -550,9 +563,8 @@ main {
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");
   }
-  margin-right: 5px;
+  margin-right: 18px;
   margin-top: 1px;
-  width: 160px;
   @include themify($themes) {
     border: 1px solid themed("borderColor");
   }
@@ -560,7 +572,9 @@ main {
   button {
     border: none;
     background: transparent;
-    width: 100%;
+    width: auto;
+    max-width: 100%;
+
     padding: 5px 10px;
     text-align: start;
     @include themify($themes) {
@@ -578,6 +592,25 @@ main {
         background-color: themed("boxBackgroundHoverColor");
       }
     }
+
+    i.vault-select-prefix-icon {
+      margin-right: 5px;
+    }
+    i.vault-select-suffix-icon {
+      margin-left: 5px;
+    }
+
+    .vault-select-org-text-container {
+      display: flex;
+      flex: 1;
+      min-width: 0;
+      align-items: center;
+      .vault-select-org-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
   .border {
     @include themify($themes) {

apps/browser/src/popup/vault/vault-select.component.html

@@ -10,12 +10,16 @@
         [attr.aria-expanded]="isOpen"
         [attr.aria-label]="vaultFilterDisplay"
       >
-        {{ vaultFilterDisplay | ellipsis: 45 }} 
-        <i
+        <span class="org-filter-text-container">
+          <span class="org-filter-text-name">{{ vaultFilterDisplay }}</span
+          >&nbsp;
+          <span
+            ><i
               class="bwi bwi-sm"
               aria-hidden="true"
               [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
-        ></i>
+            ></i></span
+        ></span>
       </button>
     </ng-container>
     <ng-template class="vault-select-container" #vaultSelectorTemplate>
@@ -28,37 +32,42 @@
         aria-modal="true"
       >
         <button appStopClick (click)="selectAllVaults()">
-          <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
-          &nbsp;{{ "allVaults" | i18n }}
+          <div class="vault-select-org-text-container">
+            <i class="bwi bwi-fw bwi-filter vault-select-prefix-icon" aria-hidden="true"></i>
+            <span class="vault-select-org-name">{{ "allVaults" | i18n }}</span>
+          </div>
         </button>
         <button *ngIf="!enforcePersonalOwnership" appStopClick (click)="selectMyVault()">
-          <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-          &nbsp;{{ "myVault" | i18n }}
+          <div class="vault-select-org-text-container">
+            <i class="bwi bwi-fw bwi-user vault-select-prefix-icon" aria-hidden="true"></i>
+            <span class="vault-select-org-name">{{ "myVault" | i18n }}</span>
+          </div>
         </button>
         <button
           *ngFor="let organization of organizations"
           appStopClick
           (click)="selectOrganization(organization)"
         >
+          <div class="vault-select-org-text-container">
             <i
               *ngIf="organization.planProductType !== 1"
-            class="bwi bwi-fw bwi-business"
+              class="bwi bwi-fw bwi-business vault-select-prefix-icon"
               aria-hidden="true"
             ></i>
             <i
               *ngIf="organization.planProductType === 1"
-            class="bwi bwi-fw bwi-family"
+              class="bwi bwi-fw bwi-family vault-select-prefix-icon"
               aria-hidden="true"
             ></i>
-          <span
-            >&nbsp;{{ organization.name | ellipsis: (organization.enabled ? 21 : 18):true }}</span
-          >
-          <i
+
+            <span class="vault-select-org-name">{{ organization.name }}</span
+            ><i
               *ngIf="!organization.enabled"
-            class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+              class="bwi bwi-fw bwi-exclamation-triangle text-danger vault-select-suffix-icon"
               attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
               appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
             ></i>
+          </div>
         </button>
       </div>
     </ng-template>

apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html

@@ -46,6 +46,13 @@
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
             </button>
+            <span *ngIf="!organization.enabled" class="ml-auto">
+              <i
+                class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
+                attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+              ></i>
+            </span>
           </span>
         </li>
       </ul>
@@ -113,7 +120,8 @@
             <span *ngIf="!organization.enabled" class="ml-auto">
               <i
                 class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
-                aria-hidden="true"
+                attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
               ></i>
             </span>
           </span>

apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html

@@ -60,6 +60,7 @@
           <span class="filter-buttons">
             <button
               class="filter-button"
+              [ngClass]="{ 'disabled-organization': !organization.enabled }"
               (click)="applyOrganizationFilter(organization)"
               [attr.aria-pressed]="activeFilter.selectedOrganizationId === organization.id"
               appA11yTitle="{{ 'vault' | i18n }}: {{ organization.name }}"
@@ -67,14 +68,20 @@
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}
             </button>
-            <ng-container *ngIf="organization.id === activeFilter.selectedOrganizationId">
-              <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">
+            <span class="ml-auto">
+              <i
+                *ngIf="!organization.enabled"
+                class="org-options bwi bwi-fw bwi-exclamation-triangle text-danger"
+                attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+              ></i
+              ><button [bitMenuTriggerFor]="orgMenu" class="org-options">
                 <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
               </button>
               <bit-menu class="filter-organization-options" #orgMenu>
                 <app-organization-options [organization]="organization"></app-organization-options>
               </bit-menu>
-            </ng-container>
+            </span>
           </span>
         </li>
         <li class="filter-option">

libs/common/src/services/policy/policy.service.ts

@@ -268,7 +268,6 @@ export class PolicyService implements InternalPolicyServiceAbstraction {
 
     return organizations.some(
       (o) =>
-        o.enabled &&
         o.status >= OrganizationUserStatusType.Accepted &&
         o.usePolicies &&
         policySet.has(o.id) &&