Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement: give option to refresh namespace dropdown #8442

Merged
merged 9 commits into from
Mar 5, 2020
Merged

Improvement: give option to refresh namespace dropdown #8442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
27763e4
move manage and add refresh action
Monkeychip Feb 21, 2020
921b8c8
move title of current namespace
Monkeychip Feb 21, 2020
bd22330
finish menu redesign
Monkeychip Feb 23, 2020
0e48c0a
Merge branch 'master' into namespace-bug
Monkeychip Mar 2, 2020
e66ce6d
Merge branch 'master' into namespace-bug
Monkeychip Mar 2, 2020
57798d7
conditionally hide or show manage namespaces
Monkeychip Mar 5, 2020
bb95d8e
Merge branch 'master' into namespace-bug
Monkeychip Mar 5, 2020
e1171d2
fix quotes
Monkeychip Mar 5, 2020
ceb304f
Merge branch 'namespace-bug' of github.com:hashicorp/vault into names…
Monkeychip Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions ui/app/components/namespace-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default Component.extend({
store: service(),
namespace: null,
listCapability: null,
canList: alias('listCapability.canList'),
canList: false,

init() {
this._super(...arguments);
Expand All @@ -38,14 +38,13 @@ export default Component.extend({

fetchListCapability: task(function*() {
try {
if (this.listCapability) {
yield this.listCapability.reload();
return;
}
let capability = yield this.store.findRecord('capabilities', 'sys/namespaces/');
this.set('listCapability', capability);
this.set('canList', true);
} catch (e) {
//do nothing here
// If error out on findRecord call it's because you don't have permissions
// and therefor don't have permission to manage namespaces
this.set('canList', false);
}
}),
setForAnimation: task(function*() {
Expand Down Expand Up @@ -157,4 +156,10 @@ export default Component.extend({
let parts = namespace.split('/');
return parts[parts.length - 1];
}),

actions: {
refreshNamespaceList() {
this.get('namespaceService.findNamespacesForUser').perform();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to provide any params here to make sure the result we fetch isn't cached?

Copy link
Contributor Author

@Monkeychip Monkeychip Mar 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. Basically, I'm running the API fetch regardless. It's essentially just running the same fetch that happens on a page reload or when navigating to a different page. It could be cached, but I'm overriding it with a new fetch response.

},
},
});
19 changes: 11 additions & 8 deletions ui/app/styles/components/namespace-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,14 @@
}

.namespace-header-bar {
padding: $size-11 $size-10;
box-shadow: $box-shadow;
padding: $size-11 $size-9;
border-bottom: 1px solid rgba($black, 0.1);
font-weight: $font-weight-semibold;
min-height: 32px;
.namespace-manage-link {
text-decoration: none;
}
}

.current-namespace {
border-bottom: 1px solid rgba($black, 0.1);
.namespace-manage-link {
border-top: 1px solid rgba($black, 0.1);
}

.namespace-list {
Expand All @@ -104,10 +101,16 @@
color: $black;
text-decoration: none;
font-weight: $font-weight-semibold;
padding: $size-10 $size-9;
padding: $size-10 $size-9 $size-10 0;
}

.namespace-link.is-current {
margin-top: $size-8;
margin-right: -$size-10;
}

.leaf-panel {
padding: $size-11 $size-9;
transition: transform ease-in-out 250ms;
will-change: transform;
transform: translateX(0);
Expand Down
71 changes: 47 additions & 24 deletions ui/app/templates/components/namespace-picker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,41 @@
/>
</D.trigger>
<D.content @class="namespace-picker-content">
<div class="is-mobile level-left">
{{#if (not isUserRootNamespace)}}
<NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
<Chevron
@direction="left"
@class="has-text-grey"
/>
</NamespaceLink>
{{/if}}
<h5 class="list-header">Current namespace</h5>
</div>
<div class="namespace-header-bar level is-mobile">
<div class="level-left">
{{#if (not isUserRootNamespace)}}
<NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link button is-ghost icon">
<Chevron
@direction="left"
@class="has-text-info"
/>
</NamespaceLink>
{{/if}}
</div>
<div class="level-right">
{{#if canList}}
{{#link-to "vault.cluster.access.namespaces" class="namespace-manage-link"}}
Manage
{{/link-to}}
{{/if}}
<header >
<div class="level is-mobile namespace-link">
<span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
<span class="level-right">
<Icon @glyph="check-circle-outline" class="has-text-success" />
</span>
</div>
</header>
</div>
</div>
<header class="current-namespace">
<h5 class="list-header">Current namespace</h5>
<div class="level is-mobile namespace-link">
<span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
<span class="level-right">
<Icon @glyph="check-circle-outline" class="has-text-success" />
</span>
</div>
</header>
<div class="namespace-list {{if isAnimating "animated-list"}}">
<div class="is-mobile level-left">
{{#if (not isUserRootNamespace)}}
<NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
<Chevron
@direction="left"
@class="has-text-grey"
/>
</NamespaceLink>
{{/if}}
<h5 class="list-header">Namespaces</h5>
</div>
{{#if (contains '' lastMenuLeaves)}}
{{!-- leaf is '' which is the root namespace, and then we need to iterate the root leaves --}}
<div class="leaf-panel
Expand All @@ -69,6 +75,23 @@
<NamespaceLink @targetNamespace={{concat leaf "/" leafName}} @class="namespace-link" @showLastSegment={{true}} />
{{/each-in~}}</div>
{{/each}}
{{#if canList}}
<div class="leaf-panel leaf-panel-current ">
<LinkTo
@params={{array "vault.cluster.access.namespaces"}}
class="is-block namespace-link namespace-manage-link"
>
<div class="level is-mobile">
<span class="level-left">Manage namespaces</span>
<span class="level-right">
<button type="button" class="button is-ghost icon" onclick={{action "refreshNamespaceList"}}>
<Icon @glyph="refresh-default" class="has-text-grey" />
</button>
</span>
</div>
</LinkTo>
</div>
{{/if}}
</div>
</D.content>
</BasicDropdown>
Expand Down