[ui, backport] Access Control CRUD: Make name fields for Policies and Roles required (#18605) (#18626)

* Access Control CRUD: Make name fields for Policies and Roles required (#18605)

* Removed file since merged with access-control.scss

ui/app/components/policy-editor.hbs

@@ -3,20 +3,17 @@
   SPDX-License-Identifier: MPL-2.0
 ~}}
 
-<form class="edit-policy" autocomplete="off" {{on "submit" this.save}}>
+<form class="acl-form" autocomplete="off" {{on "submit" this.save}}>
 	{{#if @policy.isNew }}
-		<label>
-			<span>
-				Policy Name
-			</span>
-			<Input
-				data-test-policy-name-input
-				@type="text"
-				@value={{@policy.name}}
-				class="input"
-				{{autofocus}}
-			/>
-		</label>
+		<Hds::Form::TextInput::Field
+			@isRequired={{true}}
+			data-test-policy-name-input
+			@value={{@policy.name}}
+			{{on "input" this.updatePolicyName}}
+			{{autofocus}}
+		as |F|>
+			<F.Label>Policy Name</F.Label>
+		</Hds::Form::TextInput::Field>
 	{{/if}}
 
 	<div class="boxed-section">

ui/app/components/policy-editor.js

@@ -19,6 +19,10 @@ export default class PolicyEditorComponent extends Component {
     this.policy.set('rules', value);
   }
 
+  @action updatePolicyName({ target: { value } }) {
+    this.policy.set('name', value);
+  }
+
   @action async save(e) {
     if (e instanceof Event) {
       e.preventDefault(); // code-mirror "command+enter" submits the form, but doesnt have a preventDefault()

ui/app/components/role-editor.hbs

@@ -4,18 +4,15 @@
 ~}}
 
 <form class="acl-form" autocomplete="off" {{on "submit" this.save}}>
-	<label>
-		<span>
-			Role Name
-		</span>
-		<Input
+		<Hds::Form::TextInput::Field
+			@isRequired={{true}}
 			data-test-role-name-input
-			@type="text"
 			@value={{@role.name}}
-			class="input"
+			{{on "input" this.updateRoleName}}
 			{{autofocus ignore=(not @role.isNew)}}
-		/>
-	</label>
+		as |F|>
+			<F.Label>Role Name</F.Label>
+		</Hds::Form::TextInput::Field>
 
 	<div>
 		<label>

ui/app/components/role-editor.js

@@ -26,6 +26,10 @@ export default class RoleEditorComponent extends Component {
     this.rolePolicies = this.role.policies.toArray() || [];
   }
 
+  @action updateRoleName({ target: { value } }) {
+    this.role.set('name', value);
+  }
+
   @action updateRolePolicies(policy, event) {
     let { checked } = event.target;
     if (checked) {
@@ -53,6 +57,11 @@ export default class RoleEditorComponent extends Component {
         throw new Error(`A role with name ${this.role.name} already exists.`);
       }
 
+      // If no policies are selected, throw an error
+      if (this.rolePolicies.length === 0) {
+        throw new Error(`You must select at least one policy.`);
+      }
+
       this.role.policies = this.rolePolicies;
 
       await this.role.save();

ui/app/styles/components.scss

@@ -56,7 +56,6 @@
 @import './components/services';
 @import './components/task-sub-row';
 @import './components/authorization';
-@import './components/policies';
 @import './components/metadata-editor';
 @import './components/job-status-panel';
 @import './components/access-control';

ui/app/styles/components/access-control.scss

@@ -56,6 +56,7 @@
 
 .acl-form {
   display: grid;
+  max-width: 100%;
   gap: 2rem;
 
   .selection-checkbox {
@@ -74,6 +75,16 @@
   .expiration-time fieldset {
     margin-bottom: 1rem;
   }
+
+  .boxed-section {
+    overflow: auto;
+    width: 100%;
+  }
+
+  .policy-editor {
+    max-height: 600px;
+    overflow: auto;
+  }
 }
 
 .acl-explainer {
@@ -82,3 +93,44 @@
   gap: 2rem;
   margin-bottom: 2rem;
 }
+
+.token-operations {
+  margin-bottom: 3rem;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fit, 50%);
+  grid-auto-rows: minmax(100px, auto);
+  gap: 1rem;
+
+  .boxed-section {
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    .external-link svg {
+      position: relative;
+      top: 3px;
+    }
+
+    button.create-test-token,
+    pre {
+      margin-top: 1rem;
+    }
+
+    pre {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-content: flex-start;
+      white-space: normal;
+      overflow: visible;
+    }
+  }
+}
+
+@media #{$mq-hidden-gutter} {
+  .token-operations {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+}

ui/app/styles/components/policies.scss

@@ -1,79 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-// TODO: merge this in with access-control.scss, consider getting rid of policies table specific stuff
-
-table.policies {
-  tr {
-    cursor: pointer;
-
-    &:hover td {
-      background-color: #f5f5f5;
-    }
-    a {
-      color: black;
-      text-decoration: none;
-    }
-    .number-expired {
-      color: $red;
-    }
-  }
-}
-
-.edit-policy {
-  .policy-editor {
-    max-height: 600px;
-    overflow: auto;
-  }
-
-  .input {
-    margin-bottom: 1rem;
-  }
-}
-
-.token-operations {
-  margin-bottom: 3rem;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(auto-fit, 50%);
-  grid-auto-rows: minmax(100px, auto);
-  gap: 1rem;
-
-  .boxed-section {
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    .external-link svg {
-      position: relative;
-      top: 3px;
-    }
-
-    button.create-test-token,
-    pre {
-      margin-top: 1rem;
-    }
-
-    pre {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      align-content: flex-start;
-      white-space: normal;
-      overflow: visible;
-    }
-  }
-}
-
-@media #{$mq-hidden-gutter} {
-  .token-operations {
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-}
-
-table.tokens {
-  margin-bottom: 3rem;
-}

ui/app/templates/access-control/policies/policy.hbs

@@ -72,7 +72,7 @@
     {{#if this.tokens.length}}
       <ListTable
         @source={{this.tokens}}
-        @class="tokens no-mobile-condense" as |t|>
+        @class="no-mobile-condense" as |t|>
         <t.head>
           <th>Name</th>
           <th>Created</th>