[EC-7] Org Admin Vault Refresh Client V1 (#3925)

* [EC-8] Restructure Tabs (#3109)

* Cherry pick pending PR for tabs component [CL-17] Tabs - Routing

* Update organization tabs from 4 to 6

* Create initial 'Members' tab

* Create initial 'Groups' tab

* Add initial "Reporting" tab

* Use correct report label/layout by product type

* Create initial 'Billing' tab

* Breakup billing payment and billing history pages

* Cleanup org routing and nav permission service

* More org tab permission cleanup

* Refactor organization billing to use a module

* Refactor organization reporting to use module

* Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

* This partially reverts commit 24bb775 to fix tracking of people.component.html rename.

* Fix people component file rename

* Recover lost member page changes

* Undo members component rename as it was causing difficult merge conflicts

* Fix member and group page container

* Remove unnecessary organization lookup

* [EC-8] Some PR suggestions

* [EC-8] Reuse user billing history for orgs

* [EC-8] Renamed user billing history component

* [EC-8] Repurpose payment method component

Update end user payment method component to be usable for organizations.

* [EC-8] Fix missing verify bank condition

* [EC-8] Remove org payment method component

* [EC-8] Use CL in payment method component

* [EC-8] Extend maxWidth Tailwind theme config

* [EC-8] Add lazy loading to org reports

* [EC-8] Add lazy loading to org billing

* [EC-8] Prettier

* [EC-8] Cleanup org reporting component redundancy

* [EC-8] Use different class for negative margin

* [EC-8] Make billing history component "dumb"

* Revert "[EC-8] Cleanup org reporting component redundancy"

This reverts commit eca337e89b.

* [EC-8] Create and export shared reports module

* [EC-8] Use shared reports module in orgs

* [EC-8] Use takeUntil pattern

* [EC-8] Move org reporting module out of old modules folder

* [EC-8] Move org billing module out of old modules folder

* [EC-8] Fix some remaining merge conflicts

* [EC-8] Move maxWidth into 'extend' key for Tailwind config

* [EC-8] Remove unused module

* [EC-8] Rename org report list component

* Prettier

Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>

* [EC-451] Org Admin Refresh Permissions Refactor (#3320)

* [EC-451] Update new org permissions for new tabs

* [EC-451] Remove redudant route guards

* [EC-451] Remove canAccessManageTab()

* [EC-451] Use canAccess* callbacks in org routing module

* Fix org api service refactor and linting after pulling in master

* Fix broken org people and group pages after merge

* [EC-18] Reporting side nav direction (#3420)

* [EC-18] Re-order side nav for org reports according to Figma

* [EC-18] Fix rxjs linter errors and redundant org flag

* [EC-526] Default to Event Logs page for Reporting Tab (#3470)

* [EC-526] Default to the Events Logs page when navigating to the Reporting tab

* [EC-526] Undo default routing redirect when the child path is missing. Avoids defaulting to "/events" in case a user/org doesn't have access to event logs.

* [EC-19] Update Organization Settings Page (#3251)

* [EC-19] Refactor existing organization settings components to its own module

* [EC-19] Move SSO page to settings tab

* [EC-19] Move Policies page to Settings tab

Refactor Policy components into its own module

* [EC-19] Move ImageSubscriptionHiddenComponent

* [EC-19] Lazy load org settings module

* [EC-19] Add SSO Id to SSO config view

* [EC-19] Remove SSO identfier from org info page

* [EC-19] Update org settings/policies to follow ADR-0011

* [EC-19] Update two-step login setup description

* [EC-19] Revert nested policy components folder

* [EC-19] Revert nested org setting components folder

* [EC-19] Remove left over image component

* [EC-19] Prettier

* [EC-19] Fix missing i18n

* [EC-19] Update SSO form to use CL

* [EC-19] Remove unused SSO input components

* [EC-19] Fix bad SSO locale identifier

* [EC-19] Fix import order linting

* [EC-19] Add explicit whitespace check for launch click directive

* [EC-19] Add restricted import paths to eslint config

* [EC-19] Tag deprecated field with Jira issue to cleanup in future release

* [EC-19] Remove out of date comment

* [EC-19] Move policy components to policies module

* [EC-19] Remove dityRequired validator

* [EC-19] Use explicit type for SSO config form

* [EC-19] Fix rxjs linter errors

* [EC-19] Fix RxJS eslint comments in org settings component

* [EC-19] Use explicit ControlsOf<T> helper for nested SSO form groups.

* [EC-19] Attribute source of ControlsOf<T> helper

* [EC-19] Fix missing settings side nav links

* [EC-19] Fix member/user language for policy modals

* [EC-551] Update Event Logs Client Column (#3572)

* [EC-551] Fix RxJS warnings

* [EC-551] Update page to use CL components and Tailwind classes

* [EC-551] Update Client column to use text instead of icon. Update language and i18n.

* [EC-14] Refactor vault filter (#3440)

* [EC-14] initial refactoring of vault filter

* [EC-14] return observable trees for all filters with head node

* [EC-14] Remove bindings on callbacks

* [EC-14] fix formatting on disabled orgs

* [EC-14] hide MyVault if personal org policy

* [EC-14] add check for single org policy

* [EC-14] add policies to org and change node constructor

* [EC-14] don't show options if personal vault policy

* [EC-14] default to all vaults

* [EC-14] add default selection to filters

* [EC-14] finish filter model callbacks

* [EC-14] finish filter functionality and begin cleaning up

* [EC-14] clean up old components and start on org vault

* [EC-14] loop through filters for presentation

* [EC-14] refactor VaultFilterService and put filter presentation data back into Vault Filter component. Remove VaultService

* [EC-14] begin refactoring org vault

* [EC-14] Refactor Vault Filter Service to use observables

* [EC-14] finish org vault filter

* [EC-14] fix vault model tests

* [EC-14] fix org service calls

* [EC-14] pull refactor out of shared code

* [EC-14] include head node for collections even if collections aren't loaded yet

* [EC-14] fix url params for vaults

* [EC-14] remove comments

* [EC-14] Remove unnecesary getter for org on vault filter

* [EC-14] fix linter

* [EC-14] fix prettier

* [EC-14] add deprecated methods to collection service for desktop and browser

* [EC-14] simplify cipher type node check

* [EC-14] add getters to vault filter model

* [EC-14] refactor how we build the filter list into methods

* [EC-14] add getters to build filter method

* [EC-14] remove param ids if false

* [EC-14] fix collapsing nodes

* [EC-14] add specific type to search placeholder

* [EC-14] remove extra constructor and comment from org vault filter

* [EC-14] extract subscription callback to methods

* [EC-14] Remove unecessary await

* [EC-14] Remove ternary operators while building org filter

* [EC-14] remove unnecessary deps array in vault filter service declaration

* [EC-14] consolidate new models into one file

* [EC-14] initialize nested observable inside of service

Signed-off-by: Jacob Fink <jfink@bitwarden.com>

* [EC-14] change how we load orgs into the vault filter and select the default filter

* [EC-14] remove get from getters name

* [EC-14] remove eslint-disable comment

* [EC-14] move vault filter service abstraction to angular folder and separate

* [EC-14] rename filter types and delete VaultFilterLabel

* [EC-14] remove changes to workspace file

* [EC-14] remove deprecated service from jslib module

* [EC-14] remove any remaining files from common code

* [EC-14] consolidate vault filter components into components folder

* [EC-14] simplify method call

* [EC-14] refactor the vault filter service
- orgs now have observable property
- BehaviorSubjects have been migrated to ReplaySubjects if they don't need starting value
- added unit tests
- fix small error when selecting org badge of personal vault
- renamed some properties

* [EC-14] replace mergeMap with switchMap in vault filter service

* [EC-14] early return to prevent nesting

* [EC-14] clean up filterCollections method

* [EC-14] use isDeleted helper in html

* [EC-14] add jsdoc comments to ServiceUtils

* [EC-14] fix linter

* [EC-14] use array.slice instead of setting length

* Update apps/web/src/app/vault/vault-filter/services/vault-filter.service.ts

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

* [EC-14] add missing high level jsdoc description

* [EC-14] fix storybook absolute imports

* [EC-14] delete vault-shared.module

* [EC-14] change search placeholder text to getter and add missing strings

* [EC-14] remove two way binding from search text in vault filter

* [EC-14] removed all binding from search text and just use input event

* [EC-14] remove async from apply vault filter

* [EC-14] remove circular observable calls in vault filter service

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

* [EC-14] move collapsed nodes to vault filter section

* [EC-14] deconstruct filter section inside component

* [EC-14] fix merge conflicts and introduce refactored organization service to vault filter service

* [EC-14] remove mutation from filter builders

* [EC-14] fix styling on buildFolderTree

* [EC-14] remove leftover folder-filters reference and use ternary for collapse icon

* [EC-14] remove unecessary checks

* [EC-14] stop rebuilding filters when the organization changes

* [EC-14] Move subscription out of setter in vault filter section

* [EC-14] remove extra policy service methods from vault filter service

* [EC-14] remove new methods from old vault-filter.service

* [EC-14] Use vault filter service in vault components

* [EC-14] reload collections from vault now that we have vault filter service

* [EC-14] remove currentFilterCollections in vault filter component

* [EC-14] change VaultFilterType to more specific OrganizationFilter in organization-options

* [EC-14] include org check in isNodeSelected

* [EC-14] add getters to filter function, fix storybook, and add test for All Collections

* [EC-14] show org options even if there's a personal vault policy

* [EC-14] use !"AllCollections" instead of just !null

* [EC-14] Remove extra org Subject in vault filter service

* [EC-14] remove null check from vault search text

* [EC-14] replace store/build names with set/get. Remove extra call to setOrganizationFilter

* [EC-14] add take(1) to subscribe in test

* [EC-14] move init logic in org vault filter component to ngOnInit

* [EC-14] Fix linter

* [EC-14] revert change to vault filter model

* [EC-14] be specific about ignoring All Collections

* [EC-14] move observable init logic to beforeEach in test

* [EC-14] make buildAllFilters return something to reduce side effects

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-97] Organization Billing Language / RxJS Warnings (#3688)

* [EC-97] Update copy to use the word members in a few places

* [EC-97] Cleanup RxJS warnings and unused properties in org billing components

* [EC-599] Access Selector Component (#3717)

* Add Access Selector Component and Stories

* Cherry pick FormSelectionList

* Fix some problems caused from cherry-pick

* Fix some Web module problems caused from cherry-pick

* Move AccessSelector out of the root components directory.

Move UserType pipe to AccessSelectorModule

* Fix broken member access selector story

* Add organization feature module

* Undo changes to messages.json

* Fix messages.json

* Remove redundant CommonModule

* [EC-599] Fix avatar/icon sizing

* [EC-599] Remove padding in  permission column

* [EC-599] Make FormSelectionList operations immutable

* [EC-599] Integrate the multi-select component

* [EC-599] Handle readonly/access all edge cases

* [EC-599] Add initial unit tests

Also cleans up public interface for the AccessSelectorComponent. Fixes a bug found during unit test creation.

* [EC-599] Include item name in control labels

* [EC-599] Cleanup member email display

* [EC-599] Review suggestions

- Change PermissionMode to Enum
- Rename permControl to permissionControl to be more clear
- Rename FormSelectionList file to kebab case.
- Move permission row boolean logic to named function for readability

* [EC-599] Cleanup AccessSelectorComponent tests

- Clarify test states
- Add tests for column rendering
- Add tests for permission mode
- Add id to column headers for testing
- Fix small permissionControl bug found during testing

* [EC-599] Add FormSelectionList unit tests

* [EC-599] Fix unit test and linter

* [EC-599] Update Enums to Pascal case

* [EC-599] Undo change to Enum values

* [EC-7] fix: broken build

* [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

* Revert "[EC-14] Refactor vault filter (#3440)" (#3926)

This reverts commit 4d83b81d82.

* Remove old reference to bit-submit-button that no longer exists (#3927)

* [EC-593] Top align event logs row content (#3813)

* [EC-593] Top align event log row contents

* [EC-593] Prevent event log timestamp from wrapping

* [EC-593] Add alignContent input to bitRow directive

* [EC-593] Remove ineffective inline styles (CSP)

* [EC-593] Remove templated tailwind classes

Tailwind minimizes the bundled stylesheet by removing classes that aren't used in code. Using a string template for the classes causes those classes to be ignored.

* [EC-593] Introduce alignContent input to table story

* [EC-657] Hide Billing History and Payment Method for selfhosted orgs (#3935)

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Jake Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

libs/components/src/form-field/error-summary.component.ts

@@ -33,6 +33,10 @@ export class BitErrorSummary {
         return acc;
       }
 
+      if (!control.dirty && control.untouched) {
+        return acc;
+      }
+
       return acc + Object.keys(control.errors).length;
     }, 0);
   }

libs/components/src/form-field/error.component.ts

@@ -28,6 +28,8 @@ export class BitErrorComponent {
         return this.i18nService.t("inputEmail");
       case "minlength":
         return this.i18nService.t("inputMinLength", this.error[1]?.requiredLength);
+      case "maxlength":
+        return this.i18nService.t("inputMaxLength", this.error[1]?.requiredLength);
       default:
         // Attempt to show a custom error message.
         if (this.error[1]?.message) {

libs/components/src/index.ts

@@ -12,5 +12,6 @@ export * from "./link";
 export * from "./menu";
 export * from "./multi-select";
 export * from "./tabs";
+export * from "./table";
 export * from "./toggle-group";
 export * from "./utils/i18n-mock.service";

libs/components/src/multi-select/models/select-item-view.ts

@@ -2,6 +2,6 @@ export type SelectItemView = {
   id: string; // Unique ID used for comparisons
   listName: string; // Default bindValue -> this is what will be displayed in list items
   labelName: string; // This is what will be displayed in the selection option badge
-  icon: string; // Icon to display within the list
-  parentGrouping: string; // Used to group items by parent
+  icon?: string; // Icon to display within the list
+  parentGrouping?: string; // Used to group items by parent
 };

libs/components/src/table/row.directive.ts

@@ -1,9 +1,24 @@
-import { HostBinding, Directive } from "@angular/core";
+import { Directive, HostBinding, Input } from "@angular/core";
 
 @Directive({
   selector: "tr[bitRow]",
 })
 export class RowDirective {
+  @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "baseline";
+
+  get alignmentClass(): string {
+    switch (this.alignContent) {
+      case "top":
+        return "tw-align-top";
+      case "middle":
+        return "tw-align-middle";
+      case "bottom":
+        return "tw-align-bottom";
+      default:
+        return "tw-align-baseline";
+    }
+  }
+
   @HostBinding("class") get classList() {
     return [
       "tw-border-0",
@@ -12,6 +27,7 @@ export class RowDirective {
       "tw-border-solid",
       "hover:tw-bg-background-alt",
       "last:tw-border-0",
+      this.alignmentClass,
     ];
   }
 }

libs/components/src/table/table.stories.ts

@@ -9,6 +9,12 @@ export default {
       imports: [TableModule],
     }),
   ],
+  argTypes: {
+    alignRowContent: {
+      options: ["top", "middle", "bottom", "baseline"],
+      control: { type: "select" },
+    },
+  },
   parameters: {
     design: {
       type: "figma",
@@ -29,18 +35,18 @@ const Template: Story = (args) => ({
         </tr>
       </ng-container>
       <ng-container body>
-        <tr bitRow>
+        <tr bitRow [alignContent]="alignRowContent">
           <td bitCell>Cell 1</td>
-          <td bitCell>Cell 2</td>
+          <td bitCell>Cell 2 <br> Multiline Cell</td>
           <td bitCell>Cell 3</td>
         </tr>
-        <tr bitRow>
+        <tr bitRow [alignContent]="alignRowContent">
           <td bitCell>Cell 4</td>
           <td bitCell>Cell 5</td>
           <td bitCell>Cell 6</td>
         </tr>
-        <tr bitRow>
-          <td bitCell>Cell 7</td>
+        <tr bitRow [alignContent]="alignRowContent">
+          <td bitCell>Cell 7 <br> Multiline Cell</td>
           <td bitCell>Cell 8</td>
           <td bitCell>Cell 9</td>
         </tr>
@@ -51,3 +57,6 @@ const Template: Story = (args) => ({
 });
 
 export const Default = Template.bind({});
+Default.args = {
+  alignRowContent: "baseline",
+};

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -29,7 +29,22 @@ export class TabListItemDirective implements FocusableOption {
   get classList(): string[] {
     return this.baseClassList
       .concat(this.active ? this.activeClassList : [])
-      .concat(this.disabled ? this.disabledClassList : []);
+      .concat(this.disabled ? this.disabledClassList : [])
+      .concat(this.textColorClassList);
+  }
+
+  /**
+   * Classes used for styling tab item text color.
+   * Separate text color class list required to override bootstrap classes in Web.
+   */
+  get textColorClassList(): string[] {
+    if (this.disabled) {
+      return ["!tw-text-muted", "hover:!tw-text-muted"];
+    }
+    if (this.active) {
+      return ["!tw-text-primary-500", "hover:!tw-text-primary-700"];
+    }
+    return ["!tw-text-main", "hover:!tw-text-main"];
   }
 
   get baseClassList(): string[] {
@@ -47,9 +62,7 @@ export class TabListItemDirective implements FocusableOption {
       "tw-border-transparent",
       "tw-border-solid",
       "tw-bg-transparent",
-      "tw-text-main",
       "hover:tw-underline",
-      "hover:tw-text-main",
       "focus-visible:tw-z-10",
       "focus-visible:tw-outline-none",
       "focus-visible:tw-ring-2",
@@ -58,13 +71,7 @@ export class TabListItemDirective implements FocusableOption {
   }
 
   get disabledClassList(): string[] {
-    return [
-      "!tw-bg-secondary-100",
-      "!tw-text-muted",
-      "hover:!tw-text-muted",
-      "!tw-no-underline",
-      "tw-cursor-not-allowed",
-    ];
+    return ["!tw-bg-secondary-100", "!tw-no-underline", "tw-cursor-not-allowed"];
   }
 
   get activeClassList(): string[] {
@@ -75,9 +82,7 @@ export class TabListItemDirective implements FocusableOption {
       "tw-border-b",
       "tw-border-b-background",
       "tw-bg-background",
-      "!tw-text-primary-500",
       "hover:tw-border-t-primary-700",
-      "hover:!tw-text-primary-700",
       "focus-visible:tw-border-t-primary-700",
       "focus-visible:!tw-text-primary-700",
     ];

libs/components/tailwind.config.base.js

@@ -83,9 +83,10 @@ module.exports = {
         "50vw": "50vw",
         "75vw": "75vw",
       },
-      maxWidth: {
+      maxWidth: ({ theme }) => ({
+        ...theme("width"),
         "90vw": "90vw",
-      },
+      }),
     },
   },
   plugins: [],