Repository: CSCfi/rems
Pull request #1338 (2019-06-12 14:02:05)

Intro texts and small UX improvements
Implements a first pass of #1228. Likely the texts can be improved a lot and should perhaps be customized per instance. REMS demo site should perhaps introduce to REMS concept more than e.g. LBR site.

Also improve the `application-state` component and heading to show the application id and description.

Front page is tuned to match better the included intro text.

Catalogue page texts and sections are a little uneasy on the eyes at the moment. Perhaps they can still be improved.

Perhaps this is enough until more real user feedback.


Patch:
diff --git a/example-theme/extra-translations/en.edn b/example-theme/extra-translations/en.edn
index 5b4c9eb9b..ec7c24640 100644
--- a/example-theme/extra-translations/en.edn
+++ b/example-theme/extra-translations/en.edn
@@ -1,3 +1,3 @@
 {:t
  {:administration {:catalogue-items "Catalogue"}
-  :create-license {:license-text "Licence text"}}}
+  :create-license {:license-text "Text"}}}
diff --git a/example-theme/extra-translations/fi.edn b/example-theme/extra-translations/fi.edn
index cd331eae9..12d7172cd 100644
--- a/example-theme/extra-translations/fi.edn
+++ b/example-theme/extra-translations/fi.edn
@@ -1,11 +1,1 @@
-{:t
- {:actions {:resource "Kielivara"}
-  :administration {:catalogue-item "Kielivara"
-                   :catalogue-items "Kielivarat"
-                   :create-catalogue-item "Uusi kielivara"}
-  :cart {:apply-for-bundle "Hae näitä kielivaroja (%1 kpl) yhdessä "
-         :header "%1 kielivaraa korissa"}
-  :catalogue {:catalogue "Kielivarat"
-              :header "Kielivarat"
-              :apply-resources "Hae uusia kielivaroja"}
-  :navigation {:catalogue "Kielivarat"}}}
\ No newline at end of file
+{:t {}}
diff --git a/resources/translations/en.edn b/resources/translations/en.edn
index 383c8dc7c..d42fb3a1a 100644
--- a/resources/translations/en.edn
+++ b/resources/translations/en.edn
@@ -75,6 +75,7 @@
                             :workflow-in-use "Workflow in use:"}
                    :form "Form"
                    :forms "Forms"
+                   :intro [:div.intro [:p "From here you can manage the REMS datasets. See the menu above."]]
                    :license "License"
                    :license-field "License \"%1\""
                    :licenses "Licenses"
@@ -124,6 +125,7 @@
                           :returned "Changes requested"
                           :submitted "Applied"
                           :unknown "Unknown"}
+                 :intro [:div.intro [:p "By filling and sending in this application, the applicants may be granted the applied resources. All the applicable terms of use must also be accepted by each applicant."]]
                  :my-applications "My Applications"
                  :state "State"
                  :states {:approved "Approved"
@@ -133,19 +135,23 @@
                           :returned "Returned"
                           :submitted "Applied"
                           :unknown "Unknown"}
-                 :latest-activity "Latest activity %1"
+                 :latest-activity "Latest activity"
                  :view "View"}
   :autocomplete {:no-results "No results"
                  :placeholder "Choose or type"}
   :cart {:add "Add to cart"
          :apply "Apply"
          :apply-for-bundle "Apply for %1 resources as a bundle "
+         :empty [:div.intro [:p "Select resources to apply:"]]
          :header "%1 resources in the cart"
+         :intro [:div.intro [:p "Here are the selected resources. If several resources can be applied to with the same application, they will be automatically grouped into a bundle."]]
          :remove "Remove"}
   :catalogue {:catalogue "Catalogue"
               :header "Resource"
+              :intro [:p "The catalogue contains all the resources that you can apply for in this system."]
               :more-info "More info"
-              :continue-existing-application "Continue existing application"
+              :continue-existing-application "Continue application"
+              :continue-existing-application-intro [:div.intro [:p "You have unfinished applications that you can continue from here:"]]
               :apply-resources "Apply for resources"}
   :collapse {:show-less "Show less"
              :show-more "Show more"}
