Namespace Picker Updates #19753

zofskeez · 2023-03-24T19:11:43Z

The following updates have been made to the namespace picker component for use in the sidebar:

always display the namespace when user has access to the feature (defaults to root)
updates icons for current selected namespace
removes back action from current namespace heading
removes green check icon from current namespace in menu
updates menu styling

…namespace-picker-updates

zofskeez · 2023-03-30T18:44:43Z

ui/app/styles/components/namespace-picker.scss

-  @include from($mobile) {
-    margin-left: -$spacing-xs;
-    padding: $spacing-xxs 0 $spacing-xxs $spacing-s;
-    width: auto;
-  }


Since the sidebar collapses on smaller breakpoints we don't need the namespace picker to be responsive

I love to hear this!

zofskeez · 2023-03-30T18:47:18Z

ui/app/templates/components/namespace-picker.hbs

-{{#if (and (not this.accessibleNamespaces.length) this.inRootNamespace)}}
-  <div class="namespace-picker no-namespaces">
-    {{! Just yield the logo if they're in the root namespace and only have access to it }}
-    {{yield}}
-  </div>


The namespace picker is now always displayed. Namespaces the user does not have access to will not show up in the menu.

What if there are no namespaces? Does it still show up but with nothing to select? Do we have an empty state message telling the user why they don't see anything.

I updated the default state to display as root.

Monkeychip · 2023-03-30T19:02:51Z

ui/app/styles/components/namespace-picker.scss

@@ -5,65 +5,33 @@

 .namespace-picker {
  position: relative;
-  color: $white;
+  color: var(--token-color-palette-neutral-300);


This makes me think I should make a ticket to replace all vault colors with hds colors... just thinking out loud.

Yes that will be a part of the HDS adoption epic work. I'm not sure if there are individual tasks for that yet or not.

Monkeychip · 2023-03-30T19:04:04Z

ui/app/styles/components/namespace-picker.scss

@@ -95,6 +60,11 @@

 .namespace-manage-link {


Any chance this could easily be solved with a helper instead of overriding the button for this specific case? We override elements and main classes a lot in components, and I want to push for helpers when practical.

(Also, I wrote that CSS so blame me 100%)

Monkeychip · 2023-03-30T19:04:30Z

ui/app/styles/components/namespace-picker.scss

@@ -112,6 +82,11 @@
 .namespace-link.is-current {
  margin-top: $size-8;
  margin-right: -$size-10;
+
+  svg {


same comment as above.

Monkeychip · 2023-03-30T19:05:52Z

ui/app/styles/components/namespace-picker.scss

-  @include from($mobile) {
-    margin-left: $size-10;
-  }
+  margin-left: $spacing-xs;


I'm being a little pedantic here, but can we use a helper if we have one for the margin situation? We also may have a font-size helper as well. If it's a pain, ignore me, just pushing helper usage instead of component specific styling when I can.

I didn't want to get too in the weeds with removing classes in favor of helpers since there is already a namespace stylesheet. I'm not sure if we have fully fleshed out the plan for updating styling post bulma yet. FWIW it doesn't look like there is a 1rem font size helper class.

Monkeychip · 2023-03-30T19:09:41Z

ui/app/templates/components/namespace-picker.hbs

        <div class="is-mobile level-left">
          {{#unless this.isUserRootNamespace}}
            <NamespaceLink
              @targetNamespace={{or
                (object-at (dec 2 this.menuLeaves.length) this.lastMenuLeaves)
                this.auth.authData.userRootNamespace
              }}
-              @class="namespace-link is-current button is-ghost icon"
+              @class="namespace-link is-current button icon is-transparent"


we have an icon.is-blue and a button.is-transparent class—not very consistent, I know. Maybe it's the ordering of the class names, what do you think about having the icon come last because it's really the button.is-transparent that is going to do some styling.

Sure I can update that. Just for future thought, if we are interested in class name order on elements we should automate something to enforce that (alphabetical or something else) since everyone will put them in likely a random order.

Something else to maybe keep in mind while we establish our updated styling patterns is that something like a button-transparent class that inherits the button styling and adds the transparency is probably more descriptive than having a button and is-transparent class if is-transparent only applies to buttons.

yes, and yes. Totally agree.

Monkeychip · 2023-03-30T19:12:21Z

ui/app/templates/components/namespace-picker.hbs

            <div
              class="leaf-panel
                {{if (eq leaf this.currentLeaf) 'leaf-panel-current' 'leaf-panel-left'}}
                {{if (and this.isAdding (eq leaf this.changedLeaf)) 'leaf-panel-adding'}}
                {{if (and (not this.isAdding) (eq leaf this.changedLeaf)) 'leaf-panel-exiting'}}
                "
            >
-              {{~#each-in (get this.namespaceTree leaf) as |leafName|}}


How did that each even work with the ~? Does this mean something I don't know about or was this an error?

Ya I was surprised by that too! I'm pretty sure that used to be a private helper (maybe)? Not sure why that wasn't raising a warning.

Monkeychip

Nothing blocking just a couple of scss things. One question, what do you think about moving the glimmerizing the namespace picker into this project? Would having that updated help your development or hinder it? I feel like even just having the documentation would be helpful.

zofskeez · 2023-03-30T20:28:19Z

One question, what do you think about moving the glimmerizing the namespace picker into this project? Would having that updated help your development or hinder it? I feel like even just having the documentation would be helpful.

Great question! I thought about it. Several times actually 😁. I ended up feeling like it was out of scope since these were primarily style/visual changes. I was preparing to take it on if we were going to move forward with the functional updates as part of this project. I created a ticket to update the navigation and added a suggestion to the description to glimmerize at that time. The component logic is 5 years old and was concerned that refactoring could lead to bugs that are unrelated to the sidebar nav work. Some of the code to generate the menu links seemed like it could be simplified which I would want to update as part of the component refresh.

* Add Helios Design System Components (#19278) * adds hds dependency * updates reset import path * sets minifyCSS advanced option to false * Remove node-sass (#19376) * removes node-sass and fixes sass compilation * fixes active tab li class * Sidebar Navigation Components (#19446) * links ember-shared-components addon and imports styles * adds sidebar frame and nav components * updates HcNav component name to HcAppFrame and adds sidebar UserMenu component * adds tests for sidebar components * fixes tests * updates user menu styling * fixes typos in nav cluster component * changes padding value in sidebar stylesheet to use variable * Replace and remove old nav components with new ones (#19447) * links ember-shared-components addon and imports styles * adds sidebar frame and nav components * updates activeCluster on auth service and adds activeSession prop for sidebar visibility * replaces old nav components with new ones in templates * fixes sidebar visibility issue and updates user menu label class * removes NavHeader usage * adds clients index route to redirect to dashboard * removes unused HcAppFrame footer block and reduces page header top margin * Nav component cleanup (#19681) * removes nav-header components * removes navbar styling * removes status-menu component and styles * removes cluster and auth info components * removes menu-sidebar component and styling * fixes tests * Console Panel Updates (#19741) * updates console panel styling * adds test for opening and closing the console panel * updates console panel background color to use hds token * adds right margin to console panel input * updates link-status banner styling * updates hc nav components to new API * Namespace Picker Updates (#19753) * updates namespace-picker * updates namespace picker menu styling * adds bottom margin to env banner * updates class order on namespace picker link * restores manage namespaces refresh icon * removes manage namespaces nav icon * removes home link component (#20027) * Auth and Error View Updates (#19749) * adds vault logo to auth page * updates top level error template * updates loading substate handling and moves policies link from access to cluster nav (#20033) * moves console panel to bottom of viewport (#20183) * HDS Sidebar Nav Components (#20197) * updates nav components to hds * upgrades project yarn version to 3.5 * fixes issues in app frame component * updates sidenav actions to use icon button component * Sidebar navigation acceptance tests (#20270) * adds sidebar navigation acceptance tests and fixes other test failures * console panel styling tweaks * bumps addon version * remove and ignore yarn install-state file * fixes auth service and console tests * moves classes from deleted files after bulma merge * fixes sass syntax errors blocking build * cleans up dart sass deprecation warnings * adds changelog entry * hides namespace picker when sidebar nav panel is minimized * style tweaks * fixes sidebar nav tests * bumps hds addon to latest version and removes style override * updates modify-passthrough-response helper * updates sidebar nav tests * mfa-setup test fix attempt * fixes cluster mfa setup test * remove deprecated yarn ignore-optional flag from makefile * removes another instance of yarn ignore-optional and updates ui readme * removes unsupported yarn verbose flag from ci-helper * hides nav headings when user does not have access to any sub links * removes unused optional deps and moves lint-staged to dev deps * updates has-permission helper and permissions service tests * fixes issue with console panel not filling container width

updates namespace-picker

8ede6c1

zofskeez added ui pr/no-changelog labels Mar 24, 2023

zofskeez added this to the 1.14 milestone Mar 24, 2023

zofskeez added 3 commits March 29, 2023 16:42

Merge branch 'ui/VAULT-12799/sidebar-navigation' into ui/VAULT-14459/…

0744721

…namespace-picker-updates

updates namespace picker menu styling

a33d89a

adds bottom margin to env banner

b1ba121

zofskeez commented Mar 30, 2023

View reviewed changes

zofskeez marked this pull request as ready for review March 30, 2023 18:48

Monkeychip reviewed Mar 30, 2023

View reviewed changes

Monkeychip approved these changes Mar 30, 2023

View reviewed changes

updates class order on namespace picker link

41dd128

zofskeez added 2 commits March 30, 2023 14:56

restores manage namespaces refresh icon

3184b92

removes manage namespaces nav icon

9da1aa5

zofskeez merged commit fbd517f into ui/VAULT-12799/sidebar-navigation Mar 30, 2023

zofskeez deleted the ui/VAULT-14459/namespace-picker-updates branch March 30, 2023 21:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Namespace Picker Updates #19753

Namespace Picker Updates #19753

zofskeez commented Mar 24, 2023 •

edited

Loading

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023 •

edited

Loading

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023 •

edited

Loading

Monkeychip Mar 30, 2023

Monkeychip Mar 30, 2023

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023

Monkeychip Mar 30, 2023

zofskeez Mar 30, 2023

Monkeychip left a comment

zofskeez commented Mar 30, 2023

Namespace Picker Updates #19753

Namespace Picker Updates #19753

Conversation

zofskeez commented Mar 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zofskeez Mar 30, 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

Monkeychip Mar 30, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Monkeychip left a comment

Choose a reason for hiding this comment

zofskeez commented Mar 30, 2023

zofskeez commented Mar 24, 2023 •

edited

Loading

zofskeez Mar 30, 2023 •

edited

Loading

Monkeychip Mar 30, 2023 •

edited

Loading