Add some header settings (#199)

* Add show_roadmap_in_header setting
* Add collapse_boards_in_header setting (thanks @josh-bitovi)

app/javascript/components/SiteSettings/General/GeneralSiteSettingsP.tsx

@@ -11,6 +11,8 @@ import {
   TENANT_SETTING_BRAND_DISPLAY_NAME_ONLY,
   TENANT_SETTING_BRAND_DISPLAY_LOGO_ONLY,
   TENANT_SETTING_BRAND_DISPLAY_NONE,
+  TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_NO_COLLAPSE,
+  TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_ALWAYS_COLLAPSE,
 } from '../../../interfaces/ITenantSetting';
 import { DangerText, SmallMutedText } from '../../common/CustomTexts';
 import { getLabel, getValidationMessage } from '../../../helpers/formUtils';
@@ -24,6 +26,8 @@ export interface ISiteSettingsGeneralForm {
   showVoteCount: boolean;
   showVoteButtonInBoard: boolean;
   rootBoardId?: string;
+  showRoadmapInHeader: boolean;
+  collapseBoardsInHeader: string;
 }
 
 interface Props {
@@ -40,6 +44,8 @@ interface Props {
     brandDisplaySetting: string,
     locale: string,
     rootBoardId: number,
+    showRoadmapInHeader: boolean,
+    collapseBoardsInHeader: string,
     showVoteCount: boolean,
     showVoteButtonInBoard: boolean,
     authenticityToken: string
@@ -68,6 +74,8 @@ const GeneralSiteSettingsP = ({
       showVoteCount: originForm.showVoteCount,
       showVoteButtonInBoard: originForm.showVoteButtonInBoard,
       rootBoardId: originForm.rootBoardId,
+      showRoadmapInHeader: originForm.showRoadmapInHeader,
+      collapseBoardsInHeader: originForm.collapseBoardsInHeader,
     },
   });
   
@@ -78,9 +86,11 @@ const GeneralSiteSettingsP = ({
       data.brandDisplaySetting,
       data.locale,
       Number(data.rootBoardId),
+      data.showRoadmapInHeader,
+      data.collapseBoardsInHeader,
       data.showVoteCount,
       data.showVoteButtonInBoard,
-      authenticityToken,
+      authenticityToken
     ).then(res => {
       if (res?.status !== HttpStatus.OK) return;
       window.location.reload();
@@ -170,6 +180,34 @@ const GeneralSiteSettingsP = ({
           </div>
 
           <br />
+          <h4>{ I18n.t('site_settings.general.subtitle_header') }</h4>
+          
+          <div className="formGroup">
+            <div className="checkboxSwitch">
+              <input {...register('showRoadmapInHeader')} type="checkbox" id="show_roadmap_in_header" />
+              <label htmlFor="show_roadmap_in_header">{ getLabel('tenant_setting', 'show_roadmap_in_header') }</label>
+            </div>
+          </div>
+          
+          <br />
+          <div className="formGroup">
+            <label htmlFor="collapseBoardsInHeader">{ getLabel('tenant_setting', 'collapse_boards_in_header') }</label>
+              <select
+                {...register('collapseBoardsInHeader')}
+                id="collapseBoardsInHeader"
+                className="selectPicker"
+              >
+                <option value={TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_NO_COLLAPSE}>
+                  { I18n.t('site_settings.general.collapse_boards_in_header_no_collapse') }
+                </option>
+                <option value={TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_ALWAYS_COLLAPSE}>
+                  { I18n.t('site_settings.general.collapse_boards_in_header_always_collapse') }
+                </option>
+              </select>
+          </div>
+
+          <br />
+          <h4>{ I18n.t('site_settings.general.subtitle_visibility') }</h4>
 
           <div className="formGroup">
             <div className="checkboxSwitch">

app/javascript/containers/GeneralSiteSettings.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import GeneralSiteSettingsP from "../components/SiteSettings/General/GeneralSiteSettingsP";
 import { updateTenant } from "../actions/Tenant/updateTenant";
 import { State } from "../reducers/rootReducer";
-import { TenantSettingBrandDisplay } from "../interfaces/ITenantSetting";
+import { TenantSettingBrandDisplay, TenantSettingCollapseBoardsInHeader } from "../interfaces/ITenantSetting";
 
 const mapStateToProps = (state: State) => ({
   areUpdating: state.siteSettings.general.areUpdating,
@@ -17,6 +17,8 @@ const mapDispatchToProps = (dispatch: any) => ({
     brandDisplaySetting: TenantSettingBrandDisplay,
     locale: string,
     rootBoardId: number,
+    showRoadmapInHeader: boolean,
+    collapseBoardsInHeader: TenantSettingCollapseBoardsInHeader,
     showVoteCount: boolean,
     showVoteButtonInBoard: boolean,
     authenticityToken: string
@@ -29,6 +31,8 @@ const mapDispatchToProps = (dispatch: any) => ({
         show_vote_count: showVoteCount,
         show_vote_button_in_board: showVoteButtonInBoard,
         root_board_id: rootBoardId,
+        show_roadmap_in_header: showRoadmapInHeader,
+        collapse_boards_in_header: collapseBoardsInHeader,
       },
       locale,
       authenticityToken,

app/javascript/interfaces/ITenantSetting.ts

@@ -10,11 +10,22 @@ export type TenantSettingBrandDisplay =
   typeof TENANT_SETTING_BRAND_DISPLAY_LOGO_ONLY |
   typeof TENANT_SETTING_BRAND_DISPLAY_NONE;
 
+// Collapse boards in header
+export const TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_NO_COLLAPSE = 'no_collapse';
+export const TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_ALWAYS_COLLAPSE = 'always_collapse';
+
+export type TenantSettingCollapseBoardsInHeader =
+  typeof TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_NO_COLLAPSE |
+  typeof TENANT_SETTING_COLLAPSE_BOARDS_IN_HEADER_ALWAYS_COLLAPSE;
+
+
 interface ITenantSetting {
   brand_display?: TenantSettingBrandDisplay;
   root_board_id?: number;
   show_vote_count?: boolean;
   show_vote_button_in_board?: boolean;
+  show_roadmap_in_header?: boolean;
+  collapse_boards_in_header?: TenantSettingCollapseBoardsInHeader;
 }
 
 export default ITenantSetting;

app/models/tenant_setting.rb

@@ -9,4 +9,9 @@ class TenantSetting < ApplicationRecord
     :logo_only,
     :no_name_no_logo
   ]
+
+  enum collapse_boards_in_header: [
+    :no_collapse,
+    :always_collapse
+  ]
 end

app/policies/tenant_setting_policy.rb

@@ -1,7 +1,14 @@
 class TenantSettingPolicy < ApplicationPolicy
   def permitted_attributes_for_update
     if user.admin?
-      [:brand_display, :root_board_id, :show_vote_count, :show_vote_button_in_board]
+      [
+        :brand_display,
+        :root_board_id,
+        :show_vote_count,
+        :show_vote_button_in_board,
+        :show_roadmap_in_header,
+        :collapse_boards_in_header
+      ]
     else
       []
     end

app/views/layouts/_boards_nav_section.html.erb

@@ -1,5 +1,19 @@
-<% boards.each do |board| %>
+<% if @tenant_setting.collapse_boards_in_header == 'always_collapse' %>
-  <li class="nav-item<%= board.id == @board.id ? ' active' : '' unless @board.nil? %>">
+  <li class="navbar-nav nav-item dropdown">
-    <%= link_to board.name, board_path(board), class: 'nav-link' %>
+    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-  </li>
+      Boards
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+      <% boards.each do |board| %>
+        <li>
+          <%= link_to board.name, board_path(board), class: 'dropdown-item py-2' %>
+        </li>
+      <% end %>
+    </ul>
+<% else %>
+  <% boards.each do |board| %>
+    <li class="nav-item<%= board.id == @board.id ? ' active' : '' unless @board.nil? %>">
+      <%= link_to board.name, board_path(board), class: 'nav-link' %>
+    </li>
+  <% end %>
 <% end %>

app/views/layouts/_header.html.erb

@@ -29,6 +29,12 @@
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="boardsNav">
+        <% if @tenant_setting.show_roadmap_in_header %>
+          <li class="nav-item<%= current_page?(roadmap_path) ? ' active' : '' %>">
+            <%= link_to "Roadmap", roadmap_path, class: 'nav-link' %>
+          </li>
+        <% end %>
+        
         <%= render 'layouts/boards_nav_section', boards: @boards unless @boards.nil? %>
       </ul>
 

app/views/site_settings/general.html.erb

@@ -12,6 +12,8 @@
             showVoteCount: @tenant_setting.show_vote_count,
             showVoteButtonInBoard: @tenant_setting.show_vote_button_in_board,
             rootBoardId: @tenant_setting.root_board_id.to_s,
+            showRoadmapInHeader: @tenant_setting.show_roadmap_in_header,
+            collapseBoardsInHeader: @tenant_setting.collapse_boards_in_header,
             locale: @tenant.locale
           },
           boards: @tenant.boards.order(order: :asc),

config/locales/backend/backend.en.yml

@@ -119,6 +119,8 @@ en:
         show_vote_count: 'Show vote count to users'
         show_vote_button_in_board: 'Show vote buttons in board page'
         root_board_id: 'Root page'
+        show_roadmap_in_header: 'Show roadmap link in header'
+        collapse_boards_in_header: 'Collapse boards in header'
       user:
         email: 'Email'
         full_name: 'Full name'

config/locales/en.yml

@@ -153,6 +153,10 @@ en:
       brand_setting_name: 'Name only'
       brand_setting_logo: 'Logo only'
       brand_setting_none: 'None'
+      subtitle_header: 'Header'
+      collapse_boards_in_header_no_collapse: 'Never'
+      collapse_boards_in_header_always_collapse: 'Always'
+      subtitle_visibility: 'Visibility'
       show_vote_count_help: 'If you enable this setting, users will be able to see the vote count of posts. This may incentivize users to vote on already popular posts, leading to a snowball effect.'
       show_vote_button_in_board_help: 'If you enable this setting, users will be able to vote posts from the board page. This may incentivize users to vote on more posts, leading to a higher number of votes but of lower significance.'
     boards:

db/migrate/20230207201354_add_show_roadmap_in_header_to_tenant_settings.rb

@@ -0,0 +1,5 @@
+class AddShowRoadmapInHeaderToTenantSettings < ActiveRecord::Migration[6.0]
+  def change
+    add_column :tenant_settings, :show_roadmap_in_header, :boolean, null: false, default: true
+  end
+end

db/migrate/20230211095500_add_collapse_boards_in_header_to_tenant_settings.rb

@@ -0,0 +1,5 @@
+class AddCollapseBoardsInHeaderToTenantSettings < ActiveRecord::Migration[6.0]
+  def change
+    add_column :tenant_settings, :collapse_boards_in_header, :integer, null: false, default: 0
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2023_02_04_171748) do
+ActiveRecord::Schema.define(version: 2023_02_11_095500) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -132,6 +132,8 @@ ActiveRecord::Schema.define(version: 2023_02_04_171748) do
     t.boolean "show_vote_count", default: false, null: false
     t.boolean "show_vote_button_in_board", default: false, null: false
     t.integer "root_board_id", default: 0, null: false
+    t.boolean "show_roadmap_in_header", default: true, null: false
+    t.integer "collapse_boards_in_header", default: 0, null: false
     t.index ["tenant_id"], name: "index_tenant_settings_on_tenant_id"
   end
 

spec/models/tenant_setting_spec.rb

@@ -31,4 +31,15 @@ RSpec.describe TenantSetting, type: :model do
   it 'has a setting that contains the board id of the root page' do
     expect(tenant_setting.root_board_id).to eq(0)
   end
+
+  it 'has a setting to show/hide roadmap link in header' do
+    expect(tenant_setting.show_roadmap_in_header).to be_truthy
+  end
+
+  it 'has a setting to collapse boards in header' do
+    expect(tenant_setting.collapse_boards_in_header).to eq('no_collapse')
+
+    tenant_setting.collapse_boards_in_header = 'always_collapse'
+    expect(tenant_setting).to be_valid
+  end
 end