Skip to content

Commit

Permalink
Merge pull request #1137 from eclipse-tractusx/chore/#994-improve-bpn…
Browse files Browse the repository at this point in the history 
…-edc-config-view

Chore/#994 improve bpn edc config view
  • Loading branch information
@ds-mwesener
ds-mwesener authored Jul 2, 2024
2 parents ce6b15c + 4c34df6 commit 2bcb61e
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 79 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ _**For better traceability add the corresponding GitHub issue number in each cha
- #786 Added authorization as admin for submodel api & registry api
- #884 Upgraded tractionBatteryCode from 1.0.0 to 2.0.0
- #786 Added alternative port (only accessible within same cluster) for application which is used for unsecured API endpoints.
- #994 improved bpn edc configuration view uux

### Added
- #832 added policymanagement list view, creator and editor
Expand Down
45 changes: 21 additions & 24 deletions ...rc/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,31 @@
>
</mat-card-header>
<mat-card-content>
<div class="bpn-config--top-container">
<p class="bpn-config--intro">
{{ 'pageAdmin.bpnConfig.intro' | i18n }}
</p>

<div class="bpn-config--save" *ngIf="changeInformation$ | async as info"
matTooltip="{{ ((info.deleted.length + info.added.length + info.changed.length) > 0 ? 'actions.saveChanges' : 'actions.noChanges') | i18n}}"
matTooltipClass="table--header--tooltip"
matTooltipPosition="above"
[class.mdc-tooltip--multiline]="true"
[matTooltipShowDelay]="1000"
>
<app-button
color="primary"
iconName="save"
[isDisabled]="!(info.deleted.length + info.added.length + info.changed.length)"
onkeydown="saveData()"
(click)="saveData()"
data-testId="bpn-config-save-button"
>
</app-button>

</div>
</div>

<div class="bpn-config">
<div class="bpn--add-new">

Expand All @@ -51,31 +72,7 @@
</div>
</div>

<div class="bpn-config--save" *ngIf="changeInformation$ | async as info">
<app-text-with-icon [testId]="'text-with-icon--deleted'" iconName="delete" color="warn"
>{{ 'pageAdmin.bpnConfig.deleted' | i18n }}: {{ info.deleted.length }}</app-text-with-icon
>

<app-text-with-icon [testId]="'text-with-icon--added'" iconName="add" color="primary"
>{{ 'pageAdmin.bpnConfig.added' | i18n }}: {{ info.added.length }}</app-text-with-icon
>

<app-text-with-icon [testId]="'text-with-icon--changed'" iconName="edit"
>{{ 'pageAdmin.bpnConfig.changed' | i18n }}: {{ info.changed.length }}</app-text-with-icon
>

<app-button
class="bpn-config--button"
variant="raised"
color="primary"
[isDisabled]="!(info.deleted.length + info.added.length + info.changed.length)"
onkeydown="saveData()"
(click)="saveData()"
>
{{ 'actions.saveChanges' | i18n }}
</app-button>

</div>

<div class="flex w-full justify-start"
*ngIf="newBpnConfig.controls.length > 0 || editBpnConfig.controls.length > 0">
Expand Down
19 changes: 5 additions & 14 deletions ...rc/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
}
}

.bpn-config--top-container {
display: flex;
justify-content: space-between;
}

.bpn-config--intro {
width: 90%;
padding: 10px 20px;
Expand Down Expand Up @@ -82,20 +87,6 @@
padding: 10px;
}

.bpn-config--save {
position: sticky;
top: 0;
z-index: 2;
height: 70px;
padding: 10px;
width: calc(100% + 32px);
background: white;

display: flex;
justify-content: space-around;
align-items: center;
}

