[SG-329] Disabled Org display (#3050)

* chore: added strings for disabled org messages

* chore: added icon display

* chore: added prevent filter check

* chore: code changes for desktop

* chore: browser

apps/browser/src/_locales/en/messages.json

@@ -1967,5 +1967,11 @@
   },
   "ssoKeyConnectorError": {
     "message": "Key Connector error: make sure Key Connector is available and working correctly."
+  },
+  "organizationIsDisabled": {
+    "message": "Organization is disabled."
+  },
+  "disabledOrganizationFilterError" : {
+    "message" : "Items in disabled Organizations cannot be accessed. Contact your Organization owner for assistance."
   }
 }

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

@@ -59,6 +59,12 @@
           aria-hidden="true"
         ></i>
         <span>&nbsp;{{ organization.name | ellipsis: 21:true }}</span>
+        <i
+          *ngIf="!organization.enabled"
+          class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+          aria-label="{{ 'organizationIsDisabled' | i18n }}"
+          appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+        ></i>
       </button>
     </div>
   </ng-template>

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

@@ -17,6 +17,7 @@ import { merge } from "rxjs";
 import { VaultFilter } from "@bitwarden/angular/modules/vault-filter/models/vault-filter.model";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";
 
 import { VaultFilterService } from "../../services/vaultFilter.service";
@@ -82,7 +83,8 @@ export class VaultSelectComponent implements OnInit {
     private ngZone: NgZone,
     private broadcasterService: BroadcasterService,
     private overlay: Overlay,
-    private viewContainerRef: ViewContainerRef
+    private viewContainerRef: ViewContainerRef,
+    private platformUtilsService: PlatformUtilsService
   ) {}
 
   async ngOnInit() {
@@ -171,10 +173,18 @@ export class VaultSelectComponent implements OnInit {
   }
 
   selectOrganization(organization: Organization) {
-    this.vaultFilterDisplay = organization.name;
+    if (!organization.enabled) {
-    this.vaultFilterService.setVaultFilter(organization.id);
+      this.platformUtilsService.showToast(
-    this.onVaultSelectionChanged.emit();
+        "error",
-    this.close();
+        null,
+        this.i18nService.t("disabledOrganizationFilterError")
+      );
+    } else {
+      this.vaultFilterDisplay = organization.name;
+      this.vaultFilterService.setVaultFilter(organization.id);
+      this.onVaultSelectionChanged.emit();
+      this.close();
+    }
   }
   selectAllVaults() {
     this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);

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

@@ -92,6 +92,12 @@
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
+              <i
+                *ngIf="!organization.enabled"
+                class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+                aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+              ></i>
             </button>
           </span>
         </li>

apps/desktop/src/app/modules/vault-filter/components/organization-filter.component.ts

@@ -2,6 +2,9 @@ import { Component } from "@angular/core";
 
 import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "@bitwarden/angular/modules/vault-filter/components/organization-filter.component";
 import { DisplayMode } from "@bitwarden/angular/modules/vault-filter/models/display-mode";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { Organization } from "@bitwarden/common/models/domain/organization";
 
 @Component({
   selector: "app-organization-filter",
@@ -16,4 +19,24 @@ export class OrganizationFilterComponent extends BaseOrganizationFilterComponent
       hiddenDisplayModes.indexOf(this.displayMode) === -1
     );
   }
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService
+  ) {
+    super();
+  }
+
+  async applyOrganizationFilter(organization: Organization) {
+    if (organization.enabled) {
+      //proceed with default behaviour for enabled organizations
+      super.applyOrganizationFilter(organization);
+    } else {
+      this.platformUtilsService.showToast(
+        "error",
+        null,
+        this.i18nService.t("disabledOrganizationFilterError")
+      );
+    }
+  }
 }

apps/desktop/src/locales/en/messages.json

@@ -1964,6 +1964,12 @@
   "apiKey": {
     "message": "API Key"
   },
+  "organizationIsDisabled": {
+    "message": "Organization is disabled."
+  },
+  "disabledOrganizationFilterError" : {
+    "message" : "Items in disabled Organizations cannot be accessed. Contact your Organization owner for assistance."
+  },
   "neverLockWarning": {
     "message": "Are you sure you want to use the \"Never\" option? Setting your lock options to \"Never\" stores your vault's encryption key on your device. If you use this option you should ensure that you keep your device properly protected."
   }

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

@@ -129,6 +129,12 @@
             <button class="filter-button" (click)="applyOrganizationFilter(organization)">
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}
+              <i
+                *ngIf="!organization.enabled"
+                class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+                aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+              ></i>
             </button>
             <ng-container>
               <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">

apps/web/src/app/modules/vault-filter/components/organization-filter.component.ts

@@ -1,6 +1,9 @@
 import { Component } from "@angular/core";
 
 import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "@bitwarden/angular/modules/vault-filter/components/organization-filter.component";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { Organization } from "@bitwarden/common/models/domain/organization";
 
 @Component({
   selector: "app-organization-filter",
@@ -8,4 +11,24 @@ import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "
 })
 export class OrganizationFilterComponent extends BaseOrganizationFilterComponent {
   displayText = "allVaults";
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService
+  ) {
+    super();
+  }
+
+  async applyOrganizationFilter(organization: Organization) {
+    if (organization.enabled) {
+      //proceed with default behaviour for enabled organizations
+      super.applyOrganizationFilter(organization);
+    } else {
+      this.platformUtilsService.showToast(
+        "error",
+        null,
+        this.i18nService.t("disabledOrganizationFilterError")
+      );
+    }
+  }
 }

apps/web/src/locales/en/messages.json

@@ -3218,6 +3218,9 @@
   "organizationIsDisabled": {
     "message": "Organization is disabled."
   },
+  "disabledOrganizationFilterError" : {
+    "message" : "Items in disabled Organizations cannot be accessed. Contact your Organization owner for assistance."
+  },
   "licenseIsExpired": {
     "message": "License is expired."
   },