{{#if (and @loading @initialLoad)}}
{{#each this.loadingRows}}
-
-
-
-
+ {{#if (has-block "row-skeleton")}}
+
+ {{yield to="row-skeleton"}}
+
+ {{else}}
+
+
+
+
+ {{/if}}
{{/each}}
{{else}}
{{#each @records as |record|}}
@@ -56,10 +64,16 @@
{{#if @loading}}
{{#each this.loadingMoreRows}}
-
-
-
-
+ {{#if (has-block "row-skeleton")}}
+
+ {{yield to="row-skeleton"}}
+
+ {{else}}
+
+
+
+
+ {{/if}}
{{/each}}
{{/if}}
{{/if}}
diff --git a/addon/components/o-s-s/access-panel.stories.js b/addon/components/o-s-s/access-panel.stories.js
index 29f846ddd..3fd08af88 100644
--- a/addon/components/o-s-s/access-panel.stories.js
+++ b/addon/components/o-s-s/access-panel.stories.js
@@ -36,6 +36,16 @@ export default {
},
control: { type: 'boolean' }
},
+ filtered: {
+ description: 'Whether the records displayed are filtered by the parent or not',
+ table: {
+ type: {
+ summary: 'boolean'
+ },
+ defaultValue: { summary: undefined }
+ },
+ control: { type: 'boolean' }
+ },
onBottomReached: {
description: 'Function triggered when the user scrolls to the bottom of the panel.',
table: {
@@ -80,6 +90,7 @@ const defaultArgs = {
records: [{ label: 'foo' }, { label: 'bar' }],
initialLoad: false,
loading: false,
+ filtered: undefined,
onBottomReached: action('onBottomReached'),
onClose: action('onClose'),
onSearch: action('onSearch')
@@ -123,6 +134,29 @@ const CustomContentTemplate = (args) => ({
context: args
});
+const CustomLoadingStatesTemplate = (args) => ({
+ template: hbs`
+
+
+ <:header>Header
+ <:empty-state>Empty state
+ <:columns>Columns
+ <:no-results>No results
+ <:row as |record|>{{record.label}}
+ <:row-skeleton>Loading...
+
+
+ `,
+ context: args
+});
+
export const BasicUsage = DefaultUsageTemplate.bind({});
BasicUsage.args = defaultArgs;
@@ -143,3 +177,10 @@ LoadingState.args = {
loading: true,
initialLoad: false
};
+
+export const CustomLoadingState = CustomLoadingStatesTemplate.bind({});
+CustomLoadingState.args = {
+ ...defaultArgs,
+ loading: true,
+ initialLoad: false
+};
diff --git a/addon/components/o-s-s/access-panel.ts b/addon/components/o-s-s/access-panel.ts
index 18efb1ca6..221732f08 100644
--- a/addon/components/o-s-s/access-panel.ts
+++ b/addon/components/o-s-s/access-panel.ts
@@ -2,11 +2,13 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { later } from '@ember/runloop';
+import { isBlank } from '@ember/utils';
interface OSSAccessPanelArgs {
records: unknown[];
initialLoad: boolean;
loading?: boolean;
+ filtered?: boolean;
onBottomReached(): void;
onClose(): void;
onSearch?(keyword: string): void;
@@ -18,12 +20,12 @@ export default class OSSAccessPanel extends Component
{
@tracked searchKeyword: string = '';
- get displayEmptyState(): boolean {
- return (this.args.records || []).length === 0 && !this.args.loading;
+ get filtered(): boolean {
+ return this.args.filtered || !isBlank(this.searchKeyword);
}
- get hasNoKeyword(): boolean {
- return !this.searchKeyword;
+ get displayEmptyState(): boolean {
+ return (this.args.records || []).length === 0 && !this.args.loading;
}
@action
diff --git a/tests/integration/components/o-s-s/access-panel-test.ts b/tests/integration/components/o-s-s/access-panel-test.ts
index 7a3028490..b8f8f26bc 100644
--- a/tests/integration/components/o-s-s/access-panel-test.ts
+++ b/tests/integration/components/o-s-s/access-panel-test.ts
@@ -23,7 +23,8 @@ module('Integration | Component | o-s-s/access-panel', function (hooks) {
await render(
hbs`
+ @onBottomReached={{this.loadMore}} @onSearch={{this.onSearch}} @onClose={{this.onClose}}
+ @filtered={{this.filtered}}>
<:header>Header
<:columns>Columns
<:row as |record|>row display: {{record.label}}
@@ -50,15 +51,62 @@ module('Integration | Component | o-s-s/access-panel', function (hooks) {
assert.dom('.oss-access-panel-container__row .upf-skeleton-effect').exists({ count: 24 });
});
- test('the initial loading state is correctly displayed', async function (assert) {
+ test('the initial loading state uses the row-skeleton named block if passed', async function (assert) {
+ this.loading = true;
+ this.initialLoad = true;
+
+ await render(
+ hbs`
+ <:header>Header
+ <:columns>Columns
+ <:row as |record|>row display: {{record.label}}
+ <:empty-state>empty state
+ <:no-results>no search results
+ <:row-skeleton>custom loading state
+
+ `
+ );
+
+ assert.dom('.oss-access-panel-container__row').exists({ count: 12 });
+ assert.dom('.oss-access-panel-container__row .super-skeleton').exists({ count: 12 });
+ });
+
+ test('the loading state when loading more records is correctly displayed', async function (assert) {
this.loading = true;
this.initialLoad = false;
+
await renderComponent();
assert.dom('.oss-access-panel-container__row').exists({ count: 5 });
assert.dom('.oss-access-panel-container__row .upf-skeleton-effect').exists({ count: 6 });
});
+ test('the loading state when loading more records uses the row-skeleton named block if passed', async function (assert) {
+ this.loading = true;
+ this.initialLoad = false;
+
+ await render(
+ hbs`
+ <:header>Header
+ <:columns>Columns
+ <:row as |record|>row display: {{record.label}}
+ <:empty-state>empty state
+ <:no-results>no search results
+ <:row-skeleton>custom loading state
+
+ `
+ );
+
+ assert.dom('.oss-access-panel-container__row').exists({ count: 5 });
+ assert.dom('.oss-access-panel-container__row .super-skeleton').exists({ count: 3 });
+ });
+
test('The header named block is correctly filled', async function (assert) {
await renderComponent();
assert.dom('.oss-access-panel-container__header').exists();
@@ -104,6 +152,17 @@ module('Integration | Component | o-s-s/access-panel', function (hooks) {
assert.dom('.no-results').hasText('no search results');
});
+ test('it renders the right empty state when no records are found and there is an ongoing search handled by the parent', async function (assert) {
+ this.onSearch = undefined;
+ this.records = [];
+ this.filtered = true;
+
+ await renderComponent();
+
+ assert.dom('.no-results').exists();
+ assert.dom('.no-results').hasText('no search results');
+ });
+
test('if the onSearch arg is not passed, the search input is not displayed', async function (assert) {
this.onSearch = undefined;
await renderComponent();