Usability improvement for branch ui-refactoring - Githubissues

csaf-poc / csaf_webview

Web app (module) to display a CSAF 2 document and to browse CSAF 2 ROLIE feeds. ⚠️ The web demo is often not allowed to access servers:

https://csaf-poc.github.io/csaf_webview/

1 stars 3 forks source link

Usability improvement for branch ui-refactoring #35

Closed bernhardreiter closed 7 months ago

bernhardreiter commented 7 months ago

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

Screenshot_20231124_160819

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 commented 7 months ago

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 commented 7 months ago

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.

Screenshot_20231124_162418

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 commented 7 months ago

Okay. I'm looking into those.

ThomasJunk commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

The OpenPGP links shall be hyperlinks.

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

ThomasJunk commented 7 months ago

(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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

Tested