feat: storage policies list view (#2071)

policies list view

addons/api/addon/abilities/policy.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import ModelAbility from './model';
+import { service } from '@ember/service';
+
+/**
+ * Provides abilities for storage policies.
+ */
+export default class PolicyAbility extends ModelAbility {
+  // =services
+  @service features;
+  // =permissions
+
+  /**
+   * This ensures that storage policies may be read only if the
+   * session-recording feature flag is enabled.
+   */
+  get canRead() {
+    return this.features.isEnabled('ssh-session-recording')
+      ? super.canRead
+      : false;
+  }
+
+  /**
+   * This ensures that storage policies may be updated only if the
+   * session-recording feature flag is enabled.
+   */
+  get canUpdate() {
+    return this.features.isEnabled('ssh-session-recording')
+      ? super.canUpdate
+      : false;
+  }
+
+  /**
+   * This ensures that storage policies may be deleted only if the
+   * session-recording feature flag is enabled.
+   */
+  get canDelete() {
+    return this.features.isEnabled('ssh-session-recording')
+      ? super.canDelete
+      : false;
+  }
+}

addons/api/app/abilities/policy.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'api/abilities/policy';

addons/api/mirage/factories/policy.js

@@ -22,12 +22,12 @@ export default factory.extend({
   attributes() {
     return {
       retain_for: {
-        days: faker.number.int({ min: 10, max: 700 }),
+        days: faker.number.int({ min: 10, max: 100 }),
         overridable: faker.datatype.boolean(),
       },
 
       delete_after: {
-        days: faker.number.int({ min: 1, max: 500 }),
+        days: faker.number.int({ min: 101, max: 500 }),
         overridable: faker.datatype.boolean(),
       },
     };

addons/core/addon/helpers/format-day-year.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+/**
+ * Takes a `Day` instance and returns in year format if there are no remainders,
+ *  * @example
+ * {{format-day-year number}}
+ *
+ **/
+export default class extends Helper {
+  // =services
+  @service intl;
+
+  // =compute method
+
+  /**
+   * @param {number} days
+   * @return string
+   */
+
+  compute([days]) {
+    const remainder = days % 365;
+    if (remainder === 0) {
+      const numberOfYears = days / 365;
+      return this.intl.t('titles.year', { numberOfYears });
+    } else {
+      return this.intl.t('titles.days', { days });
+    }
+  }
+}

addons/core/app/helpers/format-day-year.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'core/helpers/format-day-year';

addons/core/tests/integration/helpers/format-day-year-test.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Helper | format-day-year', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test('it renders correctly when it is 1 year', async function (assert) {
+    this.set('inputValue', 365);
+    await render(hbs`{{format-day-year this.inputValue}}`);
+    assert.strictEqual(this.element.textContent.trim(), '1 year');
+  });
+
+  test('it renders correctly when it is more than 1 year', async function (assert) {
+    this.set('inputValue', 730);
+    await render(hbs`{{format-day-year this.inputValue}}`);
+    assert.strictEqual(this.element.textContent.trim(), '2 years');
+  });
+
+  test('it renders correctly when it is not a whole year', async function (assert) {
+    this.set('inputValue', 800);
+    await render(hbs`{{format-day-year this.inputValue}}`);
+    assert.strictEqual(this.element.textContent.trim(), '800 days');
+  });
+  test('it renders when null', async function (assert) {
+    this.set('inputValue', null);
+    await render(hbs`{{format-date-iso this.inputValue}}`);
+    assert.strictEqual(this.element.textContent.trim(), '');
+  });
+});

addons/core/translations/en-us.yaml

@@ -38,6 +38,9 @@ titles:
   create-resources: Create Resources
   choose-an-option: Choose an option
   feature-edition: 'Edition: {edition}'
+  unit: Unit
+  year: '{numberOfYears, plural, =1 {# year} other {# years}}'
+  days: '{days, plural, =1 {# day} other {# days}}'
 descriptions:
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
   cluster-url-initialization: To get started, please enter your cluster URL

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

@@ -920,3 +920,15 @@ policy:
   title_plural: Storage Policies
   titles:
     new: New Storage Policy
