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

refactor: 💡 use hds side nav w/ hds frame instead of rose #2688

Open
wants to merge 7 commits into
base: llb/side-nav-refactor
Choose a base branch
from
Open

refactor: 💡 use hds side nav w/ hds frame instead of rose #2688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7d0fe05
refactor: 💡 use hds side nav w/ hds frame instead of rose
lisbet-alvarez Feb 13, 2025
c8b71fe
test: 💍 clean up selectors
lisbet-alvarez Feb 13, 2025
6ecb017
fix: 🐛 specificity of style override
lisbet-alvarez Feb 13, 2025
0583534
refactor: 💡 use hds side nav list instead of target and portal
lisbet-alvarez Feb 20, 2025
6781f14
refactor: 💡 revert to using portal component & update scss
lisbet-alvarez Feb 22, 2025
7576a43
docs: ✏️ update comment
lisbet-alvarez Feb 25, 2025
2989148
refactor: 💡 use custom class names for containers
lisbet-alvarez Feb 25, 2025
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
6 changes: 4 additions & 2 deletions addons/core/translations/en-us.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ titles:
home: Home
iam: IAM
new: New
resources: Resources
details: Details
general: General
overview: Overview
settings: Settings
empty-set: No Items Yet
Expand All @@ -46,6 +44,10 @@ titles:
days: '{days, plural, =1 {# day} other {# days}}'
workers: Workers
no-worker-filter: No worker filter added
scope-level: '{scope} Level'
scope-iam: '{scope} IAM'
project-actions: Project Actions
user-menu: User Menu
descriptions:
empty-set: There are no items to display yet. You may be able to add items or try back later.
cluster-url-initialization: To get started, please enter your cluster URL
Expand Down
17 changes: 17 additions & 0 deletions addons/rose/addon/styles/hds/overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,20 @@ form {
color: inherit;
}
}

// TODO: This is a temporary fix that ensures changing the color theme won't alter the dropdown colors.
.app-frame-sidebar-style-overrides .side-nav-style-overrides {
.hds-dropdown-toggle-button,
.hds-dropdown-toggle-icon {
background: var(--token-side-nav-color-surface-primary);

&:hover {
background: var(--token-side-nav-color-surface-interactive-hover);
}

&:active,
&:focus {
background: var(--token-side-nav-color-surface-primary);
}
}
}
6 changes: 3 additions & 3 deletions ui/admin/app/components/roles/role/actions/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
SPDX-License-Identifier: BUSL-1.1
}}

