Move SM header into web (#6976)
This commit is contained in:
parent
29841605fb
commit
a40643d9d6
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
|
||||
import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
|
||||
import { SharedModule } from "../../shared";
|
||||
import { ProductSwitcherModule } from "../product-switcher/product-switcher.module";
|
||||
|
||||
import { WebHeaderComponent } from "./web-header.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [SharedModule, DynamicAvatarComponent, ProductSwitcherModule],
|
||||
declarations: [WebHeaderComponent],
|
||||
exports: [WebHeaderComponent],
|
||||
})
|
||||
export class HeaderModule {}
|
|
@ -10,10 +10,10 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
|
|||
import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
|
||||
|
||||
@Component({
|
||||
selector: "sm-header",
|
||||
templateUrl: "./header.component.html",
|
||||
selector: "app-header",
|
||||
templateUrl: "./web-header.component.html",
|
||||
})
|
||||
export class HeaderComponent {
|
||||
export class WebHeaderComponent {
|
||||
/**
|
||||
* Custom title that overrides the route data `titleId`
|
||||
*/
|
|
@ -1,3 +1,4 @@
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { Component, Injectable, importProvidersFrom } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import {
|
||||
|
@ -27,9 +28,9 @@ import {
|
|||
TypographyModule,
|
||||
InputModule,
|
||||
} from "@bitwarden/components";
|
||||
import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/core/tests";
|
||||
|
||||
import { HeaderComponent } from "./header.component";
|
||||
import { PreloadedEnglishI18nModule } from "../../core/tests";
|
||||
import { WebHeaderComponent } from "../header/web-header.component";
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root",
|
||||
|
@ -66,6 +67,8 @@ class MockProductSwitcher {}
|
|||
@Component({
|
||||
selector: "dynamic-avatar",
|
||||
template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
|
||||
standalone: true,
|
||||
imports: [CommonModule, AvatarModule],
|
||||
})
|
||||
class MockDynamicAvatar {
|
||||
protected name$ = combineLatest([
|
||||
|
@ -81,7 +84,7 @@ class MockDynamicAvatar {
|
|||
|
||||
export default {
|
||||
title: "Web/Header",
|
||||
component: HeaderComponent,
|
||||
component: WebHeaderComponent,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
|
||||
|
@ -89,7 +92,6 @@ export default {
|
|||
moduleMetadata({
|
||||
imports: [
|
||||
JslibModule,
|
||||
RouterModule,
|
||||
AvatarModule,
|
||||
BreadcrumbsModule,
|
||||
ButtonModule,
|
||||
|
@ -100,8 +102,9 @@ export default {
|
|||
TabsModule,
|
||||
TypographyModule,
|
||||
NavigationModule,
|
||||
MockDynamicAvatar,
|
||||
],
|
||||
declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
|
||||
declarations: [WebHeaderComponent, MockProductSwitcher],
|
||||
providers: [
|
||||
{ provide: StateService, useClass: MockStateService },
|
||||
{ provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
|
||||
|
@ -126,7 +129,7 @@ export default {
|
|||
export const KitchenSink: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
||||
<app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
||||
<bit-breadcrumbs slot="breadcrumbs">
|
||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
||||
|
@ -142,75 +145,75 @@ export const KitchenSink: Story = (args) => ({
|
|||
<bit-tab-link route="">Foo</bit-tab-link>
|
||||
<bit-tab-link route="#bar">Bar</bit-tab-link>
|
||||
</bit-tab-nav-bar>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const Basic: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug"></sm-header>
|
||||
<app-header title="Foobar" icon="bwi-bug"></app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithLongTitle: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></sm-header>
|
||||
<app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithBreadcrumbs: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<bit-breadcrumbs slot="breadcrumbs">
|
||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
||||
</bit-breadcrumbs>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithSearch: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<input
|
||||
bitInput
|
||||
placeholder="Ask Jeeves"
|
||||
type="text"
|
||||
/>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithSecondaryContent: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<button bitButton slot="secondary">Click Me 🎉</button>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithTabs: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<bit-tab-nav-bar slot="tabs">
|
||||
<bit-tab-link route="">Foo</bit-tab-link>
|
||||
<bit-tab-link route="#bar">Bar</bit-tab-link>
|
||||
</bit-tab-nav-bar>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
||||
|
||||
export const WithCustomTitleComponent: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<h1 slot="title" class="tw-text-3xl tw-font-semibold" style="font-family: 'Comic Sans MS'">Bitwarden</h1>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
`,
|
||||
});
|
|
@ -1,6 +1,6 @@
|
|||
<sm-header [title]="organizationName">
|
||||
<app-header [title]="organizationName">
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
|
||||
<div *ngIf="!loading && view$ | async as view; else spinner">
|
||||
<sm-onboarding [title]="'getStarted' | i18n" *ngIf="showOnboarding" (dismiss)="hideOnboarding()">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<sm-header *ngIf="project$ | async as project" [title]="project.name" icon="bwi-collection">
|
||||
<app-header *ngIf="project$ | async as project" [title]="project.name" icon="bwi-collection">
|
||||
<bit-breadcrumbs slot="breadcrumbs">
|
||||
<bit-breadcrumb [route]="['..']" icon="bwi-angle-left">{{ "projects" | i18n }}</bit-breadcrumb>
|
||||
</bit-breadcrumbs>
|
||||
|
@ -20,5 +20,5 @@
|
|||
>
|
||||
{{ "editProject" | i18n }}
|
||||
</button>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<sm-header>
|
||||
<app-header>
|
||||
<bit-search
|
||||
[placeholder]="'searchProjects' | i18n"
|
||||
[(ngModel)]="search"
|
||||
class="tw-w-80"
|
||||
></bit-search>
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<sm-projects-list
|
||||
(newProjectEvent)="openNewProjectDialog()"
|
||||
(editProjectEvent)="openEditProject($event)"
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<sm-header>
|
||||
<app-header>
|
||||
<bit-search
|
||||
[placeholder]="'searchSecrets' | i18n"
|
||||
[(ngModel)]="search"
|
||||
class="tw-w-80"
|
||||
></bit-search>
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<sm-secrets-list
|
||||
(deleteSecretsEvent)="openDeleteSecret($event)"
|
||||
(newSecretEvent)="openNewSecretDialog()"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<sm-header
|
||||
<app-header
|
||||
*ngIf="serviceAccount$ | async as serviceAccount"
|
||||
[title]="serviceAccount.name"
|
||||
icon="bwi-wrench"
|
||||
|
@ -25,5 +25,5 @@
|
|||
<i class="bwi bwi-plus" aria-hidden="true"></i>
|
||||
{{ "newAccessToken" | i18n }}
|
||||
</button>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<sm-header>
|
||||
<app-header>
|
||||
<bit-search
|
||||
[placeholder]="'searchServiceAccounts' | i18n"
|
||||
[(ngModel)]="search"
|
||||
class="tw-w-80"
|
||||
></bit-search>
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<sm-service-accounts-list
|
||||
[serviceAccounts]="serviceAccounts$ | async"
|
||||
(newServiceAccountEvent)="openNewServiceAccountDialog()"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<sm-header></sm-header>
|
||||
<app-header></app-header>
|
||||
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
<div class="tw-my-4 tw-max-w-xl">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<sm-header></sm-header>
|
||||
<app-header></app-header>
|
||||
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-max-w-xl">
|
||||
<bit-form-field>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<sm-header [title]="organizationName$ | async">
|
||||
<app-header [title]="organizationName$ | async">
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<bit-no-items [icon]="NoAccess">
|
||||
<ng-container slot="title">{{ "organizationIsDisabled" | i18n }}</ng-container>
|
||||
<ng-container slot="description">{{ "secretsAccessSuspended" | i18n }}</ng-container>
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
} from "@bitwarden/components";
|
||||
import { CoreOrganizationModule } from "@bitwarden/web-vault/app/admin-console/organizations/core";
|
||||
import { DynamicAvatarComponent } from "@bitwarden/web-vault/app/components/dynamic-avatar.component";
|
||||
import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
|
||||
import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
|
||||
import { SharedModule } from "@bitwarden/web-vault/app/shared";
|
||||
|
||||
|
@ -15,7 +16,6 @@ import { AccessPolicySelectorComponent } from "./access-policies/access-policy-s
|
|||
import { AccessSelectorComponent } from "./access-policies/access-selector.component";
|
||||
import { BulkConfirmationDialogComponent } from "./dialogs/bulk-confirmation-dialog.component";
|
||||
import { BulkStatusDialogComponent } from "./dialogs/bulk-status-dialog.component";
|
||||
import { HeaderComponent } from "./header.component";
|
||||
import { NewMenuComponent } from "./new-menu.component";
|
||||
import { OrgSuspendedComponent } from "./org-suspended.component";
|
||||
import { ProjectsListComponent } from "./projects-list.component";
|
||||
|
@ -31,16 +31,16 @@ import { SecretsListComponent } from "./secrets-list.component";
|
|||
SelectModule,
|
||||
DynamicAvatarComponent,
|
||||
SearchModule,
|
||||
HeaderModule,
|
||||
],
|
||||
exports: [
|
||||
SharedModule,
|
||||
NoItemsModule,
|
||||
AccessSelectorComponent,
|
||||
AccessPolicySelectorComponent,
|
||||
BulkStatusDialogComponent,
|
||||
AccessSelectorComponent,
|
||||
BulkConfirmationDialogComponent,
|
||||
HeaderComponent,
|
||||
BulkStatusDialogComponent,
|
||||
HeaderModule,
|
||||
NewMenuComponent,
|
||||
NoItemsModule,
|
||||
ProjectsListComponent,
|
||||
SearchModule,
|
||||
SecretsListComponent,
|
||||
|
@ -48,15 +48,15 @@ import { SecretsListComponent } from "./secrets-list.component";
|
|||
SharedModule,
|
||||
],
|
||||
declarations: [
|
||||
BulkStatusDialogComponent,
|
||||
AccessPolicySelectorComponent,
|
||||
AccessSelectorComponent,
|
||||
BulkConfirmationDialogComponent,
|
||||
HeaderComponent,
|
||||
BulkStatusDialogComponent,
|
||||
BulkStatusDialogComponent,
|
||||
NewMenuComponent,
|
||||
OrgSuspendedComponent,
|
||||
ProjectsListComponent,
|
||||
SecretsListComponent,
|
||||
AccessSelectorComponent,
|
||||
OrgSuspendedComponent,
|
||||
AccessPolicySelectorComponent,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [],
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<sm-header>
|
||||
<app-header>
|
||||
<sm-new-menu></sm-new-menu>
|
||||
</sm-header>
|
||||
</app-header>
|
||||
<bit-callout type="warning" [title]="'warning' | i18n">{{
|
||||
"trashCleanupWarning" | i18n
|
||||
}}</bit-callout>
|
||||
|
|
Loading…
Reference in New Issue