@finos/legend-application-query 13.8.7 → 13.8.9

package/src/components/__test-utils__/QueryEditorComponentTestUtils.tsx

@@ -42,6 +42,7 @@ import {
   QueryDataProductNativeExecutionContextInfo,
   ModelAccessPointGroup,
   V1_PureGraphManager,
+  type V1_DataProductArtifact,
 } from '@finos/legend-graph';
 import { DepotServerClient } from '@finos/legend-server-depot';
 import {
@@ -76,6 +77,7 @@ import {
 } from '@finos/legend-application/browser';
 import {
   generateExistingQueryEditorRoute,
+  generateDataProductSampleQueryRoute,
   LEGEND_QUERY_ROUTE_PATTERN,
 } from '../../__lib__/LegendQueryNavigation.js';
 import {
@@ -90,6 +92,8 @@ import {
 import { LegendQueryDataProductQueryBuilderState } from '../../stores/data-product/query-builder/LegendQueryDataProductQueryBuilderState.js';
 import { DataProductSelectorState } from '../../stores/data-space/DataProductSelectorState.js';
 import { DataSpaceTemplateQueryCreatorStore } from '../../stores/data-space/DataSpaceTemplateQueryCreatorStore.js';
+import { DataProductSampleQueryCreatorStore } from '../../stores/data-product/DataProductSampleQueryCreatorStore.js';
+import { DataProductSampleQueryCreator } from '../data-product/DataProductSampleQueryCreator.js';
 
 const TEST_QUERY_ID = 'test-query-id';
 const TEST_GROUP_ID = 'test-group';
@@ -97,6 +101,8 @@ const TEST_ARTIFACT_ID = 'test-artifact';
 const TEST_VERSION_ID = 'test-version';
 const TEST_TEMPLATE_QUERY_ID = 'templateQuery';
 const TEST_DATA_SPACE_PATH = 'domain::COVIDDatapace';
+const TEST_SAMPLE_QUERY_ID = 'sampleQuery';
+const TEST_DATA_PRODUCT_PATH = 'test::MyDataProduct';
 export const TEST_QUERY_NAME = 'MyTestQuery';
 
 export const TEST__provideMockedQueryEditorStore = (customization?: {
@@ -775,13 +781,15 @@ export const TEST__setUpDataProductExistingQueryEditor = async (
     async () => {
       /* no-op for tests */
     },
+    async () => {
+      throw new Error('Not implemented in tests');
+    },
     new DataProductSelectorState(
       MOCK__editorStore.depotServerClient,
       MOCK__editorStore.applicationStore,
     ),
     undefined,
     undefined,
-    undefined,
     MOCK__editorStore.applicationStore.config.options.queryBuilderConfig,
     {
       groupId: 'test.group',
@@ -790,7 +798,11 @@ export const TEST__setUpDataProductExistingQueryEditor = async (
       dataProduct: dataProductPath,
     },
   );
-  mockQueryBuilderState.initWithDataProduct(dataProduct, executionState);
+  mockQueryBuilderState.initWithDataProduct(
+    dataProduct,
+    undefined,
+    executionState,
+  );
 
   MOCK__editorStore.buildGraph = createMock();
   MOCK__editorStore.buildFullGraph = createMock();
@@ -841,6 +853,7 @@ export const TEST__setUpDataProductNativeExistingQueryEditor = async (
   executionKey: string,
   lambda: RawLambda,
   entities: PlainObject<Entity>[],
+  artifact?: V1_DataProductArtifact | undefined,
 ): Promise<{
   renderResult: RenderResult;
   queryBuilderState: QueryBuilderState;
@@ -970,20 +983,22 @@ export const TEST__setUpDataProductNativeExistingQueryEditor = async (
     QueryBuilderDataBrowserWorkflow.INSTANCE,
     new QueryBuilderActionConfig_QueryApplication(MOCK__editorStore),
     dataProduct,
-    undefined,
+    artifact,
     executionState,
     MOCK__editorStore.depotServerClient,
     { groupId: 'test.group', artifactId: 'test-artifact', versionId: '0.0.0' },
     async () => {
       /* no-op for tests */
     },
+    async () => {
+      throw new Error('Not implemented in tests');
+    },
     new DataProductSelectorState(
       MOCK__editorStore.depotServerClient,
       MOCK__editorStore.applicationStore,
     ),
     undefined,
     undefined,
-    undefined,
     MOCK__editorStore.applicationStore.config.options.queryBuilderConfig,
     {
       groupId: 'test.group',
@@ -992,7 +1007,11 @@ export const TEST__setUpDataProductNativeExistingQueryEditor = async (
       dataProduct: dataProductPath,
     },
   );
-  mockQueryBuilderState.initWithDataProduct(dataProduct, executionState);
+  mockQueryBuilderState.initWithDataProduct(
+    dataProduct,
+    undefined,
+    executionState,
+  );
 
   MOCK__editorStore.buildGraph = createMock();
   MOCK__editorStore.buildFullGraph = createMock();
@@ -1036,3 +1055,216 @@ export const TEST__setUpDataProductNativeExistingQueryEditor = async (
     ),
   };
 };
+
+export const TEST__provideMockedDataProductSampleQueryCreatorStore =
+  (customization?: {
+    mock?: DataProductSampleQueryCreatorStore;
+    applicationStore?: LegendQueryApplicationStore;
+    pluginManager?: LegendQueryPluginManager;
+    extraPlugins?: AbstractPlugin[];
+    extraPresets?: AbstractPreset[];
+  }): DataProductSampleQueryCreatorStore => {
+    const pluginManager =
+      customization?.pluginManager ?? LegendQueryPluginManager.create();
+    pluginManager
+      .usePlugins([
+        new Core_LegendQueryApplicationPlugin(),
+        ...(customization?.extraPlugins ?? []),
+      ])
+      .usePresets([...(customization?.extraPresets ?? [])])
+      .install();
+    const applicationStore =
+      customization?.applicationStore ??
+      new ApplicationStore(
+        TEST__getTestLegendQueryApplicationConfig(),
+        pluginManager,
+      );
+    const depotServerClient = new DepotServerClient({
+      serverUrl: applicationStore.config.depotServerUrl,
+    });
+    depotServerClient.setTracerService(applicationStore.tracerService);
+    const value =
+      customization?.mock ??
+      new DataProductSampleQueryCreatorStore(
+        applicationStore,
+        depotServerClient,
+        TEST_GROUP_ID,
+        TEST_ARTIFACT_ID,
+        TEST_VERSION_ID,
+        TEST_DATA_PRODUCT_PATH,
+        TEST_SAMPLE_QUERY_ID,
+        { fips: 'value' },
+      );
+    const MOCK__QueryEditorStoreProvider = require('../QueryEditorStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-require-imports,@typescript-eslint/no-unsafe-assignment
+    MOCK__QueryEditorStoreProvider.useQueryEditorStore = createMock();
+    MOCK__QueryEditorStoreProvider.useQueryEditorStore.mockReturnValue(value);
+    return value;
+  };
+
+export const TEST__setUpDataProductSampleQueryEditor = async (
+  MOCK__editorStore: DataProductSampleQueryCreatorStore,
+  dataProductPath: string,
+  executionKey: string,
+  lambda: RawLambda,
+  entities: PlainObject<Entity>[],
+  artifact: V1_DataProductArtifact,
+): Promise<{
+  renderResult: RenderResult;
+  queryBuilderState: QueryBuilderState;
+}> => {
+  const projectData = {
+    id: 'test-id',
+    groupId: MOCK__editorStore.groupId,
+    artifactId: MOCK__editorStore.artifactId,
+    projectId: 'test-project-id',
+    versions: [MOCK__editorStore.versionId],
+    latestVersion: MOCK__editorStore.versionId,
+  };
+
+  const graphManagerState = MOCK__editorStore.graphManagerState;
+
+  await graphManagerState.graphManager.initialize({
+    env: 'test',
+    tabSize: 2,
+    clientConfig: {},
+  });
+  await graphManagerState.initializeSystem();
+  await graphManagerState.graphManager.buildGraph(
+    graphManagerState.graph,
+    entities as unknown as Entity[],
+    graphManagerState.graphBuildState,
+  );
+
+  const dataProduct = graphManagerState.graph.getDataProduct(dataProductPath);
+  const nativeAccess = guaranteeNonNullable(
+    dataProduct.nativeModelAccess,
+    `Data product '${dataProductPath}' has no native model access`,
+  );
+  const executionState = guaranteeNonNullable(
+    nativeAccess.nativeModelExecutionContexts.find(
+      (ctx) => ctx.key === executionKey,
+    ),
+    `Can't find native execution context '${executionKey}'`,
+  );
+
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getProject',
+  ).mockResolvedValue(projectData);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getEntities',
+  ).mockResolvedValue(entities);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getEntitiesByClassifier',
+  ).mockResolvedValue([]);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getEntitiesSummaryByClassifier',
+  ).mockResolvedValue([]);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getVersions',
+  ).mockResolvedValue([projectData.latestVersion]);
+  createSpy(
+    graphManagerState.graphManager,
+    'pureCodeToLambda',
+  ).mockResolvedValue(new RawLambda(lambda.parameters, lambda.body));
+  createSpy(
+    graphManagerState.graphManager,
+    'analyzeMappingModelCoverage',
+  ).mockResolvedValue(
+    graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
+      { mappedEntities: [] },
+      executionState.mapping.value,
+    ),
+  );
+
+  const mockQueryBuilderState = new LegendQueryDataProductQueryBuilderState(
+    MOCK__editorStore.applicationStore,
+    graphManagerState,
+    QueryBuilderDataBrowserWorkflow.INSTANCE,
+    new QueryBuilderActionConfig_QueryApplication(MOCK__editorStore),
+    dataProduct,
+    artifact,
+    executionState,
+    MOCK__editorStore.depotServerClient,
+    {
+      groupId: MOCK__editorStore.groupId,
+      artifactId: MOCK__editorStore.artifactId,
+      versionId: MOCK__editorStore.versionId,
+    },
+    async () => {
+      /* no-op for tests */
+    },
+    async () => {
+      throw new Error('Not implemented in tests');
+    },
+    new DataProductSelectorState(
+      MOCK__editorStore.depotServerClient,
+      MOCK__editorStore.applicationStore,
+    ),
+    undefined,
+    undefined,
+    MOCK__editorStore.applicationStore.config.options.queryBuilderConfig,
+    {
+      groupId: MOCK__editorStore.groupId,
+      artifactId: MOCK__editorStore.artifactId,
+      versionId: MOCK__editorStore.versionId,
+      dataProduct: dataProductPath,
+    },
+  );
+  mockQueryBuilderState.initWithDataProduct(
+    dataProduct,
+    undefined,
+    executionState,
+  );
+
+  MOCK__editorStore.buildGraph = createMock();
+  MOCK__editorStore.fetchDataProductArtifact = createMock();
+  (
+    MOCK__editorStore.fetchDataProductArtifact as ReturnType<typeof createMock>
+  ).mockResolvedValue(artifact);
+  MOCK__editorStore.buildDataProductQueryBuilderState = createMock();
+  (
+    MOCK__editorStore.buildDataProductQueryBuilderState as ReturnType<
+      typeof createMock
+    >
+  ).mockResolvedValue(mockQueryBuilderState);
+  graphManagerState.graphManager.initialize = createMock();
+
+  const sampleQueryRoute = generateDataProductSampleQueryRoute(
+    MOCK__editorStore.groupId,
+    MOCK__editorStore.artifactId,
+    MOCK__editorStore.versionId,
+    dataProductPath,
+    MOCK__editorStore.templateQueryId,
+  );
+
+  const renderResult = render(
+    <ApplicationStoreProvider store={MOCK__editorStore.applicationStore}>
+      <TEST__BrowserEnvironmentProvider initialEntries={[sampleQueryRoute]}>
+        <LegendQueryFrameworkProvider>
+          <Routes>
+            <Route
+              path={LEGEND_QUERY_ROUTE_PATTERN.DATA_PRODUCT_SAMPLE_QUERY}
+              element={<DataProductSampleQueryCreator />}
+            />
+          </Routes>
+        </LegendQueryFrameworkProvider>
+      </TEST__BrowserEnvironmentProvider>
+    </ApplicationStoreProvider>,
+  );
+  await waitFor(() =>
+    renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER),
+  );
+
+  return {
+    renderResult,
+    queryBuilderState: guaranteeNonNullable(
+      MOCK__editorStore.queryBuilderState,
+      `Query builder state should have been initialized`,
+    ),
+  };
+};

