@finos/legend-application-studio 26.1.11 → 27.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "26.1.11",
+  "version": "27.1.0",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,18 +45,18 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.23",
-    "@finos/legend-art": "7.0.23",
-    "@finos/legend-graph": "30.0.8",
-    "@finos/legend-lego": "1.0.21",
-    "@finos/legend-query-builder": "4.0.12",
-    "@finos/legend-server-depot": "6.0.15",
-    "@finos/legend-server-sdlc": "5.0.16",
-    "@finos/legend-shared": "10.0.14",
-    "@finos/legend-storage": "3.0.64",
+    "@finos/legend-application": "15.0.24",
+    "@finos/legend-art": "7.0.24",
+    "@finos/legend-graph": "30.0.9",
+    "@finos/legend-lego": "1.1.1",
+    "@finos/legend-query-builder": "4.1.0",
+    "@finos/legend-server-depot": "6.0.16",
+    "@finos/legend-server-sdlc": "5.0.17",
+    "@finos/legend-shared": "10.0.15",
+    "@finos/legend-storage": "3.0.65",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
+    "@types/react": "18.2.13",
+    "@types/react-dom": "18.2.6",
     "fast-xml-parser": "4.2.4",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
@@ -70,10 +70,10 @@
     "yaml": "2.3.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.68",
+    "@finos/legend-dev-utils": "2.0.69",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
-    "eslint": "8.42.0",
+    "eslint": "8.43.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",

package/src/__lib__/LegendStudioApplicationNavigationContext.ts

@@ -23,6 +23,7 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
   EDITOR = 'studio.editor',
 
   MODEL_LOADER = 'studio.editor.model-loader',
+  MODEL_LOADER_EXTERNAL_FORMAT_IMPORTER = 'studio.editor.model-loader-external-format-importer',
   TEXT_MODE_EDITOR = 'studio.editor.text-mode-editor',
   EMBEDDED_QUERY_BUILDER = 'studio.editor.embedded-query-builder',
 
@@ -56,7 +57,17 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
   SERVICE_EDITOR_EXECUTION = 'studio.editor.service-editor.execution',
   SERVICE_EDITOR_TEST = 'studio.editor.service-editor.test',
 
+  SQL_PLAYGROUND = 'studio.editor.panel-group.sql-playground',
+
+  // DataElement/Embedded data
   DATA_ELEMENT_EDITOR = 'studio.editor.data-element-editor',
+  EMBEDDED_DATA_RELATIONAL_EDITOR = 'studio.editor.embedded-data-relational-editor',
+  EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR = 'studio.editor.embedded-data-external-format-editor',
+  EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR = 'studio.editor.embedded-data-data-element-reference-editor',
+  EMBEDDED_DATA_MODEL_STORE_EDITOR = 'studio.editor.embedded-data-model-store-editor',
 
-  SQL_PLAYGROUND = 'studio.editor.panel-group.sql-playground',
+  // external format
+  SCHEMA_SET_EDITOR = 'dsl-external-format.studio.editor.schema-set-editor',
+  SCHEMA_SET_MODEL_GENERATION = 'dsl-external-format.studio.editor.schema-set-model-generation',
+  BINDING_EDITOR = 'dsl-external-format.studio.editor.binding-editor',
 }

package/src/application/LegendStudioApplicationConfig.ts

