Dashboard: update multi-pipeline top bar

concourse/concourse#1623

Signed-off-by: Gabriel Dumitrescu <gdumitrescu@pivotal.io>

web/assets/css/dashboard.less

@@ -166,7 +166,6 @@
   display: inline-block;
   margin-bottom: (50px * @scale);
   margin-right: (50px * @scale);
-  float: left;
 
   @base01: #2B2B2B;
   @base03: #6E6E6E;
@@ -406,3 +405,5 @@
   visibility: visible;
   z-index: 10;
 }
+
+

web/assets/css/main.less

@@ -32,3 +32,5 @@
 
 @import "build.less";
 @import "dashboard.less";
+
+@import "newtopbar.less";

web/assets/css/newtopbar.less

@@ -0,0 +1,83 @@
+// top bar
+
+.module-topbar {
+  @base01: #000000;
+  @base03: #333333;
+  @base05: #6E6E6E;
+  @base07: #FFFFFF;
+  @base0D: #4A90E2;
+  background: #333333;
+  border-bottom: 1px solid black;
+  color: #E6E7E8;
+  display: flex;
+  height: 55px;
+
+  div {
+    // border: 1px dotted lime;
+  }
+
+  .topbar-logo {
+    flex-shrink: 1;
+    flex-basis: 50%;
+    .logo-image-link {
+      background-image: url('images/concourse_logo_white.png');
+      background-size: 30px 30px;
+      background-position: center center;
+      background-repeat: no-repeat;
+      display: inline-block;
+      height: 55px;
+      width: 55px;
+    }
+  }
+
+  .topbar-search {
+    text-align: center;
+
+    .topbar-search-form {
+      display: flex;
+      margin: 0 auto;
+      position: relative;
+      transform: translateY(30%);
+
+      .search-input-field {
+        background: transparent url('images/ic_search_white_24px.svg') 10px 10px no-repeat;
+        border: 1px solid @base05;
+        color: @base07;
+        font-family: monospace;
+        font-size: 14px;
+        height: 35px;
+        max-width: 290px;
+        padding: 0 35px 0 30px;
+        &:focus {
+          border: 1px solid @base0D;
+          outline: 0;
+        }
+       }
+
+      .search-clear-button {
+        flex-grow: 1;
+        background: transparent url('images/ic_close_white_24px.svg') 10px 12px no-repeat;
+        border: 0;
+        color: @base03;
+        height: 24px;
+        padding: 5px 10px;
+        position: absolute;
+        right: 10px;
+        width: 24px;
+      }
+    }
+  }
+
+  .topbar-login {
+    flex-shrink: 1;
+    flex-basis: 50%;
+    line-height: 55px;
+    text-align: right;
+
+    .topbar-user-info {
+      border-left: 1px solid @base01;
+      display: inline-block;
+      padding: 0 35px;
+    }
+  }
+}

web/elm/src/Dashboard.elm

@@ -16,13 +16,15 @@ import Html.Attributes.Aria exposing (ariaLabel)
 import Http
 import Keyboard
 import Mouse
+import NewTopBar
 import RemoteData
 import Task exposing (Task)
 import Time exposing (Time)
 
 
 type alias Model =
