@finos/legend-application-studio 28.7.1 → 28.9.0

package/src/components/editor/editor-group/connection-editor/DatabaseSchemaExplorer.tsx

@@ -26,6 +26,7 @@ import {
   CheckCircleIcon,
   EmptyCircleIcon,
   KeyIcon,
+  EyeIcon,
 } from '@finos/legend-art';
 import {
   type DatabaseExplorerTreeData,
@@ -70,6 +71,10 @@ export type DatabaseSchemaExplorerTreeNodeContainerProps =
       isPartiallySelected: (
         node: DatabaseSchemaExplorerTreeNodeData,
       ) => boolean;
+      previewData: (node: DatabaseSchemaExplorerTreeNodeData) => void;
+      isPreviewDataDisabled: (
+        node: DatabaseSchemaExplorerTreeNodeData,
+      ) => boolean;
     }
   >;
 
@@ -77,7 +82,12 @@ export const DatabaseSchemaExplorerTreeNodeContainer = observer(
   forwardRef<HTMLDivElement, DatabaseSchemaExplorerTreeNodeContainerProps>(
     function DatabaseSchemaExplorerTreeNodeContainer(props, ref) {
       const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-      const { toggleCheckedNode, isPartiallySelected } = innerProps;
+      const {
+        toggleCheckedNode,
+        isPartiallySelected,
+        isPreviewDataDisabled,
+        previewData,
+      } = innerProps;
       const isExpandable =
         Boolean(!node.childrenIds || node.childrenIds.length) &&
         !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
@@ -158,6 +168,19 @@ export const DatabaseSchemaExplorerTreeNodeContainer = observer(
                 <KeyIcon />
               </div>
             )}
+            {!isPreviewDataDisabled(node) && (
+              <button
+                className="query-builder-explorer-tree__node__action"
+                tabIndex={-1}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  previewData(node);
+                }}
+                title="Preview Table Data"
+              >
+                <EyeIcon />
+              </button>
+            )}
           </div>
         </div>
       );
@@ -206,6 +229,20 @@ export const DatabaseSchemaExplorer = observer(
       node: DatabaseSchemaExplorerTreeNodeData,
     ): void => schemaExplorerState.toggleCheckedNode(node, treeData);
 
