From dbdd24c729ae62095e7ffdd67a3f42489c515841 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@gmail.com>
Date: Wed, 23 Jun 2021 13:35:23 +0100
Subject: [PATCH] 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>
---
 app/javascript/packs/analyticsDashboard.js    | 23 ++++++++++++---
 app/views/dashboards/analytics.erb            | 28 ++++++++++++++++++
 .../analyticsNavigation.spec.js               | 29 +++++++++++++++++++
 spec/support/seeds/seeds_e2e.rb               | 19 ++++++++++++
 4 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/app/javascript/packs/analyticsDashboard.js b/app/javascript/packs/analyticsDashboard.js
index a6719956e..99177a69a 100644
--- a/app/javascript/packs/analyticsDashboard.js
+++ b/app/javascript/packs/analyticsDashboard.js
@@ -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();
   }
 }
 
diff --git a/app/views/dashboards/analytics.erb b/app/views/dashboards/analytics.erb
index 50dee6154..2717a4de3 100644
--- a/app/views/dashboards/analytics.erb
+++ b/app/views/dashboards/analytics.erb
@@ -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>
diff --git a/cypress/integration/analyticsFlows/analyticsNavigation.spec.js b/cypress/integration/analyticsFlows/analyticsNavigation.spec.js
index c97002429..1fb68d8f0 100644
--- a/cypress/integration/analyticsFlows/analyticsNavigation.spec.js
+++ b/cypress/integration/analyticsFlows/analyticsNavigation.spec.js
@@ -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');
+    });
+  });
 });
diff --git a/spec/support/seeds/seeds_e2e.rb b/spec/support/seeds/seeds_e2e.rb
index d01a990d3..ea83f8af6 100644
--- a/spec/support/seeds/seeds_e2e.rb
+++ b/spec/support/seeds/seeds_e2e.rb
@@ -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",