Styling refresh of disconnect dialogue

R/custom_disconnect_message.R

@@ -9,6 +9,7 @@
 #' @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
 #'
@@ -18,20 +19,20 @@
 #'
 #' @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 <- 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) {
@@ -53,18 +54,29 @@
     "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,34 +93,27 @@
       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 ",
+            "All the data used in this dashboard can also be viewed or downloaded via the ",
             tags$a(
               href = publication_link,
               publication_name
@@ -117,12 +122,9 @@
           )
         },
         tags$p(
-          "Please contact",
-          tags$a(
-            href = "mailto:[email protected]",
-            "[email protected]"
-          ),
-          "with details of any problems with this resource."
+          "Feel free to contact",
+          tags$a(href = "mailto:[email protected]", "[email protected]"),
+          "if you require further support."
         )
       )
     ),
@@ -138,5 +140,6 @@
           }"
       )
     ))
-  )
+  ) |>
+    htmltools::attachDependencies(dependency, append = TRUE)
 }

inst/www/css/disconnect-dialogue.css

@@ -0,0 +1,36 @@
+#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: #ffffff !important;
+             color: #000000 !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-style: solid !important;
+             border-color: #ffdd00 !important;
+             border-width: 0.25em !important;
+             box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px !important;
+          }

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;