Merge to Staging

.circleci/config.yml

@@ -89,7 +89,7 @@ commands:
           name: Clean node_modules
           command: rm -rf node_modules
       - nodejs/install:
-          node-version: "20.10.0"
+          node-version: "20.20.0"
           install-yarn: true
       - run:
           name: Yarn Install
@@ -366,4 +366,4 @@ workflows:
               mysql_version:
                 - "8.0.40"
               node_version:
-                - 20.10.0
+                - 20.20.0

.nvmrc

@@ -1 +1 @@
-16.20.2
+20.20.0

Dockerfile

@@ -18,7 +18,7 @@ ENV RAILS_ENV="production" \
     BUNDLE_WITHOUT="development"
 
 # Install JavaScript dependencies | Needed in base due coffee-rails gem
-ARG NODE_VERSION=20.10.0
+ARG NODE_VERSION=20.20.0
 ARG YARN_VERSION=latest
 ENV PATH=/usr/local/node/bin:$PATH
 RUN curl -sL https://github.com/nodenv/node-build/archive/master.tar.gz | tar xz -C /tmp/ && \

Dockerfile.dev

@@ -13,7 +13,7 @@ RUN apt-get update -y && apt-get install -y --no-install-recommends \
 # Workaround for PhantomJS: https://github.com/DMOJ/online-judge/pull/1270
 ENV OPENSSL_CONF /etc/ssl/
 
-ENV NODE_VERSION 20.10.0
+ENV NODE_VERSION 20.20.0
 ENV NVM_DIR=/root/.nvm
 
 COPY package.json yarn.lock ./

app/assets/stylesheets/sites/_site_header.less

@@ -2,19 +2,24 @@
   background-color: @white;
   z-index: @zindexStickyBar;
 }
+
 .l-site-header-inner {
   .clearfix();
   border-bottom: 1px solid @siteMainNavBackground;
-  height: 60px;
+  height: @siteSelectorHeight;
   padding-right: 28px;
-  padding-left: 20px;
+
+  &.--is-inactive {
+    height: @siteSelectorHeightForInactiveSite;
+  }
 
   .site-display-name {
     .muted();
     overflow: hidden;
     font-size: (@baseFontSize * 1.1);
     line-height: 20px;
-    padding: 20px 0 0;
+    padding: 1.25rem 0 0;
+    margin-left: 1.25rem; // Needs to be the same as the left padding of .site-header-inactive
     > span.label {
       .off-screen-text();
     }
@@ -89,3 +94,37 @@
     cursor: pointer;
   }
 }
+
+// Style for the inactive banner
+.site-header-inactive {
+  margin-top: 9px;
+  color: #1b1b1b;
+
+  width: 100%;
+
+  border-top: 1px solid #1B2F36;
+  border-left: .5rem solid #ffbe2e;
+  background-color: #faf3d1;
+
+  padding: .5rem 1.25rem;
+
+  p {
+    margin: 0;
+  }
+
+  .usa-banner__content{
+    display: inline-flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin-right: 5px;
+      background: asset-url('uswds/usa-icons/warning.svg');
+    }
+
+  }
+
+}

app/assets/stylesheets/sites/_site_sub_nav_heading.less

@@ -10,6 +10,10 @@
   padding-left: 28px;
   z-index: @zindexStickyBar;
 
+  &.--is-inactive {
+    top: @siteNavTopForInactiveSite;
+  }
+
   h2 {
     color: @textColor;
     float: left;

app/assets/stylesheets/sites/_sites.less

@@ -42,6 +42,9 @@ a.menu:hover, a.menu:focus {
     padding-top: @contentWithoutSiteTop;
   }
 
+  &.--is-inactive {
+    padding-top: @contentTopForInactiveSite;
+  }
   .outline-on-focus();
 }
 

app/assets/stylesheets/sites/_variables.less

@@ -18,8 +18,12 @@
 
 @siteSelectorTop: @navbarHeight;
 @siteSelectorHeight: 60px;
+@siteInactiveHeader: 46px;
+@siteSelectorHeightForInactiveSite: (@siteSelectorHeight + @siteInactiveHeader);
 
 @siteNavTop: @navbarHeight + @siteSelectorHeight + 1;
+@siteNavTopForInactiveSite: (@siteNavTop + @siteInactiveHeader);
+
 @siteMainNavWidth: 80px;
 @siteMainNavItemHeight: 60px;
 @siteSubNavWidth: 199px;
@@ -29,6 +33,7 @@
 
 @subNavHeadingHeight: 60px;
 @contentTop: (@siteNavTop + @subNavHeadingHeight);
+@contentTopForInactiveSite: (@contentTop + @siteInactiveHeader);
 @contentWithoutSiteTop: @subNavHeadingHeight;
 @zindexStickyBar: 900;
 

app/assets/stylesheets/sites/modules/_layouts.less

