[SM-896] When org is disabled disable the logic and show warning symbols (#6225)

* When org is disabled disable the logic and show warning symbols

* fixing org enabled logic

* removing unused code

* Adding route gaurd logic and new org suspended page

* fixing lint issue

* fixing issues

* Requested changes

* adding back code that was accidentally removed from organization-switcher

* Update bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts

Co-authored-by: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>

* Removing unused code and updating storybook to set enabled:true

* removing onDestroy

* Will's suggestions

* will's suggested change

* fix nav-item color in story

* Thomas Rittson's suggested changes

* adding back removed spaces

* Adding back white space

* updating guard

* Update bitwarden_license/bit-web/src/app/secrets-manager/guards/sm-org-enabled.guard.ts

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* removing ununsed data

* Updating incorrect messages

---------

Co-authored-by: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>
Co-authored-by: William Martin <contact@willmartian.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

libs/components/src/icon/icons/index.ts

@@ -1 +1,2 @@
 export * from "./search";
+export * from "./no-access";

libs/components/src/icon/icons/no-access.ts

@@ -0,0 +1,12 @@
+import { svgIcon } from "../icon";
+
+export const NoAccess = svgIcon`
+<svg xmlns="http://www.w3.org/2000/svg" width="154" height="130" fill="none">
+  <path class="tw-stroke-secondary-500" d="M60.795 112.1h55.135a4 4 0 0 0 4-4V59.65M32.9 51.766V6a4 4 0 0 1 4-4h79.03a4 4 0 0 1 4 4v19.992"  stroke-width="4"/>
+  <path class="tw-stroke-secondary-500" d="M46.997 21.222h13.806M69.832 21.222h13.806M93.546 21.222h13.806M46.997 44.188h13.806M69.832 44.188h13.806M93.546 44.188h13.806M50.05 67.02h10.753M69.832 67.02h13.806M93.546 67.02h13.806M46.997 90.118h13.806M69.832 90.118h13.806M93.546 90.118h13.806" stroke-width="2" stroke-linecap="round"/>
+  <path class="tw-stroke-secondary-500" d="M30.914 89.366c10.477 0 18.97-8.493 18.97-18.97 0-10.476-8.493-18.97-18.97-18.97-10.476 0-18.969 8.494-18.969 18.97 0 10.477 8.493 18.97 18.97 18.97ZM2.313 117.279c2.183-16.217 15.44-27.362 29.623-27.362 14.07 0 25.942 11.022 27.898 27.33.167 1.39-.988 2.753-2.719 2.753H5c-1.741 0-2.87-1.366-2.687-2.721Z" stroke-width="4"/>
+  <path class="tw-stroke-danger-500" d="m147.884 50.361-15.89-27.522c-2.31-4-8.083-4-10.392 0l-15.891 27.523c-2.309 4 .578 9 5.196 9h31.781c4.619 0 7.505-5 5.196-9Z" stroke-width="4"/>
+  <path class="tw-stroke-danger-500" d="M126.798 29.406v16.066" stroke-width="4" stroke-linecap="round"/>
+  <path class="tw-fill-danger-500" d="M126.798 54.727a2.635 2.635 0 1 0 0-5.27 2.635 2.635 0 0 0 0 5.27Z" />
+</svg>
+`;

libs/components/src/navigation/nav-group.component.html

@@ -17,7 +17,7 @@
       [bitIconButton]="
         open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
       "
-      [buttonType]="'main'"
+      [buttonType]="'light'"
       (click)="toggle($event)"
       size="small"
       [title]="'toggleCollapse' | i18n"
@@ -32,8 +32,11 @@
   <ng-container slot="start" *ngIf="variant === 'tree'">
     <ng-container *ngTemplateOutlet="button"></ng-container>
   </ng-container>
-  <ng-container slot="end" *ngIf="variant !== 'tree'">
-    <ng-container *ngTemplateOutlet="button"></ng-container>
+  <ng-container slot="end">
+    <ng-content select="[slot=end]"></ng-content>
+    <ng-container *ngIf="variant !== 'tree'">
+      <ng-container *ngTemplateOutlet="button"></ng-container>
+    </ng-container>
   </ng-container>
 </bit-nav-item>
 

libs/components/src/navigation/nav-item.component.html

@@ -73,7 +73,7 @@
     </ng-template>
 
     <div
-      class="tw-flex tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
+      class="tw-flex tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
     >
       <ng-content select="[slot=end]"></ng-content>
     </div>

libs/components/src/navigation/nav-item.stories.ts

@@ -64,7 +64,7 @@ export const WithChildButtons: Story = {
           slot="start"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-clone'"
-          [buttonType]="'contrast'"
+          [buttonType]="'light'"
           size="small"
           aria-label="option 1"
         ></button>
@@ -72,7 +72,7 @@ export const WithChildButtons: Story = {
           slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-pencil-square'"
-          [buttonType]="'contrast'"
+          [buttonType]="'light'"
           size="small"
           aria-label="option 2"
         ></button>
@@ -80,7 +80,7 @@ export const WithChildButtons: Story = {
           slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-check'"
-          [buttonType]="'contrast'"
+          [buttonType]="'light'"
           size="small"
           aria-label="option 3"
         ></button>