@@ -250,7 +256,7 @@
                       :invalid-value "Invalid value."
                       :required "Field \"%1\" is required."
                       :toolong "Text in field \"%1\" too long."}}
-  :header {:title "Welcome to REMS"}
+  :header {:title "REMS"}
   :item-lists {:move-down "Move down"
                :move-up "Move up"
                :remove "Remove"}
@@ -261,7 +267,9 @@
          :username "Username"}
   :link {:download-file "Download file"
          :opens-in-new-window "Opens in a new window"}
-  :login {:alternative "Other login options"
+:login {:alternative "Other login options"
+:intro [:div [:h1 "Welcome to REMS"] [:p "This is a demo environment for testing the REMS software. The demo environment has a couple of fictional datasets to which you can apply for access. More information is available on " [:a {:href "#/extra-pages/about"} "About"] " page."]
+                  [:p "Please, login to access REMS."]]
           :text "Login with Haka credentials"
           :title "Login"}
   :missing "Missing translation %1"
diff --git a/resources/translations/fi.edn b/resources/translations/fi.edn
index 676ff1620..32a23f564 100644
--- a/resources/translations/fi.edn
+++ b/resources/translations/fi.edn
@@ -75,6 +75,7 @@
                             :workflow-in-use "Työvuo on käytössä:"}
                    :form "Lomake"
                    :forms "Lomakkeet"
+                   :intro [:div.intro [:p "Täällä voit hallinnoida REMSin aineistoja. Valitse alue valikoista yläpuolelta."]]
                    :license "Lisenssi"
                    :license-field "Lisenssi \"%1\""
                    :licenses "Lisenssit"
@@ -124,6 +125,7 @@
                           :returned "Palautettu muokattavaksi"
                           :submitted "Haettu"
                           :unknown "Tuntematon"}
+                 :intro [:div.intro [:p "Täyttämällä ja lähettämällä tämän hakemuksen kaikki hakijat voivat saada oikeuden haettuihin resursseihin. Kunkin hakijan on lisäksi hyväksyttävä käyttöehdot viimeistään hakemuksen käsittelyn jälkeen."]]
                  :my-applications "Omat hakemukset"
                  :state "Tila"
                  :states {:approved "Hyväksytty"
@@ -133,19 +135,23 @@
                           :returned "Palautettu"
                           :submitted "Haettu"
                           :unknown "Tuntematon"}
-                 :latest-activity "Viimeisin toimenpide %1"
+                 :latest-activity "Viimeisin toimenpide"
                  :view "Näytä"}
   :autocomplete {:no-results "Ei tuloksia"
                  :placeholder "Valitse tai kirjoita"}
   :cart {:add "Lisää koriin"
          :apply "Hae"
          :apply-for-bundle "Hae %1 aineistoa yhdessä "
+         :empty [:div.intro [:p "Valitse resursseja haettavaksi:"]]
          :header "%1 aineistoa korissa"
+         :intro [:div.intro [:p "Tässä ovat valitsemasi resurssit. Samalla hakemuksella haettavat resurssit ryhmitellään automaattisesti yhteen."]]
          :remove "Poista"}
   :catalogue {:catalogue "Aineistoluettelo"
               :header "Aineistoluettelo"
+              :intro [:p "Aineistoluettelossa on listattuna kaikki resurssit joita voit tästä järjestelmästä hakea."]
               :more-info "Lisätietoja"
               :continue-existing-application "Jatka hakemusta"
+              :continue-existing-application-intro [:div.intro [:p "Sinulla on keskeneräisiä hakemuksia, joita voit jatkaa tästä:"]]
               :apply-resources "Hae uusia resursseja"}
   :collapse {:show-less "Näytä vähemmän"
              :show-more "Näytä lisää"}
