ui: Auth Methods - Namespace rules tab (#9935)

* Add mock data for NamespaceRules

* Create NamespaceTable component and styling

* Add NamespaceRules route and add to model

* Create Namespace Rules tab and implement with flag to only show in ent

* Add emptystate to namespace rules page

* Rename namespace-rules to be nspace-rules

* Rename NamespaceTable to be NspaceList

ui/packages/consul-ui/app/components/consul/auth-method/index.scss

@@ -24,9 +24,17 @@
         font-weight: $typo-weight-semibold;
         font-size: $typo-size-700;
       }
-      tbody td {
+      tbody {
-        font-size: $typo-size-600;
+        td {
-        color: $black;
+          font-size: $typo-size-600;
+          color: $black;
+        }
+        tr {
+          cursor: default;
+        }
+        tr:hover {
+          box-shadow: none;
+        }
       }
     }
   }
@@ -54,4 +62,26 @@
   }
 }
 
+// Nspace List
+.consul-auth-method-nspace-list {
+  thead {
+    td {
+      color: var(--gray-500) !important;
+      font-weight: $typo-weight-semibold !important;
+      font-size: $typo-size-700 !important;
+    }
+  }
+  tbody {
+    td {
+      font-size: $typo-size-600;
+      color: $black;
+    }
+    tr {
+      cursor: default;
+    }
+    tr:hover {
+      box-shadow: none;
+    }
+  }
+}
 

ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs

@@ -0,0 +1,19 @@
+<div class="consul-auth-method-nspace-list">
+  <table>
+    <thead>
+      <tr>
+        <td>{{t "models.auth-method.Selector"}}</td>
+        <td>{{t "models.auth-method.BindNamespace"}}</td>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each @items as |item|}}
+      <tr>
+        <td>{{item.Selector}}</td>
+        <td>{{item.BindNamespace}}</td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>
+

ui/packages/consul-ui/app/models/auth-method.js

@@ -14,6 +14,7 @@ export default class AuthMethod extends Model {
   @attr('string', { defaultValue: () => '' }) DisplayName;
   @attr('string', { defaultValue: () => 'local' }) TokenLocality;
   @attr('string') Type;
+  @attr() NamespaceRules;
   @or('DisplayName', 'Name') MethodName;
   @attr() Config;
   @attr('string') MaxTokenTTL;

ui/packages/consul-ui/app/router.js

@@ -199,6 +199,9 @@ export const routes = {
           'binding-rules': {
             _options: { path: '/binding-rules' },
           },
+          'nspace-rules': {
+            _options: { path: '/nspace-rules' },
+          },
         },
       },
     },

ui/packages/consul-ui/app/routes/dc/acls/auth-methods/show/nspace-rules.js

@@ -0,0 +1,16 @@
+import Route from 'consul-ui/routing/route';
+
+export default class NspaceRulesRoute extends Route {
+  model() {
+    const parent = this.routeName
+      .split('.')
+      .slice(0, -1)
+      .join('.');
+    return this.modelFor(parent);
+  }
+
+  setupController(controller, model) {
+    super.setupController(...arguments);
+    controller.setProperties(model);
+  }
+}

ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show.hbs

@@ -27,6 +27,9 @@
       compact
         (array
           (hash label="General info" href=(href-to "dc.acls.auth-methods.show.auth-method") selected=(is-href "dc.acls.auth-methods.show.auth-method"))
+    (if (env "CONSUL_NSPACES_ENABLED")
+          (hash label="Namespace rules" href=(href-to "dc.acls.auth-methods.show.nspace-rules") selected=(is-href "dc.acls.auth-methods.show.nspace-rules"))
+    '')
           (hash label="Binding rules" href=(href-to "dc.acls.auth-methods.show.binding-rules") selected=(is-href "dc.acls.auth-methods.show.binding-rules"))
         )
       }}/>

ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/nspace-rules.hbs

@@ -0,0 +1,21 @@
+
+<div class="tab-section">
+{{#if true}}
+  <p>A set of rules that can control which namespace tokens created via this auth method will be created within. Unlike binding rules, the first matching namespace rule wins.</p>
+  <Consul::AuthMethod::NspaceList @items={{item.NamespaceRules}} />
+{{else}}
+  <EmptyState>
+    <BlockSlot @name="header">
+      <h2>No namespace rules</h2>
+    </BlockSlot>
+    <BlockSlot @name="body">
+      <p>A set of rules that can control which namespace tokens created via this auth method will be created within. Unlike binding rules, the first matching namespace rule wins.</p>
+    </BlockSlot>
+    <BlockSlot @name="actions">
+      <li class="docs-link">
+        <a href="{{env 'CONSUL_DOCS_API_URL'}}/acl/auth-methods#namespacerules" rel="noopener noreferrer" target="_blank">Read the documentation</a>
+      </li>
+    </BlockSlot>
+  </EmptyState>
+{{/if}}
+</div>

ui/packages/consul-ui/mock-api/v1/acl/auth-method/_

@@ -28,6 +28,20 @@ SmTjcs+lhMxg4fFY6lBpiEVFiGUjGRR+61R67Lz6U4KJeLNcCm07QwFYKBmpi08g
     const listClaimMappings = {
       "http://example.com/example-1": `${fake.hacker.noun()}`
     }
+    const namespaceRules = `[
+      {
+          "Selector": "${fake.hacker.noun()} in list.group",
+          "BindNamespace": "dc-1"
+      },
+      {
+          "Selector": "serviceaccount.namespace!=${fake.hacker.noun()}",
+          "BindNamespace": "dc-2"
+      },
+      {
+          "Selector": "serviceaccount.namespace==${fake.hacker.noun()}",
+          "BindNamespace": "dc-3"
+      }
+    ]`;
 
     let config = {};
     switch(type) {
@@ -91,6 +105,7 @@ SmTjcs+lhMxg4fFY6lBpiEVFiGUjGRR+61R67Lz6U4KJeLNcCm07QwFYKBmpi08g
       "DisplayName": "${fake.hacker.noun()}",
       "MaxTokenTTL": "${fake.random.number({min: 0, max: 60})}m${fake.random.number({min: 0, max: 60})}s",
       "TokenLocality": "${fake.helpers.randomize(['local', 'global', ''])}",
+      "NamespaceRules": ${namespaceRules},
       "Config": ${JSON.stringify(config)},
       "CreateIndex": ${fake.random.number()},
       "ModifyIndex": 10

ui/packages/consul-ui/translations/en-us.yaml

@@ -192,6 +192,8 @@ models:
     TokenLocality: Token locality
     Type: Type
     MaxTokenTTL: Maximum token TTL
+    Selector: Selector
+    BindNamespace: Bind Namespace
     Config:
       Host: Host
       CACert: CA Cert