maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the Copy for the "Overview" Tab and Its Modals (#16645)

Browse source 
* Updates the overview copy and over modal copy

* Updates E2E tests for Admin Member View overview fields

* Fixes copy on credit button in manageCredits.spec.js
This commit is contained in:
Julianna Tetreault 2022-02-25 07:17:00 -07:00 • committed by GitHub
parent d7993df25a
commit 5f26dc6809
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/views/admin/users/show/overview/_credits.html.erb
View file

@ -3,7 +3,7 @@
<%= crayons_icon_tag(:wallet, title: "Wallet", aria_hidden: true, class: "mr-2") %>
Credits
</h2>
<p class="color-secondary">Credits enable users to purchase classified listings from your site. <a href="https://admin.forem.com/docs/advanced-customization/config/credits" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about credits">Learn more</a></p>
<p class="color-secondary">Grant/remove credits to purchase classified listings. <a href="https://admin.forem.com/docs/advanced-customization/config/credits" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about credits">Learn more</a></p>
</header>
<div class="flex justify-between items-center">
<p data-testid="user-credits" class="fs-2xl fw-heavy"><%= @user.unspent_credits_count %></p>
@ -37,11 +37,11 @@
</div>
</div>
<div class="crayons-field">
<label for="balance-note" class="crayons-field__label">Why are you adjusting credits?</label>
<label for="balance-note" class="crayons-field__label">Add a note to this action:</label>
<%= f.text_area :new_note, id: "balance-note", size: 50, required: true, class: "crayons-textfield" %>
</div>
<div>
<button type="submit" class="c-btn c-btn--primary">Adjust</button>
<button type="submit" class="c-btn c-btn--primary">Adjust balance</button>
</div>
<% end %>
</div>

20
app/views/admin/users/show/overview/_organizations.html.erb
View file

@ -3,16 +3,16 @@
<%= crayons_icon_tag(:team, title: "Organizations", aria_hidden: true, class: "mr-2") %>
Organizations
</h2>
<p class="color-secondary">Assign roles to this member based on permissions. <a href="https://admin.forem.com/docs/managing-your-community/organization-pages#organization-roles" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about organizations">Learn more</a></p>
<p class="color-secondary">Add this member to organizations in your community. <a href="https://admin.forem.com/docs/managing-your-community/organization-pages#organization-roles" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about organizations">Learn more</a></p>
</header>
<% if @organization_memberships.load.empty? %>
<div class="flex justify-between items-center gap-4">
<p>This user is not a part of any organization yet.</p>
<p>Not part of any organization yet.</p>
<button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-trigger data-modal-title="Add organization" data-modal-size="small" data-modal-content-selector="#add-organization">Add organization</button>
</div>
<% else %>
<%# Used for aria-describedby on input fields, placed here to avoid duplicate IDs when mapping over orgs %>
<span class="screen-reader-only" id="edit-org-permission-description">Users can be assigned an Admin role or can remain a regular member of this organization.</span>
<span class="screen-reader-only" id="edit-org-permission-description">You can assign <%= @user.name %> to be an Admin or a regular member.</span>
<% @organization_memberships.each do |org_membership| %>
<div class="c-card c-card--interactive flex p-2 relative items-center mb-2 pl-3">
<div class="flex items-center gap-2 flex-1">
@ -23,7 +23,7 @@
<a href="<%= org_membership.organization.path %>" target="_blank" rel="noopener" class="c-link">
<%= org_membership.organization.name %>
</a>
<span class="color-secondary fw-normal">– <%= org_membership.type_of_user.capitalize %></span>
<span class="opacity-50">&bull;</span> <%= org_membership.type_of_user.capitalize %></span>
</h3>
</div>
<div class="c-card__revealable shrink-0">
@ -41,15 +41,15 @@
<div id="edit-organization-<%= org_membership.organization.id %>" class="hidden">
<%= form_with model: [:admin, org_membership], method: :patch, local: true do |f| %>
<div class="crayons-field mb-4">
<%= f.label "Permission level", class: "crayons-field__label", for: "edit_#{org_membership.organization.id}_type_of_user" %>
<p class="crayons-field__description">Users can be assigned an Admin role or can remain a regular member of this organization.</p>
<%= f.label "Role", class: "crayons-field__label", for: "edit_#{org_membership.organization.id}_type_of_user" %>
<p class="crayons-field__description">You can assign <%= @user.name %> to be an Admin or a regular member.</p>
<%= f.select :type_of_user, options_for_select(%w[member admin], selected: org_membership.type_of_user), {}, id: "edit_#{org_membership.organization.id}_type_of_user", class: "crayons-select", aria: { describedby: "edit-org-permission-description" } %>
</div>
<%= f.button "Update", class: "c-btn c-btn--primary", type: "submit" %>
<%= f.button "Submit", class: "c-btn c-btn--primary", type: "submit" %>
<% end %>
</div>
<% end %>
<button class="c-btn c-btn--secondary whitespace-nowrap w-100" type="button" data-modal-trigger data-modal-title="Add organization" data-modal-size="small" data-modal-content-selector="#add-organization">Add another organization</button>
<button class="c-btn c-btn--secondary whitespace-nowrap w-100" type="button" data-modal-trigger data-modal-title="Add organization" data-modal-size="small" data-modal-content-selector="#add-organization">Add organization</button>
<% end %>
<div id="add-organization" class="hidden">
@ -60,8 +60,8 @@
<%= f.text_field :organization_id, class: "crayons-textfield", size: 8, required: true, inputmode: "numeric", type: "number", placeholder: "1234" %>
</div>
<div class="crayons-field">
<%= f.label :type_of_user, "Permission level", class: "crayons-field__label" %>
<p id="add-org-permission-description" class="crayons-field__description">Users can be assigned an Admin role or can remain a regular member of this organization.</p>
<%= f.label :type_of_user, "Role", class: "crayons-field__label" %>
<p id="add-org-permission-description" class="crayons-field__description">You can assign <%= @user.name %> to be an Admin or a regular member.</p>
<%= f.select(:type_of_user, options_for_select(%w[member admin]), {}, class: "crayons-select", aria: { describedby: "add-org-permission-description" }) %>
</div>
<div>

20
app/views/admin/users/show/overview/_roles.html.erb
View file

@ -1,14 +1,14 @@
<header class="mb-4">
<h2 class="crayons-subtitle-2 mb-1 flex items-center">
<%= crayons_icon_tag(:badge, title: "Assigned roles", aria_hidden: true, class: "mr-2") %>
Assigned roles
<%= crayons_icon_tag(:badge, title: "Roles", aria_hidden: true, class: "mr-2") %>
Roles
</h2>
<p class="color-secondary">Assign roles to this member based on permissions. <a href="https://admin.forem.com/docs/forem-basics/user-roles" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about roles">Learn more</a></p>
<p class="color-secondary">Grant this member permissions by assigning a role. <a href="https://admin.forem.com/docs/forem-basics/user-roles" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about roles">Learn more</a></p>
</header>
<% unless @user.roles.any? %>
<div class="flex justify-between items-center">
<p>No special roles assigned yet.</p>
<button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-trigger data-modal-title="Add role" data-modal-size="m" data-modal-content-selector="#add-role">Add role</button>
<p>No roles assigned yet.</p>
<button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-trigger data-modal-title="Add role" data-modal-size="m" data-modal-content-selector="#add-role">Assign role</button>
</div>
<% else %>
<ul class="flex flex-wrap gap-2">
@ -25,7 +25,7 @@
<% else %>
<%= role_display_name(role) %>
<% end %>
<span data-testid="tooltip" class="crayons-tooltip__content">You can't remove this role...</span>
<span data-testid="tooltip" class="crayons-tooltip__content">You can't remove this role.</span>
</button>
<% else %>
<%= button_to url_for(action: :destroy, user_id: @user.id, role: role.name.to_sym, resource_type: role.resource_type), method: :delete, data: { confirm: "Are you sure?" }, class: "c-pill c-pill--action-icon" do %>
@ -40,7 +40,7 @@
<% end %>
</li>
<% end %>
<li><button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-trigger data-modal-title="Add role" data-modal-size="small" data-modal-content-selector="#add-role">Add role</button></li>
<li><button class="c-btn c-btn--secondary whitespace-nowrap" type="button" data-modal-trigger data-modal-title="Add role" data-modal-size="small" data-modal-content-selector="#add-role">Assign role</button></li>
</ul>
<% end %>
@ -50,11 +50,11 @@
<%= f.label :user_status, "Role", class: "crayons-field__label" %>
<% options = { "Base Roles" => Constants::Role::BASE_ROLES } %>
<% options["Special Roles"] = Constants::Role::SPECIAL_ROLES if current_user.super_admin? %>
<%= f.select(:user_status, grouped_options_for_select(options), { include_blank: "Select..." }, class: "crayons-select") %>
<%= f.select(:user_status, grouped_options_for_select(options), { include_blank: "Select role" }, class: "crayons-select") %>
</div>
<div class="crayons-field">
<%= f.label :note_for_current_role, "Reason", class: "crayons-field__label" %>
<%= f.text_area :note_for_current_role, required: true, class: "crayons-textfield", placeholder: "What's the reason for adding a role?" %>
<%= f.label :note_for_current_role, "Add a note to this action:", class: "crayons-field__label" %>
<%= f.text_area :note_for_current_role, required: true, class: "crayons-textfield", placeholder: "" %>
</div>
<div>
<%= f.button "Add", class: "c-btn c-btn--primary" %>

4
app/views/admin/users/show/overview/_tag_moderation.html.erb
View file

@ -1,9 +1,9 @@
<header class="mb-4">
<h2 class="crayons-subtitle-2 mb-1 flex items-center">
<%= crayons_icon_tag("mod-filled", title: "Mod", aria_hidden: true, class: "mr-2") %>
Tag moderation
Tags
</h2>
<p class="color-secondary">Assign tags to this member to moderate. <a href="https://admin.forem.com/docs/managing-your-community/tag-moderator-features" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about tag moderation">Learn more</a></p>
<p class="color-secondary">Add a tag that this member can moderate. <a href="https://admin.forem.com/docs/managing-your-community/tag-moderator-features" rel="noopener noreferer" target="_blank" class="c-link c-link--branded" aria-label="Learn more about tag moderation">Learn more</a></p>
</header>
<% moderated_tags = @user.roles.select { |role| role.name == "tag_moderator" } %>

12
cypress/integration/seededFlows/adminFlows/users/manageCredits.spec.js
View file

@ -34,9 +34,9 @@ describe('Manage User Credits', () => {
name: 'Amount of credits to add or remove',
}).type('10');
cy.findByRole('textbox', {
name: 'Why are you adjusting credits?',
name: 'Add a note to this action:',
}).type('some reason');
cy.findByRole('button', { name: 'Adjust' }).click();
cy.findByRole('button', { name: 'Adjust balance' }).click();
});
cy.getModal().should('not.exist');
@ -53,9 +53,9 @@ describe('Manage User Credits', () => {
name: 'Amount of credits to add or remove',
}).type('1');
cy.findByRole('textbox', {
name: 'Why are you adjusting credits?',
name: 'Add a note to this action:',
}).type('some reason');
cy.findByRole('button', { name: 'Adjust' }).click();
cy.findByRole('button', { name: 'Adjust balance' }).click();
});
cy.getModal().should('not.exist');
@ -74,9 +74,9 @@ describe('Manage User Credits', () => {
.as('credits')
.type('10');
cy.findByRole('textbox', {
name: 'Why are you adjusting credits?',
name: 'Add a note to this action:',
}).type('some reason');
cy.findByRole('button', { name: 'Adjust' }).click();
cy.findByRole('button', { name: 'Adjust balance' }).click();
});
cy.getModal().should('exist');

