UI/browser console update #20590

hashishaw · 2023-05-15T16:05:42Z

This PR updates the API Web Console in the following ways:

Add a `kv-get` command which will read the data or metadata of a KV v2 secret

The Vault CLI has a kv subcommand for managing and reading KV v2 secrets, but in the UI Web CLI the user must know the full API path that the kv commands map to.

Before in Web CLI

# read data for secret/foo
read secret/data/foo
# read metadata for secret/foo
read secret/metadata/foo

After in Web CLI

# read data for secret/foo
kv-get secret/foo
# read metadata for secret/foo
kv-get secret/foo -metadata

Fix the Open API Explorer filter input

We recently discovered that the input would blur each time you type a letter, which is a terrible user experience. The fix present in this PR executes the path filtering in-page on input and updates the namespace param on change (once the input is blurred)

Allow page to scroll fully when console panel is open

Before, if you had the console panel open and the page behind it had content that fell behind the console, it was inaccessible. Now, it adds padding to the main frame when the console is open so that the page is fully scrollable.

kiannaquach · 2023-05-15T20:38:39Z

ui/app/lib/console-helpers.ts

+    // will be "key=value" or "foo=bar=baz"
+    // split on the first =
+    // default to value of empty string
+    const [item = '', value = ''] = val.split(/=(.+)?/);


I didn't know you can default values when destructuring! Super cool!

kiannaquach · 2023-05-15T20:42:02Z

ui/app/lib/console-helpers.ts

+interface CommandLog {
+  type: string;
+  content?: string;
+}


Great idea to put the interface type definitions before each function :) I think it makes it more intuitive to know what types are needed for the specific function.

kiannaquach · 2023-05-15T20:53:59Z

ui/app/styles/components/console-ui-panel.scss

@@ -125,6 +125,10 @@ $console-close-height: 35px;
  min-height: 400px;
 }