-    { pipelines : RemoteData.WebData (List Concourse.Pipeline)
+    { topBar : NewTopBar.Model
+    , pipelines : RemoteData.WebData (List Concourse.Pipeline)
     , jobs : Dict Int (RemoteData.WebData (List Concourse.Job))
     , concourseVersion : String
     , turbulenceImgSrc : String
@@ -39,6 +41,7 @@ type Msg
     | VersionFetched (Result Http.Error String)
     | AutoRefresh Time
     | ShowFooter
+    | TopBarMsg NewTopBar.Msg
 
 
 type alias PipelineState =
@@ -49,16 +52,26 @@ type alias PipelineState =
 
 init : String -> ( Model, Cmd Msg )
 init turbulencePath =
-    ( { pipelines = RemoteData.NotAsked
-      , jobs = Dict.empty
-      , concourseVersion = ""
-      , turbulenceImgSrc = turbulencePath
-      , now = Nothing
-      , hideFooter = False
-      , hideFooterCounter = 0
-      }
-    , Cmd.batch [ fetchPipelines, fetchVersion, getCurrentTime ]
-    )
+    let
+        ( topBar, topBarMsg ) =
+            NewTopBar.init
+    in
+        ( { topBar = topBar
+          , pipelines = RemoteData.NotAsked
+          , jobs = Dict.empty
+          , now = Nothing
+          , turbulenceImgSrc = turbulencePath
+          , concourseVersion = ""
+          , hideFooter = False
+          , hideFooterCounter = 0
+          }
+        , Cmd.batch
+            [ fetchPipelines
+            , fetchVersion
+            , getCurrentTime
+            , Cmd.map TopBarMsg topBarMsg
+            ]
+        )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -96,6 +109,13 @@ update msg model =
         ShowFooter ->
             ( { model | hideFooter = False, hideFooterCounter = 0 }, Cmd.none )
 
+        TopBarMsg msg ->
+            let
+                ( newTopBar, newTopBarMsg ) =
+                    NewTopBar.update msg model.topBar
+            in
+                ( { model | topBar = newTopBar }, Cmd.map TopBarMsg newTopBarMsg )
+
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
@@ -108,8 +128,16 @@ subscriptions model =
         ]
 
 
-view : Model -> Html msg
+view : Model -> Html Msg
 view model =
+    Html.div [ class "page" ]
+        [ Html.map TopBarMsg (NewTopBar.view model.topBar)
+        , viewDashboard model
+        ]
+
+
+viewDashboard : Model -> Html Msg
+viewDashboard model =
     case model.pipelines of
         RemoteData.Success pipelines ->
             let

web/elm/src/Layout.elm

@@ -333,21 +333,26 @@ view model =
                 False ->
                     ""
     in
-        Html.div [ class "content-frame" ]
-            [ Html.div [ id "top-bar-app" ]
-                [ Html.map (TopMsg model.navIndex) (TopBar.view model.topModel) ]
-            , Html.div [ class "bottom" ]
-                [ Html.div
-                    [ id "pipelines-nav-app"
-                    , class <| "sidebar test" ++ sidebarVisibileAppendage
+        case model.subModel of
+            SubPage.DashboardModel _ ->
+                Html.map (SubMsg model.navIndex) (SubPage.view model.subModel)
+
+            _ ->
+                Html.div [ class "content-frame" ]
+                    [ Html.div [ id "top-bar-app" ]
+                        [ Html.map (TopMsg model.navIndex) (TopBar.view model.topModel) ]
+                    , Html.div [ class "bottom" ]
+                        [ Html.div
+                            [ id "pipelines-nav-app"
+                            , class <| "sidebar test" ++ sidebarVisibileAppendage
+                            ]
+                            [ Html.map (SideMsg model.navIndex) (SideBar.view model.sideModel) ]
+                        , Html.div [ id "content" ]
+                            [ Html.div [ id "subpage" ]
+                                [ Html.map (SubMsg model.navIndex) (SubPage.view model.subModel) ]
+                            ]
+                        ]
                     ]
-                    [ Html.map (SideMsg model.navIndex) (SideBar.view model.sideModel) ]
-                , Html.div [ id "content" ]
-                    [ Html.div [ id "subpage" ]
-                        [ Html.map (SubMsg model.navIndex) (SubPage.view model.subModel) ]
-                    ]
-                ]
-            ]
 
 
 subscriptions : Model -> Sub Msg

web/elm/src/NewTopBar.elm

@@ -0,0 +1,66 @@
+module NewTopBar exposing (Model, Msg, init, update, view)
+
+import Concourse
+import Concourse.User
+import Html exposing (Html)
+import Html.Attributes exposing (class, href, src, type_, placeholder)
+import RemoteData exposing (RemoteData)
+
+
+type alias Model =
+    { user : RemoteData.WebData Concourse.User }
+
+
+type Msg
+    = UserFetched (RemoteData.WebData Concourse.User)
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { user = RemoteData.Loading }, fetchUser )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        UserFetched response ->
+            ( { model | user = response }, Cmd.none )
+
+
+showUserInfo : Model -> Html Msg
+showUserInfo model =
+    case model.user of
+        RemoteData.NotAsked ->
+            Html.text "n/a"
+
+        RemoteData.Loading ->
+            Html.text "loading"
+
+        RemoteData.Success user ->
+            Html.text user.team.name
+
+        RemoteData.Failure _ ->
+            Html.text "log in"
+
+
+view : Model -> Html Msg
+view model =
+    Html.div [ class "module-topbar" ]
+        [ Html.div [ class "topbar-logo" ] [ Html.a [ class "logo-image-link", href "#" ] [] ]
+        , Html.div [ class "topbar-search" ]
+            [ Html.form [ class "topbar-search-form" ]
+                [ Html.input [ class "search-input-field", type_ "text", placeholder "search" ] []
+                , Html.button [ class "search-clear-button" ] []
+                ]
+            ]
+        , Html.div [ class "topbar-login" ]
+            [ Html.div [ class "topbar-user-info" ]
+                [ showUserInfo model ]
+            ]
+        ]
+
+
+fetchUser : Cmd Msg
+fetchUser =
+    Cmd.map UserFetched <|
+        RemoteData.asCmd Concourse.User.fetchUser

web/elm/src/SubPage.elm

@@ -364,7 +364,7 @@ view mdl =
             NotFound.view model
 
         DashboardModel model ->
-            Dashboard.view model
+            Html.map DashboardMsg <| Dashboard.view model
 
 
 subscriptions : Model -> Sub Msg