16
cypress/integration/seededFlows/adminFlows/users/manageOrganizations.spec.js
View file

@ -27,9 +27,7 @@ describe('Manage User Organziations', () => {
it(`should add a user to an organization`, () => {
cy.visit('/admin/users/3');
cy.findByText('This user is not a part of any organization yet.').should(
'be.visible',
);
cy.findByText('Not part of any organization yet.').should('be.visible');
openOrgModal().within(() => {
cy.findByRole('spinbutton', { name: 'Organization ID' }).type(1);
@ -55,9 +53,7 @@ describe('Manage User Organziations', () => {
it('should add a user to multiple organizations', () => {
cy.visit('/admin/users/3');
cy.findByText('This user is not a part of any organization yet.').should(
'be.visible',
);
cy.findByText('Not part of any organization yet.').should('be.visible');
openOrgModal().within(() => {
cy.findByRole('spinbutton', { name: 'Organization ID' }).type(1);
@ -68,7 +64,7 @@ describe('Manage User Organziations', () => {
'User was successfully added to Bachmanity',
);
openOrgModal('Add another organization').within(() => {
openOrgModal('Add organization').within(() => {
cy.findByRole('spinbutton', { name: 'Organization ID' }).type(2);
cy.findByRole('button', { name: 'Add organization' }).click();
});
@ -107,8 +103,8 @@ describe('Manage User Organziations', () => {
}).click();
cy.getModal().within(() => {
cy.findByRole('combobox', { name: 'Permission level' }).select('admin');
cy.findByRole('button', { name: 'Update' }).click();
cy.findByRole('combobox', { name: 'Role' }).select('admin');
cy.findByRole('button', { name: 'Submit' }).click();
});
verifyAndDismissUserUpdatedMessage(
@ -120,7 +116,7 @@ describe('Manage User Organziations', () => {
it(`should add a user to another organization`, () => {
cy.visit('/admin/users/2');
openOrgModal('Add another organization').within(() => {
openOrgModal('Add organization').within(() => {
cy.findByRole('spinbutton', { name: 'Organization ID' }).type(1);
cy.findByRole('button', { name: 'Add organization' }).click();
});

26
cypress/integration/seededFlows/adminFlows/users/manageRoles.spec.js
View file

@ -1,7 +1,7 @@
// More on roles, https://admin.forem.com/docs/forem-basics/user-roles
function openRolesModal() {
cy.getModal().should('not.exist');
cy.findByRole('button', { name: 'Add role' }).click();
cy.findByRole('button', { name: 'Assign role' }).click();
return cy.getModal();
}
@ -41,7 +41,9 @@ describe('Manage User Roles', () => {
);
openRolesModal().within(() => {
cy.findByRole('combobox', { name: 'Role' }).select('Warn');
cy.findByRole('textbox', { name: 'Reason' }).type('some reason');
cy.findByRole('textbox', { name: 'Add a note to this action:' }).type(
'some reason',
);
cy.findByRole('button', { name: 'Add' }).click();
});
@ -71,17 +73,19 @@ describe('Manage User Roles', () => {
openRolesModal().within(() => {
cy.findByRole('combobox', { name: 'Role' }).select('Super Admin');
cy.findByRole('textbox', { name: 'Reason' }).type('some reason');
cy.findByRole('textbox', { name: 'Add a note to this action:' }).type(
'some reason',
);
cy.findByRole('button', { name: 'Add' }).click();
});
cy.findByRole('button', {
name: `Super Admin You can't remove this role...`,
name: `Super Admin You can't remove this role.`,
})
.as('superAdminButton')
.click()
.within(() => {
cy.findByText(`You can't remove this role...`).should('exist');
cy.findByText(`You can't remove this role.`).should('exist');
});
cy.get('@superAdminButton').should('exist');
@ -95,7 +99,7 @@ describe('Manage User Roles', () => {
it('should not add a role if a reason is missing.', () => {
checkUserStatus('Good standing');
cy.findByText('No special roles assigned yet.').should('be.visible');
cy.findByText('No roles assigned yet.').should('be.visible');
openRolesModal().within(() => {
cy.findByRole('combobox', { name: 'Role' }).select('Warn');
@ -110,11 +114,13 @@ describe('Manage User Roles', () => {
});
it('should add multiple roles', () => {
cy.findByText('No special roles assigned yet.').should('be.visible');
cy.findByText('No roles assigned yet.').should('be.visible');
openRolesModal().within(() => {
cy.findByRole('combobox', { name: 'Role' }).select('Warn');
cy.findByRole('textbox', { name: 'Reason' }).type('some reason');
cy.findByRole('textbox', { name: 'Add a note to this action:' }).type(
'some reason',
);
cy.findByRole('button', { name: 'Add' }).click();
});
@ -128,7 +134,9 @@ describe('Manage User Roles', () => {
openRolesModal().within(() => {
cy.findByRole('combobox', { name: 'Role' }).select('Comment Suspend');
cy.findByRole('textbox', { name: 'Reason' }).type('some reason');
cy.findByRole('textbox', { name: 'Add a note to this action:' }).type(
'some reason',
);
cy.findByRole('button', { name: 'Add' }).click();
});