Fix bug where a valuebox with a non-bsicon showcase value would power…

… through and erase the showcase value and replace it with bsicon("undefined") instead.
rstudio · Apr 7, 2023 · aefb778 · aefb778
1 parent a41fa01
commit aefb778
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 26 deletions.
diff --git a/inst/editor/src/App.css b/inst/editor/src/App.css
@@ -86,6 +86,8 @@
   --size-md: 12px;
   --size-lg: 20px;
   --size-xl: 28px;
+
+  --height-sm: 25px;
 }
 
 * {

diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/ValueBox/ValueBox.module.css b/inst/editor/src/Shiny-Ui-Elements/Bslib/ValueBox/ValueBox.module.css
@@ -62,3 +62,8 @@ of the card */
 .card_value span {
   font-size: 1.5rem;
 }
+
+.replace_showcase_btn {
+  width: 100%;
+  height: var(--height-sm);
+}
diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/ValueBox/ValueBox.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/ValueBox/ValueBox.tsx
@@ -6,12 +6,15 @@ import {
 } from "r-ast-parsing/src/node_builders";
 
 import icon from "../../../assets/icons/shinyValueBox.png";
+import { PopoverButton } from "../../../components/Inputs/PopoverButton";
 import { RadioInputs } from "../../../components/Inputs/RadioInputs/RadioInputsSimple";
 import { InputLabelWrapper } from "../../../components/Inputs/SettingsFormBuilder/SettingsInput/SettingsInput";
 import { DropWatcherPanel } from "../../../DragAndDropHelpers/DropWatcherPanel";
 import { mergeClasses } from "../../../utils/mergeClasses";
+import { isShinyUiNode } from "../../isShinyUiNode";
 import { nodeInfoFactory } from "../../nodeInfoFactory";
 import type { ShinyUiNode, UiNodeComponent } from "../../uiNodeTypes";
+import { isUnknownUiNode } from "../../UnknownUiFunction";
 import { CardChildrenWithDropNodes } from "../Utils/ChildrenWithDropNodes";
 
 import { BsIcon } from "./BsIcon";
@@ -25,7 +28,8 @@ const layout_dir_to_code = {
 
 type ValueBoxArgs = {
   title: string;
-  showcase_icon: string;
+  showcase_icon?: string;
+  showcase?: unknown;
   value: ShinyUiNode;
   showcase_layout?: keyof typeof layout_dir_to_code;
 };
@@ -47,7 +51,7 @@ const ValueBox: UiNodeComponent<ValueBoxArgs, { TakesChildren: true }> = ({
         )}
       >
         <div className={styles.showcase}>
-          <BsIcon icon_name={namedArgs.showcase_icon} />
+          <BsIcon icon_name={namedArgs.showcase_icon ?? "question-circle"} />
         </div>
         <div className={styles.content}>
           <h5 className={styles.card_title}>{namedArgs.title}</h5>
@@ -88,8 +92,13 @@ export const bslibValueBoxInfo = nodeInfoFactory<ValueBoxArgs>()({
     },
     showcase_icon: {
       inputType: "omitted",
+      optional: true,
       defaultValue: "database",
     },
+    showcase: {
+      inputType: "omitted",
+      optional: true,
+    },
     value: {
       inputType: "ui-node",
       defaultValue: {
@@ -109,18 +118,35 @@ export const bslibValueBoxInfo = nodeInfoFactory<ValueBoxArgs>()({
     return (
       <div>
         <InputLabelWrapper
-          label="Choose icon for showcase"
+          label={`Showcase ${settings.showcase_icon ? "Icon" : "Value"}`}
           labelId="showcase-icon"
           mainInput={
-            <IconSelector
-              initialValue={settings.showcase_icon}
-              onIconSelect={(icon_name) => {
-                onSettingsChange?.("showcase_icon", {
-                  type: "UPDATE",
-                  value: icon_name,
-                });
-              }}
-            />
+            settings.showcase_icon ? (
+              <IconSelector
+                initialValue={settings.showcase_icon}
+                onIconSelect={(icon_name) => {
+                  onSettingsChange?.("showcase_icon", {
+                    type: "UPDATE",
+                    value: icon_name,
+                  });
+                }}
+              />
+            ) : (
+              <PopoverButton
+                className={styles.replace_showcase_btn}
+                use_markdown={true}
+                popoverContent="Replace current showcase value with an icon from the
+                  bsicons package."
+                onClick={() => {
+                  onSettingsChange?.("showcase_icon", {
+                    type: "UPDATE",
+                    value: "database",
+                  });
+                }}
+              >
+                Replace with icon
+              </PopoverButton>
+            )
           }
         />
         <InputLabelWrapper
@@ -157,13 +183,22 @@ export const bslibValueBoxInfo = nodeInfoFactory<ValueBoxArgs>()({
   },
   code_gen_R: {
     print_named_args: (args, render_child) => {
-      const { title, showcase_icon, value, showcase_layout } = args;
+      const { title, showcase_icon, showcase, value, showcase_layout } = args;
 
-      const named_args = [
-        `title = "${title}"`,
-        `value = ${render_child(value)}`,
-        `showcase = bsicons::bs_icon("${showcase_icon}")`,
-      ];
+      let named_args = [`title = "${title}"`, `value = ${render_child(value)}`];
+
+      // We need to do a little dancing to make sure that the showcase icon
+      // doesn't wipe out another type of showcase the user may have and also to
+      // make sure we preserve any non-icon showcases
+      if (showcase_icon) {
+        named_args.push(`showcase = bsicons::bs_icon("${showcase_icon}")`);
+      } else if (
+        showcase &&
+        isShinyUiNode(showcase) &&
+        isUnknownUiNode(showcase)
+      ) {
+        named_args.push(`showcase = ${render_child(showcase)}`);
+      }
 
       if (showcase_layout) {
         named_args.push(

diff --git a/inst/editor/src/components/Inputs/PopoverButton.tsx b/inst/editor/src/components/Inputs/PopoverButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import type { TooltipOptions } from "../PopoverEl/FloatingPopover";
 import {
+  MarkdownTooltipContent,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -13,11 +14,20 @@ type ButtonCompProps = React.ComponentProps<typeof Button>;
 export const PopoverButton: React.FC<
   TooltipOptions &
     ButtonCompProps & {
-      popoverContent: React.ReactNode;
       tooltipClass?: string;
-    }
+    } & (
+      | {
+          use_markdown: true;
+          popoverContent: string;
+        }
+      | {
+          use_markdown?: false;
+          popoverContent: React.ReactNode;
+        }
+    )
 > = ({
   placement = "right",
+  use_markdown = false,
   popoverContent,
   tooltipClass,
   ...passthroughProps
@@ -27,9 +37,13 @@ export const PopoverButton: React.FC<
       <TooltipTrigger asChild>
         <Button {...passthroughProps} />
       </TooltipTrigger>
-      <TooltipContent>
-        <div className={tooltipClass}>{popoverContent}</div>
-      </TooltipContent>
+      {use_markdown ? (
+        <MarkdownTooltipContent content={popoverContent as string} />
+      ) : (
+        <TooltipContent>
+          <div className={tooltipClass}>{popoverContent}</div>
+        </TooltipContent>
+      )}
     </Tooltip>
   );
 };
diff --git a/inst/editor/src/components/Inputs/RadioInputs/RadioInputs.module.css b/inst/editor/src/components/Inputs/RadioInputs/RadioInputs.module.css
@@ -13,7 +13,7 @@
 }
 
 .option {
-  height: 25px;
+  height: var(--height-sm);
   width: 100%;
 }
 

diff --git a/scratch/single-file-app/app.R b/scratch/single-file-app/app.R
@@ -69,7 +69,7 @@ ui <- grid_page(
       value_box(
         title = "Look at me!",
         value = "Big number!",
-        showcase = bsicons::bs_icon("github")
+        showcase = bsicons::bs_icon("database")
       )
     )
   )

diff --git a/scratch/start_editor_non_interactive.R b/scratch/start_editor_non_interactive.R
@@ -4,5 +4,5 @@ launch_editor(
   app_loc =  here::here("scratch/single-file-app/"),
   port = 8888,
   launch_browser = FALSE,
-  stop_on_browser_close = TRUE
+  stop_on_browser_close = FALSE
 )