Skip to content

Commit

Permalink
Merge branch 'jeffdaley/read-only-editable-fields' into jeffdaley/exp…
Browse files Browse the repository at this point in the history
…lore-projects
  • Loading branch information
jeffdaley committed Oct 6, 2023
2 parents f376c43 + 715be5c commit 9b9105c
Show file tree
Hide file tree
Showing 9 changed files with 671 additions and 21 deletions.
2 changes: 1 addition & 1 deletion web/app/components/document/sidebar.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
@isSaving={{this.saveIsRunning}}
@isReadOnly={{not this.isOwner}}
@name="summary"
@placeholder="Enter a summary"
@placeholder={{if this.isOwner "Enter a summary"}}
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions web/app/components/document/sidebar/related-resources.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
@items={{rr.items}}
@itemLimit={{@itemLimit}}
@showModal={{rr.showModal}}
@editingIsDisabled={{@editingIsDisabled}}
>
<:resource as |r|>
<Document::Sidebar::RelatedResources::ListItem
Expand Down
26 changes: 16 additions & 10 deletions web/app/components/document/sidebar/related-resources/list.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,22 @@
{{#if this.listIsEmpty}}
<div class="editable-field-container">
<div class="editable-field button-affordance">
<Action
data-test-related-resources-list-empty-state
{{on "click" this.showModal}}
class="field-toggle group pl-[5px]"
>
<EmptyStateText />
<span class="edit-affordance light-gray">
<FlightIcon @name="plus" class="text-color-foreground-faint" />
</span>
</Action>
{{#if @editingIsDisabled}}
<div class="field-toggle read-only pl-[5px]">
<EmptyStateText />
</div>
{{else}}
<Action
data-test-related-resources-list-empty-state
{{on "click" this.showModal}}
class="field-toggle group pl-[5px]"
>
<EmptyStateText />
<span class="edit-affordance light-gray">
<FlightIcon @name="plus" class="text-color-foreground-faint" />
</span>
</Action>
{{/if}}
</div>
</div>
{{else}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface DocumentSidebarRelatedResourcesListComponentSignature {
items: any[];
itemLimit?: number;
showModal?: () => void;
editingIsDisabled?: boolean;
};
Blocks: {
resource: [resource: any];
Expand Down
2 changes: 1 addition & 1 deletion web/app/components/editable-field.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
</div>
{{/if}}
{{#if (or @isReadOnly @isSaving)}}
<div class="field-toggle">
<div class="field-toggle read-only">
<EditableField::ReadValue
@tag={{@tag}}
@value={{this.value}}
Expand Down
11 changes: 3 additions & 8 deletions web/app/styles/components/editable-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
}

.field-toggle.field-toggle:not([disabled], .disabled) {
.field-toggle.field-toggle:not(.read-only) {
&:hover,
&:focus-visible &:focus {
@apply bg-transparent;
Expand All @@ -26,7 +26,7 @@
}

&.button-affordance {
.field-toggle:not([disabled], .disabled) {
.field-toggle:not(.read-only) {
&:hover,
&:focus-visible,
&:focus {
Expand All @@ -46,12 +46,7 @@
@apply min-h-[36px];
@apply break-words;

&.disabled,
&:disabled {
@apply cursor-auto items-center;
}

&:not([disabled], .disabled) {
&:not(.read-only) {
&:hover,
&:focus-visible,
&:focus {
Expand Down
75 changes: 75 additions & 0 deletions web/tests/integration/components/document/sidebar-test.ts
Original file line number Diff line number Diff line change
@@ -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<HermesDocumentType>;
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: ["[email protected]"],
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<DocumentSidebarComponentTestContext>(hbs`
<Document::Sidebar
@profile={{this.profile}}
@document={{this.document}}
@docType={{this.docType}}
@isCollapsed={{false}}
@toggleCollapsed={{this.toggleCollapsed}}
@deleteDraft={{this.deleteDraft}}
/>
`);

// 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: ["[email protected]"],
}),
);

assert.dom(SUMMARY_EMPTY_STATE).containsText("None");
});
});
Loading

0 comments on commit 9b9105c

Please sign in to comment.