hashicorp · johncowen · Oct 4, 2021 · Sep 30, 2021 · Sep 30, 2021
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -22,7 +22,7 @@ references:
     test-results: &TEST_RESULTS_DIR /tmp/test-results
 
   cache:
-    yarn: &YARN_CACHE_KEY consul-ui-v4-{{ checksum "ui/yarn.lock" }}
+    yarn: &YARN_CACHE_KEY consul-ui-v5-{{ checksum "ui/yarn.lock" }}
     rubygem: &RUBYGEM_CACHE_KEY static-site-gems-v1-{{ checksum "Gemfile.lock" }}
 
   environment: &ENVIRONMENT
@@ -602,7 +602,7 @@ jobs:
 
       - run:
           name: install yarn packages
-          command: cd ui && yarn install
+          command: cd ui && yarn install && cd packages/consul-ui && yarn install
 
       - save_cache:
           key: *YARN_CACHE_KEY

diff --git a/ui/package.json b/ui/package.json
@@ -11,7 +11,7 @@
   "scripts": {
     "doc:toc": "doctoc README.md",
     "compliance": "npm-run-all compliance:*",
-    "compliance:licenses": "license-checker --summary --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages 'consul-ui@2.2.0;'"
+    "compliance:licenses": "license-checker --summary --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages 'consul-ui@2.2.0;consul-acls@0.1.0;consul-partitions@0.1.0'"
 
   },
   "devDependencies": {

diff --git a/ui/packages/consul-acls/package.json b/ui/packages/consul-acls/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "consul-acls",
+  "version": "0.1.0",
+  "private": true
+}
diff --git a/ui/packages/consul-acls/vendor/consul-acls/routes.js b/ui/packages/consul-acls/vendor/consul-acls/routes.js
@@ -0,0 +1,16 @@
+(function(data) {
+  const appNameJS = data.appName.split('-')
+    .map((item, i) => i ? `${item.substr(0, 1).toUpperCase()}${item.substr(1)}` : item)
+    .join('');
+  data[`${appNameJS}Routes`] = JSON.stringify({
+    dc: {
+      acls: {
+        tokens: {
+          _options: {
+            abilities: ['read tokens'],
+          },
+        },
+      },
+    },
+  });
+})(document.currentScript.dataset);
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/form/README.mdx b/ui/packages/consul-partitions/app/components/consul/partition/form/README.mdx
@@ -0,0 +1,24 @@
+# Consul::Partition::Form
+
+```hbs preview-template
+<DataLoader @src={{
+  uri '/${partition}/${nspace}/${dc}/partition/${id}'
+    (hash
+      partition='partition'
+      nspace='nspace'
+      dc='dc'
+      id=''
+    )
+  }}
+as |loader|>
+  <BlockSlot @name="loaded">
+    <Consul::Partition::Form
+      @item={{loader.data}}
+      @dc={{'dc-1'}}
+      @nspace={{'nspace'}}
+      @partition={{'partition'}}
+      @onsubmit={{noop}}
+    />
+  </BlockSlot>
+</DataLoader>
+```
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/form/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/form/index.hbs
@@ -0,0 +1,126 @@
+<div
+  class="consul-partition-form"
+  ...attributes
+>
+    <DataWriter
+      @sink={{uri
+        '/${partition}/${nspace}/${dc}/partition'
+        (hash
+          partition=''
+          nspace=''
+          dc=@item.Datacenter
+        )
+      }}
+      @type={{'partition'}}
+      @label={{label}}
+      @ondelete={{fn (if @ondelete @ondelete @onsubmit) @item}}
+      @onchange={{fn (optional @onsubmit) @item}}
+      as |writer|>
+
+    <BlockSlot @name="content">
+
+{{#let 
+
+  @item
+
+  (hash
+    help='Must be a valid DNS hostname. Must contain 1-64 characters (numbers, letters, and hyphens), and must begin with a letter. Once created, this cannot be changed.'
+    Name=(array
+      (hash
+        test='^[a-zA-Z0-9]([a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?$'
+        error='Name must be a valid DNS hostname.'
+      )
+    )
+  )
+
+  (hash
+    Description=(array)
+  )
+
+as |item Name Description|}}
+
+<form
+  {{on 'submit' (fn writer.persist item)}}
+  {{disabled (not (can "write partition" item=item))}}
+>
+
+<StateChart 
+  @src={{state-chart 'validate'}}
+as |State Guard Action dispatch state|>
+
+  <fieldset>
+    {{#if (is "new partition" item=item)}}
+    <TextInput
+      @name="Name"
+      @placeholder="Name"
+      @item={{item}}
+      @validations={{Name}}
+      @chart={{hash
+        state=state
+        dispatch=dispatch
+      }}
+    />
+{{/if}}
+    <TextInput
+      @expanded={{true}}
+      @name="Description"
+      @label="Description (Optional)"
+      @item={{item}}
+      @validations={{Description}}
+      @chart={{hash
+        state=state
+        dispatch=dispatch
+      }}
+    />
+  </fieldset>
+
+  <div>
+{{#if (and (is "new partition" item=item) (can "create partitions")) }}
+      <button
+        type="submit"
+        {{disabled (or (is "pristine partition" item=item) (state-matches state "error"))}}
+      >
+        Save
+      </button>
+{{else if (can "write partition" item=item)}}
+      <button type="submit">Save</button>
+{{/if}}
+
+      <button
+        type="reset"
+        {{on 'click' (if @oncancel (fn @oncancel item) (fn @onsubmit item))}}
+      >
+        Cancel
+      </button>
+
+{{#if (and (not (is "new partition" item=item)) (can "delete partition" item=item))}}
+      <ConfirmationDialog @message="Are you sure you want to delete this Partition?">
+        <BlockSlot @name="action" as |confirm|>
+          <button
+            data-test-delete
+            type="button"
+            class="type-delete"
+            {{on 'click' (fn confirm (fn writer.delete item))}}
+          >
+            Delete
+          </button>
+        </BlockSlot>
+        <BlockSlot @name="dialog" as |execute cancel message|>
+          <DeleteConfirmation
+            @message={{message}}
+            @execute={{execute}}
+            @cancel={{cancel}}
+          />
+        </BlockSlot>
+      </ConfirmationDialog>
+{{/if}}
+
+  </div>
+
+</StateChart>
+</form>
+
+{{/let}}
+  </BlockSlot>
+</DataWriter>
+</div>
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/list/README.mdx b/ui/packages/consul-partitions/app/components/consul/partition/list/README.mdx
@@ -0,0 +1,32 @@
+# Consul::Partition::List
+
+A presentational component for rendering Consul Partitions
+
+Please note: 
+
+- For the moment, make sure you have enabled partitions using developer debug
+  cookies.
+
+```hbs preview-template
+<DataSource @src={{uri '/partition/default/dc-1/partitions'}} as |source|>
+  <Consul::Partition::List
+    @items={{source.data}}
+    @ondelete={{noop}}
+  />
+</DataSource>
+```
+
+
+### Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `array` |  | An array of Partitions |
+| `ondelete` | `function` |  | An action to execute when the `Delete` action is clicked |
+
+### See
+
+- [Component Source Code](./index.js)
+- [Template Source Code](./index.hbs)
+
+---
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/list/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/list/index.hbs
@@ -0,0 +1,63 @@
+<ListCollection
+  class="consul-partition-list"
+  ...attributes
+  @items={{@items}}
+  @linkable="linkable partition"
+as |item|>
+    <BlockSlot @name="header">
+{{#if item.DeletedAt}}
+    <p>
+      Deleting {{item.Name}}...
+    </p>
+{{else}}
+      <a data-test-partition={{item.Name}} href={{href-to 'dc.partitions.edit' item.Name}}>{{item.Name}}</a>
+{{/if}}
+    </BlockSlot>
+    <BlockSlot @name="details">
+{{#if item.Description}}
+      <dl>
+        <dt>Description</dt>
+        <dd data-test-description>
+          {{item.Description}}
+        </dd>
+      </dl>
+{{/if}}
+    </BlockSlot>
+    <BlockSlot @name="actions" as |Actions|>
+{{#if (not item.DeletedAt)}}
+      <Actions as |Action|>
+        <Action data-test-edit-action @href={{href-to 'dc.partitions.edit' item.Name}}>
+          <BlockSlot @name="label">
+{{#if (can "write partition" item=item)}}
+            Edit
+{{else}}
+            View
+{{/if}}
+          </BlockSlot>
+        </Action>
+      {{#if (can "delete partition" item=item)}}
+        <Action data-test-delete-action @onclick={{action @ondelete item}} class="dangerous">
+          <BlockSlot @name="label">
+            Delete
+          </BlockSlot>
+          <BlockSlot @name="confirmation" as |Confirmation|>
+            <Confirmation class="warning">
+              <BlockSlot @name="header">
+                Confirm delete
+              </BlockSlot>
+              <BlockSlot @name="body">
+                <p>
+                  Are you sure you want to delete this partition?
+                </p>
+              </BlockSlot>
+              <BlockSlot @name="confirm" as |Confirm|>
+                <Confirm>Delete</Confirm>
+              </BlockSlot>
+            </Confirmation>
+          </BlockSlot>
+        </Action>
+      {{/if}}
+      </Actions>
+{{/if}}
+    </BlockSlot>
+</ListCollection>
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/list/test-support.js b/ui/packages/consul-partitions/app/components/consul/partition/list/test-support.js
@@ -0,0 +1,18 @@
+export const selectors = () => ({
+  ['.consul-partition-list']: {
+    row: {
+      $: '[data-test-list-row]',
+      partition: 'a',
+      name: '[data-test-partition]',
+      description: '[data-test-description]'
+    }
+  }
+});
+export const pageObject = (collection, clickable, attribute, text, actions) => () => {
+  return collection('.consul-partition-list [data-test-list-row]', {
+    partition: clickable('a'),
+    name: attribute('data-test-partition', '[data-test-partition]'),
+    description: text('[data-test-description]'),
+    ...actions(['edit', 'delete']),
+  });
+};
diff --git a/...ages/consul-partitions/app/components/consul/partition/notifications/README.mdx b/...ages/consul-partitions/app/components/consul/partition/notifications/README.mdx
@@ -0,0 +1,46 @@
+# Consul::Partition::Notifications
+
+A Notification component specifically for Partitions (at some point will be replaced with just using `ember-intl`/`t`.
+
+```hbs preview-template
+  <figure>
+    <figcaption>Provide a widget to change the <code>@type</code></figcaption>
+
+    <select
+      {{on 'change' (action (mut this.type) value="target.value")}}
+    >
+      <option>create</option>
+      <option>update</option>
+      <option>delete</option>
+    </select>
+  </figure>
+  <figure>
+    <figcaption>Provide a widget to change the <code>@status</code></figcaption>
+
+    <select
+      {{on 'change' (action (mut this.success) value="target.value")}}
+    >
+      <option>success</option>
+      <option>error</option>
+    </select>
+  </figure>
+  <figure>
+    <figcaption>Show the notification text</figcaption>
+    <p>
+      <Consul::Partition::Notifications
+        @type={{or this.type 'create'}}
+        @status={{or this.success 'success'}}
+        @error={{undefined}}
+      />
+    </p>
+  </figure>
+
+```
+
+
+
+## See
+
+- [Template Source Code](./index.hbs)
+
+---
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/notifications/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/notifications/index.hbs
@@ -0,0 +1,24 @@
+{{#if (eq @type 'create')}}
+  {{#if (eq @status 'success') }}
+    Your partition has been added.
+  {{else}}
+    There was an error adding your partition.
+  {{/if}}
+{{else if (eq @type 'update') }}
+  {{#if (eq @status 'success') }}
+    Your partition has been saved.
+  {{else}}
+    There was an error saving your partition.
+  {{/if}}
+{{ else if (eq @type 'delete')}}
+  {{#if (eq @status 'success') }}
+    Your partition has been marked for deletion.
+  {{else}}
+    There was an error deleting your partition.
+  {{/if}}
+{{/if}}
+{{#let @error.errors.firstObject as |error|}}
+  {{#if error.detail }}
+    <br />{{concat '(' (if error.status (concat error.status ': ')) error.detail ')'}}
+  {{/if}}
+{{/let}}