From e58470c23c48e2e6949bbd5da6f113743c3ab520 Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 6 Nov 2024 11:07:31 -0500 Subject: [PATCH 01/18] Integration page initial implementation --- .../guards/integrations.guard.ts | 19 +++ .../integrations-routing.module.ts | 20 +++ .../integrations/integrations.component.html | 52 ++++++++ .../integrations.component.spec.ts | 79 ++++++++++++ .../integrations/integrations.component.ts | 115 ++++++++++++++++++ .../integrations/integrations.module.ts | 20 +++ .../organization-layout.component.html | 6 + .../layouts/organization-layout.component.ts | 4 + .../organization-routing.module.ts | 7 ++ .../integration-card.component.html | 8 +- .../integration-card.component.spec.ts | 6 +- .../integration-card.component.ts | 2 +- .../integration-grid.component.html | 10 +- .../integration-grid.component.spec.ts | 13 +- .../integration-grid.component.ts | 4 +- .../integrations/integrations.module.ts | 15 +++ .../shared/components/integrations/models.ts | 2 +- apps/web/src/app/shared/index.ts | 1 + apps/web/src/locales/en/messages.json | 50 +++++++- .../organizations/manage/scim.component.html | 7 +- .../integrations/integrations.component.html | 4 +- .../integrations/integrations.component.ts | 3 +- .../integrations/integrations.module.ts | 8 +- libs/common/src/enums/feature-flag.enum.ts | 2 + .../common/src/enums/integration-type.enum.ts | 5 + 25 files changed, 434 insertions(+), 28 deletions(-) create mode 100644 apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.component.html create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-card/integration-card.component.html (74%) rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-card/integration-card.component.spec.ts (94%) rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-card/integration-card.component.ts (98%) rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-grid/integration-grid.component.html (65%) rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-grid/integration-grid.component.spec.ts (83%) rename {bitwarden_license/bit-web/src/app/secrets-manager => apps/web/src/app/shared/components}/integrations/integration-grid/integration-grid.component.ts (77%) create mode 100644 apps/web/src/app/shared/components/integrations/integrations.module.ts rename bitwarden_license/bit-web/src/app/secrets-manager/integrations/models/integration.ts => apps/web/src/app/shared/components/integrations/models.ts (95%) diff --git a/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts b/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts new file mode 100644 index 000000000000..160d93e36378 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts @@ -0,0 +1,19 @@ +import { inject } from "@angular/core"; +import { CanActivateFn } from "@angular/router"; + +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; + +export const integrationPageEnabled: CanActivateFn = async () => { + const configService = inject(ConfigService); + + const integrationPageEnabled = await configService.getFeatureFlag( + FeatureFlag.PM14505AdminConsoleIntegrationPage, + ); + + if (integrationPageEnabled) { + return true; + } + + return false; +}; diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts new file mode 100644 index 000000000000..746828e64242 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { IntegrationsComponent } from "./integrations.component"; + +const routes: Routes = [ + { + path: "", + component: IntegrationsComponent, + data: { + titleId: "integrations", + }, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class IntegrationsRoutingModule {} diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html new file mode 100644 index 000000000000..a8375c1643d1 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -0,0 +1,52 @@ + + + + +
+

{{ "singleSignOn" | i18n }}

+

+ {{ "ssoDescStart" | i18n }} + {{ "ssoDescAnchor" | i18n }} + {{ "ssoDescEnd" | i18n }} +

+ +
+ + + +
+

+ {{ "scim" | i18n }} +

+

{{ "scimDesc" | i18n }}

+ +
+
+

+ {{ "bwdc" | i18n }} +

+

{{ "bwdcDesc" | i18n }}

+ +
+ + + +
+

+ {{ "eventManagement" | i18n }} +

+

{{ "eventManagementDesc" | i18n }}

+ +
+ + + +
+

+ {{ "deviceManagement" | i18n }} +

+

{{ "deviceManagementDesc" | i18n }}

+ +
+ + diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts new file mode 100644 index 000000000000..870f68b28789 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts @@ -0,0 +1,79 @@ +import { Component } from "@angular/core"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { By } from "@angular/platform-browser"; +import { mock } from "jest-mock-extended"; +import { of } from "rxjs"; + +import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { ThemeTypes } from "@bitwarden/common/platform/enums"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; + +import { IntegrationCardComponent } from "../../../shared/components/integrations/integration-card/integration-card.component"; +import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component"; + +import { IntegrationsComponent } from "./integrations.component"; + +@Component({ + selector: "app-header", + template: "
", +}) +class MockHeaderComponent {} + +@Component({ + selector: "sm-new-menu", + template: "
", +}) +// TODO: fix these tests to reflect the new UI and integrations when they are implemented +class MockNewMenuComponent {} + +describe("IntegrationsComponent", () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + IntegrationsComponent, + IntegrationGridComponent, + IntegrationCardComponent, + MockHeaderComponent, + MockNewMenuComponent, + I18nPipe, + ], + providers: [ + { + provide: I18nService, + useValue: mock({ t: (key) => key }), + }, + { + provide: ThemeStateService, + useValue: mock(), + }, + { + provide: SYSTEM_THEME_OBSERVABLE, + useValue: of(ThemeTypes.Light), + }, + ], + }).compileComponents(); + fixture = TestBed.createComponent(IntegrationsComponent); + fixture.detectChanges(); + }); + + it("divides Integrations & SDKS", () => { + const [integrationList, sdkList] = fixture.debugElement.queryAll( + By.directive(IntegrationGridComponent), + ); + + // Validate only expected names, as the data is constant + expect( + (integrationList.componentInstance as IntegrationGridComponent).integrations.map( + (i) => i.name, + ), + ).toEqual(["GitHub Actions", "GitLab CI/CD", "Ansible", "Kubernetes Operator"]); + + expect( + (sdkList.componentInstance as IntegrationGridComponent).integrations.map((i) => i.name), + ).toEqual(["Rust", "C#", "C++", "Go", "Java", "JS WebAssembly", "php", "Python", "Ruby"]); + }); +}); diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts new file mode 100644 index 000000000000..994ceaf16c88 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -0,0 +1,115 @@ +import { Component } from "@angular/core"; + +import { IntegrationType } from "@bitwarden/common/enums"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; + +import { Integration } from "../../../shared/components/integrations/models"; + +@Component({ + selector: "ac-integrations", + templateUrl: "./integrations.component.html", +}) +export class IntegrationsComponent { + private integrationsList: Integration[] = []; + + tabIndex: number; + + constructor(i18nService: I18nService) { + // temporary integrations + this.integrationsList = [ + { + name: "AD FS", + linkURL: "https://github.com/bitwarden/sdk", + image: "../../../../../../../images/secrets-manager/sdks/rust.svg", + imageDarkMode: "../../../../../../../images/secrets-manager/sdks/rust-white.svg", + type: IntegrationType.SSO, + }, + { + name: "Auth0", + linkURL: "https://bitwarden.com/help/github-actions-integration/", + image: "../../../../../../../images/secrets-manager/integrations/github.svg", + imageDarkMode: "../../../../../../../images/secrets-manager/integrations/github-white.svg", + type: IntegrationType.SSO, + }, + { + name: "AWS", + linkURL: "https://bitwarden.com/help/gitlab-integration/", + image: "../../../../../../../images/secrets-manager/integrations/gitlab.svg", + imageDarkMode: "../../../../../../../images/secrets-manager/integrations/gitlab-white.svg", + type: IntegrationType.SSO, + }, + { + name: "Microsoft Entra ID", + linkURL: "https://bitwarden.com/help/ansible-integration/", + image: "../../../../../../../images/secrets-manager/integrations/ansible.svg", + type: IntegrationType.SSO, + }, + { + name: "Duo", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/csharp", + image: "../../../../../../../images/secrets-manager/sdks/c-sharp.svg", + type: IntegrationType.SSO, + }, + { + name: "Google", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/cpp", + image: "../../../../../../../images/secrets-manager/sdks/c-plus-plus.png", + type: IntegrationType.SSO, + }, + { + name: "JumpCloud", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/go", + image: "../../../../../../../images/secrets-manager/sdks/go.svg", + type: IntegrationType.SSO, + }, + { + name: "KeyCloak", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/java", + image: "../../../../../../../images/secrets-manager/sdks/java.svg", + imageDarkMode: "../../../../../../../images/secrets-manager/sdks/java-white.svg", + type: IntegrationType.SSO, + }, + { + name: "Okta", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/js", + image: "../../../../../../../images/secrets-manager/sdks/wasm.svg", + type: IntegrationType.SSO, + }, + { + name: "OneLogin", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/php", + image: "../../../../../../../images/secrets-manager/sdks/php.svg", + type: IntegrationType.SSO, + }, + { + name: "PingFederate", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/python", + image: "../../../../../../../images/secrets-manager/sdks/python.svg", + type: IntegrationType.SSO, + }, + { + name: "Ruby", + linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/ruby", + image: "../../../../../../../images/secrets-manager/sdks/ruby.png", + type: IntegrationType.SSO, + }, + { + name: "Kubernetes Operator", + linkURL: "https://bitwarden.com/help/secrets-manager-kubernetes-operator/", + image: "../../../../../../../images/secrets-manager/integrations/kubernetes.svg", + type: IntegrationType.SSO, + newBadgeExpiration: "2024-8-12", + }, + ]; + } + + /** Filter out content for the integrations sections */ + get sso(): Integration[] { + return this.integrationsList.filter((integration) => integration.type === IntegrationType.SSO); + } + + /** Filter out content for the SDKs section */ + get sdks(): Integration[] { + return this.integrationsList.filter((integration) => integration.type === IntegrationType.SSO); + } +} diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts new file mode 100644 index 000000000000..c2137971a9ab --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts @@ -0,0 +1,20 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule, SharedIntegrationsModule } from "../../../shared"; +import { SharedOrganizationModule } from "../shared"; + +import { IntegrationsRoutingModule } from "./integrations-routing.module"; +import { IntegrationsComponent } from "./integrations.component"; + +@NgModule({ + imports: [ + IntegrationsRoutingModule, + CommonModule, + SharedOrganizationModule, + SharedIntegrationsModule, + LooseComponentsModule, + ], + declarations: [IntegrationsComponent], +}) +export class IntegrationsModule {} diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html index 23e9c6df1787..799a1ec2d4c3 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html @@ -56,6 +56,12 @@ + canAccessOrgAdmin(org); + protected integrations$ = this.configService.getFeatureFlag$( + FeatureFlag.PM14505AdminConsoleIntegrationPage, + ); + organization$: Observable; showPaymentAndHistory$: Observable; hideNewOrgButton$: Observable; diff --git a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts index a36b267e2fea..a6b81bb8cf7c 100644 --- a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts @@ -14,6 +14,7 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard"; import { organizationRedirectGuard } from "../../admin-console/organizations/guards/org-redirect.guard"; +import { integrationPageEnabled } from "../../admin-console/organizations/guards/integrations.guard"; import { OrganizationLayoutComponent } from "../../admin-console/organizations/layouts/organization-layout.component"; import { deepLinkGuard } from "../../auth/guards/deep-link.guard"; import { VaultModule } from "../../vault/org-vault/vault.module"; @@ -36,6 +37,12 @@ const routes: Routes = [ path: "vault", loadChildren: () => VaultModule, }, + { + path: "integrations", + canActivate: [integrationPageEnabled], + loadChildren: () => + import("./integrations/integrations.module").then((m) => m.IntegrationsModule), + }, { path: "settings", loadChildren: () => diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-card/integration-card.component.html b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html similarity index 74% rename from bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-card/integration-card.component.html rename to apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html index 5bb9ed425fc4..4536cef75885 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-card/integration-card.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html @@ -1,8 +1,11 @@
+
+ +
-

{{ name }}

+

{{ name }}

-
  • - + + >
    • diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts similarity index 83% rename from bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.spec.ts rename to apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts index e74e057e069e..0416eb240f29 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts @@ -3,12 +3,13 @@ import { By } from "@angular/platform-browser"; import { mock } from "jest-mock-extended"; import { of } from "rxjs"; -import { SYSTEM_THEME_OBSERVABLE } from "../../../../../../../libs/angular/src/services/injection-tokens"; -import { IntegrationType } from "../../../../../../../libs/common/src/enums"; -import { ThemeType } from "../../../../../../../libs/common/src/platform/enums"; -import { ThemeStateService } from "../../../../../../../libs/common/src/platform/theming/theme-state.service"; +import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; +import { IntegrationType } from "@bitwarden/common/enums"; +import { ThemeTypes } from "@bitwarden/common/platform/enums"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; + import { IntegrationCardComponent } from "../integration-card/integration-card.component"; -import { Integration } from "../models/integration"; +import { Integration } from "../models"; import { IntegrationGridComponent } from "./integration-grid.component"; @@ -42,7 +43,7 @@ describe("IntegrationGridComponent", () => { }, { provide: SYSTEM_THEME_OBSERVABLE, - useValue: of(ThemeType.Light), + useValue: of(ThemeTypes.Light), }, ], }); diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts similarity index 77% rename from bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.ts rename to apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts index 058d59d702cd..b5a0530a73ce 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-grid/integration-grid.component.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts @@ -2,10 +2,10 @@ import { Component, Input } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; -import { Integration } from "../models/integration"; +import { Integration } from "../models"; @Component({ - selector: "sm-integration-grid", + selector: "integration-grid", templateUrl: "./integration-grid.component.html", }) export class IntegrationGridComponent { diff --git a/apps/web/src/app/shared/components/integrations/integrations.module.ts b/apps/web/src/app/shared/components/integrations/integrations.module.ts new file mode 100644 index 000000000000..a58fa102c60f --- /dev/null +++ b/apps/web/src/app/shared/components/integrations/integrations.module.ts @@ -0,0 +1,15 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule } from "../../loose-components.module"; +import { SharedModule } from "../../shared.module"; + +import { IntegrationCardComponent } from "./integration-card/integration-card.component"; +import { IntegrationGridComponent } from "./integration-grid/integration-grid.component"; + +@NgModule({ + imports: [SharedModule, CommonModule, LooseComponentsModule], + declarations: [IntegrationGridComponent, IntegrationCardComponent], + exports: [IntegrationGridComponent, IntegrationCardComponent], +}) +export class SharedIntegrationsModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/models/integration.ts b/apps/web/src/app/shared/components/integrations/models.ts similarity index 95% rename from bitwarden_license/bit-web/src/app/secrets-manager/integrations/models/integration.ts rename to apps/web/src/app/shared/components/integrations/models.ts index 51ca79b30f75..b929ac7916a3 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/models/integration.ts +++ b/apps/web/src/app/shared/components/integrations/models.ts @@ -9,7 +9,7 @@ export type Integration = { */ imageDarkMode?: string; linkURL: string; - linkText: string; + linkText?: string; type: IntegrationType; /** * Shows the "New" badge until the defined date. diff --git a/apps/web/src/app/shared/index.ts b/apps/web/src/app/shared/index.ts index 7defcdedfda1..04ddd02e5cbf 100644 --- a/apps/web/src/app/shared/index.ts +++ b/apps/web/src/app/shared/index.ts @@ -1,2 +1,3 @@ export * from "./shared.module"; export * from "./loose-components.module"; +export * from "./components/integrations/integrations.module"; diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 7e441ae4ba29..ccc25d179b97 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -6678,7 +6678,7 @@ "description": "The text, 'SCIM', is an acronym and should not be translated." }, "scimDescription": { - "message": "Automatically provision users and groups with your preferred identity provider via SCIM provisioning", + "message": "Automatically provision users and groups with your preferred identity provider via SCIM provisioning. Find supported integrations", "description": "the text, 'SCIM', is an acronym and should not be translated." }, "scimEnabledCheckboxDesc": { @@ -8866,6 +8866,54 @@ "sdksDesc": { "message": "Use Bitwarden Secrets Manager SDK in the following programming languages to build your own applications." }, + "singleSignOn": { + "message": "Single sign-on" + }, + "ssoDescStart": { + "message": "Configure" + }, + "ssoDescAnchor": { + "message": "single sign-on" + }, + "ssoDescEnd": { + "message": "for Bitwarden using the implementation guide for your Identity Provider." + }, + "userProvisioning":{ + "message": "User provisioning" + }, + "scim": { + "message": "SCIM" + }, + "scimDesc": { + "message": "Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider." + }, + "bwdc":{ + "message": "Bitwarden Directory Connector" + }, + "bwdcDesc": { + "message": "Configure Bitwarden Directory Connector to automatically provision users and groups using the implementation guide for your Identity Provider." + }, + "eventManagement":{ + "message": "Event management" + }, + "eventManagementDesc":{ + "message": "Integrate Bitwarden event logs with your SIEM (system information and event management) system by using the implementation guide for your platform." + }, + "deviceManagement":{ + "message": "Device management" + }, + "deviceManagementDesc":{ + "message": "Configure device management for Bitwarden using the implementation guide for your platform." + }, + "integrationCardTooltip":{ + "message": "Launch $INTEGRATION$ implementation guide.", + "placeholders": { + "integration": { + "content": "$1", + "example": "Google" + } + } + }, "setUpGithubActions": { "message": "Set up Github Actions" }, diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html index e30883515e05..6352d15f2d3f 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html @@ -1,6 +1,11 @@ -

    {{ "scimDescription" | i18n }}

    +

    + {{ "scimDescription" | i18n }} + +

    {{ "integrationsDesc" | i18n }}

    - +
    @@ -12,5 +12,5 @@

    {{ "sdks" | i18n }}

    {{ "sdksDesc" | i18n }}

    - +
    diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts index 9e846d450344..c3a9a94bc006 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts @@ -2,8 +2,7 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; - -import { Integration } from "./models/integration"; +import { Integration } from "@bitwarden/web-vault/app/shared/components/integrations/models"; @Component({ selector: "sm-integrations", diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts index 0d26b626f16b..0aa39cf96cb9 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts @@ -1,15 +1,15 @@ import { NgModule } from "@angular/core"; +import { SharedIntegrationsModule } from "@bitwarden/web-vault/app/shared/components/integrations/integrations.module"; + import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; -import { IntegrationCardComponent } from "./integration-card/integration-card.component"; -import { IntegrationGridComponent } from "./integration-grid/integration-grid.component"; import { IntegrationsRoutingModule } from "./integrations-routing.module"; import { IntegrationsComponent } from "./integrations.component"; @NgModule({ - imports: [SecretsManagerSharedModule, IntegrationsRoutingModule], - declarations: [IntegrationsComponent, IntegrationGridComponent, IntegrationCardComponent], + imports: [SecretsManagerSharedModule, IntegrationsRoutingModule, SharedIntegrationsModule], + declarations: [IntegrationsComponent], providers: [], }) export class IntegrationsModule {} diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts index 84cf5ed521ec..9baed2c73a49 100644 --- a/libs/common/src/enums/feature-flag.enum.ts +++ b/libs/common/src/enums/feature-flag.enum.ts @@ -36,6 +36,7 @@ export enum FeatureFlag { AccessIntelligence = "pm-13227-access-intelligence", Pm13322AddPolicyDefinitions = "pm-13322-add-policy-definitions", LimitCollectionCreationDeletionSplit = "pm-10863-limit-collection-creation-deletion-split", + PM14505AdminConsoleIntegrationPage = "pm-14505-admin-console-integration-page", } export type AllowedFeatureFlagTypes = boolean | number | string; @@ -82,6 +83,7 @@ export const DefaultFeatureFlagValue = { [FeatureFlag.AccessIntelligence]: FALSE, [FeatureFlag.Pm13322AddPolicyDefinitions]: FALSE, [FeatureFlag.LimitCollectionCreationDeletionSplit]: FALSE, + [FeatureFlag.PM14505AdminConsoleIntegrationPage]: FALSE, } satisfies Record; export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue; diff --git a/libs/common/src/enums/integration-type.enum.ts b/libs/common/src/enums/integration-type.enum.ts index acb95106976d..42c385fe715a 100644 --- a/libs/common/src/enums/integration-type.enum.ts +++ b/libs/common/src/enums/integration-type.enum.ts @@ -1,4 +1,9 @@ export enum IntegrationType { Integration = "integration", SDK = "sdk", + SSO = "sso", + SCIM = "scim", + BWDC = "bwdc", + EVENT = "event", + DEVICE = "device", } From 57d19963fd06950fd0ce46b1efb43e345d7f4c5c Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 6 Nov 2024 12:35:39 -0500 Subject: [PATCH 02/18] replace placeholder integrations --- .../integrations/integrations.component.html | 8 +- .../integrations/integrations.component.ts | 173 ++++++++++++++---- .../integration-card.component.html | 1 - .../integrations/authenticator-icon-solid.svg | 8 + .../web/src/images/integrations/aws-color.svg | 5 + .../integrations/azure-active-directory.svg | 1 + apps/web/src/images/integrations/github.svg | 3 + .../integrations/logo-addy-icon-color.svg | 22 +++ .../images/integrations/logo-ansible-icon.svg | 4 + .../integrations/logo-apache-ds-no-shadow.svg | 148 +++++++++++++++ .../images/integrations/logo-apple-color.svg | 3 + .../integrations/logo-auth0-badge-color.svg | 3 + .../integrations/logo-authy-circle-red.svg | 11 ++ .../integrations/logo-duckduckgo-color.svg | 21 +++ .../images/integrations/logo-duo-color.svg | 15 ++ .../integrations/logo-elastic-badge-color.svg | 9 + .../integrations/logo-fastmail-icon.svg | 13 ++ .../integrations/logo-fedora-badge-color.svg | 10 + .../integrations/logo-fido-alliance-color.svg | 11 ++ .../integrations/logo-firefox-relay-icon.svg | 10 + .../integrations/logo-forwardemail-icon.svg | 106 +++++++++++ .../images/integrations/logo-gitlab-icon.svg | 6 + .../integrations/logo-google-badge-color.svg | 6 + .../logo-jumpcloud-badge-color.svg | 3 + .../integrations/logo-keycloak-icon.svg | 23 +++ .../integrations/logo-kubernetes-icon.svg | 4 + .../integrations/logo-microsoft-color.svg | 6 + .../logo-microsoft-entra-id-color.svg | 8 + .../logo-microsoft-sentinel-color.svg | 21 +++ .../integrations/logo-novell-icon-red.svg | 4 + .../integrations/logo-okta-symbol-black.svg | 10 + .../logo-onelogin-badge-color.svg | 11 ++ .../src/images/integrations/logo-open-ds.svg | 8 + .../logo-openldap-badge-color.svg | 93 ++++++++++ .../integrations/logo-oracle-badge-color.svg | 10 + .../integrations/logo-panther-round-color.svg | 4 + .../src/images/integrations/logo-passkeys.svg | 14 ++ .../logo-ping-identity-badge-color.svg | 11 ++ .../images/integrations/logo-rapid7-black.svg | 8 + .../integrations/logo-rippling-round.svg | 11 ++ .../integrations/logo-simplelogin-icon.svg | 19 ++ .../images/integrations/logo-splunk-black.svg | 3 + .../src/images/integrations/logo-yubikey.svg | 16 ++ 43 files changed, 839 insertions(+), 45 deletions(-) create mode 100644 apps/web/src/images/integrations/authenticator-icon-solid.svg create mode 100644 apps/web/src/images/integrations/aws-color.svg create mode 100644 apps/web/src/images/integrations/azure-active-directory.svg create mode 100644 apps/web/src/images/integrations/github.svg create mode 100644 apps/web/src/images/integrations/logo-addy-icon-color.svg create mode 100644 apps/web/src/images/integrations/logo-ansible-icon.svg create mode 100644 apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg create mode 100644 apps/web/src/images/integrations/logo-apple-color.svg create mode 100644 apps/web/src/images/integrations/logo-auth0-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-authy-circle-red.svg create mode 100644 apps/web/src/images/integrations/logo-duckduckgo-color.svg create mode 100644 apps/web/src/images/integrations/logo-duo-color.svg create mode 100644 apps/web/src/images/integrations/logo-elastic-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-fastmail-icon.svg create mode 100644 apps/web/src/images/integrations/logo-fedora-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-fido-alliance-color.svg create mode 100644 apps/web/src/images/integrations/logo-firefox-relay-icon.svg create mode 100644 apps/web/src/images/integrations/logo-forwardemail-icon.svg create mode 100644 apps/web/src/images/integrations/logo-gitlab-icon.svg create mode 100644 apps/web/src/images/integrations/logo-google-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-keycloak-icon.svg create mode 100644 apps/web/src/images/integrations/logo-kubernetes-icon.svg create mode 100644 apps/web/src/images/integrations/logo-microsoft-color.svg create mode 100644 apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg create mode 100644 apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg create mode 100644 apps/web/src/images/integrations/logo-novell-icon-red.svg create mode 100644 apps/web/src/images/integrations/logo-okta-symbol-black.svg create mode 100644 apps/web/src/images/integrations/logo-onelogin-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-open-ds.svg create mode 100644 apps/web/src/images/integrations/logo-openldap-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-oracle-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-panther-round-color.svg create mode 100644 apps/web/src/images/integrations/logo-passkeys.svg create mode 100644 apps/web/src/images/integrations/logo-ping-identity-badge-color.svg create mode 100644 apps/web/src/images/integrations/logo-rapid7-black.svg create mode 100644 apps/web/src/images/integrations/logo-rippling-round.svg create mode 100644 apps/web/src/images/integrations/logo-simplelogin-icon.svg create mode 100644 apps/web/src/images/integrations/logo-splunk-black.svg create mode 100644 apps/web/src/images/integrations/logo-yubikey.svg diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html index a8375c1643d1..3639f23bf063 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -19,14 +19,14 @@

    {{ "scim" | i18n }}

    {{ "scimDesc" | i18n }}

    - +

    {{ "bwdc" | i18n }}

    {{ "bwdcDesc" | i18n }}

    - +
    @@ -36,7 +36,7 @@

    {{ "eventManagement" | i18n }}

    {{ "eventManagementDesc" | i18n }}

    - + @@ -46,7 +46,7 @@

    {{ "deviceManagement" | i18n }}

    {{ "deviceManagementDesc" | i18n }}

    - + diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index 994ceaf16c88..51bec7065c3b 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -1,7 +1,6 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { Integration } from "../../../shared/components/integrations/models"; @@ -14,91 +13,170 @@ export class IntegrationsComponent { tabIndex: number; - constructor(i18nService: I18nService) { + constructor() { // temporary integrations this.integrationsList = [ { name: "AD FS", - linkURL: "https://github.com/bitwarden/sdk", - image: "../../../../../../../images/secrets-manager/sdks/rust.svg", - imageDarkMode: "../../../../../../../images/secrets-manager/sdks/rust-white.svg", + linkURL: "https://bitwarden.com/help/saml-adfs/", + image: "../../../../../../../images/integrations/logo-microsoft-color.svg", type: IntegrationType.SSO, }, { name: "Auth0", - linkURL: "https://bitwarden.com/help/github-actions-integration/", - image: "../../../../../../../images/secrets-manager/integrations/github.svg", - imageDarkMode: "../../../../../../../images/secrets-manager/integrations/github-white.svg", + linkURL: "https://bitwarden.com/help/saml-auth0/", + image: "../../../../../../../images/integrations/logo-auth0-badge-color.svg", type: IntegrationType.SSO, }, { name: "AWS", - linkURL: "https://bitwarden.com/help/gitlab-integration/", - image: "../../../../../../../images/secrets-manager/integrations/gitlab.svg", - imageDarkMode: "../../../../../../../images/secrets-manager/integrations/gitlab-white.svg", + linkURL: "https://bitwarden.com/help/saml-aws/", + image: "../../../../../../../images/integrations/aws-color.svg", type: IntegrationType.SSO, }, { name: "Microsoft Entra ID", - linkURL: "https://bitwarden.com/help/ansible-integration/", - image: "../../../../../../../images/secrets-manager/integrations/ansible.svg", + linkURL: "https://bitwarden.com/help/saml-azure/", + image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg", type: IntegrationType.SSO, }, { name: "Duo", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/csharp", - image: "../../../../../../../images/secrets-manager/sdks/c-sharp.svg", + linkURL: "https://bitwarden.com/help/saml-duo/", + image: "../../../../../../../images/integrations/logo-duo-color.svg", type: IntegrationType.SSO, }, { name: "Google", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/cpp", - image: "../../../../../../../images/secrets-manager/sdks/c-plus-plus.png", + linkURL: "https://bitwarden.com/help/saml-google/", + image: "../../../../../../../images/integrations/logo-google-badge-color.svg", type: IntegrationType.SSO, }, { name: "JumpCloud", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/go", - image: "../../../../../../../images/secrets-manager/sdks/go.svg", + linkURL: "https://bitwarden.com/help/saml-jumpcloud/", + image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg", type: IntegrationType.SSO, }, { name: "KeyCloak", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/java", - image: "../../../../../../../images/secrets-manager/sdks/java.svg", - imageDarkMode: "../../../../../../../images/secrets-manager/sdks/java-white.svg", + linkURL: "https://bitwarden.com/help/saml-keycloak/", + image: "../../../../../../../images/integrations/logo-keycloak-icon.svg", type: IntegrationType.SSO, }, { name: "Okta", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/js", - image: "../../../../../../../images/secrets-manager/sdks/wasm.svg", + linkURL: "https://bitwarden.com/help/saml-okta/", + image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", type: IntegrationType.SSO, }, { name: "OneLogin", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/php", - image: "../../../../../../../images/secrets-manager/sdks/php.svg", + linkURL: "https://bitwarden.com/help/saml-onelogin/", + image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", type: IntegrationType.SSO, }, { name: "PingFederate", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/python", - image: "../../../../../../../images/secrets-manager/sdks/python.svg", + linkURL: "https://bitwarden.com/help/saml-pingfederate/", + image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg", type: IntegrationType.SSO, }, { - name: "Ruby", - linkURL: "https://github.com/bitwarden/sdk/tree/main/languages/ruby", - image: "../../../../../../../images/secrets-manager/sdks/ruby.png", - type: IntegrationType.SSO, + name: "Microsoft Entra ID", + linkURL: "https://bitwarden.com/help/microsoft-entra-id-scim-integration/", + image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg", + type: IntegrationType.SCIM, }, { - name: "Kubernetes Operator", - linkURL: "https://bitwarden.com/help/secrets-manager-kubernetes-operator/", - image: "../../../../../../../images/secrets-manager/integrations/kubernetes.svg", - type: IntegrationType.SSO, - newBadgeExpiration: "2024-8-12", + name: "Okta", + linkURL: "https://bitwarden.com/help/okta-scim-integration/", + image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", + type: IntegrationType.SCIM, + }, + { + name: "OneLogin", + linkURL: "https://bitwarden.com/help/onelogin-scim-integration/", + image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", + type: IntegrationType.SCIM, + }, + { + name: "JumpCloud", + linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/", + image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg", + type: IntegrationType.SCIM, + }, + { + name: "Ping Identity", + linkURL: "https://bitwarden.com/help/ping-identity-scim-integration/", + image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg", + type: IntegrationType.SCIM, + }, + { + name: "Active Directory", + linkURL: "https://bitwarden.com/help/ldap-directory/", + image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + type: IntegrationType.BWDC, + }, + { + name: "Microsoft Entra ID", + linkURL: "https://bitwarden.com/help/microsoft-entra-id/", + image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg", + type: IntegrationType.BWDC, + }, + { + name: "Google Workspace", + linkURL: "https://bitwarden.com/help/workspace-directory/", + image: "../../../../../../../images/integrations/logo-google-badge-color.svg", + type: IntegrationType.BWDC, + }, + { + name: "Okta", + linkURL: "https://bitwarden.com/help/okta-directory/", + image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", + type: IntegrationType.BWDC, + }, + { + name: "OneLogin", + linkURL: "https://bitwarden.com/help/onelogin-directory/", + image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", + type: IntegrationType.BWDC, + }, + { + name: "Splunk", + linkURL: "https://bitwarden.com/help/splunk-siem/", + image: "../../../../../../../images/integrations/logo-splunk-black.svg", + type: IntegrationType.EVENT, + }, + { + name: "Microsoft Sentinel", + linkURL: "https://bitwarden.com/help/microsoft-sentinel-siem/", + image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + type: IntegrationType.EVENT, + }, + { + name: "Rapid7", + linkURL: "https://bitwarden.com/help/rapid7-siem/", + image: "../../../../../../../images/integrations/logo-rapid7-black.svg", + type: IntegrationType.EVENT, + }, + { + name: "Elastic", + linkURL: "https://bitwarden.com/help/elastic-siem/", + image: "../../../../../../../images/integrations/logo-elastic-badge-color.svg", + type: IntegrationType.EVENT, + }, + { + name: "Panther", + linkURL: "https://bitwarden.com/help/panther-siem/", + image: "../../../../../../../images/integrations/logo-panther-round-color.svg", + type: IntegrationType.EVENT, + }, + { + name: "Microsoft Intune", + linkURL: "https://bitwarden.com/help/deploy-browser-extensions-with-intune/", + image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + type: IntegrationType.DEVICE, }, ]; } @@ -108,8 +186,23 @@ export class IntegrationsComponent { return this.integrationsList.filter((integration) => integration.type === IntegrationType.SSO); } - /** Filter out content for the SDKs section */ - get sdks(): Integration[] { - return this.integrationsList.filter((integration) => integration.type === IntegrationType.SSO); + get scim(): Integration[] { + return this.integrationsList.filter((integration) => integration.type === IntegrationType.SCIM); + } + + get bwdc(): Integration[] { + return this.integrationsList.filter((integration) => integration.type === IntegrationType.BWDC); + } + + get event(): Integration[] { + return this.integrationsList.filter( + (integration) => integration.type === IntegrationType.EVENT, + ); + } + + get device(): Integration[] { + return this.integrationsList.filter( + (integration) => integration.type === IntegrationType.DEVICE, + ); } } diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html index 4536cef75885..2c7f6e47b5d8 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html @@ -19,7 +19,6 @@

    {{ name }}

    + + + + + + + diff --git a/apps/web/src/images/integrations/aws-color.svg b/apps/web/src/images/integrations/aws-color.svg new file mode 100644 index 000000000000..10ebd83b7452 --- /dev/null +++ b/apps/web/src/images/integrations/aws-color.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/web/src/images/integrations/azure-active-directory.svg b/apps/web/src/images/integrations/azure-active-directory.svg new file mode 100644 index 000000000000..82ac48348c64 --- /dev/null +++ b/apps/web/src/images/integrations/azure-active-directory.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/images/integrations/github.svg b/apps/web/src/images/integrations/github.svg new file mode 100644 index 000000000000..c05f2f62a006 --- /dev/null +++ b/apps/web/src/images/integrations/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/src/images/integrations/logo-addy-icon-color.svg b/apps/web/src/images/integrations/logo-addy-icon-color.svg new file mode 100644 index 000000000000..ac2e1395a58f --- /dev/null +++ b/apps/web/src/images/integrations/logo-addy-icon-color.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-ansible-icon.svg b/apps/web/src/images/integrations/logo-ansible-icon.svg new file mode 100644 index 000000000000..a75bd045c58b --- /dev/null +++ b/apps/web/src/images/integrations/logo-ansible-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg b/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg new file mode 100644 index 000000000000..71f7a1722e5e --- /dev/null +++ b/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-apple-color.svg b/apps/web/src/images/integrations/logo-apple-color.svg new file mode 100644 index 000000000000..0afc77cbd5f9 --- /dev/null +++ b/apps/web/src/images/integrations/logo-apple-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/src/images/integrations/logo-auth0-badge-color.svg b/apps/web/src/images/integrations/logo-auth0-badge-color.svg new file mode 100644 index 000000000000..39d682db5eb0 --- /dev/null +++ b/apps/web/src/images/integrations/logo-auth0-badge-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/src/images/integrations/logo-authy-circle-red.svg b/apps/web/src/images/integrations/logo-authy-circle-red.svg new file mode 100644 index 000000000000..f5abe204f428 --- /dev/null +++ b/apps/web/src/images/integrations/logo-authy-circle-red.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-duckduckgo-color.svg b/apps/web/src/images/integrations/logo-duckduckgo-color.svg new file mode 100644 index 000000000000..e98ca1f72f7e --- /dev/null +++ b/apps/web/src/images/integrations/logo-duckduckgo-color.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-duo-color.svg b/apps/web/src/images/integrations/logo-duo-color.svg new file mode 100644 index 000000000000..77ed634b294f --- /dev/null +++ b/apps/web/src/images/integrations/logo-duo-color.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-elastic-badge-color.svg b/apps/web/src/images/integrations/logo-elastic-badge-color.svg new file mode 100644 index 000000000000..01cf69072225 --- /dev/null +++ b/apps/web/src/images/integrations/logo-elastic-badge-color.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-fastmail-icon.svg b/apps/web/src/images/integrations/logo-fastmail-icon.svg new file mode 100644 index 000000000000..a8bcf2cf5cfd --- /dev/null +++ b/apps/web/src/images/integrations/logo-fastmail-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-fedora-badge-color.svg b/apps/web/src/images/integrations/logo-fedora-badge-color.svg new file mode 100644 index 000000000000..bbbbfc6230c1 --- /dev/null +++ b/apps/web/src/images/integrations/logo-fedora-badge-color.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-fido-alliance-color.svg b/apps/web/src/images/integrations/logo-fido-alliance-color.svg new file mode 100644 index 000000000000..05fda02c9d69 --- /dev/null +++ b/apps/web/src/images/integrations/logo-fido-alliance-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-firefox-relay-icon.svg b/apps/web/src/images/integrations/logo-firefox-relay-icon.svg new file mode 100644 index 000000000000..a96e73d429a0 --- /dev/null +++ b/apps/web/src/images/integrations/logo-firefox-relay-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-forwardemail-icon.svg b/apps/web/src/images/integrations/logo-forwardemail-icon.svg new file mode 100644 index 000000000000..c6003a2a69b1 --- /dev/null +++ b/apps/web/src/images/integrations/logo-forwardemail-icon.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-gitlab-icon.svg b/apps/web/src/images/integrations/logo-gitlab-icon.svg new file mode 100644 index 000000000000..e5b19134c237 --- /dev/null +++ b/apps/web/src/images/integrations/logo-gitlab-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/src/images/integrations/logo-google-badge-color.svg b/apps/web/src/images/integrations/logo-google-badge-color.svg new file mode 100644 index 000000000000..e3d3b56ca23b --- /dev/null +++ b/apps/web/src/images/integrations/logo-google-badge-color.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg b/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg new file mode 100644 index 000000000000..e3222b74fbe0 --- /dev/null +++ b/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/src/images/integrations/logo-keycloak-icon.svg b/apps/web/src/images/integrations/logo-keycloak-icon.svg new file mode 100644 index 000000000000..862ffcb6c2bd --- /dev/null +++ b/apps/web/src/images/integrations/logo-keycloak-icon.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-kubernetes-icon.svg b/apps/web/src/images/integrations/logo-kubernetes-icon.svg new file mode 100644 index 000000000000..95714efc8e6e --- /dev/null +++ b/apps/web/src/images/integrations/logo-kubernetes-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/src/images/integrations/logo-microsoft-color.svg b/apps/web/src/images/integrations/logo-microsoft-color.svg new file mode 100644 index 000000000000..997a7b3451b2 --- /dev/null +++ b/apps/web/src/images/integrations/logo-microsoft-color.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg b/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg new file mode 100644 index 000000000000..b58a07a8d9ca --- /dev/null +++ b/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg b/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg new file mode 100644 index 000000000000..51b40d2be0ae --- /dev/null +++ b/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-novell-icon-red.svg b/apps/web/src/images/integrations/logo-novell-icon-red.svg new file mode 100644 index 000000000000..ba9a9e112c72 --- /dev/null +++ b/apps/web/src/images/integrations/logo-novell-icon-red.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/src/images/integrations/logo-okta-symbol-black.svg b/apps/web/src/images/integrations/logo-okta-symbol-black.svg new file mode 100644 index 000000000000..f5bf2ae8d96a --- /dev/null +++ b/apps/web/src/images/integrations/logo-okta-symbol-black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-onelogin-badge-color.svg b/apps/web/src/images/integrations/logo-onelogin-badge-color.svg new file mode 100644 index 000000000000..9c9b3567802b --- /dev/null +++ b/apps/web/src/images/integrations/logo-onelogin-badge-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-open-ds.svg b/apps/web/src/images/integrations/logo-open-ds.svg new file mode 100644 index 000000000000..36b61bc96dc4 --- /dev/null +++ b/apps/web/src/images/integrations/logo-open-ds.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-openldap-badge-color.svg b/apps/web/src/images/integrations/logo-openldap-badge-color.svg new file mode 100644 index 000000000000..24ce3292e282 --- /dev/null +++ b/apps/web/src/images/integrations/logo-openldap-badge-color.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-oracle-badge-color.svg b/apps/web/src/images/integrations/logo-oracle-badge-color.svg new file mode 100644 index 000000000000..718a2187d2a4 --- /dev/null +++ b/apps/web/src/images/integrations/logo-oracle-badge-color.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-panther-round-color.svg b/apps/web/src/images/integrations/logo-panther-round-color.svg new file mode 100644 index 000000000000..9608197da369 --- /dev/null +++ b/apps/web/src/images/integrations/logo-panther-round-color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/src/images/integrations/logo-passkeys.svg b/apps/web/src/images/integrations/logo-passkeys.svg new file mode 100644 index 000000000000..b4e351a4c994 --- /dev/null +++ b/apps/web/src/images/integrations/logo-passkeys.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg b/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg new file mode 100644 index 000000000000..284a1f833cc0 --- /dev/null +++ b/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-rapid7-black.svg b/apps/web/src/images/integrations/logo-rapid7-black.svg new file mode 100644 index 000000000000..be2948aed1e2 --- /dev/null +++ b/apps/web/src/images/integrations/logo-rapid7-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-rippling-round.svg b/apps/web/src/images/integrations/logo-rippling-round.svg new file mode 100644 index 000000000000..8d6178be6f11 --- /dev/null +++ b/apps/web/src/images/integrations/logo-rippling-round.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-simplelogin-icon.svg b/apps/web/src/images/integrations/logo-simplelogin-icon.svg new file mode 100644 index 000000000000..9750e20cdc71 --- /dev/null +++ b/apps/web/src/images/integrations/logo-simplelogin-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-splunk-black.svg b/apps/web/src/images/integrations/logo-splunk-black.svg new file mode 100644 index 000000000000..9d0de6d7cc3d --- /dev/null +++ b/apps/web/src/images/integrations/logo-splunk-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/src/images/integrations/logo-yubikey.svg b/apps/web/src/images/integrations/logo-yubikey.svg new file mode 100644 index 000000000000..443c6305e972 --- /dev/null +++ b/apps/web/src/images/integrations/logo-yubikey.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + From 81545e6228f087331050fdb95a6567a10b80af48 Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 6 Nov 2024 13:39:50 -0500 Subject: [PATCH 03/18] fix linting and tests --- .../integrations.component.spec.ts | 79 ------------------- .../organization-routing.module.ts | 2 +- .../integration-card.component.spec.ts | 14 +++- .../integration-grid.component.spec.ts | 12 ++- .../integrations.component.spec.ts | 4 +- 5 files changed, 26 insertions(+), 85 deletions(-) delete mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts deleted file mode 100644 index 870f68b28789..000000000000 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.spec.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { Component } from "@angular/core"; -import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { By } from "@angular/platform-browser"; -import { mock } from "jest-mock-extended"; -import { of } from "rxjs"; - -import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { ThemeTypes } from "@bitwarden/common/platform/enums"; -import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; -import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; - -import { IntegrationCardComponent } from "../../../shared/components/integrations/integration-card/integration-card.component"; -import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component"; - -import { IntegrationsComponent } from "./integrations.component"; - -@Component({ - selector: "app-header", - template: "
    ", -}) -class MockHeaderComponent {} - -@Component({ - selector: "sm-new-menu", - template: "
    ", -}) -// TODO: fix these tests to reflect the new UI and integrations when they are implemented -class MockNewMenuComponent {} - -describe("IntegrationsComponent", () => { - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - IntegrationsComponent, - IntegrationGridComponent, - IntegrationCardComponent, - MockHeaderComponent, - MockNewMenuComponent, - I18nPipe, - ], - providers: [ - { - provide: I18nService, - useValue: mock({ t: (key) => key }), - }, - { - provide: ThemeStateService, - useValue: mock(), - }, - { - provide: SYSTEM_THEME_OBSERVABLE, - useValue: of(ThemeTypes.Light), - }, - ], - }).compileComponents(); - fixture = TestBed.createComponent(IntegrationsComponent); - fixture.detectChanges(); - }); - - it("divides Integrations & SDKS", () => { - const [integrationList, sdkList] = fixture.debugElement.queryAll( - By.directive(IntegrationGridComponent), - ); - - // Validate only expected names, as the data is constant - expect( - (integrationList.componentInstance as IntegrationGridComponent).integrations.map( - (i) => i.name, - ), - ).toEqual(["GitHub Actions", "GitLab CI/CD", "Ansible", "Kubernetes Operator"]); - - expect( - (sdkList.componentInstance as IntegrationGridComponent).integrations.map((i) => i.name), - ).toEqual(["Rust", "C#", "C++", "Go", "Java", "JS WebAssembly", "php", "Python", "Ruby"]); - }); -}); diff --git a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts index a6b81bb8cf7c..374bc20646ff 100644 --- a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts @@ -12,9 +12,9 @@ import { } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { integrationPageEnabled } from "../../admin-console/organizations/guards/integrations.guard"; import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard"; import { organizationRedirectGuard } from "../../admin-console/organizations/guards/org-redirect.guard"; -import { integrationPageEnabled } from "../../admin-console/organizations/guards/integrations.guard"; import { OrganizationLayoutComponent } from "../../admin-console/organizations/layouts/organization-layout.component"; import { deepLinkGuard } from "../../auth/guards/deep-link.guard"; import { VaultModule } from "../../vault/org-vault/vault.module"; diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts index c5a4b8907618..04cb414c423d 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts @@ -1,12 +1,14 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { mock } from "jest-mock-extended"; import { BehaviorSubject } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; import { IntegrationCardComponent } from "./integration-card.component"; - describe("IntegrationCardComponent", () => { let component: IntegrationCardComponent; let fixture: ComponentFixture; @@ -19,7 +21,7 @@ describe("IntegrationCardComponent", () => { systemTheme$.next(ThemeType.Light); await TestBed.configureTestingModule({ - declarations: [IntegrationCardComponent], + declarations: [IntegrationCardComponent, I18nPipe], providers: [ { provide: ThemeStateService, @@ -29,6 +31,14 @@ describe("IntegrationCardComponent", () => { provide: SYSTEM_THEME_OBSERVABLE, useValue: systemTheme$, }, + { + provide: I18nPipe, + useValue: mock(), + }, + { + provide: I18nService, + useValue: mock(), + }, ], }).compileComponents(); }); diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts index 0416eb240f29..de5c30ea11b1 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts @@ -5,8 +5,10 @@ import { of } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; import { IntegrationType } from "@bitwarden/common/enums"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ThemeTypes } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; import { IntegrationCardComponent } from "../integration-card/integration-card.component"; import { Integration } from "../models"; @@ -35,7 +37,7 @@ describe("IntegrationGridComponent", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [IntegrationGridComponent, IntegrationCardComponent], + declarations: [IntegrationGridComponent, IntegrationCardComponent, I18nPipe], providers: [ { provide: ThemeStateService, @@ -45,6 +47,14 @@ describe("IntegrationGridComponent", () => { provide: SYSTEM_THEME_OBSERVABLE, useValue: of(ThemeTypes.Light), }, + { + provide: I18nPipe, + useValue: mock(), + }, + { + provide: I18nService, + useValue: mock(), + }, ], }); diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts index 6c8ea28bc2f2..667156a283c4 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts @@ -4,14 +4,14 @@ import { By } from "@angular/platform-browser"; import { mock } from "jest-mock-extended"; import { of } from "rxjs"; +import { IntegrationCardComponent } from "../../../../../../apps/web/src/app/shared/components/integrations/integration-card/integration-card.component"; +import { IntegrationGridComponent } from "../../../../../../apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component"; import { SYSTEM_THEME_OBSERVABLE } from "../../../../../../libs/angular/src/services/injection-tokens"; import { I18nService } from "../../../../../../libs/common/src/platform/abstractions/i18n.service"; import { ThemeType } from "../../../../../../libs/common/src/platform/enums"; import { ThemeStateService } from "../../../../../../libs/common/src/platform/theming/theme-state.service"; import { I18nPipe } from "../../../../../../libs/components/src/shared/i18n.pipe"; -import { IntegrationCardComponent } from "./integration-card/integration-card.component"; -import { IntegrationGridComponent } from "./integration-grid/integration-grid.component"; import { IntegrationsComponent } from "./integrations.component"; @Component({ From 9950dcd4f923754074a3e8eac3db3addb2dffa80 Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 6 Nov 2024 14:01:32 -0500 Subject: [PATCH 04/18] fix locales --- .../organizations/integrations/integrations.component.html | 4 ++-- apps/web/src/locales/en/messages.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html index 3639f23bf063..1e54b336e6bf 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -16,9 +16,9 @@

    {{ "singleSignOn" | i18n }}

    - {{ "scim" | i18n }} + {{ "scimIntegration" | i18n }}

    -

    {{ "scimDesc" | i18n }}

    +

    {{ "scimIntegrationDesc" | i18n }}

    diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index ccc25d179b97..c0e53a794d6c 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8881,10 +8881,10 @@ "userProvisioning":{ "message": "User provisioning" }, - "scim": { + "scimIntegration": { "message": "SCIM" }, - "scimDesc": { + "scimIntegrationDesc": { "message": "Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider." }, "bwdc":{ From 19c81adc34cb7c4324d80a2d72610cf00be1354c Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 6 Nov 2024 14:09:14 -0500 Subject: [PATCH 05/18] update locale --- apps/web/src/locales/en/messages.json | 4 ++++ .../admin-console/organizations/manage/scim.component.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index c0e53a794d6c..01f9e0d61252 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -6678,6 +6678,10 @@ "description": "The text, 'SCIM', is an acronym and should not be translated." }, "scimDescription": { + "message": "Automatically provision users and groups with your preferred identity provider via SCIM provisioning", + "description": "the text, 'SCIM', is an acronym and should not be translated." + }, + "scimIntegrationDescription": { "message": "Automatically provision users and groups with your preferred identity provider via SCIM provisioning. Find supported integrations", "description": "the text, 'SCIM', is an acronym and should not be translated." }, diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html index 6352d15f2d3f..7ade2e6c63df 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html @@ -1,7 +1,7 @@

    - {{ "scimDescription" | i18n }} + {{ "scimIntegrationDescription" | i18n }} From 757d9afa87526720cc4055915f01c5af2ccea9fb Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 12 Nov 2024 15:03:36 -0500 Subject: [PATCH 06/18] Change logos, add link to SCIM page --- .../integrations/integrations.component.html | 6 +++++- .../integrations/integrations.component.ts | 10 +++++----- apps/web/src/images/integrations/aws-darkmode.svg | 12 ++++++++++++ .../integrations/logo-microsoft-intune-color.svg | 11 +++++++++++ apps/web/src/locales/en/messages.json | 7 +++++-- 5 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 apps/web/src/images/integrations/aws-darkmode.svg create mode 100644 apps/web/src/images/integrations/logo-microsoft-intune-color.svg diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html index 1e54b336e6bf..acc022b2287d 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -18,7 +18,11 @@

    {{ "singleSignOn" | i18n }}

    {{ "scimIntegration" | i18n }}

    -

    {{ "scimIntegrationDesc" | i18n }}

    +

    + {{ "scimIntegrationDescStart" | i18n }} + {{ "scimIntegration" | i18n }} + {{ "scimIntegrationDescEnd" | i18n }} +

    diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index 51bec7065c3b..9ab01dab533b 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -14,12 +14,11 @@ export class IntegrationsComponent { tabIndex: number; constructor() { - // temporary integrations this.integrationsList = [ { name: "AD FS", linkURL: "https://bitwarden.com/help/saml-adfs/", - image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + image: "../../../../../../../images/integrations/azure-active-directory.svg", type: IntegrationType.SSO, }, { @@ -32,6 +31,7 @@ export class IntegrationsComponent { name: "AWS", linkURL: "https://bitwarden.com/help/saml-aws/", image: "../../../../../../../images/integrations/aws-color.svg", + imageDarkMode: "../../../../../../../images/integrations/aws-darkmode.svg", type: IntegrationType.SSO, }, { @@ -115,7 +115,7 @@ export class IntegrationsComponent { { name: "Active Directory", linkURL: "https://bitwarden.com/help/ldap-directory/", - image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + image: "../../../../../../../images/integrations/azure-active-directory.svg", type: IntegrationType.BWDC, }, { @@ -151,7 +151,7 @@ export class IntegrationsComponent { { name: "Microsoft Sentinel", linkURL: "https://bitwarden.com/help/microsoft-sentinel-siem/", - image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + image: "../../../../../../../images/integrations/logo-microsoft-sentinel-color.svg", type: IntegrationType.EVENT, }, { @@ -175,7 +175,7 @@ export class IntegrationsComponent { { name: "Microsoft Intune", linkURL: "https://bitwarden.com/help/deploy-browser-extensions-with-intune/", - image: "../../../../../../../images/integrations/logo-microsoft-color.svg", + image: "../../../../../../../images/integrations/logo-microsoft-intune-color.svg", type: IntegrationType.DEVICE, }, ]; diff --git a/apps/web/src/images/integrations/aws-darkmode.svg b/apps/web/src/images/integrations/aws-darkmode.svg new file mode 100644 index 000000000000..5f9c4bcbf1e1 --- /dev/null +++ b/apps/web/src/images/integrations/aws-darkmode.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/web/src/images/integrations/logo-microsoft-intune-color.svg b/apps/web/src/images/integrations/logo-microsoft-intune-color.svg new file mode 100644 index 000000000000..a27f6ef2532f --- /dev/null +++ b/apps/web/src/images/integrations/logo-microsoft-intune-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 01f9e0d61252..b500b3f68d04 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8888,8 +8888,11 @@ "scimIntegration": { "message": "SCIM" }, - "scimIntegrationDesc": { - "message": "Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider." + "scimIntegrationDescStart": { + "message": "Configure " + }, + "scimIntegrationDescEnd": { + "message": "(System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider." }, "bwdc":{ "message": "Bitwarden Directory Connector" From 7a001ff2596f8e6d542eeea5e6a80ec4cf87890e Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 13 Nov 2024 11:37:17 -0500 Subject: [PATCH 07/18] refactor to standalone components, add integration filtering pipe --- .../guards/integrations.guard.ts | 19 -------- .../integrations-routing.module.ts | 20 --------- .../integrations/integrations.component.html | 20 ++++++--- .../integrations/integrations.component.ts | 44 ++++++++----------- .../integrations/integrations.module.ts | 20 --------- .../integrations/integrations.pipe.ts | 15 +++++++ .../organization-layout.component.html | 2 +- .../layouts/organization-layout.component.ts | 2 +- .../organization-routing.module.ts | 12 +++-- .../integration-card.component.ts | 6 ++- .../integration-grid.component.html | 4 +- .../integration-grid.component.ts | 7 ++- .../integrations/integrations.module.ts | 15 ------- apps/web/src/app/shared/index.ts | 1 - .../integrations-routing.module.ts | 17 ------- .../integrations/integrations.component.html | 4 +- .../integrations/integrations.component.ts | 6 +++ .../integrations/integrations.module.ts | 15 ------- .../app/secrets-manager/sm-routing.module.ts | 4 +- 19 files changed, 81 insertions(+), 152 deletions(-) delete mode 100644 apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts delete mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts delete mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts create mode 100644 apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts delete mode 100644 apps/web/src/app/shared/components/integrations/integrations.module.ts delete mode 100644 bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts delete mode 100644 bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts diff --git a/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts b/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts deleted file mode 100644 index 160d93e36378..000000000000 --- a/apps/web/src/app/admin-console/organizations/guards/integrations.guard.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { inject } from "@angular/core"; -import { CanActivateFn } from "@angular/router"; - -import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; -import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; - -export const integrationPageEnabled: CanActivateFn = async () => { - const configService = inject(ConfigService); - - const integrationPageEnabled = await configService.getFeatureFlag( - FeatureFlag.PM14505AdminConsoleIntegrationPage, - ); - - if (integrationPageEnabled) { - return true; - } - - return false; -}; diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts deleted file mode 100644 index 746828e64242..000000000000 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations-routing.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; - -import { IntegrationsComponent } from "./integrations.component"; - -const routes: Routes = [ - { - path: "", - component: IntegrationsComponent, - data: { - titleId: "integrations", - }, - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class IntegrationsRoutingModule {} diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html index acc022b2287d..f536be8510b0 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -9,7 +9,9 @@

    {{ "singleSignOn" | i18n }}

    {{ "ssoDescAnchor" | i18n }} {{ "ssoDescEnd" | i18n }}

    - +
    @@ -23,14 +25,18 @@

    {{ "scimIntegration" | i18n }} {{ "scimIntegrationDescEnd" | i18n }}

    - +

    {{ "bwdc" | i18n }}

    {{ "bwdcDesc" | i18n }}

    - +
    @@ -40,7 +46,9 @@

    {{ "eventManagement" | i18n }}

    {{ "eventManagementDesc" | i18n }}

    - + @@ -50,7 +58,9 @@

    {{ "deviceManagement" | i18n }}

    {{ "deviceManagementDesc" | i18n }}

    - + diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index 9ab01dab533b..1dac4d744f2c 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -1,16 +1,29 @@ +import { CommonModule } from "@angular/common"; import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; +import { HeaderModule } from "../../../layouts/header/header.module"; +import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component"; import { Integration } from "../../../shared/components/integrations/models"; +import { SharedOrganizationModule } from "../shared"; + +import { FilterIntegrationsPipe } from "./integrations.pipe"; @Component({ selector: "ac-integrations", templateUrl: "./integrations.component.html", + standalone: true, + imports: [ + CommonModule, + SharedOrganizationModule, + IntegrationGridComponent, + HeaderModule, + FilterIntegrationsPipe, + ], }) -export class IntegrationsComponent { - private integrationsList: Integration[] = []; - +export class AdminConsoleIntegrationsComponent { + integrationsList: Integration[] = []; tabIndex: number; constructor() { @@ -181,28 +194,7 @@ export class IntegrationsComponent { ]; } - /** Filter out content for the integrations sections */ - get sso(): Integration[] { - return this.integrationsList.filter((integration) => integration.type === IntegrationType.SSO); - } - - get scim(): Integration[] { - return this.integrationsList.filter((integration) => integration.type === IntegrationType.SCIM); - } - - get bwdc(): Integration[] { - return this.integrationsList.filter((integration) => integration.type === IntegrationType.BWDC); - } - - get event(): Integration[] { - return this.integrationsList.filter( - (integration) => integration.type === IntegrationType.EVENT, - ); - } - - get device(): Integration[] { - return this.integrationsList.filter( - (integration) => integration.type === IntegrationType.DEVICE, - ); + get IntegrationType(): typeof IntegrationType { + return IntegrationType; } } diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts deleted file mode 100644 index c2137971a9ab..000000000000 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CommonModule } from "@angular/common"; -import { NgModule } from "@angular/core"; - -import { LooseComponentsModule, SharedIntegrationsModule } from "../../../shared"; -import { SharedOrganizationModule } from "../shared"; - -import { IntegrationsRoutingModule } from "./integrations-routing.module"; -import { IntegrationsComponent } from "./integrations.component"; - -@NgModule({ - imports: [ - IntegrationsRoutingModule, - CommonModule, - SharedOrganizationModule, - SharedIntegrationsModule, - LooseComponentsModule, - ], - declarations: [IntegrationsComponent], -}) -export class IntegrationsModule {} diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts new file mode 100644 index 000000000000..760d9913e9e9 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from "@angular/core"; + +import { IntegrationType } from "@bitwarden/common/enums"; + +import { Integration } from "../../../shared/components/integrations/models"; + +@Pipe({ + name: "filterIntegrations", + standalone: true, +}) +export class FilterIntegrationsPipe implements PipeTransform { + transform(integrations: Integration[], type: IntegrationType): Integration[] { + return integrations.filter((integration) => integration.type === type); + } +} diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html index 799a1ec2d4c3..2efc226edff4 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html @@ -60,7 +60,7 @@ icon="bwi-providers" [text]="'integrations' | i18n" route="integrations" - *ngIf="integrations$ | async" + *ngIf="integrationPageEnabled$ | async" > canAccessOrgAdmin(org); - protected integrations$ = this.configService.getFeatureFlag$( + protected integrationPageEnabled$ = this.configService.getFeatureFlag$( FeatureFlag.PM14505AdminConsoleIntegrationPage, ); diff --git a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts index 374bc20646ff..5b57f0c7568e 100644 --- a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts @@ -2,6 +2,7 @@ import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; import { authGuard } from "@bitwarden/angular/auth/guards"; +import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard"; import { canAccessOrgAdmin, canAccessGroupsTab, @@ -11,14 +12,15 @@ import { canAccessSettingsTab, } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; -import { integrationPageEnabled } from "../../admin-console/organizations/guards/integrations.guard"; import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard"; import { organizationRedirectGuard } from "../../admin-console/organizations/guards/org-redirect.guard"; import { OrganizationLayoutComponent } from "../../admin-console/organizations/layouts/organization-layout.component"; import { deepLinkGuard } from "../../auth/guards/deep-link.guard"; import { VaultModule } from "../../vault/org-vault/vault.module"; +import { AdminConsoleIntegrationsComponent } from "./integrations/integrations.component"; import { GroupsComponent } from "./manage/groups.component"; const routes: Routes = [ @@ -39,9 +41,11 @@ const routes: Routes = [ }, { path: "integrations", - canActivate: [integrationPageEnabled], - loadChildren: () => - import("./integrations/integrations.module").then((m) => m.IntegrationsModule), + canActivate: [canAccessFeature(FeatureFlag.PM14505AdminConsoleIntegrationPage)], + component: AdminConsoleIntegrationsComponent, + data: { + titleId: "integrations", + }, }, { path: "settings", diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts index 89d2c2a22541..0764d85a5571 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts @@ -12,10 +12,14 @@ import { Observable, Subject, combineLatest, takeUntil } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { SharedModule } from "../../../shared.module"; +import { CommonModule } from "@angular/common"; @Component({ - selector: "integration-card", + selector: "app-integration-card", templateUrl: "./integration-card.component.html", + standalone: true, + imports: [SharedModule, CommonModule], }) export class IntegrationCardComponent implements AfterViewInit, OnDestroy { private destroyed$: Subject = new Subject(); diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html index d4888240c61c..50aabb624a3b 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html @@ -6,7 +6,7 @@ [title]="'integrationCardTooltip' | i18n: integration.name" attr.aria-label="open the {{ integration.name }} implementation guide in a new tab" > - + > diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts index b5a0530a73ce..359115cea345 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts @@ -3,10 +3,15 @@ import { Component, Input } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; import { Integration } from "../models"; +import { IntegrationCardComponent } from "../integration-card/integration-card.component"; +import { SharedModule } from "../../../shared.module"; +import { CommonModule } from "@angular/common"; @Component({ - selector: "integration-grid", + selector: "app-integration-grid", templateUrl: "./integration-grid.component.html", + standalone: true, + imports: [IntegrationCardComponent, SharedModule, CommonModule], }) export class IntegrationGridComponent { @Input() integrations: Integration[]; diff --git a/apps/web/src/app/shared/components/integrations/integrations.module.ts b/apps/web/src/app/shared/components/integrations/integrations.module.ts deleted file mode 100644 index a58fa102c60f..000000000000 --- a/apps/web/src/app/shared/components/integrations/integrations.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CommonModule } from "@angular/common"; -import { NgModule } from "@angular/core"; - -import { LooseComponentsModule } from "../../loose-components.module"; -import { SharedModule } from "../../shared.module"; - -import { IntegrationCardComponent } from "./integration-card/integration-card.component"; -import { IntegrationGridComponent } from "./integration-grid/integration-grid.component"; - -@NgModule({ - imports: [SharedModule, CommonModule, LooseComponentsModule], - declarations: [IntegrationGridComponent, IntegrationCardComponent], - exports: [IntegrationGridComponent, IntegrationCardComponent], -}) -export class SharedIntegrationsModule {} diff --git a/apps/web/src/app/shared/index.ts b/apps/web/src/app/shared/index.ts index 04ddd02e5cbf..7defcdedfda1 100644 --- a/apps/web/src/app/shared/index.ts +++ b/apps/web/src/app/shared/index.ts @@ -1,3 +1,2 @@ export * from "./shared.module"; export * from "./loose-components.module"; -export * from "./components/integrations/integrations.module"; diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts deleted file mode 100644 index 91402113a959..000000000000 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; - -import { IntegrationsComponent } from "./integrations.component"; - -const routes: Routes = [ - { - path: "", - component: IntegrationsComponent, - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class IntegrationsRoutingModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html index bf1fd462bc80..0321057624de 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html @@ -4,7 +4,7 @@

    {{ "integrationsDesc" | i18n }}

    - +
    @@ -12,5 +12,5 @@

    {{ "sdks" | i18n }}

    {{ "sdksDesc" | i18n }}

    - +
    diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts index c3a9a94bc006..7817a7ef9de6 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts @@ -2,11 +2,17 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module"; +import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; import { Integration } from "@bitwarden/web-vault/app/shared/components/integrations/models"; +import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; + @Component({ selector: "sm-integrations", templateUrl: "./integrations.component.html", + standalone: true, + imports: [SecretsManagerSharedModule, IntegrationGridComponent, HeaderModule], }) export class IntegrationsComponent { private integrationsAndSdks: Integration[] = []; diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts deleted file mode 100644 index 0aa39cf96cb9..000000000000 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from "@angular/core"; - -import { SharedIntegrationsModule } from "@bitwarden/web-vault/app/shared/components/integrations/integrations.module"; - -import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; - -import { IntegrationsRoutingModule } from "./integrations-routing.module"; -import { IntegrationsComponent } from "./integrations.component"; - -@NgModule({ - imports: [SecretsManagerSharedModule, IntegrationsRoutingModule, SharedIntegrationsModule], - declarations: [IntegrationsComponent], - providers: [], -}) -export class IntegrationsModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts index bcc4869c8969..03a405dbf483 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts @@ -5,7 +5,7 @@ import { authGuard } from "@bitwarden/angular/auth/guards"; import { organizationEnabledGuard } from "./guards/sm-org-enabled.guard"; import { canActivateSM } from "./guards/sm.guard"; -import { IntegrationsModule } from "./integrations/integrations.module"; +import { IntegrationsComponent } from "./integrations/integrations.component"; import { LayoutComponent } from "./layout/layout.component"; import { NavigationComponent } from "./layout/navigation.component"; import { OverviewModule } from "./overview/overview.module"; @@ -63,7 +63,7 @@ const routes: Routes = [ }, { path: "integrations", - loadChildren: () => IntegrationsModule, + component: IntegrationsComponent, data: { titleId: "integrations", }, From d08fcf4b1fe55158db3a9bc2e54f7002f62f868a Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 13 Nov 2024 13:45:07 -0500 Subject: [PATCH 08/18] refactor modules and imports. Remove hyperlink text from integration card template --- .../integrations/integrations.component.html | 2 +- .../integrations/integrations.component.ts | 4 ++-- .../integration-card.component.html | 1 - .../integration-card.component.ts | 5 ++--- .../integration-grid.component.html | 1 - .../integration-grid.component.ts | 7 +++---- .../app/shared/components/integrations/models.ts | 1 - apps/web/src/locales/en/messages.json | 15 ++++++++------- .../integrations/integrations.component.spec.ts | 5 +++-- .../integrations/integrations.component.ts | 13 ------------- 10 files changed, 19 insertions(+), 35 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html index f536be8510b0..61e7996becd0 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.html @@ -6,7 +6,7 @@

    {{ "singleSignOn" | i18n }}

    {{ "ssoDescStart" | i18n }} - {{ "ssoDescAnchor" | i18n }} + {{ "singleSignOn" | i18n }} {{ "ssoDescEnd" | i18n }}

    {{ name }} rel="noopener noreferrer" target="_blank" > - {{ linkText }} {{ "new" | i18n }} diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts index 0764d85a5571..a33fbd28c961 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts @@ -12,14 +12,14 @@ import { Observable, Subject, combineLatest, takeUntil } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; + import { SharedModule } from "../../../shared.module"; -import { CommonModule } from "@angular/common"; @Component({ selector: "app-integration-card", templateUrl: "./integration-card.component.html", standalone: true, - imports: [SharedModule, CommonModule], + imports: [SharedModule], }) export class IntegrationCardComponent implements AfterViewInit, OnDestroy { private destroyed$: Subject = new Subject(); @@ -28,7 +28,6 @@ export class IntegrationCardComponent implements AfterViewInit, OnDestroy { @Input() name: string; @Input() image: string; @Input() imageDarkMode?: string; - @Input() linkText: string; @Input() linkURL: string; /** Adds relevant `rel` attribute to external links */ diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html index 50aabb624a3b..9fe91930ee6a 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html @@ -8,7 +8,6 @@ > Date: Wed, 13 Nov 2024 15:50:30 -0500 Subject: [PATCH 09/18] refactor i18n usage to be more generic --- .../integration-grid.component.html | 4 +- .../integration-grid.component.spec.ts | 3 -- .../integration-grid.component.ts | 3 ++ apps/web/src/locales/en/messages.json | 54 +++++++++++++++++-- .../integrations/integrations.component.html | 12 ++++- .../integrations/integrations.component.ts | 2 +- 6 files changed, 66 insertions(+), 12 deletions(-) diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html index 9fe91930ee6a..4b4b3ac972b7 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html @@ -3,8 +3,8 @@ >
  • { { name: "Integration 1", image: "test-image1.png", - linkText: "Get started with integration 1", linkURL: "https://example.com/1", type: IntegrationType.Integration, }, { name: "SDK 2", image: "test-image2.png", - linkText: "View SDK 2", linkURL: "https://example.com/2", type: IntegrationType.SDK, }, @@ -79,7 +77,6 @@ describe("IntegrationGridComponent", () => { expect(card.componentInstance.name).toBe("SDK 2"); expect(card.componentInstance.image).toBe("test-image2.png"); - expect(card.componentInstance.linkText).toBe("View SDK 2"); expect(card.componentInstance.linkURL).toBe("https://example.com/2"); }); diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts index 604d2679e4c4..7660162f879e 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts @@ -15,5 +15,8 @@ import { Integration } from "../models"; export class IntegrationGridComponent { @Input() integrations: Integration[]; + @Input() ariaI18nKey: string = "integrationCardAriaLabel"; + @Input() tooltipI18nKey: string = "integrationCardTooltip"; + protected IntegrationType = IntegrationType; } diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 26439e65d8e2..9cc55688b6c0 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8875,11 +8875,11 @@ }, "ssoDescStart": { "message": "Configure", - "description": "This represents the beggining of a sentence. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." + "description": "This represents the beggining of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." }, "ssoDescEnd": { "message": "for Bitwarden using the implementation guide for your Identity Provider.", - "description": "This represents the end of a sentence. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." + "description": "This represents the end of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." }, "userProvisioning":{ "message": "User provisioning" @@ -8889,11 +8889,11 @@ }, "scimIntegrationDescStart": { "message": "Configure ", - "description": "This represents the beggining of a sentence. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" + "description": "This represents the beggining of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" }, "scimIntegrationDescEnd": { "message": "(System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider.", - "description": "This represents the end of a sentence. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" + "description": "This represents the end of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" }, "bwdc":{ "message": "Bitwarden Directory Connector" @@ -8912,6 +8912,7 @@ }, "deviceManagementDesc":{ "message": "Configure device management for Bitwarden using the implementation guide for your platform." + }, "integrationCardTooltip":{ "message": "Launch $INTEGRATION$ implementation guide.", @@ -8922,6 +8923,51 @@ } } }, + "smIntegrationTooltip":{ + "message": "Set up $INTEGRATION$.", + "placeholders": { + "integration": { + "content": "$1", + "example": "Google" + } + } + }, + "smSdkTooltip":{ + "message": "View $SDK$ repository", + "placeholders": { + "sdk": { + "content": "$1", + "example": "Rust" + } + } + }, + "integrationCardAriaLabel":{ + "message": "open $INTEGRATION$ implementation guide in a new tab.", + "placeholders": { + "integration": { + "content": "$1", + "example": "google" + } + } + }, + "smSdkAriaLabel":{ + "message": "view $SDK$ repository in a new tab.", + "placeholders": { + "sdk": { + "content": "$1", + "example": "rust" + } + } + }, + "smIntegrationCardAriaLabel":{ + "message": "set up $INTEGRATION$ implementation guide in a new tab.", + "placeholders": { + "integration": { + "content": "$1", + "example": "google" + } + } + }, "setUpGithubActions": { "message": "Set up Github Actions" }, diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html index 0321057624de..db3db75897d4 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.html @@ -4,7 +4,11 @@

    {{ "integrationsDesc" | i18n }}

    - +
    @@ -12,5 +16,9 @@

    {{ "sdks" | i18n }}

    {{ "sdksDesc" | i18n }}

    - +
    diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts index 7322e1464ce5..4e1da5c10fe8 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts @@ -17,7 +17,7 @@ import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; export class IntegrationsComponent { private integrationsAndSdks: Integration[] = []; - constructor(i18nService: I18nService) { + constructor(private i18nService: I18nService) { this.integrationsAndSdks = [ { name: "Rust", From 00d27509806ab1d28ef9f05c6d0c9be5265ed66c Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 13 Nov 2024 20:35:25 -0500 Subject: [PATCH 10/18] Add storybooks --- .../integration-card.stories.ts | 61 ++++++++++++++ .../integration-grid.stories.ts | 80 +++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts create mode 100644 apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts new file mode 100644 index 000000000000..80e179065cd4 --- /dev/null +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts @@ -0,0 +1,61 @@ +import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; + +import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { I18nMockService } from "@bitwarden/components"; + +import { SharedModule } from "../../../shared.module"; + +import { IntegrationCardComponent } from "./integration-card.component"; + +class MockThemeService implements Partial {} + +export default { + title: "Web/Integration Card", + component: IntegrationCardComponent, + decorators: [ + moduleMetadata({ + imports: [SharedModule], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService({}); + }, + }, + { + provide: ThemeStateService, + useClass: MockThemeService, + }, + { + provide: SYSTEM_THEME_OBSERVABLE, + useValue: null, + }, + ], + }), + ], + args: { + integrations: [], + }, +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + props: args, + template: /*html*/ ` + + `, + }), + args: { + name: "test", + image: "", + linkURL: "", + }, +}; diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts new file mode 100644 index 000000000000..31829e02a18f --- /dev/null +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts @@ -0,0 +1,80 @@ +import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; +import { Observable } from "rxjs"; + +import { + SYSTEM_THEME_OBSERVABLE, + SafeInjectionToken, +} from "@bitwarden/angular/services/injection-tokens"; +import { IntegrationType } from "@bitwarden/common/enums"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { Theme } from "@bitwarden/common/platform/enums"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { I18nMockService } from "@bitwarden/components"; + +import { SharedModule } from "../../../shared.module"; +import { IntegrationCardComponent } from "../integration-card/integration-card.component"; +import { IntegrationGridComponent } from "../integration-grid/integration-grid.component"; + +class MockThemeService implements Partial {} + +export default { + title: "Web/Integration Grid", + component: IntegrationGridComponent, + decorators: [ + moduleMetadata({ + imports: [IntegrationCardComponent, SharedModule], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService({ + integrationCardAriaLabel: "Go to integration", + integrationCardTooltip: "Go to integration", + }); + }, + }, + { + provide: ThemeStateService, + useClass: MockThemeService, + }, + { + provide: SYSTEM_THEME_OBSERVABLE, + useValue: new SafeInjectionToken>("SYSTEM_THEME_OBSERVABLE"), + }, + ], + }), + ], +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + props: args, + template: /*html*/ ` + + `, + }), + args: { + integrations: [ + { + name: "Card 1", + linkURL: "", + image: "", + type: IntegrationType.SSO, + }, + { + name: "Card 2", + linkURL: "", + image: "", + type: IntegrationType.SDK, + }, + { + name: "Card 3", + linkURL: "", + image: "", + type: IntegrationType.SCIM, + }, + ], + }, +}; From bd17d12b08a319fecd26158e606fb42c3c801075 Mon Sep 17 00:00:00 2001 From: Brandon Date: Thu, 14 Nov 2024 17:11:03 -0500 Subject: [PATCH 11/18] fix tests --- .../integration-card.component.spec.ts | 7 +++---- .../integration-card.stories.ts | 4 +++- .../integration-grid.component.spec.ts | 13 ++++++++++-- .../integration-grid.stories.ts | 11 ++++------ .../integrations-routing.module.ts | 17 ++++++++++++++++ .../integrations.component.spec.ts | 14 ++++--------- .../integrations/integrations.component.ts | 9 +-------- .../integrations/integrations.module.ts | 20 +++++++++++++++++++ .../app/secrets-manager/sm-routing.module.ts | 4 ++-- 9 files changed, 65 insertions(+), 34 deletions(-) create mode 100644 bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts create mode 100644 bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts index 04cb414c423d..c8b6a290427d 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts @@ -6,9 +6,11 @@ import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-t import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ThemeType } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { SharedModule } from "@bitwarden/components/src/shared"; import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; import { IntegrationCardComponent } from "./integration-card.component"; + describe("IntegrationCardComponent", () => { let component: IntegrationCardComponent; let fixture: ComponentFixture; @@ -21,7 +23,7 @@ describe("IntegrationCardComponent", () => { systemTheme$.next(ThemeType.Light); await TestBed.configureTestingModule({ - declarations: [IntegrationCardComponent, I18nPipe], + imports: [IntegrationCardComponent, SharedModule], providers: [ { provide: ThemeStateService, @@ -49,7 +51,6 @@ describe("IntegrationCardComponent", () => { component.name = "Integration Name"; component.image = "test-image.png"; - component.linkText = "Get started with integration"; component.linkURL = "https://example.com/"; fixture.detectChanges(); @@ -63,10 +64,8 @@ describe("IntegrationCardComponent", () => { it("renders card body", () => { const name = fixture.nativeElement.querySelector("h3"); - const link = fixture.nativeElement.querySelector("a"); expect(name.textContent).toBe("Integration Name"); - expect(link.textContent.trim()).toBe("Get started with integration"); }); it("assigns external rel attribute", () => { diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts index 80e179065cd4..763b3e33deed 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts @@ -1,7 +1,9 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; +import { of } from "rxjs"; import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { ThemeTypes } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { I18nMockService } from "@bitwarden/components"; @@ -30,7 +32,7 @@ export default { }, { provide: SYSTEM_THEME_OBSERVABLE, - useValue: null, + useValue: of(ThemeTypes.Light), }, ], }), diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts index e5e88703d3e5..8c8a0e82171c 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts @@ -8,6 +8,7 @@ import { IntegrationType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ThemeTypes } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; +import { SharedModule } from "@bitwarden/components/src/shared"; import { I18nPipe } from "@bitwarden/components/src/shared/i18n.pipe"; import { IntegrationCardComponent } from "../integration-card/integration-card.component"; @@ -35,7 +36,7 @@ describe("IntegrationGridComponent", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [IntegrationGridComponent, IntegrationCardComponent, I18nPipe], + imports: [IntegrationGridComponent, IntegrationCardComponent, SharedModule], providers: [ { provide: ThemeStateService, @@ -51,7 +52,7 @@ describe("IntegrationGridComponent", () => { }, { provide: I18nService, - useValue: mock(), + useValue: mock({ t: (key) => key }), }, ], }); @@ -59,6 +60,8 @@ describe("IntegrationGridComponent", () => { fixture = TestBed.createComponent(IntegrationGridComponent); component = fixture.componentInstance; component.integrations = integrations; + component.ariaI18nKey = "integrationCardAriaLabel"; + component.tooltipI18nKey = "integrationCardTooltip"; fixture.detectChanges(); }); @@ -86,4 +89,10 @@ describe("IntegrationGridComponent", () => { expect(card[0].componentInstance.externalURL).toBe(false); expect(card[1].componentInstance.externalURL).toBe(true); }); + + it("has a tool tip and aria label attributes", () => { + const card: HTMLElement = fixture.debugElement.queryAll(By.css("li"))[0].nativeElement; + expect(card.title).toBe("integrationCardTooltip"); + expect(card.getAttribute("aria-label")).toBe("integrationCardAriaLabel"); + }); }); diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts index 31829e02a18f..c794e43c716c 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts @@ -1,13 +1,10 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; -import { Observable } from "rxjs"; +import { of } from "rxjs"; -import { - SYSTEM_THEME_OBSERVABLE, - SafeInjectionToken, -} from "@bitwarden/angular/services/injection-tokens"; +import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens"; import { IntegrationType } from "@bitwarden/common/enums"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { Theme } from "@bitwarden/common/platform/enums"; +import { ThemeTypes } from "@bitwarden/common/platform/enums"; import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { I18nMockService } from "@bitwarden/components"; @@ -39,7 +36,7 @@ export default { }, { provide: SYSTEM_THEME_OBSERVABLE, - useValue: new SafeInjectionToken>("SYSTEM_THEME_OBSERVABLE"), + useValue: of(ThemeTypes.Light), }, ], }), diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts new file mode 100644 index 000000000000..91402113a959 --- /dev/null +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { IntegrationsComponent } from "./integrations.component"; + +const routes: Routes = [ + { + path: "", + component: IntegrationsComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class IntegrationsRoutingModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts index 233116b004e0..f57e137b0a98 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts @@ -4,6 +4,7 @@ import { By } from "@angular/platform-browser"; import { mock } from "jest-mock-extended"; import { of } from "rxjs"; +import { SharedModule } from "@bitwarden/components/src/shared"; import { IntegrationCardComponent } from "@bitwarden/web-vault/src/app/shared/components/integrations/integration-card/integration-card.component"; import { IntegrationGridComponent } from "@bitwarden/web-vault/src/app/shared/components/integrations/integration-grid/integration-grid.component"; @@ -11,7 +12,6 @@ import { SYSTEM_THEME_OBSERVABLE } from "../../../../../../libs/angular/src/serv import { I18nService } from "../../../../../../libs/common/src/platform/abstractions/i18n.service"; import { ThemeType } from "../../../../../../libs/common/src/platform/enums"; import { ThemeStateService } from "../../../../../../libs/common/src/platform/theming/theme-state.service"; -import { I18nPipe } from "../../../../../../libs/components/src/shared/i18n.pipe"; import { IntegrationsComponent } from "./integrations.component"; @@ -32,18 +32,12 @@ describe("IntegrationsComponent", () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - IntegrationsComponent, - IntegrationGridComponent, - IntegrationCardComponent, - MockHeaderComponent, - MockNewMenuComponent, - I18nPipe, - ], + declarations: [IntegrationsComponent, MockHeaderComponent, MockNewMenuComponent], + imports: [IntegrationGridComponent, IntegrationCardComponent, SharedModule], providers: [ { provide: I18nService, - useValue: mock({ t: (key) => key }), + useValue: mock(), }, { provide: ThemeStateService, diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts index 4e1da5c10fe8..2f06ec0a6406 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts @@ -1,23 +1,16 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module"; -import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; import { Integration } from "@bitwarden/web-vault/app/shared/components/integrations/models"; -import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; - @Component({ selector: "sm-integrations", templateUrl: "./integrations.component.html", - standalone: true, - imports: [SecretsManagerSharedModule, IntegrationGridComponent, HeaderModule], }) export class IntegrationsComponent { private integrationsAndSdks: Integration[] = []; - constructor(private i18nService: I18nService) { + constructor() { this.integrationsAndSdks = [ { name: "Rust", diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts new file mode 100644 index 000000000000..5ba82c6e11a0 --- /dev/null +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from "@angular/core"; + +import { IntegrationCardComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-card/integration-card.component"; +import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; + +import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; + +import { IntegrationsRoutingModule } from "./integrations-routing.module"; +import { IntegrationsComponent } from "./integrations.component"; + +@NgModule({ + imports: [ + SecretsManagerSharedModule, + IntegrationsRoutingModule, + IntegrationGridComponent, + IntegrationCardComponent, + ], + declarations: [IntegrationsComponent], +}) +export class IntegrationsModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts index 03a405dbf483..bcc4869c8969 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/sm-routing.module.ts @@ -5,7 +5,7 @@ import { authGuard } from "@bitwarden/angular/auth/guards"; import { organizationEnabledGuard } from "./guards/sm-org-enabled.guard"; import { canActivateSM } from "./guards/sm.guard"; -import { IntegrationsComponent } from "./integrations/integrations.component"; +import { IntegrationsModule } from "./integrations/integrations.module"; import { LayoutComponent } from "./layout/layout.component"; import { NavigationComponent } from "./layout/navigation.component"; import { OverviewModule } from "./overview/overview.module"; @@ -63,7 +63,7 @@ const routes: Routes = [ }, { path: "integrations", - component: IntegrationsComponent, + loadChildren: () => IntegrationsModule, data: { titleId: "integrations", }, From 08e84850a577a7fa5fa94641ec925f031071f905 Mon Sep 17 00:00:00 2001 From: Brandon Date: Fri, 15 Nov 2024 12:38:27 -0500 Subject: [PATCH 12/18] minify svgs, include spec files in TS config, fix stories --- .../integrations/integrations.component.ts | 3 +- .../integration-card.component.html | 2 +- .../integration-card.stories.ts | 9 +- .../integration-grid.component.spec.ts | 8 +- .../integration-grid.stories.ts | 19 ++- .../integrations/integrations.pipe.ts | 0 .../integrations/authenticator-icon-solid.svg | 8 - .../web/src/images/integrations/aws-color.svg | 6 +- .../src/images/integrations/aws-darkmode.svg | 13 +- .../integrations/azure-active-directory.svg | 2 +- apps/web/src/images/integrations/github.svg | 3 - .../integrations/logo-addy-icon-color.svg | 22 --- .../images/integrations/logo-ansible-icon.svg | 4 - .../integrations/logo-apache-ds-no-shadow.svg | 148 ------------------ .../images/integrations/logo-apple-color.svg | 3 - .../integrations/logo-auth0-badge-color.svg | 4 +- .../integrations/logo-authy-circle-red.svg | 11 -- .../integrations/logo-duckduckgo-color.svg | 21 --- .../images/integrations/logo-duo-color.svg | 16 +- .../integrations/logo-elastic-badge-color.svg | 10 +- .../integrations/logo-fastmail-icon.svg | 13 -- .../integrations/logo-fedora-badge-color.svg | 10 -- .../integrations/logo-fido-alliance-color.svg | 11 -- .../integrations/logo-firefox-relay-icon.svg | 10 -- .../integrations/logo-forwardemail-icon.svg | 106 ------------- .../images/integrations/logo-gitlab-icon.svg | 6 - .../integrations/logo-google-badge-color.svg | 7 +- .../logo-jumpcloud-badge-color.svg | 4 +- .../integrations/logo-kubernetes-icon.svg | 4 - .../integrations/logo-microsoft-color.svg | 6 - .../logo-microsoft-entra-id-color.svg | 9 +- .../logo-microsoft-intune-color.svg | 12 +- .../logo-microsoft-sentinel-color.svg | 22 +-- .../integrations/logo-novell-icon-red.svg | 4 - .../integrations/logo-okta-symbol-black.svg | 11 +- .../logo-onelogin-badge-color.svg | 12 +- .../src/images/integrations/logo-open-ds.svg | 8 - .../logo-openldap-badge-color.svg | 93 ----------- .../integrations/logo-oracle-badge-color.svg | 10 -- .../integrations/logo-panther-round-color.svg | 5 +- .../src/images/integrations/logo-passkeys.svg | 14 -- .../logo-ping-identity-badge-color.svg | 12 +- .../images/integrations/logo-rapid7-black.svg | 9 +- .../integrations/logo-rippling-round.svg | 11 -- .../integrations/logo-simplelogin-icon.svg | 19 --- .../images/integrations/logo-splunk-black.svg | 4 +- .../src/images/integrations/logo-yubikey.svg | 16 -- apps/web/src/locales/en/messages.json | 43 +---- .../integrations.component.spec.ts | 4 +- bitwarden_license/bit-web/tsconfig.json | 3 +- 50 files changed, 46 insertions(+), 764 deletions(-) rename apps/web/src/app/{admin-console/organizations => shared/components}/integrations/integrations.pipe.ts (100%) delete mode 100644 apps/web/src/images/integrations/authenticator-icon-solid.svg delete mode 100644 apps/web/src/images/integrations/github.svg delete mode 100644 apps/web/src/images/integrations/logo-addy-icon-color.svg delete mode 100644 apps/web/src/images/integrations/logo-ansible-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg delete mode 100644 apps/web/src/images/integrations/logo-apple-color.svg delete mode 100644 apps/web/src/images/integrations/logo-authy-circle-red.svg delete mode 100644 apps/web/src/images/integrations/logo-duckduckgo-color.svg delete mode 100644 apps/web/src/images/integrations/logo-fastmail-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-fedora-badge-color.svg delete mode 100644 apps/web/src/images/integrations/logo-fido-alliance-color.svg delete mode 100644 apps/web/src/images/integrations/logo-firefox-relay-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-forwardemail-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-gitlab-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-kubernetes-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-microsoft-color.svg delete mode 100644 apps/web/src/images/integrations/logo-novell-icon-red.svg delete mode 100644 apps/web/src/images/integrations/logo-open-ds.svg delete mode 100644 apps/web/src/images/integrations/logo-openldap-badge-color.svg delete mode 100644 apps/web/src/images/integrations/logo-oracle-badge-color.svg delete mode 100644 apps/web/src/images/integrations/logo-passkeys.svg delete mode 100644 apps/web/src/images/integrations/logo-rippling-round.svg delete mode 100644 apps/web/src/images/integrations/logo-simplelogin-icon.svg delete mode 100644 apps/web/src/images/integrations/logo-yubikey.svg diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index af18da7d655c..4115d2e7d5ad 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -4,12 +4,11 @@ import { IntegrationType } from "@bitwarden/common/enums"; import { HeaderModule } from "../../../layouts/header/header.module"; import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component"; +import { FilterIntegrationsPipe } from "../../../shared/components/integrations/integrations.pipe"; import { Integration } from "../../../shared/components/integrations/models"; import { SharedModule } from "../../../shared/shared.module"; import { SharedOrganizationModule } from "../shared"; -import { FilterIntegrationsPipe } from "./integrations.pipe"; - @Component({ selector: "ac-integrations", templateUrl: "./integrations.component.html", diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html index 43702a0fa195..7e4848db3b6e 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html @@ -17,7 +17,7 @@
    • -

    {{ name }}

    +

    {{ name }}

    {} export default { - title: "Web/Integration Card", + title: "Web/Integration Layout/Integration Card", component: IntegrationCardComponent, decorators: [ moduleMetadata({ @@ -56,8 +56,9 @@ export const Default: Story = { `, }), args: { - name: "test", - image: "", - linkURL: "", + name: "Bitwarden", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", + linkURL: "https://bitwarden.com", }, }; diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts index 8c8a0e82171c..c77ec455e000 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.spec.ts @@ -52,7 +52,7 @@ describe("IntegrationGridComponent", () => { }, { provide: I18nService, - useValue: mock({ t: (key) => key }), + useValue: mock({ t: (key, p1) => key + " " + p1 }), }, ], }); @@ -92,7 +92,9 @@ describe("IntegrationGridComponent", () => { it("has a tool tip and aria label attributes", () => { const card: HTMLElement = fixture.debugElement.queryAll(By.css("li"))[0].nativeElement; - expect(card.title).toBe("integrationCardTooltip"); - expect(card.getAttribute("aria-label")).toBe("integrationCardAriaLabel"); + expect(card.title).toBe("integrationCardTooltip" + " " + integrations[0].name); + expect(card.getAttribute("aria-label")).toBe( + "integrationCardAriaLabel" + " " + integrations[0].name, + ); }); }); diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts index c794e43c716c..a5b0ec4cc13b 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts @@ -15,7 +15,7 @@ import { IntegrationGridComponent } from "../integration-grid/integration-grid.c class MockThemeService implements Partial {} export default { - title: "Web/Integration Grid", + title: "Web/Integration Layout/Integration Grid", component: IntegrationGridComponent, decorators: [ moduleMetadata({ @@ -36,7 +36,7 @@ export default { }, { provide: SYSTEM_THEME_OBSERVABLE, - useValue: of(ThemeTypes.Light), + useValue: of(ThemeTypes.Dark), }, ], }), @@ -56,20 +56,23 @@ export const Default: Story = { integrations: [ { name: "Card 1", - linkURL: "", - image: "", + linkURL: "https://bitwarden.com", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", type: IntegrationType.SSO, }, { name: "Card 2", - linkURL: "", - image: "", + linkURL: "https://bitwarden.com", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", type: IntegrationType.SDK, }, { name: "Card 3", - linkURL: "", - image: "", + linkURL: "https://bitwarden.com", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", type: IntegrationType.SCIM, }, ], diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts b/apps/web/src/app/shared/components/integrations/integrations.pipe.ts similarity index 100% rename from apps/web/src/app/admin-console/organizations/integrations/integrations.pipe.ts rename to apps/web/src/app/shared/components/integrations/integrations.pipe.ts diff --git a/apps/web/src/images/integrations/authenticator-icon-solid.svg b/apps/web/src/images/integrations/authenticator-icon-solid.svg deleted file mode 100644 index 3e65427a20ea..000000000000 --- a/apps/web/src/images/integrations/authenticator-icon-solid.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/apps/web/src/images/integrations/aws-color.svg b/apps/web/src/images/integrations/aws-color.svg index 10ebd83b7452..963b65027db7 100644 --- a/apps/web/src/images/integrations/aws-color.svg +++ b/apps/web/src/images/integrations/aws-color.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/aws-darkmode.svg b/apps/web/src/images/integrations/aws-darkmode.svg index 5f9c4bcbf1e1..64c9ba3cf94d 100644 --- a/apps/web/src/images/integrations/aws-darkmode.svg +++ b/apps/web/src/images/integrations/aws-darkmode.svg @@ -1,12 +1 @@ - - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/azure-active-directory.svg b/apps/web/src/images/integrations/azure-active-directory.svg index 82ac48348c64..22ea64f1f035 100644 --- a/apps/web/src/images/integrations/azure-active-directory.svg +++ b/apps/web/src/images/integrations/azure-active-directory.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/apps/web/src/images/integrations/github.svg b/apps/web/src/images/integrations/github.svg deleted file mode 100644 index c05f2f62a006..000000000000 --- a/apps/web/src/images/integrations/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/web/src/images/integrations/logo-addy-icon-color.svg b/apps/web/src/images/integrations/logo-addy-icon-color.svg deleted file mode 100644 index ac2e1395a58f..000000000000 --- a/apps/web/src/images/integrations/logo-addy-icon-color.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-ansible-icon.svg b/apps/web/src/images/integrations/logo-ansible-icon.svg deleted file mode 100644 index a75bd045c58b..000000000000 --- a/apps/web/src/images/integrations/logo-ansible-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg b/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg deleted file mode 100644 index 71f7a1722e5e..000000000000 --- a/apps/web/src/images/integrations/logo-apache-ds-no-shadow.svg +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-apple-color.svg b/apps/web/src/images/integrations/logo-apple-color.svg deleted file mode 100644 index 0afc77cbd5f9..000000000000 --- a/apps/web/src/images/integrations/logo-apple-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/web/src/images/integrations/logo-auth0-badge-color.svg b/apps/web/src/images/integrations/logo-auth0-badge-color.svg index 39d682db5eb0..24887cc75107 100644 --- a/apps/web/src/images/integrations/logo-auth0-badge-color.svg +++ b/apps/web/src/images/integrations/logo-auth0-badge-color.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-authy-circle-red.svg b/apps/web/src/images/integrations/logo-authy-circle-red.svg deleted file mode 100644 index f5abe204f428..000000000000 --- a/apps/web/src/images/integrations/logo-authy-circle-red.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-duckduckgo-color.svg b/apps/web/src/images/integrations/logo-duckduckgo-color.svg deleted file mode 100644 index e98ca1f72f7e..000000000000 --- a/apps/web/src/images/integrations/logo-duckduckgo-color.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-duo-color.svg b/apps/web/src/images/integrations/logo-duo-color.svg index 77ed634b294f..0959a2157083 100644 --- a/apps/web/src/images/integrations/logo-duo-color.svg +++ b/apps/web/src/images/integrations/logo-duo-color.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-elastic-badge-color.svg b/apps/web/src/images/integrations/logo-elastic-badge-color.svg index 01cf69072225..f6e00f3d40d5 100644 --- a/apps/web/src/images/integrations/logo-elastic-badge-color.svg +++ b/apps/web/src/images/integrations/logo-elastic-badge-color.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-fastmail-icon.svg b/apps/web/src/images/integrations/logo-fastmail-icon.svg deleted file mode 100644 index a8bcf2cf5cfd..000000000000 --- a/apps/web/src/images/integrations/logo-fastmail-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-fedora-badge-color.svg b/apps/web/src/images/integrations/logo-fedora-badge-color.svg deleted file mode 100644 index bbbbfc6230c1..000000000000 --- a/apps/web/src/images/integrations/logo-fedora-badge-color.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-fido-alliance-color.svg b/apps/web/src/images/integrations/logo-fido-alliance-color.svg deleted file mode 100644 index 05fda02c9d69..000000000000 --- a/apps/web/src/images/integrations/logo-fido-alliance-color.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-firefox-relay-icon.svg b/apps/web/src/images/integrations/logo-firefox-relay-icon.svg deleted file mode 100644 index a96e73d429a0..000000000000 --- a/apps/web/src/images/integrations/logo-firefox-relay-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-forwardemail-icon.svg b/apps/web/src/images/integrations/logo-forwardemail-icon.svg deleted file mode 100644 index c6003a2a69b1..000000000000 --- a/apps/web/src/images/integrations/logo-forwardemail-icon.svg +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-gitlab-icon.svg b/apps/web/src/images/integrations/logo-gitlab-icon.svg deleted file mode 100644 index e5b19134c237..000000000000 --- a/apps/web/src/images/integrations/logo-gitlab-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/apps/web/src/images/integrations/logo-google-badge-color.svg b/apps/web/src/images/integrations/logo-google-badge-color.svg index e3d3b56ca23b..c5a8fe50363b 100644 --- a/apps/web/src/images/integrations/logo-google-badge-color.svg +++ b/apps/web/src/images/integrations/logo-google-badge-color.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg b/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg index e3222b74fbe0..9349186d8a14 100644 --- a/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg +++ b/apps/web/src/images/integrations/logo-jumpcloud-badge-color.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-kubernetes-icon.svg b/apps/web/src/images/integrations/logo-kubernetes-icon.svg deleted file mode 100644 index 95714efc8e6e..000000000000 --- a/apps/web/src/images/integrations/logo-kubernetes-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/apps/web/src/images/integrations/logo-microsoft-color.svg b/apps/web/src/images/integrations/logo-microsoft-color.svg deleted file mode 100644 index 997a7b3451b2..000000000000 --- a/apps/web/src/images/integrations/logo-microsoft-color.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg b/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg index b58a07a8d9ca..a6150c29c627 100644 --- a/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg +++ b/apps/web/src/images/integrations/logo-microsoft-entra-id-color.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-microsoft-intune-color.svg b/apps/web/src/images/integrations/logo-microsoft-intune-color.svg index a27f6ef2532f..2611cf4b3b8d 100644 --- a/apps/web/src/images/integrations/logo-microsoft-intune-color.svg +++ b/apps/web/src/images/integrations/logo-microsoft-intune-color.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg b/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg index 51b40d2be0ae..93135526c6fd 100644 --- a/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg +++ b/apps/web/src/images/integrations/logo-microsoft-sentinel-color.svg @@ -1,21 +1 @@ - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-novell-icon-red.svg b/apps/web/src/images/integrations/logo-novell-icon-red.svg deleted file mode 100644 index ba9a9e112c72..000000000000 --- a/apps/web/src/images/integrations/logo-novell-icon-red.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/apps/web/src/images/integrations/logo-okta-symbol-black.svg b/apps/web/src/images/integrations/logo-okta-symbol-black.svg index f5bf2ae8d96a..876727ad56d1 100644 --- a/apps/web/src/images/integrations/logo-okta-symbol-black.svg +++ b/apps/web/src/images/integrations/logo-okta-symbol-black.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-onelogin-badge-color.svg b/apps/web/src/images/integrations/logo-onelogin-badge-color.svg index 9c9b3567802b..e2d9ccbc0c1c 100644 --- a/apps/web/src/images/integrations/logo-onelogin-badge-color.svg +++ b/apps/web/src/images/integrations/logo-onelogin-badge-color.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-open-ds.svg b/apps/web/src/images/integrations/logo-open-ds.svg deleted file mode 100644 index 36b61bc96dc4..000000000000 --- a/apps/web/src/images/integrations/logo-open-ds.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-openldap-badge-color.svg b/apps/web/src/images/integrations/logo-openldap-badge-color.svg deleted file mode 100644 index 24ce3292e282..000000000000 --- a/apps/web/src/images/integrations/logo-openldap-badge-color.svg +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-oracle-badge-color.svg b/apps/web/src/images/integrations/logo-oracle-badge-color.svg deleted file mode 100644 index 718a2187d2a4..000000000000 --- a/apps/web/src/images/integrations/logo-oracle-badge-color.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-panther-round-color.svg b/apps/web/src/images/integrations/logo-panther-round-color.svg index 9608197da369..bed055076815 100644 --- a/apps/web/src/images/integrations/logo-panther-round-color.svg +++ b/apps/web/src/images/integrations/logo-panther-round-color.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-passkeys.svg b/apps/web/src/images/integrations/logo-passkeys.svg deleted file mode 100644 index b4e351a4c994..000000000000 --- a/apps/web/src/images/integrations/logo-passkeys.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg b/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg index 284a1f833cc0..e34762c249c0 100644 --- a/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg +++ b/apps/web/src/images/integrations/logo-ping-identity-badge-color.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-rapid7-black.svg b/apps/web/src/images/integrations/logo-rapid7-black.svg index be2948aed1e2..e2bb7a6f4a85 100644 --- a/apps/web/src/images/integrations/logo-rapid7-black.svg +++ b/apps/web/src/images/integrations/logo-rapid7-black.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-rippling-round.svg b/apps/web/src/images/integrations/logo-rippling-round.svg deleted file mode 100644 index 8d6178be6f11..000000000000 --- a/apps/web/src/images/integrations/logo-rippling-round.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-simplelogin-icon.svg b/apps/web/src/images/integrations/logo-simplelogin-icon.svg deleted file mode 100644 index 9750e20cdc71..000000000000 --- a/apps/web/src/images/integrations/logo-simplelogin-icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/apps/web/src/images/integrations/logo-splunk-black.svg b/apps/web/src/images/integrations/logo-splunk-black.svg index 9d0de6d7cc3d..d25247bfca82 100644 --- a/apps/web/src/images/integrations/logo-splunk-black.svg +++ b/apps/web/src/images/integrations/logo-splunk-black.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/apps/web/src/images/integrations/logo-yubikey.svg b/apps/web/src/images/integrations/logo-yubikey.svg deleted file mode 100644 index 443c6305e972..000000000000 --- a/apps/web/src/images/integrations/logo-yubikey.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 14725d9f52e7..d2a1d055a583 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8930,7 +8930,7 @@ }, "ssoDescStart": { "message": "Configure", - "description": "This represents the beggining of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." + "description": "This represents the begining of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." }, "ssoDescEnd": { "message": "for Bitwarden using the implementation guide for your Identity Provider.", @@ -8944,7 +8944,7 @@ }, "scimIntegrationDescStart": { "message": "Configure ", - "description": "This represents the beggining of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" + "description": "This represents the begining of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" }, "scimIntegrationDescEnd": { "message": "(System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider.", @@ -9023,45 +9023,6 @@ } } }, - "setUpGithubActions": { - "message": "Set up Github Actions" - }, - "setUpKubernetes": { - "message": "Set up Kubernetes" - }, - "setUpGitlabCICD": { - "message": "Set up GitLab CI/CD" - }, - "setUpAnsible": { - "message": "Set up Ansible" - }, - "rustSDKRepo": { - "message": "View Rust repository" - }, - "cSharpSDKRepo": { - "message": "View C# repository" - }, - "cPlusPlusSDKRepo": { - "message": "View C++ repository" - }, - "jsWebAssemblySDKRepo": { - "message": "View JS WebAssembly repository" - }, - "javaSDKRepo": { - "message": "View Java repository" - }, - "pythonSDKRepo": { - "message": "View Python repository" - }, - "phpSDKRepo": { - "message": "View php repository" - }, - "rubySDKRepo": { - "message": "View Ruby repository" - }, - "goSDKRepo": { - "message": "View Go repository" - }, "createNewClientToManageAsProvider": { "message": "Create a new client organization to manage as a Provider. Additional seats will be reflected in the next billing cycle." }, diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts index f57e137b0a98..968b92065204 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts @@ -5,8 +5,8 @@ import { mock } from "jest-mock-extended"; import { of } from "rxjs"; import { SharedModule } from "@bitwarden/components/src/shared"; -import { IntegrationCardComponent } from "@bitwarden/web-vault/src/app/shared/components/integrations/integration-card/integration-card.component"; -import { IntegrationGridComponent } from "@bitwarden/web-vault/src/app/shared/components/integrations/integration-grid/integration-grid.component"; +import { IntegrationCardComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-card/integration-card.component"; +import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; import { SYSTEM_THEME_OBSERVABLE } from "../../../../../../libs/angular/src/services/injection-tokens"; import { I18nService } from "../../../../../../libs/common/src/platform/abstractions/i18n.service"; diff --git a/bitwarden_license/bit-web/tsconfig.json b/bitwarden_license/bit-web/tsconfig.json index 3ccdade273ec..09de92d355da 100644 --- a/bitwarden_license/bit-web/tsconfig.json +++ b/bitwarden_license/bit-web/tsconfig.json @@ -46,6 +46,7 @@ "../../apps/web/src/**/*.spec.ts", "../../libs/common/src/platform/services/**/*.worker.ts", - "src/**/*.stories.ts" + "src/**/*.stories.ts", + "src/**/*.spec.ts" ] } From 068a1430b08a85279a50c8ad40b6768f7b0a6646 Mon Sep 17 00:00:00 2001 From: Brandon Treston Date: Mon, 18 Nov 2024 09:41:34 -0500 Subject: [PATCH 13/18] Update apps/web/src/locales/en/messages.json Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> --- apps/web/src/locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index d2a1d055a583..971fda7136b7 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8944,7 +8944,7 @@ }, "scimIntegrationDescStart": { "message": "Configure ", - "description": "This represents the begining of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" + "description": "This represents the beginning of a sentence, broken up to include links. The full sentence will be 'Configure SCIM (System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider" }, "scimIntegrationDescEnd": { "message": "(System for Cross-domain Identity Management) to automatically provision users and groups to Bitwarden using the implementation guide for your Identity Provider.", From bef43a4ac180d966d0a11e1aee8dd050975d7e3a Mon Sep 17 00:00:00 2001 From: Brandon Date: Mon, 18 Nov 2024 11:45:00 -0500 Subject: [PATCH 14/18] fix imports, add static dir for stories --- .storybook/main.ts | 1 + .../organizations/integrations/integrations.component.ts | 4 +--- apps/web/src/app/shared/components/index.ts | 4 ++++ .../integration-card/integration-card.stories.ts | 3 +-- .../integration-grid/integration-grid.stories.ts | 9 +++------ apps/web/src/app/shared/index.ts | 1 + .../src/images/integrations/bitwarden-vertical-blue.svg | 1 + apps/web/src/locales/en/messages.json | 2 +- .../integrations/integrations.component.spec.ts | 6 ++++-- .../integrations/integrations.component.ts | 2 +- .../secrets-manager/integrations/integrations.module.ts | 8 +++++--- 11 files changed, 23 insertions(+), 18 deletions(-) create mode 100644 apps/web/src/app/shared/components/index.ts create mode 100644 apps/web/src/images/integrations/bitwarden-vertical-blue.svg diff --git a/.storybook/main.ts b/.storybook/main.ts index 454da4377dc2..b48a86ba2b20 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -57,6 +57,7 @@ const config: StorybookConfig = { return config; }, docs: {}, + staticDirs: ["../apps/web/src/images"], }; export default config; diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index 4115d2e7d5ad..707badc18ced 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -3,9 +3,7 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; import { HeaderModule } from "../../../layouts/header/header.module"; -import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component"; -import { FilterIntegrationsPipe } from "../../../shared/components/integrations/integrations.pipe"; -import { Integration } from "../../../shared/components/integrations/models"; +import { FilterIntegrationsPipe, IntegrationGridComponent, Integration } from "../../../shared/"; import { SharedModule } from "../../../shared/shared.module"; import { SharedOrganizationModule } from "../shared"; diff --git a/apps/web/src/app/shared/components/index.ts b/apps/web/src/app/shared/components/index.ts new file mode 100644 index 000000000000..5745a7827ff2 --- /dev/null +++ b/apps/web/src/app/shared/components/index.ts @@ -0,0 +1,4 @@ +export * from "./integrations/integration-card/integration-card.component"; +export * from "./integrations/integration-grid/integration-grid.component"; +export * from "./integrations/integrations.pipe"; +export * from "./integrations/models"; diff --git a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts index 732f6aed34db..1d1e229740fd 100644 --- a/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts +++ b/apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts @@ -57,8 +57,7 @@ export const Default: Story = { }), args: { name: "Bitwarden", - image: - "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", + image: "/integrations/bitwarden-vertical-blue.svg", linkURL: "https://bitwarden.com", }, }; diff --git a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts index a5b0ec4cc13b..2ec0bccec3d6 100644 --- a/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts +++ b/apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.stories.ts @@ -57,22 +57,19 @@ export const Default: Story = { { name: "Card 1", linkURL: "https://bitwarden.com", - image: - "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", + image: "/integrations/bitwarden-vertical-blue.svg", type: IntegrationType.SSO, }, { name: "Card 2", linkURL: "https://bitwarden.com", - image: - "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", + image: "/integrations/bitwarden-vertical-blue.svg", type: IntegrationType.SDK, }, { name: "Card 3", linkURL: "https://bitwarden.com", - image: - "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png", + image: "/integrations/bitwarden-vertical-blue.svg", type: IntegrationType.SCIM, }, ], diff --git a/apps/web/src/app/shared/index.ts b/apps/web/src/app/shared/index.ts index 7defcdedfda1..f57648c0e407 100644 --- a/apps/web/src/app/shared/index.ts +++ b/apps/web/src/app/shared/index.ts @@ -1,2 +1,3 @@ export * from "./shared.module"; export * from "./loose-components.module"; +export * from "./components/index"; diff --git a/apps/web/src/images/integrations/bitwarden-vertical-blue.svg b/apps/web/src/images/integrations/bitwarden-vertical-blue.svg new file mode 100644 index 000000000000..5d5200364d8d --- /dev/null +++ b/apps/web/src/images/integrations/bitwarden-vertical-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 971fda7136b7..df061a0bec34 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -8930,7 +8930,7 @@ }, "ssoDescStart": { "message": "Configure", - "description": "This represents the begining of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." + "description": "This represents the beginning of a sentence, broken up to include links. The full sentence will be 'Configure single sign-on for Bitwarden using the implementation guide for your Identity Provider." }, "ssoDescEnd": { "message": "for Bitwarden using the implementation guide for your Identity Provider.", diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts index 968b92065204..e4a65f7ddd87 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts @@ -5,8 +5,10 @@ import { mock } from "jest-mock-extended"; import { of } from "rxjs"; import { SharedModule } from "@bitwarden/components/src/shared"; -import { IntegrationCardComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-card/integration-card.component"; -import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; +import { + IntegrationCardComponent, + IntegrationGridComponent, +} from "@bitwarden/web-vault/app/shared"; import { SYSTEM_THEME_OBSERVABLE } from "../../../../../../libs/angular/src/services/injection-tokens"; import { I18nService } from "../../../../../../libs/common/src/platform/abstractions/i18n.service"; diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts index 2f06ec0a6406..b8f9386d7153 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.ts @@ -1,7 +1,7 @@ import { Component } from "@angular/core"; import { IntegrationType } from "@bitwarden/common/enums"; -import { Integration } from "@bitwarden/web-vault/app/shared/components/integrations/models"; +import { Integration } from "@bitwarden/web-vault/app/shared"; @Component({ selector: "sm-integrations", diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts index 5ba82c6e11a0..b79892f5ed69 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.module.ts @@ -1,7 +1,9 @@ import { NgModule } from "@angular/core"; -import { IntegrationCardComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-card/integration-card.component"; -import { IntegrationGridComponent } from "@bitwarden/web-vault/app/shared/components/integrations/integration-grid/integration-grid.component"; +import { + IntegrationCardComponent, + IntegrationGridComponent, +} from "@bitwarden/web-vault/app/shared"; import { SecretsManagerSharedModule } from "../shared/sm-shared.module"; @@ -12,8 +14,8 @@ import { IntegrationsComponent } from "./integrations.component"; imports: [ SecretsManagerSharedModule, IntegrationsRoutingModule, - IntegrationGridComponent, IntegrationCardComponent, + IntegrationGridComponent, ], declarations: [IntegrationsComponent], }) From 8ef5ceb742bbbabf1c8159c038f7eacf72ed8129 Mon Sep 17 00:00:00 2001 From: Brandon Date: Thu, 21 Nov 2024 10:04:40 -0500 Subject: [PATCH 15/18] Add darkmode svgs for integrations --- .../integrations/integrations.component.ts | 10 ++++++++++ .../web/src/images/integrations/jumpcloud-darkmode.svg | 1 + apps/web/src/images/integrations/okta-darkmode.svg | 1 + apps/web/src/images/integrations/onelogin-darkmode.svg | 1 + apps/web/src/images/integrations/rapid7-darkmode.svg | 1 + apps/web/src/images/integrations/splunk-darkmode.svg | 1 + 6 files changed, 15 insertions(+) create mode 100644 apps/web/src/images/integrations/jumpcloud-darkmode.svg create mode 100644 apps/web/src/images/integrations/okta-darkmode.svg create mode 100644 apps/web/src/images/integrations/onelogin-darkmode.svg create mode 100644 apps/web/src/images/integrations/rapid7-darkmode.svg create mode 100644 apps/web/src/images/integrations/splunk-darkmode.svg diff --git a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts index 707badc18ced..4b8822da7ca5 100644 --- a/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts +++ b/apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts @@ -66,6 +66,7 @@ export class AdminConsoleIntegrationsComponent { name: "JumpCloud", linkURL: "https://bitwarden.com/help/saml-jumpcloud/", image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg", + imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg", type: IntegrationType.SSO, }, { @@ -78,12 +79,14 @@ export class AdminConsoleIntegrationsComponent { name: "Okta", linkURL: "https://bitwarden.com/help/saml-okta/", image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", + imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg", type: IntegrationType.SSO, }, { name: "OneLogin", linkURL: "https://bitwarden.com/help/saml-onelogin/", image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", + imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg", type: IntegrationType.SSO, }, { @@ -102,18 +105,21 @@ export class AdminConsoleIntegrationsComponent { name: "Okta", linkURL: "https://bitwarden.com/help/okta-scim-integration/", image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", + imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg", type: IntegrationType.SCIM, }, { name: "OneLogin", linkURL: "https://bitwarden.com/help/onelogin-scim-integration/", image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", + imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg", type: IntegrationType.SCIM, }, { name: "JumpCloud", linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/", image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg", + imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg", type: IntegrationType.SCIM, }, { @@ -144,18 +150,21 @@ export class AdminConsoleIntegrationsComponent { name: "Okta", linkURL: "https://bitwarden.com/help/okta-directory/", image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg", + imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg", type: IntegrationType.BWDC, }, { name: "OneLogin", linkURL: "https://bitwarden.com/help/onelogin-directory/", image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg", + imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg", type: IntegrationType.BWDC, }, { name: "Splunk", linkURL: "https://bitwarden.com/help/splunk-siem/", image: "../../../../../../../images/integrations/logo-splunk-black.svg", + imageDarkMode: "../../../../../../../images/integrations/splunk-darkmode.svg", type: IntegrationType.EVENT, }, { @@ -168,6 +177,7 @@ export class AdminConsoleIntegrationsComponent { name: "Rapid7", linkURL: "https://bitwarden.com/help/rapid7-siem/", image: "../../../../../../../images/integrations/logo-rapid7-black.svg", + imageDarkMode: "../../../../../../../images/integrations/rapid7-darkmode.svg", type: IntegrationType.EVENT, }, { diff --git a/apps/web/src/images/integrations/jumpcloud-darkmode.svg b/apps/web/src/images/integrations/jumpcloud-darkmode.svg new file mode 100644 index 000000000000..6969fceeb84e --- /dev/null +++ b/apps/web/src/images/integrations/jumpcloud-darkmode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/images/integrations/okta-darkmode.svg b/apps/web/src/images/integrations/okta-darkmode.svg new file mode 100644 index 000000000000..e16e0d3c7006 --- /dev/null +++ b/apps/web/src/images/integrations/okta-darkmode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/images/integrations/onelogin-darkmode.svg b/apps/web/src/images/integrations/onelogin-darkmode.svg new file mode 100644 index 000000000000..764b1684faa8 --- /dev/null +++ b/apps/web/src/images/integrations/onelogin-darkmode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/images/integrations/rapid7-darkmode.svg b/apps/web/src/images/integrations/rapid7-darkmode.svg new file mode 100644 index 000000000000..b5f25aae8bd5 --- /dev/null +++ b/apps/web/src/images/integrations/rapid7-darkmode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/src/images/integrations/splunk-darkmode.svg b/apps/web/src/images/integrations/splunk-darkmode.svg new file mode 100644 index 000000000000..a4515c0a18c6 --- /dev/null +++ b/apps/web/src/images/integrations/splunk-darkmode.svg @@ -0,0 +1 @@ + \ No newline at end of file From c088806aefc115603f973210a2e9cbec998a9634 Mon Sep 17 00:00:00 2001 From: Brandon Date: Fri, 22 Nov 2024 14:31:49 -0500 Subject: [PATCH 16/18] hide nav link for non enterprise orgs --- .../layouts/organization-layout.component.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts index 1f720539b856..e058f3a38a69 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit } from "@angular/core"; import { ActivatedRoute, RouterModule } from "@angular/router"; -import { combineLatest, filter, map, Observable, switchMap } from "rxjs"; +import { combineLatest, filter, map, Observable, switchMap, withLatestFrom } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { @@ -18,6 +18,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service"; import { PolicyType, ProviderStatusType } from "@bitwarden/common/admin-console/enums"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { ProductTierType } from "@bitwarden/common/billing/enums"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; @@ -47,9 +48,7 @@ export class OrganizationLayoutComponent implements OnInit { protected orgFilter = (org: Organization) => canAccessOrgAdmin(org); - protected integrationPageEnabled$ = this.configService.getFeatureFlag$( - FeatureFlag.PM14505AdminConsoleIntegrationPage, - ); + protected integrationPageEnabled$: Observable; organization$: Observable; canAccessExport$: Observable; @@ -57,6 +56,7 @@ export class OrganizationLayoutComponent implements OnInit { hideNewOrgButton$: Observable; organizationIsUnmanaged$: Observable; isAccessIntelligenceFeatureEnabled = false; + enterpriseOrganization$: Observable; constructor( private route: ActivatedRoute, @@ -108,6 +108,16 @@ export class OrganizationLayoutComponent implements OnInit { provider.providerStatus !== ProviderStatusType.Billable, ), ); + + this.integrationPageEnabled$ = this.organization$.pipe( + withLatestFrom( + this.configService.getFeatureFlag$(FeatureFlag.PM14505AdminConsoleIntegrationPage), + ), + map( + ([org, featrueFlagEnabled]) => + org.productTierType === ProductTierType.Enterprise && featrueFlagEnabled, + ), + ); } canShowVaultTab(organization: Organization): boolean { From ac1e4b100d5a0081a323be48ad8acc797bac9086 Mon Sep 17 00:00:00 2001 From: Brandon Date: Mon, 25 Nov 2024 10:48:35 -0500 Subject: [PATCH 17/18] add router guard --- .../guards/is-enterprise-org.guard.spec.ts | 26 ++++++++++++++++++- .../guards/is-enterprise-org.guard.ts | 4 +-- .../organization-routing.module.ts | 6 ++++- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.spec.ts b/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.spec.ts index 75e63d42428f..5d138e8137d4 100644 --- a/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.spec.ts +++ b/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.spec.ts @@ -59,8 +59,14 @@ describe("Is Enterprise Org Guard", () => { { path: "organizations/:organizationId/enterpriseOrgsOnly", component: IsEnterpriseOrganizationComponent, - canActivate: [isEnterpriseOrgGuard()], + canActivate: [isEnterpriseOrgGuard(true)], }, + { + path: "organizations/:organizationId/enterpriseOrgsOnlyNoError", + component: IsEnterpriseOrganizationComponent, + canActivate: [isEnterpriseOrgGuard(false)], + }, + { path: "organizations/:organizationId/billing/subscription", component: OrganizationUpgradeScreenComponent, @@ -115,6 +121,24 @@ describe("Is Enterprise Org Guard", () => { ); }); + it.each([ + ProductTierType.Free, + ProductTierType.Families, + ProductTierType.Teams, + ProductTierType.TeamsStarter, + ])("does not proceed with the navigation for productTierType '%s'", async (productTierType) => { + const org = orgFactory({ + type: OrganizationUserType.User, + productTierType: productTierType, + }); + organizationService.get.calledWith(org.id).mockResolvedValue(org); + await routerHarness.navigateByUrl(`organizations/${org.id}/enterpriseOrgsOnlyNoError`); + expect(dialogService.openSimpleDialog).not.toHaveBeenCalled(); + expect( + routerHarness.routeNativeElement?.querySelector("h1")?.textContent?.trim() ?? "", + ).not.toBe("This component can only be accessed by a enterprise organization!"); + }); + it("proceeds with navigation if the organization in question is a enterprise organization", async () => { const org = orgFactory({ productTierType: ProductTierType.Enterprise }); organizationService.get.calledWith(org.id).mockResolvedValue(org); diff --git a/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.ts b/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.ts index 8a0d374997db..5eab89ae68a9 100644 --- a/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.ts +++ b/apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.ts @@ -17,7 +17,7 @@ import { DialogService } from "@bitwarden/components"; * if they have access to upgrade the organization. If the organization is * enterprise routing proceeds." */ -export function isEnterpriseOrgGuard(): CanActivateFn { +export function isEnterpriseOrgGuard(showError: boolean = true): CanActivateFn { return async (route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => { const router = inject(Router); const organizationService = inject(OrganizationService); @@ -29,7 +29,7 @@ export function isEnterpriseOrgGuard(): CanActivateFn { return router.createUrlTree(["/"]); } - if (org.productTierType != ProductTierType.Enterprise) { + if (org.productTierType != ProductTierType.Enterprise && showError) { // Users without billing permission can't access billing if (!org.canEditSubscription) { await dialogService.openSimpleDialog({ diff --git a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts index 5b57f0c7568e..e8ca1a212ecd 100644 --- a/apps/web/src/app/admin-console/organizations/organization-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/organization-routing.module.ts @@ -20,6 +20,7 @@ import { OrganizationLayoutComponent } from "../../admin-console/organizations/l import { deepLinkGuard } from "../../auth/guards/deep-link.guard"; import { VaultModule } from "../../vault/org-vault/vault.module"; +import { isEnterpriseOrgGuard } from "./guards/is-enterprise-org.guard"; import { AdminConsoleIntegrationsComponent } from "./integrations/integrations.component"; import { GroupsComponent } from "./manage/groups.component"; @@ -41,7 +42,10 @@ const routes: Routes = [ }, { path: "integrations", - canActivate: [canAccessFeature(FeatureFlag.PM14505AdminConsoleIntegrationPage)], + canActivate: [ + canAccessFeature(FeatureFlag.PM14505AdminConsoleIntegrationPage), + isEnterpriseOrgGuard(false), + ], component: AdminConsoleIntegrationsComponent, data: { titleId: "integrations", From 18d4881d82c6aa720d5d6075f37c4e89d6b1c939 Mon Sep 17 00:00:00 2001 From: Brandon Date: Mon, 25 Nov 2024 10:57:53 -0500 Subject: [PATCH 18/18] change rxjs selector --- .../layouts/organization-layout.component.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts index e058f3a38a69..9f67a8859eba 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit } from "@angular/core"; import { ActivatedRoute, RouterModule } from "@angular/router"; -import { combineLatest, filter, map, Observable, switchMap, withLatestFrom } from "rxjs"; +import { combineLatest, filter, map, Observable, switchMap } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { @@ -109,13 +109,13 @@ export class OrganizationLayoutComponent implements OnInit { ), ); - this.integrationPageEnabled$ = this.organization$.pipe( - withLatestFrom( - this.configService.getFeatureFlag$(FeatureFlag.PM14505AdminConsoleIntegrationPage), - ), + this.integrationPageEnabled$ = combineLatest( + this.organization$, + this.configService.getFeatureFlag$(FeatureFlag.PM14505AdminConsoleIntegrationPage), + ).pipe( map( - ([org, featrueFlagEnabled]) => - org.productTierType === ProductTierType.Enterprise && featrueFlagEnabled, + ([org, featureFlagEnabled]) => + org.productTierType === ProductTierType.Enterprise && featureFlagEnabled, ), ); }