@@ -74,6 +74,13 @@ class LegendStudioApplicationCoreOptions {
    */
   TEMPORARY__enableFunctionActivatorSupport = false;
 
+  /**
+   * This flag can be removed when the support for local connection is official
+   * Right now it's done to support the SnowflakeApp creation demo
+   * See https://github.com/finos/legend-engine/pull/1819
+   */
+  TEMPORARY__enableLocalConnectionBuilder = false;
+
   /**
    * This flag can be removed when the support for raw SQL execution is official
    * See https://github.com/finos/legend-engine/pull/1841
@@ -110,6 +117,7 @@ class LegendStudioApplicationCoreOptions {
       TEMPORARY__preserveSectionIndex: optional(primitive()),
       TEMPORARY__enableFunctionActivatorSupport: optional(primitive()),
       TEMPORARY__enableRawSQLExecutor: optional(primitive()),
+      TEMPORARY__enableLocalConnectionBuilder: optional(primitive()),
       TEMPORARY__enableMappingTestableEditor: optional(primitive()),
       TEMPORARY__serviceRegistrationConfig: list(
         object(ServiceRegistrationEnvironmentConfig),

package/src/components/ElementIconUtils.tsx

@@ -42,6 +42,7 @@ import {
   PURE_PackageIcon,
   PURE_DataIcon,
   LaunchIcon,
+  LinkIcon,
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
@@ -88,6 +89,8 @@ export const getElementTypeIcon = (
       return <PURE_ServiceIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.CONNECTION:
       return <PURE_ConnectionIcon />;
+    case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
+      return <LinkIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.RUNTIME:
       return <PURE_RuntimeIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.FILE_GENERATION:

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

@@ -100,6 +100,10 @@ const ExternalFormatModelImporterEditor = observer(
         </BlankPanelContent>
       );
     };
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER_EXTERNAL_FORMAT_IMPORTER,
+    );
     return (
       <Panel className="schema-set-panel">
         <PanelContent className="model-loader">

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

@@ -22,7 +22,6 @@ import {
   ResizablePanel,
   ResizablePanelSplitter,
   PanelLoadingIndicator,
-  clsx,
   TreeView,
   PURE_DatabaseSchemaIcon,
   PURE_DatabaseTableIcon,
@@ -139,7 +138,7 @@ const DatabaseBuilderTreeNodeContainer = observer(
 
     return (
       <div
-        className={clsx('tree-view__node__container')}
+        className="tree-view__node__container"
         style={{
           paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
           display: 'flex',
@@ -151,7 +150,7 @@ const DatabaseBuilderTreeNodeContainer = observer(
             {nodeExpandIcon}
           </div>
           <div
-            className={clsx('database-builder-tree__checker-icon')}
+            className="database-builder-tree__checker-icon"
             onClick={(event) => {
               event.stopPropagation();
               toggleCheckedNode(node);
@@ -198,6 +197,13 @@ export const DatabaseBuilderExplorer = observer(
       );
     };
 
+    const getChildNodes = (
+      node: DatabaseBuilderTreeNodeData,
+    ): DatabaseBuilderTreeNodeData[] =>
+      databaseBuilderState
+        .getChildNodes(node, treeData)
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+
     const isPartiallySelected = (
       node: DatabaseBuilderTreeNodeData,
     ): boolean => {
@@ -208,22 +214,15 @@ export const DatabaseBuilderExplorer = observer(
         return Boolean(
           databaseBuilderState
             .getChildNodes(node, treeData)
-            ?.find((s) => s.isChecked === true),
+            ?.find((childNode) => childNode.isChecked === true),
         );
       }
       return false;
     };
 
-    const getChildNodes = (
-      node: DatabaseBuilderTreeNodeData,
-    ): DatabaseBuilderTreeNodeData[] =>
-      databaseBuilderState
-        .getChildNodes(node, treeData)
-        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
-
-    const toggleCheckedNode = (node: DatabaseBuilderTreeNodeData): void => {
+    const toggleCheckedNode = (node: DatabaseBuilderTreeNodeData): void =>
       databaseBuilderState.toggleCheckedNode(node, treeData);
-    };
+
     return (
       <TreeView
         className="database-builder-tree"

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -62,6 +62,8 @@ import {
 import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 export const ExternalFormatDataEditor = observer(
   (props: {
@@ -92,6 +94,9 @@ export const ExternalFormatDataEditor = observer(
       ),
     );
     const format = (): void => externalFormatDataState.format();
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR,
+    );
     return (
       <div className="panel external-format-data-editor">
         <div className="external-format-data-editor__header">
@@ -184,6 +189,9 @@ export const DataElementReferenceDataEditor = observer(
     };
     const visitData = (): void =>
       editorStore.graphEditorMode.openElement(dataElement);
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR,
+    );
     return (
       <div className="panel data-element-reference-editor">
         <div className="data-element-reference-editor__header">
@@ -309,7 +317,9 @@ export const ModelStoreDataEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { isReadOnly, modelStoreDataState } = props;
-
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR,
+    );
     return (
       <div className="panel connection-editor">
         {modelStoreDataState.modelDataStates.map((_modelDataState) => {

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -41,6 +41,8 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
 
 const RelationalTableIdentifierModal = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
@@ -199,6 +201,10 @@ export const RelationalCSVDataEditor = observer(
     const isTableActive = (table: RelationalCSVDataTable): boolean =>
       currentTableState?.table === table;
     const showCSVModal = (): void => dataState.setShowImportCsvModal(true);
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_RELATIONAL_EDITOR,
+    );
     return (
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel minSize={30} size={300}>

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -59,6 +59,8 @@ import {
   externalFormat_modelUnit_deletePackageableElementExcludes,
   externalFormat_modelUnit_deletePackageableElementIncludes,
 } from '../../../../stores/graph-modifier/DSL_ExternalFormat_GraphModifierHelper.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 const ModelUnitPackagableElementEntryEditor = observer(
   (props: {
@@ -424,6 +426,11 @@ export const BindingEditor = observer(() => {
     (tab: BINDING_TAB_TYPE): (() => void) =>
     (): void =>
       editorState.setSelectedTab(tab);
+
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.BINDING_EDITOR,
+  );
+
   return (
     <div className="binding-editor">
       <div className="binding-editor__header">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -59,6 +59,8 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
 
 const SchemaLoader = observer(
   (props: {
@@ -415,6 +417,10 @@ export const SchemaSetEditor = observer(() => {
     );
   };
 
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_EDITOR,
+  );
+
   return (
     <div className="panel schema-set-panel">
       <div className="schema-set-panel__header">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -39,6 +39,8 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 enum HIDDEN_CONFIGURATION_PROPERTIES {
   FORMAT = 'format',
@@ -100,6 +102,10 @@ export const SchemaSetModelGenerationEditor = observer(
       modelGenerationState.importGeneratedModelsIntoGraph();
     };
 
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_MODEL_GENERATION,
+    );
+
     return (
       <PanelContent className="file-generation-editor__content">
         <ResizablePanelGroup orientation="vertical">

package/src/components/editor/editor-group/mapping-editor/NewMappingElementModal.tsx

@@ -31,6 +31,7 @@ import {
   createEnumerationMapping,
   getAllMappingElements,
   MappingEditorState,
+  BASIC_SET_IMPLEMENTATION_TYPE,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
   guaranteeNonNullable,
@@ -45,7 +46,6 @@ import {
   Association,
   PrimitiveType,
 } from '@finos/legend-graph';
-import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/editor/utils/ModelClassifierUtils.js';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -118,16 +118,12 @@ const ProjectDependencyActions = observer(
       dependencyEditorState.dependencyReport?.conflicts.length;
     const viewTree = (): void => {
       if (dependencyEditorState.dependencyReport) {
-        dependencyEditorState.setDependencyReport(
-          DEPENDENCY_REPORT_TAB.EXPLORER,
-        );
+        dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.EXPLORER);
       }
     };
     const viewConflict = (): void => {
       if (dependencyEditorState.dependencyReport) {
-        dependencyEditorState.setDependencyReport(
-          DEPENDENCY_REPORT_TAB.CONFLICTS,
-        );
+        dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.CONFLICTS);
       }
     };
     return (
@@ -604,17 +600,17 @@ const ProjectDependencyReportModal = observer(
     const changeTab =
       (tab: DEPENDENCY_REPORT_TAB): (() => void) =>
       (): void =>
-        dependencyEditorState.setDependencyReport(tab);
+        dependencyEditorState.setReportTab(tab);
     const dependencyReport = dependencyEditorState.dependencyReport;
     const closeModal = (): void =>
-      dependencyEditorState.setDependencyReport(undefined);
+      dependencyEditorState.setReportTab(undefined);
     const [flattenView, setFlattenView] = useState(false);
     const [isExpandingDependencies, setIsExpandingDependencies] =
       useState(false);
     const setTreeData = (
-      treeData: TreeData<ProjectDependencyTreeNodeData>,
+      val: TreeData<ProjectDependencyTreeNodeData>,
     ): void => {
-      dependencyEditorState.setTreeData(treeData, flattenView);
+      dependencyEditorState.setTreeData(val, flattenView);
     };
     const toggleViewAsListOrAsTree = (): void => {
       setFlattenView(!flattenView);

package/src/components/editor/editor-group/service-editor/testable/ServiceTestsEditor.tsx

@@ -158,6 +158,14 @@ export const ExternalFormatParameterEditorModal = observer(
       updateParamValue,
       bindingParamPair,
     } = props;
+    const paramValue =
+      paramState.varExpression.genericType?.value.rawType === PrimitiveType.BYTE
+        ? atob(
+            (paramState.valueSpec as PrimitiveInstanceValue)
+              .values[0] as string,
+          )
+        : ((paramState.valueSpec as PrimitiveInstanceValue)
+            .values[0] as string);
     return (
       <Dialog
         open={true}
@@ -177,10 +185,7 @@ export const ExternalFormatParameterEditorModal = observer(
               <div className="service-test-editor__setup__parameter__code-editor__container__content">
                 <CodeEditor
                   key={paramState.uuid}
-                  inputValue={
-                    (paramState.valueSpec as PrimitiveInstanceValue)
-                      .values[0] as string
-                  }
+                  inputValue={paramValue}
                   updateInput={updateParamValue}
                   isReadOnly={isReadOnly}
                   language={
@@ -225,6 +230,14 @@ const ServiceTestParameterEditor = observer(
     const type = bindingParamPair
       ? bindingParamPair.binding.contentType
       : paramState.varExpression.genericType?.value.rawType.name ?? 'unknown';
+    const paramValue =
+      paramState.varExpression.genericType?.value.rawType === PrimitiveType.BYTE
+        ? atob(
+            (paramState.valueSpec as PrimitiveInstanceValue)
+              .values[0] as string,
+          )
+        : ((paramState.valueSpec as PrimitiveInstanceValue)
+            .values[0] as string);
 
     const openInPopUp = (): void => setShowPopUp(!showPopUp);
     const closePopUp = (): void => setShowPopUp(false);
@@ -232,7 +245,10 @@ const ServiceTestParameterEditor = observer(
       if (paramState.valueSpec instanceof PrimitiveInstanceValue) {
         instanceValue_setValue(
           paramState.valueSpec,
-          val,
+          paramState.varExpression.genericType?.value.rawType ===
+            PrimitiveType.BYTE
+            ? btoa(val)
+            : val,
           0,
           setupState.editorStore.changeDetectionState.observerContext,
         );
@@ -261,10 +277,7 @@ const ServiceTestParameterEditor = observer(
               <textarea
                 className="panel__content__form__section__textarea value-spec-editor__input"
                 spellCheck={false}
-                value={
-                  (paramState.valueSpec as PrimitiveInstanceValue)
-                    .values[0] as string
-                }
+                value={paramValue}
                 placeholder={
                   ((paramState.valueSpec as PrimitiveInstanceValue)
                     .values[0] as string) === ''

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

@@ -20,7 +20,6 @@ import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
-  clsx,
   TreeView,
   PURE_DatabaseSchemaIcon,
   PURE_DatabaseTableIcon,
@@ -38,6 +37,11 @@ import {
   PanelLoadingIndicator,
   BlankPanelContent,
   TrashIcon,
+  CircleIcon,
+  CheckCircleIcon,
+  EmptyCircleIcon,
+  PURE_DatabaseIcon,
+  SyncIcon,
 } from '@finos/legend-art';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -119,11 +123,15 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
     DatabaseSchemaExplorerTreeNodeData,
     {
-      // empty
+      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
+      isPartiallySelected: (
+        node: DatabaseSchemaExplorerTreeNodeData,
+      ) => boolean;
     }
   >
 > = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect } = props;
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { toggleCheckedNode, isPartiallySelected } = innerProps;
   const isExpandable =
     Boolean(!node.childrenIds || node.childrenIds.length) &&
     !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
@@ -154,9 +162,22 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
     node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
     node.owner.primaryKey.includes(node.column);
 
+  const renderCheckedIcon = (
+    _node: DatabaseSchemaExplorerTreeNodeData,
+  ): React.ReactNode => {
+    if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
+      return null;
+    } else if (isPartiallySelected(_node)) {
+      return <CircleIcon />;
+    } else if (_node.isChecked) {
+      return <CheckCircleIcon />;
+    }
+    return <EmptyCircleIcon />;
+  };
+
   return (
     <div
-      className={clsx('tree-view__node__container')}
+      className="tree-view__node__container"
       style={{
         paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
         display: 'flex',
@@ -168,6 +189,15 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
         <div className="sql-playground__database-schema-explorer-tree__expand-icon">
           {nodeExpandIcon}
         </div>
+        <div
+          className="sql-playground__database-schema-explorer-tree__toggle-icon"
+          onClick={(event) => {
+            event.stopPropagation();
+            toggleCheckedNode(node);
+          }}
+        >
+          {renderCheckedIcon(node)}
+        </div>
         <div className="sql-playground__database-schema-explorer-tree__type-icon">
           {nodeTypeIcon}
         </div>
@@ -215,13 +245,36 @@ export const DatabaseSchemaExplorer = observer(
         .getChildNodes(node, treeData)
         ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
 
+    const isPartiallySelected = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): boolean => {
+      if (
+        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
+        !node.isChecked
+      ) {
+        return Boolean(
+          playgroundState
+            .getChildNodes(node, treeData)
+            ?.find((childNode) => childNode.isChecked === true),
+        );
+      }
+      return false;
+    };
+
+    const toggleCheckedNode = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): void => playgroundState.toggleCheckedNode(node, treeData);
+
     return (
       <TreeView
         className="sql-playground__database-schema-explorer-tree"
         components={{
           TreeNodeContainer: DatabaseSchemaExplorerTreeNodeContainer,
         }}
-        innerProps={{}}
+        innerProps={{
+          toggleCheckedNode,
+          isPartiallySelected,
+        }}
         treeData={treeData}
         onNodeSelect={onNodeSelect}
         getChildNodes={getChildNodes}
@@ -647,6 +700,10 @@ export const SQLPlaygroundPanel = observer(() => {
     [handleConnectionDrop],
   );
 
+  const updateDatabase = applicationStore.guardUnhandledError(() =>
+    flowResult(playgroundState.updateDatabase()),
+  );
+
   useEffect(() => {
     flowResult(playgroundState.fetchDatabaseMetadata()).catch(
       applicationStore.alertUnhandledError,
@@ -668,20 +725,49 @@ export const SQLPlaygroundPanel = observer(() => {
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel size={300}>
               <div className="sql-playground__config">
-                <div className="sql-playground__config__connection-selector">
-                  <div className="sql-playground__config__connection-selector__icon">
-                    <PURE_ConnectionIcon />
+                <div className="sql-playground__config__setup">
+                  <div className="sql-playground__config__connection-selector">
+                    <div className="sql-playground__config__connection-selector__icon">
+                      <PURE_ConnectionIcon />
+                    </div>
+                    <CustomSelectorInput
+                      ref={connectionSelectorRef}
+                      className="sql-playground__config__connection-selector__input"
+                      options={connectionOptions}
+                      onChange={changeConnection}
+                      value={selectedConnectionOption}
+                      darkMode={true}
+                      placeholder="Choose a connection..."
+                      filterOption={connectionFilterOption}
+                    />
+                  </div>
+                  <div className="sql-playground__config__database-selector">
+                    <div className="sql-playground__config__database-selector__icon">
+                      <PURE_DatabaseIcon />
+                    </div>
+                    <CustomSelectorInput
+                      ref={connectionSelectorRef}
+                      className="sql-playground__config__database-selector__input"
+                      options={connectionOptions}
+                      onChange={changeConnection}
+                      value={selectedConnectionOption}
+                      darkMode={true}
+                      placeholder="Choose a connection..."
+                      filterOption={connectionFilterOption}
+                    />
+                    <button
+                      className="sql-playground__config__database-selector__update-btn btn--sm btn--dark"
+                      disabled={
+                        !playgroundState.database ||
+                        playgroundState.isBuildingDatabase ||
+                        playgroundState.isUpdatingDatabase
+                      }
+                      onClick={updateDatabase}
+                      title="Update database"
+                    >
+                      <SyncIcon />
+                    </button>
                   </div>
-                  <CustomSelectorInput
-                    ref={connectionSelectorRef}
-                    className="sql-playground__config__connection-selector__input"
-                    options={connectionOptions}
-                    onChange={changeConnection}
-                    value={selectedConnectionOption}
-                    darkMode={true}
-                    placeholder="Choose a connection..."
-                    filterOption={connectionFilterOption}
-                  />
                 </div>
                 <div className="sql-playground__config__schema-explorer">
                   {playgroundState.treeData && (