Merge pull request #1463 from GSA/1388-challenger-managers-dashboard-…

…phoenix

1388 challenger managers dashboard phoenix

assets/css/shared/_uswds-overrides.scss

@@ -189,3 +189,9 @@ Add a list of changed settings in the form $setting: value.
   background-color: #fafafa;
 }
 
+
+@media (min-width: 64em) {
+  .desktop\:flex-row {
+      flex-direction: row;
+  }
+}

lib/web/templates/layout/app.html.eex

@@ -2,7 +2,7 @@
         data-session_expiration="<%= Web.SharedView.session_timeout(@conn) %>"
         id="session_timeout">
       </div>
-      <div style="min-height: 874px;">
+      <div>
       <%= case current_user(@conn) do %>
       <% nil -> %>
       <% u -> %>
@@ -20,8 +20,8 @@
 
       <% end %>
 
-      <div class="grid-row grid-gap">
-      <div class="grid-col-12 dashboard-background-light" >
+      <div class="grid-row ">
+      <div class="grid-col-12 dashboard-background-light >
       <div class="usa-section padding-top-1 minh-tablet-lg">
         <%= if Map.has_key?(@conn.assigns, :site_wide_banner) do %>
           <div class="content-header">
@@ -76,8 +76,11 @@
           </div>
         <% end %>
 
-      <%= @inner_content %>
+      <div class="grid-col-12 dashboard-background-light padding-x-4" >
 
+          <%= @inner_content %>
+
+      </div>
       </div>
       <aside class="float-right control-sidebar control-sidebar-light border">
         <div class="padding-2">

lib/web/templates/layout/util_nav/_admin.html.eex

@@ -1,19 +1,22 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
 
-  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
 
