From 1f92dcbf208364c95bfcf6ee602453951f2ece12 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Fri, 16 Dec 2022 15:22:27 -0500
Subject: [PATCH] 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         | 41 ++++++++++--
 .../popup/vault/vault-select.component.html   | 67 +++++++++++--------
 .../organization-filter.component.html        | 10 ++-
 .../organization-filter.component.html        | 13 +++-
 .../src/services/policy/policy.service.ts     |  1 -
 5 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 8803c73aa66..92c38773dad 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/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) {
diff --git a/apps/browser/src/popup/vault/vault-select.component.html b/apps/browser/src/popup/vault/vault-select.component.html
index 8ef8c2dc04c..a25f49ebf2d 100644
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -10,12 +10,16 @@
         [attr.aria-expanded]="isOpen"
         [attr.aria-label]="vaultFilterDisplay"
       >
-        {{ vaultFilterDisplay | ellipsis: 45 }}&nbsp;
-        <i
-          class="bwi bwi-sm"
-          aria-hidden="true"
-          [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
-        ></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></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)"
         >
-          <i
-            *ngIf="organization.planProductType !== 1"
-            class="bwi bwi-fw bwi-business"
-            aria-hidden="true"
-          ></i>
-          <i
-            *ngIf="organization.planProductType === 1"
-            class="bwi bwi-fw bwi-family"
-            aria-hidden="true"
-          ></i>
-          <span
-            >&nbsp;{{ organization.name | ellipsis: (organization.enabled ? 21 : 18):true }}</span
-          >
-          <i
-            *ngIf="!organization.enabled"
-            class="bwi bwi-fw bwi-exclamation-triangle text-danger"
-            attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
-            appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-          ></i>
+          <div class="vault-select-org-text-container">
+            <i
+              *ngIf="organization.planProductType !== 1"
+              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 vault-select-prefix-icon"
+              aria-hidden="true"
+            ></i>
+
+            <span class="vault-select-org-name">{{ organization.name }}</span
+            ><i
+              *ngIf="!organization.enabled"
+              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>
diff --git a/apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html b/apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html
index cfec1cf89d0..68aebbf41dd 100644
--- a/apps/desktop/src/app/vault/vault-filter/filters/organization-filter.component.html
+++ b/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>
diff --git a/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html b/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html
index 81924ba6433..5f7be8d145b 100644
--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html
+++ b/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">
diff --git a/libs/common/src/services/policy/policy.service.ts b/libs/common/src/services/policy/policy.service.ts
index c20682184bc..8b1868f0131 100644
--- a/libs/common/src/services/policy/policy.service.ts
+++ b/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) &&