@@ -250,7 +256,7 @@
                       :invalid-value "Arvo ei kelpaa."
                       :required "Kenttä \"%1\" on pakollinen."
                       :toolong "Kentän \"%1\" sisältö on liian pitkä."}}
-  :header {:title "Tervetuloa REMSiin"}
+  :header {:title "REMS"}
   :item-lists {:move-down "Siirrä alas"
                :move-up "Siirrä ylös"
                :remove "Poista"}
@@ -262,6 +268,8 @@
   :link {:download-file "Lataa tiedosto"
          :opens-in-new-window "Aukeaa uuteen ikkunaan"}
   :login {:alternative "Muut kirjautumisvaihtoehdot"
+          :intro [:div [:h1 "Tervetuloa REMSiin"] [:p "Tämä on demo-ympäristö, joka on tarkoitettu REMS-ohjelmiston kokeilemiseen. Demo-ympäristöön on luotu valmiiksi joitain kuvitteellisia tietoaineistoja, joihin voit hakea käyttöoikeutta. Lisätietoja " [:a {:href "#/extra-pages/about"} "Info-sivulla"] "."]
+                  [:p "Ole hyvä ja kirjaudu sisään."]]
           :text "Kirjaudu sisään Haka-tunnuksin"
           :title "Kirjaudu sisään"}
   :missing "Käännös puuttuu %1"
diff --git a/src/clj/rems/css/styles.clj b/src/clj/rems/css/styles.clj
index bce10174d..b880ed89b 100644
--- a/src/clj/rems/css/styles.clj
+++ b/src/clj/rems/css/styles.clj
@@ -281,6 +281,7 @@
    [:h1 :h2 {:font-weight 400}]
    [:h1 :h2 :h3 {:letter-spacing (u/rem 0.17)}]
    [:h4 :h5 :h6 {:letter-spacing (u/rem 0.12)}]
+   [:h1 {:margin-bottom (u/rem 2)}]
    [:#app {:min-height (u/percent 100)
            :flex 1
            :display :flex}]
@@ -463,9 +464,8 @@
    [:.jumbotron
     {:background-color "#fff"
      :text-align "center"
-     :max-width (u/px 420)
-     :margin "30px auto"
      :color "#000"
+     :margin-top (u/rem 2)
      :border-style "solid"
      :border-width (u/px 1)
      :box-shadow (util/get-theme-attribute :collapse-shadow :table-shadow)}
@@ -473,6 +473,7 @@
    [:.login-btn {:max-height (u/px 70)
                  :margin-bottom (u/px 20)}
     [:&:hover {:filter "brightness(80%)"}]]
+   [:.login-component {:max-width (u/px 420)}]
    (generate-rems-table-styles)
    [:.btn.disabled {:opacity 0.25}]
    [:.catalogue-item-link {:color "#fff"
@@ -577,6 +578,7 @@
    [:.new-form-field-option {:text-align "center"}]
 
    [:.full {:width "100%"}]
+   [:.intro {:margin-bottom (u/rem 2)}]
    [:.rectangle {:width (u/px 50)
                  :height (u/px 50)}]
    [:.color-1 {:background-color (util/get-theme-attribute :color1)}]
@@ -634,7 +636,7 @@
                              (-> (util/get-theme-attribute :color1)
                                  (c/saturate -50)
                                  (c/lighten 33)))}]
