Add admin overview page (#12726)
* Add admin overview page * Rename admin_portals spec * Fix admin nav bug * Add ahoy tracking to admin overview * Fix PR Feedback Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com> * Make decorative element more visible * Remove inline layout styles Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
This commit is contained in:
Jacob Herrington
GitHub
parent
73125c0795
commit
92217be4ed
13 changed files with 134 additions and 87 deletions
|
|
@ -1,6 +0,0 @@
|
|||
module Admin
|
||||
class AdminPortalsController < Admin::ApplicationController
|
||||
layout "admin"
|
||||
def index; end
|
||||
end
|
||||
end
|
||||
6
app/controllers/admin/overview_controller.rb
Normal file
6
app/controllers/admin/overview_controller.rb
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module Admin
|
||||
class OverviewController < Admin::ApplicationController
|
||||
layout "admin"
|
||||
def index; end
|
||||
end
|
||||
end
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
module AdminHelper
|
||||
# This is used in app/views/admin/shared/_navbar.html.erb to build the
|
||||
# side navbar in alphabetical order. It's also used to display the "menu"
|
||||
# in app/vews/admin/admin_portals/index.html.erb.
|
||||
# side navbar in alphabetical order.
|
||||
# If you add an item before "config", please update the insert call in
|
||||
# admin_menu_items below.
|
||||
MENU_ITEMS = [
|
||||
|
|
|
|||
20
app/javascript/admin/controllers/ahoy_controller.js
Normal file
20
app/javascript/admin/controllers/ahoy_controller.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { Controller } from 'stimulus';
|
||||
import ahoy from 'ahoy.js';
|
||||
|
||||
ahoy.configure({
|
||||
cookies: false,
|
||||
trackVisits: false,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
export default class AhoyController extends Controller {
|
||||
trackOverviewLink(event) {
|
||||
event.preventDefault();
|
||||
let properties = {
|
||||
action: event.type,
|
||||
target: event.target.toString(),
|
||||
};
|
||||
ahoy.track('Admin Overview Link Clicked', properties);
|
||||
window.location.href = event.target.href;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
class AdminPortal < ApplicationRecord
|
||||
class Overview < ApplicationRecord
|
||||
# This class exists to take advantage of Rolify for limiting authorization
|
||||
# on internal reports.
|
||||
# NOTE: It is not backed by a database table and should not be expected to
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<div>
|
||||
<div class="tag-card crayons-card p-4 m:p-6 m:pt-4 mb-4 flex flex-row relative">
|
||||
<div class="mr-8">
|
||||
<div class="crayons-field__description">Last deployed</div>
|
||||
<div><%= ForemInstance.deployed_at %></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="crayons-field__description">Latest Commit ID</div>
|
||||
<div><%= ForemInstance.latest_commit_id || "Not Available" %></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 m:gap-4 l:gap-6 m:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
|
||||
<% admin_menu_items.each do |menu_item| %>
|
||||
<div class="tag-card crayons-card branded-4 p-4 m:p-6 m:pt-4 flex flex-col relative">
|
||||
<h3 class="crayons-tag crayons-tag--l mb-2">
|
||||
<a href="/admin/<%= menu_item[:controller] %>" class="crayons-link">
|
||||
<%= menu_item[:name].to_s.titleize %>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if FeatureFlag.enabled?(:data_update_scripts) %>
|
||||
<div class="grid gap-2 m:gap-4 l:gap-6 m:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
|
||||
<div>
|
||||
<div class="mt-6 mb-2"> Tech Resources </div>
|
||||
<% AdminHelper::TECH_MENU_ITEMS.each do |tech_menu_item| %>
|
||||
<div class="tag-card crayons-card branded-4 p-4 m:p-6 m:pt-4 flex flex-col relative">
|
||||
<h3 class="crayons-tag crayons-tag--l mb-2">
|
||||
<a href="/admin/<%= tech_menu_item[:controller] %>" class="crayons-link">
|
||||
<%= tech_menu_item[:name].to_s.titleize %>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
56
app/views/admin/overview/index.html.erb
Normal file
56
app/views/admin/overview/index.html.erb
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<h2 class="crayons-title mb-3">Overview</h2>
|
||||
<div class="px-0 crayons-layout crayons-layout--2-cols crayons-layout--2-cols--1-2 crayons-layout--2-cols--inverted">
|
||||
<article class="crayons-layout__content">
|
||||
<section class="crayons-card mb-3">
|
||||
<div class="crayons-card__body" data-controller="ahoy">
|
||||
<h3 class="crayons-subtitle-2">Welcome Checklist</h3>
|
||||
<p class="crayons-field__description mb-3">Here are a few things we recommend doing now that you're using Forem!</p>
|
||||
<ol>
|
||||
<li>Set up and configure your Forem under <a href="/admin/config" data-action="click->ahoy#trackOverviewLink">Config</a></li>
|
||||
<li><a href="/admin/invitations" data-action="click->ahoy#trackOverviewLink">Invite people</a> to join your Forem</li>
|
||||
<li><a href="/admin/tags" data-action="click->ahoy#trackOverviewLink">Update your Forem tags</a></li>
|
||||
<li><a href="/admin/pages" data-action="click->ahoy#trackOverviewLink">Create pages</a> and <a href="/admin/navigation_links" data-action="click->ahoy#trackOverviewLink">sort them in the navigation sidebar</a></li>
|
||||
<li>Read the <a href="https://forem.gitbook.io/forem-admin-guide/quick-start-guide" data-action="click->ahoy#trackOverviewLink">Quick Start Guide</a></li>
|
||||
<li><a href="/admin/welcome" data-action="click->ahoy#trackOverviewLink">Set up a Welcome Thread</a></li>
|
||||
<li>Browse the <a href="https://forem.gitbook.io/forem-admin-guide" data-action="click->ahoy#trackOverviewLink">Forem Admin Guide</a></li>
|
||||
<li>Join the private <a href="https://creators.forem.com">Creators Forem</a> (email <a href="mailto:support@forem.com" data-action="click->ahoy#trackOverviewLink">support@forem.com</a> if you need an invite)</li>
|
||||
</ol>
|
||||
<p class="m-3 align-center"><a href="https://forem.gitbook.io/forem-admin-guide" data-action="click->ahoy#trackOverviewLink">Visit Forem Admin Guide</a></p>
|
||||
</div>
|
||||
</section>
|
||||
<h2 class="crayons-subtitle-1 mb-3">Resources</h2>
|
||||
<article class="grid s:grid-cols-2 gap-3" data-controller="ahoy">
|
||||
<section class="crayons-card">
|
||||
<div class="crayons-card__header">
|
||||
<h3 class="crayons-subtitle-2">Forem Admin Guide</h3>
|
||||
</div>
|
||||
<div class="crayons-card__body flex flex-wrap" style="min-height: 150px;">
|
||||
<p>This guide gives you the best practices on how you can manage and grow your community on Forem.</p>
|
||||
<a role="button" href="https://forem.gitbook.io/forem-admin-guide" class="crayons-btn mt-1 w-100 self-end" data-action="click->ahoy#trackOverviewLink">Visit Guide</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="crayons-card">
|
||||
<div class="crayons-card__header">
|
||||
<h3 class="crayons-subtitle-2">Forem Creators Community</h3>
|
||||
</div>
|
||||
<div class="crayons-card__body flex flex-wrap" style="min-height: 150px;">
|
||||
<p>Meet other creators using Forem so that you can share tips with each other.</p>
|
||||
<a role="button" href="https://creators.forem.com" class="crayons-btn mt-1 w-100 self-end" data-action="click->ahoy#trackOverviewLink">Join Community</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</article>
|
||||
<div class="crayons-layout__sidebar-right">
|
||||
<article class="crayons-card">
|
||||
<div class="crayons-card__header">
|
||||
<h3 class="crayons-subtitle-2">Deployment</h3>
|
||||
</div>
|
||||
<div class="crayons-card__body">
|
||||
<p class="crayons-field__description">Last Deployed</p>
|
||||
<p><%= ForemInstance.deployed_at %></p>
|
||||
<p class="crayons-field__description">Latest Commit ID</p>
|
||||
<p><%= ForemInstance.latest_commit_id || "Not Available" %></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if controller.controller_name == "overview" %>" href="/admin/">
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<% menu_items.each do |menu_item| %>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if request.path.split("/")[2].match?(menu_item[:controller]) %>" href="/admin/<%= menu_item[:controller] %>">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if request.path.split("/")[2]&.match?(menu_item[:controller]) %>" href="/admin/<%= menu_item[:controller] %>">
|
||||
<%= menu_item[:name].to_s.titleize %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -34,12 +34,8 @@
|
|||
<%= render "layouts/logo" %>
|
||||
|
||||
<h1 class="pl-4 fs-l">
|
||||
<% if controller_name == "admin_portals" %>
|
||||
Admin
|
||||
<% else %>
|
||||
<a href="/admin">Admin</a>
|
||||
<span class="color-base-40">»</span> <span class="fw-bold"><%= controller_name.titleize %></span>
|
||||
<% end %>
|
||||
<a href="/admin">Admin</a>
|
||||
<span class="color-base-60">»</span> <span class="fw-bold"><%= controller_name.titleize %></span>
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center h-100 ml-auto">
|
||||
|
|
@ -54,18 +50,16 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="crayons-layout <%= controller_name == "admin_portals" ? "" : "crayons-layout--2-cols" %>">
|
||||
<% unless controller_name == "admin_portals" %>
|
||||
<div class="crayons-layout__left-sidebar">
|
||||
<nav class="hidden m:block">
|
||||
<%= render "admin/shared/navbar", menu_items: admin_menu_items %>
|
||||
<% if FeatureFlag.enabled?(:data_update_scripts) %>
|
||||
<p class="crayons-field__description mt-4 mb-3">Tech Resources</p>
|
||||
<%= render "admin/shared/navbar", menu_items: AdminHelper::TECH_MENU_ITEMS %>
|
||||
<% end %>
|
||||
</nav>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="crayons-layout crayons-layout--2-cols">
|
||||
<div class="crayons-layout__left-sidebar">
|
||||
<nav class="hidden m:block">
|
||||
<%= render "admin/shared/navbar", menu_items: admin_menu_items %>
|
||||
<% if FeatureFlag.enabled?(:data_update_scripts) %>
|
||||
<p class="crayons-field__description mt-4 mb-3">Tech Resources</p>
|
||||
<%= render "admin/shared/navbar", menu_items: AdminHelper::TECH_MENU_ITEMS %>
|
||||
<% end %>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="crayons-layout__content min-w-0">
|
||||
<% flash.each do |type, message| %>
|
||||
<div class="alert alert-<%= type == "notice" || type == "success" ? "success" : "danger" %>">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Rails.application.routes.draw do
|
|||
end
|
||||
|
||||
namespace :admin do
|
||||
get "/", to: "admin_portals#index"
|
||||
get "/", to: "overview#index"
|
||||
|
||||
authenticate :user, ->(user) { user.tech_admin? } do
|
||||
mount Blazer::Engine, at: "blazer"
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ advanced setup to start the application by using [Overmind][overmind].
|
|||
The prerequisite is to install [Overmind][overmind], a process manager which
|
||||
takes advantage of [tmux][tmux].
|
||||
|
||||
This will allow you to launch all your app's processes in the same terminal, navigate the logs
|
||||
of each service separately, restart each service separately and have a better
|
||||
debugging experience.
|
||||
This will allow you to launch all your app's processes in the same terminal,
|
||||
navigate the logs of each service separately, restart each service separately
|
||||
and have a better debugging experience.
|
||||
|
||||
After installing [Overmind][overmind], launch the application:
|
||||
|
||||
|
|
@ -68,9 +68,10 @@ overmind s -f Procfile.dev
|
|||
[Overmind][overmind] lets you easily step through the Rails application in a
|
||||
debugging session.
|
||||
|
||||
Using the `pry` gem, you can add a `binding.pry` to set a breakpoint in the method you're trying to
|
||||
debug; the application will halt its execution there. You can then connect
|
||||
to the web server by opening a separate terminal window and typing:
|
||||
Using the `pry` gem, you can add a `binding.pry` to set a breakpoint in the
|
||||
method you're trying to debug; the application will halt its execution there.
|
||||
You can then connect to the web server by opening a separate terminal window and
|
||||
typing:
|
||||
|
||||
```shell
|
||||
overmind c web
|
||||
|
|
@ -80,9 +81,9 @@ This will open up a [tmux][tmux] window pane at the debugging statement
|
|||
position, which will look something like this:
|
||||
|
||||
```ruby
|
||||
pry(#<Admin::AdminPortalsController>)> whereami
|
||||
pry(#<Admin::OverviewController>)> whereami
|
||||
|
||||
From: /forem/app/controllers/admin/admin_portals_controller.rb:8 Admin::AdminPortalsController#index:
|
||||
From: /forem/app/controllers/admin/overview_controller.rb:8 Admin::OverviewController#index:
|
||||
|
||||
5: def index
|
||||
6: a = "Hello debugger"
|
||||
|
|
@ -103,21 +104,22 @@ separate terminal window to look at those logs specifically:
|
|||
overmind c sidekiq
|
||||
```
|
||||
|
||||
This will open a `tmux` console, which will allow you to browse _only_ the Sidekiq logs.
|
||||
This will open a `tmux` console, which will allow you to browse _only_ the
|
||||
Sidekiq logs.
|
||||
|
||||
There are also some handy `tmux` shortcuts that you may find useful.
|
||||
|
||||
* The shortcut `C-b [` (_Control-b-open square bracket_) activates "scroll
|
||||
mode", which allows you to use the arrows up and down and inspect the logs.
|
||||
* The shortcut `q` deactivates "scroll mode".
|
||||
- The shortcut `C-b [` (_Control-b-open square bracket_) activates "scroll
|
||||
mode", which allows you to use the arrows up and down and inspect the logs.
|
||||
- The shortcut `q` deactivates "scroll mode".
|
||||
|
||||
Please refer to [tmux][tmux] documentation for more information around `tmux` configuration and for additional
|
||||
shortcuts.
|
||||
Please refer to [tmux][tmux] documentation for more information around `tmux`
|
||||
configuration and for additional shortcuts.
|
||||
|
||||
## Resources
|
||||
|
||||
Other than the official [Overmind][overmind] and [tmux][tmux]
|
||||
documentation, you may find the following resources useful:
|
||||
Other than the official [Overmind][overmind] and [tmux][tmux] documentation, you
|
||||
may find the following resources useful:
|
||||
|
||||
- [Rails quick tips #6: tmux, tmuxinator and Overmind](https://dev.to/citizen428/rails-quick-tips-6-tmux-tmuxinator-and-overmind-4850)
|
||||
- [Give Your Terminal Super Powers: tmux Cheatsheet!](https://dev.to/jacobherrington/give-your-terminal-super-powers-tmux-cheatsheet-1p6p)
|
||||
|
|
|
|||
14
spec/system/admin/admin_visits_overview_spec.rb
Normal file
14
spec/system/admin/admin_visits_overview_spec.rb
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
require "rails_helper"
|
||||
|
||||
RSpec.describe "Admin visits the overview page", type: :system, js: true do
|
||||
let(:super_admin) { create(:user, :super_admin) }
|
||||
|
||||
before do
|
||||
sign_in super_admin
|
||||
visit admin_path
|
||||
end
|
||||
|
||||
it "tracks link clicks" do
|
||||
expect { click_link("Invite people") }.to change { Ahoy::Event.count }.by 1
|
||||
end
|
||||
end
|
||||
Loading…
Add table
Reference in a new issue