Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

Move SM header into web (#6976)

Browse Source
This commit is contained in:
Oscar Hinton 2023-12-11 18:22:37 +01:00 committed by GitHub
parent 29841605fb
commit a40643d9d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/app/layouts/header/header.module.ts Normal file
View File

@ -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 {}

0
bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html → apps/web/src/app/layouts/header/web-header.component.html
View File

6
bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.ts → apps/web/src/app/layouts/header/web-header.component.ts
View File

@ -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`
*/

41
bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts → apps/web/src/app/layouts/header/web-header.stories.ts
View File

@ -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>
`,
});

4
bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
View File

@ -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()">

4
bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.html
View File

@ -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>

4
bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.html
View File

@ -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)"

4
bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html
View File

@ -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()"

4
bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-account.component.html
View File

@ -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>

4
bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html
View File

@ -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()"

2
bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
View File

@ -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">

2
bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-import.component.html
View File

@ -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>

4
bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.html
View File

@ -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>

22
bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
View File

@ -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: [],

4
bitwarden_license/bit-web/src/app/secrets-manager/trash/trash.component.html
View File

@ -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>