ui: Adds partition support to Service and Node Identity templates (#11696)

.changelog/11696.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adds support for partitions to Service and Node Identity template visuals.
+```

ui/packages/consul-ui/app/components/code-editor/README.mdx

@@ -16,11 +16,7 @@ state: needs-love
     Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
     </:label>
     <:content>
-    <!-- Plain text or something that renders data like the following -->
+      {"content": "Initial Content"}
-    <Consul::ServiceIdentity::Template
-        @nspace={{nspace}}
-        @name={{item.Name}}
-    />
     </:content>
 </CodeEditor>
 ```

ui/packages/consul-ui/app/components/code-editor/index.hbs

@@ -18,11 +18,20 @@
             {{mode.name}}
           </PowerSelect>
           <div class="toolbar-separator"></div>
-          <CopyButton @value={{value}} @name="value" />
+          <CopyButton
+            @value={{value}}
+            @name="value"
+          />
         {{/if}}
       {{/if}}
     </div>
   </div>
 </div>
-<IvyCodemirror @value={{value}} @name={{name}} @class={{class}} @options={{options}} @valueUpdated={{action onkeyup}} />
+<IvyCodemirror
+  @value={{value}}
+  @name={{name}}
+  @class={{class}}
+  @options={{options}}
+  @valueUpdated={{action onkeyup}}
+/>
 <pre><code>{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}</code></pre>

ui/packages/consul-ui/app/components/consul/node-identity/template/README.mdx

@@ -0,0 +1,27 @@
+# Consul::Node::Identity::Template
+
+The component is a text-only template that represents what a NodeIdentity
+policy looks like. The policy generated here is **not** what is sent back to
+the backend, instead its just a visual representation of what happens in the
+backend when you save a NodeIdentity.
+
+```hbs preview-template
+<pre><code><Consul::NodeIdentity::Template
+  @partition={{'default-ier'}}
+  @name={{"Policy-Name"}}
+/></code></pre>
+```
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `partition` | `string` | `default` | The name of the current partition  |
+| `name` | `string` |  | The name of the policy the will be used to
+interpolate the various policy names  |
+
+## See
+
+- [Template Source Code](./index.hbs)
+
+---

ui/packages/consul-ui/app/components/consul/node-identity/template/index.hbs

@@ -1,4 +1,27 @@
-{{#if (env "CONSUL_NSPACES_ENABLED")}}
+{{#if (can "use partitions")~}}
+partition "{{or @partition 'default'}}" {
+  {{#if (can "use nspaces")}}
+  namespace "default" {
+    node "{{@name}}" {
+	    policy = "write"
+    }
+  }
+  namespace_prefix "" {
+    service_prefix "" {
+	    policy = "read"
+    }
+  }
+  {{else}}
+  node "{{@name}}" {
+	  policy = "write"
+  }
+  service_prefix "" {
+	  policy = "read"
+  }
+  {{/if}}
+}
+{{~else~}}
+{{~#if (can "use nspaces")~}}
 namespace "default" {
   node "{{@name}}" {
 	  policy = "write"
@@ -16,4 +39,5 @@ node "{{@name}}" {
 service_prefix "" {
 	policy = "read"
 }
-{{/if}}
+{{~/if~}}
+{{~/if~}}

ui/packages/consul-ui/app/components/consul/service-identity/template/README.mdx

@@ -0,0 +1,29 @@
+# Consul::ServiceIdentity::Template
+
+The component is a text-only template that represents what a NodeIdentity
+policy looks like. The policy generated here is **not** what is sent back to
+the backend, instead its just a visual representation of what happens in the
+backend when you save a NodeIdentity.
+
+```hbs preview-template
+<pre><code><Consul::ServiceIdentity::Template
+  @nspace={{'default-est'}}
+  @partition={{'default-ier'}}
+  @name={{"Policy-Name"}}
+/></code></pre>
+```
+
+## Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `nspace` | `string` | `default` | The name of the current namespace  |
+| `partition` | `string` | `default` | The name of the current partition  |
+| `name` | `string` |  | The name of the policy the will be used to
+interpolate the various policy names  |
+
+## See
+
+- [Template Source Code](./index.hbs)
+
+---

ui/packages/consul-ui/app/components/consul/service-identity/template/index.hbs

@@ -1,5 +1,38 @@
-{{#if (env "CONSUL_NSPACES_ENABLED")}}
+{{#if (can "use partitions")}}
-namespace "{{@nspace}}" {
+partition "{{or @partition 'default'}}" {
+  {{#if (can 'use nspaces')}}
+  namespace "{{or @nspace 'default'}}" {
+    service "{{@name}}" {
+	    policy = "write"
+    }
+    service "{{@name}}-sidecar-proxy" {
+	    policy = "write"
+    }
+    service_prefix "" {
+	    policy = "read"
+    }
+    node_prefix "" {
+	    policy = "read"
+    }
+  }
+  {{else}}
+  service "{{@name}}" {
+	  policy = "write"
+  }
+  service "{{@name}}-sidecar-proxy" {
+	  policy = "write"
+  }
+  service_prefix "" {
+	  policy = "read"
+  }
+  node_prefix "" {
+	  policy = "read"
+  }
+  {{/if}}
+}
+{{else}}
+{{#if (can 'use nspaces')}}
+namespace "{{or @nspace 'default'}}" {
   service "{{@name}}" {
 	  policy = "write"
   }
@@ -27,3 +60,4 @@ node_prefix "" {
 	policy = "read"
 }
 {{/if}}
+{{/if}}

ui/packages/consul-ui/app/components/inline-code/README.mdx

@@ -20,3 +20,19 @@ p code {
   @extend %inline-code;
 }
 ```
+
+We also have a `%block-code` that is currently contained in the same CSS files here as it shares so much of this (this should potentially be thought about and reorganized at some stage)
+
+At the time of writing we only use this in the docs for all `<pre><code>`s.
+
+```hbs preview-template
+<pre><code>{
+  "Code": true
+}</code></pre>
+```
+
+```css
+pre code {
+  @extend %block-code;
+}
+```

ui/packages/consul-ui/app/components/inline-code/layout.scss

@@ -2,3 +2,7 @@
   display: inline-block;
   padding: 0 4px;
 }
+%block-code {
+  display: block;
+  padding: 0 8px;
+}

ui/packages/consul-ui/app/components/inline-code/skin.scss

@@ -1,3 +1,4 @@
+%block-code,
 %inline-code {
   border: 1px solid;
   color: rgb(var(--tone-brand-600));

ui/packages/consul-ui/app/components/policy-form/index.hbs

@@ -47,12 +47,11 @@
           <:label>
             Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
           </:label>
-          <:content>
+          <:content><Consul::ServiceIdentity::Template
-            <Consul::ServiceIdentity::Template
               @nspace={{nspace}}
+              @partition={{partition}}
               @name={{item.Name}}
-            />
+            /></:content>
-          </:content>
         </CodeEditor>
 {{else if (eq item.template 'node-identity')}}
         <CodeEditor
@@ -64,11 +63,10 @@
           <:label>
             Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
           </:label>
-          <:content>
+          <:content><Consul::NodeIdentity::Template
-            <Consul::NodeIdentity::Template
               @name={{item.Name}}
-            />
+              @partition={{partition}}
-          </:content>
+            /></:content>
         </CodeEditor>
 {{else}}
         <CodeEditor

ui/packages/consul-ui/app/components/policy-selector/index.hbs

@@ -125,6 +125,7 @@
               <:content>
                 <Consul::ServiceIdentity::Template
                   @nspace={{nspace}}
+                  @partition={{partition}}
                   @name={{item.Name}}
                 />
               </:content>
@@ -140,6 +141,7 @@
               <:content>
                 <Consul::NodeIdentity::Template
                   @name={{item.Name}}
+                  @partition={{partition}}
                 />
               </:content>
             </CodeEditor>

ui/packages/consul-ui/app/styles/debug.scss

@@ -31,24 +31,24 @@
   @extend %p3;
   text-align: center;
 }
-[id^="docfy-demo-preview-color"] ul,
+[id^='docfy-demo-preview-color'] ul,
-[id^="docfy-demo-preview-typography"] ul,
+[id^='docfy-demo-preview-typography'] ul,
-[id^="docfy-demo-preview-icons"] ul {
+[id^='docfy-demo-preview-icons'] ul {
   @extend %debug-grid;
 }
 
-[id^="docfy-demo-preview-typography"] figure,
+[id^='docfy-demo-preview-typography'] figure,
-[id^="docfy-demo-preview-icons"] figure {
+[id^='docfy-demo-preview-icons'] figure {
   border: var(--decor-border-100);
   border-color: rgb(var(--tone-gray-300));
   height: 80px;
 }
-[id^="docfy-demo-preview-icons"] figure::before {
+[id^='docfy-demo-preview-icons'] figure::before {
   position: relative;
   top: 20px;
 }
 
-[id^="docfy-demo-preview-color"] figure {
+[id^='docfy-demo-preview-color'] figure {
   height: 40px;
 }
 #docfy-demo-preview-color0 {
@@ -60,7 +60,7 @@
   @extend %theme-dark;
 }
 
-[id^="docfy-demo-preview-typography"] {
+[id^='docfy-demo-preview-typography'] {
   .debug-h000 {
     @extend %h000;
   }
@@ -248,6 +248,9 @@ html.with-route-announcer .route-title {
       figcaption code {
         @extend %inline-code;
       }
+      pre code {
+        @extend %block-code;
+      }
       figure > [type='text'] {
         border: 1px solid rgb(var(--tone-gray-999));
         width: 100%;