diff --git a/ui-v2/app/components/consul-intention-permission-list/index.scss b/ui-v2/app/components/consul-intention-permission-list/index.scss
index 9ed02408e0..6c91810fa7 100644
--- a/ui-v2/app/components/consul-intention-permission-list/index.scss
+++ b/ui-v2/app/components/consul-intention-permission-list/index.scss
@@ -1,24 +1,5 @@
@import './skin';
@import './layout';
-%list-row-200 {
- @extend %list-row;
- padding-top: 0 !important;
- padding-bottom: 0 !important;
-}
-%list-row-200 .detail {
- grid-row-start: header !important;
- grid-row-end: detail !important;
- align-self: center !important;
-}
-%list-row-200 .popover-menu > [type="checkbox"] + label {
- padding: 0;
-}
-%list-row-200 .popover-menu > [type="checkbox"] + label + div:not(.above) {
- top: 30px;
-}
-%list-row-200 dd {
- @extend %p2;
-}
.consul-intention-permission-list > ul > li {
@extend %list-row-200;
}
diff --git a/ui-v2/app/components/form-group/element/checkbox/index.hbs b/ui-v2/app/components/form-group/element/checkbox/index.hbs
new file mode 100644
index 0000000000..2145cd5bc1
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/checkbox/index.hbs
@@ -0,0 +1,8 @@
+
diff --git a/ui-v2/app/components/form-group/element/error/index.hbs b/ui-v2/app/components/form-group/element/error/index.hbs
new file mode 100644
index 0000000000..33049dbd77
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/error/index.hbs
@@ -0,0 +1,6 @@
+
+ {{yield}}
+
diff --git a/ui-v2/app/components/form-group/element/index.hbs b/ui-v2/app/components/form-group/element/index.hbs
new file mode 100644
index 0000000000..3eaa61e51a
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/index.hbs
@@ -0,0 +1,33 @@
+{{#let (hash
+
+ Element=(component 'form-group/element' group=@group name=@name)
+
+ Text=(component 'form-group/element/text' didinsert=(action this.connect) name=this.name oninput=(action (mut this.touched) true))
+ Checkbox=(component 'form-group/element/checkbox' didinsert=(action this.connect) name=this.name onchange=(action (mut this.touched) true))
+ Radio=(component 'form-group/element/radio' didinsert=(action this.connect) name=this.name onchange=(action (mut this.touched) true))
+
+
+ Label=(component 'form-group/element/label')
+ Error=(component 'form-group/element/error')
+
+ state=state
+)
+as |el|}}
+ {{#if (contains this.type (array 'radiogroup' 'checkbox-group' 'checkboxgroup'))}}
+
+ {{yield el}}
+
+ {{else}}
+
+ {{yield el}}
+
+ {{/if}}
+{{/let}}
\ No newline at end of file
diff --git a/ui-v2/app/components/form-group/element/index.js b/ui-v2/app/components/form-group/element/index.js
new file mode 100644
index 0000000000..0d319fc89a
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/index.js
@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class Element extends Component {
+ @tracked el;
+
+ @tracked touched = false;
+
+ get type() {
+ if (typeof this.el !== 'undefined') {
+ return this.el.dataset.type || this.el.getAttribute('type') || this.el.getAttribute('role');
+ }
+ return this.args.type;
+ }
+ get name() {
+ if (typeof this.args.group !== 'undefined') {
+ return `${this.args.group.name}[${this.args.name}]`;
+ } else {
+ return this.args.name;
+ }
+ }
+ get prop() {
+ return `${this.args.name.toLowerCase().replaceAll('.', '-')}`;
+ }
+ get state() {
+ const error = this.touched && this.args.error;
+ return {
+ matches: name => name === 'error' && error,
+ };
+ }
+
+ @action
+ connect($el) {
+ this.el = $el;
+ }
+}
diff --git a/ui-v2/app/components/form-group/element/label/index.hbs b/ui-v2/app/components/form-group/element/label/index.hbs
new file mode 100644
index 0000000000..eaa9339369
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/label/index.hbs
@@ -0,0 +1,6 @@
+
+ {{yield}}
+
diff --git a/ui-v2/app/components/form-group/element/radio/index.hbs b/ui-v2/app/components/form-group/element/radio/index.hbs
new file mode 100644
index 0000000000..bc124760f0
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/radio/index.hbs
@@ -0,0 +1,8 @@
+
diff --git a/ui-v2/app/components/form-group/element/text/index.hbs b/ui-v2/app/components/form-group/element/text/index.hbs
new file mode 100644
index 0000000000..d43d874685
--- /dev/null
+++ b/ui-v2/app/components/form-group/element/text/index.hbs
@@ -0,0 +1,8 @@
+
diff --git a/ui-v2/app/components/form-group/index.hbs b/ui-v2/app/components/form-group/index.hbs
new file mode 100644
index 0000000000..5001ae85a3
--- /dev/null
+++ b/ui-v2/app/components/form-group/index.hbs
@@ -0,0 +1,3 @@
+{{yield (hash
+ Element=(component 'form-group/element' group=this)
+)}}
diff --git a/ui-v2/app/components/form-group/index.js b/ui-v2/app/components/form-group/index.js
new file mode 100644
index 0000000000..1376809758
--- /dev/null
+++ b/ui-v2/app/components/form-group/index.js
@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class FormGroup extends Component {
+ get name() {
+ return this.args.name;
+ }
+}
diff --git a/ui-v2/app/styles/base/color/frame-placeholders.scss b/ui-v2/app/styles/base/color/frame-placeholders.scss
index b7454e0b20..ea7794a028 100644
--- a/ui-v2/app/styles/base/color/frame-placeholders.scss
+++ b/ui-v2/app/styles/base/color/frame-placeholders.scss
@@ -107,6 +107,18 @@
border-color: $green-800;
color: $white;
}
+%frame-blue-200 {
+ @extend %frame-border-000;
+ background-color: $white;
+ border-color: $blue-300;
+ color: $blue-300;
+}
+%frame-blue-300 {
+ @extend %frame-border-000;
+ background-color: $white;
+ border-color: $blue-500;
+ color: $blue-500;
+}
%frame-blue-500 {
@extend %frame-border-000;
background-color: $blue-050;
diff --git a/ui-v2/app/styles/components/list-row/layout.scss b/ui-v2/app/styles/components/list-row/layout.scss
index a11685a989..e3b59be6fc 100644
--- a/ui-v2/app/styles/components/list-row/layout.scss
+++ b/ui-v2/app/styles/components/list-row/layout.scss
@@ -30,3 +30,23 @@
%list-row-detail > span {
margin-right: 18px;
}
+%list-row-200 {
+ @extend %list-row;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+}
+%list-row-200 .detail {
+ grid-row-start: header !important;
+ grid-row-end: detail !important;
+ align-self: center !important;
+ padding: 5px 0;
+}
+%list-row-200 .popover-menu > [type='checkbox'] + label {
+ padding: 0;
+}
+%list-row-200 .popover-menu > [type='checkbox'] + label + div:not(.above) {
+ top: 30px;
+}
+%list-row-200 dd {
+ @extend %p2;
+}
diff --git a/ui-v2/app/styles/routes.scss b/ui-v2/app/styles/routes.scss
index ec4b5b2e0e..5af7d3f15b 100644
--- a/ui-v2/app/styles/routes.scss
+++ b/ui-v2/app/styles/routes.scss
@@ -3,3 +3,4 @@
@import 'routes/dc/nodes/index';
@import 'routes/dc/kv/index';
@import 'routes/dc/acls/index';
+@import 'routes/dc/intentions/index';
diff --git a/ui-v2/app/styles/routes/dc/intentions/index.scss b/ui-v2/app/styles/routes/dc/intentions/index.scss
new file mode 100644
index 0000000000..15496bae21
--- /dev/null
+++ b/ui-v2/app/styles/routes/dc/intentions/index.scss
@@ -0,0 +1,3 @@
+html[data-route^='dc.intentions.edit'] .definition-table {
+ margin-bottom: 1em;
+}
diff --git a/ui-v2/tests/acceptance/dc/intentions/filtered-select.feature b/ui-v2/tests/acceptance/dc/intentions/filtered-select.feature
index 0a7443725f..478b504781 100644
--- a/ui-v2/tests/acceptance/dc/intentions/filtered-select.feature
+++ b/ui-v2/tests/acceptance/dc/intentions/filtered-select.feature
@@ -16,17 +16,11 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
- Name: service-3
Kind: connect-proxy
---
- And 1 intention model from yaml
- ---
- SourceName: 'service-0'
- DestinationName: 'service-1'
- ---
When I visit the intention page for yaml
---
dc: datacenter
- intention: intention
---
- Then the url should be /datacenter/intentions/intention
+ Then the url should be /datacenter/intentions/create
And I click "[data-test-[Name]-element] .ember-power-select-trigger"
Then I see the text "* (All Services)" in ".ember-power-select-option:nth-last-child(3)"
Then I see the text "service-0" in ".ember-power-select-option:nth-last-child(2)"
@@ -35,7 +29,7 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
---------------
| Name |
| source |
- #| destination |
+ | destination |
---------------
Scenario: Opening the [Name] dropdown with 2 services with the same name from different nspaces
Given 1 datacenter model with the value "datacenter"
@@ -47,17 +41,11 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
Namespace: nspace
Kind: ~
---
- And 1 intention model from yaml
- ---
- SourceName: 'service-0'
- DestinationName: 'service-0'
- ---
When I visit the intention page for yaml
---
dc: datacenter
- intention: intention
---
- Then the url should be /datacenter/intentions/intention
+ Then the url should be /datacenter/intentions/create
And I click "[data-test-[Name]-element] .ember-power-select-trigger"
Then I see the text "* (All Services)" in ".ember-power-select-option:nth-last-child(2)"
Then I see the text "service-0" in ".ember-power-select-option:last-child"
@@ -65,5 +53,5 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
---------------
| Name |
| source |
- #| destination |
+ | destination |
---------------
diff --git a/ui-v2/tests/acceptance/dc/intentions/form-select.feature b/ui-v2/tests/acceptance/dc/intentions/form-select.feature
index 346bcc7065..66df185ba4 100644
--- a/ui-v2/tests/acceptance/dc/intentions/form-select.feature
+++ b/ui-v2/tests/acceptance/dc/intentions/form-select.feature
@@ -8,9 +8,8 @@ Feature: dc / intentions / form-select: Intention Service Select Dropdowns
When I visit the intention page for yaml
---
dc: datacenter
- intention: intention
---
- Then the url should be /datacenter/intentions/intention
+ Then the url should be /datacenter/intentions/create
And I click "[data-test-[Name]-element] .ember-power-select-trigger"
And I type "something" into ".ember-power-select-search-input"
And I click ".ember-power-select-option:first-child"
@@ -19,5 +18,5 @@ Feature: dc / intentions / form-select: Intention Service Select Dropdowns
---------------
| Name |
| source |
- # | destination |
+ | destination |
---------------