From c840a9e6a4643db9b339621255a0198bcb2c8ada Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 26 Oct 2023 10:34:00 -0400 Subject: [PATCH 1/3] Add `EmptyStateAddButton` component --- .../sidebar/empty-state-add-button.gts | 40 +++++++++++++++++++ .../sidebar/related-resources/list.hbs | 25 +++--------- web/package.json | 1 + web/yarn.lock | 11 +++++ 4 files changed, 57 insertions(+), 20 deletions(-) create mode 100644 web/app/components/document/sidebar/empty-state-add-button.gts diff --git a/web/app/components/document/sidebar/empty-state-add-button.gts b/web/app/components/document/sidebar/empty-state-add-button.gts new file mode 100644 index 000000000..379bb7fab --- /dev/null +++ b/web/app/components/document/sidebar/empty-state-add-button.gts @@ -0,0 +1,40 @@ +import Component from "@glimmer/component"; +import Action from "hermes/components/action"; +import EmptyStateText from "hermes/components/empty-state-text"; +import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon"; +import { on } from "@ember/modifier"; + +interface DocumentSidebarEmptyStateAddButtonSignature { + Element: HTMLButtonElement; + Args: { + editingIsDisabled?: boolean; + action: () => void; + }; +} + +export default class DocumentSidebarEmptyStateAddButton extends Component { + +} + +declare module "@glint/environment-ember-loose/registry" { + export default interface Registry { + "Document::Sidebar::EmptyStateAddButton": typeof DocumentSidebarEmptyStateAddButton; + } +} diff --git a/web/app/components/document/sidebar/related-resources/list.hbs b/web/app/components/document/sidebar/related-resources/list.hbs index e90ef58eb..1f91b44d4 100644 --- a/web/app/components/document/sidebar/related-resources/list.hbs +++ b/web/app/components/document/sidebar/related-resources/list.hbs @@ -1,26 +1,11 @@
{{#if this.listIsEmpty}} -
-
- {{#if @editingIsDisabled}} -
- -
- {{else}} - - - - - - - {{/if}} -
-
+ {{else}}
    {{#animated-each diff --git a/web/package.json b/web/package.json index 93d806be0..32406a7a5 100644 --- a/web/package.json +++ b/web/package.json @@ -50,6 +50,7 @@ "@types/ember__destroyable": "latest", "@types/ember__engine": "latest", "@types/ember__error": "latest", + "@types/ember__modifier": "latest", "@types/ember__object": "latest", "@types/ember__polyfills": "latest", "@types/ember__routing": "latest", diff --git a/web/yarn.lock b/web/yarn.lock index ab3eca001..9d25e47b7 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -3262,6 +3262,16 @@ __metadata: languageName: node linkType: hard +"@types/ember__modifier@npm:latest": + version: 4.0.7 + resolution: "@types/ember__modifier@npm:4.0.7" + dependencies: + "@types/ember": "*" + "@types/ember__owner": "*" + checksum: 29716c3b7b21712691b08ed96bb0060c32e06713e6ae4fb7e092b60d74e6798d68ef60ab34b4fda8310d1e30cdc9f9c8e30527929e2048e78c98993e66520c29 + languageName: node + linkType: hard + "@types/ember__object@npm:*, @types/ember__object@npm:latest": version: 4.0.5 resolution: "@types/ember__object@npm:4.0.5" @@ -12176,6 +12186,7 @@ __metadata: "@types/ember__destroyable": latest "@types/ember__engine": latest "@types/ember__error": latest + "@types/ember__modifier": latest "@types/ember__object": latest "@types/ember__polyfills": latest "@types/ember__routing": latest From e43e9c65a0e7b171a8941be7c830aecb6d706672 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 26 Oct 2023 10:51:14 -0400 Subject: [PATCH 2/3] Add test, tweak property name --- .../sidebar/empty-state-add-button.gts | 8 ++-- .../sidebar/related-resources/list.hbs | 2 +- .../sidebar/empty-state-add-button-test.ts | 48 +++++++++++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 web/tests/integration/components/document/sidebar/empty-state-add-button-test.ts diff --git a/web/app/components/document/sidebar/empty-state-add-button.gts b/web/app/components/document/sidebar/empty-state-add-button.gts index 379bb7fab..36bee05fe 100644 --- a/web/app/components/document/sidebar/empty-state-add-button.gts +++ b/web/app/components/document/sidebar/empty-state-add-button.gts @@ -7,7 +7,7 @@ import { on } from "@ember/modifier"; interface DocumentSidebarEmptyStateAddButtonSignature { Element: HTMLButtonElement; Args: { - editingIsDisabled?: boolean; + isReadOnly?: boolean; action: () => void; }; } @@ -16,12 +16,12 @@ export default class DocumentSidebarEmptyStateAddButton extends Component
    - {{#if @editingIsDisabled}} -
    + {{#if @isReadOnly}} +
    {{else}} - + diff --git a/web/app/components/document/sidebar/related-resources/list.hbs b/web/app/components/document/sidebar/related-resources/list.hbs index 1f91b44d4..9c562ddef 100644 --- a/web/app/components/document/sidebar/related-resources/list.hbs +++ b/web/app/components/document/sidebar/related-resources/list.hbs @@ -2,7 +2,7 @@
    {{#if this.listIsEmpty}} diff --git a/web/tests/integration/components/document/sidebar/empty-state-add-button-test.ts b/web/tests/integration/components/document/sidebar/empty-state-add-button-test.ts new file mode 100644 index 000000000..2f955abee --- /dev/null +++ b/web/tests/integration/components/document/sidebar/empty-state-add-button-test.ts @@ -0,0 +1,48 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "ember-qunit"; +import { TestContext, click, render } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; + +interface DocumentSidebarEmptyStateAddButtonTestContext extends TestContext { + action: () => void; + isReadOnly: boolean; +} + +module( + "Integration | Component | document/sidebar/empty-state-add-button", + function (hooks) { + setupRenderingTest(hooks); + + test("it runs the passed-in function on click", async function (this: DocumentSidebarEmptyStateAddButtonTestContext, assert) { + let count = 0; + + this.set("action", () => { + count++; + }); + + await render(hbs` + + `); + + await click("button"); + + assert.equal(count, 1); + }); + + test("it can be rendered read-only", async function (this: DocumentSidebarEmptyStateAddButtonTestContext, assert) { + this.set("action", () => {}); + + await render(hbs` + + `); + + assert.dom("button").doesNotExist(); + assert.dom(".field-toggle").hasClass("read-only"); + }); + }, +); From 3d1b4e2f90852fa35272b150f1570f47477db6d5 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 27 Oct 2023 13:20:29 -0400 Subject: [PATCH 3/3] Add `...attributes` --- .../document/sidebar/empty-state-add-button.gts | 6 +++--- .../document/sidebar/related-resources/list-test.ts | 8 +------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/web/app/components/document/sidebar/empty-state-add-button.gts b/web/app/components/document/sidebar/empty-state-add-button.gts index 36bee05fe..afa1c7d9a 100644 --- a/web/app/components/document/sidebar/empty-state-add-button.gts +++ b/web/app/components/document/sidebar/empty-state-add-button.gts @@ -5,7 +5,7 @@ import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon"; import { on } from "@ember/modifier"; interface DocumentSidebarEmptyStateAddButtonSignature { - Element: HTMLButtonElement; + Element: HTMLButtonElement | HTMLDivElement; Args: { isReadOnly?: boolean; action: () => void; @@ -17,11 +17,11 @@ export default class DocumentSidebarEmptyStateAddButton extends Component
    {{#if @isReadOnly}} -
    +
    {{else}} - + diff --git a/web/tests/integration/components/document/sidebar/related-resources/list-test.ts b/web/tests/integration/components/document/sidebar/related-resources/list-test.ts index d17d6efbd..3cd72e486 100644 --- a/web/tests/integration/components/document/sidebar/related-resources/list-test.ts +++ b/web/tests/integration/components/document/sidebar/related-resources/list-test.ts @@ -26,12 +26,6 @@ module( `); assert.dom(".related-resources-list").exists("list is rendered"); - - this.set("items", []); - - assert - .dom("[data-test-related-resources-list-empty-state]") - .exists("empty state is rendered when the list is empty"); }); test("it shows an empty state when the list is empty", async function (this: DocumentSidebarRelatedResourcesListTestContext, assert) { @@ -49,5 +43,5 @@ module( assert.dom("[data-test-related-resources-list-empty-state]").exists(); }); - } + }, );