@finos/legend-application-studio 28.18.112 → 28.18.114

package/lib/stores/editor/utils/ModelClassifierUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelClassifierUtils.js","sourceRoot":"","sources":["../../../../src/stores/editor/utils/ModelClassifierUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,IAAI,GACL,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,CAAN,IAAY,mBAMX;AAND,WAAY,mBAAmB;IAC7B,sCAAe,CAAA;IACf,kDAA2B,CAAA;IAC3B,0CAAmB,CAAA;IACnB,oCAAa,CAAA;IACb,8CAAuB,CAAA;AACzB,CAAC,EANW,mBAAmB,KAAnB,mBAAmB,QAM9B;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAU,EAAuB,EAAE;IACtE,IAAI,IAAI,YAAY,aAAa,EAAE,CAAC;QAClC,OAAO,mBAAmB,CAAC,SAAS,CAAC;IACvC,CAAC;SAAM,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;QACvC,OAAO,mBAAmB,CAAC,WAAW,CAAC;IACzC,CAAC;SAAM,IAAI,IAAI,YAAY,KAAK,EAAE,CAAC;QACjC,OAAO,mBAAmB,CAAC,KAAK,CAAC;IACnC,CAAC;SAAM,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;QAChC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAClC,CAAC;SAAM,IAAI,IAAI,YAAY,OAAO,EAAE,CAAC;QACnC,OAAO,mBAAmB,CAAC,OAAO,CAAC;IACrC,CAAC;IACD,MAAM,IAAI,yBAAyB,CAAC,+BAA+B,EAAE,IAAI,CAAC,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,CAAN,IAAY,wBA2BX;AA3BD,WAAY,wBAAwB;IAClC,mDAAuB,CAAA;IACvB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,uDAA2B,CAAA;IAC3B,2CAAe,CAAA;IACf,uDAA2B,CAAA;IAC3B,iDAAqB,CAAA;IACrB,+CAAmB,CAAA;IACnB,yCAAa,CAAA;IACb,+DAAmC,CAAA;IACnC,iDAAqB,CAAA;IACrB,2DAA+B,CAAA;IAC/B,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,2EAA+C,CAAA;IAC/C,qDAAyB,CAAA;IACzB,+CAAmB,CAAA;IACnB,+DAAmC,CAAA;IACnC,iFAAqD,CAAA;IACrD,2DAA+B,CAAA;IAC/B,yCAAa,CAAA;IACb,2DAA+B,CAAA;IAC/B,6DAAiC,CAAA;IAEjC,4EAAgD,CAAA;IAChD,gEAAoC,CAAA;AACtC,CAAC,EA3BW,wBAAwB,KAAxB,wBAAwB,QA2BnC;AAED,MAAM,CAAN,IAAY,qCAOX;AAPD,WAAY,qCAAqC;IAC/C,wDAAe,CAAA;IACf,wDAAe,CAAA;IACf,wDAAe,CAAA;IACf,4EAAmC,CAAA;IACnC,kEAAyB,CAAA;IACzB,wDAAe,CAAA;AACjB,CAAC,EAPW,qCAAqC,KAArC,qCAAqC,QAOhD"}
+{"version":3,"file":"ModelClassifierUtils.js","sourceRoot":"","sources":["../../../../src/stores/editor/utils/ModelClassifierUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,IAAI,GACL,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,CAAN,IAAY,mBAMX;AAND,WAAY,mBAAmB;IAC7B,sCAAe,CAAA;IACf,kDAA2B,CAAA;IAC3B,0CAAmB,CAAA;IACnB,oCAAa,CAAA;IACb,8CAAuB,CAAA;AACzB,CAAC,EANW,mBAAmB,KAAnB,mBAAmB,QAM9B;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAU,EAAuB,EAAE;IACtE,IAAI,IAAI,YAAY,aAAa,EAAE,CAAC;QAClC,OAAO,mBAAmB,CAAC,SAAS,CAAC;IACvC,CAAC;SAAM,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;QACvC,OAAO,mBAAmB,CAAC,WAAW,CAAC;IACzC,CAAC;SAAM,IAAI,IAAI,YAAY,KAAK,EAAE,CAAC;QACjC,OAAO,mBAAmB,CAAC,KAAK,CAAC;IACnC,CAAC;SAAM,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;QAChC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAClC,CAAC;SAAM,IAAI,IAAI,YAAY,OAAO,EAAE,CAAC;QACnC,OAAO,mBAAmB,CAAC,OAAO,CAAC;IACrC,CAAC;IACD,MAAM,IAAI,yBAAyB,CAAC,+BAA+B,EAAE,IAAI,CAAC,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,CAAN,IAAY,wBA6BX;AA7BD,WAAY,wBAAwB;IAClC,mDAAuB,CAAA;IACvB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,uDAA2B,CAAA;IAC3B,2CAAe,CAAA;IACf,uDAA2B,CAAA;IAC3B,iDAAqB,CAAA;IACrB,+CAAmB,CAAA;IACnB,yCAAa,CAAA;IACb,+DAAmC,CAAA;IACnC,iDAAqB,CAAA;IACrB,2DAA+B,CAAA;IAC/B,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,2EAA+C,CAAA;IAC/C,qDAAyB,CAAA;IACzB,+CAAmB,CAAA;IACnB,+DAAmC,CAAA;IACnC,iFAAqD,CAAA;IACrD,2DAA+B,CAAA;IAC/B,yCAAa,CAAA;IACb,2DAA+B,CAAA;IAC/B,6DAAiC,CAAA;IACjC,+BAA+B;IAC/B,+DAAmC,CAAA;IAEnC,4EAAgD,CAAA;IAChD,gEAAoC,CAAA;AACtC,CAAC,EA7BW,wBAAwB,KAAxB,wBAAwB,QA6BnC;AAED,MAAM,CAAN,IAAY,qCAOX;AAPD,WAAY,qCAAqC;IAC/C,wDAAe,CAAA;IACf,wDAAe,CAAA;IACf,wDAAe,CAAA;IACf,4EAAmC,CAAA;IACnC,kEAAyB,CAAA;IACzB,wDAAe,CAAA;AACjB,CAAC,EAPW,qCAAqC,KAArC,qCAAqC,QAOhD"}

package/lib/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2020-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 { type AccessPoint, type DataProduct } from '@finos/legend-graph';
+export declare const dataProduct_deleteAccessPoint: (product: DataProduct, accessPoint: AccessPoint) => void;
+export declare const dataProduct_addAccessPoint: (product: DataProduct, accessPoint: AccessPoint) => void;
+//# sourceMappingURL=DSL_DataProduct_GraphModifierHelper.d.ts.map

package/lib/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSL_DataProduct_GraphModifierHelper.d.ts","sourceRoot":"","sources":["../../../src/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,WAAW,EAEjB,MAAM,qBAAqB,CAAC;AAK7B,eAAO,MAAM,6BAA6B,YAC9B,WAAW,eAAe,WAAW,SAGhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,YAC3B,WAAW,eAAe,WAAW,SAGhD,CAAC"}

package/lib/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2020-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 { observe_AccessPoint, } from '@finos/legend-graph';
+import { addUniqueEntry, deleteEntry } from '@finos/legend-shared';
+import { action } from 'mobx';
+export const dataProduct_deleteAccessPoint = action((product, accessPoint) => {
+    deleteEntry(product.accessPoints, accessPoint);
+});
+export const dataProduct_addAccessPoint = action((product, accessPoint) => {
+    addUniqueEntry(product.accessPoints, observe_AccessPoint(accessPoint));
+});
+//# sourceMappingURL=DSL_DataProduct_GraphModifierHelper.js.map

package/lib/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSL_DataProduct_GraphModifierHelper.js","sourceRoot":"","sources":["../../../src/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAGL,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CACjD,CAAC,OAAoB,EAAE,WAAwB,EAAE,EAAE;IACjD,WAAW,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAC9C,CAAC,OAAoB,EAAE,WAAwB,EAAE,EAAE;IACjD,cAAc,CAAC,OAAO,CAAC,YAAY,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;AACzE,CAAC,CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.18.112",
+  "version": "28.18.114",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,18 +45,18 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.34",
-    "@finos/legend-art": "7.1.91",
-    "@finos/legend-code-editor": "2.0.59",
-    "@finos/legend-data-cube": "0.1.22",
-    "@finos/legend-graph": "32.1.17",
-    "@finos/legend-lego": "2.0.63",
-    "@finos/legend-query-builder": "4.16.23",
-    "@finos/legend-server-depot": "6.0.87",
-    "@finos/legend-server-sdlc": "5.3.55",
-    "@finos/legend-server-showcase": "0.2.51",
-    "@finos/legend-shared": "11.0.10",
-    "@finos/legend-storage": "3.0.129",
+    "@finos/legend-application": "16.0.36",
+    "@finos/legend-art": "7.1.93",
+    "@finos/legend-code-editor": "2.0.61",
+    "@finos/legend-data-cube": "0.1.24",
+    "@finos/legend-graph": "32.1.19",
+    "@finos/legend-lego": "2.0.65",
+    "@finos/legend-query-builder": "4.16.25",
+    "@finos/legend-server-depot": "6.0.88",
+    "@finos/legend-server-sdlc": "5.3.56",
+    "@finos/legend-server-showcase": "0.2.52",
+    "@finos/legend-shared": "11.0.11",
+    "@finos/legend-storage": "3.0.130",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@types/react": "19.0.10",

package/src/components/ElementIconUtils.tsx

@@ -44,6 +44,7 @@ import {
   PURE_SnowflakeAppIcon,
   LaunchIcon,
   LinkIcon,
+  PURE_DataProductIcon,
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
@@ -90,6 +91,8 @@ export const getElementTypeIcon = (
       return <PURE_ServiceIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.CONNECTION:
       return <PURE_ConnectionIcon />;
+    case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+      return <PURE_DataProductIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
       return <LinkIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.RUNTIME:

package/src/components/editor/editor-group/EditorGroup.tsx

@@ -88,6 +88,8 @@ import {
 } from '../../workspace-setup/WorkspaceSetup.js';
 import { HostedServiceFunctionActivatorEditorState } from '../../../stores/editor/editor-state/element-editor-state/function-activator/HostedServiceFunctionActivatorEditorState.js';
 import { HostedServiceFunctionActivatorEditor } from './function-activator/HostedServiceFunctionActivatorEditor.js';
+import { DataProductEditorState } from '../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
+import { DataProductEditor } from './dataProduct/DataPoductEditor.js';
 
 export const ViewerEditorGroupSplashScreen: React.FC = () => {
   const commandListWidth = 300;
@@ -274,6 +276,8 @@ export const EditorGroup = observer(() => {
             return <MappingEditor key={currentTabState.uuid} />;
           } else if (currentTabState instanceof ServiceEditorState) {
             return <ServiceEditor key={currentTabState.uuid} />;
+          } else if (currentTabState instanceof DataProductEditorState) {
+            return <DataProductEditor key={currentTabState.uuid} />;
           } else if (currentTabState instanceof PackageableRuntimeEditorState) {
             return <PackageableRuntimeEditor key={currentTabState.uuid} />;
           } else if (

package/src/components/editor/editor-group/dataProduct/DataPoductEditor.tsx

@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) 2020-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 { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  DataProductEditorState,
+  LakehouseAccessPointState,
+} from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
+import {
+  clsx,
+  LockIcon,
+  PanelContent,
+  PanelHeader,
+  PanelHeaderActions,
+  Dialog,
+  PanelDivider,
+  InputWithInlineValidation,
+  useResizeDetector,
+  AccessPointIcon,
+  TimesIcon,
+  PlusIcon,
+  PanelHeaderActionItem,
+} from '@finos/legend-art';
+import { useRef, useState, useEffect } from 'react';
+import { filterByType } from '@finos/legend-shared';
+import { InlineLambdaEditor } from '@finos/legend-query-builder';
+
+const NewAccessPointAccessPOint = observer(
+  (props: { dataProductEditorState: DataProductEditorState }) => {
+    const { dataProductEditorState: dataProductEditorState } = props;
+    const accessPointInputRef = useRef<HTMLInputElement>(null);
+    const [id, setId] = useState<string | undefined>(undefined);
+    const handleIdChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => setId(event.target.value);
+    const handleClose = () => {
+      dataProductEditorState.setAccessPointModal(false);
+    };
+    const handleSubmit = () => {
+      if (id) {
+        dataProductEditorState.addAccessPoint(id);
+        handleClose();
+      }
+    };
+    const handleEnter = (): void => {
+      accessPointInputRef.current?.focus();
+    };
+    const disableCreateButton =
+      id === '' ||
+      id === undefined ||
+      dataProductEditorState.accessPointStates
+        .map((e) => e.accessPoint.id)
+        .includes(id);
+    const errors =
+      id === ''
+        ? `ID is empty`
+        : dataProductEditorState.accessPointStates
+              .map((e) => e.accessPoint.id)
+              .includes(id ?? '')
+          ? `ID already exists`
+          : undefined;
+    return (
+      <Dialog
+        open={true}
+        onClose={handleClose}
+        TransitionProps={{
+          onEnter: handleEnter,
+        }}
+        classes={{
+          container: 'search-modal__container',
+        }}
+        PaperProps={{
+          classes: {
+            root: 'search-modal__inner-container',
+          },
+        }}
+      >
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+          className={clsx('modal search-modal', {
+            'modal--dark': true,
+          })}
+        >
+          <div className="modal__title">New Access Point</div>
+          <div>
+            <InputWithInlineValidation
+              className={clsx('input new-access-point-modal__id-input', {
+                'input--dark': true,
+              })}
+              ref={accessPointInputRef}
+              spellCheck={false}
+              value={id}
+              onChange={handleIdChange}
+              placeholder="Access Point ID"
+              error={errors}
+            />
+          </div>
+          <PanelDivider />
+          <div className="search-modal__actions">
+            <button
+              className={clsx('btn btn--primary', {
+                'btn--dark': true,
+              })}
+              disabled={disableCreateButton}
+            >
+              Create
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+export const LakehouseDataProductAcccessPointEditor = observer(
+  (props: {
+    accessPointState: LakehouseAccessPointState;
+    isReadOnly: boolean;
+  }) => {
+    const { accessPointState } = props;
+    const accessPoint = accessPointState.accessPoint;
+    const productEditorState = accessPointState.state;
+    const lambdaEditorState = accessPointState.lambdaState;
+    const propertyHasParserError = productEditorState.accessPointStates
+      .filter(filterByType(LakehouseAccessPointState))
+      .find((pm) => pm.lambdaState.parserError);
+    return (
+      <div
+        className={clsx('access-point-editor', {
+          backdrop__element: propertyHasParserError,
+        })}
+      >
+        <div className="access-point-editor__metadata">
+          <div className={clsx('access-point-editor__name', {})}>
+            <div className="access-point-editor__name__label">
+              {accessPoint.id}
+            </div>
+          </div>
+          <div className="access-point-editor__info">
+            <div
+              className={clsx('access-point-editor__type')}
+              title={accessPoint.targetEnvironment}
+            >
+              <div className="access-point-editor__type__label">
+                {accessPoint.targetEnvironment}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="access-point-editor__content">
+          <div className="access-point-editor__generic-entry">
+            <div className="access-point-editor__entry__container">
+              <div className="access-point-editor__entry">
+                <InlineLambdaEditor
+                  className={'access-point-editor__lambda-editor'}
+                  disabled={false}
+                  lambdaEditorState={lambdaEditorState}
+                  forceBackdrop={Boolean(lambdaEditorState.parserError)}
+                />
+              </div>
+            </div>
+            <button
+              className="access-point-editor__generic-entry__remove-btn"
+              onClick={() => {
+                productEditorState.deleteAccessPoint(accessPointState);
+              }}
+              tabIndex={-1}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const DataProductEditorSplashScreen = observer(
+  (props: { dataProductEditorState: DataProductEditorState }) => {
+    const { dataProductEditorState } = props;
+    const logoWidth = 280;
+    const logoHeight = 270;
+    const [showLogo, setShowLogo] = useState(false);
+    const { ref, height, width } = useResizeDetector<HTMLDivElement>();
+
+    useEffect(() => {
+      setShowLogo((width ?? 0) > logoWidth && (height ?? 0) > logoHeight);
+    }, [height, width]);
+
+    return (
+      <div ref={ref} className="data-product-editor__splash-screen">
+        <div
+          onClick={() => dataProductEditorState.setAccessPointModal(true)}
+          className="data-product-editor__splash-screen__label"
+        >
+          Add Access Point
+        </div>
+        <div className="data-product-editor__splash-screen__spacing"></div>
+        <div
+          onClick={() => dataProductEditorState.setAccessPointModal(true)}
+          title="Add new Access Point"
+          className={clsx('data-product-editor__splash-screen__logo', {
+            'data-product-editor__splash-screen__logo--hidden': !showLogo,
+          })}
+        >
+          <AccessPointIcon />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const DataProductEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const dataProductEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(DataProductEditorState);
+  const product = dataProductEditorState.product;
+  const accessPointStates = dataProductEditorState.accessPointStates;
+  const isReadOnly = dataProductEditorState.isReadOnly;
+  const openNewModal = () => {
+    dataProductEditorState.setAccessPointModal(true);
+  };
+  return (
+    <div className="data-product-editor">
+      <div className="panel">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            {isReadOnly && (
+              <div className="uml-element-editor__header__lock">
+                <LockIcon />
+              </div>
+            )}
+            <div className="panel__header__title__label">data product</div>
+            <div className="panel__header__title__content">{product.name}</div>
+          </div>
+        </div>
+        <div className="panel">
+          <PanelHeader>
+            <div className="panel__header__title">
+              <div className="panel__header__title__content">ACCESS POINTS</div>
+            </div>
+            <PanelHeaderActions>
+              <PanelHeaderActionItem
+                className="panel__header__action"
+                onClick={openNewModal}
+                disabled={isReadOnly}
+                title="Create new access point"
+              >
+                <PlusIcon />
+              </PanelHeaderActionItem>
+            </PanelHeaderActions>
+          </PanelHeader>
+          <PanelContent>
+            {!isReadOnly &&
+              accessPointStates
+                .filter(filterByType(LakehouseAccessPointState))
+                .map((apState) => (
+                  <LakehouseDataProductAcccessPointEditor
+                    key={apState.accessPoint.id}
+                    isReadOnly={isReadOnly}
+                    accessPointState={apState}
+                  />
+                ))}
+            {!accessPointStates.length && (
+              <DataProductEditorSplashScreen
+                dataProductEditorState={dataProductEditorState}
+              />
+            )}
+          </PanelContent>
+          {dataProductEditorState.accessPointModal && (
+            <NewAccessPointAccessPOint
+              dataProductEditorState={dataProductEditorState}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -88,6 +88,8 @@ export const getElementTypeLabel = (
       return 'data';
     case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
       return 'local connection';
+    case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+      return 'lakehouse data product';
     default: {
       if (type) {
         const extraElementTypeLabelGetters = editorStore.pluginManager

package/src/stores/editor/EditorGraphState.ts

@@ -90,6 +90,7 @@ import {
   SnowflakeApp,
   GraphEntities,
   HostedService,
+  DataProduct,
 } from '@finos/legend-graph';
 import { CONFIGURATION_EDITOR_TAB } from './editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from './utils/ModelClassifierUtils.js';
@@ -854,6 +855,8 @@ export class EditorGraphState {
       return PACKAGEABLE_ELEMENT_TYPE.SNOWFLAKE_APP;
     } else if (element instanceof HostedService) {
       return PACKAGEABLE_ELEMENT_TYPE.HOSTED_SERVICE;
+    } else if (element instanceof DataProduct) {
+      return PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT;
     }
     const extraElementTypeLabelGetters = this.editorStore.pluginManager
       .getApplicationPlugins()

package/src/stores/editor/EditorStore.ts

@@ -1161,6 +1161,7 @@ export class EditorStore implements CommandRegistrar {
             PACKAGEABLE_ELEMENT_TYPE.RUNTIME,
             PACKAGEABLE_ELEMENT_TYPE.MAPPING,
             PACKAGEABLE_ELEMENT_TYPE.SERVICE,
+            PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT,
             this.applicationStore.config.options
               .TEMPORARY__enableLocalConnectionBuilder
               ? PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION

package/src/stores/editor/EditorTabManagerState.ts

@@ -35,6 +35,7 @@ import {
   INTERNAL__UnknownFunctionActivator,
   SnowflakeApp,
   HostedService,
+  DataProduct,
 } from '@finos/legend-graph';
 import {
   type Clazz,
@@ -64,6 +65,7 @@ import { INTERNAL__UnknownFunctionActivatorEdtiorState } from './editor-state/el
 import { SnowflakeAppFunctionActivatorEdtiorState } from './editor-state/element-editor-state/function-activator/SnowflakeAppFunctionActivatorEditorState.js';
 import { HostedServiceFunctionActivatorEditorState } from './editor-state/element-editor-state/function-activator/HostedServiceFunctionActivatorEditorState.js';
 import { ArtifactGenerationViewerState } from './editor-state/ArtifactGenerationViewerState.js';
+import { DataProductEditorState } from './editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 
 export class EditorTabManagerState extends TabManagerState {
   readonly editorStore: EditorStore;
@@ -173,6 +175,8 @@ export class EditorTabManagerState extends TabManagerState {
       return new MappingEditorState(this.editorStore, element);
     } else if (element instanceof Service) {
       return new ServiceEditorState(this.editorStore, element);
+    } else if (element instanceof DataProduct) {
+      return new DataProductEditorState(this.editorStore, element);
     } else if (element instanceof GenerationSpecification) {
       return new GenerationSpecificationEditorState(this.editorStore, element);
     } else if (element instanceof FileGenerationSpecification) {

package/src/stores/editor/NewElementState.ts

@@ -84,6 +84,7 @@ import {
   RuntimePointer,
   GenericTypeExplicitReference,
   GenericType,
+  DataProduct,
 } from '@finos/legend-graph';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -999,6 +1000,9 @@ export class NewElementState {
       case PACKAGEABLE_ELEMENT_TYPE.GENERATION_SPECIFICATION:
         element = new GenerationSpecification(name);
         break;
+      case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+        element = new DataProduct(name);
+        break;
       default: {
         const extraNewElementFromStateCreators = this.editorStore.pluginManager
           .getApplicationPlugins()