CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toolbar regions to align refresh button to the right (#1098)

Browse Source 
* feat: 🎸 implement toolbar regions and apply to admin sessions

* feat: 🎸 Add toolbar regions for desktop sessions and targets

✅ Closes: ICU-4198

Co-authored-by: Randall Morey <randall@randallmorey.com>
This commit is contained in:
ZedandRandall Morey authored and GitHub committed 2022-05-03 09:46:47 -04:00
1 parent a8ae8d28df
commit 8545697b43
11 files changed
+272 -322
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/toolbar/index.hbs
+10 -1
View File
@@ -1,3 +1,12 @@
<div ...attributes class='rose-toolbar'>
{{yield}}
{{yield
(hash
primary=(component
'rose/anonymous' tagName='span' class='rose-toolbar-primary'
)
secondary=(component
'rose/anonymous' tagName='span' class='rose-toolbar-secondary'
)
)
}}
</div>
addons/rose/addon/components/rose/toolbar/index.stories.mdx
+9 -1
View File
@@ -6,10 +6,18 @@ import { action } from '@storybook/addon-actions';
# Toolbar
renders a toolbar
Renders a toolbar. Items may be added directly into the toolbar, or within
predefined "regions" for left and right alignment, respectively.
```htmlbars
<Rose::Toolbar as |toolbar|>
// place items here
<toolbar.primary>
// place left-aligned items here
</toolbar.primary>
<toolbar.secondary>
// place right-aligned items here
</toolbar.secondary>
</Rose::Toolbar>
```
addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+11
View File
@@ -6,9 +6,20 @@ $xxs: sizing.rems(xxs); // 4
$xxxxs: sizing.rems(xxxxs); // 1
.rose-toolbar {
display: flex;
background-color: var(--ui-gray-subtler-6);
padding: $xxs + $xxxxs;
.rose-toolbar-primary,
.rose-toolbar-secondary {
display: flex;
flex-grow: 1;
}
.rose-toolbar-secondary {
justify-content: flex-end;
}
// inside a toolbar, forms are always full-width
.rose-form,
.rose-form:not(.full-width) {
addons/rose/package.json
+1 -1
View File
@@ -17,7 +17,7 @@
"lint:js": "eslint .",
"lint:sass": "sass-lint -v -q",
"format": "npm-run-all format:*",
"format:hbs": "prettier --write 'addon/**/*.hbs'",
"format:hbs": "prettier --write '{addon,tests}/**/*.hbs'",
"format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
"format:sass": "prettier --write addon/**/*.scss",
"lint:js:fix": "eslint . --fix",
addons/rose/tests/dummy/app/controllers/index.js
+2
View File
@@ -14,6 +14,8 @@ export default class IndexController extends Controller {
@tracked items = [...possibleItems];
@tracked selectedItems = [possibleItems[2]];
now = new Date();
// =actions
@action
addons/rose/tests/dummy/app/templates/index.hbs
+26 -120
View File
@@ -1,120 +1,26 @@
<Rose::LinkButton
@route='index'
@style='primary'
@iconRight='flight-icons/svg/entry-point-16'
>
Content
</Rose::LinkButton>
<h2>Checkbox Group</h2>
<Rose::Form::Checkbox::Group
@items={{this.items}}
@selectedItems={{this.selectedItems}}
@onChange={{this.checkboxGroupChanged}}
as |group|
>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</Rose::Form::Checkbox::Group>
<p>
Items selected:
{{#each this.selectedItems as |selected|}}
{{selected.id}},
{{/each}}
</p>
<Rose::Button @style='primary' {{on 'click' this.clearSelected}}>
Clear Selected Items
</Rose::Button>
<Rose::Separator />
<h2>KeyValue Dropdown</h2>
<Rose::Dropdown
@text='Credential library details'
@showCaret={{true}}
@ignoreClickInside={{true}}
as |dropdown|
>
<dropdown.key-value>
<:key>ID</:key>
<:value>cl_nbv9375hLHs</:value>
</dropdown.key-value>
<dropdown.separator />
<dropdown.key-value>
<:key>Name</:key>
<:value>Key/Value</:value>
</dropdown.key-value>
<dropdown.separator />
<dropdown.key-value>
<:key>Description</:key>
<:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
illo ratione libero ducimus magnam, porro sed provident repellat mollitia
a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati
dolores quasi natus?</:value>
</dropdown.key-value>
</Rose::Dropdown>
<h2>Condensed dropdown</h2>
<Rose::Dropdown
@style='condensed'
@text='Credential library details'
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title='ID'>
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title='Name'>
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title='Description'>
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
vitae sollicitudin turpis.</dropdown.item>
</dropdown.section>
</Rose::Dropdown>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@text='Credential library details'
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title='ID'>
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title='Name'>
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title='Description'>
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
vitae sollicitudin turpis.</dropdown.item>
</dropdown.section>
</Rose::Dropdown>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@text='Credential library details'
@showCaret={{true}}
as |dropdown|
>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item 2</dropdown.link>
</Rose::Dropdown>
<Rose::Toolbar as |toolbar|>
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
>Clear somthing</Rose::Button>
<toolbar.primary>
<Rose::Form>
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
>Clear somthing</Rose::Button>
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
>Clear somthing</Rose::Button>
</Rose::Form>
</toolbar.primary>
<toolbar.secondary>
<Rose::Form>
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
>Refresh</Rose::Button>
</Rose::Form>
</toolbar.secondary>
</Rose::Toolbar>
ui/admin/app/styles/app.scss
+3 -1
View File
@@ -221,7 +221,9 @@
// Spinning animation for refresh button icon
.is-loading .rose-icon {
@keyframes hds-flight-icon-animation-rotation {
to {transform: rotate(360deg);}
to {
transform: rotate(360deg);
}
}
> svg {
ui/admin/app/templates/scopes/scope/sessions/index.hbs
+46 -40
View File
@@ -20,51 +20,57 @@
(has-resource-filter-selections 'scopes.scope.sessions' 'status')
)
}}
<Rose::Toolbar>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.sessions' 'status')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'form.' filter.name '.label')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<form.checkboxGroup
@name={{filter.name}}
@items={{filter.allowedValues}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
<Rose::Toolbar as |toolbar|>
<toolbar.primary>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.sessions' 'status')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'form.' filter.name '.label')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<dropdown.item>
<group.checkbox
@label={{t
(concat 'resources.session.status.' group.item)
}}
value={{group.item}}
/>
</dropdown.item>
</form.checkboxGroup>
</Rose::Dropdown>
{{/with}}
<form.checkboxGroup
@name={{filter.name}}
@items={{filter.allowedValues}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<dropdown.item>
<group.checkbox
@label={{t
(concat 'resources.session.status.' group.item)
}}
value={{group.item}}
/>
</dropdown.item>
</form.checkboxGroup>
</Rose::Dropdown>
{{/with}}
{{#if
(has-resource-filter-selections 'scopes.scope.sessions' 'status')
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
{{#if
(has-resource-filter-selections
'scopes.scope.sessions' 'status'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
</Rose::Form>
</toolbar.primary>
<toolbar.secondary>
<ToolbarRefresher @onClick={{route-action 'refreshSessions'}} />
</toolbar.secondary>
</Rose::Form>
</Rose::Toolbar>
{{/if}}
{{/if}}
ui/desktop/app/styles/app.scss
+3 -1
View File
@@ -487,7 +487,9 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
// Spinning animation for refresh button icon
.is-loading .rose-icon {
@keyframes hds-flight-icon-animation-rotation {
to {transform: rotate(360deg);}
to {
transform: rotate(360deg);
}
}
> svg {
ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+94 -92
View File
@@ -18,104 +18,106 @@
)
)
}}
<Rose::Toolbar>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.projects.sessions' 'status')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'form.' filter.name '.label')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<form.checkboxGroup
@name={{filter.name}}
@items={{filter.allowedValues}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
<Rose::Toolbar as |toolbar|>
<toolbar.primary>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.projects.sessions' 'status')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'form.' filter.name '.label')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<dropdown.item>
<group.checkbox
@label={{t
(concat 'resources.session.status.' group.item)
}}
value={{group.item}}
/>
</dropdown.item>
</form.checkboxGroup>
</Rose::Dropdown>
{{/with}}
<form.checkboxGroup
@name={{filter.name}}
@items={{filter.allowedValues}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<dropdown.item>
<group.checkbox
@label={{t
(concat 'resources.session.status.' group.item)
}}
value={{group.item}}
/>
</dropdown.item>
</form.checkboxGroup>
</Rose::Dropdown>
{{/with}}
{{#with
(resource-filter 'scopes.scope.projects.sessions' 'project')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'resources.' filter.name '.title')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<ul>
{{#with
(group-by filter.allowedValues 'scopeModel')
as |groups|
}}
{{#each groups as |groupedItems|}}
<li>
<dropdown.item>
<Rose::Icon
@name='flight-icons/svg/org-16'
@size='medium'
/>
{{groupedItems.key.displayName}}
</dropdown.item>
<ul class='indent-label-2'>
<form.checkboxGroup
@name={{filter.name}}
@items={{groupedItems.items}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<li>
<dropdown.item>
<group.checkbox
@label={{group.item.displayName}}
value={{group.item}}
/>
</dropdown.item>
</li>
</form.checkboxGroup>
</ul>
</li>
{{/each}}
{{/with}}
</ul>
{{#with
(resource-filter 'scopes.scope.projects.sessions' 'project')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'resources.' filter.name '.title')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<ul>
{{#with
(group-by filter.allowedValues 'scopeModel')
as |groups|
}}
{{#each groups as |groupedItems|}}
<li>
<dropdown.item>
<Rose::Icon
@name='flight-icons/svg/org-16'
@size='medium'
/>
{{groupedItems.key.displayName}}
</dropdown.item>
<ul class='indent-label-2'>
<form.checkboxGroup
@name={{filter.name}}
@items={{groupedItems.items}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<li>
<dropdown.item>
<group.checkbox
@label={{group.item.displayName}}
value={{group.item}}
/>
</dropdown.item>
</li>
</form.checkboxGroup>
</ul>
</li>
{{/each}}
{{/with}}
</ul>
</Rose::Dropdown>
{{/with}}
{{! }}
</Rose::Dropdown>
{{/with}}
{{#if
(has-resource-filter-selections
'scopes.scope.projects.sessions' 'status' 'project'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
{{#if
(has-resource-filter-selections
'scopes.scope.projects.sessions' 'status' 'project'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
</Rose::Form>
</toolbar.primary>
<toolbar.secondary>
<ToolbarRefresher @onClick={{route-action 'refreshSessions'}} />
</toolbar.secondary>
</Rose::Form>
</Rose::Toolbar>
{{/if}}
{{/if}}
ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+67 -65
View File
@@ -18,75 +18,77 @@
)
)
}}
<Rose::Toolbar>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.projects.targets' 'project')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'resources.' filter.name '.title')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<ul>
{{#with
(group-by filter.allowedValues 'scopeModel')
as |groups|
}}
{{#each groups as |groupedItems|}}
<li>
<dropdown.item>
<Rose::Icon
@name='flight-icons/svg/org-16'
@size='medium'
/>
{{groupedItems.key.displayName}}
</dropdown.item>
<ul class='indent-label-2'>
<form.checkboxGroup
@name={{filter.name}}
@items={{groupedItems.items}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<li>
<dropdown.item>
<group.checkbox
@label={{group.item.displayName}}
value={{group.item}}
/>
</dropdown.item>
</li>
</form.checkboxGroup>
</ul>
</li>
{{/each}}
{{/with}}
</ul>
<Rose::Toolbar as |toolbar|>
<toolbar.primary>
<Rose::Form as |form|>
{{#with
(resource-filter 'scopes.scope.projects.targets' 'project')
as |filter|
}}
<Rose::Dropdown
@text={{t (concat 'resources.' filter.name '.title')}}
@count={{filter.selectedValue.length}}
@ignoreClickInside={{true}}
as |dropdown|
>
<ul>
{{#with
(group-by filter.allowedValues 'scopeModel')
as |groups|
}}
{{#each groups as |groupedItems|}}
<li>
<dropdown.item>
<Rose::Icon
@name='flight-icons/svg/org-16'
@size='medium'
/>
{{groupedItems.key.displayName}}
</dropdown.item>
<ul class='indent-label-2'>
<form.checkboxGroup
@name={{filter.name}}
@items={{groupedItems.items}}
@selectedItems={{filter.selectedValue}}
@onChange={{route-action 'filterBy' filter.name}}
as |group|
>
<li>
<dropdown.item>
<group.checkbox
@label={{group.item.displayName}}
value={{group.item}}
/>
</dropdown.item>
</li>
</form.checkboxGroup>
</ul>
</li>
{{/each}}
{{/with}}
</ul>
</Rose::Dropdown>
{{/with}}
{{! }}
</Rose::Dropdown>
{{/with}}
{{#if
(has-resource-filter-selections
'scopes.scope.projects.targets' 'project'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
{{#if
(has-resource-filter-selections
'scopes.scope.projects.targets' 'project'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
{{on 'click' (route-action 'clearAllFilters')}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
{{/if}}
</Rose::Form>
</toolbar.primary>
<toolbar.secondary>
<ToolbarRefresher @onClick={{route-action 'refreshTargets'}} />
</toolbar.secondary>
</Rose::Form>
</Rose::Toolbar>
{{/if}}
{{/if}}