+    policy_name: Policy name
+    retain_for: Retain for
+    delete_after: Delete After
+    do_not_delete: Do not delete
+    forever: Forever
+  actions:
+    delete: Delete Storage Policy
+  messages:
+    none:
+      title: No storage policies yet
+      description: Storage policies define how long to store recordings before they are automatically deleted. We recommend checking your data retention policies for compliance requirements.
+      link: Create a new storage policy

ui/admin/app/routes/scopes/scope/policies.js

@@ -5,16 +5,29 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { loading } from 'ember-loading';
+import { confirm } from 'core/decorators/confirm';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopePoliciesRoute extends Route {
   // =services
 
   @service store;
   @service can;
+  @service session;
 
   // =methods
+
   /**
-   * Load all policies under current scope
+   * If arriving here unauthenticated, redirect to index for further processing.
+   */
+  beforeModel() {
+    if (!this.session.isAuthenticated) this.router.transitionTo('index');
+  }
+
+  /**
+   * Load all storage policies under current scope
    * @return {Promise<[PolicyModel]>}
    */
   async model() {
@@ -29,4 +42,17 @@ export default class ScopesScopePoliciesRoute extends Route {
       return this.store.query('policy', { scope_id });
     }
   }
+
+  /**
+   * Deletes the policy.
+   * @param {PolicyModel} policy
+   */
+  @action
+  @loading
+  @confirm('questions.delete-confirm')
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.delete-success')
+  async delete(policy) {
+    await policy.destroyRecord();
+  }
 }

ui/admin/app/routes/scopes/scope/policies/index.js

@@ -5,4 +5,12 @@
 
 import Route from '@ember/routing/route';
 
-export default class ScopesScopePoliciesIndexRoute extends Route {}
+export default class ScopesScopePoliciesIndexRoute extends Route {
+  // =methods
+
+  setupController(controller) {
+    const scope = this.modelFor('scopes.scope');
+    super.setupController(...arguments);
+    controller.setProperties({ scope });
+  }
+}

ui/admin/app/routes/scopes/scope/policies/new.js

@@ -6,4 +6,5 @@
 import Route from '@ember/routing/route';
 
 export default class ScopesScopePoliciesNewRoute extends Route {
+  // =services
 }

ui/admin/app/routes/scopes/scope/policies/policy.js

@@ -4,5 +4,24 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class ScopesScopePoliciesPolicyRoute extends Route {}
+export default class ScopesScopePoliciesPolicyRoute extends Route {
+  @service store;
+  @service can;
+  @service router;
+
+  // =methods
+
+  /**
+   * Load a policy in current scope.
+   * @param {object} params
+   * @param {string} params.policy_id
+   * @return {Promise{PolicyModel}}
+   */
+  async model({ policy_id }) {
+    return this.store.findRecord('policy', policy_id, {
+      reload: true,
+    });
+  }
+}

ui/admin/app/templates/scopes/scope/policies/index.hbs

@@ -10,7 +10,144 @@
   <page.header>
     <h2>
       {{t 'resources.policy.title_plural'}}
+      {{! TODO: Add doc link here }}
     </h2>
-    <p>{{t 'resources.policy.description'}}</p>
   </page.header>
