refactor: 💡 remove rose table references (#2589)

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

addons/rose/.template-lintrc.js

@@ -10,11 +10,7 @@ module.exports = {
   extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
   overrides: [
     {
-      files: [
-        'addon/components/rose/anonymous/index.hbs',
-        'addon/components/rose/table/row/cell/index.hbs',
-        'addon/components/rose/anonymous/index.hbs',
-      ],
+      files: ['addon/components/rose/anonymous/index.hbs'],
       rules: {
         'no-yield-only': false,
       },

addons/rose/addon/components/rose/table/index.hbs

@@ -1,27 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<table
-  ...attributes
-  class='rose-table {{if @style (concat "rose-table-" @style)}}'
->
-  {{#if @caption}}
-    <caption>{{@caption}}</caption>
-  {{/if}}
-
-  {{yield
-    (hash
-      header=(component
-        'rose/table/section' tagName='thead' classNames='rose-table-header'
-      )
-      body=(component
-        'rose/table/section' tagName='tbody' classNames='rose-table-body'
-      )
-      footer=(component
-        'rose/table/section' tagName='tfoot' classNames='rose-table-footer'
-      )
-    )
-  }}
-</table>

addons/rose/addon/components/rose/table/row/cell/index.hbs

@@ -1,6 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-{{yield}}

addons/rose/addon/components/rose/table/row/cell/index.js

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import layout from './index';
-import { computed } from '@ember/object';
-
-export default Component.extend({
-  layout,
-  tagName: 'td',
-  classNameBindings: ['cellTypeStyle', 'cellShrink', 'cellAlignmentStyle'],
-  cellTypeStyle: computed(function () {
-    return this.tagName.match('th')
-      ? `rose-table-header-cell`
-      : 'rose-table-cell';
-  }),
-  cellShrink: computed(function () {
-    if (this.shrink) {
-      return 'rose-table-cell-shrink';
-    }
-  }),
-  cellAlignmentStyle: computed(function () {
-    if (this.alignRight) {
-      return 'align-right';
-    }
-
-    if (this.alignCenter) {
-      return 'align-center';
-    }
-  }),
-});

addons/rose/addon/components/rose/table/row/index.hbs

@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<tr
-  ...attributes
-  class='rose-table-row
-    {{if @hidden (concat "rose-table-row-visually-hidden")}}
-    {{if @style (concat "rose-table-row-" @style)}}'
->
-  {{yield
-    (hash
-      cell=(component 'rose/table/row/cell')
-      headerCell=(component 'rose/table/row/cell' tagName='th')
-    )
-  }}
-</tr>

addons/rose/addon/components/rose/table/row/index.js

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import layout from './index';
-
-/**
- * A table row component that uses tr table element and
- * configures a table cell element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});

addons/rose/addon/components/rose/table/section/index.hbs

@@ -1,6 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-{{yield (hash row=(component 'rose/table/row'))}}

addons/rose/addon/components/rose/table/section/index.js

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import layout from './index';
-
-/**
- * A table section component that configures a row component.
- * Section can be: thead, tbody, or tfoot table elements.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});

addons/rose/app/components/rose/notification.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/notification';

addons/rose/app/components/rose/table.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/table';

addons/rose/app/components/rose/table/row.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/table/row';

addons/rose/app/components/rose/table/row/cell.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/table/row/cell';

addons/rose/app/components/rose/table/section.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/table/section';

addons/rose/app/styles/rose/components/_index.scss

@@ -17,7 +17,6 @@
 @import 'page-header';
 @import 'separator';
 @import 'nav';
-@import 'table';
 @import 'message';
 @import 'toolbar';
 @import 'code-editor';

addons/rose/app/styles/rose/components/table/_index.scss

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import 'table';

addons/rose/app/styles/rose/components/table/_table.scss

@@ -1,120 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@use '../../variables/sizing';
-@use '../../utilities/type';
-@use 'sass:math';
-
-.rose-table {
-  @include type.type(s, normal);
-
-  width: 100%;
-
-  .rose-table-row {
-    border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-    text-align: left;
-
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-
-  // This styles are add to stop the input to apply extra margin (default on forms)
-  .rose-form-input,
-  .rose-form-input-field,
-  .hds-form-select,
-  [class^='hds-form-field'],
-  [class^='hds-form-field']:not(:first-child) {
-    margin: 0;
-    width: 100%;
-  }
-
-  // Fix margin issue with textarea elements inside tables
-  textarea {
-    display: block;
-  }
-
-  .rose-table-cell,
-  .rose-table-header-cell {
-    vertical-align: text-top;
-
-    &.align-right {
-      text-align: right;
-    }
-
-    &.align-center {
-      text-align: center;
-    }
-  }
-
-  .rose-table-header-cell {
-    @include type.type(s, semibold);
-  }
-
-  .rose-table-header .rose-table-header-cell {
-    color: var(--ui-gray);
-  }
-
-  .rose-table-header,
-  .rose-table-footer {
-    .rose-table-cell,
-    .rose-table-header-cell {
-      padding: sizing.rems(s);
-    }
-  }
-
-  .rose-table-body {
-    .rose-table-cell,
-    .rose-table-header-cell {
-      padding: sizing.rems(m) sizing.rems(s);
-    }
-  }
-
-  .rose-table-cell-shrink {
-    width: 1%;
-    white-space: nowrap;
-  }
-
-  [class*='rose-button'] {
-    margin-bottom: 0;
-  }
-
-  &.rose-table-condensed {
-    .rose-table-cell,
-    .rose-table-header-cell {
-      @include type.type(s);
-
-      $line-height: math.div(36, 14);
-
-      line-height: $line-height;
-      padding: sizing.rems(xxs) + sizing.rems(xxxxs) sizing.rems(s);
-
-      &:first-child {
-        padding-left: 0;
-      }
-    }
-
-    .rose-table-header {
-      border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-
-      .rose-table-header-cell {
-        $line-height: math.div(16, 14);
-
-        line-height: $line-height;
-        padding: sizing.rems(xs) sizing.rems(s);
-
-        &:first-child {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-
-  .rose-table-row-visually-hidden {
-    position: absolute;
-    top: -9999rem;
-    left: -9999rem;
-  }
-}

addons/rose/tests/integration/components/rose/table-test.js

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/table', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table />`);
-    assert.ok(find('table'));
-    assert.ok(find('.rose-table'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table id="table"/>`);
-    assert.ok(find('#table'));
-  });
-
-  test('it renders with caption', async function (assert) {
-    await render(hbs`<Rose::Table @caption="table caption"/>`);
-    assert.ok(find('caption'));
-    assert.strictEqual(find('caption').textContent.trim(), 'table caption');
-  });
-
-  test('it renders with header', async function (assert) {
-    await render(hbs`<Rose::Table as |table|>
-      <table.header />
-    </Rose::Table>`);
-    assert.ok(find('thead'));
-  });
-
-  test('it renders with body', async function (assert) {
-    await render(hbs`<Rose::Table as |table|>
-      <table.body />
-    </Rose::Table>`);
-    assert.ok(find('tbody'));
-  });
-
-  test('it renders with footer', async function (assert) {
-    await render(hbs`<Rose::Table as |table|>
-      <table.footer />
-    </Rose::Table>`);
-    assert.ok(find('tfoot'));
-  });
-
-  test('it supports a style class', async function (assert) {
-    await render(hbs`<Rose::Table @style="condensed" />`);
-    assert.ok(find('.rose-table-condensed'));
-  });
-});

addons/rose/tests/integration/components/rose/table/row-test.js

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/table/row', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row />`);
-    assert.ok(find('tr'));
-    assert.ok(find('.rose-table-row'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Table::Row id="row"/>`);
-    assert.ok(find('#row'));
-  });
-
-  test('it renders a cell', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row as |row|>
-      <row.cell />
-    </Rose::Table::Row>`);
-    assert.ok(find('td'));
-    assert.ok(find('.rose-table-cell'));
-  });
-
-  test('it renders a header cell', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row as |row|>
-      <row.headerCell />
-    </Rose::Table::Row>`);
-    assert.ok(find('th'));
-    assert.ok(find('.rose-table-header-cell'));
-  });
-
-  test('it can be hidden', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Table::Row @hidden={{true}} />`);
-    assert.ok(find('.rose-table-row-visually-hidden'));
-  });
-});

addons/rose/tests/integration/components/rose/table/row/cell-test.js

@@ -1,81 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/table/row/cell', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row::Cell>
-      content
-    </Rose::Table::Row::Cell>`);
-    assert.ok(find('td'));
-    assert.strictEqual(find('.rose-table-cell').textContent.trim(), 'content');
-  });
-
-  test('it renders with attributes', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Table::Row::Cell id="cell"/>`);
-    assert.ok(find('#cell'));
-  });
-
-  test('it renders as header cell', async function (assert) {
-    assert.expect(4);
-    await render(hbs`<Rose::Table::Row::Cell @tagName='th'/>`);
-    assert.ok(find('th'));
-    assert.ok(find('.rose-table-header-cell'));
-    assert.notOk(find('td'));
-    assert.notOk(find('.rose-table-cell'));
-  });
-
-  test('it adds shrink style class', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Table::Row::Cell @shrink={{true}} />`);
-    assert.ok(find('.rose-table-cell-shrink'));
-  });
-
-  test('it does not add expand style class in default cells', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Table::Row::Cell />`);
-    assert.notOk(find('.rose-table-cell-shrink'));
-  });
-
-  test('it renders with align center in a header cell', async function (assert) {
-    assert.expect(2);
-    await render(
-      hbs`<Rose::Table::Row::Cell @tagName='th' @alignCenter={{true}} />`,
-    );
-    assert.ok(find('.rose-table-header-cell'));
-    assert.ok(find('.align-center'));
-  });
-
-  test('it renders with align center in a body', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row::Cell @alignCenter={{true}} />`);
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.align-center'));
-  });
-
-  test('it renders with align right in a header cell', async function (assert) {
-    assert.expect(2);
-    await render(
-      hbs`<Rose::Table::Row::Cell @tagName='th' @alignRight={{true}} />`,
-    );
-    assert.ok(find('.rose-table-header-cell'));
-    assert.ok(find('.align-right'));
-  });
-
-  test('it renders with align right', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Table::Row::Cell @alignRight={{true}} />`);
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.align-right'));
-  });
-});

addons/rose/tests/integration/components/rose/table/section-test.js

@@ -1,32 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/table/section', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Section @tagName='tag' class='tag-class'/>`);
-    assert.ok(find('tag'));
-    assert.ok(find('.tag-class'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::section @tagName='tag' id="section"/>`);
-    assert.ok(find('#section'));
-  });
-
-  test('it renders a row', async function (assert) {
-    await render(hbs`<Rose::Table::Section @tagName='tag' as |section|>
-      <section.row />
-    </Rose::Table::Section>`);
-    assert.ok(find('tr'));
-    assert.ok(find('.rose-table-row'));
-  });
-});

ui/admin/app/styles/app.scss

@@ -88,38 +88,6 @@
       }
     }
   }
-
-  .rose-form-fieldset {
-    .rose-table {
-      .rose-form-label {
-        left: -9999px;
-        position: absolute;
-        top: -9999px;
-      }
-    }
-  }
-}
-
-.rose-table {
-  p {
-    margin-bottom: 0;
-  }
-
-  .rose-table-header-cell {
-    p {
-      color: var(--ui-gray-subtler-1);
-      font-weight: normal;
-    }
-  }
-
-  .rose-form-checkbox {
-    margin-bottom: 0;
-
-    .rose-form-checkbox-label-text {
-      color: var(--stark);
-      text-decoration: underline;
-    }
-  }
 }
 
 .rose-header {

ui/admin/tests/acceptance/accounts/read-test.js

@@ -53,7 +53,7 @@ module('Acceptance | accounts | read', function (hooks) {
 
   test('can navigate to an account form', async function (assert) {
     await visit(urls.accounts);
-    await click(commonSelectors.TABLE_FIRST_ROW_RESOURCE_LINK);
+    await click(commonSelectors.TABLE_RESOURCE_LINK(urls.account));
 
     await a11yAudit();
     assert.strictEqual(currentURL(), urls.account);
@@ -64,10 +64,12 @@ module('Acceptance | accounts | read', function (hooks) {
       instances.account.authorized_actions.filter((item) => item !== 'read');
     await visit(urls.accounts);
 
-    assert.dom(commonSelectors.TABLE_FIRST_ROW_RESOURCE_LINK).doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.account))
+      .doesNotExist();
   });
 
-  test('user can navigate to account and incorrect url autocorrects', async function (assert) {
+  test('user can navigate to account and incorrect url auto-corrects', async function (assert) {
     const authMethod = this.server.create('auth-method', {
       scope: instances.scopes.org,
     });

ui/admin/tests/acceptance/credential-library/read-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { TYPE_CREDENTIAL_LIBRARY_VAULT_SSH_CERTIFICATE } from 'api/models/credential-library';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | credential-libraries | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -33,6 +34,7 @@ module('Acceptance | credential-libraries | read', function (hooks) {
     credentialLibraries: null,
     newCredentialLibrary: null,
     unknownCredentialLibrary: null,
+    vaultSshCredentialLibrary: null,
   };
 
   hooks.beforeEach(function () {
@@ -68,8 +70,10 @@ module('Acceptance | credential-libraries | read', function (hooks) {
 
   test('can navigate to resource', async function (assert) {
     await visit(urls.credentialLibraries);
-    await click('.hds-table .hds-table__tbody .hds-table__tr a');
+
+    await click(commonSelectors.TABLE_RESOURCE_LINK(urls.credentialLibrary));
     await a11yAudit();
+
     assert.strictEqual(currentURL(), urls.credentialLibrary);
   });
 
@@ -79,7 +83,10 @@ module('Acceptance | credential-libraries | read', function (hooks) {
         (item) => item !== 'read',
       );
     await visit(urls.credentialLibraries);
-    assert.notOk(find('main tbody .rose-table-header-cell a'));
+
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.credentialLibrary))
+      .doesNotExist();
   });
 
   test('cannot navigate to vault ssh cert form when feature is not enabled', async function (assert) {
@@ -88,13 +95,17 @@ module('Acceptance | credential-libraries | read', function (hooks) {
       credentialStore: instances.credentialStore,
       type: TYPE_CREDENTIAL_LIBRARY_VAULT_SSH_CERTIFICATE,
     });
-    await visit(
-      `${urls.credentialLibraries}/${instances.credentialLibrary.id}`,
-    );
+    urls.vaultSshCredentialLibrary = `${urls.credentialLibraries}/${instances.credentialLibrary.id}`;
     await visit(urls.credentialLibraries);
     const featuresService = this.owner.lookup('service:features');
+
     assert.false(featuresService.isEnabled('ssh-target'));
-    assert.dom('.rose-table-body tr:nth-of-type(2) a').doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.credentialLibrary))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.vaultSshCredentialLibrary))
+      .doesNotExist();
   });
 
   test('visiting an unknown credential library displays 404 message', async function (assert) {
@@ -103,7 +114,7 @@ module('Acceptance | credential-libraries | read', function (hooks) {
     assert.ok(find('.rose-message-subtitle').textContent.trim(), 'Error 404');
   });
 
-  test('users can navigate to credential library and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to credential library and incorrect url auto-corrects', async function (assert) {
     const credentialStore = this.server.create('credential-store', {
       scope: instances.scopes.project,
     });

ui/admin/tests/acceptance/credential-store/credentials/read-test.js

@@ -9,6 +9,7 @@ import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | credential-stores | credentials | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -117,7 +118,13 @@ module('Acceptance | credential-stores | credentials | read', function (hooks) {
         (item) => item != 'read',
       );
     await visit(urls.credentials);
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
+
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernameKeyPairCredential))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernamePasswordCredential))
+      .doesNotExist();
   });
 
   test('cannot navigate to a username & key pair credential form without proper authorization', async function (assert) {
@@ -126,7 +133,13 @@ module('Acceptance | credential-stores | credentials | read', function (hooks) {
         (item) => item != 'read',
       );
     await visit(urls.credentials);
-    assert.dom('.rose-table-body  tr:nth-child(2) a').doesNotExist();
+
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernamePasswordCredential))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernameKeyPairCredential))
+      .doesNotExist();
   });
 
   test('cannot navigate to a JSON credential form without proper authorization', async function (assert) {
@@ -135,13 +148,25 @@ module('Acceptance | credential-stores | credentials | read', function (hooks) {
         (item) => item != 'read',
       );
     await visit(urls.credentials);
-    assert.dom('.rose-table-body  tr:nth-child(3) a').doesNotExist();
+
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernamePasswordCredential))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.jsonCredential))
+      .doesNotExist();
   });
 
   test('cannot navigate to a JSON credential form when feature not enabled', async function (assert) {
     await visit(urls.credentials);
+
     assert.false(featuresService.isEnabled('json-credentials'));
-    assert.dom('.rose-table-body  tr:nth-child(3) a').doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.usernamePasswordCredential))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.jsonCredential))
+      .doesNotExist();
   });
 
   test('visiting an unknown credential displays 404 message', async function (assert) {
@@ -159,7 +184,7 @@ module('Acceptance | credential-stores | credentials | read', function (hooks) {
     );
   });
 
-  test('users can navigate to credential and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to credential and incorrect url auto-corrects', async function (assert) {
     const credentialStore = this.server.create('credential-store', {
       scope: instances.scopes.project,
     });

ui/admin/tests/acceptance/credential-store/read-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | credential-stores | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -101,8 +102,12 @@ module('Acceptance | credential-stores | read', function (hooks) {
 
     await click(`[href="${urls.credentialStores}"]`);
 
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
-    assert.dom(`[href="${urls.vaultCredentialStore}"]`).exists();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.vaultCredentialStore))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.staticCredentialStore))
+      .doesNotExist();
   });
 
   test('cannot navigate to a vault credential store form without proper authorization', async function (assert) {
@@ -115,8 +120,12 @@ module('Acceptance | credential-stores | read', function (hooks) {
 
     await click(`[href="${urls.credentialStores}"]`);
 
-    assert.dom('.rose-table-body  tr:nth-child(2) a').doesNotExist();
-    assert.dom(`[href="${urls.staticCredentialStore}"]`).exists();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.staticCredentialStore))
+      .isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.vaultCredentialStore))
+      .doesNotExist();
   });
 
   test('visiting an unknown credential store displays 404 message', async function (assert) {
@@ -138,7 +147,7 @@ module('Acceptance | credential-stores | read', function (hooks) {
       .exists();
   });
 
-  test('users can navigate to credential store and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to credential store and incorrect url auto-corrects', async function (assert) {
     const projectScope = this.server.create('scope', {
       type: 'project',
       scope: { id: instances.scopes.org.id, type: 'org' },

ui/admin/tests/acceptance/groups/read-test.js

@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import * as commonSelectors from 'admin/tests/helpers/selectors';
@@ -14,6 +15,7 @@ import * as commonSelectors from 'admin/tests/helpers/selectors';
 module('Acceptance | groups | read', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIndexedDb(hooks);
 
   const instances = {
     scopes: {
@@ -54,12 +56,12 @@ module('Acceptance | groups | read', function (hooks) {
   test('cannot navigate to a group form without proper authorization', async function (assert) {
     instances.group.authorized_actions =
       instances.group.authorized_actions.filter((item) => item !== 'read');
-    await visit(urls.group);
+    await visit(urls.groups);
 
-    assert.dom(commonSelectors.TABLE_FIRST_ROW_RESOURCE_LINK).doesNotExist();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.group)).doesNotExist();
   });
 
-  test('users can navigate to group and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to group and incorrect url auto-corrects', async function (assert) {
     const orgScope = this.server.create('scope', {
       type: 'org',
       scope: { id: 'global', type: 'global' },

ui/admin/tests/acceptance/host-catalogs/host-sets/read-test.js

@@ -9,6 +9,7 @@ import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | host-catalogs | host-sets | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -84,7 +85,9 @@ module('Acceptance | host-catalogs | host-sets | read', function (hooks) {
 
     await click(`[href="${urls.hostSets}"]`);
 
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.hostSet))
+      .doesNotExist();
   });
 
   test('visiting an unknown host set displays 404 message', async function (assert) {
@@ -106,7 +109,7 @@ module('Acceptance | host-catalogs | host-sets | read', function (hooks) {
       .exists();
   });
 
-  test('users can navigate to host set and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to host set and incorrect url auto-corrects', async function (assert) {
     const hostCatalog = this.server.create('host-catalog', {
       scope: instances.scopes.project,
       type: 'static',

ui/admin/tests/acceptance/host-catalogs/hosts/read-test.js

@@ -85,7 +85,7 @@ module('Acceptance | host-catalogs | hosts | read', function (hooks) {
 
     await click(commonSelectors.HREF(urls.hosts));
 
-    assert.dom(commonSelectors.TABLE_FIRST_ROW_RESOURCE_LINK).doesNotExist();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.host)).doesNotExist();
   });
 
   test('visiting an unknown host displays 404 message', async function (assert) {

ui/admin/tests/acceptance/host-catalogs/list-test.js

@@ -15,6 +15,7 @@ import {
   TYPE_HOST_CATALOG_PLUGIN_AWS,
   TYPE_HOST_CATALOG_PLUGIN_AZURE,
 } from 'api/models/host-catalog';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | host-catalogs | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -35,6 +36,8 @@ module('Acceptance | host-catalogs | list', function (hooks) {
     orgScope: null,
     projectScope: null,
     hostCatalogs: null,
+    awsHostCatalog: null,
+    azureHostCatalog: null,
     staticHostCatalog: null,
   };
 
@@ -138,7 +141,10 @@ module('Acceptance | host-catalogs | list', function (hooks) {
 
     await click(`[href="${urls.hostCatalogs}"]`);
 
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
+    assert.dom('.hds-application-state__body-text').isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.staticHostCatalog))
+      .doesNotExist();
   });
 
   test('user can navigate to index with only list action', async function (assert) {

ui/admin/tests/acceptance/host-catalogs/read-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | host-catalogs | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -78,7 +79,9 @@ module('Acceptance | host-catalogs | read', function (hooks) {
 
     await click(`[href="${urls.hostCatalogs}"]`);
 
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.hostCatalog))
+      .doesNotExist();
   });
 
   test('visiting an unknown host catalog displays 404 message', async function (assert) {

ui/admin/tests/acceptance/storage-buckets/read-test.js

@@ -71,7 +71,9 @@ module('Acceptance | storage-buckets | read', function (hooks) {
 
     await click(commonSelectors.HREF(urls.storageBuckets));
 
-    assert.dom(commonSelectors.TABLE_FIRST_ROW_RESOURCE_LINK).doesNotExist();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.storageBucket))
+      .doesNotExist();
   });
 
   test('visiting an unknown storage bucket displays 404 message', async function (assert) {
@@ -83,7 +85,7 @@ module('Acceptance | storage-buckets | read', function (hooks) {
       .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
-  test('users can navigate to storage bucket and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to storage bucket and incorrect url auto-corrects', async function (assert) {
     const incorrectUrl = `/scopes/${instances.scopes.org.id}/storage-buckets/${instances.storageBucket.id}`;
 
     await visit(incorrectUrl);

ui/admin/tests/acceptance/targets/host-sources-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { Response } from 'miragejs';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | targets | host-sources', function (hooks) {
   setupApplicationTest(hooks);
@@ -80,9 +81,10 @@ module('Acceptance | targets | host-sources', function (hooks) {
     urls.targetHostSources = `${urls.target}/host-sources`;
     urls.targetAddHostSources = `${urls.target}/add-host-sources`;
     urls.hostSet = `${urls.projectScope}/host-catalogs/${instances.hostCatalog.id}/host-sets/${instances.hostCatalog.hostSetIds[0]}`;
-    // Generate resource counter
-    getTargetHostSetCount = () =>
-      this.server.schema.targets.first().hostSets.models.length;
+    urls.unknownHostSet =
+      // Generate resource counter
+      getTargetHostSetCount = () =>
+        this.server.schema.targets.first().hostSets.models.length;
     authenticateSession({ username: 'admin' });
   });
 
@@ -114,7 +116,13 @@ module('Acceptance | targets | host-sources', function (hooks) {
 
     await click(`[href="${urls.targetHostSources}"]`);
 
-    assert.dom('.rose-table-body tr:first-child a').doesNotExist();
+    assert
+      .dom(
+        commonSelectors.TABLE_RESOURCE_LINK(
+          instances.hostCatalogPlugin.hostSets[0],
+        ),
+      )
+      .doesNotExist();
   });
 
   test('can remove a host set', async function (assert) {

ui/admin/tests/acceptance/targets/read-test.js

@@ -11,6 +11,7 @@ import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { TYPE_TARGET_TCP, TYPE_TARGET_SSH } from 'api/models/target';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | targets | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -120,8 +121,10 @@ module('Acceptance | targets | read', function (hooks) {
 
     await click(`[href="${urls.targets}"]`);
 
-    assert.dom('.rose-table-body  tr:first-child a').doesNotExist();
-    assert.dom(`[href="${urls.tcpTarget}"]`).exists();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.tcpTarget)).isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.sshTarget))
+      .doesNotExist();
   });
 
   test('cannot navigate to a tcp target form without proper authorization', async function (assert) {
@@ -132,8 +135,10 @@ module('Acceptance | targets | read', function (hooks) {
 
     await click(`[href="${urls.targets}"]`);
 
-    assert.dom('.rose-table-body  tr:nth-child(2) a').doesNotExist();
-    assert.dom(`[href="${urls.sshTarget}"]`).exists();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.sshTarget)).isVisible();
+    assert
+      .dom(commonSelectors.TABLE_RESOURCE_LINK(urls.tcpTarget))
+      .doesNotExist();
   });
 
   test('visiting an unknown target displays 404 message', async function (assert) {
@@ -155,7 +160,7 @@ module('Acceptance | targets | read', function (hooks) {
       .exists();
   });
 
-  test('users can navigate to target and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to target and incorrect url auto-corrects', async function (assert) {
     const incorrectUrl = `/scopes/${instances.scopes.org.id}/targets/${instances.sshTarget.id}`;
 
     await visit(incorrectUrl);

ui/admin/tests/acceptance/targets/workers-test.js

@@ -218,7 +218,10 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(CANCEL_BUTTON_SELECTOR);
 
     assert.strictEqual(currentURL(), urls.targetWorkers);
-    assert.notEqual(instances.target.inress_worker_filter, ingressWorkerFilter);
+    assert.notEqual(
+      instances.target.ingress_worker_filter,
+      ingressWorkerFilter,
+    );
     assert
       .dom(CODE_BLOCK_SELECTOR('ingress'))
       .hasText(instances.target.ingress_worker_filter);

ui/admin/tests/acceptance/users/list-test.js

@@ -9,6 +9,7 @@ import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | users | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -110,7 +111,8 @@ module('Acceptance | users | list', function (hooks) {
 
     await click(`[href="${urls.users}"]`);
 
-    assert.dom(`.rose-table [href="${urls.user1}"]`).doesNotExist();
+    assert.dom('.hds-application-state__body-text').isVisible();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.user1)).doesNotExist();
   });
 
   test('user can navigate to users tab with only list action', async function (assert) {

ui/admin/tests/acceptance/users/read-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | users | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -71,7 +72,7 @@ module('Acceptance | users | read', function (hooks) {
 
     await click(`[href="${urls.users}"]`);
 
-    assert.dom(`.rose-table [href="${urls.user}"]`).doesNotExist();
+    assert.dom(commonSelectors.TABLE_RESOURCE_LINK(urls.user)).doesNotExist();
   });
 
   test('users can link to docs page for users', async function (assert) {
@@ -86,7 +87,7 @@ module('Acceptance | users | read', function (hooks) {
       .exists();
   });
 
-  test('users can navigate to user and incorrect url autocorrects', async function (assert) {
+  test('users can navigate to user and incorrect url auto-corrects', async function (assert) {
     const incorrectUrl = `/scopes/global/users/${instances.user.id}`;
 
     await visit(incorrectUrl);

ui/admin/tests/helpers/selectors.js

@@ -14,7 +14,7 @@ export const FIELD_NAME_ERROR = '[data-test-error-message-name]';
 export const FIELD_DESCRIPTION = '[name=description]';
 export const FIELD_DESCRIPTION_VALUE = 'description';
 
-export const TABLE_FIRST_ROW_RESOURCE_LINK = 'tbody tr:first-child a';
+export const TABLE_RESOURCE_LINK = (url) => `tbody [href="${url}"]`;
 
 export const RESOURCE_NOT_FOUND_SUBTITLE = '.rose-message-subtitle';
 export const RESOURCE_NOT_FOUND_VALUE = 'Error 404';

ui/desktop/app/styles/app.scss

@@ -124,21 +124,6 @@
   }
 }
 
-.rose-table {
-  p {
-    margin-bottom: 0;
-  }
-
-  .rose-form-checkbox {
-    margin-bottom: 0;
-
-    .rose-form-checkbox-label-text {
-      color: var(--stark);
-      text-decoration: underline;
-    }
-  }
-}
-
 .rose-header {
   -webkit-app-region: drag;
   min-height: sizing.rems(l) * 2;