+.main--console-open {


🙈 this a great css pattern that we learned from the offsite! should we use this as a standard pattern for the future? https://css-tricks.com/bem-101/

Yes, I was inspired by the offsite discussion! I think that is the plan although I know some of our CSS patterns are still in the air.

kiannaquach · 2023-05-15T21:21:14Z

ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs

@@ -11,7 +11,8 @@
    <div class="field is-marginless">
      <p class="control has-icons-left">
        <input
-          oninput={{queue (action "updateFilter") (action "proxyEvent")}}
+          oninput={{action "proxyEvent"}}
+          onchange={{action "updateFilter"}}


same here

Suggested change

onchange={{action "updateFilter"}}

{{on "change" (action "updateFilter")}}

we can, I was trying to change this file as little as possible, since it will need a glimmer refresh in the future. This is also the basic <input> rather than the ember's built-in so I'll go ahead and see if that will upgrade smoothly too.

Interesting, I was able to update the action to the newer syntax, but the input broke in the same way as before when I tried to update it to the builtin component 🤔 Shipping without that update for now

ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs

hellobontempo · 2023-05-16T16:38:36Z

ui/app/templates/components/console/log-help.hbs

@@ -6,6 +6,7 @@

 Commands:
  read        Read data and retrieves secrets
+  kv-read     Read data for kv v2 secret engines. Use -metadata flag to read metadata


I'm curious of the reason behind deviating from the vault CLI commands and using read here instead of get?

I was following the existing conventions on the web CLI, but open to changing. It already deviates quite a bit from the CLI

Yeah that's a good point about the kv commands. I think as you have it now is reasonable! You made some nice improvements to the help command so I think it's clear what the commands do

I think kv-read aligns nicely with the current web-cli commands. It would be great if all the commands directly mapped to the cli commands but since that is not the case then I think with the examples and the help command users have a good reference.

hellobontempo · 2023-05-16T16:39:28Z

ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs

        <input
-          oninput={{queue (action "updateFilter") (action "proxyEvent")}}


As an aside - I wonder if we should check for other queue actions in the codebase - was this causing the bug?

Not by virtue of using the queue, but the proxyEvent was causing the input to lose focus, which we only want to happen once the user is done typing

zofskeez

I pulled down the branch to test and all the changes look good. Nice work 👏. 🚢

zofskeez · 2023-05-16T16:37:28Z

ui/app/components/sidebar/frame.hbs

@@ -39,7 +39,7 @@
      </:footer>
    </Hds::SideNav>
  </Frame.Sidebar>
-  <Frame.Main id="app-main-content">
+  <Frame.Main id="app-main-content" class={{if this.console.isOpen "main--console-open"}}>


zofskeez · 2023-05-16T17:09:15Z

ui/app/templates/components/console/ui-panel.hbs

+    <p class="has-text-grey is-font-mono has-bottom-margin-s">Examples:</p>
+    <p class="has-text-grey is-font-mono">→ Write secrets to kv v1: write &lt;mount&gt;/my-secret foo=bar</p>
+    <p class="has-text-grey is-font-mono">→ List kv v1 secret keys: list &lt;mount&gt;/</p>
+    <p class="has-text-grey is-font-mono">→ Read a kv v1 secret: read &lt;mount&gt;/my-secret</p>
+    <p class="has-text-grey is-font-mono">→ Mount a kv v2 secret engine: write sys/mounts/&lt;mount&gt; type=kv
+      options=version=2</p>
+    <p class="has-text-grey is-font-mono">→ Read a kv v2 secret: kv-read &lt;mount&gt;/secret-path</p>
+    <p class="has-text-grey is-font-mono">→ Read a kv v2 secret's metadata: kv-read &lt;mount&gt;/secret-path -metadata</p>


Having examples is helpful 🎉

💯

Do we want to add somewhere that the commands listed are the ONLY ones we support?

hashishaw added the ui label May 15, 2023

hashishaw added this to the 1.14 milestone May 15, 2023

hashishaw marked this pull request as ready for review May 15, 2023 19:59

kiannaquach reviewed May 15, 2023

View reviewed changes

ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs Outdated Show resolved Hide resolved

hellobontempo reviewed May 16, 2023

View reviewed changes

zofskeez approved these changes May 16, 2023

View reviewed changes

hashishaw added 11 commits May 16, 2023 14:09

Split out extractDataAndFlags

a7d4e36

Add kv-read command to web CLI

16abaec

Fix input search blurring after each input

ac2fdce

Convert console-helpers to typescript

c83e080

Allow page to scroll fully when console is open

b164bd2

Add examples to ui console welcome panel

5869da1

VAULT-3291 update web console start text

b5b211b

Use new action syntax on input

60fdd37

Add changelog

afb9eae

Fix tests

689f952

change CLI method to kv-get, add test coverage

d0551ca

hashishaw force-pushed the ui/console-update branch from 0dfc1f4 to d0551ca Compare May 17, 2023 16:03

Remove logs

638872b

hashishaw merged commit 7c66970 into main May 17, 2023

hashishaw deleted the ui/console-update branch May 17, 2023 16:41

hellobontempo changed the title ~~UI/console update~~ UI/browser console update Jun 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI/browser console update #20590

UI/browser console update #20590

hashishaw commented May 15, 2023 •

edited

Loading

kiannaquach May 15, 2023

kiannaquach May 15, 2023

kiannaquach May 15, 2023

hashishaw May 16, 2023

kiannaquach May 15, 2023 •

edited

Loading

hashishaw May 16, 2023

hashishaw May 16, 2023

hellobontempo May 16, 2023

hashishaw May 16, 2023

hellobontempo May 16, 2023

zofskeez May 16, 2023

hellobontempo May 16, 2023

hashishaw May 16, 2023

zofskeez left a comment

zofskeez May 16, 2023

zofskeez May 16, 2023

hellobontempo May 16, 2023

	onchange={{action "updateFilter"}}
	{{on "change" (action "updateFilter")}}

		<input
		oninput={{queue (action "updateFilter") (action "proxyEvent")}}

UI/browser console update #20590

UI/browser console update #20590

Conversation

hashishaw commented May 15, 2023 • edited Loading

Add a kv-get command which will read the data or metadata of a KV v2 secret

Before in Web CLI

After in Web CLI

Fix the Open API Explorer filter input

Allow page to scroll fully when console panel is open

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kiannaquach May 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zofskeez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hashishaw commented May 15, 2023 •

edited

Loading

Add a `kv-get` command which will read the data or metadata of a KV v2 secret

kiannaquach May 15, 2023 •

edited

Loading