@finos/legend-application-studio 28.21.31 → 28.21.33

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

@@ -86,7 +86,6 @@ import {
   type ChangeEventHandler,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -114,15 +113,12 @@ import { DataProductTestableEditor } from './testable/DataProductTestableEditor.
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import {
-  type DataProductElement,
-  type DataProductElementScope,
   type Expertise,
   type GraphManagerState,
   type LakehouseAccessPoint,
   type Mapping,
   type PackageableElement,
   type DataProduct,
-  type DataProductDiagram,
   DataProductEmbeddedImageIcon,
   DataProductLibraryIcon,
   Email,
@@ -174,8 +170,6 @@ import {
   dataProduct_setOperationalMetadataIfAbsent,
   operationalMetadata_deleteCoverageRegion,
   operationalMetadata_addCoverageRegion,
-  dataProductDiagram_setTitle,
-  dataProductDiagram_setDescription,
   operationalMetadata_setUpdateFrequency,
   dataProduct_setOwner,
   appDirOwner_setProduction,
@@ -1383,277 +1377,6 @@ const AccessPointGroupPublicToggle = observer(
   },
 );
 
-export const CompatibleDiagramsEditor = observer(
-  (props: { groupState: ModelAccessPointGroupState }) => {
-    const { groupState } = props;
-    const group = groupState.value;
-
-    const handleDiagramTitleChange = (
-      diagram: DataProductDiagram,
-      value: string | undefined,
-    ): void => {
-      dataProductDiagram_setTitle(diagram, value ?? '');
-    };
-
-    const handleDiagramDescriptionChange = (
-      diagram: DataProductDiagram,
-      value: string | undefined,
-    ): void => {
-      dataProductDiagram_setDescription(diagram, value);
-    };
-
-    const handleAddDiagram = (option: {
-      label: string;
-      value: PackageableElement;
-    }): void => {
-      groupState.addDiagram(option);
-    };
-
-    const handleRemoveDiagram = (diagram: DataProductDiagram): void => {
-      groupState.handleRemoveDiagram(diagram);
-    };
-
-    // ListEditor component renderers
-    const DiagramComponent = observer(
-      (diagramComponentProps: {
-        item: DataProductDiagram;
-      }): React.ReactElement => {
-        const { item } = diagramComponentProps;
-
-        return (
-          <>
-            <div className="panel__content__form__section__list__item__content">
-              <div className="panel__content__form__section__header__label">
-                Diagram
-              </div>
-              <div className="panel__content__form__section__list__item__content__title">
-                {item.diagram.name}
-              </div>
-            </div>
-            <div className="panel__content__form__section__list__item__form">
-              <PanelFormTextField
-                name="Title"
-                value={item.title}
-                update={(value) => handleDiagramTitleChange(item, value)}
-                placeholder="Enter title"
-                className="dataSpace-editor__general__diagrams__title"
-              />
-              <PanelFormTextField
-                name="Description"
-                value={item.description ?? ''}
-                update={(value) => handleDiagramDescriptionChange(item, value)}
-                placeholder="Enter description"
-                className="dataSpace-editor__general__diagrams__description"
-              />
-            </div>
-          </>
-        );
-      },
-    );
-
-    const hasMappingSet = group.mapping.value.path !== '';
-    const noDiagramsInProject =
-      groupState.getCompatibleDiagramOptions().length === 0 &&
-      group.diagrams.length === 0;
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [isAddingDiagram, setIsAddingDiagram] = useState(false);
-
-    const handleGenerateFromMapping = (): void => {
-      setIsGenerating(true);
-      flowResult(groupState.generateDiagramFromMapping())
-        .catch(
-          groupState.state.editorStore.applicationStore.alertUnhandledError,
-        )
-        .finally(() => setIsGenerating(false));
-    };
-
-    const NewDiagramComponent = observer(
-      (newDiagramProps: {
-        onFinishEditing: () => void;
-      }): React.ReactElement => {
-        const { onFinishEditing } = newDiagramProps;
-
-        useLayoutEffect(() => {
-          setIsAddingDiagram(true);
-          return () => setIsAddingDiagram(false);
-        }, []);
-
-        return (
-          <>
-            <div className="panel__content__form__section__list__new-item__input">
-              <CustomSelectorInput
-                options={groupState.getCompatibleDiagramOptions()}
-                onChange={(event: {
-                  label: string;
-                  value: PackageableElement;
-                }) => {
-                  onFinishEditing();
-                  handleAddDiagram(event);
-                }}
-                placeholder="Select a diagram to add..."
-                darkMode={
-                  !groupState.state.editorStore.applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-              />
-            </div>
-            {noDiagramsInProject &&
-              hasMappingSet &&
-              !groupState.state.isReadOnly && (
-                <button
-                  className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
-                  disabled={isGenerating}
-                  onClick={() => {
-                    onFinishEditing();
-                    handleGenerateFromMapping();
-                  }}
-                  title="Auto-generate a diagram from the mapping"
-                  tabIndex={-1}
-                >
-                  {isGenerating ? 'Generating...' : 'Generate from Mapping'}
-                </button>
-              )}
-          </>
-        );
-      },
-    );
-
-    return (
-      <div className="data-product-editor__diagrams-section">
-        <ListEditor
-          title="Diagrams"
-          prompt="Add diagrams to include in this Data Product. Diagrams are required to showcase and explain your curated data models"
-          items={group.diagrams}
-          keySelector={(element: DataProductDiagram) => element.diagram.name}
-          ItemComponent={DiagramComponent}
-          NewItemComponent={NewDiagramComponent}
-          handleRemoveItem={handleRemoveDiagram}
-          isReadOnly={groupState.state.isReadOnly}
-          emptyMessage="⚠ No Diagrams specified. Add at least one diagram to this Data Product."
-          emptyClassName="data-product-editor__empty-diagram"
-        />
-        {noDiagramsInProject &&
-          !isAddingDiagram &&
-          hasMappingSet &&
-          !groupState.state.isReadOnly && (
-            <div className="data-product-editor__generate-diagram-btn">
-              <button
-                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                disabled={isGenerating}
-                onClick={handleGenerateFromMapping}
-                title="Generate a Diagram from the Mapping"
-                tabIndex={-1}
-              >
-                {isGenerating ? 'Generating...' : 'Generate from Mapping'}
-              </button>
-            </div>
-          )}
-      </div>
-    );
-  },
-);
-
-export const FeaturedElementsEditor = observer(
-  (props: { groupState: ModelAccessPointGroupState; isReadOnly: boolean }) => {
-    const { groupState, isReadOnly } = props;
-    const group = groupState.value;
-
-    // Event handlers
-    const handleAddElement = (option: {
-      label: string;
-      value: DataProductElement;
-    }): void => {
-      if (typeof option.value === 'object') {
-        groupState.addFeaturedElement(option.value);
-      }
-    };
-
-    const handleRemoveElement = (element: DataProductElementScope): void => {
-      groupState.removeFeaturedElement(element);
-    };
-
-    const handleElementExcludeChange = (
-      element: DataProductElementScope,
-      event: React.ChangeEvent<HTMLInputElement>,
-    ): void => {
-      groupState.excludeFeaturedElement(element, event.target.checked);
-    };
-
-    // ListEditor component renderers
-    const ElementComponent = observer(
-      (elementComponentProps: {
-        item: DataProductElementScope;
-      }): React.ReactElement => {
-        const { item } = elementComponentProps;
-
-        return (
-          <div className="data-product-editor__element-item">
-            <div className="panel__content__form__section__list__item__content__label">
-              {item.element.value.path}
-            </div>
-            <div className="panel__content__form__section__list__item__content__actions">
-              <div className="panel__content__form__section__list__item__content__actions-exclude">
-                <Checkbox
-                  disabled={isReadOnly}
-                  checked={item.exclude ?? false}
-                  onChange={(event) => handleElementExcludeChange(item, event)}
-                  size="small"
-                  className="panel__content__form__section__list__item__content__actions-exclude__btn"
-                />
-                <span className="panel__content__form__section__list__item__content__actions__label">
-                  Exclude
-                </span>
-              </div>
-            </div>
-          </div>
-        );
-      },
-    );
-
-    const NewElementComponent = observer(
-      (newElementProps: { onFinishEditing: () => void }) => {
-        const { onFinishEditing } = newElementProps;
-
-        return (
-          <div className="panel__content__form__section__list__new-item__input">
-            <CustomSelectorInput
-              options={groupState.getFeaturedElementOptions()}
-              onChange={(event: {
-                label: string;
-                value: DataProductElement;
-              }) => {
-                onFinishEditing();
-                handleAddElement(event);
-              }}
-              placeholder="Select an element to add..."
-              darkMode={
-                !groupState.state.editorStore.applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-            />
-          </div>
-        );
-      },
-    );
-
-    return (
-      <ListEditor
-        title="Featured Elements"
-        prompt="Add classes and associations to display under Models Documentation. Use the exclude checkbox to exclude certain elements from this Data Product entirely."
-        items={group.featuredElements}
-        keySelector={(element: DataProductElementScope) =>
-          element.element.value.path
-        }
-        ItemComponent={ElementComponent}
-        NewItemComponent={NewElementComponent}
-        handleRemoveItem={handleRemoveElement}
-        isReadOnly={isReadOnly}
-        emptyMessage="No elements specified"
-      />
-    );
-  },
-);
-
 const ModelAccessPointGroupEditor = observer(
   (props: { groupState: ModelAccessPointGroupState; isReadOnly: boolean }) => {
     const { groupState, isReadOnly } = props;
@@ -1718,11 +1441,6 @@ const ModelAccessPointGroupEditor = observer(
             <LongArrowRightIcon />
           </button>
         </div>
-        <FeaturedElementsEditor
-          groupState={groupState}
-          isReadOnly={isReadOnly}
-        />
-        <CompatibleDiagramsEditor groupState={groupState} />
       </div>
     );
   },

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -795,7 +795,7 @@ const AssertFailViewer = observer(
   },
 );
 
-const TestAssertionResultViewer = observer(
+export const TestAssertionResultViewer = observer(
   (props: { testAssertionEditorState: TestAssertionEditorState }) => {
     const { testAssertionEditorState } = props;
     const parentAssertionResultState =

package/src/components/editor/panel-group/DevToolPanel.tsx

@@ -31,12 +31,8 @@ import {
 } from '@finos/legend-shared';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { LEGEND_STUDIO_SETTING_KEY } from '../../../__lib__/LegendStudioSetting.js';
-import { flowResult } from 'mobx';
-import {
-  PARSER_SECTION_MARKER,
-  PURE_PARSER,
-  type PureModel,
-} from '@finos/legend-graph';
+import { PARSER_SECTION_MARKER, PURE_PARSER } from '@finos/legend-graph';
+import { ProjectDependencyCoordinates } from '@finos/legend-server-depot';
 
 export const DevToolPanel = observer(() => {
   const editorStore = useEditorStore();
@@ -75,53 +71,50 @@ export const DevToolPanel = observer(() => {
     );
   };
 
-  const downloadDependencyProjectGrammars = async (): Promise<string[]> => {
-    const grammars = await Promise.all(
-      Array.from(
-        editorStore.graphManagerState.graph.dependencyManager
-          .projectDependencyModelsIndex,
-      ).map(
-        (graph) =>
-          flowResult(
-            editorStore.graphManagerState.graphManager.graphToPureCode(
-              graph[1] as PureModel,
-              {
-                pretty: true,
-              },
-            ),
-          ) as string,
-      ),
-    );
-    return grammars;
-  };
-
   const downloadProjectGrammar = async (
     withDependency: boolean,
   ): Promise<void> => {
-    const graphGrammar = (await Promise.all([
-      flowResult(
-        editorStore.graphManagerState.graphManager.graphToPureCode(
-          editorStore.graphManagerState.graph,
-          { pretty: true },
-        ),
-      ),
-    ])) as unknown as string;
-    const dependencyGrammars = withDependency
-      ? ((await Promise.all([
-          flowResult(downloadDependencyProjectGrammars()),
-        ])) as unknown as string[])
-      : [];
-    const fullGrammar = [graphGrammar, ...dependencyGrammars].join(
-      `\n${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n`,
+    const graphManager = editorStore.graphManagerState.graphManager;
+    const graphGrammar = await graphManager.graphToPureCode(
+      editorStore.graphManagerState.graph,
+      { pretty: true },
     );
+    let dependencyGrammar: string | undefined;
+    if (withDependency) {
+      // Fetch the dependency graph directly from Depot as a
+      // `V1_PureModelContextData` payload and hand it straight to the engine
+      // grammar transform. This skips building a `PureModel` for dependencies
+      // and collapses the whole dependency graph into a single engine call.
+      const projectDependencies =
+        editorStore.projectConfigurationEditorState.currentProjectConfiguration
+          .projectDependencies;
+      if (projectDependencies.length) {
+        const dependencyCoordinates =
+          await editorStore.graphState.buildProjectDependencyCoordinates(
+            projectDependencies,
+          );
+        const dependencyProtocolGraph =
+          await editorStore.depotServerClient.collectDependencyEntitiesAsPureModelContextData(
+            dependencyCoordinates.map((e) =>
+              ProjectDependencyCoordinates.serialization.toJson(e),
+            ),
+            true,
+            true,
+          );
+        dependencyGrammar = await graphManager.protocolToPureCode(
+          dependencyProtocolGraph,
+          { pretty: true },
+        );
+      }
+    }
+    const fullGrammar =
+      dependencyGrammar === undefined
+        ? graphGrammar
+        : `${graphGrammar}\n${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n// ------------------------------------------------------------\n// Dependency grammar starts here\n// ------------------------------------------------------------\n${dependencyGrammar}`;
     const fileName = `grammar.${getContentTypeFileExtension(
       ContentType.TEXT_PLAIN,
     )}`;
-    downloadFileUsingDataURI(
-      fileName,
-      `${fullGrammar}`,
-      ContentType.TEXT_PLAIN,
-    );
+    downloadFileUsingDataURI(fileName, fullGrammar, ContentType.TEXT_PLAIN);
   };
 
   return (
@@ -205,16 +198,20 @@ export const DevToolPanel = observer(() => {
         />
         <PanelFormListItems title="Download Project Grammar">
           <div className="developer-tools__action-groups">
-            <div className="developer-tools__action-group">
+            <div
+              className="developer-tools__action-group"
+              onClick={() => {
+                downloadProjectGrammar(false).catch(
+                  editorStore.applicationStore.alertUnhandledError,
+                );
+              }}
+              role="button"
+              tabIndex={-1}
+              title="Download Project Grammar"
+            >
               <button
                 className="developer-tools__action-group__btn"
-                onClick={() => {
-                  downloadProjectGrammar(false).catch(
-                    editorStore.applicationStore.alertUnhandledError,
-                  );
-                }}
                 tabIndex={-1}
-                title="Download Project Grammar"
               >
                 <CloudDownloadIcon />
               </button>
@@ -222,16 +219,20 @@ export const DevToolPanel = observer(() => {
                 download grammar without dependency
               </div>
             </div>
-            <div className="developer-tools__action-group">
+            <div
+              className="developer-tools__action-group"
+              onClick={() => {
+                downloadProjectGrammar(true).catch(
+                  editorStore.applicationStore.alertUnhandledError,
+                );
+              }}
+              role="button"
+              tabIndex={-1}
+              title="Download Project Grammar with Dependency"
+            >
               <button
                 className="developer-tools__action-group__btn"
-                onClick={() => {
-                  downloadProjectGrammar(true).catch(
-                    editorStore.applicationStore.alertUnhandledError,
-                  );
-                }}
                 tabIndex={-1}
-                title="Download Project Grammar with Dependency"
               >
                 <CloudDownloadIcon />
               </button>

package/src/components/extensions/Core_LegendStudioApplicationPlugin.tsx

@@ -190,6 +190,7 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR,
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.INGEST_DEFINITION_EDITOR,
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_PRODUCT_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.AVAILABILITY_EDITOR,
     ];
   }
 

package/src/stores/editor/EditorGraphState.ts

@@ -95,6 +95,7 @@ import {
   DataProduct,
   IngestDefinition,
   MemSQLFunction,
+  Availability,
 } 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';
@@ -881,6 +882,8 @@ export class EditorGraphState {
       return PACKAGEABLE_ELEMENT_TYPE._COMPUTE;
     } else if (element instanceof IngestDefinition) {
       return PACKAGEABLE_ELEMENT_TYPE.INGEST_DEFINITION;
+    } else if (element instanceof Availability) {
+      return PACKAGEABLE_ELEMENT_TYPE.AVAILABILITY;
     } else if (element instanceof MemSQLFunction) {
       return PACKAGEABLE_ELEMENT_TYPE.MEM_SQL_FUNCTION;
     }

package/src/stores/editor/EditorTabManagerState.ts

@@ -39,6 +39,7 @@ import {
   DataProduct,
   IngestDefinition,
   MemSQLFunction,
+  Availability,
 } from '@finos/legend-graph';
 import {
   type Clazz,
@@ -73,6 +74,7 @@ import { MemSQLFunctionActivatorEditorState } from './editor-state/element-edito
 import { ArtifactGenerationViewerState } from './editor-state/ArtifactGenerationViewerState.js';
 import { DataProductEditorState } from './editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 import { IngestDefinitionEditorState } from './editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
+import { AvailabilityEditorState } from './editor-state/element-editor-state/availability/AvailabilityEditorState.js';
 import type { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export class EditorTabManagerState extends TabManagerState {
@@ -186,6 +188,8 @@ export class EditorTabManagerState extends TabManagerState {
       return new ServiceEditorState(this.editorStore, element);
     } else if (element instanceof DataProduct) {
       return new DataProductEditorState(this.editorStore, element, config);
+    } else if (element instanceof Availability) {
+      return new AvailabilityEditorState(this.editorStore, element);
     } else if (element instanceof GenerationSpecification) {
       return new GenerationSpecificationEditorState(this.editorStore, element);
     } else if (element instanceof FileGenerationSpecification) {

package/src/stores/editor/editor-state/element-editor-state/availability/AvailabilityEditorState.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 { type PackageableElement, Availability } from '@finos/legend-graph';
+import { guaranteeType } from '@finos/legend-shared';
+import { action, makeObservable, observable } from 'mobx';
+import type { EditorStore } from '../../../EditorStore.js';
+import { ElementEditorState } from '../ElementEditorState.js';
+import { AvailabilityTestableState } from './testable/AvailabilityTestableState.js';
+
+export enum AVAILABILITY_TAB {
+  DEFINITION = 'Definition',
+  TESTING = 'Testing',
+}
+
+export class AvailabilityEditorState extends ElementEditorState {
+  activeTab = AVAILABILITY_TAB.DEFINITION;
+  readonly testableState = new AvailabilityTestableState(this);
+
+  constructor(editorStore: EditorStore, element: PackageableElement) {
+    super(editorStore, element);
+
+    makeObservable(this, {
+      activeTab: observable,
+      setActiveTab: action,
+    });
+  }
+
+  get availability(): Availability {
+    return guaranteeType(this.element, Availability);
+  }
+
+  setActiveTab(tab: AVAILABILITY_TAB): void {
+    this.activeTab = tab;
+  }
+
+  override reprocess(
+    newElement: PackageableElement,
+    editorStore: EditorStore,
+  ): ElementEditorState {
+    return new AvailabilityEditorState(editorStore, newElement);
+  }
+}