<Hds::Dropdown as |dd|>
<Hds::Dropdown data-test-manage-role as |dd|>
<dd.ToggleButton @text={{t 'actions.manage'}} @color='secondary' />
{{#if (can 'addPrincipals role' @model)}}
<dd.Interactive
@route='scopes.scope.roles.role.add-principals'
data-test-manage-dropdown-principals
data-test-manage-role-principals
>
{{t 'resources.role.principal.actions.add-principals'}}
</dd.Interactive>
{{/if}}
{{#if (can 'setGrantScopes role' @model)}}
<dd.Interactive
@route='scopes.scope.roles.role.manage-scopes'
data-test-manage-dropdown-scopes
data-test-manage-role-scopes
>
{{t 'resources.role.scope.actions.manage-scopes'}}
</dd.Interactive>
Expand Down
15 changes: 14 additions & 1 deletion ui/admin/app/controllers/scopes/scope.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,25 @@
* SPDX-License-Identifier: BUSL-1.1
*/

import Controller from '@ember/controller';
import Controller, { inject as controller } from '@ember/controller';
import { inject as service } from '@ember/service';

export default class ScopesScopeController extends Controller {
@controller('application') application;

// =services

@service session;
@service scope;
@service featureEdition;

// =attributes

/**
* Returns the side-bar element.
* @type {object}
*/
get sideBarContainer() {
return document.querySelector('#global-app-frame-sidebar');
}
}
9 changes: 7 additions & 2 deletions ui/admin/app/routes/account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@ export default class AccountRoute extends Route {
// =methods

/**
* If arriving here unauthenticated, redirect to index for further processing.
* If arriving here unauthenticated, redirect to index for further processing
* else redirect to change-password route since account route is empty.
*/
beforeModel() {
if (!this.session.isAuthenticated) this.router.transitionTo('index');
if (!this.session.isAuthenticated) {
this.router.transitionTo('index');
} else {
this.router.transitionTo('account.change-password');
}
}
}
40 changes: 14 additions & 26 deletions ui/admin/app/templates/account/change-password.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,20 @@

{{page-title (t 'actions.change-password')}}

<Rose::Layout::Sidebar as |sidebarLayout|>
<sidebarLayout.body>
<main>
<Rose::Layout::Centered>
<Rose::Layout::Page as |page|>
<Rose::Layout::Centered>
<Rose::Layout::Page as |page|>

<page.header>
<h2>{{t 'actions.change-password'}}</h2>
</page.header>
<page.header>
<h2>{{t 'actions.change-password'}}</h2>
</page.header>

<page.body>
<Form::Account::Password::ChangePassword
@model={{@model}}
@submit={{fn this.changePassword @model}}
@cancel={{fn this.cancel @model}}
/>
</page.body>
<page.body>
<Form::Account::Password::ChangePassword
@model={{@model}}
@submit={{fn this.changePassword @model}}
@cancel={{fn this.cancel @model}}
/>
</page.body>

</Rose::Layout::Page>
</Rose::Layout::Centered>
</main>
</sidebarLayout.body>
<sidebarLayout.footer>
<Hds::AppFooter @theme={{this.session.data.theme}} as |AF|>
<AF.Link @href={{(doc-url)}}>{{t 'titles.documentation'}}</AF.Link>
<AF.LegalLinks />
</Hds::AppFooter>
</sidebarLayout.footer>
</Rose::Layout::Sidebar>
</Rose::Layout::Page>
</Rose::Layout::Centered>
120 changes: 15 additions & 105 deletions ui/admin/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,113 +5,23 @@

{{page-title (app-name)}}

<Rose::Layout::Global as |layout|>
<Hds::AppFrame @hasHeader={{false}} as |Frame|>
Copy link

Choose a reason for hiding this comment

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

Not sure how it works, but if you bring the same changes to the "desktop" app and remove/replace the <Rose::Layout::Global> instance from the playground.hbs file, at that point you can remove entirely the code (hbs, css, js, etc) of the Rose::Layout::Global component

(not sure if that would be outside of the scope of this PR)

Copy link

Choose a reason for hiding this comment

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

Similarly for the Rose::Layout::Sidebar which is only left in the playground and in this page

Copy link

Choose a reason for hiding this comment

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

(the reason I know it, is because in those days I am doing an audit of all the page/layout components used in our products codebases, and I noticed in Boundary these Two rose components (Rose::Layout::Global and Rose::Layout::Sidebar) and under each one of them, in my audit document, I've written: "Likely the combination of Global+Sidebar layout components can be replaced with a single Hds::AppFrame component" 🙂

<Frame.Sidebar
class='app-frame-sidebar-style-overrides'
id='global-app-frame-sidebar'
/>

<layout.header>
<Rose::Header class={{if (is-loading) ' loading'}} as |header|>
<header.brand @logo='logo-app' @text={{(app-name)}} />

{{#if this.session.isAuthenticated}}
<header.nav>
<HeaderNav />
</header.nav>

<header.utilities as |utilities|>
<utilities.dropdown
@text={{this.session.data.authenticated.username}}
@icon='flight-icons/svg/user-circle-16'
as |dropdown|
>
<dropdown.link @route='account.change-password'>
{{t 'actions.change-password'}}
</dropdown.link>
<dropdown.separator />

<dropdown.button {{on 'click' this.invalidateSession}}>
{{t 'actions.deauthenticate'}}
</dropdown.button>

<dropdown.separator />

<dropdown.section @title={{t 'actions.toggle-color-theme'}}>
<Hds::Form::Radio::Group
@name='theme'
class='dropdown-radio-btn'
as |G|
>
{{#each this.themes as |theme|}}
<G.RadioField
@value={{theme.value}}
checked={{eq this.session.data.theme theme.value}}
{{on 'change' (fn this.toggleTheme theme.value)}}
as |F|
>
<F.Label>{{t (concat 'themes.' theme.label)}}</F.Label>
</G.RadioField>
{{/each}}
</Hds::Form::Radio::Group>
</dropdown.section>

</utilities.dropdown>

{{#if (feature-flag 'dev-edition-toggle')}}
<utilities.dropdown
data-test-dev-edition-toggle
@text={{t
'titles.feature-edition'
edition=this.featureEdition.edition
}}
@icon='flight-icons/svg/layers-16'
as |dropdown|
>
<dropdown.section @title={{t 'actions.toggle-feature-edition'}}>
<Hds::Form::Radio::Group
@name='edition'
class='dropdown-radio-btn'
as |G|
>
{{#each this.featureEdition.editions as |edition|}}
<G.RadioField
@value={{edition}}
checked={{eq this.featureEdition.edition edition}}
{{on 'change' (fn this.toggleEdition edition)}}
as |F|
>
<F.Label>{{edition}}</F.Label>
</G.RadioField>
{{/each}}
</Hds::Form::Radio::Group>

</dropdown.section>
<dropdown.separator />
<dropdown.section @title={{t 'actions.toggle-licensed-features'}}>
<Rose::Form as |form|>
{{#each this.featureEdition.licensedFeatures as |feature|}}
<dropdown.item>
<form.checkbox
@label={{feature}}
@checked={{feature-flag feature}}
@onChange={{fn this.toggleFeature feature}}
/>
</dropdown.item>
{{/each}}
</Rose::Form>
</dropdown.section>
</utilities.dropdown>
{{/if}}

</header.utilities>

{{/if}}

</Rose::Header>
</layout.header>

<layout.body>
<Frame.Main>
{{outlet}}
</layout.body>

</Rose::Layout::Global>
</Frame.Main>

<Frame.Footer>
<Hds::AppFooter @theme={{this.session.data.theme}} as |AF|>
<AF.Link @href={{(doc-url)}}>{{t 'titles.documentation'}}</AF.Link>
<AF.LegalLinks />
</Hds::AppFooter>
</Frame.Footer>
</Hds::AppFrame>

{{#if this.flashMessages.queue}}
<div class='ember-notify-cn'>
Expand Down
27 changes: 6 additions & 21 deletions ui/admin/app/templates/scopes/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,10 @@
{{outlet}}

{{#unless @model}}
<Rose::Layout::Sidebar as |sidebarLayout|>
<sidebarLayout.body>
<main>
<Rose::Layout::Centered>
<Hds::ApplicationState as |A|>
<A.Header
@title={{t 'auth.titles.no-scopes'}}
@icon='alert-circle'
/>
<A.Body @text={{t 'auth.descriptions.no-scopes'}} />
</Hds::ApplicationState>
</Rose::Layout::Centered>
</main>
</sidebarLayout.body>
<sidebarLayout.footer>
<Hds::AppFooter @theme={{this.session.data.theme}} as |AF|>
<AF.Link @href={{(doc-url)}}>{{t 'titles.documentation'}}</AF.Link>
<AF.LegalLinks />
</Hds::AppFooter>
</sidebarLayout.footer>
</Rose::Layout::Sidebar>
<Rose::Layout::Centered>
Copy link

Choose a reason for hiding this comment

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

Nice cleanup!

<Hds::ApplicationState as |A|>
<A.Header @title={{t 'auth.titles.no-scopes'}} @icon='alert-circle' />
<A.Body @text={{t 'auth.descriptions.no-scopes'}} />
</Hds::ApplicationState>
</Rose::Layout::Centered>
{{/unless}}
Loading