Merge pull request #1904 from visualize-admin/fix/embed-remove-border

fix: Changed EmbedContent to detect chart layout type changes
visualize-admin · Nov 20, 2024 · 99502ea · 99502ea
2 parents c3587b3 + d3f2093
commit 99502ea
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/app/components/publish-actions.tsx b/app/components/publish-actions.tsx
@@ -81,7 +81,12 @@ export const TriggeredPopover = (props: TriggeredPopoverProps) => {
   );
 };
 
-const Embed = ({ chartWrapperRef, configKey, locale }: PublishActionProps) => {
+const Embed = ({
+  chartWrapperRef,
+  configKey,
+  locale,
+  state,
+}: PublishActionProps) => {
   const [iframeHeight, setIframeHeight] = useState(0);
 
   const handlePopoverOpen = useEvent(() => {
@@ -121,6 +126,7 @@ const Embed = ({ chartWrapperRef, configKey, locale }: PublishActionProps) => {
         iframeHeight={iframeHeight}
         configKey={configKey}
         locale={locale}
+        shouldAllowDisablingBorder={shouldAllowDisablingBorder(state)}
       />
     </TriggeredPopover>
   );
@@ -226,12 +232,14 @@ const Share = ({ configKey, locale }: PublishActionProps) => {
 
 type EmbedContentProps = {
   iframeHeight?: number;
-} & Omit<PublishActionProps, "chartWrapperRef">;
+  shouldAllowDisablingBorder?: boolean;
+} & Omit<PublishActionProps, "chartWrapperRef" | "state">;
 
 export const EmbedContent = ({
   locale,
   configKey,
   iframeHeight,
+  shouldAllowDisablingBorder,
 }: EmbedContentProps) => {
   const [embedUrl, setEmbedUrl] = useState("");
   const [embedAEMUrl, setEmbedAEMUrl] = useState("");
@@ -297,20 +305,22 @@ export const EmbedContent = ({
                 "For embedding visualizations in systems without JavaScript support (e.g. WordPress).",
             })}
           />
-          <EmbedToggleSwitch
-            value="remove-border"
-            checked={isWithoutBorder}
-            onChange={handleStylingChange}
-            label={t({
-              id: "publication.embed.iframe.remove-border",
-              message: "Remove border",
-            })}
-            infoMessage={t({
-              id: "publication.embed.iframe.remove-border.warn",
-              message:
-                "For embedding visualizations in systems without a border.",
-            })}
-          />
+          {shouldAllowDisablingBorder && (
+            <EmbedToggleSwitch
+              value="remove-border"
+              checked={isWithoutBorder}
+              onChange={handleStylingChange}
+              label={t({
+                id: "publication.embed.iframe.remove-border",
+                message: "Remove border",
+              })}
+              infoMessage={t({
+                id: "publication.embed.iframe.remove-border.warn",
+                message:
+                  "For embedding visualizations in systems without a border.",
+              })}
+            />
+          )}
         </Flex>
         <CopyToClipboardTextInput
           content={`<iframe src="${embedUrl}" width="100%" style="${isResponsive ? "" : `height: ${iframeHeight || 640}px; `}border: 0px #ffffff none;"  name="visualize.admin.ch"></iframe>${isResponsive ? `<script type="text/javascript">!function(){window.addEventListener("message", function (e) { if (e.data.type === "${CHART_RESIZE_EVENT_TYPE}") { document.querySelectorAll("iframe").forEach((iframe) => { if (iframe.contentWindow === e.source) { iframe.style.height = e.data.height + "px"; } }); } })}();</script>` : ""}`}
@@ -409,3 +419,9 @@ export const ShareContent = ({
     </Box>
   );
 };
+
+export const shouldAllowDisablingBorder = (
+  state?: ConfiguratorStatePublished
+) => {
+  return state?.chartConfigs?.length === 1 && state?.layout.type === "tab";
+};
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
@@ -26,6 +26,7 @@ import { OverflowTooltip } from "@/components/overflow-tooltip";
 import {
   EmbedContent,
   ShareContent,
+  shouldAllowDisablingBorder,
   TriggeredPopover,
 } from "@/components/publish-actions";
 import { RenameDialog } from "@/components/rename-dialog";
@@ -428,7 +429,11 @@ const ProfileVisualizationsRow = (props: {
           }}
           trigger={embedEl}
         >
-          <EmbedContent locale={locale} configKey={config.key} />
+          <EmbedContent
+            shouldAllowDisablingBorder={shouldAllowDisablingBorder(config.data)}
+            locale={locale}
+            configKey={config.key}
+          />
         </TriggeredPopover>
         <TriggeredPopover
           popoverProps={{