@finos/legend-application-studio 28.9.0 → 28.10.1

package/src/__lib__/LegendStudioCommand.ts

@@ -20,6 +20,7 @@ export enum LEGEND_STUDIO_COMMAND_KEY {
   SYNC_WITH_WORKSPACE = 'editor.sync-workspace',
   CREATE_ELEMENT = 'editor.create-new-element',
   SEARCH_ELEMENT = 'editor.search-element',
+  OPEN_SHOWCASES = 'editor.show-showcases',
   TOGGLE_TEXT_MODE = 'editor.toggle-text-mode',
   GENERATE = 'editor.generate',
   COMPILE = 'editor.compile',
@@ -48,6 +49,10 @@ export const LEGEND_STUDIO_COMMAND_CONFIG: CommandConfigData = {
     title: 'Toggle model loader',
     defaultKeyboardShortcut: 'F2',
   },
+  [LEGEND_STUDIO_COMMAND_KEY.OPEN_SHOWCASES]: {
+    title: 'Open Showcases',
+    defaultKeyboardShortcut: 'F7',
+  },
   [LEGEND_STUDIO_COMMAND_KEY.TOGGLE_TEXT_MODE]: {
     title: 'Toggle text mode',
     defaultKeyboardShortcut: 'F8',

package/src/components/ShowcaseManager.tsx

@@ -32,6 +32,7 @@ import {
   TimesIcon,
   CodeIcon,
   clsx,
+  CopyIcon,
 } from '@finos/legend-art';
 import {
   SHOWCASE_MANAGER_SEARCH_CATEGORY,
@@ -545,6 +546,15 @@ const ShowcaseViewer = observer(
         ),
       );
     };
+    const handleCopy =
+      showcaseManagerState.applicationStore.guardUnhandledError(() =>
+        showcaseManagerState.applicationStore.clipboardService.copyTextToClipboard(
+          showcase.code,
+          {
+            notifySuccessMessage: 'Showcase grammar copied to clipboard',
+          },
+        ),
+      );
     return (
       <div className="showcase-manager__view">
         <div className="showcase-manager__view__header">
@@ -608,6 +618,14 @@ const ShowcaseViewer = observer(
                 </button>
               </div>
             </div>
+            <div className="showcase-manager__viewer__title__action">
+              <div
+                onClick={handleCopy}
+                className="showcase-manager__viewer__title__action-icon"
+              >
+                <CopyIcon />
+              </div>
+            </div>
           </div>
           <div className="showcase-manager__viewer__path">{prettyPath}</div>
           <div className="showcase-manager__viewer__code">

package/src/components/editor/ActivityBar.tsx

@@ -15,7 +15,11 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { ACTIVITY_MODE, PANEL_MODE } from '../../stores/editor/EditorConfig.js';
+import {
+  ACTIVITY_MODE,
+  PANEL_MODE,
+  USER_JOURNEYS,
+} from '../../stores/editor/EditorConfig.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import {
   clsx,
@@ -36,6 +40,8 @@ import {
   MenuContentDivider,
   FlaskIcon,
   RobotIcon,
+  WorkflowIcon,
+  ReadMeIcon,
 } from '@finos/legend-art';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { forwardRef, useState } from 'react';
@@ -47,8 +53,10 @@ import {
   ActivityBarItemExperimentalBadge,
   type ActivityBarItemConfig,
 } from '@finos/legend-lego/application';
-import { ShowcaseManagerState } from '../../stores/ShowcaseManagerState.js';
-import { SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY } from '../extensions/Core_LegendStudioApplicationPlugin.js';
+import {
+  ShowcaseManagerState,
+  openShowcaseManager,
+} from '../../stores/ShowcaseManagerState.js';
 
 const SettingsMenu = observer(
   forwardRef<HTMLDivElement, unknown>(function SettingsMenu(props, ref) {
@@ -103,17 +111,6 @@ export const ActivityBarMenu: React.FC = () => {
   // showcases
   const showcaseManagerState =
     ShowcaseManagerState.retrieveNullableState(applicationStore);
-  const openShowcaseManager = (): void => {
-    if (showcaseManagerState?.isEnabled) {
-      applicationStore.assistantService.setIsHidden(false);
-      applicationStore.assistantService.setIsOpen(true);
-      applicationStore.assistantService.setIsPanelMaximized(true);
-      applicationStore.assistantService.setSelectedTab(
-        SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY,
-      );
-    }
-  };
-
   return (
     <>
       <div className="activity-bar__menu">
@@ -128,7 +125,9 @@ export const ActivityBarMenu: React.FC = () => {
             <MenuContent>
               <MenuContentItem onClick={showAppInfo}>About</MenuContentItem>
               {showcaseManagerState?.isEnabled && (
-                <MenuContentItem onClick={openShowcaseManager}>
+                <MenuContentItem
+                  onClick={() => openShowcaseManager(applicationStore)}
+                >
                   See Showcases
                 </MenuContentItem>
               )}
@@ -363,6 +362,23 @@ export const ActivityBar = observer(() => {
     ] as (ActivityBarItemConfig | boolean)[]
   ).filter((activity): activity is ActivityBarItemConfig => Boolean(activity));
 
+  const userJourneys: ActivityBarItemConfig[] = (
+    [
+      !editorStore.isInConflictResolutionMode &&
+        editorStore.applicationStore.config.options
+          .TEMPORARY__enableEndtoEndWorkflow && {
+          mode: USER_JOURNEYS.END_TO_END_WORKFLOWS,
+          title: 'End to End Workflows (Beta)',
+          icon: (
+            <div>
+              <WorkflowIcon className="activity-bar__icon--service-registrar" />
+              <ActivityBarItemExperimentalBadge />
+            </div>
+          ),
+        },
+    ] as (ActivityBarItemConfig | boolean)[]
+  ).filter((activity): activity is ActivityBarItemConfig => Boolean(activity));
+
   return (
     <div className="activity-bar">
       <ActivityBarMenu />
@@ -382,9 +398,34 @@ export const ActivityBar = observer(() => {
             {activity.icon}
           </button>
         ))}
+        <MenuContentDivider />
+        {userJourneys.map((activity) => (
+          <button
+            key={activity.mode}
+            className={clsx('activity-bar__item', {
+              'activity-bar__item--active':
+                editorStore.sideBarDisplayState.isOpen &&
+                editorStore.activeActivity === activity.mode,
+            })}
+            onClick={changeActivity(activity.mode)}
+            tabIndex={-1}
+            title={activity.title}
+          >
+            {activity.icon}
+          </button>
+        ))}
       </div>
+      <button
+        className={clsx('activity-bar__item')}
+        onClick={() => openShowcaseManager(editorStore.applicationStore)}
+        tabIndex={-1}
+        title={'Open Showcases'}
+      >
+        <ReadMeIcon />
+      </button>
       <DropdownMenu
         className="activity-bar__item"
+        title="Settings"
         content={<SettingsMenu />}
         menuProps={{
           anchorOrigin: { vertical: 'bottom', horizontal: 'right' },

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

@@ -77,6 +77,8 @@ import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/e
 import { INTERNAL__UnknownFunctionActivatorEdtior } from './INTERNAL__UnknownFunctionActivatorEdtior.js';
 import { getElementIcon } from '../../ElementIconUtils.js';
 import { ArtifactGenerationViewerState } from '../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
+import { QueryConnectionWorflowEditor } from './end-to-end-flow-editor/ConnectionToQueryWorkflowEditor.js';
+import { QueryConnectionEndToEndWorkflowEditorState } from '../../../stores/editor/editor-state/end-to-end-workflow-state/QueryConnectionEndToEndWorkflowEditorState.js';
 
 export const ViewerEditorGroupSplashScreen: React.FC = () => {
   const commandListWidth = 300;
@@ -119,7 +121,6 @@ export const EditorGroupSplashScreen: React.FC = () => {
   const commandListHeight = 180;
   const [showCommandList, setShowCommandList] = useState(false);
   const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-
   useEffect(() => {
     setShowCommandList(
       (width ?? 0) > commandListWidth && (height ?? 0) > commandListHeight,
@@ -157,6 +158,14 @@ export const EditorGroupSplashScreen: React.FC = () => {
             <div className="hotkey__key">S</div>
           </div>
         </div>
+        <div className="editor-group__splash-screen__content__item">
+          <div className="editor-group__splash-screen__content__item__label">
+            Open Showcases
+          </div>
+          <div className="editor-group__splash-screen__content__item__hot-keys">
+            <div className="hotkey__key">F7</div>
+          </div>
+        </div>
         <div className="editor-group__splash-screen__content__item">
           <div className="editor-group__splash-screen__content__item__label">
             Toggle Hackermode
@@ -315,6 +324,17 @@ export const EditorGroup = observer(() => {
       return <ModelImporter />;
     } else if (currentTabState instanceof ProjectConfigurationEditorState) {
       return <ProjectConfigurationEditor />;
+    } else if (
+      currentTabState instanceof QueryConnectionEndToEndWorkflowEditorState
+    ) {
+      return (
+        <QueryConnectionWorflowEditor
+          connectionToQueryWorkflowState={
+            editorStore.globalEndToEndWorkflowState
+              .queryToConnectionWorkflowEditorState
+          }
+        />
+      );
     }
     // TODO: create an editor for unsupported tab
     return null;

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

@@ -127,6 +127,139 @@ const QueryBuilderGridResult = observer(
   },
 );
 
+export const DatabaseBuilderModalContent = observer(
+  (props: { databaseBuilderState: DatabaseBuilderWizardState }) => {
+    const { databaseBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const schemaExplorerState = databaseBuilderState.schemaExplorerState;
+    const isCreatingNewDatabase = schemaExplorerState.isCreatingNewDatabase;
+    const elementAlreadyExistsMessage =
+      isCreatingNewDatabase &&
+      databaseBuilderState.editorStore.graphManagerState.graph.allElements
+        .map((s) => s.path)
+        .includes(schemaExplorerState.targetDatabasePath)
+        ? 'Element with same path already exists'
+        : undefined;
+
+    const isExecutingAction =
+      schemaExplorerState.isGeneratingDatabase ||
+      schemaExplorerState.isUpdatingDatabase ||
+      schemaExplorerState.previewDataState.isInProgress;
+
+    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      schemaExplorerState.setTargetDatabasePath(event.target.value);
+    };
+
+    useEffect(() => {
+      flowResult(schemaExplorerState.fetchDatabaseMetadata()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, schemaExplorerState]);
+
+    useConditionedApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
+      databaseBuilderState.showModal,
+    );
+
+    return (
+      <ModalBody className="database-builder__content">
+        <PanelLoadingIndicator isLoading={isExecutingAction} />
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={450}>
+            <ResizablePanelGroup>
+              <ResizablePanel>
+                <div className="database-builder__config">
+                  <PanelHeader title="schema explorer" />
+                  <PanelContent className="database-builder__config__content">
+                    {schemaExplorerState.treeData && (
+                      <DatabaseSchemaExplorer
+                        treeData={schemaExplorerState.treeData}
+                        isReadOnly={false}
+                        schemaExplorerState={
+                          databaseBuilderState.schemaExplorerState
+                        }
+                      />
+                    )}
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine
+                  color={'var(--color-dark-grey-250)'}
+                />
+              </ResizablePanelSplitter>
+              <ResizablePanel>
+                <div className="database-builder__config">
+                  <PanelHeader title="preview" />
+                  <PanelContent className="database-builder__config__content">
+                    {databaseBuilderState.schemaExplorerState.previewer && (
+                      <QueryBuilderGridResult
+                        executionResult={
+                          databaseBuilderState.schemaExplorerState.previewer
+                        }
+                      />
+                    )}
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+          <ResizablePanelSplitter />
+          <ResizablePanel>
+            <Panel className="database-builder__model">
+              <PanelHeader title="database model" />
+              <PanelContent>
+                <div className="database-builder__modeler">
+                  <div className="panel__content__form__section database-builder__modeler__path">
+                    <div className="panel__content__form__section__header__label">
+                      Target Database Path
+                    </div>
+                    <InputWithInlineValidation
+                      className="panel__content__form__section__input"
+                      spellCheck={false}
+                      onChange={onTargetPathChange}
+                      disabled={
+                        schemaExplorerState.makeTargetDatabasePathEditable
+                          ? false
+                          : !isCreatingNewDatabase
+                      }
+                      value={
+                        schemaExplorerState.makeTargetDatabasePathEditable ||
+                        isCreatingNewDatabase
+                          ? schemaExplorerState.targetDatabasePath
+                          : schemaExplorerState.database.path
+                      }
+                      error={elementAlreadyExistsMessage}
+                      showEditableIcon={true}
+                    />
+                  </div>
+                  <div className="database-builder__modeler__preview">
+                    <div className="database-builder__modeler__preview__header">
+                      readonly
+                    </div>
+                    {databaseBuilderState.databaseGrammarCode && (
+                      <CodeEditor
+                        language={CODE_EDITOR_LANGUAGE.PURE}
+                        inputValue={databaseBuilderState.databaseGrammarCode}
+                        isReadOnly={true}
+                      />
+                    )}
+                    {!databaseBuilderState.databaseGrammarCode && (
+                      <BlankPanelContent>No database preview</BlankPanelContent>
+                    )}
+                  </div>
+                </div>
+              </PanelContent>
+            </Panel>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ModalBody>
+    );
+  },
+);
+
 export const DatabaseBuilderWizard = observer(
   (props: {
     databaseBuilderState: DatabaseBuilderWizardState;
@@ -147,11 +280,6 @@ export const DatabaseBuilderWizard = observer(
     const preview = applicationStore.guardUnhandledError(() =>
       flowResult(databaseBuilderState.previewDatabaseModel()),
     );
-    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      schemaExplorerState.setTargetDatabasePath(event.target.value);
-    };
     const updateDatabase = applicationStore.guardUnhandledError(() =>
       flowResult(databaseBuilderState.updateDatabase()),
     );
@@ -166,17 +294,6 @@ export const DatabaseBuilderWizard = observer(
       schemaExplorerState.isUpdatingDatabase ||
       schemaExplorerState.previewDataState.isInProgress;
 
-    useEffect(() => {
-      flowResult(schemaExplorerState.fetchDatabaseMetadata()).catch(
-        applicationStore.alertUnhandledError,
-      );
-    }, [applicationStore, schemaExplorerState]);
-
-    useConditionedApplicationNavigationContext(
-      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
-      databaseBuilderState.showModal,
-    );
-
     return (
       <Dialog
         open={databaseBuilderState.showModal}
@@ -201,93 +318,9 @@ export const DatabaseBuilderWizard = observer(
               </button>
             </ModalHeaderActions>
           </ModalHeader>
-          <ModalBody className="database-builder__content">
-            <PanelLoadingIndicator isLoading={isExecutingAction} />
-            <ResizablePanelGroup orientation="vertical">
-              <ResizablePanel size={450}>
-                <ResizablePanelGroup>
-                  <ResizablePanel>
-                    <div className="database-builder__config">
-                      <PanelHeader title="schema explorer" />
-                      <PanelContent className="database-builder__config__content">
-                        {schemaExplorerState.treeData && (
-                          <DatabaseSchemaExplorer
-                            treeData={schemaExplorerState.treeData}
-                            isReadOnly={false}
-                            schemaExplorerState={
-                              databaseBuilderState.schemaExplorerState
-                            }
-                          />
-                        )}
-                      </PanelContent>
-                    </div>
-                  </ResizablePanel>
-                  <ResizablePanelSplitter>
-                    <ResizablePanelSplitterLine
-                      color={'var(--color-dark-grey-250)'}
-                    />
-                  </ResizablePanelSplitter>
-                  <ResizablePanel>
-                    <div className="database-builder__config">
-                      <PanelHeader title="preview" />
-                      <PanelContent className="database-builder__config__content">
-                        {databaseBuilderState.schemaExplorerState.previewer && (
-                          <QueryBuilderGridResult
-                            executionResult={
-                              databaseBuilderState.schemaExplorerState.previewer
-                            }
-                          />
-                        )}
-                      </PanelContent>
-                    </div>
-                  </ResizablePanel>
-                </ResizablePanelGroup>
-              </ResizablePanel>
-              <ResizablePanelSplitter />
-              <ResizablePanel>
-                <Panel className="database-builder__model">
-                  <PanelHeader title="database model" />
-                  <PanelContent>
-                    <div className="database-builder__modeler">
-                      <div className="panel__content__form__section database-builder__modeler__path">
-                        <div className="panel__content__form__section__header__label">
-                          Target Database Path
-                        </div>
-                        <InputWithInlineValidation
-                          className="panel__content__form__section__input"
-                          spellCheck={false}
-                          onChange={onTargetPathChange}
-                          disabled={!isCreatingNewDatabase}
-                          value={
-                            isCreatingNewDatabase
-                              ? schemaExplorerState.targetDatabasePath
-                              : schemaExplorerState.database.path
-                          }
-                          error={elementAlreadyExistsMessage}
-                        />
-                      </div>
-                      <div className="database-builder__modeler__preview">
-                        {databaseBuilderState.databaseGrammarCode && (
-                          <CodeEditor
-                            language={CODE_EDITOR_LANGUAGE.PURE}
-                            inputValue={
-                              databaseBuilderState.databaseGrammarCode
-                            }
-                            isReadOnly={true}
-                          />
-                        )}
-                        {!databaseBuilderState.databaseGrammarCode && (
-                          <BlankPanelContent>
-                            No database preview
-                          </BlankPanelContent>
-                        )}
-                      </div>
-                    </div>
-                  </PanelContent>
-                </Panel>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </ModalBody>
+          <DatabaseBuilderModalContent
+            databaseBuilderState={databaseBuilderState}
+          />
           <ModalFooter>
             <ModalFooterButton
               className="database-builder__action--btn"

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

@@ -50,6 +50,95 @@ import {
 import { debounce, noop } from '@finos/legend-shared';
 import { isValidPath } from '@finos/legend-graph';
 
+export const DatabaseModelPackageInput = observer(
+  (props: { databaseModelBuilderState: DatabaseModelBuilderState }) => {
+    const { databaseModelBuilderState } = props;
+
+    const applicationStore = useApplicationStore();
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(
+          () => flowResult(databaseModelBuilderState.previewDatabaseModels()),
+          500,
+        ),
+      [databaseModelBuilderState],
+    );
+
+    const changeTargetPackage: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      databaseModelBuilderState.setTargetPackage(event.target.value);
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+
+    const targetPackageValidationMessage =
+      !databaseModelBuilderState.targetPackage
+        ? `Target package path can't be empty`
+        : !isValidPath(databaseModelBuilderState.targetPackage)
+        ? 'Invalid target package path'
+        : undefined;
+
+    return (
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Target Package
+        </div>
+        <div className="panel__content__form__section__header__prompt">
+          Target Package of Mapping and Models Generated
+        </div>
+        <InputWithInlineValidation
+          className="query-builder__variables__variable__name__input input-group__input"
+          spellCheck={false}
+          value={databaseModelBuilderState.targetPackage}
+          onChange={changeTargetPackage}
+          placeholder="Target package path"
+          error={targetPackageValidationMessage}
+          showEditableIcon={true}
+        />
+      </div>
+    );
+  },
+);
+
+export const DatabaseModelPreviewEditor = observer(
+  (props: {
+    databaseModelBuilderState: DatabaseModelBuilderState;
+    grammarCode: string;
+  }) => {
+    const { databaseModelBuilderState, grammarCode } = props;
+
+    const isExecutingAction =
+      databaseModelBuilderState.generatingModelState.isInProgress ||
+      databaseModelBuilderState.saveModelState.isInProgress;
+
+    return (
+      <Panel className="database-builder__model">
+        <PanelHeader title="database model" />
+        <PanelContent>
+          <PanelLoadingIndicator isLoading={isExecutingAction} />
+          <div className="database-builder__modeler">
+            <div className="database-builder__modeler__preview">
+              <div className="database-builder__modeler__preview__header">
+                readonly
+              </div>
+              {databaseModelBuilderState.generatedGrammarCode && (
+                <CodeEditor
+                  language={CODE_EDITOR_LANGUAGE.PURE}
+                  inputValue={grammarCode}
+                  isReadOnly={true}
+                />
+              )}
+              {!databaseModelBuilderState.generatedGrammarCode && (
+                <BlankPanelContent>No model preview</BlankPanelContent>
+              )}
+            </div>
+          </div>
+        </PanelContent>
+      </Panel>
+    );
+  },
+);
+
 export const DatabaseModelBuilder = observer(
   (props: {
     databaseModelBuilderState: DatabaseModelBuilderState;
@@ -66,6 +155,7 @@ export const DatabaseModelBuilder = observer(
         ),
       [databaseModelBuilderState],
     );
+
     const preview = (): void => {
       debouncedRegenerate.cancel();
       debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
@@ -78,19 +168,6 @@ export const DatabaseModelBuilder = observer(
       databaseModelBuilderState.close();
     };
 
-    const targetPackageValidationMessage =
-      !databaseModelBuilderState.targetPackage
-        ? `Target package path can't be empty`
-        : !isValidPath(databaseModelBuilderState.targetPackage)
-        ? 'Invalid target package path'
-        : undefined;
-
-    const changeTargetPackage: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      databaseModelBuilderState.setTargetPackage(event.target.value);
-      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
-    };
     const isExecutingAction =
       databaseModelBuilderState.generatingModelState.isInProgress ||
       databaseModelBuilderState.saveModelState.isInProgress;
@@ -136,51 +213,18 @@ export const DatabaseModelBuilder = observer(
                 <div className="database-builder__config">
                   <PanelHeader title="schema explorer" />
                   <PanelContent className="database-builder__config__content">
-                    <div className="panel__content__form__section">
-                      <div className="panel__content__form__section__header__label">
-                        {'Target Package'}
-                      </div>
-                      <div className="panel__content__form__section__header__prompt">
-                        {'Target Package of Mapping and Models Generated'}
-                      </div>
-                      <InputWithInlineValidation
-                        className="query-builder__variables__variable__name__input input-group__input"
-                        spellCheck={false}
-                        value={databaseModelBuilderState.targetPackage}
-                        onChange={changeTargetPackage}
-                        placeholder="Target package path"
-                        error={targetPackageValidationMessage}
-                      />
-                    </div>
+                    <DatabaseModelPackageInput
+                      databaseModelBuilderState={databaseModelBuilderState}
+                    />
                   </PanelContent>
                 </div>
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel>
-                <Panel className="database-builder__model">
-                  <PanelHeader title="database model" />
-                  <PanelContent>
-                    <PanelLoadingIndicator isLoading={isExecutingAction} />
-                    <div className="database-builder__modeler">
-                      <div className="database-builder__modeler__preview">
-                        {databaseModelBuilderState.generatedGrammarCode && (
-                          <CodeEditor
-                            language={CODE_EDITOR_LANGUAGE.PURE}
-                            inputValue={
-                              databaseModelBuilderState.generatedGrammarCode
-                            }
-                            isReadOnly={true}
-                          />
-                        )}
-                        {!databaseModelBuilderState.generatedGrammarCode && (
-                          <BlankPanelContent>
-                            No model preview
-                          </BlankPanelContent>
-                        )}
-                      </div>
-                    </div>
-                  </PanelContent>
-                </Panel>
+                <DatabaseModelPreviewEditor
+                  databaseModelBuilderState={databaseModelBuilderState}
+                  grammarCode={databaseModelBuilderState.generatedGrammarCode}
+                />
               </ResizablePanel>
             </ResizablePanelGroup>
           </ModalBody>