Skip to content
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

Jump to bottom

Add read-only draft-visibility icon #622

Merged
merged 1 commit into from
Mar 2, 2024
Merged

Add read-only draft-visibility icon #622

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
39 changes: 25 additions & 14 deletions web/app/components/document/sidebar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@
</:item>
</X::DropdownList>

{{! visibility toggle }}
{{#if (and this.isDraft this.isOwner (not this.editingIsDisabled))}}
{{! visibility toggle/icon }}
{{#if this.isDraft}}
<X::DropdownList
data-test-draft-visibility-dropdown
@items={{this.draftVisibilityOptions}}
Expand All @@ -112,18 +112,29 @@
class="w-[350px]"
>
<:anchor as |dd|>
<dd.ToggleAction
data-test-draft-visibility-toggle
data-test-icon={{this.draftVisibilityIcon}}
class="quarternary-button draft-visibility-button z-10 flex items-center"
{{tooltip
this.toggleDraftVisibilityTooltipText
placement="bottom"
}}
@hasChevron={{true}}
>
<FlightIcon @name={{this.draftVisibilityIcon}} />
</dd.ToggleAction>
{{#if this.isOwner}}
<dd.ToggleAction
data-test-draft-visibility-toggle
data-test-icon={{this.draftVisibilityIcon}}
class="quarternary-button draft-visibility-button z-10"
disabled={{this.editingIsDisabled}}
{{tooltip
this.toggleDraftVisibilityTooltipText
placement="bottom"
}}
@hasChevron={{true}}
>
<FlightIcon @name={{this.draftVisibilityIcon}} />
</dd.ToggleAction>
{{else}}
<div
data-test-draft-visibility-read-only
{{tooltip "Shareable draft" placement="bottom"}}
class="draft-visibility-button items-center text-color-foreground-faint"
>
<FlightIcon @name="enterprise" />
</div>
{{/if}}
</:anchor>
<:item as |dd|>
<dd.Action
Expand Down
2 changes: 1 addition & 1 deletion web/app/styles/components/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
}

.draft-visibility-button {
@apply px-2.5;
@apply flex items-center px-2.5;
// match the height of the header buttons
@apply h-[38px];
// offset the extra height relative to the badge
Expand Down
9 changes: 7 additions & 2 deletions web/tests/acceptance/authenticated/document-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const TOOLTIP_SELECTOR = ".hermes-tooltip";
const DRAFT_VISIBILITY_DROPDOWN_SELECTOR =
"[data-test-draft-visibility-dropdown]";
const DRAFT_VISIBILITY_TOGGLE_SELECTOR = "[data-test-draft-visibility-toggle]";
const DRAFT_VISIBILITY_READ_ONLY = "[data-test-draft-visibility-read-only]";
const COPY_URL_BUTTON_SELECTOR = "[data-test-sidebar-copy-url-button]";
const DRAFT_VISIBILITY_OPTION_SELECTOR = "[data-test-draft-visibility-option]";
const SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR = `${DRAFT_VISIBILITY_DROPDOWN_SELECTOR} li:nth-child(2)`;
Expand Down Expand Up @@ -654,6 +655,10 @@ module("Acceptance | authenticated/document", function (hooks) {
await visit("/document/1?draft=true");

assertEditingIsDisabled(assert);

assert
.dom(DRAFT_VISIBILITY_READ_ONLY)
.exists("draft visibility is shown in a read-only format");
});

test("non-owners can't edit the status of a doc", async function (this: AuthenticatedDocumentRouteTestContext, assert) {
Expand Down Expand Up @@ -1087,7 +1092,7 @@ module("Acceptance | authenticated/document", function (hooks) {
.doesNotExist("no add related resource option");

assert.dom(PRODUCT_SELECT_SELECTOR).doesNotExist("no product select");
assert.dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR).doesNotExist();
assert.dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR).isDisabled();

assert
.dom(DISABLED_FOOTER_H5)
Expand Down Expand Up @@ -1121,7 +1126,7 @@ module("Acceptance | authenticated/document", function (hooks) {
.doesNotExist("no add related resource option");

assert.dom(PRODUCT_SELECT_SELECTOR).doesNotExist("no product select");
assert.dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR).doesNotExist();
assert.dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR).isDisabled();

assert
.dom(DISABLED_FOOTER_H5)
Expand Down
Loading