@finos/legend-application-studio 28.19.21 → 28.19.23

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

@@ -70,6 +70,7 @@ import {
   EyeIcon,
   CloseEyeIcon,
   Checkbox,
+  BugIcon,
 } from '@finos/legend-art';
 import React, {
   useRef,
@@ -90,6 +91,9 @@ import {
   type DataProduct,
   type LakehouseAccessPoint,
   StereotypeExplicitReference,
+  type V1_DataProductArtifactAccessPointGroup,
+  type V1_DataProductArtifactAccessPointImplementation,
+  type V1_DataProductArtifactGeneration,
 } from '@finos/legend-graph';
 import {
   accessPointGroup_setDescription,
@@ -162,6 +166,7 @@ const HoverTextArea: React.FC<HoverTextAreaProps> = ({
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       className={clsx(className)}
+      style={{ whiteSpace: 'pre-line' }}
     >
       {text}
     </div>
@@ -190,7 +195,7 @@ const AccessPointTitle = observer(
     };
     const updateAccessPointName: React.ChangeEventHandler<HTMLTextAreaElement> =
       action((event) => {
-        if (!event.target.value.includes(' ')) {
+        if (event.target.value.match(/^[0-9a-zA-Z_]+$/)) {
           accessPoint.id = event.target.value;
         }
       });
@@ -211,8 +216,13 @@ const AccessPointTitle = observer(
         }}
       />
     ) : (
-      <div onClick={handleNameEdit} title="Click to edit access point title">
-        <div className="access-point-editor__name__label">{accessPoint.id}</div>
+      <div
+        className="access-point-editor__name__label"
+        onClick={handleNameEdit}
+        title="Click to edit access point title"
+        style={{ flex: '1 1 auto' }}
+      >
+        {accessPoint.id}
       </div>
     );
   },
@@ -225,7 +235,7 @@ const AccessPointClassification = observer(
   }) => {
     const { accessPoint, groupState } = props;
     const applicationStore = useEditorStore().applicationStore;
-    const CHOOSE_CLASSIFICATION = 'Choose Classification';
+    const CHOOSE_CLASSIFICATION = 'Classification';
     const updateAccessPointClassificationTextbox: React.ChangeEventHandler<HTMLTextAreaElement> =
       action((event) => {
         accessPoint.classification = event.target.value;
@@ -282,7 +292,15 @@ const AccessPointClassification = observer(
     return (
       <div className="access-point-editor__classification">
         {classificationOptions.length > 1 ? (
-          <div>
+          <div
+            style={{
+              borderWidth: 'thin',
+              borderColor:
+                currentClassification.label === CHOOSE_CLASSIFICATION
+                  ? 'var(--color-red-300)'
+                  : 'transparent',
+            }}
+          >
             <CustomSelectorInput
               className="explorer__new-element-modal__driver__dropdown"
               options={classificationOptions}
@@ -323,6 +341,62 @@ const AccessPointClassification = observer(
   },
 );
 
+const AccessPointGenerationViewer = observer(
+  (props: {
+    accessPointState: LakehouseAccessPointState;
+    generationOutput: string;
+  }) => {
+    const { accessPointState, generationOutput } = props;
+    const editorStore = accessPointState.state.state.editorStore;
+    const closeDebug = (): void => {
+      accessPointState.setShowDebug(false);
+    };
+
+    return (
+      <Dialog
+        open={accessPointState.showDebug}
+        onClose={closeDebug}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          className="editor-modal"
+          darkMode={
+            !editorStore.applicationStore.layoutService
+              .TEMPORARY__isLightColorThemeEnabled
+          }
+        >
+          <ModalHeader
+            title={`${accessPointState.accessPoint.id} Plan Generation`}
+          />
+          <ModalBody>
+            <div className="panel__content execution-plan-viewer__panel__content">
+              <CodeEditor
+                inputValue={generationOutput}
+                isReadOnly={true}
+                language={CODE_EDITOR_LANGUAGE.JSON}
+                hidePadding={true}
+                hideMinimap={true}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              title="Close plan generation modal"
+              onClick={closeDebug}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 export const LakehouseDataProductAcccessPointEditor = observer(
   (props: {
     accessPointState: LakehouseAccessPointState;
@@ -339,6 +413,7 @@ export const LakehouseDataProductAcccessPointEditor = observer(
     const [editingDescription, setEditingDescription] = useState(false);
     const [isHovering, setIsHovering] = useState(false);
     const ref = useRef<HTMLDivElement>(null);
+    const [debugOutput, setDebugOutput] = useState('');
 
     const handleDescriptionEdit = () => setEditingDescription(true);
     const handleDescriptionBlur = () => {
@@ -361,6 +436,51 @@ export const LakehouseDataProductAcccessPointEditor = observer(
       },
     );
 
+    const debugPlanGeneration = async (): Promise<void> => {
+      try {
+        const generatedArtifacts =
+          await editorStore.graphManagerState.graphManager.generateArtifacts(
+            editorStore.graphManagerState.graph,
+            editorStore.graphEditorMode.getGraphTextInputOption(),
+            [groupState.state.elementPath],
+          );
+        const dataProductExtension = 'dataProduct';
+        const dataProductArtifact = generatedArtifacts.values.filter(
+          (artifact) => artifact.extension === dataProductExtension,
+        );
+        const dataProductContent =
+          dataProductArtifact[0]?.artifactsByExtensionElements[0]?.files[0]
+            ?.content ?? null;
+
+        if (dataProductContent) {
+          const contentJson = JSON.parse(
+            dataProductContent,
+          ) as V1_DataProductArtifactGeneration;
+          const apPlanGeneration = contentJson.accessPointGroups
+            .find(
+              (group: V1_DataProductArtifactAccessPointGroup) =>
+                group.id === groupState.value.id,
+            )
+            ?.accessPointImplementations.find(
+              (
+                apImplementation: V1_DataProductArtifactAccessPointImplementation,
+              ) => apImplementation.id === accessPoint.id,
+            );
+
+          setDebugOutput(JSON.stringify(apPlanGeneration, null, 2));
+          accessPointState.setShowDebug(true);
+        } else {
+          throw new Error(
+            'Could not find contents of this data product artifact',
+          );
+        }
+      } catch (error) {
+        editorStore.applicationStore.notificationService.notifyError(
+          `Failed to fetch access point plan generation: ${error}`,
+        );
+      }
+    };
+
     const handleRemoveAccessPoint = (): void => {
       editorStore.applicationStore.alertService.setActionAlertInfo({
         message: `Are you sure you want to delete Access Point ${accessPoint.id}?`,
@@ -461,7 +581,19 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                     style={{ padding: 0, margin: 0 }}
                   />
                   <Tooltip
-                    title="This access point is reproducible based on a specific Lakehouse batch in time"
+                    title={
+                      <div
+                        style={{
+                          maxWidth: '400px',
+                          whiteSpace: 'normal',
+                          wordWrap: 'break-word',
+                        }}
+                      >
+                        Marking as &quot;reproducible&quot; means consumers can
+                        consistently retrieve the exact historical data as it
+                        existed at any specific Lakehouse batch.
+                      </div>
+                    }
                     arrow={true}
                     placement={'top'}
                   >
@@ -526,10 +658,11 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                 placeholder="Access Point description"
                 onBlur={handleDescriptionBlur}
                 style={{
-                  overflow: 'hidden',
-                  resize: 'none',
+                  resize: 'vertical',
                   padding: '0.25rem',
                   marginLeft: '0.5rem',
+                  marginTop: '0.5rem',
+                  height: 'auto',
                 }}
               />
             ) : (
@@ -573,18 +706,36 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                   </div>
                 </div>
                 <button
-                  className="access-point-editor__generic-entry__remove-btn"
+                  className="access-point-editor__generic-entry__remove-btn__debug"
                   onClick={() => {
-                    handleRemoveAccessPoint();
+                    debugPlanGeneration().catch(
+                      editorStore.applicationStore.alertUnhandledError,
+                    );
                   }}
                   tabIndex={-1}
-                  title="Remove"
+                  title="AP Plan Generation"
                 >
-                  <TimesIcon />
+                  <BugIcon />
                 </button>
               </div>
             </div>
           </div>
+          <button
+            className="access-point-editor__generic-entry__remove-btn"
+            onClick={() => {
+              handleRemoveAccessPoint();
+            }}
+            tabIndex={-1}
+            title="Remove"
+          >
+            <TimesIcon />
+          </button>
+          {accessPointState.showDebug && (
+            <AccessPointGenerationViewer
+              accessPointState={accessPointState}
+              generationOutput={debugOutput}
+            />
+          )}
         </div>
       </PanelDnDEntry>
     );
@@ -724,7 +875,7 @@ const AccessPointGroupEditor = observer(
       setIsHoveringName(false);
     };
     const updateGroupName = (val: string): void => {
-      if (val && !val.includes(' ')) {
+      if (val.match(/^[0-9a-zA-Z_]+$/)) {
         accessPointGroup_setName(groupState.value, val);
       }
     };
@@ -821,8 +972,8 @@ const AccessPointGroupEditor = observer(
               onBlur={handleDescriptionBlur}
               style={{
                 overflow: 'hidden',
-                resize: 'none',
                 padding: '0.25rem',
+                height: 'auto',
               }}
             />
           ) : (

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -214,14 +214,22 @@ export class LakehouseAccessPointState extends AccessPointState {
   declare accessPoint: LakehouseAccessPoint;
   lambdaState: AccessPointLambdaEditorState;
 
+  showDebug = false;
+
   constructor(val: LakehouseAccessPoint, editorState: AccessPointGroupState) {
     super(val, editorState);
     makeObservable(this, {
       lambdaState: observable,
+      showDebug: observable,
+      setShowDebug: action,
     });
     this.accessPoint = val;
     this.lambdaState = new AccessPointLambdaEditorState(this);
   }
+
+  setShowDebug(value: boolean): void {
+    this.showDebug = value;
+  }
 }
 
 export class AccessPointGroupState {