fix: Hide database-related actions in chart previews

CHANGELOG.md

@@ -26,6 +26,7 @@ You can also check the
   - Use most recent value toggle is now correctly displaying in the single
     filters section
   - Dataset browse view is now correctly displayed on mobile devices
+  - Database-related actions are now hidden in preview mode (copy URL, share)
 - Security
   - Added additional protection against data source URL injection
   - Removed feature flag for custom GraphQL endpoint

app/components/chart-published.tsx

@@ -124,10 +124,12 @@ export const ChartPublished = ({
   configKey,
   embedParams,
   shouldShrink,
+  isPreview,
 }: {
   configKey?: string;
   embedParams?: EmbedQueryParams;
   shouldShrink?: boolean;
+  isPreview?: boolean;
 }) => {
   const [state] = useConfiguratorState(isPublished);
   const { dataSource } = state;
@@ -234,6 +236,7 @@ export const ChartPublished = ({
                     metadataPanelStore={metadataPanelStore}
                     embedParams={embedParams}
                     shouldShrink={shouldShrink}
+                    isPreview={isPreview}
                   />
                 </ChartWrapper>
               </ChartTablePreviewProvider>
@@ -285,6 +288,7 @@ type ChartPublishInnerProps = {
   metadataPanelStore: ReturnType<typeof createMetadataPanelStore>;
   embedParams?: EmbedQueryParams;
   shouldShrink?: boolean;
+  isPreview?: boolean;
 };
 
 const ChartPublishedInnerImpl = ({
@@ -297,6 +301,7 @@ const ChartPublishedInnerImpl = ({
   metadataPanelStore,
   embedParams,
   shouldShrink: _shouldShrink,
+  isPreview,
 }: ChartPublishInnerProps) => {
   const { meta } = chartConfig;
   const rootRef = useRef<HTMLDivElement>(null);
@@ -448,6 +453,7 @@ const ChartPublishedInnerImpl = ({
                     chartKey={chartConfig.key}
                     chartWrapperNode={rootRef.current}
                     components={allComponents}
+                    disableDatabaseRelatedActions={isPreview}
                   />
                 </ActionElementsContainer>
               )}

app/components/chart-shared.tsx

@@ -164,11 +164,13 @@ export const ChartMoreButton = ({
   chartKey,
   chartWrapperNode,
   components,
+  disableDatabaseRelatedActions,
 }: {
   configKey?: string;
   chartKey: string;
   chartWrapperNode?: HTMLElement | null;
   components: Component[];
+  disableDatabaseRelatedActions?: boolean;
 }) => {
   const locale = useLocale();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
@@ -227,7 +229,9 @@ export const ChartMoreButton = ({
                 />
               </>
             ) : null}
-            {state.layout.type !== "dashboard" && configKey ? (
+            {state.layout.type !== "dashboard" &&
+            configKey &&
+            !disableDatabaseRelatedActions ? (
               <>
                 <CopyChartMenuActionItem configKey={configKey} />
                 <ShareChartMenuActionItem configKey={configKey} />

app/pages/preview.tsx

@@ -8,10 +8,10 @@ import {
   ConfiguratorStatePublished,
   decodeConfiguratorState,
 } from "@/config-types";
+import { ConfiguratorStateProvider } from "@/configurator/configurator-state";
 import { GraphqlProvider } from "@/graphql/graphql-provider";
 import { i18n } from "@/locales/locales";
 import { LocaleProvider, useLocale } from "@/locales/use-locale";
-import { ConfiguratorStateProvider } from "@/src";
 import * as federalTheme from "@/themes/theme";
 import { migrateConfiguratorState } from "@/utils/chart-config/versioning";
 import { hashStringToObject } from "@/utils/hash-utils";
@@ -101,7 +101,7 @@ export default function Preview() {
                 chartId="published"
                 initialState={state}
               >
-                <ChartPublished configKey="preview" {...state} />
+                <ChartPublished configKey="preview" isPreview {...state} />
               </ConfiguratorStateProvider>
             ) : null}
           </ThemeProvider>

app/pages/preview_post.tsx

@@ -82,7 +82,11 @@ export default function Preview({ configuratorState, locale }: PageProps) {
                 chartId="published"
                 initialState={parsedState}
               >
-                <ChartPublished configKey="preview" {...parsedState} />
+                <ChartPublished
+                  configKey="preview"
+                  isPreview
+                  {...parsedState}
+                />
               </ConfiguratorStateProvider>
             ) : null}
           </ThemeProvider>