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:
Monica Mateiu 2021-06-23 13:35:23 +01:00 committed by GitHub
parent 281fdc499c
commit dbdd24c729
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 95 additions and 4 deletions

View file

@ -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();
}
}

View file

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

View file

@ -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');
});
});
});

View file

@ -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",