From 4b57d28e28d852fb6d148403d0fa5b2cf535b76a Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Fri, 28 Oct 2022 08:53:27 -0700 Subject: [PATCH] [EC-646] Org Admin Vault Refresh November Release Prep (#3913) * [EC-646] Remove links from Manage component These links are no longer necessary as they are now located in the new OAVR tabs. * [EC-646] Re-introduce the canAccessManageTab helper * [EC-646] Re-introduce /manage route in Organization routing module - Add the parent /manage route - Add child routes for collections, people, and groups * [EC-646] Adjust Org admin tabs Re-introduce the Manage tab and remove Groups and Members tabs. * [EC-646] Change Members title back to People * [EC-646] Move missing billing components Some billing components were in the org settings module and needed to be moved the org billing module * [EC-646] Fix import file upload button -Update to use click event handler and tailwind class to hide input. Avoids inline styles/js blocked by CSP - Fix broken async pipe * [EC-646] Fix groups and people page overflow Remove the container and page-content wrapper as the pages are no longer on their own tab * [EC-646] Change People to Members Change the text regarding managing members from People to Members to more closely follow changes coming later in the OAVR. Also update the URL to use /manage/members * [EC-646] Cherry-pick ae39afe to fix tab text color * [EC-646] Fix org routing permissions helpers - Add canAccessVaultTab helper - Update canAccessOrgAdmin include check for vault tab access - Simplify canManageCollections * [EC-646] Fix Manage tab conditional logic - Add *ngIf condition for rendering Manage tab - Re-introduce dynamic route for Manage tab --- .../adjust-subscription.component.html | 0 .../adjust-subscription.component.ts | 0 .../change-plan.component.html | 0 .../change-plan.component.ts | 0 .../download-license.component.html | 0 .../download-license.component.ts | 0 .../billing/organization-billing.module.ts | 9 +- .../organization-layout.component.html | 12 +- .../layouts/organization-layout.component.ts | 21 + .../manage/groups.component.html | 150 +++-- .../manage/manage.component.html | 36 +- .../manage/people.component.html | 566 +++++++++--------- .../organization-routing.module.ts | 56 +- .../settings/organization-settings.module.ts | 6 - .../tools/import-export/import.component.html | 12 +- .../organization.service.abstraction.ts | 20 +- .../tabs/shared/tab-list-item.directive.ts | 31 +- 17 files changed, 474 insertions(+), 445 deletions(-) rename apps/web/src/app/organizations/{settings => billing}/adjust-subscription.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/adjust-subscription.component.ts (100%) rename apps/web/src/app/organizations/{settings => billing}/change-plan.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/change-plan.component.ts (100%) rename apps/web/src/app/organizations/{settings => billing}/download-license.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/download-license.component.ts (100%) diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.html b/apps/web/src/app/organizations/billing/adjust-subscription.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.html rename to apps/web/src/app/organizations/billing/adjust-subscription.component.html diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.ts b/apps/web/src/app/organizations/billing/adjust-subscription.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.ts rename to apps/web/src/app/organizations/billing/adjust-subscription.component.ts diff --git a/apps/web/src/app/organizations/settings/change-plan.component.html b/apps/web/src/app/organizations/billing/change-plan.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.html rename to apps/web/src/app/organizations/billing/change-plan.component.html diff --git a/apps/web/src/app/organizations/settings/change-plan.component.ts b/apps/web/src/app/organizations/billing/change-plan.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.ts rename to apps/web/src/app/organizations/billing/change-plan.component.ts diff --git a/apps/web/src/app/organizations/settings/download-license.component.html b/apps/web/src/app/organizations/billing/download-license.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.html rename to apps/web/src/app/organizations/billing/download-license.component.html diff --git a/apps/web/src/app/organizations/settings/download-license.component.ts b/apps/web/src/app/organizations/billing/download-license.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.ts rename to apps/web/src/app/organizations/billing/download-license.component.ts diff --git a/apps/web/src/app/organizations/billing/organization-billing.module.ts b/apps/web/src/app/organizations/billing/organization-billing.module.ts index 7e2dcf534e..513b7ba766 100644 --- a/apps/web/src/app/organizations/billing/organization-billing.module.ts +++ b/apps/web/src/app/organizations/billing/organization-billing.module.ts @@ -1,9 +1,11 @@ import { NgModule } from "@angular/core"; -import { LooseComponentsModule } from "../../shared/loose-components.module"; -import { SharedModule } from "../../shared/shared.module"; +import { LooseComponentsModule, SharedModule } from "../../shared"; +import { AdjustSubscription } from "./adjust-subscription.component"; import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component"; +import { ChangePlanComponent } from "./change-plan.component"; +import { DownloadLicenseComponent } from "./download-license.component"; import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component"; import { OrganizationBillingRoutingModule } from "./organization-billing-routing.module"; import { OrganizationBillingTabComponent } from "./organization-billing-tab.component"; @@ -12,7 +14,10 @@ import { OrganizationSubscriptionComponent } from "./organization-subscription.c @NgModule({ imports: [SharedModule, LooseComponentsModule, OrganizationBillingRoutingModule], declarations: [ + AdjustSubscription, BillingSyncApiKeyComponent, + ChangePlanComponent, + DownloadLicenseComponent, OrganizationBillingTabComponent, OrganizationSubscriptionComponent, OrgBillingHistoryViewComponent, diff --git a/apps/web/src/app/organizations/layouts/organization-layout.component.html b/apps/web/src/app/organizations/layouts/organization-layout.component.html index c9088e679a..5f5aa497f7 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.html @@ -8,17 +8,15 @@ > {{ "vault" | i18n }} - {{ - "members" | i18n - }} - {{ - "groups" | i18n - }} + + {{ "manage" | i18n }} + {{ getReportTabLabel(organization) | i18n }} + {{ getReportTabLabel(organization) | i18n }} + {{ "billing" | i18n }} diff --git a/apps/web/src/app/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/organizations/layouts/organization-layout.component.ts index b9459f5f70..8c871f74db 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.ts @@ -5,6 +5,7 @@ import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs"; import { canAccessBillingTab, canAccessGroupsTab, + canAccessManageTab, canAccessMembersTab, canAccessReportingTab, canAccessSettingsTab, @@ -48,6 +49,10 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { return canAccessSettingsTab(organization); } + canShowManageTab(organization: Organization): boolean { + return canAccessManageTab(organization); + } + canShowMembersTab(organization: Organization): boolean { return canAccessMembersTab(organization); } @@ -71,4 +76,20 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { getReportRoute(organization: Organization): string { return organization.useEvents ? "reporting/events" : "reporting/reports"; } + + getManageRoute(organization: Organization): string { + let route: string; + switch (true) { + case organization.canManageUsers: + route = "manage/members"; + break; + case organization.canViewAssignedCollections || organization.canViewAllCollections: + route = "manage/collections"; + break; + case organization.canManageGroups: + route = "manage/groups"; + break; + } + return route; + } } diff --git a/apps/web/src/app/organizations/manage/groups.component.html b/apps/web/src/app/organizations/manage/groups.component.html index 72c6c2ee11..050307b853 100644 --- a/apps/web/src/app/organizations/manage/groups.component.html +++ b/apps/web/src/app/organizations/manage/groups.component.html @@ -1,79 +1,77 @@ -
-
-

{{ "groups" | i18n }}

-
-
- - -
- +
+

{{ "groups" | i18n }}

+
+
+ +
+
- - - {{ "loading" | i18n }} - - -

{{ "noGroupsInList" | i18n }}

- - - - - - - -
- {{ g.name }} - -
- -
- - - {{ "users" | i18n }} - - - - {{ "delete" | i18n }} - -
-
-
- - -
+ + + {{ "loading" | i18n }} + + +

{{ "noGroupsInList" | i18n }}

+ + + + + + + +
+ {{ g.name }} + +
+ +
+ + + {{ "users" | i18n }} + + + + {{ "delete" | i18n }} + +
+
+
+ + + diff --git a/apps/web/src/app/organizations/manage/manage.component.html b/apps/web/src/app/organizations/manage/manage.component.html index b96b8b0859..da1090063d 100644 --- a/apps/web/src/app/organizations/manage/manage.component.html +++ b/apps/web/src/app/organizations/manage/manage.component.html @@ -5,12 +5,12 @@
{{ "manage" | i18n }}
- {{ "people" | i18n }} + {{ "members" | i18n }} {{ "groups" | i18n }} - - {{ "policies" | i18n }} - - - {{ "singleSignOn" | i18n }} - - - {{ "scim" | i18n }} - - - {{ "eventLogs" | i18n }} -
diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html index 07b36668cc..2de6f673e0 100644 --- a/apps/web/src/app/organizations/manage/people.component.html +++ b/apps/web/src/app/organizations/manage/people.component.html @@ -1,288 +1,286 @@ -
-
-

{{ "members" | i18n }}

-
-
- - - - -
-
- - -
-
- -
- - - - - -
- - -
-
- + + +
+
+ + +
+
+ +
+ + + + + +
+ + +
+
+
- - - {{ "loading" | i18n }} - - -

{{ "noUsersInList" | i18n }}

- - - {{ "usersNeedConfirmed" | i18n }} - - - - - - - - - - - - -
- - - - - {{ u.email }} - {{ - "invited" | i18n - }} - {{ - "accepted" | i18n - }} - {{ - "revoked" | i18n - }} - {{ u.name }} - - - - {{ "userUsingTwoStep" | i18n }} - - - - {{ "enrolledPasswordReset" | i18n }} - - - {{ "owner" | i18n }} - {{ "admin" | i18n }} - {{ "manager" | i18n }} - {{ "user" | i18n }} - {{ "custom" | i18n }} - -
- -
- - - {{ "resendInvitation" | i18n }} - - - - {{ "confirm" | i18n }} - - - - {{ "groups" | i18n }} - - - - {{ "eventLogs" | i18n }} - - - - {{ "resetPassword" | i18n }} - - - - {{ "restoreAccess" | i18n }} - - - - {{ "revokeAccess" | i18n }} - - - - {{ "remove" | i18n }} - -
-
-
- - - - - - - - - -
+ + + {{ "loading" | i18n }} + + +

{{ "noUsersInList" | i18n }}

+ + + {{ "usersNeedConfirmed" | i18n }} + + + + + + + + + + + + +
+ + + + + {{ u.email }} + {{ + "invited" | i18n + }} + {{ + "accepted" | i18n + }} + {{ + "revoked" | i18n + }} + {{ u.name }} + + + + {{ "userUsingTwoStep" | i18n }} + + + + {{ "enrolledPasswordReset" | i18n }} + + + {{ "owner" | i18n }} + {{ "admin" | i18n }} + {{ "manager" | i18n }} + {{ "user" | i18n }} + {{ "custom" | i18n }} + +
+ +
+ + + {{ "resendInvitation" | i18n }} + + + + {{ "confirm" | i18n }} + + + + {{ "groups" | i18n }} + + + + {{ "eventLogs" | i18n }} + + + + {{ "resetPassword" | i18n }} + + + + {{ "restoreAccess" | i18n }} + + + + {{ "revokeAccess" | i18n }} + + + + {{ "remove" | i18n }} + +
+
+
+ + + + + + + + + + diff --git a/apps/web/src/app/organizations/organization-routing.module.ts b/apps/web/src/app/organizations/organization-routing.module.ts index f21072f23f..29e02ecb00 100644 --- a/apps/web/src/app/organizations/organization-routing.module.ts +++ b/apps/web/src/app/organizations/organization-routing.module.ts @@ -3,14 +3,18 @@ import { RouterModule, Routes } from "@angular/router"; import { AuthGuard } from "@bitwarden/angular/guards/auth.guard"; import { - canAccessOrgAdmin, canAccessGroupsTab, + canAccessManageTab, canAccessMembersTab, + canAccessOrgAdmin, + canManageCollections, } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; import { OrganizationPermissionsGuard } from "./guards/org-permissions.guard"; import { OrganizationLayoutComponent } from "./layouts/organization-layout.component"; +import { CollectionsComponent } from "./manage/collections.component"; import { GroupsComponent } from "./manage/groups.component"; +import { ManageComponent } from "./manage/manage.component"; import { PeopleComponent } from "./manage/people.component"; import { VaultModule } from "./vault/vault.module"; @@ -33,22 +37,46 @@ const routes: Routes = [ loadChildren: () => import("./settings").then((m) => m.OrganizationSettingsModule), }, { - path: "members", - component: PeopleComponent, + path: "manage", + component: ManageComponent, canActivate: [OrganizationPermissionsGuard], data: { - titleId: "members", - organizationPermissions: canAccessMembersTab, - }, - }, - { - path: "groups", - component: GroupsComponent, - canActivate: [OrganizationPermissionsGuard], - data: { - titleId: "groups", - organizationPermissions: canAccessGroupsTab, + organizationPermissions: canAccessManageTab, }, + children: [ + { + path: "", + pathMatch: "full", + redirectTo: "members", + }, + { + path: "collections", + component: CollectionsComponent, + canActivate: [OrganizationPermissionsGuard], + data: { + titleId: "collections", + organizationPermissions: canManageCollections, + }, + }, + { + path: "groups", + component: GroupsComponent, + canActivate: [OrganizationPermissionsGuard], + data: { + titleId: "groups", + organizationPermissions: canAccessGroupsTab, + }, + }, + { + path: "members", + component: PeopleComponent, + canActivate: [OrganizationPermissionsGuard], + data: { + titleId: "members", + organizationPermissions: canAccessMembersTab, + }, + }, + ], }, { path: "reporting", diff --git a/apps/web/src/app/organizations/settings/organization-settings.module.ts b/apps/web/src/app/organizations/settings/organization-settings.module.ts index f121bfbc7a..1c5b72552c 100644 --- a/apps/web/src/app/organizations/settings/organization-settings.module.ts +++ b/apps/web/src/app/organizations/settings/organization-settings.module.ts @@ -4,10 +4,7 @@ import { LooseComponentsModule, SharedModule } from "../../shared"; import { PoliciesModule } from "../policies"; import { AccountComponent } from "./account.component"; -import { AdjustSubscription } from "./adjust-subscription.component"; -import { ChangePlanComponent } from "./change-plan.component"; import { DeleteOrganizationComponent } from "./delete-organization.component"; -import { DownloadLicenseComponent } from "./download-license.component"; import { OrganizationSettingsRoutingModule } from "./organization-settings-routing.module"; import { SettingsComponent } from "./settings.component"; import { TwoFactorSetupComponent } from "./two-factor-setup.component"; @@ -17,10 +14,7 @@ import { TwoFactorSetupComponent } from "./two-factor-setup.component"; declarations: [ SettingsComponent, AccountComponent, - AdjustSubscription, - ChangePlanComponent, DeleteOrganizationComponent, - DownloadLicenseComponent, TwoFactorSetupComponent, ], }) diff --git a/apps/web/src/app/tools/import-export/import.component.html b/apps/web/src/app/tools/import-export/import.component.html index 15c1109654..50616823f8 100644 --- a/apps/web/src/app/tools/import-export/import.component.html +++ b/apps/web/src/app/tools/import-export/import.component.html @@ -293,21 +293,17 @@
- {{ this.fileSelected ? this.fileSelected.name : ("noFileChosen" | i18n) }}
@@ -327,7 +323,7 @@