@@ -56,6 +56,10 @@ body {
 .l-site-wrapper {
   position: fixed;
   top: @siteNavTop;
+
+  &.--is-inactive {
+    top: @siteNavTopForInactiveSite;
+  }
 }
 
 .l-site-nav {
@@ -82,4 +86,8 @@ body {
   margin-left: (@siteMainNavWidth + @siteSubNavWidth + 1);
   padding-top: @siteNavTop;
   width: auto;
+
+  &.--is-inactive {
+    padding-top: @siteNavTopForInactiveSite;
+  }
 }

app/views/layouts/sites.html.haml

@@ -30,7 +30,7 @@
     = render 'sites/shared/site_header'
     .l-main-container
       = render 'sites/shared/site_nav'
-      #main-content.l-content{ tabindex: -1 }
+      #main-content.l-content{ tabindex: -1, class: ("--is-inactive" if @site&.active? == false) }
         = yield
     #help-doc.modal.fade(data-no-turbolink){ 'aria-hidden' => 'true' }
       .modal-body

app/views/sites/shared/_header.html.haml

@@ -2,8 +2,6 @@
   - if $git_info.show_header
     #admin-system-warning-wrapper
       #git-info-header= render partial: 'shared/git_info_header'
-  - if @site&.active? == false
-    = render 'sites/shared/inactive_banner_uswds'
   .navbar-inner
     .container
       = render partial: 'shared/brand'

app/views/sites/shared/_inactive_banner_uswds.html.haml

@@ -1,4 +1,5 @@
-%section.usa-banner{"aria-label" => "Inactive affiliate notification"}
+.site-header-inactive{"aria-label" => "Inactive affiliate notification"}
   .usa-banner__content
     %p.usa-banner__header-text
-      %strong This affiliate is inactive. Contact Search.gov with questions.
+      This site is inactive. Please contact search@gsa.gov if you need to reactivate it.
+

app/views/sites/shared/_site_header.html.haml

@@ -1,8 +1,10 @@
 .l-site-header
-  .l-site-header-inner
+  .l-site-header-inner{ class: ("--is-inactive" if @site&.active? == false) }
     - unless @site.nil? || @site.new_record?
       .site-display-name
         %span.label Display Name:
         #{@site.display_name} (#{@site.name})
         = site_pin @site
         = filtered_analytics_toggle current_user
+    - if @site&.active? == false
+      = render 'sites/shared/inactive_banner_uswds'

app/views/sites/shared/_site_nav.html.haml

@@ -1,4 +1,4 @@
-.l-site-nav.main
+.l-site-nav.main{ class: ("--is-inactive" if @site&.active? == false) }
   - unless @site.nil? || @site.new_record?
     %ul.nav
       = main_nav_item 'Dashboard', site_path(@site), 'fa-dashboard', site_dashboard_controllers
@@ -7,7 +7,7 @@
       = main_nav_item 'Display', edit_site_display_path(@site), 'fa-desktop', site_manage_display_controllers
       = main_nav_item 'Preview', search_path(affiliate: @site.name), 'fa-eye', [], target: '_blank'
       = main_nav_item 'Activate', site_embed_code_path(@site), 'fa-code', site_activate_search_controllers
-.l-site-nav.sub
+.l-site-nav.sub{ class: ("--is-inactive" if @site&.active? == false) }
   - if @site.nil? || @site.new_record?
     = render('sites/shared/new_site_sub_nav') if controller_name == 'sites'
   - else

app/views/sites/sites/show.html.haml

@@ -1,5 +1,5 @@
 = content_for_site_page_title @site, 'Site Overview'
-.sub-nav-heading
+.sub-nav-heading{ class: ("--is-inactive" if @site&.active? == false) }
   %h2 Customize your search experience
 
 = show_system_alerts

package.json

@@ -75,7 +75,7 @@
     ]
   },
   "engines": {
-    "node": ">=20.10.0"
+    "node": ">=20.20.0"
   },
   "browserslist": [
     "defaults"

spec/views/sites/shared/_site_header.html.haml_spec.rb

@@ -0,0 +1,39 @@
+require 'spec_helper'
+
+module ApplicationHelper
+  def current_user
+    User.new
+  end
+end
+
+describe 'sites/shared/_site_header' do
+
+  context 'inactive affiliate banner' do
+    context 'when site is active' do
+      before { assign(:site, double('Site', active?: true, new_record?: true)) }
+
+      it 'does not render the inactive banner' do
+        render
+        expect(rendered).not_to have_selector('.site-header-inactive[aria-label="Inactive affiliate notification"]')
+      end
+    end
+
+    context 'when site is inactive' do
+      before { assign(:site, double('Site', active?: false, new_record?: true)) }
+
+      it 'renders the inactive banner' do
+        render
+        expect(rendered).to have_selector('.site-header-inactive[aria-label="Inactive affiliate notification"]')
+      end
+    end
+
+    context 'when site is nil (user-scoped pages)' do
+      before { assign(:site, nil) }
+
+      it 'does not render the inactive banner' do
+        render
+        expect(rendered).not_to have_selector('.site-header-inactive[aria-label="Inactive affiliate notification"]')
+      end
+    end
+  end
+end