@finos/legend-extension-dsl-data-space 10.4.258 → 10.4.260

package/src/components/DataSpaceLakehouseAccess.tsx

@@ -0,0 +1,449 @@
+/**
+ * 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 } from 'mobx-react-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Button,
+  ButtonGroup,
+  IconButton,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from '@mui/material';
+import {
+  CaretDownIcon,
+  ExpandMoreIcon,
+  RefreshIcon,
+  clsx,
+} from '@finos/legend-art';
+import {
+  extractElementNameFromPath,
+  type V1_AccessPointGroup,
+} from '@finos/legend-graph';
+import {
+  AccessPointGroupAccess,
+  CollapsibleWikiSection,
+  DataProductAPGAccessRequestControl,
+  EntitlementsDataContractCreator,
+  type DataProductAPGState,
+} from '@finos/legend-extension-dsl-data-product';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import type { DataSpaceDataProductAccessState } from '../stores/DataSpaceDataProductAccessState.js';
+import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
+import { resolveOpenDataProductAction } from './DataSpaceExecutionContextViewer.js';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+} from '../stores/DataSpaceViewerNavigation.js';
+
+const isEntitled = (access: AccessPointGroupAccess): boolean =>
+  access === AccessPointGroupAccess.APPROVED ||
+  access === AccessPointGroupAccess.ENTERPRISE;
+
+const getBulkRequestTargetApgStates = (
+  accessState: DataSpaceDataProductAccessState,
+): DataProductAPGState[] => {
+  const apgStates = accessState.dataProductViewerState?.apgStates ?? [];
+  return apgStates.filter((state) => !isEntitled(state.access));
+};
+
+const getContractableApgStates = (
+  accessState: DataSpaceDataProductAccessState,
+): DataProductAPGState[] => {
+  const apgStates = accessState.dataProductViewerState?.apgStates ?? [];
+  return apgStates.filter(
+    (state) => state.access !== AccessPointGroupAccess.ENTERPRISE,
+  );
+};
+
+const DataSpaceLakehouseAccessRequestButton = observer(
+  (props: {
+    accessState: DataSpaceDataProductAccessState;
+    onRequestForSelf: () => void;
+    onRequestForOthers: () => void;
+  }) => {
+    const { accessState, onRequestForSelf, onRequestForOthers } = props;
+    const buttonGroupRef = useRef<HTMLDivElement>(null);
+    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+    const apgStates = accessState.dataProductViewerState?.apgStates;
+    if (!apgStates || apgStates.length === 0) {
+      return null;
+    }
+    const total = apgStates.length;
+    const entitled = apgStates.filter((state) =>
+      isEntitled(state.access),
+    ).length;
+    const pending = apgStates.filter(
+      (state) =>
+        state.access === AccessPointGroupAccess.SUBMITTED_FOR_APPROVALS ||
+        state.access === AccessPointGroupAccess.PENDING_MANAGER_APPROVAL ||
+        state.access === AccessPointGroupAccess.PENDING_DATA_OWNER_APPROVAL,
+    ).length;
+    const hasAllAccess = entitled >= total;
+    const requestableTargets = getBulkRequestTargetApgStates(accessState);
+    const primaryDisabled = hasAllAccess || requestableTargets.length === 0;
+    const forOthersTargets = getContractableApgStates(accessState);
+    const showForOthers = forOthersTargets.length > 0;
+    const primaryTooltip = hasAllAccess
+      ? `You have access to all ${total} Access Point Group${total === 1 ? '' : 's'} under this Data Product required to access this DataSpace.`
+      : `Request access to the Access Point Groups under this Data Product required to access this DataSpace. ${entitled} of ${total} granted${pending > 0 ? `, ${pending} pending approval` : ''}.`;
+    return (
+      <>
+        <ButtonGroup
+          variant="contained"
+          color={hasAllAccess ? 'success' : 'primary'}
+          ref={buttonGroupRef}
+          className="data-space__viewer__lakehouse-access__group__request-btn"
+        >
+          <Tooltip title={primaryTooltip} arrow={true}>
+            <span>
+              <Button
+                disabled={!hasAllAccess && primaryDisabled}
+                onClick={hasAllAccess ? undefined : onRequestForSelf}
+                sx={{
+                  height: '100%',
+                  cursor: hasAllAccess ? 'default' : undefined,
+                  borderTopRightRadius: showForOthers ? 0 : undefined,
+                  borderBottomRightRadius: showForOthers ? 0 : undefined,
+                }}
+              >
+                {hasAllAccess
+                  ? 'Access Granted'
+                  : `Request Access (${entitled} / ${total})`}
+              </Button>
+            </span>
+          </Tooltip>
+          {showForOthers && (
+            <Button
+              size="small"
+              onClick={() => setIsMenuOpen((prev) => !prev)}
+              title="More options"
+            >
+              <CaretDownIcon />
+            </Button>
+          )}
+        </ButtonGroup>
+        {showForOthers && (
+          <Menu
+            anchorEl={buttonGroupRef.current}
+            open={isMenuOpen}
+            onClose={() => setIsMenuOpen(false)}
+          >
+            <MenuItem
+              onClick={() => {
+                onRequestForOthers();
+                setIsMenuOpen(false);
+              }}
+            >
+              Request Access for Others
+            </MenuItem>
+          </Menu>
+        )}
+      </>
+    );
+  },
+);
+
+const DataSpaceLakehouseAccessGroup = observer(
+  (props: {
+    viewerState: DataSpaceViewerState;
+    dataProductPath: string;
+    initiallyCollapsed: boolean;
+  }) => {
+    const { viewerState, dataProductPath, initiallyCollapsed } = props;
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(initiallyCollapsed);
+    const [bulkRequestMode, setBulkRequestMode] = useState<
+      'self' | 'others' | undefined
+    >(undefined);
+    const accessState = viewerState.getDataProductAccessState(dataProductPath);
+    const isReadOnly = accessState === undefined;
+    const readOnlyApgIds: string[] = useMemo(() => {
+      if (!isReadOnly) {
+        return [];
+      }
+      const dp =
+        viewerState.graphManagerState.graph.getOwnNullableDataProduct(
+          dataProductPath,
+        );
+      return dp?.accessPointGroups.map((group) => group.id) ?? [];
+    }, [dataProductPath, isReadOnly, viewerState.graphManagerState.graph]);
+    const tokenProvider =
+      viewerState.mappingProviderAccessConfig?.tokenProvider ??
+      ((): undefined => undefined);
+    const apgStates = accessState?.dataProductViewerState?.apgStates ?? [];
+    const isLoading = accessState?.initializingState.isInProgress ?? false;
+    const hasError =
+      accessState?.errorMessage !== undefined && apgStates.length === 0;
+    const displayedCount = isReadOnly
+      ? readOnlyApgIds.length
+      : apgStates.length;
+
+    const bulkTargetApgStates = accessState
+      ? bulkRequestMode === 'others'
+        ? getContractableApgStates(accessState)
+        : getBulkRequestTargetApgStates(accessState)
+      : [];
+    const bulkTargetApgs: V1_AccessPointGroup[] = bulkTargetApgStates.map(
+      (state) => state.apg,
+    );
+
+    const representativeApgState: DataProductAPGState | undefined =
+      bulkTargetApgStates[0];
+
+    const onOpenDataProduct = resolveOpenDataProductAction(
+      viewerState,
+      dataProductPath,
+    );
+
+    return (
+      <div className="data-space__viewer__lakehouse-access__group">
+        <div className="data-space__viewer__lakehouse-access__group__header-row">
+          <button
+            className="data-space__viewer__lakehouse-access__group__caret-btn"
+            tabIndex={-1}
+            onClick={(): void => setIsCollapsed((prev) => !prev)}
+            title={isCollapsed ? 'Expand' : 'Collapse'}
+          >
+            <ExpandMoreIcon
+              className={clsx(
+                'data-space__viewer__lakehouse-access__group__caret',
+                {
+                  'data-space__viewer__lakehouse-access__group__caret--collapsed':
+                    isCollapsed,
+                },
+              )}
+            />
+          </button>
+          <div className="data-space__viewer__lakehouse-access__group__header">
+            {onOpenDataProduct ? (
+              <button
+                type="button"
+                className="data-space__viewer__lakehouse-access__group__label data-space__viewer__lakehouse-access__group__label--clickable"
+                title={`Open Data Product: ${dataProductPath}`}
+                onClick={onOpenDataProduct}
+              >
+                {extractElementNameFromPath(dataProductPath)}
+              </button>
+            ) : (
+              <span
+                className="data-space__viewer__lakehouse-access__group__label"
+                title={dataProductPath}
+              >
+                {extractElementNameFromPath(dataProductPath)}
+              </span>
+            )}
+            <span className="data-space__viewer__lakehouse-access__group__count">
+              {displayedCount}
+            </span>
+          </div>
+          {!isReadOnly && (
+            <div className="data-space__viewer__lakehouse-access__group__actions">
+              {!hasError && (
+                <DataSpaceLakehouseAccessRequestButton
+                  accessState={accessState}
+                  onRequestForSelf={(): void => setBulkRequestMode('self')}
+                  onRequestForOthers={(): void => setBulkRequestMode('others')}
+                />
+              )}
+              <IconButton
+                className="data-space__viewer__lakehouse-access__group__refresh-btn"
+                size="small"
+                color="primary"
+                title="Refresh Data Product access"
+                disabled={accessState.initializingState.isInProgress}
+                onClick={(): void =>
+                  viewerState.refreshDataProductAccessState(dataProductPath)
+                }
+              >
+                <RefreshIcon />
+              </IconButton>
+            </div>
+          )}
+        </div>
+        {!isCollapsed && (
+          <div className="data-space__viewer__lakehouse-access__group__rows">
+            {isReadOnly ? (
+              readOnlyApgIds.length === 0 ? (
+                <div className="data-space__viewer__lakehouse-access__row">
+                  <span className="data-space__viewer__lakehouse-access__row__unavailable">
+                    Data Product is not available in the local project — Access
+                    Point Groups cannot be listed in preview.
+                  </span>
+                </div>
+              ) : (
+                readOnlyApgIds.map((apgId) => (
+                  <div
+                    key={apgId}
+                    className="data-space__viewer__lakehouse-access__row"
+                  >
+                    <span
+                      className="data-space__viewer__lakehouse-access__row__apg"
+                      title={apgId}
+                    >
+                      {apgId}
+                    </span>
+                  </div>
+                ))
+              )
+            ) : hasError ? (
+              <div
+                className="data-space__viewer__lakehouse-access__row"
+                title={accessState.errorMessage}
+              >
+                <span className="data-space__viewer__lakehouse-access__row__unavailable">
+                  Unavailable
+                </span>
+              </div>
+            ) : isLoading && apgStates.length === 0 ? (
+              <div className="data-space__viewer__lakehouse-access__row">
+                <span className="data-space__viewer__lakehouse-access__row__loading">
+                  Loading...
+                </span>
+              </div>
+            ) : (
+              apgStates.map((apgState) => (
+                <div
+                  key={apgState.apg.id}
+                  className="data-space__viewer__lakehouse-access__row"
+                >
+                  <span
+                    className="data-space__viewer__lakehouse-access__row__apg"
+                    title={apgState.apg.id}
+                  >
+                    {apgState.apg.id}
+                  </span>
+                  <div className="data-space__viewer__lakehouse-access__row__actions">
+                    {accessState.dataAccessState && (
+                      <DataProductAPGAccessRequestControl
+                        apgState={apgState}
+                        dataAccessState={accessState.dataAccessState}
+                        tokenProvider={tokenProvider}
+                      />
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+        {bulkRequestMode !== undefined &&
+          accessState?.dataAccessState &&
+          representativeApgState &&
+          bulkTargetApgs.length > 0 && (
+            <EntitlementsDataContractCreator
+              open={true}
+              onClose={(): void => setBulkRequestMode(undefined)}
+              tokenProvider={tokenProvider}
+              apgState={representativeApgState}
+              dataAccessState={accessState.dataAccessState}
+              overrideTargetApgs={bulkTargetApgs}
+              headerContent={
+                <>
+                  Submit access request for{' '}
+                  <span className="marketplace-lakehouse-text__emphasis">
+                    {bulkTargetApgs.length}
+                  </span>{' '}
+                  Access Point Group
+                  {bulkTargetApgs.length === 1 ? '' : 's'} in{' '}
+                  <span className="marketplace-lakehouse-text__emphasis">
+                    {accessState.dataAccessState.dataProductViewerState.product
+                      .title ?? extractElementNameFromPath(dataProductPath)}
+                  </span>{' '}
+                  Data Product
+                </>
+              }
+            />
+          )}
+      </div>
+    );
+  },
+);
+
+const DataSpaceLakehouseAccessPanel = observer(
+  (props: {
+    viewerState: DataSpaceViewerState;
+    dataProductPaths: string[];
+  }) => {
+    const { viewerState, dataProductPaths } = props;
+    return (
+      <>
+        <div className="data-space__viewer__lakehouse-access__description">
+          <DataSpaceMarkdownTextViewer
+            value={
+              "The following Data Products are required to access this DataSpace. Products you don't have access to can be requested below."
+            }
+          />
+        </div>
+        <div className="data-space__viewer__lakehouse-access">
+          <div className="data-space__viewer__lakehouse-access__header">
+            Data Product Access
+          </div>
+          {dataProductPaths.map((dataProductPath) => (
+            <DataSpaceLakehouseAccessGroup
+              key={dataProductPath}
+              viewerState={viewerState}
+              dataProductPath={dataProductPath}
+              initiallyCollapsed={true}
+            />
+          ))}
+        </div>
+      </>
+    );
+  },
+);
+
+export const DataSpaceLakehouseAccess = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const anchor = generateAnchorForActivity(
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.DATASPACE_LAKEHOUSE_ACCESS,
+    );
+
+    useEffect(() => {
+      if (sectionRef.current) {
+        dataSpaceViewerState.layoutState.setWikiPageAnchor(
+          anchor,
+          sectionRef.current,
+        );
+      }
+      return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
+    }, [dataSpaceViewerState, anchor]);
+
+    const dataProductPaths = dataSpaceViewerState.referencedDataProductPaths;
+
+    if (dataProductPaths.length === 0) {
+      return null;
+    }
+
+    return (
+      <div ref={sectionRef} className="viewer__wiki__section">
+        <CollapsibleWikiSection
+          viewerState={dataSpaceViewerState}
+          section={DATA_SPACE_VIEWER_ACTIVITY_MODE.DATASPACE_LAKEHOUSE_ACCESS}
+        >
+          <div className="viewer__wiki__section__content">
+            <DataSpaceLakehouseAccessPanel
+              viewerState={dataSpaceViewerState}
+              dataProductPaths={dataProductPaths}
+            />
+          </div>
+        </CollapsibleWikiSection>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceQuickStart.tsx

@@ -46,7 +46,7 @@ import {
   LakehouseDataProductExecutableAccessorInfo,
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
-import { DataSpaceOpenDataProductButton } from './DataSpaceExecutionContextViewer.js';
+import { resolveOpenDataProductAction } from './DataSpaceExecutionContextViewer.js';
 import type { DSL_DataSpace_LegendApplicationPlugin_Extension } from '../stores/DSL_DataSpace_LegendApplicationPlugin_Extension.js';
 import { useEffect, useRef, useState } from 'react';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
@@ -227,6 +227,10 @@ const DataSpaceDataProductAccessPanel = observer(
           const accessState = viewerState.getDataProductAccessState(
             group.dataProductPath,
           );
+          const onOpenDataProduct = resolveOpenDataProductAction(
+            viewerState,
+            group.dataProductPath,
+          );
           return (
             <div
               key={group.dataProductPath}
@@ -250,21 +254,28 @@ const DataSpaceDataProductAccessPanel = observer(
                   />
                 </button>
                 <div className="data-space__viewer__quickstart__tds__apg-access__group__header">
-                  <span
-                    className="data-space__viewer__quickstart__tds__apg-access__group__label"
-                    title={group.dataProductPath}
-                  >
-                    {extractElementNameFromPath(group.dataProductPath)}
-                  </span>
+                  {onOpenDataProduct ? (
+                    <button
+                      type="button"
+                      className="data-space__viewer__quickstart__tds__apg-access__group__label data-space__viewer__quickstart__tds__apg-access__group__label--clickable"
+                      title={`Open Data Product: ${group.dataProductPath}`}
+                      onClick={onOpenDataProduct}
+                    >
+                      {extractElementNameFromPath(group.dataProductPath)}
+                    </button>
+                  ) : (
+                    <span
+                      className="data-space__viewer__quickstart__tds__apg-access__group__label"
+                      title={group.dataProductPath}
+                    >
+                      {extractElementNameFromPath(group.dataProductPath)}
+                    </span>
+                  )}
                   <span className="data-space__viewer__quickstart__tds__apg-access__group__count">
                     {group.accessPointGroupIds.length}
                   </span>
                 </div>
                 <div className="data-space__viewer__quickstart__tds__apg-access__group__actions">
-                  <DataSpaceOpenDataProductButton
-                    dataSpaceViewerState={viewerState}
-                    dataProductPath={group.dataProductPath}
-                  />
                   {accessState && (
                     <IconButton
                       className="data-space__viewer__quickstart__tds__apg-access__group__refresh-btn"

package/src/components/DataSpaceViewer.tsx

@@ -20,7 +20,6 @@ import {
   CaretUpIcon,
   ControlledDropdownMenu,
   MenuContent,
-  MenuContentDivider,
   MenuContentItem,
   MoreVerticalIcon,
   PlayIcon,
@@ -36,15 +35,11 @@ import { DataSpaceWiki } from './DataSpaceWiki.js';
 import { DataSpaceViewerActivityBar } from './DataSpaceViewerActivityBar.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { DATA_SPACE_WIKI_PAGE_SECTIONS } from '../stores/DataSpaceLayoutState.js';
-import {
-  DATA_SPACE_VIEWER_ACTIVITY_MODE,
-  generateAnchorForActivity,
-} from '../stores/DataSpaceViewerNavigation.js';
+import { DATA_SPACE_VIEWER_ACTIVITY_MODE } from '../stores/DataSpaceViewerNavigation.js';
 import { DataSpacePlaceholderPanel } from './DataSpacePlaceholder.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { DataSpaceLegendAIIntegration } from './DataSpaceLegendAIIntegration.js';
 import { DSL_DATASPACE_EVENT } from '../__lib__/DSL_DataSpace_Event.js';
-import { guaranteeNonNullable } from '@finos/legend-shared';
 import { DataSpaceQualityEmote } from './DataSpaceQualityEmote.js';
 
 const DataSpaceHeader = observer(
@@ -194,29 +189,6 @@ const DataSpaceHeader = observer(
                 title="More Actions..."
                 content={
                   <MenuContent>
-                    {dataSpaceViewerState.currentExecutionContext && (
-                      <>
-                        <MenuContentItem
-                          onClick={() =>
-                            dataSpaceViewerState.queryDataSpace(
-                              guaranteeNonNullable(
-                                dataSpaceViewerState.currentExecutionContext,
-                              ).name,
-                            )
-                          }
-                        >
-                          Query Data Space
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                      </>
-                    )}
-                    <MenuContentItem
-                      onClick={() =>
-                        dataSpaceViewerState.viewProject(analysisResult.path)
-                      }
-                    >
-                      View Project
-                    </MenuContentItem>
                     <MenuContentItem
                       onClick={() => {
                         dataSpaceViewerState
@@ -224,32 +196,7 @@ const DataSpaceHeader = observer(
                           .catch(applicationStore.alertUnhandledError);
                       }}
                     >
-                      View SDLC Project
-                    </MenuContentItem>
-                    <MenuContentDivider />
-                    <MenuContentItem
-                      onClick={() => {
-                        const documentationUrl =
-                          analysisResult.supportInfo?.documentationUrl;
-                        if (documentationUrl) {
-                          applicationStore.navigationService.navigator.visitAddress(
-                            documentationUrl,
-                          );
-                        }
-                      }}
-                    >
-                      Read Documentation
-                    </MenuContentItem>
-                    <MenuContentItem
-                      onClick={() =>
-                        dataSpaceViewerState.changeZone(
-                          generateAnchorForActivity(
-                            DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT,
-                          ),
-                        )
-                      }
-                    >
-                      Get Help
+                      View Project
                     </MenuContentItem>
                   </MenuContent>
                 }

package/src/components/DataSpaceWiki.tsx

@@ -18,7 +18,11 @@ import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { observer } from 'mobx-react-lite';
 import { DataSpaceQuickStart } from './DataSpaceQuickStart.js';
 import { DataSpaceDataAccess } from './DataSpaceDataAccess.js';
-import { DataSpaceDescription } from './DataSpaceDescription.js';
+import {
+  DataSpaceDescription,
+  DataSpaceWikiBadges,
+} from './DataSpaceDescription.js';
+import { DataSpaceLakehouseAccess } from './DataSpaceLakehouseAccess.js';
 import { useEffect } from 'react';
 import { ModelsDocumentation } from '@finos/legend-lego/model-documentation';
 import { DiagramViewer } from '@finos/legend-extension-dsl-diagram';
@@ -57,7 +61,9 @@ export const DataSpaceWiki = observer(
 
     return (
       <div className="data-space__viewer__wiki">
+        <DataSpaceWikiBadges dataSpaceViewerState={dataSpaceViewerState} />
         <DataSpaceDescription dataSpaceViewerState={dataSpaceViewerState} />
+        <DataSpaceLakehouseAccess dataSpaceViewerState={dataSpaceViewerState} />
         <DiagramViewer
           diagramViewerState={dataSpaceViewerState.diagramViewerState}
           actions={{

package/src/graph-manager/protocol/pure/v1/V1_DSL_DataSpace_PureGraphManagerExtension.ts

@@ -50,7 +50,7 @@ import {
   V1_MappingModelCoveragePartition,
   V1_getGenericTypeFullPath,
   V1_buildFullPath,
-  V1_LakehouseRuntime,
+  V1_LakehouseBaseRuntime,
   V1_packageableRuntimeModelSchema,
   V1_RelationType,
   GenericType,
@@ -514,7 +514,7 @@ export class V1_DSL_DataSpace_PureGraphManagerExtension extends DSL_DataSpace_Pu
         V1_packageableRuntimeModelSchema,
         runtimeEntity.content,
       );
-      if (runtimeProtocol.runtimeValue instanceof V1_LakehouseRuntime) {
+      if (runtimeProtocol.runtimeValue instanceof V1_LakehouseBaseRuntime) {
         dataSpaceAnalysisResult.__INTERNAL__useRelationTDS = true;
       }
     }

package/src/stores/DataSpaceLayoutState.ts

@@ -28,16 +28,13 @@ import { BaseLayoutState } from '@finos/legend-extension-dsl-data-product';
 
 export const DATA_SPACE_WIKI_PAGE_SECTIONS = [
   DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.DATASPACE_LAKEHOUSE_ACCESS,
   DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
   DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
   DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
   DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
 ];
 
-const DATA_SPACE_WIKI_PAGE_ANCHORS = DATA_SPACE_WIKI_PAGE_SECTIONS.map(
-  (activity) => generateAnchorForActivity(activity),
-);
-
 export class DataSpaceLayoutState extends BaseLayoutState {
   private dataSpaceViewerState!: DataSpaceViewerState;
 
@@ -53,7 +50,9 @@ export class DataSpaceLayoutState extends BaseLayoutState {
   }
 
   protected getValidAnchors(): string[] {
-    return DATA_SPACE_WIKI_PAGE_ANCHORS;
+    return this.dataSpaceViewerState.wikiPageSectionsToRender.map((activity) =>
+      generateAnchorForActivity(activity),
+    );
   }
 
   protected get expectedGridCount(): number {
@@ -63,7 +62,7 @@ export class DataSpaceLayoutState extends BaseLayoutState {
   override get isWikiPageFullyRendered(): boolean {
     return (
       super.isWikiPageFullyRendered &&
-      DATA_SPACE_WIKI_PAGE_SECTIONS.includes(
+      this.dataSpaceViewerState.wikiPageSectionsToRender.includes(
         this.dataSpaceViewerState.currentActivity,
       )
     );

package/src/stores/DataSpaceViewerNavigation.ts

@@ -20,6 +20,7 @@ import type { DiagramAnalysisResult } from '@finos/legend-extension-dsl-diagram'
 
 export enum DATA_SPACE_VIEWER_ACTIVITY_MODE {
   DESCRIPTION = 'description',
+  DATASPACE_LAKEHOUSE_ACCESS = 'dataspace-lakehouse-access',
   DIAGRAM_VIEWER = 'diagram-viewer',
   MODELS_DOCUMENTATION = 'models-documentation',
   QUICK_START = 'quick-start',