Improve sidebar affordances

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"}}
           />
         </div>
       </div>

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|>
         <Document::Sidebar::RelatedResources::ListItem

web/app/components/document/sidebar/related-resources/list.hbs

@@ -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}}

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];

web/app/components/editable-field.hbs

@@ -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}}

web/app/styles/components/editable-field.scss

@@ -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;
@@ -26,7 +26,7 @@
   }
 
   &.button-affordance {
-    .field-toggle:not([disabled], .disabled) {
+    .field-toggle:not(.read-only) {
       &:hover,
       &:focus-visible,
       &:focus {
@@ -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 {

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<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");
+  });
+});

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,23 +79,32 @@ 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<DocumentSidebarRelatedResourcesTestContext>(hbs`
         <Document::Sidebar::RelatedResources
           @productArea={{this.document.product}}
           @objectID={{this.document.objectID}}
-          @allowAddingExternalLinks={{true}}
+          @editingIsDisabled={{this.editingIsDisabled}}
           @headerTitle="Test title"
           @modalHeaderTitle="Add related resource"
           @modalInputPlaceholder="Paste a URL or search documents..."
           @scrollContainer={{this.body}}
         />
       `);
 
-      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]");
 

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");
   });