Icu 8801 update settings icon to link in target edit screen (#188)

* refactor: 💡 update settings icon to link in target edit screen

* style: 💄 whitespace

✅ Closes: ICU-8801

* test: 💍 remove unnecessary a11yAudit() check

* test: 💍 fix test

* refactor: 💡 fix translation

* refactor: 💡 settings link shouldn't be visible under button

addons/core/translations/resources/en-us.yaml

@@ -408,6 +408,7 @@ target:
     sidebar:
       label: Session Recording
       help: Record SSH sessions on this target and save them to an Amazon S3 bucket.
+      link: Session Recording settings
   questions:
     delete-host-sources:
       title: Remove associated host sources?

ui/admin/app/components/link-list-panel/item/index.hbs

@@ -10,7 +10,7 @@
       </div>
     </div>
     {{#if @route}}
-      <FlightIcon @name='chevron-right' />
+      <FlightIcon @name='arrow-right' />
     {{/if}}
   </LinkTo>
 </li>

ui/admin/app/routes/scopes/scope/storage-buckets/new.js

@@ -22,7 +22,7 @@ export default class ScopesScopeStorageBucketsNewRoute extends Route {
    * @return {StorageBucket}
    */
   model() {
-    const scopeModel = this.modelFor('scopes.scope');
+    const scopeModel = this.store.peekRecord('scope', 'global');
     const record = this.store.createRecord('storage-bucket', {
       type: TYPE_STORAGE_BUCKET_PLUGIN,
       compositeType: TYPE_STORAGE_BUCKET_PLUGIN_AWS_S3,

ui/admin/app/styles/app.scss

@@ -660,23 +660,15 @@
 
 // target sidebar
 .target-sidebar {
-  .title-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-
-    .hds-button {
-      box-shadow: none;
-      border: none;
-      background-color: transparent;
-    }
-  }
-
   .description {
     color: var(--token-form-helper-text-color);
     font-weight: var(--token-typography-font-weight-normal);
     font-size: var(--token-typography-body-200-font-size);
   }
+
+  .hds-link-standalone {
+    margin-top: 1rem;
+  }
 }
 
 .link-list-item {
@@ -698,15 +690,9 @@
     margin-bottom: 0.25rem;
   }
 
-  .flight-icon-chevron-right {
+  .flight-icon-arrow-right {
     color: var(--token-color-foreground-faint);
   }
-
-  .hds-button {
-    box-shadow: none;
-    border: none;
-    background-color: transparent;
-  }
 }
 
 .key-value-list {

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

@@ -38,16 +38,7 @@
       }}
         <sb.Sidebar>
           <div class='target-sidebar'>
-            <div class='title-wrapper'>
-              <h3>{{t 'resources.target.form.sidebar.label'}}</h3>
-              <Hds::Button
-                @color='secondary'
-                @text='settings'
-                @isIconOnly={{true}}
-                @icon='settings'
-                @route='scopes.scope.targets.target.enable-session-recording'
-              />
-            </div>
+            <h3>{{t 'resources.target.form.sidebar.label'}}</h3>
             <p class='description'>
               {{t 'resources.target.form.sidebar.help'}}
             </p>
@@ -62,10 +53,16 @@
                 >
                   <Hds::Badge
                     @text={{t 'resources.storage-bucket.types.aws_s3'}}
-                    @icon='aws-color'
+                    @icon='aws'
                   />
                 </P.Item>
               </LinkListPanel>
+              <Hds::Link::Standalone
+                @icon='arrow-right'
+                @iconPosition='trailing'
+                @text={{t 'resources.target.form.sidebar.link'}}
+                @route='scopes.scope.targets.target.enable-session-recording'
+              />
             {{else}}
               <Hds::Button
                 @text={{t 'resources.target.actions.enable-recording'}}

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

@@ -21,7 +21,10 @@ module('Acceptance | targets | read', function (hooks) {
   setupMirage(hooks);
 
   let featuresService;
+  const SETTINGS_LINK_SELECTOR = '.target-sidebar .hds-link-standalone';
+  const ENABLE_BUTTON_SELECTOR = '.target-sidebar .hds-button';
   const LINK_LIST_SELECTOR = '.link-list-item';
+
   const instances = {
     scopes: {
       global: null,
@@ -207,16 +210,17 @@ module('Acceptance | targets | read', function (hooks) {
 
     await visit(urls.sshTarget);
 
-    assert.dom('.target-sidebar a').doesNotExist();
+    assert.dom(ENABLE_BUTTON_SELECTOR).doesNotExist();
   });
 
   test('users can click on enable-recording button in target session-recording sidebar and it takes them to enable session recording', async function (assert) {
     featuresService.enable('session-recording');
-    assert.expect(1);
-
+    assert.expect(2);
     await visit(urls.sshTarget);
 
-    await click('.target-sidebar a');
+    assert.dom(SETTINGS_LINK_SELECTOR).doesNotExist();
+    await click(ENABLE_BUTTON_SELECTOR);
+
     assert.strictEqual(currentURL(), urls.enableSessionRecording);
   });
 
@@ -233,13 +237,17 @@ module('Acceptance | targets | read', function (hooks) {
     assert.strictEqual(currentURL(), urls.storageBucket);
   });
 
-  test('users can click on settings icon in target session-recording sidebar and it takes them to enable session recording', async function (assert) {
+  test('users can click on settings link in target session-recording sidebar and it takes them to enable session recording', async function (assert) {
     featuresService.enable('session-recording');
     assert.expect(1);
+    featuresService.enable('ssh-target');
+    featuresService.enable('session-recording');
+    instances.sshTarget.update({ storageBucketId: instances.storageBucket.id });
+    await visit(urls.targets);
 
-    await visit(urls.sshTarget);
+    await click(`[href="${urls.sshTarget}"]`);
+    await click(SETTINGS_LINK_SELECTOR);
 
-    await click('.target-sidebar .title-wrapper a');
     assert.strictEqual(currentURL(), urls.enableSessionRecording);
   });
 });

ui/admin/tests/integration/components/link-list-panel/index-test.js

@@ -20,7 +20,7 @@ module('Integration | Component | link-list-panel/index', function (hooks) {
     `);
 
     assert.dom('[data-test-icon="cloud-upload"]').isVisible();
-    assert.dom('[data-test-icon="chevron-right"]').isVisible();
+    assert.dom('[data-test-icon="arrow-right"]').isVisible();
     assert.dom('[data-test-icon="aws-color"]').isVisible();
     assert.dom('.hds-badge__text').hasText('AWS S3');
     assert.dom('.link-list-item__text').hasText('Storage Bucket');