3dded0a7bc
* feat: 🎸 scope picker component (#2646) * feat: 🎸 scope picker component --------- Co-authored-by: lisbet-alvarez <lisbet-alvarez@users.noreply.github.com> Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com> * refactor: 💡 use hds side nav w/ hds frame instead of rose (#2688) * refactor: 💡 use hds side nav w/ hds frame instead of rose * test: 💍 clean up selectors * fix: 🐛 specificity of style override * refactor: 💡 use hds side nav list instead of target and portal * refactor: 💡 revert to using portal component & update scss * docs: ✏️ update comment * refactor: 💡 use custom class names for containers * refactor: 💡 pr feedback (use @hasSidebar arg) * refactor: 💡 fix onboarding page & fix settings title * refactor: 💡 remove unneeded template file (pr feedback) * test: 💍 fix tests due to merge conflicts * test: 💍 add missing test selector due to merge conflict * test: 💍 fix more broken tests due to merge conflicts * chore: 🤖 update yarn.lock & update hds version to 4.18.1 * chore: 🤖 fix e2e test cases due to side nav refactor (#2751) * chore: 🤖 fix e2e test cases due to side nav refactor * test: 💍 fix e2e test for desktop --------- Co-authored-by: lisbet-alvarez <lisbet-alvarez@users.noreply.github.com> Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>
99 lines
2.5 KiB
Handlebars
99 lines
2.5 KiB
Handlebars
{{!
|
|
Copyright (c) HashiCorp, Inc.
|
|
SPDX-License-Identifier: BUSL-1.1
|
|
}}
|
|
|
|
<Hds::Dropdown
|
|
@enableCollisionDetection={{true}}
|
|
@matchToggleWidth={{true}}
|
|
{{! HDS provided class to automatically fade in/out }}
|
|
class='hds-side-nav-hide-when-minimized scope-picker'
|
|
as |D|
|
|
>
|
|
{{#let this.currentScope as |scope|}}
|
|
<D.ToggleButton
|
|
@text={{scope.name}}
|
|
@icon={{scope.icon}}
|
|
class='scope-picker__toggle-button'
|
|
/>
|
|
{{/let}}
|
|
|
|
<D.Checkmark
|
|
@icon='globe'
|
|
@route='scopes.scope'
|
|
@model='global'
|
|
@selected={{this.scope.org.isGlobal}}
|
|
>
|
|
{{t 'titles.global'}}
|
|
</D.Checkmark>
|
|
|
|
{{#if this.scope.orgsList}}
|
|
<D.Separator />
|
|
|
|
<D.Title @text={{t 'resources.org.title_plural'}} />
|
|
{{/if}}
|
|
|
|
{{#each this.truncatedOrgsList as |org|}}
|
|
<D.Checkmark
|
|
@icon='org'
|
|
@route='scopes.scope'
|
|
@model={{org.id}}
|
|
@selected={{and (eq this.scope.org.id org.id) (not this.scope.project)}}
|
|
data-test-scope-picker-org-item
|
|
>
|
|
{{org.displayName}}
|
|
</D.Checkmark>
|
|
{{/each}}
|
|
|
|
{{#if (gt this.scope.orgsList.length 5)}}
|
|
<D.Description
|
|
@text={{t 'descriptions.and-more'}}
|
|
data-test-scope-picker-org-and-more-text
|
|
/>
|
|
|
|
<D.Interactive
|
|
@route='scopes.scope.scopes'
|
|
@model='global'
|
|
data-test-scope-picker-org-count
|
|
>{{t
|
|
'descriptions.view-all-orgs'
|
|
total=this.scope.orgsList.length
|
|
}}</D.Interactive>
|
|
{{/if}}
|
|
|
|
{{! All project scopes in org are only loaded when current scope is of project type. }}
|
|
{{#if this.scope.project}}
|
|
<D.Title @text={{t 'resources.project.title_plural'}} class='indentation' />
|
|
|
|
{{#each this.truncatedProjectsList as |project|}}
|
|
<D.Checkmark
|
|
@icon='grid'
|
|
@route='scopes.scope'
|
|
@model={{project.id}}
|
|
@selected={{eq this.scope.project.id project.id}}
|
|
class='indentation'
|
|
data-test-scope-picker-project-item
|
|
>
|
|
{{project.displayName}}
|
|
</D.Checkmark>
|
|
{{/each}}
|
|
|
|
{{#if (gt this.scope.projectsList.length 5)}}
|
|
<D.Description
|
|
@text={{t 'descriptions.and-more'}}
|
|
class='indentation'
|
|
data-test-scope-picker-project-and-more-text
|
|
/>
|
|
|
|
<D.Interactive
|
|
@route='scopes.scope.scopes'
|
|
@model={{this.scope.org.id}}
|
|
class='indentation'
|
|
data-test-scope-picker-project-count
|
|
>{{t
|
|
'descriptions.view-all-projects'
|
|
total=this.scope.projectsList.length
|
|
}}</D.Interactive>
|
|
{{/if}}
|
|
{{/if}}
|
|
</Hds::Dropdown> |