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 6 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.
.hds-app-frame__sidebar .hds-side-nav {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hds team is helping us find a cleaner solution for this style override. So this fix is just temporary.

.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>
117 changes: 12 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,20 @@

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

<Rose::Layout::Global as |layout|>
<Hds::AppFrame @hasHeader={{false}} as |Frame|>
<Frame.Sidebar 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>
<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