Usability improvement for branch ui-refactoring

[bernhardreiter]

• An error remains if using the back button. Go to https://wid.cert-bund.de/.well-known/csaf/provider-metadata.json press on a GREEN link (without having access) and see the error message. Use "back" in the browser and see error message still is there, as is the text of the PMD.

See

• The "Distribution 1" list should be sorted by URL, so that same urls with different TLP values are belo each other.

• The OpenPGP links shall be hyperlinks.

• (optional) internal link to the same page should be indicated on a low level (we could use a different link color here or an icon)

• (optional) links to a different webview view should be indicated.

[bernhardreiter]

When opening https://wid.cert-bund.de/.well-known/csaf/white/bsi-wid-white.json and pressing on the large 2023 list, it takes ~4 seconds in my browser until there is any reaction in the app. The usability rule is to have a reaction at least 1 second after the user has clicked. Do we need a progress mouse pointer indication or so.

• Want an indication that the app is working on large lists.

[bernhardreiter]

On a single document e.g.https://wid.cert-bund.de/.well-known/csaf/white/2023/wid-sec-w-2023-2995.json

• Fix the layout width inconsistency, as shown in the screenshot the revision history does not use the full width. And the "vulnerability overview" also does not. Both should and thus avoid more scrolling.

BTW, the markdown boxes use the full width, thus making the layout inconsistent.

• Also the next level should be opened directly if there is only one next level waiting, see the "Product Tree" in the screenshot after one click.

[ThomasJunk]

Okay. I'm looking into those.

[ThomasJunk]

Commit https://github.com/csaf-poc/csaf_webview/commit/5dff25798ad39f2f2a1fc5918b1f1907f3506ce3 on the ui-refactoring branch clears the error messages when using the "BACK"-button in the browser (using the popstate event which is thrown on pressing the back button).

[ThomasJunk]

The "Distribution 1" list should be sorted by URL, so that same urls with different TLP values are belo each other.

is done in https://github.com/csaf-poc/csaf_webview/commit/161f2725f4eeeb31cb41b56f7c98aa088c85162c

[ThomasJunk]

The OpenPGP links shall be hyperlinks.

is adressed in https://github.com/csaf-poc/csaf_webview/commit/add447390101a679e0ebd2ce456ddb6b5dda2f3a

[ThomasJunk]

(optional) internal link to the same page should be indicated on a low level (we could use a different link color here or an icon)

(optional) links to a different webview view should be indicated.

From my current understandig there is a semantical distinction between "Advisory view" (single) and "Overview" as such. In order to meet the requirement of having links to a "different webview" marked as different these would include only actual links to advisories since these are opened on another route.

Perhaps we should this discuss later what this means in practice.

[ThomasJunk]

When opening https://wid.cert-bund.de/.well-known/csaf/white/bsi-wid-white.json and pressing on the large 2023 list, it takes ~4 seconds in my browser until there is any reaction in the app.

There is maybe a delay. On my machine / browser it just takes about a second. But I'll see if there is anything I could improve.

[ThomasJunk]

Want an indication that the app is working on large lists. Tried to adress that in https://github.com/csaf-poc/csaf_webview/commit/76448baed3f3cd6bf83b57a306ae485d41c96a7f

Tried several approaches but it doesn't work as expected. The class change is visible in the DOM-Inspector but the mouse cursor doesn't visibly change. I have to debug this later.

[ThomasJunk]

• Fix the layout width inconsistency, as shown in the screenshot the revision history does not use the full width. And the "vulnerability overview" also does not. Both should and thus avoid more scrolling.

is addressed in https://github.com/csaf-poc/csaf_webview/commit/22945e04d28f5796ec8de247c389f93598cf96d9

[ThomasJunk]

Also the next level should be opened directly if there is only one next level waiting, see the "Product Tree" in the screenshot after one click.

is adressed in https://github.com/csaf-poc/csaf_webview/commit/2e61f410bc950854dfc09869a34b1bb84cdbe15d

[ThomasJunk]

In order to test this issue one has to check out the ui-refactoring branch with latest commits.

Tests:

• [x] An error remains if using the back button. Expected: Error is gone.
• [x] The "Distribution 1" list should be sorted by URL. Expected: sorted list
• [x] The OpenPGP links shall be hyperlinks. Expected: rendering as hyperlinks
• [x] Fix the layout width inconsistency. Expected: revision history and Crosstable use as much space as is available
• [x] Next level should be opened directly if there is only one next level waiting. Expected: If e.g. "Full Product Names" is the only available subtree it should open immediately

[ThomasJunk]

Tested