-   [:h2 {:margin [[(u/rem 1) 0]]}]
+   [:h2 {:margin [[(u/rem 3) 0 (u/rem 1) 0]]}]
 
    ;; application list
    [:.rems-table
diff --git a/src/cljs/rems/administration/administration.cljs b/src/cljs/rems/administration/administration.cljs
index 08931fbda..ab81445fa 100644
--- a/src/cljs/rems/administration/administration.cljs
+++ b/src/cljs/rems/administration/administration.cljs
@@ -93,15 +93,7 @@
        [document-title (text :t.navigation/administration)]
        (if @loading?
          [spinner/big]
-         [:div.spaced-sections
-          {:style {:display :flex
-                   :flex-direction :column
-                   :max-width "15rem"}}
-          [to-catalogue-items [:btn :btn-primary]]
-          [to-resources [:btn :btn-primary]]
-          [to-forms [:btn :btn-primary]]
-          [to-workflows [:btn :btn-primary]]
-          [to-licenses [:btn :btn-primary]]])])))
+         (text :t.administration/intro))])))
 
 
 (defn guide []
diff --git a/src/cljs/rems/application.cljs b/src/cljs/rems/application.cljs
index 3080b1b9a..7f4f47149 100644
--- a/src/cljs/rems/application.cljs
+++ b/src/cljs/rems/application.cljs
@@ -389,7 +389,14 @@
          {:phase :approve :text :t.phases/approve}
          {:phase :result :text :t.phases/approved}]))
 
