[SM-956] Secret Manager: Integrations Page (#8701)

* add navigation item for integrations and SDKs page

* Initial routing to Integrations & SDKs page

* Initial add of integrations component

* Initial add of SDKs component

* add secret manage integration images

* remove integration & sdk components in favor of a single component

* add integration & integration grid components

* add integrations & sdks

* rename page & components to integration after design discussion

* add external rel attribute for SDK links

* remove ts extension

* refactor: use pseudo element to cover as a link

* refactor: change secondaryText to linkText to align with usage

* update icon for integrations

* add new badge option for integration cards

* hardcode integration/sdk names

* add dark mode images for integrations and sdks

* update integration/sdk card with dark mode image when applicable

* refactor integration types to be an enum

* fix enum typings in integration grid test

---------

Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>

bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts

@@ -0,0 +1,77 @@
+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 "../../../../../../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({
+  selector: "app-header",
+  template: "<div></div>",
+})
+class MockHeaderComponent {}
+
+@Component({
+  selector: "sm-new-menu",
+  template: "<div></div>",
+})
+class MockNewMenuComponent {}
+
+describe("IntegrationsComponent", () => {
+  let fixture: ComponentFixture<IntegrationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        IntegrationsComponent,
+        IntegrationGridComponent,
+        IntegrationCardComponent,
+        MockHeaderComponent,
+        MockNewMenuComponent,
+        I18nPipe,
+      ],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: mock<I18nService>({ t: (key) => key }),
+        },
+        {
+          provide: ThemeStateService,
+          useValue: mock<ThemeStateService>(),
+        },
+        {
+          provide: SYSTEM_THEME_OBSERVABLE,
+          useValue: of(ThemeType.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"]);
+
+    expect(
+      (sdkList.componentInstance as IntegrationGridComponent).integrations.map((i) => i.name),
+    ).toEqual(["C#", "C++", "Go", "Java", "JS WebAssembly", "php", "Python", "Ruby"]);
+  });
+});