-  <%= link(to: Routes.user_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.user_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#people"></use>
       </svg><span class="display-none desktop:display-block">Users</span><span class="desktop:display-none" style="font-size: 0.7rem">Users</span>
   <% end %>
 
-  <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center", id: "challenge-link-1")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Challenges</span>
   <% end %>

lib/web/templates/layout/util_nav/_challenge_manager.html.eex

@@ -1,29 +1,40 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
 
-  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
 
-  <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center", id: "challenge-link-1")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Challenges</span>
   <% end %>
 
-   <%= link(to: "https://challenge-dev.app.cloud.gov/manage_submissions", class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+   <%= link(to: "https://challenge-dev.app.cloud.gov/manage_submissions", class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#star_half"></use>
       </svg><span class="display-none desktop:display-block">Submissions & Evaluations</span><span class="desktop:display-none" style="font-size: 0.7rem">Submissions & Evaluations</span>
   <% end %>
 
-  <%= link(to: "https://challenge-dev.app.cloud.gov/evaluation_forms", class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: "https://challenge-dev.app.cloud.gov/evaluation_forms", class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#check_circle_outline"></use>
       </svg><span class="display-none desktop:display-block">Evaluation Forms</span><span class="desktop:display-none" style="font-size: 0.7rem">Evaluation Forms</span>
   <% end %>
 
+  <%= link(to: Routes.help_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
+        <use xlink:href="/assets/img/sprite.svg#support"></use>
+      </svg><span class="display-none desktop:display-block">Resources</span><span class="desktop:display-none" style="font-size: 0.7rem">Resources</span>
+  <% end %>
+
   <div class="display-none desktop:display-flex flex-align-center margin-x-1 margin-top-1">
   |
     <img class="usa-icon--size-3 icon-white margin-x-2" alt="Help"src=" <%= Routes.static_path(Web.Endpoint, "/images/account_circle.svg") %>" >

lib/web/templates/layout/util_nav/_solver.html.eex

@@ -1,23 +1,33 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
 
-  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
 
-  <%= link(to: Routes.submission_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.submission_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#file_present"></use>
       </svg><span class="display-none desktop:display-block">Submissions</span><span class="desktop:display-none" style="font-size: 0.7rem">Submissions</span>
   <% end %>
 
-  <%= link(to: Routes.saved_challenge_path(@conn, :index), class: "display-flex flex-align-center  desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra")  do %>
-      <svg class="usa-icon usa-challenge-menu float-left margin-right-1" aria-hidden="true" focusable="false" role="img">
+  <%= link(to: Routes.saved_challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Saved Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Saved Challenges</span>
   <% end %>
 
+  <%= link(to: Routes.help_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
+                    width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
+      <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
+        <use xlink:href="/assets/img/sprite.svg#support"></use>
+      </svg><span class="display-none desktop:display-block">Resources</span><span class="desktop:display-none" style="font-size: 0.7rem">Resources</span>
+  <% end %>
+
   <div class="display-none desktop:display-flex flex-align-center margin-x-1 margin-top-1">
     |
     <img class="usa-icon--size-3 icon-white margin-x-2" alt="Help"src=" <%= Routes.static_path(Web.Endpoint, "/images/account_circle.svg") %>" >

lib/web/views/dashboard_view.ex

@@ -90,36 +90,23 @@ defmodule Web.DashboardView do
   defp admin_header(wrapper_classes) do
     content_tag :div, class: wrapper_classes do
       [
-        content_tag(:h1, "Dashboard"),
-        content_tag(:p, "Engage with the features below to manage your workflows.",
-          class: "padding-0"
-        )
+        content_tag(:h1, "Dashboard")
       ]
     end
   end
 
   defp challenge_manager_header(wrapper_classes) do
     content_tag :div, class: wrapper_classes do
       [
-        content_tag(:h1, "Dashboard"),
-        content_tag(
-          :p,
-          "Engage with the features below to manage your workflows.",
-          class: "padding-0"
-        )
+        content_tag(:h1, "Dashboard")
       ]
     end
   end
 
   defp solver_header(wrapper_classes) do
     content_tag :div, class: wrapper_classes do
       [
-        content_tag(:h1, "Dashboard"),
-        content_tag(
-          :p,
-          "Use the features below to engage with challenges and manage your submissions.",
-          class: "padding-0"
-        )
+        content_tag(:h1, "Dashboard")
       ]
     end
   end
@@ -180,8 +167,8 @@ defmodule Web.DashboardView do
             to: Routes.challenge_path(Endpoint, :index),
             target: "",
             icon: my_icon("emoji_events"),
-            title: "Challenge management",
-            description: "Manage and view all open and archived challenges."
+            title: "Challenges",
+            description: "Create and manage your challenges."
           )
         ]
       end,
@@ -225,67 +212,56 @@ defmodule Web.DashboardView do
             to: Routes.challenge_path(Endpoint, :index),
             target: "",
             icon: my_icon("emoji_events"),
-            title: "Challenge management",
-            description: "Manage and view all open and archived challenges."
+            title: "Challenges",
+            description: "Create and manage your challenges."
           ),
-          if Challenges.is_allowed_to_view_submission?(user) do
-            render("_card_link.html",
-              to: Routes.challenge_path(Endpoint, :new),
-              target: "",
-              icon: my_icon("add"),
-              title: "Create a new challenge",
-              description: nil
-            )
-          else
-            ""
-          end
-        ]
-      end,
-      content_tag :div, class: "grid-row grid-gap-2" do
-        [
           render("_card_link.html",
             to: "https://challenge-dev.app.cloud.gov/manage_submissions",
             target: "",
             icon: my_icon("star_half"),
             title: "Submissions & Evaluations",
             description: "Manage submissions, evaluations, and evaluators."
-          ),
+          )
+        ]
+      end,
+      content_tag :div, class: "grid-row grid-gap-2" do
+        [
           render("_card_link.html",
             to: "https://challenge-dev.app.cloud.gov/evaluation_forms",
             target: "",
             icon: my_icon("check_circle_outline"),
             title: "Evaluation Forms",
             description: "Create and manage evaluation forms."
-          )
-        ]
-      end,
-      content_tag :div, class: "grid-row grid-gap-2" do
-        [
+          ),
           render("_card_link.html",
             to: Routes.message_context_path(Endpoint, :index),
             target: "",
             icon: my_icon("mail"),
             title: "Message center",
             description: "View and send messages to Challenge.Gov users."
-          ),
+          )
+        ]
+      end,
+      content_tag :div, class: "grid-row grid-gap-2" do
+        [
           render("_card_link.html",
             to: Routes.analytics_path(Endpoint, :index),
             target: "",
             icon: my_icon("assessment"),
             title: "Analytics",
             description: "View web analytics related to your challenges."
+          ),
+          render("_card_link.html",
+            to: Routes.help_path(Endpoint, :index),
+            target: "",
+            icon: my_icon("support"),
+            title: "Resources",
+            description: "Learn how to make the most of Challenge.gov and find support."
           )
         ]
       end,
       content_tag :div, class: "grid-row grid-gap-2" do
         [
-          render("_card_link.html",
-            to: Routes.help_path(Endpoint, :index),
-            target: "",
-            icon: my_icon("help"),
-            title: "Help",
-            description: "Help Center"
-          ),
           render("_card_link.html",
             to: Routes.static_path(Endpoint, "/pdfs/prize_and_challenge_toolkit.pdf"),
             target: "_blank",
@@ -319,9 +295,9 @@ defmodule Web.DashboardView do
         render("_card_link.html",
           to: Routes.help_path(Endpoint, :solver_index),
           target: "",
-          icon: my_icon("help"),
-          title: "Help",
-          description: "Help Center"
+          icon: my_icon("support"),
+          title: "Resources",
+          description: "Learn how to make the most of Challenge.gov and find support."
         )
       ]
     end

test/integration/challenge_test.exs

@@ -8,8 +8,8 @@ defmodule ChallengeGov.ChallengeIntegrationTest do
     create_and_sign_in_challenge_manager(session)
 
     session
-    |> click(link("Challenge management"))
-    |> click(link("New"))
+    |> click(css("#challenge-link-1"))
+    |> visit("/challenges/new")
     |> complete_general_section()
     |> complete_details_section()
     |> complete_timeline_section()