From b75b082cd6cdbecc1256711130006310f5932bec Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 6 Oct 2023 11:36:14 -0400 Subject: [PATCH 1/2] Improve readOnly states for non-owners --- web/app/components/document/sidebar.hbs | 2 +- .../document/sidebar/related-resources.hbs | 1 + .../sidebar/related-resources/list.hbs | 26 ++++++++++++------- .../sidebar/related-resources/list.ts | 1 + web/app/components/editable-field.hbs | 2 +- web/app/styles/components/editable-field.scss | 11 +++----- 6 files changed, 23 insertions(+), 20 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 143d8137c..89dde2cb7 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -129,7 +129,7 @@ @isSaving={{this.saveIsRunning}} @isReadOnly={{not this.isOwner}} @name="summary" - @placeholder="Enter a summary" + @placeholder={{if this.isOwner "Enter a summary"}} /> diff --git a/web/app/components/document/sidebar/related-resources.hbs b/web/app/components/document/sidebar/related-resources.hbs index 5a38c32ca..474a7bcc3 100644 --- a/web/app/components/document/sidebar/related-resources.hbs +++ b/web/app/components/document/sidebar/related-resources.hbs @@ -29,6 +29,7 @@ @items={{rr.items}} @itemLimit={{@itemLimit}} @showModal={{rr.showModal}} + @editingIsDisabled={{@editingIsDisabled}} > <:resource as |r|>
- - - - - - + {{#if @editingIsDisabled}} +
+ +
+ {{else}} + + + + + + + {{/if}}
{{else}} diff --git a/web/app/components/document/sidebar/related-resources/list.ts b/web/app/components/document/sidebar/related-resources/list.ts index c266be028..20b2be86c 100644 --- a/web/app/components/document/sidebar/related-resources/list.ts +++ b/web/app/components/document/sidebar/related-resources/list.ts @@ -16,6 +16,7 @@ interface DocumentSidebarRelatedResourcesListComponentSignature { items: any[]; itemLimit?: number; showModal?: () => void; + editingIsDisabled?: boolean; }; Blocks: { resource: [resource: any]; diff --git a/web/app/components/editable-field.hbs b/web/app/components/editable-field.hbs index 7ee80ac5f..d4468f6ca 100644 --- a/web/app/components/editable-field.hbs +++ b/web/app/components/editable-field.hbs @@ -72,7 +72,7 @@ {{/if}} {{#if (or @isReadOnly @isSaving)}} -
+
Date: Fri, 6 Oct 2023 12:09:36 -0400 Subject: [PATCH 2/2] Add tests --- .../components/document/sidebar-test.ts | 75 +++++++++++++++++++ .../sidebar/related-resources-test.ts | 20 +++-- .../components/editable-field-test.ts | 2 +- 3 files changed, 91 insertions(+), 6 deletions(-) create mode 100644 web/tests/integration/components/document/sidebar-test.ts diff --git a/web/tests/integration/components/document/sidebar-test.ts b/web/tests/integration/components/document/sidebar-test.ts new file mode 100644 index 000000000..9ebc9f9d5 --- /dev/null +++ b/web/tests/integration/components/document/sidebar-test.ts @@ -0,0 +1,75 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "ember-qunit"; +import { render } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; +import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support"; +import { authenticateSession } from "ember-simple-auth/test-support"; +import AuthenticatedUserService, { + AuthenticatedUser, +} from "hermes/services/authenticated-user"; +import { HermesDocument } from "hermes/types/document"; +import { HermesDocumentType } from "hermes/types/document-type"; + +const SUMMARY_CONTAINER = "[data-test-document-summary]"; +const SUMMARY_EMPTY_STATE = `${SUMMARY_CONTAINER} .empty-state-text`; + +interface DocumentSidebarComponentTestContext extends MirageTestContext { + profile: AuthenticatedUser; + document: HermesDocument; + docType: Promise; + deleteDraft: (docID: string) => void; + isCollapsed: boolean; + toggleCollapsed: () => void; +} + +module("Integration | Component | document/sidebar", function (hooks) { + setupRenderingTest(hooks); + setupMirage(hooks); + + hooks.beforeEach(async function (this: DocumentSidebarComponentTestContext) { + await authenticateSession({}); + + const authenticatedUser = this.owner.lookup( + "service:authenticated-user", + ) as AuthenticatedUserService; + + await authenticatedUser.loadInfo.perform(); + + this.set("profile", authenticatedUser.info); + this.server.create("document", { + owners: ["testuser@example.com"], + isDraft: false, + }); + + this.set("document", this.server.schema.document.first().attrs); + this.set("docType", new Promise(() => {})); + this.set("toggleCollapsed", () => {}); + this.set("deleteDraft", (docID: string) => {}); + }); + + test("it shows the correct summary empty state based on if the viewer is the doc owner", async function (this: DocumentSidebarComponentTestContext, assert) { + await render(hbs` + + `); + + // By default the viewer is the doc owner + assert.dom(SUMMARY_EMPTY_STATE).containsText("Enter a summary"); + + // Set the doc owner to someone else + this.set( + "document", + this.server.schema.document.first().update({ + owners: ["foo@bar.com"], + }), + ); + + assert.dom(SUMMARY_EMPTY_STATE).containsText("None"); + }); +}); diff --git a/web/tests/integration/components/document/sidebar/related-resources-test.ts b/web/tests/integration/components/document/sidebar/related-resources-test.ts index eb724c0e6..8b9fe74ce 100644 --- a/web/tests/integration/components/document/sidebar/related-resources-test.ts +++ b/web/tests/integration/components/document/sidebar/related-resources-test.ts @@ -50,6 +50,7 @@ const TOOLTIP_SELECTOR = ".hermes-tooltip"; interface DocumentSidebarRelatedResourcesTestContext extends MirageTestContext { document: HermesDocument; body: HTMLElement; + editingIsDisabled: boolean; } module( @@ -78,12 +79,14 @@ module( this.set("body", bodyDiv); }); - test("the empty state is clickable to add a resource", async function (this: DocumentSidebarRelatedResourcesTestContext, assert) { + test("the empty state is conditionally clickable to add a resource", async function (this: DocumentSidebarRelatedResourcesTestContext, assert) { + this.set("editingIsDisabled", true); + await render(hbs` `); - const emptyStateSelector = - "[data-test-related-resources-list-empty-state]"; + const readOnlyValue = "div.field-toggle.read-only"; + const interactiveEmptyState = "button.field-toggle"; + + assert.dom(readOnlyValue).hasText("None"); + assert.dom(interactiveEmptyState).doesNotExist(); + + // Enable editing + this.set("editingIsDisabled", false); - assert.dom(emptyStateSelector).hasText("None"); + assert.dom(readOnlyValue).doesNotExist(); + assert.dom(interactiveEmptyState).hasText("None"); await click("[data-test-related-resources-list-empty-state]"); diff --git a/web/tests/integration/components/editable-field-test.ts b/web/tests/integration/components/editable-field-test.ts index 050c8f0f8..7a07c9e52 100644 --- a/web/tests/integration/components/editable-field-test.ts +++ b/web/tests/integration/components/editable-field-test.ts @@ -117,7 +117,7 @@ module("Integration | Component | editable-field", function (hooks) { ); assert - .dom("div.field-toggle") + .dom("div.field-toggle.read-only") .exists("the element is rendered as a div when editing is disabled"); });