package/src/components/data-product/DataProductInfo.tsx

@@ -211,17 +211,19 @@ export const QueryEditorDataProductInfoModal = observer(
                   </div>
                 </div>
               )}
-              <div className="dataspace-info-modal__field">
-                <div className="dataspace-info-modal__field__label">
-                  Mapping
-                </div>
-                <div
-                  className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
-                  onClick={() => flowResult(visitElement(mapping.path))}
-                >
-                  {mapping.name}
+              {mapping && (
+                <div className="dataspace-info-modal__field">
+                  <div className="dataspace-info-modal__field__label">
+                    Mapping
+                  </div>
+                  <div
+                    className="dataspace-info-modal__field__value dataspace-info-modal__field__value--linkable"
+                    onClick={() => flowResult(visitElement(mapping.path))}
+                  >
+                    {mapping.name}
+                  </div>
                 </div>
-              </div>
+              )}
               {selectedRuntime &&
                 selectedRuntime.runtimeValue instanceof LakehouseRuntime && (
                   <>

package/src/components/data-product/DataProductSampleQueryCreator.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { useParams } from '@finos/legend-application/browser';
+import { parseGAVCoordinates } from '@finos/legend-storage';
+import {
+  useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
+} from '../LegendQueryFrameworkProvider.js';
+import { DataProductSampleQueryCreatorStore } from '../../stores/data-product/DataProductSampleQueryCreatorStore.js';
+import { QueryEditorStoreContext } from '../QueryEditorStoreProvider.js';
+import {
+  DATA_PRODUCT_SAMPLE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN,
+  generateDataProductSampleQueryRoute,
+  type DataProductSampleQueryPathParams,
+} from '../../__lib__/LegendQueryNavigation.js';
+import { QueryEditor } from '../QueryEditor.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
+import { extractQueryParams } from '../utils/QueryParameterUtils.js';
+import { useEffect } from 'react';
+
+const DataProductSampleQueryCreatorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  gav: string;
+  dataProductPath: string;
+  sampleQueryId: string;
+  params: Record<string, string> | undefined;
+}> = ({ children, gav, dataProductPath, sampleQueryId, params }) => {
+  const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+  const applicationStore = useLegendQueryApplicationStore();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new DataProductSampleQueryCreatorStore(
+        applicationStore,
+        baseStore.depotServerClient,
+        groupId,
+        artifactId,
+        versionId,
+        dataProductPath,
+        sampleQueryId,
+        params,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const DataProductSampleQueryCreator = observer(() => {
+  const applicationStore = useApplicationStore();
+  const parameters = useParams<DataProductSampleQueryPathParams>();
+  const gav = guaranteeNonNullable(
+    parameters[DATA_PRODUCT_SAMPLE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV],
+  );
+  const dataProductPath = guaranteeNonNullable(
+    parameters[
+      DATA_PRODUCT_SAMPLE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_PRODUCT_PATH
+    ],
+  );
+  const sampleQueryId = guaranteeNonNullable(
+    parameters[
+      DATA_PRODUCT_SAMPLE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.SAMPLE_QUERY_ID
+    ],
+  );
+
+  const queryParams =
+    applicationStore.navigationService.navigator.getCurrentLocationParameters();
+  const processed = extractQueryParams(queryParams);
+
+  useEffect(() => {
+    // clear params from URL after extracting
+    if (processed && Object.keys(processed).length) {
+      const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+      applicationStore.navigationService.navigator.updateCurrentLocation(
+        generateDataProductSampleQueryRoute(
+          groupId,
+          artifactId,
+          versionId,
+          dataProductPath,
+          sampleQueryId,
+        ),
+      );
+    }
+  }, [applicationStore, gav, dataProductPath, sampleQueryId, processed]);
+
+  return (
+    <DataProductSampleQueryCreatorStoreProvider
+      gav={gav}
+      dataProductPath={dataProductPath}
+      sampleQueryId={sampleQueryId}
+      params={processed}
+    >
+      <QueryEditor />
+    </DataProductSampleQueryCreatorStoreProvider>
+  );
+});

package/src/components/data-product/DataProductSampleQueryPanel.tsx

@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  PanelHeader,
+  BasePopover,
+  ClickAwayListener,
+  ShareIcon,
+  TagIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState } from 'react';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import type { V1_SampleQuery } from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import type { LegendQueryDataProductQueryBuilderState } from '../../stores/data-product/query-builder/LegendQueryDataProductQueryBuilderState.js';
+import { generateDataProductSampleQueryRoute } from '../../__lib__/LegendQueryNavigation.js';
+
+const DataProductSampleQueryDialog = observer(
+  (props: {
+    triggerElement: HTMLElement | null;
+    queryBuilderState: LegendQueryDataProductQueryBuilderState;
+    sampleQueries: V1_SampleQuery[];
+    onClose: () => void;
+  }) => {
+    const { triggerElement, queryBuilderState, sampleQueries, onClose } = props;
+    const applicationStore = useApplicationStore();
+
+    const loadSampleQuery = async (
+      sampleQuery: V1_SampleQuery,
+    ): Promise<void> => {
+      const query =
+        await queryBuilderState.graphManagerState.graphManager.pureCodeToLambda(
+          sampleQuery.info.query,
+        );
+      queryBuilderState.initializeWithQuery(query);
+      onClose();
+    };
+
+    const loadQuery = async (sampleQuery: V1_SampleQuery): Promise<void> => {
+      if (queryBuilderState.changeDetectionState.hasChanged) {
+        applicationStore.alertService.setActionAlertInfo({
+          message:
+            'Unsaved changes will be lost if you continue. Do you still want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => {
+                flowResult(loadSampleQuery(sampleQuery));
+              },
+            },
+            {
+              label: 'Abort',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        flowResult(loadSampleQuery(sampleQuery));
+      }
+    };
+
+    const visitSampleQuery = (sampleQuery: V1_SampleQuery): void => {
+      const id = sampleQuery.info.id;
+      if (!id) {
+        applicationStore.notificationService.notifyWarning(
+          'Sample query does not have an ID and cannot be visited via URL',
+        );
+        return;
+      }
+      const project = queryBuilderState.project;
+      applicationStore.navigationService.navigator.visitAddress(
+        applicationStore.navigationService.navigator.generateAddress(
+          generateDataProductSampleQueryRoute(
+            project.groupId,
+            project.artifactId,
+            project.versionId,
+            queryBuilderState.dataProduct.path,
+            id,
+          ),
+        ),
+      );
+    };
+
+    return (
+      <ClickAwayListener onClickAway={onClose}>
+        <div>
+          <BasePopover
+            open={true}
+            slotProps={{
+              paper: {
+                classes: {
+                  root: '"query-builder__data-space__template-query-panel__container__root',
+                },
+              },
+            }}
+            className="query-builder__data-space__template-query-panel__container"
+            onClose={onClose}
+            anchorEl={triggerElement}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+          >
+            <div className="query-builder__data-space__template-query-panel">
+              <div className="query-builder__data-space__template-query-panel__header">
+                Sample Queries
+              </div>
+              {sampleQueries.map((sampleQuery) => (
+                <div
+                  key={sampleQuery.info.id ?? sampleQuery.title}
+                  className="query-builder__data-space__template-query-panel__query"
+                >
+                  <TagIcon className="query-builder__data-space__template-query-panel__query__icon" />
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__entry"
+                    title="click to load sample query"
+                    onClick={() => {
+                      flowResult(loadQuery(sampleQuery));
+                    }}
+                  >
+                    <div className="query-builder__data-space__template-query-panel__query__entry__content">
+                      <div className="query-builder__data-space__template-query-panel__query__entry__content__title">
+                        {sampleQuery.title}
+                      </div>
+                      {sampleQuery.description && (
+                        <div className="query-builder__data-space__template-query-panel__query__entry__content__description">
+                          {sampleQuery.description}
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__share"
+                    title="Visit..."
+                    disabled={!sampleQuery.info.id}
+                    onClick={() => visitSampleQuery(sampleQuery)}
+                  >
+                    <ShareIcon />
+                    <div className="query-builder__data-space__template-query-panel__query__share__label">
+                      Visit
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </BasePopover>
+        </div>
+      </ClickAwayListener>
+    );
+  },
+);
+
+export const DataProductSampleQueryPanel = observer(
+  (props: { queryBuilderState: LegendQueryDataProductQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const templateQueryButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const sampleQueries = queryBuilderState.isNativeMode
+      ? (queryBuilderState.dataProductArtifact?.nativeModelAccess
+          ?.sampleQueries ?? [])
+      : [];
+
+    if (sampleQueries.length === 0) {
+      return null;
+    }
+
+    return (
+      <PanelHeader className="query-builder__data-space__template-query">
+        <button
+          className="query-builder__data-space__template-query__btn"
+          ref={templateQueryButtonRef}
+          onClick={() => setIsDialogOpen(true)}
+        >
+          Sample Queries ( {sampleQueries.length} )
+        </button>
+        {isDialogOpen && (
+          <DataProductSampleQueryDialog
+            triggerElement={templateQueryButtonRef.current}
+            queryBuilderState={queryBuilderState}
+            sampleQueries={sampleQueries}
+            onClose={() => setIsDialogOpen(false)}
+          />
+        )}
+      </PanelHeader>
+    );
+  },
+);
+
+export const renderDataProductSampleQueryPanelContent = (
+  queryBuilderState: LegendQueryDataProductQueryBuilderState,
+): React.ReactNode => (
+  <DataProductSampleQueryPanel queryBuilderState={queryBuilderState} />
+);