From 41c4365522a3f0d214e2bf73e1bd6154b7f9fe7c Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Tue, 18 Feb 2025 08:43:01 +0100 Subject: [PATCH 01/12] OZG-7615 Add styling - dropdown menu - dropdown menu button item --- .../dropdown-menu-button-item.component.ts | 20 ++++++++++--------- .../dropdown-menu/dropdown-menu.component.ts | 2 +- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts index 2c1b542792..e9d3ac5430 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts @@ -28,15 +28,17 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; selector: 'ods-dropdown-menu-button-item', standalone: true, imports: [CommonModule], - template: `<button - class="flex min-h-12 w-full items-center gap-4 border-2 border-transparent px-4 py-3 text-start outline-none hover:border-primary focus-visible:border-focus" - role="menuitem" - (click)="itemClicked.emit()" - [attr.data-test-id]="dataTestId" - > - <ng-content select="[icon]" /> - <p class="text-text">{{ caption }}</p> - </button>`, + template: `<div class="w-full bg-whitetext p-1"> + <button + class="flex min-h-12 w-full items-center gap-4 rounded-lg border border-transparent px-4 py-2 text-start outline-none hover:bg-neutral-100 focus-visible:border-primary dark:hover:bg-neutral-700" + role="menuitem" + (click)="itemClicked.emit()" + [attr.data-test-id]="dataTestId" + > + <ng-content select="[icon]" /> + <p class="text-text">{{ caption }}</p> + </button> + </div>`, }) export class DropdownMenuButtonItemComponent { @Input({ required: true }) caption!: string; diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts index 04a15c7eec..ece534ef77 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts @@ -48,7 +48,7 @@ import { twMerge } from 'tailwind-merge'; </button> <div *ngIf="isPopupOpen" - class="absolute z-50 max-h-120 min-w-44 max-w-96 animate-fadeIn overflow-y-auto rounded bg-dropdownBg shadow-md ring-1 ring-grayborder focus:outline-none" + class="absolute z-50 mt-2 max-h-120 min-w-44 max-w-96 animate-fadeIn overflow-y-auto rounded-lg bg-dropdownBg shadow-lg ring-1 ring-grayborder focus:outline-none" [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'" role="menu" aria-modal="true" -- GitLab From 3195a8a17ed3235f8c640672a60d6a83d70604cf Mon Sep 17 00:00:00 2001 From: sebo <sebastian.bergandy@external.mgm-cp.com> Date: Fri, 21 Feb 2025 11:30:42 +0100 Subject: [PATCH 02/12] OZG-7615 move component Sub task: OZG-7727 --- .../apps/admin/src/app/app.component.spec.ts | 19 ++--------- .../apps/admin/src/app/app.component.ts | 2 +- .../libs/admin/user-profile/.eslintrc.json | 33 +++++++++++++++++++ alfa-client/libs/admin/user-profile/README.md | 7 ++++ .../libs/admin/user-profile/jest.config.ts | 21 ++++++++++++ .../libs/admin/user-profile/project.json | 22 +++++++++++++ .../libs/admin/user-profile/src/index.ts | 0 ...er-profile-button-container.component.html | 0 ...profile-button-container.component.spec.ts | 4 +-- ...user-profile.button-container.component.ts | 0 .../libs/admin/user-profile/src/test-setup.ts | 12 +++++++ .../libs/admin/user-profile/tsconfig.json | 16 +++++++++ .../libs/admin/user-profile/tsconfig.lib.json | 12 +++++++ .../admin/user-profile/tsconfig.spec.json | 11 +++++++ alfa-client/tsconfig.base.json | 3 +- 15 files changed, 142 insertions(+), 20 deletions(-) create mode 100644 alfa-client/libs/admin/user-profile/.eslintrc.json create mode 100644 alfa-client/libs/admin/user-profile/README.md create mode 100644 alfa-client/libs/admin/user-profile/jest.config.ts create mode 100644 alfa-client/libs/admin/user-profile/project.json create mode 100644 alfa-client/libs/admin/user-profile/src/index.ts rename alfa-client/{apps/admin/src/common/user-profile-button-container => libs/admin/user-profile/src/lib/user-menu}/user-profile-button-container.component.html (100%) rename alfa-client/{apps/admin/src/common/user-profile-button-container => libs/admin/user-profile/src/lib/user-menu}/user-profile-button-container.component.spec.ts (97%) rename alfa-client/{apps/admin/src/common/user-profile-button-container => libs/admin/user-profile/src/lib/user-menu}/user-profile.button-container.component.ts (100%) create mode 100644 alfa-client/libs/admin/user-profile/src/test-setup.ts create mode 100644 alfa-client/libs/admin/user-profile/tsconfig.json create mode 100644 alfa-client/libs/admin/user-profile/tsconfig.lib.json create mode 100644 alfa-client/libs/admin/user-profile/tsconfig.spec.json diff --git a/alfa-client/apps/admin/src/app/app.component.spec.ts b/alfa-client/apps/admin/src/app/app.component.spec.ts index 34bd937efe..b0a354caa1 100644 --- a/alfa-client/apps/admin/src/app/app.component.spec.ts +++ b/alfa-client/apps/admin/src/app/app.component.spec.ts @@ -27,31 +27,18 @@ import { KeycloakTokenService } from '@admin/keycloak-shared'; import { ApiRootLinkRel, ApiRootResource, ApiRootService } from '@alfa-client/api-root-shared'; import { BuildInfoComponent } from '@alfa-client/common'; import { createEmptyStateResource, createStateResource, HasLinkPipe } from '@alfa-client/tech-shared'; -import { - existsAsHtmlElement, - getElementComponentFromFixtureByCss, - Mock, - mock, - notExistsAsHtmlElement, -} from '@alfa-client/test-utils'; +import { existsAsHtmlElement, getElementComponentFromFixtureByCss, Mock, mock, notExistsAsHtmlElement, } from '@alfa-client/test-utils'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { AuthenticationService } from '@authentication'; -import { - AdminLogoIconComponent, - MailboxIconComponent, - NavbarComponent, - NavItemComponent, - OrgaUnitIconComponent, - UsersIconComponent, -} from '@ods/system'; +import { AdminLogoIconComponent, MailboxIconComponent, NavbarComponent, NavItemComponent, OrgaUnitIconComponent, UsersIconComponent, } from '@ods/system'; import { createConfigurationResource } from 'libs/admin/configuration-shared/test/configuration'; import { MenuContainerComponent } from 'libs/admin/configuration/src/lib/menu-container/menu-container.component'; import { createApiRootResource } from 'libs/api-root-shared/test/api-root'; import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; import { MockComponent, MockDirective } from 'ng-mocks'; import { of, Subscription } from 'rxjs'; -import { UserProfileButtonContainerComponent } from '../common/user-profile-button-container/user-profile.button-container.component'; +import { UserProfileButtonContainerComponent } from '../../../../libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component'; import { UnavailablePageComponent } from '../pages/unavailable/unavailable-page/unavailable-page.component'; import { AppComponent } from './app.component'; diff --git a/alfa-client/apps/admin/src/app/app.component.ts b/alfa-client/apps/admin/src/app/app.component.ts index fe6c276c6d..f1890fa7b9 100644 --- a/alfa-client/apps/admin/src/app/app.component.ts +++ b/alfa-client/apps/admin/src/app/app.component.ts @@ -35,7 +35,7 @@ import { AuthenticationService } from '@authentication'; import { hasLink } from '@ngxp/rest'; import { AdminLogoIconComponent, NavbarComponent, NavItemComponent, OrgaUnitIconComponent, UsersIconComponent, } from '@ods/system'; import { filter, Observable, Subscription } from 'rxjs'; -import { UserProfileButtonContainerComponent } from '../common/user-profile-button-container/user-profile.button-container.component'; +import { UserProfileButtonContainerComponent } from '../../../../libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component'; import { UnavailablePageComponent } from '../pages/unavailable/unavailable-page/unavailable-page.component'; @Component({ diff --git a/alfa-client/libs/admin/user-profile/.eslintrc.json b/alfa-client/libs/admin/user-profile/.eslintrc.json new file mode 100644 index 0000000000..b10f9813a8 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/.eslintrc.json @@ -0,0 +1,33 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "lib", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "lib", + "style": "kebab-case" + } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] +} diff --git a/alfa-client/libs/admin/user-profile/README.md b/alfa-client/libs/admin/user-profile/README.md new file mode 100644 index 0000000000..274c5f872b --- /dev/null +++ b/alfa-client/libs/admin/user-profile/README.md @@ -0,0 +1,7 @@ +# admin-user-profile + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test admin-user-profile` to execute the unit tests. diff --git a/alfa-client/libs/admin/user-profile/jest.config.ts b/alfa-client/libs/admin/user-profile/jest.config.ts new file mode 100644 index 0000000000..8670098e4b --- /dev/null +++ b/alfa-client/libs/admin/user-profile/jest.config.ts @@ -0,0 +1,21 @@ +export default { + displayName: 'admin-user-profile', + preset: '../../../jest.preset.js', + setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], + coverageDirectory: '../../../coverage/libs/admin/user-profile', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '<rootDir>/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], +}; diff --git a/alfa-client/libs/admin/user-profile/project.json b/alfa-client/libs/admin/user-profile/project.json new file mode 100644 index 0000000000..fc4e68c484 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/project.json @@ -0,0 +1,22 @@ +{ + "name": "admin-user-profile", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/admin/user-profile/src", + "prefix": "lib", + "projectType": "library", + "tags": [], + "targets": { + "test": { + "executor": "@nx/jest:jest", + "outputs": [ + "{workspaceRoot}/coverage/{projectRoot}" + ], + "options": { + "jestConfig": "libs/admin/user-profile/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/alfa-client/libs/admin/user-profile/src/index.ts b/alfa-client/libs/admin/user-profile/src/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html similarity index 100% rename from alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html rename to alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html diff --git a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts similarity index 97% rename from alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts rename to alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts index b40a661442..419011f5dc 100644 --- a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts @@ -24,10 +24,10 @@ import { dispatchEventFromFixture, getElementFromFixture, mock, Mock } from '@alfa-client/test-utils'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { DropdownMenuButtonItemComponent, DropdownMenuComponent, LogoutIconComponent } from '@ods/system'; import { AuthenticationService } from '@authentication'; -import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; +import { DropdownMenuButtonItemComponent, DropdownMenuComponent, LogoutIconComponent } from '@ods/system'; import { MockComponent } from 'ng-mocks'; +import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test'; import { UserProfileButtonContainerComponent } from './user-profile.button-container.component'; describe('UserProfileButtonContainerComponent', () => { diff --git a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile.button-container.component.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts similarity index 100% rename from alfa-client/apps/admin/src/common/user-profile-button-container/user-profile.button-container.component.ts rename to alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts diff --git a/alfa-client/libs/admin/user-profile/src/test-setup.ts b/alfa-client/libs/admin/user-profile/src/test-setup.ts new file mode 100644 index 0000000000..c408668266 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/test-setup.ts @@ -0,0 +1,12 @@ +import '@testing-library/jest-dom'; +import 'jest-preset-angular/setup-jest'; + +import { getTestBed } from '@angular/core/testing'; +import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +getTestBed().resetTestEnvironment(); +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { + teardown: { destroyAfterEach: false }, + errorOnUnknownProperties: true, + errorOnUnknownElements: true, +}); diff --git a/alfa-client/libs/admin/user-profile/tsconfig.json b/alfa-client/libs/admin/user-profile/tsconfig.json new file mode 100644 index 0000000000..8ca9ad312c --- /dev/null +++ b/alfa-client/libs/admin/user-profile/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "compilerOptions": { + "target": "es2022" + } +} diff --git a/alfa-client/libs/admin/user-profile/tsconfig.lib.json b/alfa-client/libs/admin/user-profile/tsconfig.lib.json new file mode 100644 index 0000000000..8441346f6e --- /dev/null +++ b/alfa-client/libs/admin/user-profile/tsconfig.lib.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] +} diff --git a/alfa-client/libs/admin/user-profile/tsconfig.spec.json b/alfa-client/libs/admin/user-profile/tsconfig.spec.json new file mode 100644 index 0000000000..e637bf83b5 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/tsconfig.spec.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] +} diff --git a/alfa-client/tsconfig.base.json b/alfa-client/tsconfig.base.json index 6850f74e4e..bbe411cab7 100644 --- a/alfa-client/tsconfig.base.json +++ b/alfa-client/tsconfig.base.json @@ -77,7 +77,8 @@ "@alfa-client/zustaendige-stelle-shared": ["libs/zustaendige-stelle-shared/src/index.ts"], "@authentication": ["libs/authentication/src/index.ts"], "@ods/component": ["libs/design-component/src/index.ts"], - "@ods/system": ["libs/design-system/src/index.ts"] + "@ods/system": ["libs/design-system/src/index.ts"], + "admin-user-profile": ["libs/admin/admin-user-profile/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] -- GitLab From 45b6387fcd48cb888a7d8ebcbfbd48b902c8ccca Mon Sep 17 00:00:00 2001 From: sebo <sebastian.bergandy@external.mgm-cp.com> Date: Fri, 21 Feb 2025 13:26:56 +0100 Subject: [PATCH 03/12] OZG-7615 add documentation component - Extract new components from template. Sub task: OZG-7728, OZG-7733 --- .../apps/admin/src/app/app.component.html | 5 +- .../documentation.component.html | 8 +++ .../documentation.component.scss | 3 + .../documentation.component.spec.ts | 29 ++++++++ .../documentation/documentation.component.ts | 14 ++++ .../open-documentation-button.component.html | 7 ++ ...pen-documentation-button.component.spec.ts | 25 +++++++ .../open-documentation-button.component.ts | 12 ++++ .../admin-user-logout-button.component.html | 3 + ...admin-user-logout-button.component.spec.ts | 42 +++++++++++ .../admin-user-logout-button.component.ts | 12 ++++ .../admin-user-menu-button.component.html | 8 +++ .../admin-user-menu-button.component.spec.ts | 21 ++++++ .../admin-user-menu-button.component.ts | 10 +++ ...er-profile-button-container.component.html | 24 +++---- ...profile-button-container.component.spec.ts | 71 +++++++++++++++---- ...user-profile.button-container.component.ts | 23 ++++-- 17 files changed, 283 insertions(+), 34 deletions(-) create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.scss create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.html create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.spec.ts create mode 100644 alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.ts diff --git a/alfa-client/apps/admin/src/app/app.component.html b/alfa-client/apps/admin/src/app/app.component.html index 8302d53018..55e1c88245 100644 --- a/alfa-client/apps/admin/src/app/app.component.html +++ b/alfa-client/apps/admin/src/app/app.component.html @@ -36,7 +36,10 @@ > <ods-admin-logo-icon /> </a> - <user-profile-button-container data-test-id="user-profile-button"></user-profile-button-container> + <user-profile-button-container + [apiRootStateResource]="apiRootStateResource$ | async" + data-test-id="user-profile-button" + ></user-profile-button-container> </header> <div class="flex h-screen w-full justify-center overflow-y-auto"> <ods-navbar data-test-id="navigation"> diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html new file mode 100644 index 0000000000..dce6e98d32 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html @@ -0,0 +1,8 @@ +<ods-dropdown-menu-text-item + class="border-b border-b-grayborder border-t-grayborder bg-whitetext" + title="Benutzerleitfaden" + description="Leitfaden für die Administration" +> + <ods-file-icon icon fileType="pdf" size="large"></ods-file-icon> + <admin-open-documentation-button additionalContent [url]="url" data-test-id="documentations-component" /> +</ods-dropdown-menu-text-item> diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.scss b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.scss new file mode 100644 index 0000000000..bcbd245ce7 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.scss @@ -0,0 +1,3 @@ +:host { + white-space: nowrap; +} diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts new file mode 100644 index 0000000000..653293c65f --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts @@ -0,0 +1,29 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { DropdownMenuTextItemComponent, FileIconComponent } from '@ods/system'; +import { MockComponent } from 'ng-mocks'; +import { DocumentationComponent } from './documentation.component'; +import { OpenDocumentationButtonComponent } from './open-documentation-button/open-documentation-button.component'; + +describe('DocumentationComponent', () => { + let component: DocumentationComponent; + let fixture: ComponentFixture<DocumentationComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + DocumentationComponent, + MockComponent(OpenDocumentationButtonComponent), + MockComponent(DropdownMenuTextItemComponent), + MockComponent(FileIconComponent), + ], + }).compileComponents(); + + fixture = TestBed.createComponent(DocumentationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts new file mode 100644 index 0000000000..448e2b9416 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts @@ -0,0 +1,14 @@ +import { Component, Input } from '@angular/core'; +import { DropdownMenuTextItemComponent, FileIconComponent } from '@ods/system'; +import { OpenDocumentationButtonComponent } from './open-documentation-button/open-documentation-button.component'; + +@Component({ + selector: 'admin-documentation', + templateUrl: './documentation.component.html', + styleUrls: ['./documentation.component.scss'], + standalone: true, + imports: [DropdownMenuTextItemComponent, FileIconComponent, OpenDocumentationButtonComponent], +}) +export class DocumentationComponent { + @Input() url: string; +} diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html new file mode 100644 index 0000000000..6047cc5666 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html @@ -0,0 +1,7 @@ +<ozgcloud-open-url-button + text="PDF öffnen" + [url]="url" + [targetName]="'_blank'" + [tooltip]="'Öffnet in einem neuen Tab'" + data-test-id="open-documentation-button" +></ozgcloud-open-url-button> diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts new file mode 100644 index 0000000000..c734d181a2 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OpenUrlButtonComponent, UiModule } from '@alfa-client/ui'; +import { MockComponent } from 'ng-mocks'; +import { OpenDocumentationButtonComponent } from './open-documentation-button.component'; + +describe('OpenDocumentationButtonComponent', () => { + let component: OpenDocumentationButtonComponent; + let fixture: ComponentFixture<OpenDocumentationButtonComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [OpenDocumentationButtonComponent, MockComponent(OpenUrlButtonComponent)], + imports: [UiModule], + }).compileComponents(); + + fixture = TestBed.createComponent(OpenDocumentationButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts new file mode 100644 index 0000000000..bbc3820ecb --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts @@ -0,0 +1,12 @@ +import { UiModule } from '@alfa-client/ui'; +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'admin-open-documentation-button', + templateUrl: './open-documentation-button.component.html', + standalone: true, + imports: [UiModule], +}) +export class OpenDocumentationButtonComponent { + @Input() url: string; +} diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html new file mode 100644 index 0000000000..e71cc9f75f --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html @@ -0,0 +1,3 @@ +<ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> + <ods-logout-icon icon /> +</ods-dropdown-menu-button-item> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts new file mode 100644 index 0000000000..d245d4b8a7 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts @@ -0,0 +1,42 @@ +import { triggerEvent } from '@alfa-client/test-utils'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { expect } from '@jest/globals'; +import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test'; +import { AdminUserLogoutButtonComponent } from './admin-user-logout-button.component'; + +describe('AdminUserLogoutButtonComponent', () => { + let component: AdminUserLogoutButtonComponent; + let fixture: ComponentFixture<AdminUserLogoutButtonComponent>; + + const logoutButtonTestId: string = getDataTestIdOf('popup-logout-button'); + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AdminUserLogoutButtonComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(AdminUserLogoutButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('template', () => { + describe('menu button item', () => { + describe('output', () => { + describe('itemClicked', () => { + it('should emit', () => { + component.logout.emit = jest.fn(); + + triggerEvent({ fixture, elementSelector: logoutButtonTestId, name: 'itemClicked' }); + + expect(component.logout.emit).toHaveBeenCalled(); + }); + }); + }); + }); + }); +}); diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.ts b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.ts new file mode 100644 index 0000000000..6e3f4cd7f8 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.ts @@ -0,0 +1,12 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { DropdownMenuButtonItemComponent, LogoutIconComponent } from '@ods/system'; + +@Component({ + selector: 'admin-user-logout-button', + standalone: true, + templateUrl: './admin-user-logout-button.component.html', + imports: [DropdownMenuButtonItemComponent, LogoutIconComponent], +}) +export class AdminUserLogoutButtonComponent { + @Output() logout = new EventEmitter<void>(); +} diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.html new file mode 100644 index 0000000000..78c6367709 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.html @@ -0,0 +1,8 @@ +<div + role="img" + class="flex size-9 items-center justify-center rounded-full border-2 border-transparent bg-ozggray-900 hover:border-primary" +> + <p class="font-semibold text-whitetext" data-test-id="popup-button-content"> + {{ currentUserInitials }} + </p> +</div> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.spec.ts new file mode 100644 index 0000000000..d14d948266 --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AdminUserMenuButtonComponent } from './admin-user-menu-button.component'; + +describe('AdminUserMenuButtonComponent', () => { + let component: AdminUserMenuButtonComponent; + let fixture: ComponentFixture<AdminUserMenuButtonComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AdminUserMenuButtonComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(AdminUserMenuButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.ts new file mode 100644 index 0000000000..02e3f12cef --- /dev/null +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu-button/admin-user-menu-button.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'admin-user-menu-button', + standalone: true, + templateUrl: './admin-user-menu-button.component.html', +}) +export class AdminUserMenuButtonComponent { + @Input() currentUserInitials: string; +} diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html index 29fc915346..848a0dc0e5 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html @@ -24,20 +24,12 @@ --> <ods-dropdown-menu buttonClass="rounded-full"> - <div - button-content - role="img" - class="flex size-9 items-center justify-center rounded-full border-2 border-transparent bg-ozggray-900 hover:border-primary" - > - <p class="font-semibold text-whitetext" data-test-id="popup-button-content"> - {{ currentUserInitials }} - </p> - </div> - <ods-dropdown-menu-button-item - caption="Abmelden" - (itemClicked)="authenticationService.logout()" - data-test-id="popup-logout-button" - > - <ods-logout-icon icon /> - </ods-dropdown-menu-button-item> + <admin-user-menu-button button-content [currentUserInitials]="currentUserInitials"></admin-user-menu-button> + <admin-user-logout-button (logout)="authenticationService.logout()"></admin-user-logout-button> + @if (apiRootStateResource.resource | hasLink: ApiRootLinkRel.DOCUMENTATIONS) { + <admin-documentation + [url]="apiRootStateResource.resource | getUrl: ApiRootLinkRel.DOCUMENTATIONS" + data-test-id="admin-documentation" + ></admin-documentation> + } </ods-dropdown-menu> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts index 419011f5dc..6dfc9edbe4 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts @@ -21,23 +21,36 @@ * Die sprachspezifischen Genehmigungen und Beschränkungen * unter der Lizenz sind dem Lizenztext zu entnehmen. */ -import { dispatchEventFromFixture, getElementFromFixture, mock, Mock } from '@alfa-client/test-utils'; +import { ApiRootLinkRel, ApiRootResource } from '@alfa-client/api-root-shared'; +import { createStateResource, StateResource } from '@alfa-client/tech-shared'; +import { dispatchEventFromFixture, existsAsHtmlElement, getElementComponentFromFixtureByCss, getElementFromFixture, mock, Mock, notExistsAsHtmlElement, } from '@alfa-client/test-utils'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AuthenticationService } from '@authentication'; +import { expect } from '@jest/globals'; +import { getUrl } from '@ngxp/rest'; import { DropdownMenuButtonItemComponent, DropdownMenuComponent, LogoutIconComponent } from '@ods/system'; import { MockComponent } from 'ng-mocks'; +import { createApiRootResource } from '../../../../../api-root-shared/test/api-root'; import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test'; +import { DocumentationComponent } from '../documentation/documentation.component'; import { UserProfileButtonContainerComponent } from './user-profile.button-container.component'; describe('UserProfileButtonContainerComponent', () => { let component: UserProfileButtonContainerComponent; let fixture: ComponentFixture<UserProfileButtonContainerComponent>; - const authenticationService: Mock<AuthenticationService> = mock(AuthenticationService); + let authenticationService: Mock<AuthenticationService>; const popupButtonContent: string = getDataTestIdOf('popup-button-content'); const popupLogoutButton: string = getDataTestIdOf('popup-logout-button'); + const documentationTestId: string = getDataTestIdOf('admin-documentation'); + + const apiRootStateResource: StateResource<ApiRootResource> = createStateResource(createApiRootResource()); + + beforeEach(() => { + authenticationService = mock(AuthenticationService); + }); beforeEach(async () => { await TestBed.configureTestingModule({ @@ -60,6 +73,7 @@ describe('UserProfileButtonContainerComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(UserProfileButtonContainerComponent); component = fixture.componentInstance; + component.apiRootStateResource = apiRootStateResource; fixture.detectChanges(); }); @@ -75,22 +89,53 @@ describe('UserProfileButtonContainerComponent', () => { }); }); - describe('popup button', () => { - it('should show initials', () => { - component.currentUserInitials = 'AV'; - fixture.detectChanges(); + describe('template', () => { + describe('popup button', () => { + it('should show initials', () => { + component.currentUserInitials = 'AV'; + fixture.detectChanges(); - const popupButtonContentElement: HTMLElement = getElementFromFixture(fixture, popupButtonContent); + const popupButtonContentElement: HTMLElement = getElementFromFixture(fixture, popupButtonContent); - expect(popupButtonContentElement.textContent.trim()).toEqual('AV'); + expect(popupButtonContentElement.textContent.trim()).toEqual('AV'); + }); }); - }); - describe('logout', () => { - it('should call authService logout', () => { - dispatchEventFromFixture(fixture, popupLogoutButton, 'itemClicked'); + describe('logout', () => { + it('should call authService logout', () => { + dispatchEventFromFixture(fixture, popupLogoutButton, 'itemClicked'); + + expect(authenticationService.logout).toHaveBeenCalled(); + }); + }); + + describe('documentation', () => { + it('should exists', () => { + component.apiRootStateResource = createStateResource(createApiRootResource([ApiRootLinkRel.DOCUMENTATIONS])); + + fixture.detectChanges(); + + existsAsHtmlElement(fixture, documentationTestId); + }); + + it('should NOT exists', () => { + component.apiRootStateResource = createStateResource(createApiRootResource([])); + + fixture.detectChanges(); + + notExistsAsHtmlElement(fixture, documentationTestId); + }); + + it('should have inputs', () => { + component.apiRootStateResource = createStateResource(createApiRootResource([ApiRootLinkRel.DOCUMENTATIONS])); + + fixture.detectChanges(); + const documentationComponent: DocumentationComponent = getElementComponentFromFixtureByCss(fixture, documentationTestId); - expect(authenticationService.logout).toHaveBeenCalled(); + expect(documentationComponent.url).toEqual( + getUrl(component.apiRootStateResource.resource, ApiRootLinkRel.DOCUMENTATIONS), + ); + }); }); }); }); diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts index f2f4bd8351..bb4531b0ee 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts @@ -21,20 +21,35 @@ * Die sprachspezifischen Genehmigungen und Beschränkungen * unter der Lizenz sind dem Lizenztext zu entnehmen. */ -import { Component, OnInit } from '@angular/core'; -import { DropdownMenuButtonItemComponent, DropdownMenuComponent, LogoutIconComponent } from '@ods/system'; +import { ApiRootLinkRel, ApiRootResource } from '@alfa-client/api-root-shared'; +import { StateResource, TechSharedModule } from '@alfa-client/tech-shared'; +import { Component, inject, Input, OnInit } from '@angular/core'; import { AuthenticationService } from '@authentication'; +import { DropdownMenuComponent } from '@ods/system'; +import { DocumentationComponent } from '../documentation/documentation.component'; +import { AdminUserLogoutButtonComponent } from '../user-logout-button/admin-user-logout-button.component'; +import { AdminUserMenuButtonComponent } from '../user-menu-button/admin-user-menu-button.component'; @Component({ selector: 'user-profile-button-container', templateUrl: './user-profile-button-container.component.html', standalone: true, - imports: [DropdownMenuComponent, DropdownMenuButtonItemComponent, LogoutIconComponent], + imports: [ + DropdownMenuComponent, + TechSharedModule, + DocumentationComponent, + AdminUserLogoutButtonComponent, + AdminUserMenuButtonComponent, + ], }) export class UserProfileButtonContainerComponent implements OnInit { + @Input() apiRootStateResource: StateResource<ApiRootResource>; + public currentUserInitials: string; - constructor(public authenticationService: AuthenticationService) {} + public readonly authenticationService: AuthenticationService = inject(AuthenticationService); + + public readonly ApiRootLinkRel = ApiRootLinkRel; ngOnInit(): void { this.currentUserInitials = this.authenticationService.getCurrentUserInitials(); -- GitLab From a908c18e97a139e5ad0bcf9a306ead2d07642ff7 Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Tue, 25 Feb 2025 14:55:45 +0100 Subject: [PATCH 04/12] OZG-7615 OZG-7734 Add styling - delete unused components --- .../documentation.component.html | 13 ++--- .../documentation.component.spec.ts | 10 +--- .../documentation/documentation.component.ts | 5 +- .../open-documentation-button.component.html | 7 --- ...pen-documentation-button.component.spec.ts | 25 ---------- .../open-documentation-button.component.ts | 12 ----- .../admin-user-logout-button.component.html | 8 ++-- ...er-profile-button-container.component.html | 10 ++-- .../dropdown-menu-button-item.component.ts | 20 ++++---- .../dropdown-menu-item.component.ts | 2 +- .../dropdown-menu-link-item.component.ts | 23 ++++++--- .../icons/file-icon/file-icon.component.ts | 1 + .../src/lib/link/link.component.ts | 2 +- .../documentation.component.html | 13 ++--- .../documentation.component.spec.ts | 10 +--- .../open-documentation-button.component.html | 32 ------------- .../open-documentation-button.component.scss | 23 --------- ...pen-documentation-button.component.spec.ts | 47 ------------------- .../open-documentation-button.component.ts | 33 ------------- .../lib/help-menu/help-menu.component.html | 4 +- .../src/lib/user-assistance.module.ts | 3 +- .../user-profile-in-header.component.html | 8 ++-- 22 files changed, 64 insertions(+), 247 deletions(-) delete mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html delete mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts delete mode 100644 alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts delete mode 100644 alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.html delete mode 100644 alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.scss delete mode 100644 alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.spec.ts delete mode 100644 alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.ts diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html index dce6e98d32..b00b9d8fef 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html @@ -1,8 +1,5 @@ -<ods-dropdown-menu-text-item - class="border-b border-b-grayborder border-t-grayborder bg-whitetext" - title="Benutzerleitfaden" - description="Leitfaden für die Administration" -> - <ods-file-icon icon fileType="pdf" size="large"></ods-file-icon> - <admin-open-documentation-button additionalContent [url]="url" data-test-id="documentations-component" /> -</ods-dropdown-menu-text-item> +<div class="w-full bg-whitetext p-1"> + <ods-dropdown-menu-link-item caption="Leitfaden für die Administration" text="PDF öffnen" [url]="url"> + <ods-file-icon icon fileType="pdf" size="medium" /> + </ods-dropdown-menu-link-item> +</div> diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts index 653293c65f..174d7d1fdd 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.spec.ts @@ -1,8 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DropdownMenuTextItemComponent, FileIconComponent } from '@ods/system'; +import { DropdownMenuLinkItemComponent, FileIconComponent } from '@ods/system'; import { MockComponent } from 'ng-mocks'; import { DocumentationComponent } from './documentation.component'; -import { OpenDocumentationButtonComponent } from './open-documentation-button/open-documentation-button.component'; describe('DocumentationComponent', () => { let component: DocumentationComponent; @@ -10,12 +9,7 @@ describe('DocumentationComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - DocumentationComponent, - MockComponent(OpenDocumentationButtonComponent), - MockComponent(DropdownMenuTextItemComponent), - MockComponent(FileIconComponent), - ], + declarations: [DocumentationComponent, MockComponent(DropdownMenuLinkItemComponent), MockComponent(FileIconComponent)], }).compileComponents(); fixture = TestBed.createComponent(DocumentationComponent); diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts index 448e2b9416..a3efae263c 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.ts @@ -1,13 +1,12 @@ import { Component, Input } from '@angular/core'; -import { DropdownMenuTextItemComponent, FileIconComponent } from '@ods/system'; -import { OpenDocumentationButtonComponent } from './open-documentation-button/open-documentation-button.component'; +import { DropdownMenuLinkItemComponent, FileIconComponent } from '@ods/system'; @Component({ selector: 'admin-documentation', templateUrl: './documentation.component.html', styleUrls: ['./documentation.component.scss'], standalone: true, - imports: [DropdownMenuTextItemComponent, FileIconComponent, OpenDocumentationButtonComponent], + imports: [DropdownMenuLinkItemComponent, FileIconComponent], }) export class DocumentationComponent { @Input() url: string; diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html deleted file mode 100644 index 6047cc5666..0000000000 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.html +++ /dev/null @@ -1,7 +0,0 @@ -<ozgcloud-open-url-button - text="PDF öffnen" - [url]="url" - [targetName]="'_blank'" - [tooltip]="'Öffnet in einem neuen Tab'" - data-test-id="open-documentation-button" -></ozgcloud-open-url-button> diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts deleted file mode 100644 index c734d181a2..0000000000 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OpenUrlButtonComponent, UiModule } from '@alfa-client/ui'; -import { MockComponent } from 'ng-mocks'; -import { OpenDocumentationButtonComponent } from './open-documentation-button.component'; - -describe('OpenDocumentationButtonComponent', () => { - let component: OpenDocumentationButtonComponent; - let fixture: ComponentFixture<OpenDocumentationButtonComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [OpenDocumentationButtonComponent, MockComponent(OpenUrlButtonComponent)], - imports: [UiModule], - }).compileComponents(); - - fixture = TestBed.createComponent(OpenDocumentationButtonComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts b/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts deleted file mode 100644 index bbc3820ecb..0000000000 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/open-documentation-button/open-documentation-button.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { UiModule } from '@alfa-client/ui'; -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'admin-open-documentation-button', - templateUrl: './open-documentation-button.component.html', - standalone: true, - imports: [UiModule], -}) -export class OpenDocumentationButtonComponent { - @Input() url: string; -} diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html index e71cc9f75f..4f4f7ceed1 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html @@ -1,3 +1,5 @@ -<ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> - <ods-logout-icon icon /> -</ods-dropdown-menu-button-item> +<div class="w-full bg-whitetext p-1"> + <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> + <ods-logout-icon icon class="fill-primary" /> + </ods-dropdown-menu-button-item> +</div> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html index 848a0dc0e5..2a17640a6a 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html @@ -27,9 +27,11 @@ <admin-user-menu-button button-content [currentUserInitials]="currentUserInitials"></admin-user-menu-button> <admin-user-logout-button (logout)="authenticationService.logout()"></admin-user-logout-button> @if (apiRootStateResource.resource | hasLink: ApiRootLinkRel.DOCUMENTATIONS) { - <admin-documentation - [url]="apiRootStateResource.resource | getUrl: ApiRootLinkRel.DOCUMENTATIONS" - data-test-id="admin-documentation" - ></admin-documentation> + <div class="mt-3"> + <admin-documentation + [url]="apiRootStateResource.resource | getUrl: ApiRootLinkRel.DOCUMENTATIONS" + data-test-id="admin-documentation" + /> + </div> } </ods-dropdown-menu> diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts index e9d3ac5430..ce97c1b72e 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts @@ -28,17 +28,15 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; selector: 'ods-dropdown-menu-button-item', standalone: true, imports: [CommonModule], - template: `<div class="w-full bg-whitetext p-1"> - <button - class="flex min-h-12 w-full items-center gap-4 rounded-lg border border-transparent px-4 py-2 text-start outline-none hover:bg-neutral-100 focus-visible:border-primary dark:hover:bg-neutral-700" - role="menuitem" - (click)="itemClicked.emit()" - [attr.data-test-id]="dataTestId" - > - <ng-content select="[icon]" /> - <p class="text-text">{{ caption }}</p> - </button> - </div>`, + template: `<button + class="flex min-h-12 w-full items-center gap-2 rounded-lg border border-transparent px-4 py-2 text-start outline-none hover:bg-neutral-100 focus-visible:border-primary dark:hover:bg-neutral-700" + role="menuitem" + (click)="itemClicked.emit()" + [attr.data-test-id]="dataTestId" + > + <ng-content select="[icon]" /> + <p class="text-primary">{{ caption }}</p> + </button>`, }) export class DropdownMenuButtonItemComponent { @Input({ required: true }) caption!: string; diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts index 301af6719e..2314cab202 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts @@ -7,6 +7,6 @@ import { Component } from '@angular/core'; imports: [CommonModule], styles: [':host {@apply block min-h-12 px-4 py-3 first:mt-2 last:mb-2}'], - template: ` <ng-content /> `, + template: `<ng-content />`, }) export class DropdownMenuItemComponent {} diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts index 52b3e46d6a..9e66984309 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; import { OpenLinkIconComponent } from '../../icons/open-link-icon/open-link-icon.component'; import { LinkComponent } from '../../link/link.component'; @@ -5,17 +6,25 @@ import { LinkComponent } from '../../link/link.component'; @Component({ selector: 'ods-dropdown-menu-link-item', standalone: true, - imports: [LinkComponent, OpenLinkIconComponent], - styles: [':host {@apply first:mt-2}'], - template: ` <ods-link [url]="url" class="bg-whitetext" [openInNewTab]="true"> - <div class="flex items-center gap-2 px-4 py-3"> - <p class="font-medium text-primary">{{ text }}</p> - <ods-open-link-icon class="size-5" /> - <span class="sr-only">Öffnet in einem neuen Tab</span> + imports: [LinkComponent, OpenLinkIconComponent, CommonModule], + template: `<ods-link [url]="url" [openInNewTab]="true"> + <div class="flex min-w-80 gap-3 px-3 py-2"> + <ng-content select="[icon]" /> + <div class="flex flex-col gap-1"> + @if (caption) { + <p class="font-medium text-text">{{ caption }}</p> + } + <div class="flex items-center gap-2"> + <p class="font-medium text-primary">{{ text }}</p> + <ods-open-link-icon size="small" /> + <span class="sr-only">Öffnet in einem neuen Tab</span> + </div> + </div> </div> </ods-link>`, }) export class DropdownMenuLinkItemComponent { @Input() url: string; + @Input() caption: string; @Input() text: string; } diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts index 2c084618d2..1e3a7ec67b 100644 --- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts +++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts @@ -38,6 +38,7 @@ const fileiconVariants = cva('fill-ozggray-300', { }, size: { small: 'w-4 h-5', + medium: 'w-5 h-6', large: 'w-8 h-10', }, }, diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.ts b/alfa-client/libs/design-system/src/lib/link/link.component.ts index 64830deee7..515f935969 100644 --- a/alfa-client/libs/design-system/src/lib/link/link.component.ts +++ b/alfa-client/libs/design-system/src/lib/link/link.component.ts @@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge'; [href]="url" [class]=" twMerge( - 'block rounded-lg border-2 border-transparent text-text hover:bg-ghost-hover focus-visible:border-focus focus-visible:bg-ghost-hover focus-visible:outline-none dark:hover:bg-neutral-700', + 'block rounded-lg border border-transparent text-text hover:bg-neutral-100 focus-visible:border-primary focus-visible:outline-none dark:hover:bg-neutral-700', class ) " diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html index 9ec99cebda..8ee692618d 100644 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html +++ b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html @@ -23,11 +23,8 @@ unter der Lizenz sind dem Lizenztext zu entnehmen. --> -<ods-dropdown-menu-text-item - class="border-b border-b-grayborder border-t-grayborder bg-whitetext" - title="Benutzerleitfaden" - description="Alle Funktionen der Allgemeinen Fachanwendung (Alfa) erklärt." -> - <ods-file-icon icon fileType="pdf" size="large"></ods-file-icon> - <alfa-open-documentation-button additionalContent [url]="url" data-test-id="documentations-component" /> -</ods-dropdown-menu-text-item> +<div class="w-full bg-whitetext p-1"> + <ods-dropdown-menu-link-item caption="Benutzerleitfaden Alfa" text="PDF öffnen" [url]="url"> + <ods-file-icon icon fileType="pdf" size="medium" /> + </ods-dropdown-menu-link-item> +</div> diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.spec.ts b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.spec.ts index b7307c4a9f..fb232797a3 100644 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.spec.ts +++ b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.spec.ts @@ -22,10 +22,9 @@ * unter der Lizenz sind dem Lizenztext zu entnehmen. */ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DropdownMenuTextItemComponent, FileIconComponent } from '@ods/system'; +import { DropdownMenuLinkItemComponent, FileIconComponent } from '@ods/system'; import { MockComponent } from 'ng-mocks'; import { DocumentationComponent } from './documentation.component'; -import { OpenDocumentationButtonComponent } from './open-documentation-button/open-documentation-button.component'; describe('DocumentationComponent', () => { let component: DocumentationComponent; @@ -33,12 +32,7 @@ describe('DocumentationComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - DocumentationComponent, - MockComponent(OpenDocumentationButtonComponent), - MockComponent(DropdownMenuTextItemComponent), - MockComponent(FileIconComponent), - ], + declarations: [DocumentationComponent, MockComponent(DropdownMenuLinkItemComponent), MockComponent(FileIconComponent)], }).compileComponents(); fixture = TestBed.createComponent(DocumentationComponent); diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.html deleted file mode 100644 index 0179cbc7aa..0000000000 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.html +++ /dev/null @@ -1,32 +0,0 @@ -<!-- - - Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den - Ministerpräsidenten des Landes Schleswig-Holstein - Staatskanzlei - Abteilung Digitalisierung und zentrales IT-Management der Landesregierung - - Lizenziert unter der EUPL, Version 1.2 oder - sobald - diese von der Europäischen Kommission genehmigt wurden - - Folgeversionen der EUPL ("Lizenz"); - Sie dürfen dieses Werk ausschließlich gemäß - dieser Lizenz nutzen. - Eine Kopie der Lizenz finden Sie hier: - - https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 - - Sofern nicht durch anwendbare Rechtsvorschriften - gefordert oder in schriftlicher Form vereinbart, wird - die unter der Lizenz verbreitete Software "so wie sie - ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN - - ausdrücklich oder stillschweigend - verbreitet. - Die sprachspezifischen Genehmigungen und Beschränkungen - unter der Lizenz sind dem Lizenztext zu entnehmen. - ---> -<ozgcloud-open-url-button - text="Öffnen" - [url]="url" - [targetName]="'_blank'" - [tooltip]="'Öffnet in einem neuen Tab'" - data-test-id="open-documentation-button" -></ozgcloud-open-url-button> diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.scss b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.scss deleted file mode 100644 index 54c4f3eb8c..0000000000 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.scss +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den - * Ministerpräsidenten des Landes Schleswig-Holstein - * Staatskanzlei - * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung - * - * Lizenziert unter der EUPL, Version 1.2 oder - sobald - * diese von der Europäischen Kommission genehmigt wurden - - * Folgeversionen der EUPL ("Lizenz"); - * Sie dürfen dieses Werk ausschließlich gemäß - * dieser Lizenz nutzen. - * Eine Kopie der Lizenz finden Sie hier: - * - * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 - * - * Sofern nicht durch anwendbare Rechtsvorschriften - * gefordert oder in schriftlicher Form vereinbart, wird - * die unter der Lizenz verbreitete Software "so wie sie - * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN - - * ausdrücklich oder stillschweigend - verbreitet. - * Die sprachspezifischen Genehmigungen und Beschränkungen - * unter der Lizenz sind dem Lizenztext zu entnehmen. - */ diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.spec.ts b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.spec.ts deleted file mode 100644 index a57801c4f8..0000000000 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den - * Ministerpräsidenten des Landes Schleswig-Holstein - * Staatskanzlei - * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung - * - * Lizenziert unter der EUPL, Version 1.2 oder - sobald - * diese von der Europäischen Kommission genehmigt wurden - - * Folgeversionen der EUPL ("Lizenz"); - * Sie dürfen dieses Werk ausschließlich gemäß - * dieser Lizenz nutzen. - * Eine Kopie der Lizenz finden Sie hier: - * - * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 - * - * Sofern nicht durch anwendbare Rechtsvorschriften - * gefordert oder in schriftlicher Form vereinbart, wird - * die unter der Lizenz verbreitete Software "so wie sie - * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN - - * ausdrücklich oder stillschweigend - verbreitet. - * Die sprachspezifischen Genehmigungen und Beschränkungen - * unter der Lizenz sind dem Lizenztext zu entnehmen. - */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OpenDocumentationButtonComponent } from './open-documentation-button.component'; -import { MockComponent } from 'ng-mocks'; -import { OpenUrlButtonComponent } from '@alfa-client/ui'; - -describe('OpenDocumentationButtonComponent', () => { - let component: OpenDocumentationButtonComponent; - let fixture: ComponentFixture<OpenDocumentationButtonComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [OpenDocumentationButtonComponent, MockComponent(OpenUrlButtonComponent)], - }).compileComponents(); - - fixture = TestBed.createComponent(OpenDocumentationButtonComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.ts b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.ts deleted file mode 100644 index c0719256cf..0000000000 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/open-documentation-button/open-documentation-button.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den - * Ministerpräsidenten des Landes Schleswig-Holstein - * Staatskanzlei - * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung - * - * Lizenziert unter der EUPL, Version 1.2 oder - sobald - * diese von der Europäischen Kommission genehmigt wurden - - * Folgeversionen der EUPL ("Lizenz"); - * Sie dürfen dieses Werk ausschließlich gemäß - * dieser Lizenz nutzen. - * Eine Kopie der Lizenz finden Sie hier: - * - * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 - * - * Sofern nicht durch anwendbare Rechtsvorschriften - * gefordert oder in schriftlicher Form vereinbart, wird - * die unter der Lizenz verbreitete Software "so wie sie - * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN - - * ausdrücklich oder stillschweigend - verbreitet. - * Die sprachspezifischen Genehmigungen und Beschränkungen - * unter der Lizenz sind dem Lizenztext zu entnehmen. - */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'alfa-open-documentation-button', - templateUrl: './open-documentation-button.component.html', - styleUrls: ['./open-documentation-button.component.scss'], -}) -export class OpenDocumentationButtonComponent { - @Input() url: string; -} diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html index 24ee1e9147..d84a728bd5 100644 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html +++ b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html @@ -38,6 +38,8 @@ } @if (apiRootStateResource?.resource?.impressumUrl) { - <ods-dropdown-menu-link-item [url]="apiRootStateResource.resource.impressumUrl" text="Impressum" data-test-id="impressum" /> + <div class="mt-2 bg-whitetext p-1"> + <ods-dropdown-menu-link-item [url]="apiRootStateResource.resource.impressumUrl" text="Impressum" data-test-id="impressum" /> + </div> } </ods-dropdown-menu> diff --git a/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts b/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts index 1eda492b4f..9c61b25a7a 100644 --- a/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts +++ b/alfa-client/libs/user-assistance/src/lib/user-assistance.module.ts @@ -33,7 +33,6 @@ import { HelpIconComponent, } from '@ods/system'; import { DocumentationComponent } from './help-menu/documentation/documentation.component'; -import { OpenDocumentationButtonComponent } from './help-menu/documentation/open-documentation-button/open-documentation-button.component'; import { HelpButtonComponent } from './help-menu/help-button/help-button.component'; import { HelpMenuComponent } from './help-menu/help-menu.component'; @@ -48,7 +47,7 @@ import { HelpMenuComponent } from './help-menu/help-menu.component'; UiModule, DropdownMenuLinkItemComponent, ], - declarations: [HelpMenuComponent, DocumentationComponent, OpenDocumentationButtonComponent, HelpButtonComponent], + declarations: [HelpMenuComponent, DocumentationComponent, HelpButtonComponent], exports: [HelpMenuComponent], }) export class UserAssistanceModule {} diff --git a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html index a2aac078aa..a57f9047b9 100644 --- a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html +++ b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html @@ -36,7 +36,9 @@ class="user-profile-icon" > </alfa-user-icon> - <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logoutEmitter.emit()" dataTestId="logout-button"> - <ods-logout-icon icon /> - </ods-dropdown-menu-button-item> + <div class="w-full bg-whitetext p-1"> + <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logoutEmitter.emit()" dataTestId="logout-button"> + <ods-logout-icon icon class="fill-primary" /> + </ods-dropdown-menu-button-item> + </div> </ods-dropdown-menu> -- GitLab From c56d4da74df211eecd14616d85581e8bda95625d Mon Sep 17 00:00:00 2001 From: Oliver Schmidt <kontakt@webkreation.de> Date: Tue, 25 Feb 2025 17:52:10 +0100 Subject: [PATCH 05/12] OZG-7615 opt dropdown styling --- .../documentation.component.html | 8 ++---- .../admin-user-logout-button.component.html | 8 ++---- ...er-profile-button-container.component.html | 11 ++++---- .../dropdown-menu-button-item.component.ts | 20 +++++++------ .../dropdown-menu-link-item.component.ts | 28 ++++++++++--------- .../dropdown-menu/dropdown-menu.component.ts | 2 +- .../src/lib/link/link.component.ts | 2 +- .../documentation.component.html | 8 ++---- .../lib/help-menu/help-menu.component.html | 5 ++-- .../user-profile-in-header.component.html | 8 ++---- 10 files changed, 47 insertions(+), 53 deletions(-) diff --git a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html index b00b9d8fef..c3fe2d2837 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/documentation/documentation.component.html @@ -1,5 +1,3 @@ -<div class="w-full bg-whitetext p-1"> - <ods-dropdown-menu-link-item caption="Leitfaden für die Administration" text="PDF öffnen" [url]="url"> - <ods-file-icon icon fileType="pdf" size="medium" /> - </ods-dropdown-menu-link-item> -</div> +<ods-dropdown-menu-link-item caption="Leitfaden für die Administration" text="PDF öffnen" [url]="url"> + <ods-file-icon icon fileType="pdf" size="medium" /> +</ods-dropdown-menu-link-item> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html index 4f4f7ceed1..308dc0ddad 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html @@ -1,5 +1,3 @@ -<div class="w-full bg-whitetext p-1"> - <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> - <ods-logout-icon icon class="fill-primary" /> - </ods-dropdown-menu-button-item> -</div> +<ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> + <ods-logout-icon icon class="fill-primary" /> +</ods-dropdown-menu-button-item> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html index 2a17640a6a..f9d7d720da 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html @@ -27,11 +27,10 @@ <admin-user-menu-button button-content [currentUserInitials]="currentUserInitials"></admin-user-menu-button> <admin-user-logout-button (logout)="authenticationService.logout()"></admin-user-logout-button> @if (apiRootStateResource.resource | hasLink: ApiRootLinkRel.DOCUMENTATIONS) { - <div class="mt-3"> - <admin-documentation - [url]="apiRootStateResource.resource | getUrl: ApiRootLinkRel.DOCUMENTATIONS" - data-test-id="admin-documentation" - /> - </div> + <div class="h-2"></div> + <admin-documentation + [url]="apiRootStateResource.resource | getUrl: ApiRootLinkRel.DOCUMENTATIONS" + data-test-id="admin-documentation" + /> } </ods-dropdown-menu> diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts index ce97c1b72e..1ea4a9c472 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts @@ -28,15 +28,17 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; selector: 'ods-dropdown-menu-button-item', standalone: true, imports: [CommonModule], - template: `<button - class="flex min-h-12 w-full items-center gap-2 rounded-lg border border-transparent px-4 py-2 text-start outline-none hover:bg-neutral-100 focus-visible:border-primary dark:hover:bg-neutral-700" - role="menuitem" - (click)="itemClicked.emit()" - [attr.data-test-id]="dataTestId" - > - <ng-content select="[icon]" /> - <p class="text-primary">{{ caption }}</p> - </button>`, + template: `<div class="w-full bg-whitetext p-1.5"> + <button + class="flex w-full items-center gap-2 rounded-md border border-transparent px-4 py-2 text-start font-medium outline-none hover:bg-background-150 focus-visible:border-primary dark:hover:bg-neutral-700" + role="menuitem" + (click)="itemClicked.emit()" + [attr.data-test-id]="dataTestId" + > + <ng-content select="[icon]" /> + <p class="text-sm text-primary">{{ caption }}</p> + </button> + </div>`, }) export class DropdownMenuButtonItemComponent { @Input({ required: true }) caption!: string; diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts index 9e66984309..24427bb02e 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts @@ -7,21 +7,23 @@ import { LinkComponent } from '../../link/link.component'; selector: 'ods-dropdown-menu-link-item', standalone: true, imports: [LinkComponent, OpenLinkIconComponent, CommonModule], - template: `<ods-link [url]="url" [openInNewTab]="true"> - <div class="flex min-w-80 gap-3 px-3 py-2"> - <ng-content select="[icon]" /> - <div class="flex flex-col gap-1"> - @if (caption) { - <p class="font-medium text-text">{{ caption }}</p> - } - <div class="flex items-center gap-2"> - <p class="font-medium text-primary">{{ text }}</p> - <ods-open-link-icon size="small" /> - <span class="sr-only">Öffnet in einem neuen Tab</span> + template: `<div class="w-full bg-whitetext p-1.5"> + <ods-link [url]="url" [openInNewTab]="true"> + <div class="flex min-w-80 gap-3 px-3 py-1.5"> + <ng-content select="[icon]" /> + <div class="flex flex-col gap-1"> + @if (caption) { + <p class="text-sm font-medium text-text">{{ caption }}</p> + } + <div class="flex items-center gap-2"> + <p class="text-sm font-normal text-primary">{{ text }}</p> + <ods-open-link-icon size="small" /> + <span class="sr-only">Öffnet in einem neuen Tab</span> + </div> </div> </div> - </div> - </ods-link>`, + </ods-link> + </div>`, }) export class DropdownMenuLinkItemComponent { @Input() url: string; diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts index ece534ef77..2452e38329 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts @@ -48,7 +48,7 @@ import { twMerge } from 'tailwind-merge'; </button> <div *ngIf="isPopupOpen" - class="absolute z-50 mt-2 max-h-120 min-w-44 max-w-96 animate-fadeIn overflow-y-auto rounded-lg bg-dropdownBg shadow-lg ring-1 ring-grayborder focus:outline-none" + class="absolute z-50 mt-2 min-w-44 max-w-96 animate-fadeIn rounded-lg border bg-background-100 drop-shadow-lg focus:outline-none" [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'" role="menu" aria-modal="true" diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.ts b/alfa-client/libs/design-system/src/lib/link/link.component.ts index 515f935969..a7f529ad5c 100644 --- a/alfa-client/libs/design-system/src/lib/link/link.component.ts +++ b/alfa-client/libs/design-system/src/lib/link/link.component.ts @@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge'; [href]="url" [class]=" twMerge( - 'block rounded-lg border border-transparent text-text hover:bg-neutral-100 focus-visible:border-primary focus-visible:outline-none dark:hover:bg-neutral-700', + 'block rounded-md border border-transparent text-text hover:bg-neutral-100 focus-visible:border-primary focus-visible:outline-none dark:hover:bg-neutral-700', class ) " diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html index 8ee692618d..f0b1defde6 100644 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html +++ b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html @@ -23,8 +23,6 @@ unter der Lizenz sind dem Lizenztext zu entnehmen. --> -<div class="w-full bg-whitetext p-1"> - <ods-dropdown-menu-link-item caption="Benutzerleitfaden Alfa" text="PDF öffnen" [url]="url"> - <ods-file-icon icon fileType="pdf" size="medium" /> - </ods-dropdown-menu-link-item> -</div> +<ods-dropdown-menu-link-item caption="Benutzerleitfaden Alfa" text="PDF öffnen" [url]="url"> + <ods-file-icon icon fileType="pdf" size="medium" /> +</ods-dropdown-menu-link-item> diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html index d84a728bd5..24583fe97f 100644 --- a/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html +++ b/alfa-client/libs/user-assistance/src/lib/help-menu/help-menu.component.html @@ -38,8 +38,7 @@ } @if (apiRootStateResource?.resource?.impressumUrl) { - <div class="mt-2 bg-whitetext p-1"> - <ods-dropdown-menu-link-item [url]="apiRootStateResource.resource.impressumUrl" text="Impressum" data-test-id="impressum" /> - </div> + <div class="h-2"></div> + <ods-dropdown-menu-link-item [url]="apiRootStateResource.resource.impressumUrl" text="Impressum" data-test-id="impressum" /> } </ods-dropdown-menu> diff --git a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html index a57f9047b9..b26e332f7d 100644 --- a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html +++ b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html @@ -36,9 +36,7 @@ class="user-profile-icon" > </alfa-user-icon> - <div class="w-full bg-whitetext p-1"> - <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logoutEmitter.emit()" dataTestId="logout-button"> - <ods-logout-icon icon class="fill-primary" /> - </ods-dropdown-menu-button-item> - </div> + <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logoutEmitter.emit()" dataTestId="logout-button"> + <ods-logout-icon icon class="fill-primary" /> + </ods-dropdown-menu-button-item> </ods-dropdown-menu> -- GitLab From aeaf87c233a9390eafa789460dfd1d14f2366c48 Mon Sep 17 00:00:00 2001 From: Oliver Schmidt <kontakt@webkreation.de> Date: Tue, 25 Feb 2025 18:00:59 +0100 Subject: [PATCH 06/12] OZG-7615 fix darkmode --- .../lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts index 2452e38329..24c78fceb0 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts @@ -46,9 +46,10 @@ import { twMerge } from 'tailwind-merge'; > <ng-content select="[button-content]" /> </button> + <div *ngIf="isPopupOpen" - class="absolute z-50 mt-2 min-w-44 max-w-96 animate-fadeIn rounded-lg border bg-background-100 drop-shadow-lg focus:outline-none" + class="absolute z-50 mt-2 min-w-44 max-w-96 animate-fadeIn rounded-lg bg-background-100 ring-1 ring-grayborder drop-shadow-lg focus:outline-none" [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'" role="menu" aria-modal="true" -- GitLab From a863d27332d1c0717bec452080c6bb4e77734f76 Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Wed, 26 Feb 2025 09:56:25 +0100 Subject: [PATCH 07/12] OZG-7615 Fix imports --- .../lib/user-menu/user-profile.button-container.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts index bb4531b0ee..6a7d7299be 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile.button-container.component.ts @@ -22,7 +22,7 @@ * unter der Lizenz sind dem Lizenztext zu entnehmen. */ import { ApiRootLinkRel, ApiRootResource } from '@alfa-client/api-root-shared'; -import { StateResource, TechSharedModule } from '@alfa-client/tech-shared'; +import { GetUrlPipe, HasLinkPipe, StateResource } from '@alfa-client/tech-shared'; import { Component, inject, Input, OnInit } from '@angular/core'; import { AuthenticationService } from '@authentication'; import { DropdownMenuComponent } from '@ods/system'; @@ -36,7 +36,8 @@ import { AdminUserMenuButtonComponent } from '../user-menu-button/admin-user-men standalone: true, imports: [ DropdownMenuComponent, - TechSharedModule, + HasLinkPipe, + GetUrlPipe, DocumentationComponent, AdminUserLogoutButtonComponent, AdminUserMenuButtonComponent, -- GitLab From 9c7043085771d4b5892fa90ff5952f60f59db4f2 Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Wed, 26 Feb 2025 11:46:09 +0100 Subject: [PATCH 08/12] OZG-7615 fix e2e test --- .../user-assistance/help-menu.component.e2e.ts | 14 +++++++------- .../e2e/main-tests/user-assistance/help-menu.cy.ts | 14 ++++---------- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/alfa-client/apps/alfa-e2e/src/components/user-assistance/help-menu.component.e2e.ts b/alfa-client/apps/alfa-e2e/src/components/user-assistance/help-menu.component.e2e.ts index 6900b4f81b..9bdd8978db 100644 --- a/alfa-client/apps/alfa-e2e/src/components/user-assistance/help-menu.component.e2e.ts +++ b/alfa-client/apps/alfa-e2e/src/components/user-assistance/help-menu.component.e2e.ts @@ -1,4 +1,4 @@ -import { shouldHaveAttribute } from "../../support/cypress.util"; +import { shouldHaveAttribute } from '../../support/cypress.util'; /* * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den @@ -26,8 +26,8 @@ import { shouldHaveAttribute } from "../../support/cypress.util"; export class HelpMenuE2EComponent { private readonly root: string = 'help-menu'; private readonly button: string = 'help-menu-button'; - private readonly dropdownButton: string ='dropdown-button'; - private readonly openDocumentationButton: string = 'open-documentation-button'; + private readonly dropdownButton: string = 'dropdown-button'; + private readonly documentation: string = 'documentation'; private readonly openImpressumButton: string = 'impressum'; public getRoot() { @@ -42,15 +42,15 @@ export class HelpMenuE2EComponent { return this.getRoot().getTestElement(this.dropdownButton); } - public getOpenDocumentationButton() { - return this.getRoot().getTestElementWithOid(this.openDocumentationButton); + public getDocumentation() { + return this.getRoot().getTestElementWithOid(this.documentation); } public getImpressumButton(): Cypress.Chainable<Element> { - return cy.getTestElement(this.openImpressumButton) + return cy.getTestElement(this.openImpressumButton); } public impressumLinkIs(link: string): void { - shouldHaveAttribute(this.getImpressumButton().find('a'),'href', link) + shouldHaveAttribute(this.getImpressumButton().find('a'), 'href', link); } } diff --git a/alfa-client/apps/alfa-e2e/src/e2e/main-tests/user-assistance/help-menu.cy.ts b/alfa-client/apps/alfa-e2e/src/e2e/main-tests/user-assistance/help-menu.cy.ts index 4cc001a7f4..f2b5373ada 100644 --- a/alfa-client/apps/alfa-e2e/src/e2e/main-tests/user-assistance/help-menu.cy.ts +++ b/alfa-client/apps/alfa-e2e/src/e2e/main-tests/user-assistance/help-menu.cy.ts @@ -25,7 +25,7 @@ import { HelpMenuE2EComponent } from 'apps/alfa-e2e/src/components/user-assistan import { HeaderE2EComponent } from 'apps/alfa-e2e/src/page-objects/header.po'; import { MainPage, waitForSpinnerToDisappear } from 'apps/alfa-e2e/src/page-objects/main.po'; import { dropCollections } from 'apps/alfa-e2e/src/support/cypress-helper'; -import { contains, exist, shouldHaveAttribute } from 'apps/alfa-e2e/src/support/cypress.util'; +import { exist } from 'apps/alfa-e2e/src/support/cypress.util'; import { loginAsSabine } from 'apps/alfa-e2e/src/support/user-util'; describe('Help Menu', () => { @@ -33,7 +33,7 @@ describe('Help Menu', () => { const header: HeaderE2EComponent = mainPage.getHeader(); const helpMenu: HelpMenuE2EComponent = header.getHelpMenu(); - const impressumLink: string = 'https://static.dev.sh.ozg-cloud.de/impressum' + const impressumLink: string = 'https://static.dev.sh.ozg-cloud.de/impressum'; before(() => { loginAsSabine(); @@ -50,7 +50,7 @@ describe('Help Menu', () => { it('should show "open documentation"', () => { helpMenu.getRoot().click(); - exist(helpMenu.getOpenDocumentationButton()); + exist(helpMenu.getDocumentation()); }); it('should show Impressum button and find link', () => { @@ -59,13 +59,7 @@ describe('Help Menu', () => { }); it('should open documentation', () => { - helpMenu - .getOpenDocumentationButton() - .find('a') - .invoke('removeAttr', 'target') - .click() - .url() - .should('include', 'benutzerleitfaden'); + helpMenu.getDocumentation().find('a').invoke('removeAttr', 'target').click().url().should('include', 'benutzerleitfaden'); }); }); }); -- GitLab From 9298d2ffe01eec4b42dae6853a42de5c7db8e3db Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Wed, 26 Feb 2025 15:36:39 +0100 Subject: [PATCH 09/12] OZG-7615 Add e2e test for documentation --- alfa-client/apps/admin-e2e/docker-compose.yml | 8 +-- .../current-user-profile.component.e2e.ts | 7 ++- .../main-tests/app/user-profile-menu.cy.ts | 56 +++++++++++++++++++ 3 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 alfa-client/apps/admin-e2e/src/e2e/main-tests/app/user-profile-menu.cy.ts diff --git a/alfa-client/apps/admin-e2e/docker-compose.yml b/alfa-client/apps/admin-e2e/docker-compose.yml index 11682ebeb0..4f0c0b6c81 100644 --- a/alfa-client/apps/admin-e2e/docker-compose.yml +++ b/alfa-client/apps/admin-e2e/docker-compose.yml @@ -33,7 +33,7 @@ services: volumes: - mongodb:/data/db healthcheck: - test: [ 'CMD', 'mongosh', '--eval', 'db.settings.find()' ] + test: ['CMD', 'mongosh', '--eval', 'db.settings.find()'] interval: 10s timeout: 5s retries: 5 @@ -79,7 +79,7 @@ services: depends_on: - user-manager extra_hosts: - - "host.docker.internal:host-gateway" + - 'host.docker.internal:host-gateway' alfa-cors-proxy: image: alfa-cors-proxy @@ -91,7 +91,6 @@ services: alfa: condition: service_started - user-manager: image: docker.ozg-sh.de/user-manager:${USER_MANAGER_DOCKER_IMAGE:-snapshot-latest} platform: linux/amd64 @@ -132,6 +131,7 @@ services: - SPRING_DATA_MONGODB_URI=mongodb://mongodb:27017/config-db - OZGCLOUD_OAUTH2_REALM=${KEYCLOAK_REALM:-by-e2e-tests-local-dev} - ozgcloud_organisationeinheit_zufisearchuri=http://localhost:8082/api/organisationseinheits + - OZGCLOUD_USER-ASSISTANCE_DOCUMENTATION_URL=http://dummy-leitfaden.url - BPL_DEBUG_ENABLED=true - BPL_DEBUG_PORT=5100 ports: @@ -145,4 +145,4 @@ services: user-manager: condition: service_started extra_hosts: - - "host.docker.internal:host-gateway" + - 'host.docker.internal:host-gateway' diff --git a/alfa-client/apps/admin-e2e/src/components/user-profile/current-user-profile.component.e2e.ts b/alfa-client/apps/admin-e2e/src/components/user-profile/current-user-profile.component.e2e.ts index b96370d68b..effa3edb70 100644 --- a/alfa-client/apps/admin-e2e/src/components/user-profile/current-user-profile.component.e2e.ts +++ b/alfa-client/apps/admin-e2e/src/components/user-profile/current-user-profile.component.e2e.ts @@ -26,6 +26,7 @@ import { UserProfileE2EComponent } from './user-profile.component.e2e'; export class CurrentUserProfileE2EComponent { private readonly locatorUserIconButton: string = 'popup-button-content'; private readonly locatorLogoutButton: string = 'popup-logout-button'; + private readonly locatorDocumentation: string = 'admin-documentation'; private readonly locatorRoot: string = 'current-user'; @@ -46,7 +47,11 @@ export class CurrentUserProfileE2EComponent { return cy.getTestElement(this.locatorUserIconButton); } - private getLogoutButton() { + public getLogoutButton() { return cy.getTestElement(this.locatorLogoutButton); } + + public getDocumentation() { + return cy.getTestElement(this.locatorDocumentation); + } } diff --git a/alfa-client/apps/admin-e2e/src/e2e/main-tests/app/user-profile-menu.cy.ts b/alfa-client/apps/admin-e2e/src/e2e/main-tests/app/user-profile-menu.cy.ts new file mode 100644 index 0000000000..80d2884a5b --- /dev/null +++ b/alfa-client/apps/admin-e2e/src/e2e/main-tests/app/user-profile-menu.cy.ts @@ -0,0 +1,56 @@ +/* + * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den + * Ministerpräsidenten des Landes Schleswig-Holstein + * Staatskanzlei + * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung + * + * Lizenziert unter der EUPL, Version 1.2 oder - sobald + * diese von der Europäischen Kommission genehmigt wurden - + * Folgeversionen der EUPL ("Lizenz"); + * Sie dürfen dieses Werk ausschließlich gemäß + * dieser Lizenz nutzen. + * Eine Kopie der Lizenz finden Sie hier: + * + * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12 + * + * Sofern nicht durch anwendbare Rechtsvorschriften + * gefordert oder in schriftlicher Form vereinbart, wird + * die unter der Lizenz verbreitete Software "so wie sie + * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN - + * ausdrücklich oder stillschweigend - verbreitet. + * Die sprachspezifischen Genehmigungen und Beschränkungen + * unter der Lizenz sind dem Lizenztext zu entnehmen. + */ +import { HeaderE2EComponent } from '../../../page-objects/header.po'; +import { MainPage } from '../../../page-objects/main.po'; +import { exist, shouldHaveAttribute } from '../../../support/cypress.util'; +import { loginAsAriane } from '../../../support/user-util'; + +describe('User Profile Menu', () => { + const mainPage: MainPage = new MainPage(); + const header: HeaderE2EComponent = mainPage.getHeader(); + + const documentationLink: string = 'http://dummy-leitfaden.url'; + + before(() => { + loginAsAriane(); + }); + + describe('open user profile menu', () => { + before(() => { + header.getCurrentUserProfile().getUserIconButton().click(); + }); + + it('should show logout button', () => { + exist(header.getCurrentUserProfile().getLogoutButton()); + }); + + it('should show documentation', () => { + exist(header.getCurrentUserProfile().getDocumentation()); + }); + + it('should find documentation link', () => { + shouldHaveAttribute(header.getCurrentUserProfile().getDocumentation().find('a'), 'href', documentationLink); + }); + }); +}); -- GitLab From 5c09e0d0012633e01988fe02314578b7f720b137 Mon Sep 17 00:00:00 2001 From: sebo <sebastian.bergandy@external.mgm-cp.com> Date: Fri, 28 Feb 2025 09:34:43 +0100 Subject: [PATCH 10/12] OZG-7615 rename output --- .../admin-user-logout-button.component.html | 2 +- .../admin-user-logout-button.component.spec.ts | 6 +++--- .../dropdown-menu-button-item.component.spec.ts | 8 ++++---- .../dropdown-menu-button-item.component.ts | 6 +++--- .../user-profile-in-header.component.html | 2 +- .../user-profile-in-header.component.spec.ts | 4 ++-- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html index 308dc0ddad..9c5b0aa958 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.html @@ -1,3 +1,3 @@ -<ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logout.emit()" data-test-id="popup-logout-button"> +<ods-dropdown-menu-button-item caption="Abmelden" (clickEmitter)="logout.emit()" data-test-id="popup-logout-button"> <ods-logout-icon icon class="fill-primary" /> </ods-dropdown-menu-button-item> diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts index d245d4b8a7..092b7217e8 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-logout-button/admin-user-logout-button.component.spec.ts @@ -1,4 +1,4 @@ -import { triggerEvent } from '@alfa-client/test-utils'; +import { dispatchEventFromFixture, MockEvent } from '@alfa-client/test-utils'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { expect } from '@jest/globals'; import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test'; @@ -27,11 +27,11 @@ describe('AdminUserLogoutButtonComponent', () => { describe('template', () => { describe('menu button item', () => { describe('output', () => { - describe('itemClicked', () => { + describe('clickEmitter', () => { it('should emit', () => { component.logout.emit = jest.fn(); - triggerEvent({ fixture, elementSelector: logoutButtonTestId, name: 'itemClicked' }); + dispatchEventFromFixture(fixture, logoutButtonTestId, MockEvent.CLICK); expect(component.logout.emit).toHaveBeenCalled(); }); diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.spec.ts index 0b747f1e05..1af5235f27 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.spec.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.spec.ts @@ -43,13 +43,13 @@ describe('DropdownMenuButtonItemComponent', () => { expect(component).toBeTruthy(); }); - describe('itemClicked emitter', () => { - it('should emit itemClicked', () => { - component.itemClicked.emit = jest.fn(); + describe('clickEmitter', () => { + it('should emit', () => { + component.clickEmitter.emit = jest.fn(); dispatchEventFromFixture(fixture, 'button', 'click'); - expect(component.itemClicked.emit).toHaveBeenCalled(); + expect(component.clickEmitter.emit).toHaveBeenCalled(); }); }); }); diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts index 1ea4a9c472..85f7e1f0f6 100644 --- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-button-item/dropdown-menu-button-item.component.ts @@ -28,11 +28,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; selector: 'ods-dropdown-menu-button-item', standalone: true, imports: [CommonModule], - template: `<div class="w-full bg-whitetext p-1.5"> + template: ` <div class="w-full bg-whitetext p-1.5"> <button class="flex w-full items-center gap-2 rounded-md border border-transparent px-4 py-2 text-start font-medium outline-none hover:bg-background-150 focus-visible:border-primary dark:hover:bg-neutral-700" role="menuitem" - (click)="itemClicked.emit()" + (click)="clickEmitter.emit()" [attr.data-test-id]="dataTestId" > <ng-content select="[icon]" /> @@ -44,5 +44,5 @@ export class DropdownMenuButtonItemComponent { @Input({ required: true }) caption!: string; @Input() dataTestId: string; - @Output() itemClicked: EventEmitter<MouseEvent> = new EventEmitter(); + @Output() clickEmitter: EventEmitter<MouseEvent> = new EventEmitter(); } diff --git a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html index b26e332f7d..797bf6c78e 100644 --- a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html +++ b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html @@ -36,7 +36,7 @@ class="user-profile-icon" > </alfa-user-icon> - <ods-dropdown-menu-button-item caption="Abmelden" (itemClicked)="logoutEmitter.emit()" dataTestId="logout-button"> + <ods-dropdown-menu-button-item caption="Abmelden" (clickEmitter)="logoutEmitter.emit()" dataTestId="logout-button"> <ods-logout-icon icon class="fill-primary" /> </ods-dropdown-menu-button-item> </ods-dropdown-menu> diff --git a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts index ab53c00816..2bf68369cd 100644 --- a/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts +++ b/alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts @@ -22,7 +22,7 @@ * unter der Lizenz sind dem Lizenztext zu entnehmen. */ import { createStateResource } from '@alfa-client/tech-shared'; -import { dispatchEventFromFixture, getElementComponentFromFixtureByCss, mock, useFromMock } from '@alfa-client/test-utils'; +import { dispatchEventFromFixture, getElementComponentFromFixtureByCss, mock, MockEvent, useFromMock, } from '@alfa-client/test-utils'; import { UserIconComponent } from '@alfa-client/user-profile'; import { getUserName, UserProfileResource } from '@alfa-client/user-profile-shared'; import { EventEmitter } from '@angular/core'; @@ -90,7 +90,7 @@ describe('UserProfileInHeaderComponent', () => { describe('template', () => { describe('click on logout button', () => { it('should emit logout event', () => { - dispatchEventFromFixture(fixture, logoutButton, 'itemClicked'); + dispatchEventFromFixture(fixture, logoutButton, MockEvent.CLICK); expect(component.logoutEmitter.emit).toHaveBeenCalled(); }); -- GitLab From f1f30269d161056724b79b0a996e2826c945d249 Mon Sep 17 00:00:00 2001 From: sebo <sebastian.bergandy@external.mgm-cp.com> Date: Fri, 28 Feb 2025 21:51:35 +0100 Subject: [PATCH 11/12] OZG-7615 fix unit test --- .../user-menu/user-profile-button-container.component.html | 2 ++ .../user-profile-button-container.component.spec.ts | 5 +++-- alfa-client/libs/test-utils/src/lib/helper.ts | 5 +++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html index f9d7d720da..7f5574fb4b 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.html @@ -25,7 +25,9 @@ --> <ods-dropdown-menu buttonClass="rounded-full"> <admin-user-menu-button button-content [currentUserInitials]="currentUserInitials"></admin-user-menu-button> + <admin-user-logout-button (logout)="authenticationService.logout()"></admin-user-logout-button> + @if (apiRootStateResource.resource | hasLink: ApiRootLinkRel.DOCUMENTATIONS) { <div class="h-2"></div> <admin-documentation diff --git a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts index 6dfc9edbe4..cb23876d95 100644 --- a/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts +++ b/alfa-client/libs/admin/user-profile/src/lib/user-menu/user-profile-button-container.component.spec.ts @@ -23,7 +23,7 @@ */ import { ApiRootLinkRel, ApiRootResource } from '@alfa-client/api-root-shared'; import { createStateResource, StateResource } from '@alfa-client/tech-shared'; -import { dispatchEventFromFixture, existsAsHtmlElement, getElementComponentFromFixtureByCss, getElementFromFixture, mock, Mock, notExistsAsHtmlElement, } from '@alfa-client/test-utils'; +import { dispatchEventFromFixtureByType, existsAsHtmlElement, getElementComponentFromFixtureByCss, getElementFromFixture, mock, Mock, notExistsAsHtmlElement, } from '@alfa-client/test-utils'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AuthenticationService } from '@authentication'; @@ -34,6 +34,7 @@ import { MockComponent } from 'ng-mocks'; import { createApiRootResource } from '../../../../../api-root-shared/test/api-root'; import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test'; import { DocumentationComponent } from '../documentation/documentation.component'; +import { AdminUserLogoutButtonComponent } from '../user-logout-button/admin-user-logout-button.component'; import { UserProfileButtonContainerComponent } from './user-profile.button-container.component'; describe('UserProfileButtonContainerComponent', () => { @@ -103,7 +104,7 @@ describe('UserProfileButtonContainerComponent', () => { describe('logout', () => { it('should call authService logout', () => { - dispatchEventFromFixture(fixture, popupLogoutButton, 'itemClicked'); + dispatchEventFromFixtureByType(fixture, AdminUserLogoutButtonComponent, 'logout'); expect(authenticationService.logout).toHaveBeenCalled(); }); diff --git a/alfa-client/libs/test-utils/src/lib/helper.ts b/alfa-client/libs/test-utils/src/lib/helper.ts index e847268dea..66f33c3579 100644 --- a/alfa-client/libs/test-utils/src/lib/helper.ts +++ b/alfa-client/libs/test-utils/src/lib/helper.ts @@ -55,6 +55,11 @@ export function dispatchEventFromFixture<T>(fixture: ComponentFixture<T>, elemen element.nativeElement.dispatchEvent(new Event(event)); } +export function dispatchEventFromFixtureByType<T, C>(fixture: ComponentFixture<T>, component: Type<C>, event: string): void { + const element: DebugElement = getDebugElementFromFixtureByType(fixture, component); + element.nativeElement.dispatchEvent(new Event(event)); +} + export function triggerEvent<T>(eventData: EventData<T>) { const element: DebugElement = getDebugElementFromFixtureByCss(eventData.fixture, eventData.elementSelector); element.triggerEventHandler(eventData.name, eventData.data); -- GitLab From ffd5eddc082a753b285ee6a871680e581a279deb Mon Sep 17 00:00:00 2001 From: sebo <sebastian.bergandy@external.mgm-cp.com> Date: Sat, 1 Mar 2025 09:51:59 +0100 Subject: [PATCH 12/12] OZG-7615 fix version --- alfa-client/apps/admin/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/alfa-client/apps/admin/package.json b/alfa-client/apps/admin/package.json index ea02e87120..924f232583 100644 --- a/alfa-client/apps/admin/package.json +++ b/alfa-client/apps/admin/package.json @@ -1,4 +1,4 @@ { "name": "admin", - "version": "null" + "version": "1.6.0-SNAPSHOT" } -- GitLab