[ui] Helios and Power Select upgrades (#22328)

* Helios and Power Select upgrades * Renamed namespaced contextual components
hashicorp · May 31, 2024 · 2c449b9 · 2c449b9
1 parent a7c2599
commit 2c449b9
Show file tree

Hide file tree

Showing 10 changed files with 1,100 additions and 1,184 deletions.
diff --git a/ui/app/components/actions-flyout.hbs b/ui/app/components/actions-flyout.hbs
@@ -34,7 +34,7 @@
             <A.Header @title="No actions in queue" />
             <A.Body @text="Your actions have been manually cleared. To run more, head to a Job or Task page with actions in its Jobspec, and an Actions dropdown will automatically populate." />
             <A.Footer @hasDivider={{true}} as |F|>
-              <F.Link::Standalone @icon="docs-link" @text="Learn more about Actions" @href="https://developer.hashicorp.com/nomad/docs/job-specification/action" @iconPosition="trailing" />
+              <F.LinkStandalone @icon="docs-link" @text="Learn more about Actions" @href="https://developer.hashicorp.com/nomad/docs/job-specification/action" @iconPosition="trailing" />
             </A.Footer>
           </Hds::ApplicationState>
         {{/each}}

diff --git a/ui/app/components/sentinel-policy-editor.hbs b/ui/app/components/sentinel-policy-editor.hbs
@@ -53,27 +53,27 @@
 		<Hds::Form::Radio::Group @layout="horizontal" @name="method-demo1" {{on "change" this.updatePolicyEnforcementLevel}} as |G|>
 		<G.Legend>Enforcement Level</G.Legend>
 		<G.HelperText>See  <Hds::Link::Inline @href="https://developer.hashicorp.com/nomad/tutorials/access-control/access-control-tokens#token-types">Sentinel Policy documentation</Hds::Link::Inline> for more information.</G.HelperText>
-		<G.Radio::Field
+		<G.RadioField
 			@id="advisory"
 			checked={{eq @policy.enforcementLevel "advisory"}}
 			data-test-token-type="client"
 		as |F|>
 			<F.Label>Advisory</F.Label>
-		</G.Radio::Field>
-		<G.Radio::Field
+		</G.RadioField>
+		<G.RadioField
 			@id="soft-mandatory"
 			checked={{eq @policy.enforcementLevel "soft-mandatory"}}
 			data-test-token-type="soft-mandatory"
 		as |F|>
 			<F.Label>Soft Mandatory</F.Label>
-		</G.Radio::Field>
-		<G.Radio::Field
+		</G.RadioField>
+		<G.RadioField
 			@id="hard-mandatory"
 			checked={{eq @policy.enforcementLevel "hard-mandatory"}}
 			data-test-token-type="hard-mandatory"
 		as |F|>
 			<F.Label>Hard Mandatory</F.Label>
-		</G.Radio::Field>
+		</G.RadioField>
 		</Hds::Form::Radio::Group>
 	</div>
 

diff --git a/ui/app/components/token-editor.hbs b/ui/app/components/token-editor.hbs
@@ -25,37 +25,37 @@
 
     {{!-- Radio to select between 1, 4, 8, 24, or never --}}
     <Hds::Form::Radio::Group @layout="horizontal" @name="expiration-time" {{on "change" this.updateTokenExpirationTTL}} as |G|>
-      <G.Radio::Field
+      <G.RadioField
         @id="10m"
         @value="10m"
       as |F|>
         <F.Label>10 minutes</F.Label>
-      </G.Radio::Field>
-      <G.Radio::Field
+      </G.RadioField>
+      <G.RadioField
         @id="8h"
         @value="8h"
       as |F|>
         <F.Label>8 hours</F.Label>
-      </G.Radio::Field>
-      <G.Radio::Field
+      </G.RadioField>
+      <G.RadioField
         @id="24h"
         @value="24h"
       as |F|>
         <F.Label>24 hours</F.Label>
-      </G.Radio::Field>
-      <G.Radio::Field
+      </G.RadioField>
+      <G.RadioField
         @id="never"
         @value="never"
         checked={{eq @token.expirationTTL "never"}}
       as |F|>
         <F.Label>Never</F.Label>
-      </G.Radio::Field>
-      <G.Radio::Field
+      </G.RadioField>
+      <G.RadioField
         @id="custom"
         @value="custom"
       as |F|>
         <F.Label>Custom</F.Label>
-      </G.Radio::Field>
+      </G.RadioField>
     </Hds::Form::Radio::Group>
 
     {{#if @token.expirationTime}}
@@ -99,20 +99,20 @@
     <Hds::Form::Radio::Group @layout="horizontal" @name="method-demo1" {{on "change" this.updateTokenType}} as |G|>
       <G.Legend>Client or Management token?</G.Legend>
       <G.HelperText>See  <Hds::Link::Inline @href="https://developer.hashicorp.com/nomad/tutorials/access-control/access-control-tokens#token-types">Token types documentation</Hds::Link::Inline> for more information.</G.HelperText>
-      <G.Radio::Field
+      <G.RadioField
         @id="client"
         checked={{eq @token.type "client"}}
         data-test-token-type="client"
       as |F|>
         <F.Label>Client</F.Label>
-      </G.Radio::Field>
-      <G.Radio::Field
+      </G.RadioField>
+      <G.RadioField
         @id="management"
         checked={{eq @token.type "management"}}
         data-test-token-type="management"
       as |F|>
         <F.Label>Management</F.Label>
-      </G.Radio::Field>
+      </G.RadioField>
     </Hds::Form::Radio::Group>
   </div>
 
@@ -236,4 +236,4 @@
       />
 		{{/if}}
 	</footer>
-</form>
+</form>
diff --git a/ui/app/templates/administration/index.hbs b/ui/app/templates/administration/index.hbs
@@ -61,4 +61,4 @@
     {{/if}}
   </div>
 </section>
-{{outlet}}
+{{outlet}}
diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
@@ -319,7 +319,7 @@
               />
             {{/if}}
           </A.Body>
-        <A.Footer @hasDivider={{true}}>
+        <A.Footer @hasDivider={{true}} as |F|>
           <Hds::Button
             @text="Reset Filters"
             @color="tertiary"
@@ -328,10 +328,9 @@
             {{on "click" (action this.resetFilters)}}
           />
 
-          {{!-- TODO: HDS4.0, convert to F.LinkStandalone --}}
-          <Hds::Link::Standalone @icon="docs" @text="Learn more about Filter Expressions" @href="https://developer.hashicorp.com/nomad/api-docs#creating-expressions" @iconPosition="trailing" />
+          <F.LinkStandalone @icon="docs" @text="Learn more about Filter Expressions" @href="https://developer.hashicorp.com/nomad/api-docs#creating-expressions" @iconPosition="trailing" />
 
-          <Hds::Link::Standalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
+          <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
             @iconPosition="trailing" />
 
         </A.Footer>
@@ -340,9 +339,8 @@
           <A.Body
             @text="No jobs found."
           />
-          <A.Footer @hasDivider={{true}}>
-            {{!-- TODO: HDS4.0, convert to F.LinkStandalone --}}
-            <Hds::Link::Standalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
+          <A.Footer @hasDivider={{true}} as |F|>
+            <F.LinkStandalone @icon="plus" @text="Run a New Job" @route="jobs.run" 
               @iconPosition="trailing" />
           </A.Footer>
         {{/if}}

diff --git a/ui/app/templates/jobs/job/variables.hbs b/ui/app/templates/jobs/job/variables.hbs
@@ -55,7 +55,7 @@
         </li>
       </ul>
     </A.Description>
-    <A.Link::Standalone @color="secondary" @icon="arrow-right" @iconPosition="trailing" @text="Learn more about Nomad Variables" @href="https://developer.hashicorp.com/nomad/tutorials/variables" />
+    <A.LinkStandalone @color="secondary" @icon="arrow-right" @iconPosition="trailing" @text="Learn more about Nomad Variables" @href="https://developer.hashicorp.com/nomad/tutorials/variables" />
   </Hds::Alert>
 </header>
 

diff --git a/ui/app/templates/settings/user-settings.hbs b/ui/app/templates/settings/user-settings.hbs
@@ -11,24 +11,24 @@
     <A.Generic>
       <Hds::Separator/>
       <Hds::Form::Toggle::Group as |G|>
-        <G.Toggle::Field
+        <G.ToggleField
           name="word-wrap"
           @id="word-wrap"
           checked={{this.wordWrap}}
           {{on "change" (action (mut this.wordWrap) (not this.wordWrap))}}
         as |F|>
           <F.Label>Word Wrap</F.Label>
           <F.HelperText>Wrap lines of text in logs and exec terminals in the UI</F.HelperText>
-        </G.Toggle::Field>
-        <G.Toggle::Field
+        </G.ToggleField>
+        <G.ToggleField
           name="jostle"
           @id="jostle"
           checked={{this.liveUpdateJobsIndex}}
           {{on "change" (action (mut this.liveUpdateJobsIndex) (not this.liveUpdateJobsIndex))}}
         as |F|>
           <F.Label>Live Updates to <LinkTo @route="jobs.index">Jobs Index</LinkTo></F.Label>
           <F.HelperText>When enabled, new or removed jobs will pop into and out of view on your jobs page. When disabled, you will be notified that changes are pending.</F.HelperText>
-        </G.Toggle::Field>
+        </G.ToggleField>
       </Hds::Form::Toggle::Group>
     </A.Generic>
   </Hds::Alert>

diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
@@ -40,6 +40,8 @@ module.exports = function (defaults) {
       precision: 4,
       includePaths: [
         './node_modules/@hashicorp/design-system-tokens/dist/products/css',
+        './node_modules/@hashicorp/ember-flight-icons/dist/styles',
+        './node_modules/@hashicorp/design-system-components/dist/styles',
       ],
     },
   });

diff --git a/ui/package.json b/ui/package.json
@@ -106,7 +106,7 @@
     "ember-on-resize-modifier": "^1.0.0",
     "ember-overridable-computed": "^1.0.0",
     "ember-page-title": "^7.0.0",
-    "ember-power-select": "^4.1.7",
+    "ember-power-select": "^7.2.0",
     "ember-qunit": "^5.1.5",
     "ember-render-helpers": "^0.2.0",
     "ember-resolver": "^8.0.3",
@@ -177,8 +177,8 @@
   },
   "dependencies": {
     "@babel/helper-string-parser": "^7.19.4",
-    "@hashicorp/design-system-components": "^3.6.0",
-    "@hashicorp/ember-flight-icons": "^4.0.4",
+    "@hashicorp/design-system-components": "^4.3.0",
+    "@hashicorp/ember-flight-icons": "^5.0.2",
     "@percy/cli": "^1.6.1",
     "@percy/ember": "^3.0.0",
     "curved-arrows": "^0.1.0",
@@ -192,7 +192,6 @@
   },
   "resolutions": {
     "ember-auto-import": "^2.4.0",
-    "ember-element-helper": "0.6.0",
     "prop-types": "^15.8.1"
   }
 }