chore: 🤖 manual merge from develop

2020-06-16 10:32:54 -04:00
commit 2ea92de785
@@ -6,5 +6,5 @@ import layout from '../../templates/components/rose/anonymous';
 * that yield simple contextual components, such as layouts yielding regions.
 */
 export default Component.extend({
-  layout
+  layout,
 });
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/centered';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Layout|Centered" component="Centered" />
+
+# Layout|Centered
+
+A left and right centered layout/positioning component.
+
+```htmlbars
+<Rose::Layout::Centered>
+  Centered
+</Rose::Layout::Centere>
+```
+
+<Preview>
+  <Story name="Centered">{{
+    template: hbs`
+    <Rose::Layout::Centered style="background: var(--brand-gray-7);">
+      Centered
+    </Rose::Layout::Centered>
+    `,
+  }}</Story>
+</Preview>
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/message';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -0,0 +1,84 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Message" component="Message" />
+
+# Message
+
+A message component containing a title, description, and nav links.
+Title can be configured with optional icon and subtitle.
+
+<Preview>
+  <Story name="Advanced Message" height="12rem">{{
+    template: hbs`
+    <Rose::Message @title={{title}} @subtitle={{subtitle}} @icon={{icon}} as |message|>
+      <message.description>
+        {{description}}
+      </message.description>
+      <message.link @route="index">
+        <Rose::Icon @name="chevron-left" />
+        Go back
+      </message.link>
+      <message.link @route="index">
+        Need help?
+      </message.link>
+    </Rose::Message>
+    `,
+    context: {
+      title: text('title', 'Page not found'),
+      subtitle: text('subtitle', 'Error 404'),
+      description: text('description', 'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.'),
+      icon: select(
+        'icon',
+        {
+          'alert-circle-outline': 'alert-circle-outline',
+          'help-circle-outline': 'help-circle-outline',
+          'disabled': 'disabled',
+        },
+        'help-circle-outline'
+      ),
+    },
+  }}</Story>
+</Preview>
+
+```html
+<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="disabled" as |message|>
+  <message.description>
+      You must be granted permissions to view this data. Ask your administrator
+      if you think you should have access.
+  </message.description>
+  <message.link @route="index">
+    <Rose::Icon @name="chevron-left" />
+    Go back
+  </message.link>
+  <message.link @route="index">Need help?</message.link>
+</Rose::Message>
+```
+
+Message can be configured without icons and navigation links.
+
+<Preview>
+  <Story name="Basic Message" height="8rem">{{
+    template: hbs`
+    <Rose::Message @title="No logs received yet" as |message|>
+      <message.description>
+        {{description}}
+      </message.description>
+    </Rose::Message>
+    `,
+    context: {
+      title: text('title', 'No logs received yet'),
+      description: text('description', 'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.'),
+    },
+  }}</Story>
+</Preview>
+
+```html
+<Rose::Message @title="No logs received yet" as |message|>
+  <message.description>
+    Description.
+  </message.description>
+</Rose::Message>
+```
@@ -1,5 +1,4 @@
@import 'reset';
@import 'variables';
@import 'typography';
-@import 'icon';
@import 'components';
@@ -1,4 +1,4 @@
-@use 'variables/sizing';
+@use '../variables/sizing';

 .rose-icon {
  --size: #{sizing.rems(l)};
@@ -2,6 +2,7 @@
@import 'form';
@import 'header';
@import 'layout';
+@import 'icon';
@import 'notification';
@import 'card';
@import 'cards';
@@ -9,3 +10,4 @@
@import 'separator';
@import 'nav';
@import 'table';
+@import 'message';
@@ -0,0 +1,78 @@
+@use '../utilities/type';
+@use '../variables/sizing';
+@use '../variables/media';
+
+.rose-message {
+  --message-color: var(--ui-gray-starker-1);
+  display: flex;
+  flex-direction: column;
+  color: var(--message-color);
+  width: sizing.rems(l) * 15; //16 rems/320 px
+  margin-bottom: sizing.rems(l);
+
+  // Icons always need tweaking
+  .rose-icon {
+    --size: #{sizing.rems(m)};
+    > svg {
+      vertical-align: text-bottom;
+    }
+  }
+
+  .rose-message-header {
+    display: grid;
+    grid-template-areas:
+      'icon title'
+      'icon subtitle';
+    grid-auto-columns: auto 1fr;
+    margin-bottom: sizing.rems(m);
+
+    .rose-icon {
+      // targeting 40px
+      --size: #{sizing.rems(xl) + sizing.rems(xxs)};
+      grid-area: icon;
+      margin-right: sizing.rems(s);
+    }
+
+    .rose-message-title {
+      @include type.type(l, semibold);
+      grid-area: title;
+      margin: 0;
+    }
+
+    .rose-message-subtitle {
+      @include type.type(s, normal);
+      grid-area: subtitle;
+      margin: 0;
+    }
+  }
+
+  .rose-message-body {
+    display: grid;
+    grid-template-areas:
+      'description description'
+      'left-link right-link';
+
+    .rose-message-description {
+      grid-area: description;
+      margin-bottom: sizing.rems(l);
+    }
+
+    .rose-message-link {
+      @include type.type(s, semibold);
+      grid-area: left-link;
+      color: var(--action);
+
+      text-decoration: none;
+
+      & + .rose-message-link {
+        grid-area: right-link;
+        text-align: right;
+        color: var(--message-color);
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
@@ -0,0 +1,6 @@
+@use '../../variables/sizing';
+
+.rose-layout-centered {
+  display: flex;
+  justify-content: center;
+}
@@ -24,7 +24,6 @@
    grid-area: navigation;
    border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
  }
-
 }

@media (max-width: media.width(small)) {
@@ -1,2 +1,3 @@
@import 'global';
@import 'page';
+@import 'centered';
@@ -0,0 +1,3 @@
+<section ...attributes class="rose-layout-centered">
+  {{yield}}
+</section>
@@ -0,0 +1,27 @@
+<article
+  ...attributes
+  class="rose-message"
+>
+
+  {{#if @title}}
+    <header class="rose-message-header">
+      {{#if @icon}}
+        <Rose::Icon @name={{@icon}} />
+      {{/if}}
+
+      <h2 class="rose-message-title">{{@title}}</h2>
+
+      {{#if @subtitle}}
+        <h3 class="rose-message-subtitle">{{@subtitle}}</h3>
+      {{/if}}
+    </header>
+  {{/if}}
+
+  <section class="rose-message-body">
+    {{yield (hash
+      description=(component "rose/anonymous" tagName="p" class="rose-message-description")
+      link=(component "link-to" class="rose-message-link")
+    )}}
+  </section>
+
+</article>
@@ -1 +1 @@
-export { default } from 'rose/components/rose/anonymous';
+export { default } from 'rose/components/rose/anonymous';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/centered';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/message';
@@ -1,7 +1,8 @@
-<Rose::Nav::Breadcrumbs as |breadcrumbs|>
-  <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
-  <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
-</Rose::Nav::Breadcrumbs>
+<Rose::Layout::Centered>
+  <Rose::Message @title="Welcome to Namespaces" as |message|>
+    <message.description>
+      Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
+    </message.description>
+    <message.link @route="index">Add a namespace</message.link>
+  </Rose::Message>
+</Rose::Layout::Centered>
@@ -229,5 +229,60 @@
        </footer.row>
      </table.footer>
    </Rose::Table>
+
+    <Rose::Nav::Breadcrumbs as |breadcrumbs|>
+      <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
+      <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
+    </Rose::Nav::Breadcrumbs>
+
+    <Rose::Message @title="You are not authorized" @subtitle="Error 403" @icon="disabled" as |message|>
+      <message.description>
+        You must be granted permissions to view this data.
+        Ask your administrator if you think you should have access.
+      </message.description>
+      <message.link @route="index">
+        <Rose::Icon @name="chevron-left" />
+        Go back
+      </message.link>
+      <message.link @route="index">Need help?</message.link>
+    </Rose::Message>
+
+    <Rose::Message @title="Page Not Found" @subtitle="Error 404" @icon="help-circle-outline" as |message|>
+      <message.description>
+        Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
+      </message.description>
+      <message.link @route="index">
+        <Rose::Icon @name="chevron-left" />
+        Go back
+      </message.link>
+      <message.link @route="index">Need help?</message.link>
+    </Rose::Message>
+
+    <Rose::Message @title="Something went wrong" @subtitle="Error 500" @icon="alert-circle-outline" as |message|>
+      <message.description>
+        We ran into a problem and could not continue. You can ask your administrator or try again later.
+      </message.description>
+      <message.link @route="index">
+        <Rose::Icon @name="refresh-default" />
+        Try Again
+      </message.link>
+      <message.link @route="index">Need help?</message.link>
+    </Rose::Message>
+
+    <Rose::Message @title="No logs received yet" as |message|>
+      <message.description>
+        Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
+      </message.description>
+    </Rose::Message>
+
+    <Rose::Message @title="Welcome to Namespaces" as |message|>
+      <message.description>
+        Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
+      </message.description>
+      <message.link @route="index">Add a namespace</message.link>
+    </Rose::Message>
  </layout.body>
 </Rose::Layout::Global>
@@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';

-module('Integration | Component | rose/anonymous', function(hooks) {
+module('Integration | Component | rose/anonymous', function (hooks) {
  setupRenderingTest(hooks);

-  test('it renders', async function(assert) {
+  test('it renders', async function (assert) {
    await render(hbs`
      {{#rose/anonymous tagName='main'}}
        template block text
@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/centered', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered />`);
+    assert.ok(find('section'));
+    assert.ok(find('.rose-layout-centered'));
+    assert.notOk(find('.rose-layout-centered-body'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered id="layout"/>`);
+    assert.ok(find('#layout'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered>
+      Layout content
+    </Rose::Layout::Centered>`);
+    assert.equal(
+      find('.rose-layout-centered').textContent.trim(),
+      'Layout content'
+    );
+  });
+});
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/message', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(5);
+    await render(hbs`
+      <Rose::Message @title="Title" @subtitle="Subtitle" as |message|>
+        <message.description>Description</message.description>
+        <message.link @route="index">Link</message.link>
+      </Rose::Message>
+    `);
+    assert.ok(find('.rose-message'));
+    assert.equal(find('.rose-message-title').textContent.trim(), 'Title');
+    assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Subtitle');
+    assert.equal(
+      find('.rose-message-description').textContent.trim(),
+      'Description'
+    );
+    assert.equal(find('.rose-message-link').textContent.trim(), 'Link');
+  });
+});
@@ -5,7 +5,7 @@
  </page.breadcrumbs>

  <page.header>
-    <h2>{{t "resources.host-catalogs"}}</h2>
+    <h2>{{t 'resources.host-catalogs'}}</h2>
  </page.header>

  <page.actions>
@@ -17,18 +17,33 @@
  </page.actions>

  <page.body>
-    <ul>
-      {{#each @model as |hostCatalog|}}
-        <li>
-          <LinkTo
-            @route="orgs.org.projects.project.host-catalogs.host-catalog"
-            @model={{hostCatalog}}
-          >
-            {{hostCatalog.name}}
-          </LinkTo>
-        </li>
-      {{/each}}
-    </ul>
+    <p>{{t 'descriptions.host-catalogs'}}</p>
+
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell>{{t 'form.label.name'}}</row.cell>
+          <row.cell>{{t 'form.label.type'}}</row.cell>
+          <row.cell>{{t 'form.label.description'}}</row.cell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each @model as |hostCatalog|}}
+          <body.row as |row|>
+            <row.cell>
+              <LinkTo
+                @route="orgs.org.projects.project.host-catalogs.host-catalog"
+                @model={{hostCatalog}}
+              >
+                {{hostCatalog.name}}
+              </LinkTo>
+            </row.cell>
+            <row.cell>{{hostCatalog.type}}</row.cell>
+            <row.cell>{{hostCatalog.description}}</row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
  </page.body>

 </Rose::Layout::Page>
@@ -23,7 +23,7 @@ module('Acceptance | host catalogs', function(hooks) {
    this.server.createList('project', 1);
    this.server.createList('host-catalog', 1);
    await visit('/orgs/1/projects/1/host-catalogs');
-    await click('main ul li:first-child a');
+    await click('main .rose-table-cell:first-child a');
    await a11yAudit();
    assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1');
  });
@@ -17,6 +17,26 @@ module('Acceptance | projects', function (hooks) {
    assert.equal(currentURL(), '/orgs/1/projects');
  });

+  test('can create new projects', async function (assert) {
+    assert.expect(3);
+    assert.equal(this.server.db.projects.length, 0);
+    await visit('/orgs/1/projects/new');
+    await fillIn('[name="name"]', 'random string');
+    await click('[type="submit"]');
+    assert.equal(currentURL(), '/orgs/1/projects/1');
+    assert.equal(this.server.db.projects.length, 1);
+  });
+
+  test('can cancel create new projects', async function (assert) {
+    assert.expect(3);
+    assert.equal(this.server.db.projects.length, 0);
+    await visit('/orgs/1/projects/new');
+    await fillIn('[name="name"]', 'random string');
+    await click('.rose-form-actions [type="button"]');
+    assert.equal(currentURL(), '/orgs/1/projects');
+    assert.equal(this.server.db.projects.length, 0);
+  });
+
  test('saving a new project with invalid fields displays error messages', async function (assert) {
    assert.expect(2);
    this.server.post('/orgs/:org_id/projects', () => {
@@ -53,6 +73,34 @@ module('Acceptance | projects', function (hooks) {
    );
  });

+  test('can save changes to existing project', async function (assert) {
+    assert.expect(2);
+    this.server.createList('project', 1, {name: 'MyProject'});
+    await visit('/orgs/1/projects/1');
+    await fillIn('[name="name"]', 'random string');
+    await click('.rose-form-actions [type="submit"]');
+    assert.equal(currentURL(), '/orgs/1/projects/1');
+    assert.equal(this.server.db.projects[0].name, 'random string');
+  });
+
+  test('can cancel changes to existing project', async function (assert) {
+    assert.expect(1);
+    this.server.createList('project', 1, {name: 'MyProject'});
+    await visit('/orgs/1/projects/1');
+    await fillIn('[name="name"]', 'random string');
+    await click('.rose-form-actions [type="button"]');
+    assert.equal(find('[name="name"]').value, 'MyProject');
+  });
+
+  test('can delete project', async function(assert) {
+    assert.expect(2);
+    this.server.createList('project', 1);
+    assert.equal(this.server.db.projects.length, 1);
+    await visit('/orgs/1/projects/1');
+    await click('.rose-button-warning');
+    assert.equal(this.server.db.projects.length, 0);
+  });
+
  test('saving an existing project with invalid fields displays error messages', async function (assert) {
    assert.expect(2);
    this.server.createList('project', 1);
@@ -12,6 +12,8 @@ titles:
  new: New
  overview: Overview
  settings: Settings
+descriptions:
+  host-catalogs: Overview of collections of hosts and host sets.
 states:
  info: Info
  success: Success
@@ -21,6 +23,7 @@ form:
  label:
    name: Name
    description: Description
+    type: Type
 dev:
  default-org: Default Org
  menu-item: Menu item
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/layout/centered';`