refactor: 💡 Migrate hostslist within host-set to Hds::Table (#2049)

* refactor: 💡 Migrate `hosts`list within host-set to `Hds::Table`

Migrate `hosts` list within host-set to `Hds::Table` from `Rose::Table`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* Update index.hbs

Not using `data-test` attribute for testing

* Update index.hbs

removed unused `data-test` selector

* refactor: 💡 quick lint error fix

Fix lint error in `hosts/index.hbs`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 refactor test to use `data-test` selector

Refactored hosts-test to use `data-test` selectors for grabbing
`Hds::Dropdown` toggle and interactive instead of long nested selector.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* Update index.hbs

spelling fix

* Update hosts-test.js

fixed spelling errors

* refactor: 💡 fix lint errors

Fix lint errors

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 Use `Hds::Code::Snippet`

Migrate from `Copyable` component to use `Hds::Code::Snippet`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 refactor incorrect use of `Hds::Code::Snippet`

Refactor the incorrect usage of `Hds::Code::Snippet`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 refactor header of `Hds::Table`

Refactor conditional header of `Hds::Table`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 Refactored conditional header translations

Refactored conditional header translations to live in controller file
for `scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 Move conditional check for header labels into `js`

Move conditional logic for checking header lables into `controller` file

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 Quick refactor for columns getter

Quick refactor to clean up getter that conditionally renders column
header label based on `isStatic` boolean

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 Refactor `host-sets/host-set/hosts` tablee

Refactor `host-sets/host-set/hosts` table to adhere more to codebase

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728

* refactor: 💡 rearrange attributes order for table

Rearrange attributes order for `Hds::Table` to keep inline with codebase
patterns.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11728
This commit is contained in:
Devon Anderson authored and GitHub committed 2024-01-11 16:49:47 -05:00
1 parent 0beec7b8fe
commit 9241b7dd0e
2 files changed
+98 -75

No files matched your search

@@ -28,82 +28,101 @@
<page.body>
{{#if @model.hosts}}
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
{{#if @model.hostSet.isStatic}}
<row.headerCell>{{t 'form.name.label'}}</row.headerCell>
{{else}}
<row.headerCell>{{t 'form.external_name.label'}}</row.headerCell>
{{/if}}
<row.headerCell>{{t 'form.type.label'}}</row.headerCell>
<row.headerCell>{{t 'form.id.label'}}</row.headerCell>
{{#if @model.hostSet.isStatic}}
<row.headerCell>{{t 'titles.actions'}}</row.headerCell>
{{/if}}
</header.row>
</table.header>
<table.body as |body|>
{{#each @model.hosts as |host|}}
<body.row as |row|>
<row.headerCell>
{{#if host.isStatic}}
<LinkTo
@route='scopes.scope.host-catalogs.host-catalog.hosts.host'
@model={{host.id}}
>
{{host.displayName}}
</LinkTo>
{{else}}
{{! Link to a different subroute for dynamic/plugin hosts }}
<LinkTo
@route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts.host'
@model={{host.id}}
>
{{host.displayName}}
</LinkTo>
{{/if}}
<p>{{host.description}}</p>
</row.headerCell>
<row.cell>
<HostCatalogTypeBadge @model={{host}} />
</row.cell>
<row.cell>
<Copyable
@text={{host.id}}
@buttonText={{t 'actions.copy-to-clipboard'}}
@acknowledgeText={{t 'states.copied'}}
{{#if (get @model.hostSet 'isStatic')}}
<Hds::Table
@model={{@model.hosts}}
@columns={{array
(hash label=(t 'form.name.label'))
(hash label=(t 'form.type.label'))
(hash label=(t 'form.id.label'))
(hash label=(t 'titles.actions'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<LinkTo
@route='scopes.scope.host-catalogs.host-catalog.hosts.host'
@model={{B.data.id}}
>
<code>{{host.id}}</code>
</Copyable>
</row.cell>
<row.cell>
{{B.data.displayName}}
</LinkTo>
<Hds::Text::Body @tag='p'>
{{B.data.description}}
</Hds::Text::Body>
</B.Td>
<B.Td>
<HostCatalogTypeBadge @model={{B.data}} />
</B.Td>
<B.Td>
<Hds::Copy::Snippet
@textToCopy={{B.data.id}}
@color='secondary'
/>
</B.Td>
<B.Td>
{{#if (can 'removeHosts hostSet' @model.hostSet)}}
<Rose::Dropdown
@icon='flight-icons/svg/more-horizontal-16'
@iconOnly={{true}}
@showCaret={{false}}
@dropdownRight={{true}}
@text={{t 'actions.manage'}}
as |dropdown|
>
<dropdown.button
@style='danger'
<Hds::Dropdown as |dd|>
<dd.ToggleIcon
data-test-host-set-hosts-dropdown-toggle
@text={{t 'actions.manage'}}
@icon='more-horizontal'
@hasChevron={{false}}
/>
<dd.Interactive
data-test-host-set-hosts-dropdown-remove-host
@text={{t 'actions.remove'}}
@color='critical'
{{on
'click'
(route-action 'removeHost' @model.hostSet host)
(route-action 'removeHost' @model.hostSet B.data)
}}
>
{{t 'actions.remove'}}
</dropdown.button>
</Rose::Dropdown>
/>
</Hds::Dropdown>
{{/if}}
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
</B.Td>
</B.Tr>
</:body>
</Hds::Table>
{{else}}
<Hds::Table
@model={{@model.hosts}}
@columns={{array
(hash label=(t 'form.external_name.label'))
(hash label=(t 'form.type.label'))
(hash label=(t 'form.id.label'))
}}
@valign='middle'
>
<:body as |B|>
<B.Tr>
<B.Td>
<LinkTo
@route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts.host'
@model={{B.data.id}}
>
{{B.data.displayName}}
</LinkTo>
<Hds::Text::Body @tag='p'>
{{B.data.description}}
</Hds::Text::Body>
</B.Td>
<B.Td>
<HostCatalogTypeBadge @model={{B.data}} />
</B.Td>
<B.Td>
<Hds::Copy::Snippet
@textToCopy={{B.data.id}}
@color='secondary'
/>
</B.Td>
</B.Tr>
</:body>
</Hds::Table>
{{/if}}
{{/if}}
{{#unless @model.hosts}}
@@ -98,7 +98,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
const count = getHostSetHostCount();
await visit(urls.hostSetHosts);
assert.strictEqual(findAll('tbody tr').length, count);
await click('tbody tr .rose-dropdown-button-danger');
await click('[data-test-host-set-hosts-dropdown-toggle]');
await click('[data-test-host-set-hosts-dropdown-remove-host]');
assert.strictEqual(findAll('tbody tr').length, count - 1);
});
@@ -126,7 +128,8 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
});
await visit(urls.hostSetHosts);
assert.strictEqual(findAll('tbody tr').length, getHostSetHostCount());
await click('tbody tr .rose-dropdown-button-danger');
await click('[data-test-host-set-hosts-dropdown-toggle]');
await click('[data-test-host-set-hosts-dropdown-remove-host]');
assert.ok(find('[role="alert"]'));
});
@@ -169,11 +172,12 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
const count = getHostSetHostCount();
await visit(urls.hostSetHosts);
assert.strictEqual(findAll('tbody tr').length, count);
await click('tbody tr .rose-dropdown-button-danger');
await click('[data-test-host-set-hosts-dropdown-toggle]');
await click('[data-test-host-set-hosts-dropdown-remove-host]');
assert.strictEqual(findAll('tbody tr').length, count - 1);
await click('.rose-layout-page-actions a:nth-child(2)');
assert.strictEqual(currentURL(), urls.addHosts);
await click('tbody label');
await click('tbody .hds-table__tr .hds-form-label');
await click('form [type="button"]');
await visit(urls.hostSetHosts);
assert.strictEqual(findAll('tbody tr').length, count - 1);
@@ -194,7 +198,7 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) {
});
instances.hostSet.update({ hostIds: [] });
await visit(urls.addHosts);
await click('tbody label');
await click('tbody .hds-table__tr .hds-form-label');
await click('form [type="submit"]');
assert.ok(find('[role="alert"]'));
});