feat: 🎸 create enable-session-recording view (#165)

* feat: 🎸 create enable-session-recording view

Create `enable-session-recording` ui view.

✅ Closes: ICU-8592

* refactor: 💡 refactor scss for enable-session-recording

Refactor scss to use `rem` instead of Rose mixins for sizing.

✅ Closes: ICU-8592

* refactor: 💡 removed integration test

Removed integration test for `form/enable-session-recording`. User
testing will come from targets acceptance test.

✅ Closes: ICU-8592

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

@@ -427,6 +427,20 @@ target:
       delete-address:
         title: Remove target address?
         message: This target has an assigned address. Adding a host source will remove the assigned address from the target when you save your changes.
+  enable-session-recording:
+    title: Enable Session Recording
+    messages:
+      add:
+        title: Enable session recording for target
+    options:
+      1: Storage Bucket 1
+      2: Storage Bucket 2
+    form:
+      filter:
+        label: Record sessions for this target
+      select:
+        label: AWS storage buckets
+        description: Description for storage buckets
   brokered-credential-source:
     title: Brokered Credential
     title_plural: Brokered Credentials

ui/admin/app/components/form/enable-session-recording/index.hbs

@@ -0,0 +1,68 @@
+<Rose::Form @onSubmit={{@submit}} @cancel={{@cancel}} as |form|>
+  <div class='enable-session-recording-toggle'>
+
+    <Hds::Form::Toggle::Field
+      name='target-enable-session-recording'
+      checked={{this.toggleEnabled}}
+      as |F|
+    >
+      <F.Label>{{t
+          'resources.target.enable-session-recording.form.filter.label'
+        }}</F.Label>
+    </Hds::Form::Toggle::Field>
+
+    {{#if this.toggleEnabled}}
+      <Hds::Form::Select::Field
+        @isRequired={{true}}
+        @value={{@model.name}}
+        @isInvalid={{@model.errors.name}}
+        @type='text'
+        @width='100%'
+        @name='target-enable-session-recording'
+        as |F|
+      >
+        <F.Label>{{t
+            'resources.target.enable-session-recording.form.select.label'
+          }}</F.Label>
+
+        {{!TODO: add correct description for form-select}}
+        <F.HelperText>
+          {{t
+            'resources.target.enable-session-recording.form.select.description'
+          }}
+        </F.HelperText>
+
+        {{!TODO: replace dummy data with storage-bucket name and remove uneeded translations}}
+        <F.Options>
+          <option>{{t
+              'resources.target.enable-session-recording.options.1'
+            }}</option>
+          <option>{{t
+              'resources.target.enable-session-recording.options.2'
+            }}</option>
+        </F.Options>
+
+        {{#if @model.errors.name}}
+          <F.Error as |E|>
+            {{#each @model.errors.name as |error|}}
+              <E.Message>{{error.message}}</E.Message>
+            {{/each}}
+          </F.Error>
+        {{/if}}
+      </Hds::Form::Select::Field>
+    {{/if}}
+
+    <Hds::Link::Standalone
+      @color='primary'
+      @icon='plus'
+      @text='Add a new storage bucket'
+      @route='scopes.scope.storage-buckets.new'
+    />
+
+    <form.actions
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  </div>
+</Rose::Form>

ui/admin/app/components/form/enable-session-recording/index.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormEnableSessionRecordingIndexComponent extends Component {
+  // =attributes
+  @tracked toggleEnabled = true;
+}

ui/admin/app/controllers/scopes/scope/targets/target/enable-session-recording.js

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeTargetsTargetEnableSessionRecordingController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated enable session recording breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.target.enable-session-recording.title');
+  }
+}

ui/admin/app/routes/scopes/scope/targets/target/enable-session-recording.js

@@ -1,3 +1,20 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class ScopesScopeTargetsTargetEnableSessionRecordingRoute extends Route {}
+export default class ScopesScopeTargetsTargetEnableSessionRecordingRoute extends Route {
+  // =services
+
+  @service router;
+
+  // =methods
+
+  /**
+   * Returns the current target and all storage buckets.
+   * @return {{target: TargetModel, storageBuckets: [StorageBucketModel]}}
+   */
+
+  async model() {
+    // TODO: need model for storage_bucket as well
+    return this.modelFor('scopes.scope.targets.target');
+  }
+}

ui/admin/app/styles/app.scss

@@ -643,6 +643,21 @@
   }
 }
 
+.enable-session-recording-toggle {
+  width: 50%;
+  margin-top: 1.5rem;
+
+  .hds-form-field--layout-vertical,
+  .hds-link-standalone {
+    margin-left: 2.5rem;
+  }
+
+  .hds-link-standalone {
+    margin-top: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
 // target sidebar
 .target-sidebar {
   .title-wrapper {

ui/admin/app/templates/scopes/scope/targets/target/enable-session-recording.hbs

@@ -1,2 +1,30 @@
 {{page-title (t 'resources.target.actions.enable-session-recording')}}
-{{outlet}}
+
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t 'resources.target.enable-session-recording.messages.add.title'}}
+      <DocLink @doc='target.enable-session-recording' @iconSize='large' />
+    </h2>
+    {{!TODO: add description for enabling session recording}}
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t 'actions.copy-to-clipboard'}}
+      @acknowledgeText={{t 'states.copied'}}
+    >
+      <code>{{@model.id}}</code>
+    </Copyable>
+  </page.header>
+
+  <page.body>
+    <Form::EnableSessionRecording
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel'}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/config/environment.js

@@ -78,6 +78,7 @@ module.exports = function (environment) {
         target: '/targets',
         'target.new': '/targets/new',
         'target.add-host-sources': '/targets/add-host-sets',
+        'target.enable-session-recording': '/targets/enable-session-recording',
         'target.worker-filters': '/targets/worker-filters',
         user: '/users',
         downloads: '/downloads',

ui/admin/tests/unit/controllers/scopes/scope/targets/target/enable-session-recording-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module(
+  'Unit | Controller | scopes/scope/targets/target/enable-session-recording',
+  function (hooks) {
+    setupTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/targets/target/enable-session-recording'
+      );
+      assert.ok(controller);
+    });
+  }
+);