-(defn- application-header [application]
+(defn- application-id-value [config application]
+  (let [id-column (get config :application-id-column :id)]
+    (case id-column
+      :external-id (:application/external-id application)
+      :id (:application/id application)
+      (:application/id application))))
+
+(defn- application-state [application config]
   (let [state (:application/state application)
         last-activity (:application/last-activity application)
         event-groups (->> (:application/events application)
@@ -402,14 +409,26 @@
                           (map #(map format-event %)))]
     [collapsible/component
      {:id "header"
-      :title [:span#application-state
-              (str
-               (text :t.applications/state)
-               (str ": " (localize-state state)))]
+      :title (text :t.applications/state)
       :always (into [:div
                      [:div.mb-3 {:class (str "state-" (name state))}
                       (phases (get-application-phases state))]
-                     [:h3 (text-format :t.applications/latest-activity (localize-time last-activity))]]
+                     [info-field
+                      (text :t.applications/application)
+                      [:span#application-id (application-id-value config application)]
+                      {:inline? true}]
+                     [info-field
+                      (text :t.actions/description)
+                      (:application/description application)
+                      {:inline? true}]
+                     [info-field
+                      (text :t.applications/state)
+                      [:span#application-state (localize-state state)]
+                      {:inline? true}]
+                     [info-field
+                      (text :t.applications/latest-activity)
+                      (localize-time last-activity)
+                      {:inline? true}]]
                     (when-let [g (first event-groups)]
                       (into [[:h3 (text :t.form/events)]]
                             (render-event-groups [g]))))
@@ -571,7 +590,7 @@
                [:div#resource-action-forms
                 [change-resources-form application can-bundle-all? can-comment? (partial reload! application-id)]]]}]))
 
-(defn- render-application [application edit-application userid]
+(defn- render-application [application edit-application config userid]
   (let [messages (remove nil?
                          [(disabled-items-warning application) ; NB: eval this here so we get nil or a warning
                           (when-let [errors (:validation-errors edit-application)]
@@ -580,9 +599,10 @@
                               :contents [format-validation-errors application errors]}])])]
     [:div
      [:div {:class "float-right"} [pdf-button (:application/id application)]]
-     [document-title (text :t.applications/application)]
+     [document-title (str (text :t.applications/application) " " (application-id-value config application))]
+     (text :t.applications/intro)
      (into [:div] messages)
-     [application-header application]
+     [application-state application config]
      [:div.mt-3 [applicants-info application]]
      [:div.mt-3 [applied-resources application userid]]
      [:div.my-3 [application-fields application edit-application]]
@@ -592,7 +612,8 @@
 ;;;; Entrypoint
 
 (defn application-page []
-  (let [application @(rf/subscribe [::application])
+  (let [config @(rf/subscribe [:rems.config/config])
+        application @(rf/subscribe [::application])
         edit-application @(rf/subscribe [::edit-application])
         userid (get-in @(rf/subscribe [:identity]) [:user :eppn])
         loading? (not application)]
@@ -600,7 +621,7 @@
       [:div
        [document-title (text :t.applications/application)]
        [spinner/big]]
-      [render-application application edit-application userid])))
+      [render-application application edit-application config userid])))
 
 
 ;;;; Guide
diff --git a/src/cljs/rems/auth/auth.cljs b/src/cljs/rems/auth/auth.cljs
index f589ba1f8..e106af13d 100644
--- a/src/cljs/rems/auth/auth.cljs
+++ b/src/cljs/rems/auth/auth.cljs
@@ -6,12 +6,15 @@
 
 (defn login-component []
   (let [config @(rf/subscribe [:rems.config/config])
-        alternative-endpoint (:alternative-login-url config)]
-    (case (:authentication config)
-      :shibboleth (shibboleth/login-component alternative-endpoint)
-      :fake-shibboleth (shibboleth/login-component alternative-endpoint)
-      :ldap (ldap/login-component)
-      nil)))
+        alternative-endpoint (:alternative-login-url config)
+        login-component (case (:authentication config)
+                          :shibboleth (shibboleth/login-component alternative-endpoint)
+                          :fake-shibboleth (shibboleth/login-component alternative-endpoint)
+                          :ldap (ldap/login-component)
+                          nil)]
+    (when login-component
+      [:div.jumbotron.login-component
+       login-component])))
 
 (defn guide []
   [:div
diff --git a/src/cljs/rems/auth/ldap.cljs b/src/cljs/rems/auth/ldap.cljs
index 3608850ad..bfb3e357a 100644
--- a/src/cljs/rems/auth/ldap.cljs
+++ b/src/cljs/rems/auth/ldap.cljs
@@ -3,7 +3,7 @@
             [rems.text :refer [text]]))
 
 (defn login-component []
-  [:div.jumbotron
+  [:div
    [document-title (text :t.ldap/title)]
    [:form
     {:action "/ldap/login" :method "post"}
diff --git a/src/cljs/rems/auth/shibboleth.cljs b/src/cljs/rems/auth/shibboleth.cljs
index d7eea41a3..e6ac20c4a 100644
--- a/src/cljs/rems/auth/shibboleth.cljs
+++ b/src/cljs/rems/auth/shibboleth.cljs
@@ -5,10 +5,10 @@
             [rems.text :refer [text]]))
 
 (defn login-component [alternative-endpoint]
-  [:div.jumbotron
+  [:div
    [document-title (text :t.login/title)]
    [:p (text :t.login/text)]
-   [:div.col-md6
+   [:div
     [atoms/link-to nil
                    (nav/url-dest "/Shibboleth.sso/Login")
                    [atoms/image {:class "login-btn" :alt "Haka"} "/img/haka-logo.jpg"]]]
diff --git a/src/cljs/rems/cart.cljs b/src/cljs/rems/cart.cljs
index 53fe43285..b6504dcd1 100644
--- a/src/cljs/rems/cart.cljs
+++ b/src/cljs/rems/cart.cljs
@@ -69,18 +69,21 @@
 (defn cart-list
   "List of shopping cart items"
   [items language]
-  (when (seq items)
-    [:div.outer-cart.mb-3
-     [:div.inner-cart
-      [:div.cart-title
-       [:i.fa.fa-shopping-cart]
-       [:span (text-format :t.cart/header (count items))]]
-      [:table.rems-table.cart
-       (into [:tbody]
-             (let [key-fn #(select-vals % [:wfid :formid])]
-               (apply concat
-                      (for [group (vals (into (sorted-map) (group-by key-fn items)))]
-                        (group-view (sort-by get-localized-title group) language)))))]]]))
+  (if (seq items)
+    [:div
+     (text :t.cart/intro)
+     [:div.outer-cart.mb-3
+      [:div.inner-cart
+       [:div.cart-title
+        [:i.fa.fa-shopping-cart]
+        [:span (text-format :t.cart/header (count items))]]
+       [:table.rems-table.cart
+        (into [:tbody]
+              (let [key-fn #(select-vals % [:wfid :formid])]
+                (apply concat
+                       (for [group (vals (into (sorted-map) (group-by key-fn items)))]
+                         (group-view (sort-by get-localized-title group) language)))))]]]]
+    (text :t.cart/empty)))
 
 (defn cart-list-container []
   (let [language @(rf/subscribe [:language])
diff --git a/src/cljs/rems/catalogue.cljs b/src/cljs/rems/catalogue.cljs
index 6827ae24d..dc63fd90e 100644
--- a/src/cljs/rems/catalogue.cljs
+++ b/src/cljs/rems/catalogue.cljs
@@ -100,6 +100,7 @@
     (when (seq @(rf/subscribe [applications]))
       [:div
        [:h2 (text :t.catalogue/continue-existing-application)]
+       (text :t.catalogue/continue-existing-application-intro)
        [application-list/component
         {:id applications
          :applications applications
@@ -126,6 +127,7 @@
         loading-drafts? @(rf/subscribe [::loading-drafts?])]
     [:div
      [document-title (text :t.catalogue/catalogue)]
+     (text :t.catalogue/intro)
      (if (or loading-catalogue? loading-drafts?)
        [spinner/big]
        [:div
diff --git a/src/cljs/rems/spa.cljs b/src/cljs/rems/spa.cljs
index 21127686e..0f0c36890 100644
--- a/src/cljs/rems/spa.cljs
+++ b/src/cljs/rems/spa.cljs
@@ -191,7 +191,13 @@
     (do
       (rf/dispatch [:rems.catalogue/enter-page])
       [catalogue-page])
-    [auth/login-component]))
+    [:div
+     [:div.row.justify-content-center
+      [:div.col-md-6.row.justify-content-center
+       (text :t.login/intro)]]
+     [:div.row.justify-content-center
+      [:div.col-md-6.row.justify-content-center
+       [auth/login-component]]]]))
 
 (defn unauthorized-page []
   [:div


Test patch:
diff --git a/test/clj/rems/test_browser.clj b/test/clj/rems/test_browser.clj
index 83a265f22..e24646d77 100644
--- a/test/clj/rems/test_browser.clj
+++ b/test/clj/rems/test_browser.clj
@@ -112,7 +112,7 @@
                               {:fn/text resource-name}
                               {:xpath "./ancestor::tr"}
                               {:css "button.apply-for-catalogue-items"}])
-  (wait-visible *driver* {:tag :h1, :fn/text "Application"})
+  (wait-visible *driver* {:tag :h1, :fn/has-text "Application"})
   (wait-page-loaded)
   (screenshot *driver* (io/file reporting-dir "application-page.png")))
 
@@ -222,7 +222,7 @@
     (check-box "disease_prevention")
 
     (send-application)
-    (is (= "State: Applied" (get-element-text *driver* :application-state)))
+    (is (= "Applied" (get-element-text *driver* :application-state)))
 
     (accept-licenses)
 
diff --git a/test/clj/rems/test_locales.clj b/test/clj/rems/test_locales.clj
index 599bdf03a..e031e491d 100644
--- a/test/clj/rems/test_locales.clj
+++ b/test/clj/rems/test_locales.clj
@@ -94,7 +94,7 @@
                                                    :translations-directory "translations/"
                                                    :theme-path "./example-theme/theme.edn"})]
       (is (= "Catalogue" (getx-in translations [:en :t :administration :catalogue-items])))
-      (is (= "Licence text" (getx-in translations [:en :t :create-license :license-text])))))
+      (is (= "Text" (getx-in translations [:en :t :create-license :license-text])))))
   (testing "extra translations don't override keys that are not defined in extras"
     (let [translations (locales/load-translations {:languages [:en]
                                                    :translations-directory "translations/"