Merge branch 'main' into chore-unknown-type

addons/api/addon/generated/models/host-set.js

@@ -50,4 +50,10 @@ export default class GeneratedHostSetModel extends BaseModel {
     readOnly: true,
   })
   size;
+
+  @attr({
+    description: 'Plugin information for this resource',
+    readOnly: true,
+  })
+  plugin;
 }

addons/api/addon/models/host-set.js

@@ -4,6 +4,58 @@ import { fragmentArray } from 'ember-data-model-fragments/attributes';
 export default class HostSetModel extends GeneratedHostSetModel {
   // =attributes
 
+  /**
+   * Returns if the host-set is static or not.
+   * @type {boolean}
+   */
+  get isStatic() {
+    return this.type === 'static';
+  }
+
+  /**
+   * Returns if the host-set is plugin or not.
+   * @type {boolean}
+   */
+  get isPlugin() {
+    return this.type === 'plugin';
+  }
+
+  /**
+   * Returns if a host-set plugin is AWS or not
+   * @type {boolean}
+   */
+  get isAWS() {
+    return this.compositeType === 'aws';
+  }
+
+  /**
+   * Return if a host-set plugin is Azure or not.
+   */
+  get isAzure() {
+    return this.compositeType === 'azure';
+  }
+
+  /**
+   * If a host-set is a plugin return its name,
+   * otherwise returns the host-set type
+   * @type {string}
+   */
+  get compositeType() {
+    return this.plugin ? this.plugin.name : this.type;
+  }
+
+  /**
+   * Sets type, if type is different than static, set plugin name to type
+   */
+  set compositeType(type) {
+    if (type === 'static') {
+      this.type = 'static';
+    } else {
+      this.type = 'plugin';
+      this.plugin = { name: type };
+    }
+  }
+
   /**
    * Host IDs are read-only under normal circumstances.  But these can
    * be persisted via a dedicated call to `addHosts()`.

addons/api/mirage/factories/host-set.js

@@ -12,4 +12,12 @@ export default factory.extend({
       'remove-hosts',
     ],
   id: (i) => `host-set-id-${i}`,
+  type() {
+    return this.hostCatalog?.type || factory.attrs.type;
+  },
+  plugin() {
+    if (this.type === 'plugin') {
+      return this.hostCatalog.plugin;
+    }
+  },
 });

addons/api/tests/unit/models/host-set-test.js

@@ -129,4 +129,84 @@ module('Unit | Model | host set', function (hooks) {
     const model = store.peekRecord('host-set', '123abc');
     await model.removeHost('3');
   });
+
+  test('it has isStatic and returns the expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelA = store.createRecord('host-set', { type: 'static' });
+    const modelB = store.createRecord('host-set', { type: 'plugin' });
+    assert.equal(typeof modelA.isStatic, 'boolean');
+    assert.true(modelA.isStatic);
+    assert.false(modelB.isStatic);
+  });
+
+  test('it has isPlugin and returns the expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelPlugin = store.createRecord('host-set', { type: 'plugin' });
+    const modelStatic = store.createRecord('host-set', { type: 'static' });
+    assert.equal(typeof modelPlugin.isPlugin, 'boolean');
+    assert.true(modelPlugin.isPlugin);
+    assert.false(modelStatic.isPlugin);
+  });
+
+  test('it has isAws and return the expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelAws = store.createRecord('host-set', {
+      type: 'plugin',
+      plugin: { name: 'aws' },
+    });
+    const modelRandom = store.createRecord('host-set', {
+      plugin: { name: 'random' },
+    });
+    assert.equal(typeof modelAws.isAWS, 'boolean');
+    assert.true(modelAws.isAWS);
+    assert.false(modelRandom.isAWS);
+  });
+
+  test('it has isAzure and return the expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelAzure = store.createRecord('host-set', {
+      type: 'plugin',
+      plugin: { name: 'azure' },
+    });
+    const modelRandom = store.createRecord('host-set', {
+      plugin: { name: 'random' },
+    });
+    assert.equal(typeof modelAzure.isAzure, 'boolean');
+    assert.true(modelAzure.isAzure);
+    assert.false(modelRandom.isAzure);
+  });
+
+  test('get compositeType return expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelPlugin = store.createRecord('host-set', {
+      type: 'plugin',
+      plugin: { name: 'Test name' },
+    });
+    const modelStatic = store.createRecord('host-set', {
+      type: 'static',
+    });
+    assert.equal(typeof modelPlugin.compositeType, 'string');
+    assert.equal(modelPlugin.compositeType, 'Test name');
+    assert.equal(modelStatic.compositeType, 'static');
+  });
+
+  test('set compositeType sets expected values', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    const modelPlugin = store.createRecord('host-set', {
+      compositeType: 'aws',
+    });
+    const modelStatic = store.createRecord('host-set', {
+      compositeType: 'static',
+    });
+
+    assert.equal(modelPlugin.type, 'plugin');
+    assert.equal(modelPlugin.plugin.name, 'aws');
+    assert.equal(modelStatic.type, 'static');
+  });
 });

addons/rose/addon/components/rose/form/radio/card/index.stories.mdx

@@ -21,7 +21,7 @@ Renders a form radiofield in a Wide format.
 ```
 
 <Preview>
-  <Story name="Basic Wide" height="10rem">{{
+  <Story name="Wide" height="10rem">{{
     template: hbs`
       <Rose::Form::Radio::Card
         @label={{label}}
@@ -64,7 +64,7 @@ Renders a form radiofield in a tile format.
 ```
 
 <Preview>
-  <Story name="Basic tile" height="10rem">{{
+  <Story name="Tile" height="10rem">{{
     template: hbs`
       <Rose::Form::Radio::Card
         @label={{label}}

addons/rose/addon/components/rose/form/radio/group/index.hbs

@@ -1,3 +1,4 @@
 {{yield (hash
   radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
-)}}
+  card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed layout=@layout)
+)}}

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -81,3 +81,173 @@ Renders a form radiofield group.
   }
   }}</Story>
 </Preview>
+
+```htmlbars
+<Rose::Form::Radio::Group
+  @disabled={{false}}
+  @name={{name}}
+  @selectedValue="disagree"
+  @changed={{fn}}
+  @inline={{false}}
+  as |radioGroup|
+>
+  <radioGroup.Card
+    @label="Agree"
+    @value="agree"
+    @layout='tile'
+       @helperText="dwsd"
+  />
+  <radioGroup.Card
+    @label="disagree"
+    @value="disagree"
+    @layout='tile'
+       @helperText="dwsd"
+  />
+  <radioGroup.Card
+    @label="maybe"
+    @value="maybe"
+    @layout='tile'
+    @helperText="dwsd"
+  />
+</Rose::Form::Radio::Group>
+```
+<Preview>
+  <Story name="Card:  Tile" height="10rem">{{
+  template: hbs`
+    <Rose::Form::Radio::Group
+      @disabled={{disabled}}
+      @name={{name}}
+      @selectedValue={{selectedValue}}
+      @changed={{changed}}
+      as |radioGroup|
+    >
+      <radioGroup.card
+        @label={{firstFieldLabel}}
+        @value={{firstFieldValue}}
+        @icon={{firstFieldIcon}}
+        @layout='tile'
+      />
+      <radioGroup.card
+        @label={{secondFieldLabel}}
+        @value={{secondFieldValue}}
+        @icon={{secondFieldIcon}}
+        @layout="tile"
+      />
+      <radioGroup.card
+        @label={{thirdFieldLabel}}
+        @value={{thirdFieldValue}}
+        @icon={{thirdFieldIcon}}
+        @layout="tile"
+      />
+    </Rose::Form::Radio::Group>
+  `,
+  context: {
+    name: text('name', 'mustagree'),
+    disabled: boolean('disabled', false),
+    selectedValue: text('selectedValue', 'disagree'),
+    firstFieldLabel: text('first label', 'Agree'),
+    firstFieldValue: text('first value', 'agree'),
+    firstFieldIcon: select(
+        'firstFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+         secondFieldIcon: select(
+        'secondFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+         thirdFieldIcon: select(
+        'thirdFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+    secondFieldLabel: text('second label', 'Maybe'),
+    secondFieldValue: text('second value', 'maybe'),
+    thirdFieldLabel: text('third label', 'Disagree'),
+    thirdFieldValue: text('third value', 'disagree'),
+    changed: action('changed')
+  }
+  }}</Story>
+</Preview>
+
+```htmlbars
+<Rose::Form::Radio::Group
+  @disabled={{false}}
+  @name={{name}}
+  @selectedValue="disagree"
+  @changed={{fn}}
+  @inline={{false}}
+  as |radioGroup|
+>
+  <radioGroup.Card
+    @label="Agree"
+    @value="agree"
+    @layout='wide'
+  />
+  <radioGroup.Card
+    @label="disagree"
+    @value="disagree"
+    @layout='wide'
+  />
+</Rose::Form::Radio::Group>
+```
+<Preview>
+  <Story name="Card:  Wide" height="10rem">{{
+  template: hbs`
+    <Rose::Form::Radio::Group
+      @disabled={{disabled}}
+      @name={{name}}
+      @selectedValue={{selectedValue}}
+      @changed={{changed}}
+      as |radioGroup|
+    >
+      <radioGroup.card
+        @label={{firstFieldLabel}}
+        @value={{firstFieldValue}}
+        @icon={{firstFieldIcon}}
+        @layout="wide"
+      />
+      <radioGroup.card
+        @label={{secondFieldLabel}}
+        @value={{secondFieldValue}}
+        @layout="wide"
+      />
+      <radioGroup.card
+        @label={{thirdFieldLabel}}
+        @value={{thirdFieldValue}}
+        @layout="wide"
+      />
+    </Rose::Form::Radio::Group>
+  `,
+  context: {
+    name: text('name', 'mustagree'),
+    disabled: boolean('disabled', false),
+    selectedValue: text('selectedValue', 'disagree'),
+    firstFieldLabel: text('first label', 'Agree'),
+    firstFieldValue: text('first value', 'agree'),
+    firstFieldIcon: select(
+        'firstFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+    secondFieldLabel: text('second label', 'Maybe'),
+    secondFieldValue: text('second value', 'maybe'),
+    thirdFieldLabel: text('third label', 'Disagree'),
+    thirdFieldValue: text('third value', 'disagree'),
+    changed: action('changed')
+  }
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/form/_radio-card.scss

@@ -58,9 +58,10 @@ $radio-svg: (
     }
   }
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  margin: $size-m $size-xs $size-xl 0;
 
   .radio-card-overlay {
     position: absolute;
@@ -81,8 +82,7 @@ $radio-svg: (
     display: block;
     position: relative;
     text-align: left;
-    word-break: break-all;
-    border: $size-xxxxs solid var(--ui-gray-subtler-6);
+    border: $size-xxxxs solid var(--ui-gray-subtler-2);
     box-shadow: 0 $size-xxs $size-xxs
       rgba(var(--stark-components), var(--opacity-2));
     border-radius: $size-xxs;

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

@@ -25,9 +25,21 @@
             <p>{{hostSet.description}}</p>
           </row.headerCell>
           <row.cell>
-            <Rose::Badge>
-              {{t (concat 'resources.host-set.types.' hostSet.type)}}
-            </Rose::Badge>
+            {{#if hostSet.isStatic}}
+              <Rose::Badge>
+                {{t (concat 'resources.host-set.types.' hostSet.type)}}
+              </Rose::Badge>
+            {{else}}
+              <Rose::Badge
+                @icon={{concat
+                  'flight-icons/svg/'
+                  hostSet.compositeType
+                  '-color-16'
+                }}
+              >
+                {{hostSet.compositeType}}
+              </Rose::Badge>
+            {{/if}}
           </row.cell>
           <row.cell>
             <Copyable