SM-1146: Display total counts of projects, machine accounts, secrets in Secrets Manager (#9791)

* SM-1146: Secrets Manager total counts

* SM-1146: Tab link component simplifications

* SM-1146: Total counts update on CRUD

* SM-1146: Total counts API paths update

* SM-1146: Unit test coverage for services

* SM-1146: Fix incorrect types returned

* SM-1146: Storybook example for tab-link with child counter

* SM-1146: Tailwind states with groups

* SM-1146: Moving counts view types in one file

* SM-1146: Moving counts methods, responses to one shared service

* SM-1146: Removing redundant services imports

* SM-1146: Removing redundant observables

* SM-1337: Total counts hidden for suspended organizations

* SM-1336: Total counts updated on import

* SM-1336: Import error handling refactor

* SM-1336: Import error handling improvements

* SM-1336: Import error not working with project errors, Unit Test coverage

* Update bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-import.component.ts

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

* SM-1336: UT deprecation removal

* SM-1336: Better UT

* SM-1336: Lint fix

* SM-1146: Linter fix

---------

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

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

@@ -100,13 +100,9 @@
       </ng-template>
 
       <div
-        #endSlot
         *ngIf="data.open"
-        class="tw-flex -tw-ml-3 tw-pr-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
-        [ngClass]="[
-          variant === 'tree' ? 'tw-py-1' : 'tw-py-2',
-          endSlot.childElementCount === 0 ? 'tw-hidden' : '',
-        ]"
+        class="tw-flex -tw-ml-3 tw-pr-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
+        [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
       >
         <ng-content select="[slot=end]"></ng-content>
       </div>

libs/components/src/tabs/tab-nav-bar/tab-link.component.html

@@ -9,6 +9,12 @@
   [attr.aria-disabled]="disabled"
   ariaCurrentWhenActive="page"
   role="link"
+  class="tw-flex tw-group/tab hover:tw-no-underline"
 >
-  <ng-content></ng-content>
+  <div class="group-hover/tab:tw-underline">
+    <ng-content></ng-content>
+  </div>
+  <div class="tw-font-normal tw-ml-2 empty:tw-ml-0">
+    <ng-content select="[slot=end]"></ng-content>
+  </div>
 </a>

libs/components/src/tabs/tabs.stories.ts

@@ -33,6 +33,12 @@ class ItemThreeDummyComponent {}
 })
 class DisabledDummyComponent {}
 
+@Component({
+  selector: "bit-tab-item-with-child-counter-dummy",
+  template: "Router - Item With Child Counter selected",
+})
+class ItemWithChildCounterDummyComponent {}
+
 export default {
   title: "Component Library/Tabs",
   component: TabGroupComponent,
@@ -42,6 +48,7 @@ export default {
         ActiveDummyComponent,
         ItemTwoDummyComponent,
         ItemThreeDummyComponent,
+        ItemWithChildCounterDummyComponent,
         DisabledDummyComponent,
       ],
       imports: [CommonModule, TabsModule, ButtonModule, FormFieldModule, RouterModule],
@@ -55,6 +62,7 @@ export default {
               { path: "active", component: ActiveDummyComponent },
               { path: "item-2", component: ItemTwoDummyComponent },
               { path: "item-3", component: ItemThreeDummyComponent },
+              { path: "item-with-child-counter", component: ItemWithChildCounterDummyComponent },
               { path: "disabled", component: DisabledDummyComponent },
             ],
             { useHash: true },
@@ -102,6 +110,12 @@ export const NavigationTabs: Story = {
         <bit-tab-link [route]="['active']">Active</bit-tab-link>
         <bit-tab-link [route]="['item-2']">Item 2</bit-tab-link>
         <bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
+        <bit-tab-link [route]="['item-with-child-counter']">
+          Item With Counter
+          <div slot="end" class="tw-pl-2 tw-text-muted">
+            42
+          </div>
+        </bit-tab-link>
         <bit-tab-link [route]="['disable']" [disabled]="true">Disabled</bit-tab-link>
       </bit-tab-nav-bar>
       <div class="tw-bg-transparent tw-text-semibold tw-text-center tw-text-main tw-py-10">