.bpn-config--delete_animation {
transition: all 0.3s;
height: 0;
Expand Down
44 changes: 3 additions & 41 deletions ...app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,6 @@ describe('BpnConfigurationComponent', () => {
expect(newBpnInput.value).toEqual(bpn);
expect(newUrlInput.value).toEqual(url);

const addedCount = await waitFor(() => screen.getByTestId('text-with-icon--added'));
expect(addedCount).toBeInTheDocument();
expect(addedCount.innerText).toContain('pageAdmin.bpnConfig.added: 1');

const removeButton = (await waitFor(() => screen.getByText('actions.remove'))) as HTMLButtonElement;
fireEvent.click(removeButton);
Expand All @@ -123,8 +120,6 @@ describe('BpnConfigurationComponent', () => {
const urlInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-4'))) as HTMLInputElement;
const containerElement = await waitFor(() => screen.getByTestId('bpn-url-container-0'));

const changedCount = await waitFor(() => screen.getByTestId('text-with-icon--changed'));

expect(containerElement).not.toHaveClass('bpn-config__edit');
expect(containerElement).not.toHaveClass('bpn-config__new');

Expand All @@ -135,11 +130,9 @@ describe('BpnConfigurationComponent', () => {

expect(containerElement).toHaveClass('bpn-config__edit');
expect(urlInputElement.value).toEqual(url);
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 1');

const resetIcon = await waitFor(() => screen.getByTestId('BaseInputElement-4-icon'));
fireEvent.click(resetIcon);
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 0');
expect(containerElement).not.toHaveClass('bpn-config__edit');
expect(urlInputElement.value).toEqual(originalUrl);
});
Expand All @@ -149,9 +142,6 @@ describe('BpnConfigurationComponent', () => {
const bpnInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-3'))) as HTMLInputElement;
const containerElement = await waitFor(() => screen.getByTestId('bpn-url-container-0'));

const addedCount = await waitFor(() => screen.getByTestId('text-with-icon--added'));
const deletedCount = await waitFor(() => screen.getByTestId('text-with-icon--deleted'));

expect(containerElement).not.toHaveClass('bpn-config__edit');
expect(containerElement).not.toHaveClass('bpn-config__new');

Expand All @@ -161,16 +151,13 @@ describe('BpnConfigurationComponent', () => {

expect(containerElement).toHaveClass('bpn-config__new');
expect(bpnInputElement.value).toEqual(bpn);
expect(addedCount.innerText).toContain('pageAdmin.bpnConfig.added: 1');
expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 1');
});

it('should edit correctly', async () => {
await renderBpnConfigurationComponent();
const urlInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-4'))) as HTMLInputElement;
const containerElement = await waitFor(() => screen.getByTestId('bpn-url-container-0'));

const changedCount = await waitFor(() => screen.getByTestId('text-with-icon--changed'));

expect(containerElement).not.toHaveClass('bpn-config__edit');
expect(containerElement).not.toHaveClass('bpn-config__new');
Expand All @@ -182,11 +169,9 @@ describe('BpnConfigurationComponent', () => {

expect(containerElement).toHaveClass('bpn-config__edit');
expect(urlInputElement.value).toEqual(url);
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 1');

const resetIcon = await waitFor(() => screen.getByTestId('BaseInputElement-4-icon'));
fireEvent.click(resetIcon);
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 0');
expect(containerElement).not.toHaveClass('bpn-config__edit');
expect(urlInputElement.value).toEqual(originalUrl);
});
Expand All @@ -195,10 +180,6 @@ describe('BpnConfigurationComponent', () => {
const { fixture } = await renderBpnConfigurationComponent();
const bpnInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-3'))) as HTMLInputElement;
expect(bpnInputElement).toBeInTheDocument();
const baseValue = bpnInputElement.value;

const deletedCount = await waitFor(() => screen.getByTestId('text-with-icon--deleted'));
expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 0');

const deleteButton = (await waitFor(() => screen.getAllByText('actions.delete')))[0];
fireEvent.click(deleteButton);
Expand All @@ -207,7 +188,6 @@ describe('BpnConfigurationComponent', () => {
await sleepForTests(1000);
fixture.detectChanges();
expect(await waitFor(() => screen.queryByTestId('BaseInputElement-3'))).not.toBeInTheDocument();
expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 1');
});

it('should search', async () => {
Expand Down Expand Up @@ -241,7 +221,7 @@ describe('BpnConfigurationComponent', () => {
bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
right <= (window.innerWidth || document.documentElement.clientWidth);

const buttonElement = (await waitFor(() => screen.getByText('actions.saveChanges'))) as HTMLButtonElement;
const buttonElement = (await waitFor(() => screen.getByTestId('bpn-config-save-button'))) as HTMLButtonElement;
const bpnInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-15'))) as HTMLInputElement;

expect(bpnInputElement).toBeInTheDocument();
Expand All @@ -259,39 +239,21 @@ describe('BpnConfigurationComponent', () => {
it('should save data correctly', async () => {
const { fixture } = await renderBpnConfigurationComponent();

const addedCount = await waitFor(() => screen.getByTestId('text-with-icon--added'));
const deletedCount = await waitFor(() => screen.getByTestId('text-with-icon--deleted'));
const changedCount = await waitFor(() => screen.getByTestId('text-with-icon--changed'));

expect(addedCount.innerText).toContain('pageAdmin.bpnConfig.added: 0');
expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 0');
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 0');

const bpnInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-3'))) as HTMLInputElement;
const urlInputElement = (await waitFor(() => screen.getByTestId('BaseInputElement-6'))) as HTMLInputElement;

fireEvent.input(bpnInputElement, { target: { value: 'BPNLnewnewnewnew' } });
fireEvent.input(urlInputElement, { target: { value: 'test.de' } });

expect(addedCount.innerText).toContain('pageAdmin.bpnConfig.added: 1');
expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 1');
expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 1');


const buttonElement = (await waitFor(() => screen.getByText('actions.saveChanges'))) as HTMLButtonElement;
expect(buttonElement).toBeInTheDocument();
fireEvent.click(buttonElement);
fixture.detectChanges();
fixture.autoDetectChanges();

const saveButtonElement = (await waitFor(() => screen.getByText('actions.save'))) as HTMLButtonElement;
const saveButtonElement = (await waitFor(() => screen.getByTestId('bpn-config-save-button'))) as HTMLButtonElement;
expect(saveButtonElement).toBeInTheDocument();
fireEvent.click(saveButtonElement);

// Wait for saving data
await sleepForTests(1000);

await waitFor(() => expect(addedCount.innerText).toContain('pageAdmin.bpnConfig.added: 0'));
await waitFor(() => expect(deletedCount.innerText).toContain('pageAdmin.bpnConfig.deleted: 0'));
await waitFor(() => expect(changedCount.innerText).toContain('pageAdmin.bpnConfig.changed: 0'));
});
});

0 comments on commit 2bcb61e

Please sign in to comment.