From bb923d87053bbfe41f5b050091e791d7ea16e7fc Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 21 Dec 2021 06:49:18 +0000 Subject: [PATCH] ui: Various empty state improvements/fixups (#11892) * ui: Add login button to per service intentions for zero results * Add login button and consistent header for when you have zero nodes * `services` doesn't exists use `items` consequently: Previous to this fix we would not show a more tailored message for when you empty result set was due to a user search rather than an empty result set straight from the backend * Fix `error` > `@error` in ErrorState plus code formatting and more docs * Changelog --- .changelog/11892.txt | 3 + .../app/components/error-state/README.mdx | 21 +++++- .../app/components/error-state/index.hbs | 64 ++++++++++++++----- .../app/templates/dc/nodes/index.hbs | 13 +++- .../app/templates/dc/services/index.hbs | 4 +- .../dc/services/show/intentions/index.hbs | 4 +- 6 files changed, 86 insertions(+), 23 deletions(-) create mode 100644 .changelog/11892.txt diff --git a/.changelog/11892.txt b/.changelog/11892.txt new file mode 100644 index 000000000..5709c6569 --- /dev/null +++ b/.changelog/11892.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Ensure a login buttons appear for some error states, plus text amends +``` diff --git a/ui/packages/consul-ui/app/components/error-state/README.mdx b/ui/packages/consul-ui/app/components/error-state/README.mdx index 252b41937..2397d4dde 100644 --- a/ui/packages/consul-ui/app/components/error-state/README.mdx +++ b/ui/packages/consul-ui/app/components/error-state/README.mdx @@ -7,8 +7,11 @@ for more details. Using this component for all of our errors means we can show a consistent error page for generic errors. -This component show slighltly different visuals and copy depending on the -`status` of the error (the status is generally a HTTP error code) +This component show slightly different visuals and copy depending on the +`status` of the error (the status is generally a HTTP error code). + +Please note: The examples below use a `hash` for demonstration purposes, you'll +probably just be using an `error` object in real-life. ## Arguments @@ -17,12 +20,26 @@ This component show slighltly different visuals and copy depending on the | `login` | `Function` | `undefined` | A login action to call when the login button is pressed (if not provided no login button will be shown | | `error` | `Object` | `undefined` | 'Consul UI error shaped' JSON `{status: String, message: String, detail: String}` | +Specifically 403 errors **always** use the same header/body copy, this is hardcoded in and not currently overridable. + ```hbs preview-template ``` +Other StatusCodes have a global default text but these *are* overridable by using the message/detail properties of the Consul UI shaped errors. + +```hbs preview-template + +``` + As with `EmptyState` you can optionally chose to show a login button using the `@login` argument. diff --git a/ui/packages/consul-ui/app/components/error-state/index.hbs b/ui/packages/consul-ui/app/components/error-state/index.hbs index d32ad7c0e..d05bb30b6 100644 --- a/ui/packages/consul-ui/app/components/error-state/index.hbs +++ b/ui/packages/consul-ui/app/components/error-state/index.hbs @@ -4,43 +4,63 @@ @login={{@login}} > -

{{or @error.message "Consul returned an error"}}

+

+ {{or @error.message "Consul returned an error"}} +

{{#if @error.status }} -

Error {{@error.status}}

+

+ Error {{@error.status}} +

{{/if}} - {{#if error.detail}} -

- {{error.detail}} -

- {{else}} -

+

+ {{#if @error.detail}} + {{@error.detail}} + {{else}} You may have visited a URL that is loading an unknown resource, so you can try going back to the root or try re-submitting your ACL Token/SecretID by going back to ACLs. -

- {{/if}} + {{/if}} +

  • - Go back + + Go back +
  • - Read the documentation + + Read the documentation +
    • {{else}} -

    You are not authorized

    +

    + You are not authorized +

    -

    Error 403

    +

    + Error {{@error.status}} +

    @@ -49,10 +69,20 @@

  • - Read the documentation + + Read the documentation +
  • - Follow the guide + + Follow the guide +
    • diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs index 136b337db..7c75724d1 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/index.hbs @@ -90,7 +90,18 @@ as |route|> /> - + + +

    + {{#if (gt items.length 0)}} + No nodes found + {{else}} + Welcome to Nodes + {{/if}} +

    +

    There don't seem to be any registered nodes, or you may not have access to view nodes yet. diff --git a/ui/packages/consul-ui/app/templates/dc/services/index.hbs b/ui/packages/consul-ui/app/templates/dc/services/index.hbs index 27342bf3c..3d6e04933 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/index.hbs @@ -105,7 +105,7 @@ as |sort filters items partition nspace|}} >

    - {{#if (gt services.length 0)}} + {{#if (gt items.length 0)}} No services found {{else}} Welcome to Services @@ -114,7 +114,7 @@ as |sort filters items partition nspace|}}

    - {{#if (gt services.length 0)}} + {{#if (gt items.length 0)}} No services where found matching that search, or you may not have access to view the services you are searching for. {{else}} There don't seem to be any registered services, or you may not have access to view services yet. diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs index 87d2f9649..003d915f6 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs @@ -89,7 +89,9 @@ as |route|> - +

    {{#if (gt items.length 0)}}