diff --git a/addons/auth/addon/authenticators/password.js b/addons/auth/addon/authenticators/password.js
index 814fffc22..aa0b13e87 100644
--- a/addons/auth/addon/authenticators/password.js
+++ b/addons/auth/addon/authenticators/password.js
@@ -64,7 +64,7 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
case 404:
return reject();
}
- return resolve(data);
+ return resolve(this.normalizeData(data));
}
/**
@@ -93,7 +93,25 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
const authEndpointURL = this.buildAuthEndpointURL(options);
const response = await fetch(authEndpointURL, { method: 'post', body });
const json = await response.json();
- return response.status < 400 ? resolve(json) : reject();
+ return response.status < 400
+ ? resolve(this.normalizeData(json, login_name))
+ : reject();
+ }
+
+ /**
+ * Normalizes the auth data. Adds convenience booleans depending on the
+ * scope within which the session is authenticated: isGlobal, isOrg.
+ * If a `username` is provided, appends this to the data.
+ * @param {object} data
+ * @param {string} username
+ * @return {object}
+ */
+ normalizeData(data, username) {
+ // Add booleans indicated the scope type
+ data.isGlobal = (data?.scope?.type === 'global');
+ data.isOrg = (data?.scope?.type === 'org');
+ if (username) data.username = username;
+ return data;
}
/**
diff --git a/addons/rose/addon/components/rose/card/link/index.hbs b/addons/rose/addon/components/rose/card/link/index.hbs
index 7f003a4a6..ead6f0ee9 100644
--- a/addons/rose/addon/components/rose/card/link/index.hbs
+++ b/addons/rose/addon/components/rose/card/link/index.hbs
@@ -4,17 +4,30 @@
@route={{if @route @route "index"}}
@model={{@model}}
>
- {{#if @title}}
- {{@title}}
- {{/if}}
+
- {{#if @subtitle}}
- {{@subtitle}}
- {{/if}}
+
+ {{#if @description}}
+
{{@description}}
+ {{/if}}
+
{{@description}}
- {{/if}}
+
{{yield}}
diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
index 40e3e9eaf..28250c8d6 100644
--- a/addons/rose/addon/components/rose/nav/sidebar/index.hbs
+++ b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
@@ -2,6 +2,7 @@
...attributes
class="rose-nav-sidebar"
id={{this.id}}
+ title={{@title}}
aria-labelledby={{if @title (concat "title-" this.id)}}>
{{#if @title}}
diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index a62df13f8..ad33c49c5 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -1,6 +1,10 @@
+@use 'sass:map';
@use '../../variables/sizing';
+@use '../../variables/typography';
@use '../../utilities/type';
+$xxxs: sizing.rems(xxxs); // 2
+
.rose-card-link {
@include type.type(s);
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
@@ -9,19 +13,21 @@
display: inline-flex;
flex-direction: column;
margin: 0 sizing.rems(m) sizing.rems(m) 0;
+ box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
+ 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
+
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--ui-gray-subtler-6);
+ }
a {
text-decoration: none;
margin: 0;
padding: 0;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
height: 100%;
- padding: sizing.rems(s);
// TODO: Figure out better method of defining card dimensions
- min-height: sizing.rems(m) * 6; //6 rems
- width: sizing.rems(m) * 12; //12 rems
+ min-height: sizing.rems(m) * 8; //6 rems
+ width: sizing.rems(m) * 16; //12 rems
}
&:hover {
@@ -42,27 +48,78 @@
border-color: var(--info);
}
- .rose-card-link-title {
- $truncate-line-count: 3;
- @include type.type(m, semibold);
- color: var(--stark);
- margin: 0;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: $truncate-line-count;
- overflow: hidden;
+ .rose-card-link-header,
+ .rose-card-link-body,
+ .rose-card-link-footer {
+ padding-left: sizing.rems(m);
+ padding-right: sizing.rems(m);
}
- .rose-card-link-subtitle {
- color: var(--ui-gray);
+ .rose-card-link-header {
+ padding-top: sizing.rems(m);
+ }
+ .rose-card-link-footer {
+ margin-top: sizing.rems(xs) + sizing.rems(xxs);
+ padding-top: sizing.rems(xs) * 2;
+ padding-bottom: sizing.rems(xs) * 2;
+ }
+
+ .rose-card-link-footer {
+ border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+ }
+
+ .rose-card-link-title {
+ @include type.type(m, semibold);
+ display: flex;
+ color: var(--stark);
margin: 0;
+ margin-bottom: sizing.rems(xs);
+
+ .rose-icon {
+ margin-right: sizing.rems(xs);
+
+ svg {
+ vertical-align: text-bottom;
+ }
+ }
+
+ .rose-card-link-title-text {
+ flex-grow: 1;
+ height: typography.line-height(m) * 2rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
}
.rose-card-link-description {
- margin: auto 0 0;
color: var(--ui-gray);
- white-space: nowrap;
+ margin: 0;
+ height: typography.line-height(m) * 2rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
overflow: hidden;
- text-overflow: ellipsis;
}
+
+ .rose-card-link-footer-id {
+ @include type.type(xs);
+ color: var(--ui-gray);
+ margin: 0;
+
+ &::before {
+ content: "ID";
+ color: var(--stark);
+ padding-right: sizing.rems(xs);
+ }
+ }
+
+ // .rose-card-link-description {
+ // margin: auto 0 0;
+ // color: var(--ui-gray);
+ // white-space: nowrap;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // }
}
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
index 2fe195562..b15bb016e 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
@@ -6,8 +6,7 @@
display: block;
box-sizing: border-box;
width: 100%;
- // Targeting min-width of ~200
- min-width: (sizing.rems(m)) * 10;
+ min-width: (sizing.rems(m)) * 13;
border: 0;
padding: 0 sizing.rems(s);
text-decoration: none;
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
index 6fd5d039f..695b2e4ba 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_link.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
@@ -6,8 +6,7 @@
display: block;
box-sizing: border-box;
width: 100%;
- // Targeting min-width of ~200
- min-width: (sizing.rems(m)) * 10;
+ min-width: (sizing.rems(m)) * 13;
border: 0;
padding: 0 sizing.rems(s);
text-decoration: none;
diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss
index 6ba8aba30..8885c0207 100644
--- a/addons/rose/addon/styles/rose/components/header/_index.scss
+++ b/addons/rose/addon/styles/rose/components/header/_index.scss
@@ -12,7 +12,12 @@
display: grid;
grid-template-areas: 'brand nav utilities';
grid-template-columns: 0.01fr auto 1fr;
- background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%);
+ background: var(--black);
+ box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
+
+ @media (prefers-color-scheme: light) {
+ box-shadow: none;
+ }
}
@media (max-width: media.width(small)) {
diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index 010a3bd52..fcc29ca45 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
@@ -3,10 +3,20 @@
.rose-nav-sidebar {
$threePX: sizing.rems(xxxs) + sizing.rems(xxxxs);
+ $yPadding: sizing.rems(xs);
+ padding-top: $yPadding;
+ padding-bottom: $yPadding;
+ border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ // TODO revisit the title
.rose-nav-title {
@include type.type(xs, semibold);
- display: block;
+ display: none;
color: var(--ui-gray);
text-transform: uppercase;
$lineHeight: 20 / 12;
@@ -29,6 +39,7 @@
&.active {
color: var(--action);
border-color: currentColor;
+ background-color: var(--action-subtler-1h);
}
&:hover {
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index cb000c5df..5c910e93a 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -83,7 +83,7 @@
@media (prefers-color-scheme: dark) {
:root {
// poles
- --subtle: #{darken(color(ui-gray, 900), 3%)};
+ --subtle: var(--black);
--stark: #{color(ui-gray, 100)};
--stark-components: 255, 255, 255;
diff --git a/addons/rose/tests/integration/components/rose/card/link-test.js b/addons/rose/tests/integration/components/rose/card/link-test.js
index 78a02af4b..288679791 100644
--- a/addons/rose/tests/integration/components/rose/card/link-test.js
+++ b/addons/rose/tests/integration/components/rose/card/link-test.js
@@ -10,9 +10,9 @@ module('Integration | Component | rose/card/link', function (hooks) {
await render(hbs``);
assert.ok(find('article'));
assert.ok(find('.rose-card-link'));
- assert.notOk(find('.rose-card-link-title'));
- assert.notOk(find('.rose-card-link-subtitle'));
- assert.notOk(find('.rose-card-link-description'));
+ assert.ok(find('.rose-card-link-header'));
+ assert.ok(find('.rose-card-link-body'));
+ assert.ok(find('.rose-card-link-footer'));
});
test('it renders with @title', async function (assert) {
@@ -24,22 +24,27 @@ module('Integration | Component | rose/card/link', function (hooks) {
);
});
- test('it renders with @subtitle', async function (assert) {
- await render(hbs``);
- assert.equal(
- find('.rose-card-link-subtitle').textContent.trim(),
- 'card subtitle'
- );
- });
-
test('it renders with @description', async function (assert) {
await render(hbs``);
assert.equal(
- find('.rose-card-link-description').textContent.trim(),
+ find('.rose-card-link-body').textContent.trim(),
'card description'
);
});
+ test('it renders with @id', async function (assert) {
+ await render(hbs``);
+ assert.equal(
+ find('.rose-card-link-footer-id').textContent.trim(),
+ 'card_id'
+ );
+ });
+
+ test('it renders with @icon', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('.rose-icon'));
+ });
+
test('it renders with attributes', async function (assert) {
await render(hbs``);
assert.ok(find('#card'));
diff --git a/ui/core/app/routes/scopes/scope.js b/ui/core/app/routes/scopes/scope.js
index 2cbe96d88..ef8aa1273 100644
--- a/ui/core/app/routes/scopes/scope.js
+++ b/ui/core/app/routes/scopes/scope.js
@@ -38,6 +38,8 @@ export default class ScopesScopeRoute extends Route {
* Set scope in application controller
*/
afterModel() {
+ const orgScopes = this.modelFor('scopes').filterBy('isOrg', true);
+ this.controllerFor('application').set('orgScopes', orgScopes);
const scope = this.modelFor('scopes.scope');
this.controllerFor('application').set('scope', scope);
}
diff --git a/ui/core/app/routes/scopes/scope/authenticate.js b/ui/core/app/routes/scopes/scope/authenticate.js
index d011a6b45..883bbb704 100644
--- a/ui/core/app/routes/scopes/scope/authenticate.js
+++ b/ui/core/app/routes/scopes/scope/authenticate.js
@@ -9,6 +9,17 @@ export default class ScopesScopeAuthenticateRoute extends Route {
// =methods
+ beforeModel() {
+ if (this.session.isAuthenticated) {
+ const scope = this.modelFor('scopes.scope');
+ if (scope.isGlobal) {
+ this.transitionTo('scopes.scope.orgs');
+ } else {
+ this.transitionTo('scopes.scope.projects');
+ }
+ }
+ }
+
/**
* Returns all auth methods for the current scope, along with the current
* scope and all scopes (for org navigation).
@@ -28,15 +39,4 @@ export default class ScopesScopeAuthenticateRoute extends Route {
// }])
});
}
-
- redirect() {
- if (this.session.isAuthenticated) {
- const scope = this.modelFor('scopes.scope');
- if (scope.isGlobal) {
- this.transitionTo('scopes.scope.orgs');
- } else {
- this.transitionTo('scopes.scope.projects');
- }
- }
- }
}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 6a13be697..052ca77c0 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -19,7 +19,6 @@
}
.rose-nav-sidebar {
- margin-bottom: sizing.rems(l);
margin-top: sizing.rems(xxl);
& + .rose-nav-sidebar {
@@ -67,11 +66,17 @@
display: none;
}
+ .rose-dropdown {
+ .rose-icon {
+ transform: scale(0.7);
+ }
+ }
+
&.loading {
&::after {
animation: gradient 1s linear infinite;
background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
- background-position: 0 100%;
+ background-position: -100% 0;
background-size: 200% auto;
content: ' ';
height: 3px;
@@ -81,7 +86,7 @@
top: 100%;
@keyframes gradient {
- 0% { background-position: 0 0; }
+ 0% { background-position: -100% 0; }
100% { background-position: -200% 0; }
}
}
@@ -90,9 +95,9 @@
.copyable {
.copyable-button {
+ margin: 0;
+ padding: 0 sizing.rems(xxs);
position: relative;
top: -2px;
- padding: 0 sizing.rems(xxs);
- margin: 0;
}
}
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index a40b1dcba..29dfe48eb 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -6,17 +6,35 @@
+
{{#if this.session.isAuthenticated}}
-
- {{#if this.scope.isOrg}}
- {{this.scope.displayName}}
- {{/if}}
-
+ {{#if this.scope.isOrg}}
+
+
+ {{#if this.session.data.authenticated.isGlobal}}
+
+ {{t "titles.global"}}
+
+ {{#each this.orgScopes as |scope|}}
+
+ {{scope.displayName}}
+
+ {{/each}}
+ {{else}}
+
+ {{this.scope.displayName}}
+
+ {{/if}}
+
+
+ {{/if}}
{{!--
@@ -29,7 +47,9 @@
+
{{/if}}
+
diff --git a/ui/core/app/templates/scopes/scope/orgs/index.hbs b/ui/core/app/templates/scopes/scope/orgs/index.hbs
index ed79b4e04..30c211450 100644
--- a/ui/core/app/templates/scopes/scope/orgs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/orgs/index.hbs
@@ -30,8 +30,9 @@
{{#each @model as |org|}}
diff --git a/ui/core/app/templates/scopes/scope/projects/index.hbs b/ui/core/app/templates/scopes/scope/projects/index.hbs
index 0d05ddf30..6173aeffb 100644
--- a/ui/core/app/templates/scopes/scope/projects/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/index.hbs
@@ -30,8 +30,9 @@
{{#each @model as |project|}}
diff --git a/ui/core/mirage/factories/org.js b/ui/core/mirage/factories/org.js
deleted file mode 100644
index fe119cba6..000000000
--- a/ui/core/mirage/factories/org.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import factory from '../generated/factories/org';
-
-export default factory.extend();
diff --git a/ui/core/mirage/factories/project.js b/ui/core/mirage/factories/project.js
deleted file mode 100644
index 2a3aae2be..000000000
--- a/ui/core/mirage/factories/project.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import factory from '../generated/factories/project';
-
-export default factory.extend();
diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js
index d60486d15..a14dbc719 100644
--- a/ui/core/mirage/factories/scope.js
+++ b/ui/core/mirage/factories/scope.js
@@ -5,6 +5,16 @@ export default factory.extend({
type: 'global',
+ /**
+ * Generates realistic-ish IDs while still being deterministic.
+ */
+ id(i) {
+ let id = 'tv6fv3yz8p';
+ if (i % 3) id = 'xk1i4dk50v';
+ if (i % 2) id = 's9n819zgko';
+ return `s_${id}${i}`;
+ },
+
withChildren: trait({
afterCreate(record, server) {
if (record.type === 'global') {