Skip to content

OSS::AccessPanel: supported delegated filtering to parent + custom skeletons for loading states #638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
phndiaye wants to merge 1 commit into
base: master
Choose a base branch
from
Open

OSS::AccessPanel: supported delegated filtering to parent + custom skeletons for loading states #638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions addon/components/o-s-s/access-panel.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>
{{/if}}

{{#if (and this.displayEmptyState this.hasNoKeyword)}}
{{#if (and this.displayEmptyState (not this.filtered))}}
<div class="fx-1">
{{yield to="empty-state"}}
</div>
Expand All @@ -27,20 +27,28 @@
<div class="oss-access-panel-container__rows-header">
{{yield to="columns"}}
</div>

<hr />
{{/if}}

{{#if (and this.displayEmptyState this.searchKeyword)}}
{{#if (and this.displayEmptyState this.filtered)}}
{{yield to="no-results"}}
{{else}}
<div class="oss-access-panel-container__rows-container" {{on-bottom-reached @onBottomReached}}>
<div
class="oss-access-panel-container__rows-container"
{{on-bottom-reached @onBottomReached}}
{{scroll-shadow}}
>
{{#if (and @loading @initialLoad)}}
{{#each this.loadingRows}}
<div class="oss-access-panel-container__row fx-malign-space-between">
<OSS::Skeleton @height={{12}} @width={{150}} />
<OSS::Skeleton @height={{12}} @width={{36}} />
</div>
{{#if (has-block "row-skeleton")}}
<div class="oss-access-panel-container__row">
{{yield to="row-skeleton"}}
</div>
{{else}}
<div class="oss-access-panel-container__row fx-malign-space-between">
<OSS::Skeleton @height={{12}} @width={{150}} />
<OSS::Skeleton @height={{12}} @width={{36}} />
</div>
{{/if}}
{{/each}}
{{else}}
{{#each @records as |record|}}
Expand All @@ -56,10 +64,16 @@

{{#if @loading}}
{{#each this.loadingMoreRows}}
<div class="oss-access-panel-container__row fx-malign-space-between">
<OSS::Skeleton @height={{12}} @width={{150}} />
<OSS::Skeleton @height={{12}} @width={{36}} />
</div>
{{#if (has-block "row-skeleton")}}
<div class="oss-access-panel-container__row">
{{yield to="row-skeleton"}}
</div>
{{else}}
<div class="oss-access-panel-container__row fx-malign-space-between">
<OSS::Skeleton @height={{12}} @width={{150}} />
<OSS::Skeleton @height={{12}} @width={{36}} />
</div>
{{/if}}
{{/each}}
{{/if}}
{{/if}}
Expand Down
41 changes: 41 additions & 0 deletions addon/components/o-s-s/access-panel.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -123,6 +134,29 @@ const CustomContentTemplate = (args) => ({
context: args
});

const CustomLoadingStatesTemplate = (args) => ({
template: hbs`
<div style="width: 350px; background-color: var(--color-gray-50); padding: var(--spacing-px-24);">
<OSS::AccessPanel
@records={{this.records}}
@initialLoad={{this.initialLoad}}
@loading={{this.loading}}
@onBottomReached={{this.onBottomReached}}
@onClose={{this.onClose}}
@onSearch={{this.onSearch}}
>
<:header>Header</:header>
<:empty-state>Empty state</:empty-state>
<:columns>Columns</:columns>
<:no-results>No results</:no-results>
<:row as |record|>{{record.label}}</:row>
<:row-skeleton>Loading...</:row-skeleton>
</OSS::AccessPanel>
</div>
`,
context: args
});

export const BasicUsage = DefaultUsageTemplate.bind({});
BasicUsage.args = defaultArgs;

Expand All @@ -143,3 +177,10 @@ LoadingState.args = {
loading: true,
initialLoad: false
};

export const CustomLoadingState = CustomLoadingStatesTemplate.bind({});
CustomLoadingState.args = {
...defaultArgs,
loading: true,
initialLoad: false
};
10 changes: 6 additions & 4 deletions addon/components/o-s-s/access-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -18,12 +20,12 @@ export default class OSSAccessPanel extends Component<OSSAccessPanelArgs> {

@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
Expand Down
63 changes: 61 additions & 2 deletions tests/integration/components/o-s-s/access-panel-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ module('Integration | Component | o-s-s/access-panel', function (hooks) {
await render(
hbs`<OSS::AccessPanel
@records={{this.records}} @loading={{this.loading}} @initialLoad={{this.initialLoad}}
@onBottomReached={{this.loadMore}} @onSearch={{this.onSearch}} @onClose={{this.onClose}}>
@onBottomReached={{this.loadMore}} @onSearch={{this.onSearch}} @onClose={{this.onClose}}
@filtered={{this.filtered}}>
<:header>Header</:header>
<:columns>Columns</:columns>
<:row as |record|>row display: {{record.label}}</:row>
Expand All @@ -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`<OSS::AccessPanel
@records={{this.records}} @loading={{this.loading}} @initialLoad={{this.initialLoad}}
@onBottomReached={{this.loadMore}} @onSearch={{this.onSearch}} @onClose={{this.onClose}}
@filtered={{this.filtered}}>
<:header>Header</:header>
<:columns>Columns</:columns>
<:row as |record|>row display: {{record.label}}</:row>
<:empty-state><div class="empty-state">empty state</div></:empty-state>
<:no-results><div class="no-results">no search results</div></:no-results>
<:row-skeleton><div class="super-skeleton">custom loading state</div></:row-skeleton>
</OSS::AccessPanel>
`
);

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`<OSS::AccessPanel
@records={{this.records}} @loading={{this.loading}} @initialLoad={{this.initialLoad}}
@onBottomReached={{this.loadMore}} @onSearch={{this.onSearch}} @onClose={{this.onClose}}
@filtered={{this.filtered}}>
<:header>Header</:header>
<:columns>Columns</:columns>
<:row as |record|>row display: {{record.label}}</:row>
<:empty-state><div class="empty-state">empty state</div></:empty-state>
<:no-results><div class="no-results">no search results</div></:no-results>
<:row-skeleton><div class="super-skeleton">custom loading state</div></:row-skeleton>
</OSS::AccessPanel>
`
);

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();
Expand Down Expand Up @@ -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();
Expand Down
Loading