chore: 🤖 udate hds from v3.5 to v4 (#2350)

* chore: 🤖 udate hds from v3.5 to v4

addons/rose/addon/styles/addon.scss

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import '@hashicorp/design-system-components';
+@import '@hashicorp/design-system-components.css';
 @import 'hds/themes/dark-mode';
 @import 'hds/overrides';

addons/rose/index.js

@@ -13,13 +13,14 @@ module.exports = {
   name: require('./package').name,
   included(app) {
     this._super.included.apply(this, arguments);
-
+    app.import(
+      'node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css',
+    );
     app.import('node_modules/codemirror/lib/codemirror.css');
     app.import('node_modules/codemirror/theme/monokai.css');
     app.import('node_modules/codemirror/addon/lint/lint.css');
     app.import('node_modules/jsonlint/lib/jsonlint.js');
 
-    this.includeHDSStyles(app);
     this.includeFlightIcons(app);
     this.includePublic(app);
     this.setupSVGO(app);
@@ -36,26 +37,6 @@ module.exports = {
       .contentFor(type, config);
   },
 
-  /**
-   * Finds the HDS styles folder and includes it into the running
-   * application's `sassOptions.includePaths`.
-   */
-  includeHDSStyles(app) {
-    const tokensPath =
-      '../../node_modules/@hashicorp/design-system-tokens/dist/products/css';
-    const hdsPath =
-      '../../node_modules/@hashicorp/design-system-components/app/styles';
-
-    // Setup default sassOptions on the running application
-    app.options.sassOptions = app.options.sassOptions || {};
-    app.options.sassOptions.includePaths =
-      app.options.sassOptions.includePaths || [];
-
-    // Include the addon styles
-    app.options.sassOptions.includePaths.push(tokensPath);
-    app.options.sassOptions.includePaths.push(hdsPath);
-  },
-
   /**
    * Finds the structure-icons folder and includes it into the
    * ember-inline-svg addon.
@@ -96,6 +77,9 @@ module.exports = {
 
   /**
    * Adjust SVG optimizer defaults (used by ember-inline-svg).
+   * Note: Currently, there is a svgo pre-release that disables removeViewBox
+   * by default. So, this extra setup can be discarded once ember-inline-svg
+   * is updated to svgo v4.
    */
   setupSVGO(app) {
     app.options.svg = app.options.svg || {};

addons/rose/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@embroider/test-setup": "^2.1.1",
-    "@hashicorp/design-system-components": "^3.5.0",
+    "@hashicorp/design-system-components": "^4.4.1",
     "codemirror": "5.65.7",
     "ember-auto-import": "^2.6.3",
     "ember-cli-babel": "^7.26.11",

package.json

@@ -71,7 +71,8 @@
     "**/ember-electron/**/got": "^11.8.6",
     "**/ember-cli/**/ansi-html": "^0.0.9",
     "**/ember-cli/testem/fireworm/async": "^2.6.4",
-    "**/desktop/@doyensec/electronegativity/winston/async": "^2.6.4"
+    "**/desktop/@doyensec/electronegativity/winston/async": "^2.6.4",
+    "**/@hashicorp/design-system-components/ember-stargate": "^0.6.0"
   },
   "config": {
     "commitizen": {

ui/admin/app/components/form/auth-method/oidc/index.hbs

@@ -386,7 +386,7 @@
           as |G|
         >
           {{#each this.prompts as |prompt|}}
-            <G.Checkbox::Field
+            <G.CheckboxField
               @id={{prompt}}
               checked={{includes prompt this.selectedPrompts}}
               {{on 'change' (fn this.updatePrompt prompt)}}
@@ -398,7 +398,7 @@
               <F.HelperText>
                 {{t (concat 'resources.auth-method.form.' prompt '.help')}}
               </F.HelperText>
-            </G.Checkbox::Field>
+            </G.CheckboxField>
           {{/each}}
         </Hds::Form::Checkbox::Group>
       {{/unless}}

ui/admin/app/components/form/credential-library/vault-generic/index.hbs

@@ -205,13 +205,13 @@
       {{t 'resources.credential-library.form.http_method.help'}}
     </G.HelperText>
     {{#each this.httpMethodOptions as |httpMethod|}}
-      <G.Radio::Field
+      <G.RadioField
         checked={{eq @model.http_method httpMethod}}
         @value={{httpMethod}}
         as |F|
       >
         <F.Label>{{httpMethod}}</F.Label>
-      </G.Radio::Field>
+      </G.RadioField>
     {{/each}}
   </Hds::Form::Radio::Group>
 

ui/admin/app/templates/scopes/scope/credential-stores/index.hbs

@@ -143,7 +143,7 @@
         />
         {{#if (can 'create model' this.scope collection='credential-stores')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.credential-stores.new'

ui/admin/app/templates/scopes/scope/groups/index.hbs

@@ -117,7 +117,7 @@
         />
         {{#if (can 'create model' this.scope collection='groups')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.groups.new'

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -124,7 +124,7 @@
         />
         {{#if (can 'create model' this.scope collection='host-catalogs')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.host-catalogs.new'

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -111,7 +111,7 @@
         />
         {{#if (can 'create model' this.scope collection='roles')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.roles.new'

ui/admin/app/templates/scopes/scope/scopes/index.hbs

@@ -132,7 +132,7 @@
         />
         {{#if (can 'create model' @model.currentScope collection='scopes')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.scopes.new'

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel/index.hbs

@@ -24,7 +24,7 @@
         }}
       />
       <A.Footer as |F|>
-        <F.Link::Standalone
+        <F.LinkStandalone
           @icon='learn-link'
           @text={{t
             'resources.session-recording.channel.messages.missing.link'

ui/admin/app/templates/scopes/scope/targets/index.hbs

@@ -204,7 +204,7 @@
         />
         {{#if (can 'create model' this.scope collection='targets')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.targets.new'

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -114,7 +114,7 @@
         />
         {{#if (can 'create model' this.scope collection='users')}}
           <A.Footer as |F|>
-            <F.Link::Standalone
+            <F.LinkStandalone
               @icon='plus-circle'
               @text={{t 'titles.new'}}
               @route='scopes.scope.users.new'