Introduce a function to create nested closable modal

[vedhav]

Introduces nested_closeable_modal() that can create nested popups inside an already existing popup.
This will be used in the teal PR #930 as per the discussion in the PR.

Run the example to check it out:

devtools::load_all("teal.widgets")
ui <- fluidPage(
  shinyjs::useShinyjs(),
  actionButton("show_1", "$('#modal_1').modal('show')"),
  nested_closeable_modal(
    "modal_1",
    modal_args = list(
      size = "l",
      title = "First Modal",
      easyClose = TRUE,
      footer = NULL
    ),
    tags$div(
      "This modal can be closed by running", tags$code("$('#modal_1').modal('hide')"), "in the JS console!",
      tags$br(),
      "Note that the second modal is placed right within this modal",
      tags$br(),
      "Alternatively, calling the", tags$code("removeModal()"), "will remove all the active modal popups",
      tags$br(), tags$br(),
      actionButton("show_2", "$('#modal_2').modal('show')"),
      actionButton("hide_1", "$('#modal_1').modal('hide')"),
      nested_closeable_modal(
        id = "modal_2",
        modal_args = list(
          size = "m",
          title = "Second Modal",
          footer = NULL,
          easyClose = TRUE
        ),
        div(
          "This modal can be closed by running", tags$code("$('#modal_1').modal('hide')"), "in the JS console!",
          "Note that removing the parent will remove the child. But, reopening will remember the open state of child",
          actionButton("hide_2", "$('#modal_2').modal('hide')"),
          actionButton("hide_all", "$('#modal_1').modal('hide')")
        )
      )
    )
  )
)
server <- function(input, output) {
  observeEvent(input$show_1, {
    shinyjs::runjs("$('#modal_1').modal('show')")
  })
  observeEvent(input$show_2, {
    shinyjs::runjs("$('#modal_2').modal('show')")
  })
  observeEvent(c(input$hide_1, input$hide_all), {
    shinyjs::runjs("$('#modal_1').modal('hide')")
  })
  observeEvent(input$hide_2, {
    shinyjs::runjs("$('#modal_2').modal('hide')")
  })
}

shiny::shinyApp(ui, server)

[github-actions]

Code Coverage Summary

Filename                      Stmts    Miss  Cover    Missing
--------------------------  -------  ------  -------  --------------------------------------------
R/basic_table_args.R             23       0  100.00%
R/draggable_buckets.R            82      82  0.00%    57-152
R/get_dt_rows.R                  13      13  0.00%    41-53
R/ggplot2_args.R                 49       0  100.00%
R/include_css_js.R                7       1  85.71%   17
R/nested_closeable_modal.R       16      16  0.00%    81-96
R/optionalInput.R               255     212  16.86%   163-461, 515, 568, 574, 589-602
R/panel_group.R                  90      90  0.00%    12-132
R/plot_with_settings.R          382      21  94.50%   289-302, 361-362, 373-374, 624-625, 627, 629
R/standard_layout.R              35       0  100.00%
R/table_with_settings.R         173       1  99.42%   83
R/utils.R                        11       1  90.91%   7
R/verbatim_popup.R               99      49  50.51%   63-78, 104-105, 107, 115-143, 164
R/white_small_well.R              7       7  0.00%    18-24
TOTAL                          1242     493  60.31%

Diff against main

Filename                      Stmts    Miss  Cover
--------------------------  -------  ------  --------
R/nested_closeable_modal.R      +16     +16  +100.00%
TOTAL                           +16     +16  -0.79%

Results for commit: adaf213

Minimum allowed coverage is 80%

♻️ This comment has been updated with latest results

[github-actions]

Unit Tests Summary

    1 files    10 suites   17s ⏱️
101 tests 101 ✔️ 0 💤 0 ❌
208 runs  208 ✔️ 0 💤 0 ❌

Results for commit adaf213.

♻️ This comment has been updated with latest results.

[m7pr]

Hey @vedhav , extremely helpful function. I just left few notes about phrasing and WORDLIST inputs

[chlebowa]

@vedhav
I know it's a bit late but I've been checking the example for nested_closeable_modal and I wonder if this is the intended behavior. When I close the inner modal, both are closed but when I reopen the outer one, both remain open.

multimodal.mp4

[vedhav]

Yes, this is intended because this creates flexibility to keep the secondary modal open. If this is not needed the user can simply do a:

shinyjs::runjs("$('#modal_1').modal('hide')")
shinyjs::runjs("$('#modal_2').modal('hide')")

[chlebowa]

It seems to me that nested_closeable_modal could take a modal (meaning the shiny.tag that results from a modalDialog call) run tagQuery on it. Then one could do modalDialog() %>% nested_closeable_modal(), which is 1) simple and 2) familiar from packages like shinycssloaders. Not that we would use pipes, of course.

Is there a particular reason for not doing that? Is it because id has to be exposed? Can it not be extracted from the shiny.tag?

[vedhav]

That's a good idea @chlebowa I did not think about such implementation. But I feel that placing a "nested" modal inside another modal by actually placing it seemed like an intuitive way for users to use this function. Do you not feel this way?

[chlebowa]

I don't follow.

[vedhav]

My understanding is that you were proposing a different implementation for nested_closeable_modal one that will allow the users to chain the nested modals and use the parent modal's shiny.tag to extract the id and keep it simple. Was this not what you meant? I was thinking about shinycssloaders::withSpinner() when you mentioned it as an example.

[chlebowa]

No, I was referring to the id argument of nested_closeable_modal. I see now that I was mistaken. I thought it was the id that the modal gets automatically but it is one that you specifically add to it so that it han be targeted by hide/show messages.

Still, you could do modalDialog() %>% nested_closeable_modal(., id = <"id">)

[m7pr]

@vedhav @chlebowa is this discussion finished or there is anything more to say in here?

[chlebowa]

The PR is closed but I don't think the discussion is.