+    const previewData = (node: DatabaseSchemaExplorerTreeNodeData): void => {
+      flowResult(schemaExplorerState.previewData(node)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    const isPreviewDataDisabled = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): boolean =>
+      !(
+        node instanceof DatabaseSchemaExplorerTreeTableNodeData ||
+        node instanceof DatabaseSchemaExplorerTreeColumnNodeData
+      );
+
     return (
       <TreeView
         className="database-schema-explorer"
@@ -217,6 +254,8 @@ export const DatabaseSchemaExplorer = observer(
         innerProps={{
           toggleCheckedNode,
           isPartiallySelected,
+          previewData,
+          isPreviewDataDisabled,
         }}
         treeData={treeData}
         onNodeSelect={onNodeSelect}

package/src/components/editor/editor-group/database/IsolatedQueryDatabase.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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 PackageableConnection,
+  getMappingCompatibleClasses,
+} from '@finos/legend-graph';
+import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
+import type { IsolatedDatabaseBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/database/QueryDatabaseState.js';
+import { observer } from 'mobx-react-lite';
+import {
+  CustomSelectorInput,
+  PURE_ConnectionIcon,
+  PURE_DatabaseIcon,
+} from '@finos/legend-art';
+import { returnUndefOnError } from '@finos/legend-shared';
+
+const IsolatedDatabseQueryBuilderSetupPanelContext = observer(
+  (props: { queryBuilderState: IsolatedDatabaseBuilderState }) => {
+    const { queryBuilderState } = props;
+    const globalGraphManagerState = queryBuilderState.globalGraphManagerState;
+    const getConnectionValue = (
+      val: string,
+    ): PackageableConnection | undefined =>
+      returnUndefOnError(() =>
+        globalGraphManagerState.graph.getConnection(val),
+      );
+    const database = queryBuilderState.database;
+    const compConnections = queryBuilderState.compatibleConnections;
+    const compConnectionsOptions = Array.from(compConnections.keys()).map(
+      (e) => ({ value: e, label: getConnectionValue(e)?.name ?? e }),
+    );
+    const changeConnection = (
+      val: { value: string; label: string } | null,
+    ): void => {
+      if (val) {
+        queryBuilderState.changeConnection(val.value);
+      }
+    };
+    const connection = compConnections.get(queryBuilderState.connectionKey);
+    const selectedConnection = connection
+      ? {
+          label: queryBuilderState.connectionKey,
+          value:
+            getConnectionValue(queryBuilderState.connectionKey)?.name ??
+            queryBuilderState.connectionKey,
+        }
+      : undefined;
+    const databaseOption = {
+      value: database,
+      label: database.path,
+    };
+    const classes = queryBuilderState.executionContextState.mapping
+      ? getMappingCompatibleClasses(
+          queryBuilderState.executionContextState.mapping,
+          queryBuilderState.graphManagerState.usableClasses,
+        )
+      : [];
+    return (
+      <>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          noMatchMessage="No classes selected from"
+        />
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              database/connection
+            </div>
+          </div>
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="mapping"
+              >
+                <PURE_DatabaseIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                noMatchMessage="No compatible mapping found for specified class"
+                disabled={true}
+                options={[]}
+                value={databaseOption}
+                darkMode={
+                  !queryBuilderState.applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+              />
+            </div>
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="connection"
+              >
+                <PURE_ConnectionIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                noMatchMessage="No compatible mapping found for specified class"
+                disabled={compConnectionsOptions.length < 2}
+                options={compConnectionsOptions}
+                onChange={changeConnection}
+                value={selectedConnection}
+                darkMode={
+                  !queryBuilderState.applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+export const renderDatabaseQueryBuilderSetupPanelContent = (
+  queryBuilderState: IsolatedDatabaseBuilderState,
+): React.ReactNode => (
+  <IsolatedDatabseQueryBuilderSetupPanelContext
+    queryBuilderState={queryBuilderState}
+  />
+);

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

@@ -95,14 +95,9 @@ export const PanelGroup = observer(() => {
     },
   };
 
-  const tabsToShow = Object.values(PANEL_MODE)
-    .filter((tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible)
-    .filter(
-      (tab) =>
-        tab !== PANEL_MODE.SQL_PLAYGROUND ||
-        editorStore.applicationStore.config.options
-          .TEMPORARY__enableRawSQLExecutor,
-    );
+  const tabsToShow = Object.values(PANEL_MODE).filter(
+    (tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible,
+  );
   const isTabVisible = (tabType: PANEL_MODE): boolean =>
     editorStore.activePanelMode === tabType && tabsToShow.includes(tabType);
 

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

@@ -147,6 +147,7 @@ import { DatabaseBuilderWizard } from '../editor-group/connection-editor/Databas
 import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 import { DatabaseModelBuilder } from '../editor-group/connection-editor/DatabaseModelBuilder.js';
 import { queryService } from '../editor-group/service-editor/ServiceExecutionQueryEditor.js';
+import { QueryDatabaseState } from '../../../stores/editor/editor-state/element-editor-state/database/QueryDatabaseState.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -529,6 +530,19 @@ const ExplorerContextMenu = observer(
         }
       },
     );
+    const buildDatabaseQuery = editorStore.applicationStore.guardUnhandledError(
+      async () => {
+        if (node?.packageableElement instanceof Database) {
+          const state = new QueryDatabaseState(
+            node.packageableElement,
+            editorStore,
+          );
+          flowResult(state.init()).catch(
+            editorStore.applicationStore.alertUnhandledError,
+          );
+        }
+      },
+    );
     const generateSampleData = editorStore.applicationStore.guardUnhandledError(
       async () => {
         if (node?.packageableElement instanceof Class) {
@@ -884,12 +898,10 @@ const ExplorerContextMenu = observer(
         )}
         {isRelationalDatabaseConnection(node.packageableElement) && (
           <>
-            {editorStore.applicationStore.config.options
-              .TEMPORARY__enableRawSQLExecutor && (
-              <MenuContentItem onClick={openSQLPlayground}>
-                Execute SQL...
-              </MenuContentItem>
-            )}
+            <MenuContentItem onClick={openSQLPlayground}>
+              Execute SQL...
+            </MenuContentItem>
+
             <MenuContentItem onClick={buildDatabase}>
               Build Database...
             </MenuContentItem>
@@ -901,6 +913,9 @@ const ExplorerContextMenu = observer(
             <MenuContentItem onClick={generateModelsFromDatabaseSpecification}>
               Build Models
             </MenuContentItem>
+            <MenuContentItem onClick={buildDatabaseQuery}>
+              Query (Beta)...
+            </MenuContentItem>
             <MenuContentDivider />
           </>
         )}
@@ -1361,7 +1376,7 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
 
   return (
     <div className="panel__header__actions">
-      {!editorStore.isInViewerMode && (
+      {
         <button
           className="panel__header__action"
           disabled={disabled}
@@ -1370,15 +1385,17 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
         >
           <FileImportIcon />
         </button>
+      }
+      {editorStore.editorMode.supportSdlcOperations && (
+        <button
+          className="panel__header__action panel__header__action--config"
+          disabled={disabled}
+          title="Project Configuration Panel"
+          onClick={openConfigurationEditor}
+        >
+          <SettingsEthernetIcon />
+        </button>
       )}
-      <button
-        className="panel__header__action panel__header__action--config"
-        disabled={disabled}
-        title="Project Configuration Panel"
-        onClick={openConfigurationEditor}
-      >
-        <SettingsEthernetIcon />
-      </button>
       {!editorStore.isInViewerMode && (
         <DropdownMenu
           className="panel__header__action"
@@ -1462,10 +1479,16 @@ export const Explorer = observer(() => {
             EXPLORER
           </div>
         </div>
-        {editorStore.isInViewerMode && (
+        {editorStore.editorMode.disableEditing &&
+          !editorStore.editorMode.label && (
+            <div className="panel__header__title side-bar__header__title__viewer-mode-badge">
+              <LockIcon />
+              READ-ONLY
+            </div>
+          )}
+        {editorStore.editorMode.label && (
           <div className="panel__header__title side-bar__header__title__viewer-mode-badge">
-            <LockIcon />
-            READ-ONLY
+            {editorStore.editorMode.label}
           </div>
         )}
       </div>

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

@@ -999,25 +999,6 @@ const OverviewViewer = observer(() => {
               onChange={changeProjectIdentifier}
             />
           </div>
-          {
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Project User Role
-                <DocumentationLink
-                  documentationKey={
-                    LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_WHAT_ARE_PROJECT_ROLES
-                  }
-                />
-              </div>
-              <input
-                className="panel__content__form__section__input"
-                title="Project User Role"
-                disabled={true}
-                spellCheck={false}
-                value={sdlcState.accessRole?.accessRole ?? '(unknown)'}
-              />
-            </div>
-          }
         </div>
         <div className="panel__content__form">
           <div className="panel__content__form__section">

package/src/components/project-view/ProjectViewer.tsx

@@ -37,6 +37,11 @@ import {
   FileTrayIcon,
   AssistantIcon,
   useResizeDetector,
+  FireIcon,
+  TrashIcon,
+  HammerIcon,
+  TerminalIcon,
+  ResizablePanelSplitterLine,
 } from '@finos/legend-art';
 import { isNonNullable } from '@finos/legend-shared';
 import {
@@ -65,6 +70,7 @@ import {
 import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
 import type { ActivityBarItemConfig } from '@finos/legend-lego/application';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
+import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
 
 const ProjectViewerStatusBar = observer(() => {
   const params = useParams<ProjectViewerPathParams>();
@@ -90,11 +96,26 @@ const ProjectViewerStatusBar = observer(() => {
       ? 'current'
       : ''
   }`;
+
+  const editable =
+    editorStore.graphManagerState.graphBuildState.hasCompleted &&
+    editorStore.isInitialized;
   const handleTextModeClick = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.toggleTextMode()),
   );
+  const compile = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphEditorMode.globalCompile()),
+  );
+  const generate = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphState.graphGenerationState.globalGenerate()),
+  );
+  const emptyGenerationEntities = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphState.graphGenerationState.clearGenerations()),
+  );
+
   const toggleAssistant = (): void =>
     applicationStore.assistantService.toggleAssistant();
+  const togglePanel = (): void => editorStore.panelGroupDisplayState.toggle();
 
   return (
     <div
@@ -136,6 +157,76 @@ const ProjectViewerStatusBar = observer(() => {
         )}
       </div>
       <div className="editor__status-bar__right">
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__generate-btn',
+            {
+              'editor__status-bar__generate-btn--wiggling':
+                editorStore.graphState.graphGenerationState
+                  .isRunningGlobalGenerate,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning
+          }
+          onClick={generate}
+          tabIndex={-1}
+          title="Generate (F10)"
+        >
+          <FireIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__clear__generation-btn ',
+
+            {
+              'editor__status-bar__action editor__status-bar__clear__generation-btn--wiggling':
+                editorStore.graphState.graphGenerationState
+                  .clearingGenerationEntitiesState.isInProgress,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning ||
+            !editable
+          }
+          onClick={emptyGenerationEntities}
+          tabIndex={-1}
+          title="Clear generation entities"
+        >
+          <TrashIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__compile-btn',
+            {
+              'editor__status-bar__compile-btn--wiggling':
+                editorStore.graphState.isRunningGlobalCompile,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning ||
+            !editable
+          }
+          onClick={compile}
+          tabIndex={-1}
+          title="Compile (F9)"
+        >
+          <HammerIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__action__toggler',
+            {
+              'editor__status-bar__action__toggler--active':
+                editorStore.panelGroupDisplayState.isOpen,
+            },
+          )}
+          onClick={togglePanel}
+          tabIndex={-1}
+          title="Toggle panel (Ctrl + `)"
+        >
+          <TerminalIcon />
+        </button>
         <button
           className={clsx(
             'editor__status-bar__action editor__status-bar__action__toggler',
@@ -288,6 +379,21 @@ export const ProjectViewer = withEditorStore(
           size: editorStore.sideBarDisplayState.size,
         },
       );
+      const resizePanel = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.panelGroupDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .height,
+        );
+      const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.isMaximized,
+      );
+      const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.size === 0,
+        {
+          onStopResize: resizePanel,
+          size: editorStore.panelGroupDisplayState.size,
+        },
+      );
       const { ref, width, height } = useResizeDetector<HTMLDivElement>();
       useEffect(() => {
         if (ref.current) {
@@ -330,10 +436,39 @@ export const ProjectViewer = withEditorStore(
                       {...sideBarCollapsiblePanelGroupProps.remainingPanel}
                       minSize={300}
                     >
-                      {editorStore.graphEditorMode.mode ===
-                        GRAPH_EDITOR_MODE.FORM && <EditorGroup />}
-                      {editorStore.graphEditorMode.mode ===
-                        GRAPH_EDITOR_MODE.GRAMMAR_TEXT && <GrammarTextEditor />}
+                      <ResizablePanelGroup orientation="horizontal">
+                        <ResizablePanel
+                          {...maximizedCollapsiblePanelGroupProps.collapsiblePanel}
+                          {...(editorStore.panelGroupDisplayState.size === 0
+                            ? collapsiblePanelGroupProps.remainingPanel
+                            : {})}
+                        >
+                          {editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.FORM && <EditorGroup />}
+                          {editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (
+                            <GrammarTextEditor />
+                          )}
+                        </ResizablePanel>
+                        <ResizablePanelSplitter>
+                          <ResizablePanelSplitterLine
+                            color={
+                              editorStore.panelGroupDisplayState.isMaximized
+                                ? 'transparent'
+                                : 'var(--color-dark-grey-250)'
+                            }
+                          />
+                        </ResizablePanelSplitter>
+                        <ResizablePanel
+                          {...collapsiblePanelGroupProps.collapsiblePanel}
+                          {...(editorStore.panelGroupDisplayState.isMaximized
+                            ? maximizedCollapsiblePanelGroupProps.remainingPanel
+                            : {})}
+                          direction={-1}
+                        >
+                          <PanelGroup />
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
                     </ResizablePanel>
                   </ResizablePanelGroup>
                 </div>