diff --git a/CHANGELOG.md b/CHANGELOG.md index 41637d43f5..ffce0987b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html index 62ce04611a..51c7ba9fba 100644 --- a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html +++ b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html @@ -26,10 +26,31 @@ > +

{{ 'pageAdmin.bpnConfig.intro' | i18n }}

+
+ + + +
+
+
@@ -51,31 +72,7 @@
-
- {{ 'pageAdmin.bpnConfig.deleted' | i18n }}: {{ info.deleted.length }} - {{ 'pageAdmin.bpnConfig.added' | i18n }}: {{ info.added.length }} - - {{ 'pageAdmin.bpnConfig.changed' | i18n }}: {{ info.changed.length }} - - - {{ 'actions.saveChanges' | i18n }} - - -
diff --git a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss index d52c53b390..712145276b 100644 --- a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss +++ b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss @@ -33,6 +33,11 @@ } } +.bpn-config--top-container { + display: flex; + justify-content: space-between; +} + .bpn-config--intro { width: 90%; padding: 10px 20px; @@ -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; diff --git a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.spec.ts b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.spec.ts index 21b680407b..4b38994fcb 100644 --- a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.spec.ts +++ b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.spec.ts @@ -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); @@ -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'); @@ -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); }); @@ -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'); @@ -161,8 +151,6 @@ 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 () => { @@ -170,7 +158,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'); @@ -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); }); @@ -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); @@ -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 () => { @@ -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(); @@ -259,23 +239,13 @@ 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(); @@ -283,15 +253,7 @@ describe('BpnConfigurationComponent', () => { 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')); }); });