[PM-4198][TechDebt] Split up import and export modules (#6483)

* Split up import/export into separate modules

* Fix routing and apply PR feedback

* Renamed OrganizationExport exports to OrganizationVaultExport

* Renamed filenames according to export rename

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts

@@ -45,10 +45,20 @@ const routes: Routes = [
       },
       {
         path: "tools",
-        loadChildren: () =>
+        children: [
-          import("../tools/import-export/org-import-export.module").then(
+          {
-            (m) => m.OrganizationImportExportModule
+            path: "import",
-          ),
+            loadChildren: () =>
+              import("../tools/import/org-import.module").then((m) => m.OrganizationImportModule),
+          },
+          {
+            path: "export",
+            loadChildren: () =>
+              import("../tools/vault-export/org-vault-export.module").then(
+                (m) => m.OrganizationVaultExportModule
+              ),
+          },
+        ],
       },
     ],
   },

apps/web/src/app/admin-console/organizations/tools/import/org-import-routing.module.ts

@@ -3,14 +3,13 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 
-import { OrganizationPermissionsGuard } from "../../../../admin-console/organizations/guards/org-permissions.guard";
+import { OrganizationPermissionsGuard } from "../../guards/org-permissions.guard";
 
-import { OrganizationExportComponent } from "./org-export.component";
 import { OrganizationImportComponent } from "./org-import.component";
 
 const routes: Routes = [
   {
-    path: "import",
+    path: "",
     component: OrganizationImportComponent,
     canActivate: [OrganizationPermissionsGuard],
     data: {
@@ -18,18 +17,9 @@ const routes: Routes = [
       organizationPermissions: (org: Organization) => org.canAccessImportExport,
     },
   },
-  {
-    path: "export",
-    component: OrganizationExportComponent,
-    canActivate: [OrganizationPermissionsGuard],
-    data: {
-      titleId: "exportVault",
-      organizationPermissions: (org: Organization) => org.canAccessImportExport,
-    },
-  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
 })
-export class OrganizationImportExportRoutingModule {}
+export class OrganizationImportRoutingModule {}

apps/web/src/app/admin-console/organizations/tools/import/org-import.component.ts

@@ -18,11 +18,11 @@ import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.serv
 import { DialogService } from "@bitwarden/components";
 import { ImportServiceAbstraction } from "@bitwarden/importer";
 
-import { ImportComponent } from "../../../../tools/import-export/import.component";
+import { ImportComponent } from "../../../../tools/import/import.component";
 
 @Component({
   selector: "app-org-import",
-  templateUrl: "../../../../tools/import-export/import.component.html",
+  templateUrl: "../../../../tools/import/import.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class OrganizationImportComponent extends ImportComponent {

apps/web/src/app/admin-console/organizations/tools/import/org-import.module.ts

@@ -15,13 +15,12 @@ import {
 
 import { LooseComponentsModule, SharedModule } from "../../../../shared";
 
-import { OrganizationExportComponent } from "./org-export.component";
+import { OrganizationImportRoutingModule } from "./org-import-routing.module";
-import { OrganizationImportExportRoutingModule } from "./org-import-export-routing.module";
 import { OrganizationImportComponent } from "./org-import.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule, OrganizationImportExportRoutingModule],
+  imports: [SharedModule, LooseComponentsModule, OrganizationImportRoutingModule],
-  declarations: [OrganizationImportComponent, OrganizationExportComponent],
+  declarations: [OrganizationImportComponent],
   providers: [
     {
       provide: ImportApiServiceAbstraction,
@@ -42,4 +41,4 @@ import { OrganizationImportComponent } from "./org-import.component";
     },
   ],
 })
-export class OrganizationImportExportModule {}
+export class OrganizationImportModule {}

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+
+import { OrganizationPermissionsGuard } from "../../guards/org-permissions.guard";
+
+import { OrganizationVaultExportComponent } from "./org-vault-export.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: OrganizationVaultExportComponent,
+    canActivate: [OrganizationPermissionsGuard],
+    data: {
+      titleId: "exportVault",
+      organizationPermissions: (org: Organization) => org.canAccessImportExport,
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class OrganizationVaultExportRoutingModule {}

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.component.ts

@@ -14,14 +14,14 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { DialogService } from "@bitwarden/components";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
 
-import { ExportComponent } from "../../../../tools/import-export/export.component";
+import { ExportComponent } from "../../../../tools/vault-export/export.component";
 
 @Component({
   selector: "app-org-export",
-  templateUrl: "../../../../tools/import-export/export.component.html",
+  templateUrl: "../../../../tools/vault-export/export.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class OrganizationExportComponent extends ExportComponent {
+export class OrganizationVaultExportComponent extends ExportComponent {
   constructor(
     cryptoService: CryptoService,
     i18nService: I18nService,

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { LooseComponentsModule, SharedModule } from "../../../../shared";
+
+import { OrganizationVaultExportRoutingModule } from "./org-vault-export-routing.module";
+import { OrganizationVaultExportComponent } from "./org-vault-export.component";
+
+@NgModule({
+  imports: [SharedModule, LooseComponentsModule, OrganizationVaultExportRoutingModule],
+  declarations: [OrganizationVaultExportComponent],
+})
+export class OrganizationVaultExportModule {}

apps/web/src/app/oss-routing.module.ts

@@ -254,11 +254,13 @@ const routes: Routes = [
         children: [
           { path: "", pathMatch: "full", redirectTo: "generator" },
           {
-            path: "",
+            path: "import",
+            loadChildren: () => import("./tools/import/import.module").then((m) => m.ImportModule),
+          },
+          {
+            path: "export",
             loadChildren: () =>
-              import("./tools/import-export/import-export.module").then(
+              import("./tools/vault-export/export.module").then((m) => m.ExportModule),
-                (m) => m.ImportExportModule
-              ),
           },
           {
             path: "generator",

apps/web/src/app/tools/import/import-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { ImportComponent } from "./import.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ImportComponent,
+    data: { titleId: "importData" },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class ImportRoutingModule {}

apps/web/src/app/tools/import/import.module.ts

@@ -20,15 +20,13 @@ import {
   ImportSuccessDialogComponent,
   FilePasswordPromptComponent,
 } from "./dialog";
-import { ExportComponent } from "./export.component";
+import { ImportRoutingModule } from "./import-routing.module";
-import { ImportExportRoutingModule } from "./import-export-routing.module";
 import { ImportComponent } from "./import.component";
 
 @NgModule({
-  imports: [SharedModule, LooseComponentsModule, ImportExportRoutingModule],
+  imports: [SharedModule, LooseComponentsModule, ImportRoutingModule],
   declarations: [
     ImportComponent,
-    ExportComponent,
     FilePasswordPromptComponent,
     ImportErrorDialogComponent,
     ImportSuccessDialogComponent,
@@ -53,4 +51,4 @@ import { ImportComponent } from "./import.component";
     },
   ],
 })
-export class ImportExportModule {}
+export class ImportModule {}

apps/web/src/app/tools/vault-export/export-routing.module.ts

@@ -2,16 +2,10 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { ExportComponent } from "./export.component";
-import { ImportComponent } from "./import.component";
 
 const routes: Routes = [
   {
-    path: "import",
+    path: "",
-    component: ImportComponent,
-    data: { titleId: "importData" },
-  },
-  {
-    path: "export",
     component: ExportComponent,
     data: { titleId: "exportVault" },
   },
@@ -20,4 +14,4 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
 })
-export class ImportExportRoutingModule {}
+export class ExportRoutingModule {}

apps/web/src/app/tools/vault-export/export.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { LooseComponentsModule, SharedModule } from "../../shared";
+
+import { ExportRoutingModule } from "./export-routing.module";
+import { ExportComponent } from "./export.component";
+
+@NgModule({
+  imports: [SharedModule, LooseComponentsModule, ExportRoutingModule],
+  declarations: [ExportComponent],
+})
+export class ExportModule {}