Icu 8704 enable session recording route model hook (#180)

* feat: 🎸 target session recording toggle

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

@@ -434,15 +434,12 @@ target:
     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
+        description: Sessions will be recorded and stored in this location. Must use Amazon S3.
   brokered-credential-source:
     title: Brokered Credential
     title_plural: Brokered Credentials

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

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

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

@@ -1,50 +1,54 @@
-<Rose::Form @onSubmit={{@submit}} @cancel={{@cancel}} as |form|>
+<Rose::Form
+  @onSubmit={{fn @submit this.toggleEnabled}}
+  @cancel={{@cancel}}
+  as |form|
+>
   <div class='enable-session-recording-toggle'>
-
     <Hds::Form::Toggle::Field
       name='target-enable-session-recording'
       checked={{this.toggleEnabled}}
+      {{on 'change' this.toggleSessionRecording}}
       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}}
+        @isInvalid={{@model.errors.storage_bucket_id}}
+        @value={{@model.storage_bucket_id}}
         @type='text'
         @width='100%'
-        @name='target-enable-session-recording'
+        @name='storage_bucket_id'
+        {{on 'change' this.selectStorageBucket}}
         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 disabled hidden selected value=''>{{t
+              'titles.choose-an-option'
             }}</option>
+          {{#each @storageBucketList as |bucket|}}
+            <option
+              value={{bucket.id}}
+              selected={{eq @model.storage_bucket_id bucket.id}}
+            >
+              {{bucket.displayName}}
+            </option>
+          {{/each}}
         </F.Options>
-
-        {{#if @model.errors.name}}
+        {{#if @model.errors.storage_bucket_id}}
           <F.Error as |E|>
-            {{#each @model.errors.name as |error|}}
+            {{#each @model.errors.storage_bucket_id as |error|}}
               <E.Message>{{error.message}}</E.Message>
             {{/each}}
           </F.Error>
@@ -55,14 +59,14 @@
     <Hds::Link::Standalone
       @color='primary'
       @icon='plus'
-      @text='Add a new storage bucket'
+      @text={{t 'resources.storage-bucket.messages.none.link'}}
       @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/target/enable-session-recording/index.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FormEnableSessionRecordingIndexComponent extends Component {
+  // =attributes
+  @tracked toggleEnabled = true;
+
+  //actions
+  /**
+   * toggle to enable session recording for the target
+   */
+  @action
+  toggleSessionRecording() {
+    this.toggleEnabled = !this.toggleEnabled;
+  }
+
+  @action
+  selectStorageBucket({ target: { value: selectedStorageBucketID } }) {
+    this.args.model.storage_bucket_id = selectedStorageBucketID;
+  }
+}

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

@@ -1,9 +1,13 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { loading } from 'ember-loading';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
+import { set } from '@ember/object';
 
 export default class ScopesScopeTargetsTargetEnableSessionRecordingRoute extends Route {
   // =services
-
+  @service store;
   @service router;
 
   // =methods
@@ -14,7 +18,64 @@ export default class ScopesScopeTargetsTargetEnableSessionRecordingRoute extends
    */
 
   async model() {
-    // TODO: need model for storage_bucket as well
-    return this.modelFor('scopes.scope.targets.target');
+    const target = this.modelFor('scopes.scope.targets.target');
+    const { scopeID: scope_id } = this.modelFor('scopes.scope');
+
+    //fetch storage buckets from global scope
+    const globalScopeStorageBuckets = await this.store.query('storage-bucket', {
+      scope_id: 'global',
+    });
+
+    //fetch storage buckets from target's org scope
+    const orgScopeStorageBuckets = await this.store.query('storage-bucket', {
+      scope_id,
+    });
+
+    //merge results from both global and target's org scope
+    //into one list for the dropdown
+    const storageBucketList = [
+      ...globalScopeStorageBuckets.toArray(),
+      ...orgScopeStorageBuckets.toArray(),
+    ];
+
+    return {
+      target,
+      storageBucketList,
+    };
+  }
+
+  // =actions
+  /**
+   * Add storage bucket to target if the toggle is enabled, else remove it
+   * @param {TargetModel} target
+   * @param {boolean} isToggleEnabled
+   */
+  @action
+  @loading
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.add-success')
+  async save(target, isToggleEnabled) {
+    const { id } = target;
+    if (isToggleEnabled) {
+      await target.setStorageBucket();
+    } else {
+      await target.removeStorageBucket();
+    }
+    this.router.replaceWith('scopes.scope.targets.target', id);
+  }
+
+  /**
+   * reset the selected storage bucket and redirect to target
+   * @param {TargetModel} target
+   */
+  @action
+  cancel(target) {
+    const { id } = target;
+    const changedAttributes = target.changedAttributes();
+    if (Object.keys(changedAttributes).length) {
+      const existingAttributes = changedAttributes?.['storage_bucket_id']?.[0];
+      set(target, 'storage_bucket_id', existingAttributes);
+    }
+    this.router.replaceWith('scopes.scope.targets.target', id);
   }
 }

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

@@ -9,21 +9,22 @@
     <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}}
+      @text={{@model.target.id}}
       @buttonText={{t 'actions.copy-to-clipboard'}}
       @acknowledgeText={{t 'states.copied'}}
     >
-      <code>{{@model.id}}</code>
+      <code>{{@model.target.id}}</code>
     </Copyable>
   </page.header>
 
   <page.body>
-    <Form::EnableSessionRecording
-      @model={{@model}}
-      @submit={{route-action 'save' @model}}
-      @cancel={{route-action 'cancel'}}
+    <Form::Target::EnableSessionRecording
+      @model={{@model.target}}
+      @storageBucketList={{@model.storageBucketList}}
+      @submit={{route-action 'save' @model.target}}
+      @cancel={{route-action 'cancel' @model.target}}
     />
   </page.body>