[PM-2276] Upgrade Storybook to v7 (#5258)

apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.stories.ts

@@ -1,6 +1,7 @@
+import { importProvidersFrom } from "@angular/core";
 import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { action } from "@storybook/addon-actions";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -39,12 +40,14 @@ export default {
         FormsModule,
         TabsModule,
         TableModule,
-        PreloadedEnglishI18nModule,
         JslibModule,
         IconButtonModule,
       ],
       providers: [],
     }),
+    applicationConfig({
+      providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
+    }),
   ],
   parameters: {},
   argTypes: {

apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts

@@ -1,6 +1,6 @@
-import { Component, Directive, Input } from "@angular/core";
+import { Component, Directive, Input, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { Meta, Story, moduleMetadata } from "@storybook/angular";
+import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
 import { BehaviorSubject } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -49,36 +49,7 @@ export default {
         StoryLayoutComponent,
         StoryContentComponent,
       ],
-      imports: [
-        JslibModule,
-        MenuModule,
-        IconButtonModule,
-        LinkModule,
-        RouterModule.forRoot(
-          [
-            {
-              path: "",
-              component: StoryLayoutComponent,
-              children: [
-                {
-                  path: "",
-                  redirectTo: "vault",
-                  pathMatch: "full",
-                },
-                {
-                  path: "sm/:organizationId",
-                  component: StoryContentComponent,
-                },
-                {
-                  path: "vault",
-                  component: StoryContentComponent,
-                },
-              ],
-            },
-          ],
-          { useHash: true }
-        ),
-      ],
+      imports: [JslibModule, MenuModule, IconButtonModule, LinkModule, RouterModule],
       providers: [
         { provide: OrganizationService, useClass: MockOrganizationService },
         MockOrganizationService,
@@ -93,6 +64,36 @@ export default {
         },
       ],
     }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(
+          RouterModule.forRoot(
+            [
+              {
+                path: "",
+                component: StoryLayoutComponent,
+                children: [
+                  {
+                    path: "",
+                    redirectTo: "vault",
+                    pathMatch: "full",
+                  },
+                  {
+                    path: "sm/:organizationId",
+                    component: StoryContentComponent,
+                  },
+                  {
+                    path: "vault",
+                    component: StoryContentComponent,
+                  },
+                ],
+              },
+            ],
+            { useHash: true }
+          )
+        ),
+      ],
+    }),
   ],
 } as Meta;
 

apps/web/src/app/reports/shared/report-card/report-card.stories.ts

@@ -1,5 +1,6 @@
+import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
-import { Meta, Story, moduleMetadata } from "@storybook/angular";
+import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";
@@ -15,15 +16,12 @@ export default {
   component: ReportCardComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        JslibModule,
-        BadgeModule,
-        IconModule,
-        RouterTestingModule,
-        PreloadedEnglishI18nModule,
-      ],
+      imports: [JslibModule, BadgeModule, IconModule, RouterTestingModule],
       declarations: [PremiumBadgeComponent],
     }),
+    applicationConfig({
+      providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
+    }),
   ],
   args: {
     title: "Exposed Passwords",

apps/web/src/app/reports/shared/report-list/report-list.stories.ts

@@ -1,5 +1,6 @@
+import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
-import { Meta, Story, moduleMetadata } from "@storybook/angular";
+import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";
@@ -17,15 +18,12 @@ export default {
   component: ReportListComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        JslibModule,
-        BadgeModule,
-        RouterTestingModule,
-        PreloadedEnglishI18nModule,
-        IconModule,
-      ],
+      imports: [JslibModule, BadgeModule, RouterTestingModule, IconModule],
       declarations: [PremiumBadgeComponent, ReportCardComponent],
     }),
+    applicationConfig({
+      providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
+    }),
   ],
   args: {
     reports: Object.values(reports).map((report) => ({

apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

@@ -1,6 +1,6 @@
-import { Component } from "@angular/core";
+import { importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular";
 import { BehaviorSubject } from "rxjs";
 
 import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
@@ -28,11 +28,6 @@ import { Unassigned } from "../../individual-vault/vault-filter/shared/models/ro
 import { VaultItemsComponent } from "./vault-items.component";
 import { VaultItemsModule } from "./vault-items.module";
 
-@Component({
-  template: "",
-})
-class EmptyComponent {}
-
 const organizations = [...new Array(3).keys()].map(createOrganization);
 const groups = [...Array(3).keys()].map(createGroupView);
 const collections = [...Array(5).keys()].map(createCollectionView);
@@ -46,11 +41,7 @@ export default {
   component: VaultItemsComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        VaultItemsModule,
-        PreloadedEnglishI18nModule,
-        RouterModule.forRoot([{ path: "**", component: EmptyComponent }], { useHash: true }),
-      ],
+      imports: [VaultItemsModule, RouterModule],
       providers: [
         {
           provide: EnvironmentService,
@@ -103,6 +94,12 @@ export default {
         },
       ],
     }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
+        importProvidersFrom(PreloadedEnglishI18nModule),
+      ],
+    }),
   ],
   args: {
     disabled: false,