+  <page.actions>
+    {{#if (can 'create model' this.scope collection='policies')}}
+      {{#if @model}}
+        <Hds::Button
+          @route='scopes.scope.policies.new'
+          @text={{t 'resources.policy.titles.new'}}
+        />
+      {{/if}}
+    {{/if}}
+  </page.actions>
+  <page.body>
+    {{#if @model}}
+      <Hds::Table
+        @valign='middle'
+        @model={{@model}}
+        @columns={{array
+          (hash label=(t 'resources.policy.titles.policy_name'))
+          (hash label=(t 'resources.scope.title'))
+          (hash label=(t 'resources.policy.titles.retain_for'))
+          (hash label=(t 'resources.policy.titles.delete_after'))
+          (hash label='')
+        }}
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (can 'read policy' B.data)}}
+                <LinkTo
+                  @route='scopes.scope.policies.policy'
+                  @model={{B.data.id}}
+                >
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.displayName}}
+              {{/if}}
+              {{#if B.data.description}}
+                <p>{{B.data.description}}</p>
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#if B.data.scopeModel.isGlobal}}
+                <Hds::Badge @text={{t 'titles.global'}} @icon='globe' />
+              {{else}}
+                <Hds::Badge
+                  @text={{B.data.scopeModel.displayName}}
+                  @icon='org'
+                />
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#if B.data.retain_for.days}}
+                {{format-day-year B.data.retain_for.days}}
+              {{else}}
+                {{t 'resources.policy.titles.forever'}}
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#if B.data.delete_after.days}}
+                {{format-day-year B.data.delete_after.days}}
+              {{else}}
+                {{t 'resources.policy.titles.do_not_delete'}}
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#let
+                (hash
+                  canRead=(can 'read policy' B.data)
+                  canDelete=(can 'delete policy' B.data)
+                )
+                as |perms|
+              }}
+                {{#if (or perms.canRead perms.canDelete)}}
+                  <Hds::Dropdown as |dd|>
+                    <dd.ToggleIcon
+                      @icon='more-horizontal'
+                      @text={{t 'actions.manage'}}
+                      @hasChevron={{false}}
+                      @size='small'
+                    />
+                    {{#if perms.canRead}}
+                      <dd.Interactive
+                        @route='scopes.scope.policies.policy'
+                        @model={{B.data.id}}
+                        @text={{t 'actions.edit'}}
+                      />
+                    {{/if}}
+                    {{#if (and perms.canRead perms.canDelete)}}
+                      <dd.Separator />
+                    {{/if}}
+                    {{#if perms.canDelete}}
+                      <dd.Interactive
+                        @text={{t 'resources.policy.actions.delete'}}
+                        @color='critical'
+                        {{on 'click' (route-action 'delete' B.data)}}
+                      />
+                    {{/if}}
+                  </Hds::Dropdown>
+                {{/if}}
+              {{/let}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+    {{else}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.policy.messages.none.title'}}
+          as |message|
+        >
+          <message.description>
+            {{#if (can 'list model' this.scope collection='policies')}}
+              {{t 'resources.policy.messages.none.description'}}
+            {{else if (can 'create model' this.scope collection='policies')}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.policy.title_plural')
+              }}
+            {{else}}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.policy.title_plural')
+              }}
+            {{/if}}
+          </message.description>
+          {{#if (can 'create model' this.scope collection='policies')}}
+            <Hds::Link::Standalone
+              @icon='plus-circle'
+              @iconPosition='leading'
+              @route='scopes.scope.policies.new'
+              @text={{t 'resources.policy.messages.none.link'}}
+            />
+          {{/if}}
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/if}}
+  </page.body>
 </Rose::Layout::Page>

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

@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit, click, currentURL, find } from '@ember/test-helpers';
+import { setupApplicationTest } from 'admin/tests/helpers';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { authenticateSession } from 'ember-simple-auth/test-support';
+
+module('Acceptance | policies | list', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  let featuresService;
+  let intl;
+
+  const STORAGE_POLICY_TITLE = 'Storage Policies';
+  const MESSAGE_DESCRIPTION_SELECTOR = '.rose-message-description';
+  const MESSAGE_LINK_SELECTOR = '.rose-message-body .hds-link-standalone';
+  const DROPDOWN_BUTTON_SELECTOR = '.hds-dropdown-toggle-icon';
+  const DROPDOWN_ITEM_SELECTOR = '.hds-dropdown-list-item a';
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+    },
+    policy: null,
+  };
+
+  const urls = {
+    globalScope: null,
+    policies: null,
+    policy: null,
+  };
+
+  hooks.beforeEach(function () {
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.scopes.org = this.server.create('scope', {
+      type: 'org',
+      scope: { id: 'global', type: 'global' },
+    });
+    urls.globalScope = `/scopes/global`;
+    urls.policies = `${urls.globalScope}/policies`;
+
+    intl = this.owner.lookup('service:intl');
+
+    authenticateSession({});
+    featuresService = this.owner.lookup('service:features');
+  });
+
+  test('users can navigate to policies with proper authorization', async function (assert) {
+    featuresService.enable('ssh-session-recording');
+    await visit(urls.globalScope);
+
+    assert.true(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('list'),
+    );
+    assert.true(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('create'),
+    );
+    assert.dom(`[href="${urls.policies}"]`).exists();
+
+    await click(`[href="${urls.policies}"]`);
+
+    assert
+      .dom(MESSAGE_DESCRIPTION_SELECTOR)
+      .hasText(intl.t('resources.policy.messages.none.description'));
+    assert.dom(MESSAGE_LINK_SELECTOR).exists();
+  });
+
+  test('user cannot navigate to index without either list or create actions', async function (assert) {
+    featuresService.enable('ssh-session-recording');
+
+    instances.scopes.global.authorized_collection_actions['policies'] = [];
+
+    await visit(urls.globalScope);
+
+    assert.false(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('list'),
+    );
+    assert.false(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('create'),
+    );
+    assert
+      .dom('[title="General"] a:nth-of-type(3)')
+      .doesNotIncludeText(STORAGE_POLICY_TITLE);
+
+    await visit(urls.policies);
+
+    assert.dom(MESSAGE_DESCRIPTION_SELECTOR).hasText(
+      intl.t('descriptions.neither-list-nor-create', {
+        resource: STORAGE_POLICY_TITLE,
+      }),
+    );
+    assert.dom(MESSAGE_LINK_SELECTOR).doesNotExist();
+  });
+
+  test('user can navigate to index with only create action', async function (assert) {
+    featuresService.enable('ssh-session-recording');
+
+    instances.scopes.global.authorized_collection_actions['policies'] =
+      instances.scopes.global.authorized_collection_actions['policies'].filter(
+        (item) => item !== 'list',
+      );
+
+    await visit(urls.globalScope);
+
+    assert.false(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('list'),
+    );
+    assert.true(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('create'),
+    );
+    assert.dom(`[href="${urls.policies}"]`).exists();
+
+    await click(`[href="${urls.policies}"]`);
+
+    assert.dom(MESSAGE_DESCRIPTION_SELECTOR).hasText(
+      intl.t('descriptions.create-but-not-list', {
+        resource: STORAGE_POLICY_TITLE,
+      }),
+    );
+    assert.dom(MESSAGE_LINK_SELECTOR).exists();
+  });
+
+  test('user can navigate to index with only list action', async function (assert) {
+    featuresService.enable('ssh-session-recording');
+
+    instances.scopes.global.authorized_collection_actions['policies'] =
+      instances.scopes.global.authorized_collection_actions['policies'].filter(
+        (item) => item !== 'create',
+      );
+
+    await visit(urls.globalScope);
+
+    assert.true(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('list'),
+    );
+    assert.false(
+      instances.scopes.global.authorized_collection_actions[
+        'policies'
+      ].includes('create'),
+    );
+    assert.dom(`[href="${urls.policies}"]`).exists();
+
+    await click(`[href="${urls.policies}"]`);
+
+    assert
+      .dom(MESSAGE_DESCRIPTION_SELECTOR)
+      .hasText(intl.t('resources.policy.messages.none.description'));
+    assert.dom(MESSAGE_LINK_SELECTOR).doesNotExist();
+  });
+
+  test('user cannot navigate to index when feature is disabled', async function (assert) {
+    await visit(urls.globalScope);
+
+    assert.false(featuresService.isEnabled('ssh-session-recording'));
+
+    assert.notOk(find(`[href="${urls.policies}"]`));
+  });
+
+  test('edit action in table directs user to appropriate page', async function (assert) {
+    featuresService.enable('ssh-session-recording');
+    await visit(urls.globalScope);
+    instances.policy = this.server.create('policy', {
+      scope: instances.scopes.global,
+    });
+    urls.policy = `${urls.policies}/${instances.policy.id}`;
+
+    await click(`[href="${urls.policies}"]`);
+    await click(DROPDOWN_BUTTON_SELECTOR);
+
+    assert.dom(DROPDOWN_ITEM_SELECTOR).exists();
+    assert.dom(DROPDOWN_ITEM_SELECTOR).hasText('Edit');
+    await click(DROPDOWN_ITEM_SELECTOR);
+    assert.strictEqual(currentURL(), urls.policy);
+  });
+});