Merge pull request #61 from dfe-analytical-services/enhancement/disco…

…nnect-gds-restyle

Styling refresh of disconnect dialogue

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dfeshiny
 Title: DfE R Shiny Standards
-Version: 0.5.0
+Version: 0.5.1
 Authors@R: c(
     person("Rich", "Bielby", , "[email protected]", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0001-9070-9969")),

NEWS.md

@@ -1,3 +1,7 @@
+# dfeshiny 0.5.1
+
+* Refresh of disconnect dialogue message and styling
+
 # dfeshiny 0.5.0
 
 ## New features

R/custom_disconnect_message.R

@@ -2,36 +2,49 @@
 #'
 #'
 #' @description
-#' Create the HTML overlay panel to appear when RSConnect disconnects
+#' Create the HTML overlay panel to appear when a user loses connection to a dashboard.
 #'
 #' @param refresh the text to appear that will refresh the page when clicked
-#' @param links A list of mirrors or alternative links to the dashboard
+#' @param links A vector of possible URLs for the public site. Should mostly just be a single URL,
+#' but can be two URLs if an overflow site has been set up
 #' @param publication_name The parent publication name
 #' @param publication_link The link to the publication on Explore Education
 #' Statistics
+#' @param dashboard_title Title of the dashboard
 #'
 #' @importFrom htmltools tags tagList
 #'
-#' @return A HTML overlay panel that appears when RSConnect disconnects for a
-#' public R Shiny dashboard in DfE
+#' @return A HTML overlay panel that appears when a user loses connection to a DfE R Shiny
+#' dashboard.
 #' @export
 #'
 #' @examples
 #' custom_disconnect_message(
+#'   dashboard_title = "DfE Shiny Template",
 #'   refresh = "Refresh page",
 #'   links = c(
-#'     "https://department-for-education.shinyapps.io/dfe-shiny-template/",
+#'     "https://department-for-education.shinyapps.io/dfe-shiny-template",
 #'     "https://department-for-education.shinyapps.io/dfe-shiny-template-overflow/"
 #'   ),
 #'   publication_name = "Explore Education Statistics Publication",
 #'   publication_link =
 #'     "https://explore-education-statistics.service.gov.uk/find-statistics/apprenticeships"
 #' )
 #'
-custom_disconnect_message <- function(refresh = "Refresh page",
-                                      links = NULL,
-                                      publication_name = NULL,
-                                      publication_link = NULL) {
+#' custom_disconnect_message(
+#'   dashboard_title = "DfE Shiny Template",
+#'   refresh = "Refresh page",
+#'   links = c(
+#'     "https://department-for-education.shinyapps.io/dfe-shiny-template"
+#'   )
+#' )
+#'
+custom_disconnect_message <- function(
+    refresh = "Refresh page",
+    dashboard_title = NULL,
+    links = NULL,
+    publication_name = NULL,
+    publication_link = NULL) {
   # Check links are valid
 
   is_valid_sites_list <- function(sites) {
@@ -46,25 +59,37 @@ custom_disconnect_message <- function(refresh = "Refresh page",
     stop("You have entered an invalid site link in the links argument.")
   }
 
+
   pub_prefix <- c(
     "https://explore-education-statistics.service.gov.uk/find-statistics/",
     "https://www.explore-education-statistics.service.gov.uk/find-statistics/",
     "https://www.gov.uk/",
     "https://gov.uk/"
   )
 
-  is_valid_publication_link <- function(link) {
-    startsWith(stringr::str_trim(link), pub_prefix)
-  }
+  if (!is.null(publication_link)) {
+    is_valid_publication_link <- function(link) {
+      startsWith(stringr::str_trim(link), pub_prefix)
+    }
 
-  if (RCurl::url.exists(publication_link) == FALSE ||
-    (TRUE %in% is_valid_publication_link(publication_link)) == FALSE || # nolint: [indentation_linter]
-    publication_link %in% pub_prefix) {
-    stop("You have entered an invalid publication link in the publication_link
+    if (RCurl::url.exists(publication_link) == FALSE ||
+      (TRUE %in% is_valid_publication_link(publication_link)) == FALSE || # nolint: [indentation_linter]
+      publication_link %in% pub_prefix) {
+      stop("You have entered an invalid publication link in the publication_link
          argument.")
+    }
   }
 
   checkmate::assert_string(refresh)
+
+  # Attach CSS from inst/www/css/visually-hidden.css
+  dependency <- htmltools::htmlDependency(
+    name = "disconnect-dialogue",
+    version = as.character(utils::packageVersion("dfeshiny")[[1]]),
+    src = c(href = "dfeshiny/css"),
+    stylesheet = "disconnect-dialogue.css"
+  )
+
   tagList(
     tags$script(
       paste0(
@@ -81,48 +106,44 @@ custom_disconnect_message <- function(refresh = "Refresh page",
       style = "display: none !important;",
       tags$div(
         id = "ss-connect-refresh",
-        tags$p("You've lost connection to the dashboard server - please try
-               refreshing the page:"),
-        tags$p(tags$a(
-          id = "ss-reload-link",
-          href = "#", "Refresh page",
-          onclick = "window.location.reload(true);"
-        )),
+        role = "alert",
+        tags$p(
+          "Sorry, you have lost connection to the",
+          dashboard_title,
+          "dashboard at the moment, please ",
+          tags$a(
+            id = "ss-reload-link",
+            href = "#", "refresh the page",
+            onclick = "window.location.reload(true);",
+            .noWS = c("after")
+          ),
+          "."
+        ),
         if (length(links) > 1) {
           tags$p(
-            "If this persists, you can also view the dashboard at one of our
-            mirror sites:",
-            tags$p(
-              tags$a(href = links[1], "Site 1"),
-              " - ",
-              tags$a(href = links[2], "Site 2"),
-              if (length(links) == 3) {
-                "-"
-              },
-              if (length(links) == 3) {
-                tags$a(href = links[3], "Site 3")
-              }
-            )
+            "If you are still experiencing issues, please try our",
+            tags$a(href = links[2], "alternative site", .noWS = c("after")),
+            ". Apologies for the inconvenience."
           )
         },
         if (!is.null(publication_name)) {
           tags$p(
-            "All the data used in this dashboard can also be viewed or
-            downloaded via the ",
-            tags$a(
+            "All the data used in this dashboard can also be viewed or downloaded via the ",
+            dfeshiny::external_link(
               href = publication_link,
               publication_name
             ),
-            "on Explore Education Statistics."
+            " on Explore Education Statistics."
           )
         },
         tags$p(
-          "Please contact",
-          tags$a(
-            href = "mailto:[email protected]",
-            "[email protected]"
+          "Feel free to contact ",
+          dfeshiny::external_link(
+            href = "mailto:[email protected]",
+            "[email protected]",
+            add_warning = FALSE
           ),
-          "with details of any problems with this resource."
+          " if you require further support."
         )
       )
     ),
@@ -138,5 +159,6 @@ custom_disconnect_message <- function(refresh = "Refresh page",
           }"
       )
     ))
-  )
+  ) |>
+    htmltools::attachDependencies(dependency, append = TRUE)
 }

inst/www/css/disconnect-dialogue.css

@@ -0,0 +1,36 @@
+#ss-connect-dialog { display: none; }
+#shiny-disconnected-overlay { display: none; }
+
+#ss-overlay {
+             background-color: #000000;
+             opacity: 0.6;
+             position: fixed;
+             top: 0;
+             left: 0;
+             bottom: 0;
+             right: 0;
+             z-index: 99998;
+             overflow: hidden;
+             cursor: not-allowed;
+          }
+
+#custom-disconnect-dialog {
+             background: #ffffff;
+             color: #000000;
+             width: full;
+             transform: translateX(-50%) translateY(-50%);
+             font-size: 16px;
+             top: 50%;
+             position: fixed;
+             bottom: auto;
+             left: 50%;
+             padding: 0.8em 1.5em;
+             text-align: left;
+             height: auto;
+             opacity: 1;
+             z-index: 99999;
+             border-style: solid;
+             border-color: #ffdd00;
+             border-width: 0.25em;
+             box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px;
+          }

tests/test_dashboard/www/dfe_shiny_gov_style.css

@@ -231,41 +231,6 @@ template. 80% works well here to reduce white space on the right hand side.*/
      color: #ffffff;
 }
 
-#ss-connect-dialog { display: none !important; }
-#shiny-disconnected-overlay { display: none !important; }
-
-#ss-overlay {
-             background-color: #000000 !important;
-             opacity: 0.6 !important;
-             position: fixed !important;
-             top: 0 !important;
-             left: 0 !important;
-             bottom: 0 !important;
-             right: 0 !important;
-             z-index: 99998 !important;
-             overflow: hidden !important;
-             cursor: not-allowed !important;
-          }
-
-#custom-disconnect-dialog {
-             background: #000000 !important;
-             color: #FFFFFF !important;
-             width: full !important;
-             transform: translateX(-50%) translateY(-50%) !important;
-             font-size: 16px !important;
-             top: 50% !important;
-             position: fixed !important;
-             bottom: auto !important;
-             left: 50% !important;
-             padding: 0.8em 1.5em !important;
-             text-align: center !important;
-             height: auto !important;
-             opacity: 1 !important;
-             z-index: 99999 !important;
-             border-radius: 3px !important;
-             box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px !important;
-          }
-
 .govuk-width-container {
     width: 100% !important;
     max-width: 100% !important;