add org analytics menu if user has organizations (#13995)
* add organizations menu to analytics page * Update app/views/dashboards/analytics.erb Co-authored-by: rhymes <github@rhymes.dev> * replace querySelector with getElementsByClassName for better performance * Update app/javascript/packs/analyticsDashboard.js Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Update app/views/dashboards/analytics.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * refactor analytics view and add specs * skip flakey analyticsNavigation spec Co-authored-by: rhymes <github@rhymes.dev> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
parent
281fdc499c
commit
dbdd24c729
4 changed files with 95 additions and 4 deletions
|
|
@ -1,11 +1,26 @@
|
|||
import { initCharts } from '../analytics/dashboard';
|
||||
|
||||
function renderOrgData() {
|
||||
const organizationsArray = Array.from(
|
||||
document.getElementsByClassName('organization'),
|
||||
);
|
||||
const activeOrg = organizationsArray.find(
|
||||
(org) => org.getAttribute('aria-current') === 'page',
|
||||
);
|
||||
const chartData = activeOrg.dataset.organizationId
|
||||
? activeOrg.dataset.organizationId
|
||||
: null;
|
||||
|
||||
initCharts({ organizationId: chartData });
|
||||
}
|
||||
|
||||
function initDashboard() {
|
||||
const activeOrg = document.querySelector('.organization.active');
|
||||
if (activeOrg) {
|
||||
initCharts({ organizationId: activeOrg.dataset.organizationId });
|
||||
} else {
|
||||
const organizationsMenu = document.getElementsByClassName('organization')[0];
|
||||
|
||||
if (!organizationsMenu) {
|
||||
initCharts({ organizationId: null });
|
||||
} else {
|
||||
renderOrgData();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,34 @@
|
|||
|
||||
<main id="main-content">
|
||||
<div class="dashboard-container analytics-container crayons-layout" id="user-dashboard">
|
||||
<% if @organizations.any? %>
|
||||
<nav aria-label="Dashboards">
|
||||
<ul class="list-none">
|
||||
<li>
|
||||
<a href="<%= dashboard_path %>" class="rounded-btn crayons-link--block rounded-btn--transparent">👈 Back to Main Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="rounded-btn crayons-link--block organization"
|
||||
href="<%= dashboard_analytics_path %>"
|
||||
<%= params[:org_id] ? "" : 'aria-current="page"'.html_safe %>>
|
||||
Your Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<% @organizations.each do |org| %>
|
||||
<li>
|
||||
<a
|
||||
class="rounded-btn crayons-link--block organization"
|
||||
href="<%= dashboard_analytics_org_path(org.id) %>"
|
||||
data-organization-id="<%= org.id %>"
|
||||
<%= params[:org_id].to_i == org.id ? 'aria-current="page"'.html_safe : "" %>>
|
||||
<%= org.name %> Analytics Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-card p-3 mt-5">
|
||||
<h1 class="fs-4xl fw-medium">Analytics Dashboard for <%= @user_or_org.name %></h1>
|
||||
<p>Welcome to the Analytics Dashboard, the home of in-depth user metrics so that authors can make data-driven decisions about the <%= Settings::Community.member_label %> ecosystem.</p>
|
||||
|
|
|
|||
|
|
@ -43,4 +43,33 @@ describe('Analytics navigation', () => {
|
|||
.findByRole('button', { name: 'Infinity' })
|
||||
.should('have.attr', 'aria-current', 'page');
|
||||
});
|
||||
|
||||
it('should hide organizations menu', () => {
|
||||
cy.findByRole('navigation', { name: 'Organizations menu' }).should(
|
||||
'not.exist',
|
||||
);
|
||||
});
|
||||
|
||||
describe.skip('when user is admin of an organization', () => {
|
||||
beforeEach(() => {
|
||||
cy.testSetup();
|
||||
cy.fixture('users/adminUser.json').as('adminUser');
|
||||
|
||||
cy.get('@adminUser').then((user) => {
|
||||
cy.loginUser(user).then(() => {
|
||||
cy.visit('/dashboard/analytics');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should show organizations menu', () => {
|
||||
cy.findByRole('navigation', { name: 'Dashboards' }).should('exist');
|
||||
});
|
||||
|
||||
it('should navigate to correct organization analytics dashboard', () => {
|
||||
cy.findByText('Bachmanity Analytics Dashboard').click();
|
||||
|
||||
cy.contains('h1', 'Analytics Dashboard for Bachmanity');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,6 +56,25 @@ admin_user = User.find_by(email: "admin@forem.local")
|
|||
|
||||
##############################################################################
|
||||
|
||||
seeder.create_if_none(Organization) do
|
||||
organization = Organization.create!(
|
||||
name: "Bachmanity",
|
||||
summary: Faker::Company.bs,
|
||||
remote_profile_image_url: logo = Faker::Company.logo,
|
||||
nav_image: logo,
|
||||
url: Faker::Internet.url,
|
||||
slug: "org#{rand(10_000)}",
|
||||
)
|
||||
|
||||
OrganizationMembership.create!(
|
||||
user_id: admin_user.id,
|
||||
organization_id: organization.id,
|
||||
type_of_user: "admin",
|
||||
)
|
||||
end
|
||||
|
||||
##############################################################################
|
||||
|
||||
seeder.create_if_doesnt_exist(User, "email", "change-password-user@forem.com") do
|
||||
User.create!(
|
||||
name: "Change Password User",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue