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

Implement Tabs for the Admin Member Detail View (#16640)

Browse source 
* WIP: Adds tabs to the Admin Member Detail View

* WIP: Adds tabs in the least elegant way to Admin Member Detail View

* WIP: Comments out unused code

* WIP: Initial code set up for tabs

* feat: add a tab param to the route

* feat: set the current tab and direct to the overview tab in all other cases

* chore: remove all other unused code

* Renames @tab to @current_tab and MemberDetails to UserDetails

* Removes unused route and reverts renaming of params

* Removes unused route from admin.rb

* Adds an E2E test that tests tabbing through Admin Member Detail tabs

* Updates navigateTabs E2E and _tabs.html.erb per feedback

* Updates tnavigateTabs.spec.js

* Updates navigateTabs.spec.js per Suzannes suggestion :)

* Removes useless comment from Admin::UsersController

Co-authored-by: Ridhwana <ridhwana.khan16@gmail.com>
This commit is contained in:
Julianna Tetreault 2022-02-18 10:47:53 -07:00 • committed by GitHub
parent b358c3810c
commit b8a87b842b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 73 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/controllers/admin/users_controller.rb
View file

@ -37,6 +37,7 @@ module Admin
@user = User.find(params[:id])
if FeatureFlag.enabled?(:admin_member_view)
set_current_tab(params[:tab])
set_feedback_messages
set_related_reactions
end
@ -300,5 +301,13 @@ module Admin
credit_params
end
def set_current_tab(current_tab = "overview")
@current_tab = if current_tab.in? Constants::UserDetails::TAB_LIST.map(&:downcase)
current_tab
else
"overview"
end
end
end
end

11
app/lib/constants/user_details.rb Normal file
View file

@ -0,0 +1,11 @@
module Constants
module UserDetails
TAB_LIST = %w[
Overview
Notes
Emails
Reports
Flags
].freeze
end
end

12
app/views/admin/users/show.html.erb
View file

@ -1,10 +1,8 @@
<%# TODO: incorporate a tab component. For now you have to manually change the value %>
<% current_tab = "overview" # overview|emails|notes|reports|flags %>
<% if FeatureFlag.enabled?(:admin_member_view) %>
<%= render "admin/users/show/profile" %>
<%= render "admin/users/show/tabs" %>
<% if current_tab == 'overview' %>
<% if @current_tab == "overview" %>
<div class="crayons-card p-3 s:p-4 m:p-7">
<%= render "admin/users/show/overview/stats" if @user.registered %>
@ -30,7 +28,7 @@
</div>
</div>
</div>
<% elsif current_tab == 'notes' %>
<% elsif @current_tab == "notes" %>
<section class="flex flex-col m:flex-row gap-4">
<div class="crayons-card p-3 s:p-4 m:p-7 flex-1">
<%= render "admin/users/show/notes/form" %>
@ -39,7 +37,7 @@
<%= render "admin/users/show/notes/index" %>
</div>
</section>
<% elsif current_tab == 'emails' %>
<% elsif @current_tab == "emails" %>
<%= render "admin/users/show/emails/verification" %>
<section class="flex flex-col m:flex-row gap-4">
<div class="crayons-card p-3 s:p-4 m:p-7 flex-1">
@ -49,11 +47,11 @@
<%= render "admin/users/show/emails/index" %>
</div>
</section>
<% elsif current_tab == 'reports' %>
<% elsif @current_tab == "reports" %>
<section class="crayons-card p-3 s:p-4 m:p-7">
<%= render "admin/users/show/reports/index" %>
</section>
<% elsif current_tab == 'flags' %>
<% elsif @current_tab == "flags" %>
<section class="crayons-card p-3 s:p-4 m:p-7">
<%= render "admin/users/show/flags/index" %>
</section>

10
app/views/admin/users/show/_tabs.html.erb
View file

@ -1,9 +1,9 @@
<nav class="mb-2" aria-label="Member details">
<ul class="crayons-navigation crayons-navigation--horizontal">
<li><a href="#" class="crayons-navigation__item crayons-navigation__item--current" aria-label="Member overview" aria-current="page">Overview</a></li>
<li><a href="#" class="crayons-navigation__item">Notes</a></li>
<li><a href="#" class="crayons-navigation__item">Emails</a></li>
<li><a href="#" class="crayons-navigation__item">Reports</a></li>
<li><a href="#" class="crayons-navigation__item">Flags</a></li>
<li><%= link_to "Overview", admin_user_path(@user.id), class: "crayons-navigation__item #{'crayons-navigation__item crayons-navigation__item--current' if @current_tab == 'overview'}", aria: @current_tab == "overview" ? { current: "page" } : {} %></li>
<li><%= link_to "Notes", admin_user_path(@user.id, tab: :notes), class: "crayons-navigation__item #{'crayons-navigation__item crayons-navigation__item--current' if @current_tab == 'notes'}", aria: @current_tab == "notes" ? { current: "page" } : {} %></li>
<li><%= link_to "Emails", admin_user_path(@user.id, tab: :emails), class: "crayons-navigation__item #{'crayons-navigation__item crayons-navigation__item--current' if @current_tab == 'emails'}", aria: @current_tab == "emails" ? { current: "page" } : {} %></li></li>
<li><%= link_to "Reports", admin_user_path(@user.id, tab: :reports), class: "crayons-navigation__item #{'crayons-navigation__item crayons-navigation__item--current' if @current_tab == 'reports'}", aria: @current_tab == "reports" ? { current: "page" } : {} %></li></li>
<li><%= link_to "Flags", admin_user_path(@user.id, tab: :flags), class: "crayons-navigation__item #{'crayons-navigation__item crayons-navigation__item--current' if @current_tab == 'flags'}", aria: @current_tab == "flags" ? { current: "page" } : {} %></li></li>
</ul>
</nav>

43
cypress/integration/seededFlows/adminFlows/users/navigateTabs.spec.js Normal file
View file

@ -0,0 +1,43 @@
describe('Navigate User Tabs', () => {
describe('As an admin', () => {
beforeEach(() => {
cy.testSetup();
cy.fixture('users/adminUser.json').as('user');
cy.get('@user').then((user) => {
cy.loginAndVisit(user, '/admin/users/2');
});
});
it(`navigates to the "Overview" tab`, () => {
cy.findByRole('navigation', { name: 'Member details' }).within(() => {
cy.findByRole('link', { name: /Overview/i }).should('exist');
cy.findByRole('link', { name: /Overview/i }).click();
cy.url().should('not.contain', 'tab=');
});
});
it(`navigates to the "Notes" tab`, () => {
cy.findByRole('link', { name: /Notes/i }).should('exist');
cy.findByRole('link', { name: /Notes/i }).click();
cy.url().should('contain', '/admin/users/2?tab=notes');
});
it(`navigates to the "Emails" tab`, () => {
cy.findByRole('link', { name: /Emails/i }).should('exist');
cy.findByRole('link', { name: /Emails/i }).click();
cy.url().should('contain', '/admin/users/2?tab=emails');
});
it(`navigates to the "Reports" tab`, () => {
cy.findByRole('link', { name: /Reports/i }).should('exist');
cy.findByRole('link', { name: /Reports/i }).click();
cy.url().should('contain', '/admin/users/2?tab=reports');
});
it(`navigates to the "Flags" tab`, () => {
cy.findByRole('link', { name: /Flags/i }).should('exist');
cy.findByRole('link', { name: /Flags/i }).click();
cy.url().should('contain', '/admin/users/2?tab=flags');
});
});
});