@finos/legend-application-studio 27.1.1 → 27.1.3

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

@@ -0,0 +1,227 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  type TreeNodeContainerProps,
+  TreeView,
+  PURE_DatabaseSchemaIcon,
+  PURE_DatabaseTableIcon,
+  CircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CheckCircleIcon,
+  EmptyCircleIcon,
+  KeyIcon,
+} from '@finos/legend-art';
+import {
+  type DatabaseExplorerTreeData,
+  type DatabaseSchemaExplorerTreeNodeData,
+  DatabaseSchemaExplorerTreeColumnNodeData,
+  DatabaseSchemaExplorerTreeSchemaNodeData,
+  DatabaseSchemaExplorerTreeTableNodeData,
+  type DatabaseSchemaExplorerState,
+} from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import { useApplicationStore } from '@finos/legend-application';
+import { renderColumnTypeIcon } from './DatabaseEditorHelper.js';
+import { flowResult } from 'mobx';
+import { stringifyDataType } from '@finos/legend-graph';
+import { forwardRef } from 'react';
+
+const getDatabaseSchemaNodeIcon = (
+  node: DatabaseSchemaExplorerTreeNodeData,
+): React.ReactNode => {
+  if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
+    return (
+      <div className="database-schema-explorer__icon--schema">
+        <PURE_DatabaseSchemaIcon />
+      </div>
+    );
+  } else if (node instanceof DatabaseSchemaExplorerTreeTableNodeData) {
+    return (
+      <div className="database-schema-explorer__icon--table">
+        <PURE_DatabaseTableIcon />
+      </div>
+    );
+  } else if (node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
+    return renderColumnTypeIcon(node.column.type);
+  }
+  return null;
+};
+
+export type DatabaseSchemaExplorerTreeNodeContainerProps =
+  TreeNodeContainerProps<
+    DatabaseSchemaExplorerTreeNodeData,
+    {
+      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
+      isPartiallySelected: (
+        node: DatabaseSchemaExplorerTreeNodeData,
+      ) => boolean;
+    }
+  >;
+
+export const DatabaseSchemaExplorerTreeNodeContainer = observer(
+  forwardRef<HTMLDivElement, DatabaseSchemaExplorerTreeNodeContainerProps>(
+    function DatabaseSchemaExplorerTreeNodeContainer(props, ref) {
+      const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+      const { toggleCheckedNode, isPartiallySelected } = innerProps;
+      const isExpandable =
+        Boolean(!node.childrenIds || node.childrenIds.length) &&
+        !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
+      const nodeExpandIcon = isExpandable ? (
+        node.isOpen ? (
+          <ChevronDownIcon />
+        ) : (
+          <ChevronRightIcon />
+        )
+      ) : (
+        <div />
+      );
+      const nodeTypeIcon = getDatabaseSchemaNodeIcon(node);
+      const toggleExpandNode = (): void => {
+        onNodeSelect?.(node);
+        if (!isExpandable) {
+          toggleCheckedNode(node);
+        }
+      };
+      const isPrimaryKeyColumn =
+        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="tree-view__node__container"
+          ref={ref}
+          style={{
+            paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
+            display: 'flex',
+          }}
+          onClick={toggleExpandNode}
+        >
+          <div className="tree-view__node__icon database-schema-explorer__node__icon__group">
+            <div className="database-schema-explorer__expand-icon">
+              {nodeExpandIcon}
+            </div>
+            <div
+              className="database-schema-explorer__checker-icon"
+              onClick={(event) => {
+                event.stopPropagation();
+                toggleCheckedNode(node);
+              }}
+            >
+              {renderCheckedIcon(node)}
+            </div>
+            <div className="database-schema-explorer__type-icon">
+              {nodeTypeIcon}
+            </div>
+          </div>
+          <div className="tree-view__node__label database-schema-explorer__node__label">
+            {node.label}
+            {node instanceof DatabaseSchemaExplorerTreeColumnNodeData && (
+              <div className="database-schema-explorer__node__type">
+                <div className="database-schema-explorer__node__type__label">
+                  {stringifyDataType(node.column.type)}
+                </div>
+              </div>
+            )}
+            {isPrimaryKeyColumn && (
+              <div
+                className="database-schema-explorer__node__pk"
+                title="Primary Key"
+              >
+                <KeyIcon />
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    },
+  ),
+);
+
+export const DatabaseSchemaExplorer = observer(
+  (props: {
+    schemaExplorerState: DatabaseSchemaExplorerState;
+    treeData: DatabaseExplorerTreeData;
+    isReadOnly?: boolean | undefined;
+    treeNodeContainerComponent?:
+      | React.FC<DatabaseSchemaExplorerTreeNodeContainerProps>
+      | undefined;
+  }) => {
+    const { treeData, schemaExplorerState, treeNodeContainerComponent } = props;
+    const applicationStore = useApplicationStore();
+    const onNodeSelect = (node: DatabaseSchemaExplorerTreeNodeData): void => {
+      flowResult(schemaExplorerState.onNodeSelect(node, treeData)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+    const getChildNodes = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): DatabaseSchemaExplorerTreeNodeData[] =>
+      schemaExplorerState
+        .getChildNodes(node, treeData)
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+    const isPartiallySelected = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): boolean => {
+      if (
+        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
+        !node.isChecked
+      ) {
+        return Boolean(
+          schemaExplorerState
+            .getChildNodes(node, treeData)
+            ?.find((childNode) => childNode.isChecked === true),
+        );
+      }
+      return false;
+    };
+    const toggleCheckedNode = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): void => schemaExplorerState.toggleCheckedNode(node, treeData);
+
+    return (
+      <TreeView
+        className="database-schema-explorer"
+        components={{
+          TreeNodeContainer:
+            treeNodeContainerComponent ??
+            DatabaseSchemaExplorerTreeNodeContainer,
+        }}
+        innerProps={{
+          toggleCheckedNode,
+          isPartiallySelected,
+        }}
+        treeData={treeData}
+        onNodeSelect={onNodeSelect}
+        getChildNodes={getChildNodes}
+      />
+    );
+  },
+);

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

@@ -1109,7 +1109,7 @@ const RelationalConnectionStoreEditor = observer(
       }
     };
     const openDatabaseBuilder = (): void =>
-      connectionValueState.editorStore.explorerTreeState.buildDbBuilderState(
+      connectionValueState.editorStore.explorerTreeState.buildDatabase(
         connection,
         isReadOnly,
       );

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

@@ -357,7 +357,10 @@ export const MappingEditorWithTestable = observer(() => {
     (): void =>
       mappingEditorState.setSelectedTab(tab);
   return (
-    <div className="service-editor">
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.MAPPING_EDITOR}
+      className="service-editor"
+    >
       <div className="panel">
         <div className="panel__header">
           <div className="panel__header__title">
@@ -389,7 +392,7 @@ export const MappingEditorWithTestable = observer(() => {
           {selectedTab === MAPPING_EDITOR_TAB.CLASS_MAPPINGS && (
             <_MappingEditor />
           )}
-          {selectedTab === MAPPING_EDITOR_TAB.BETA_TEST_SUITES && (
+          {selectedTab === MAPPING_EDITOR_TAB.TEST_SUITES && (
             <MappingTestableEditor
               mappingTestableState={mappingEditorState.mappingTestableState}
             />

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

@@ -20,6 +20,7 @@ import {
   type MappingTestSuite,
   type Store,
   type DataElement,
+  type EmbeddedData,
   ModelStore,
   Database,
   getMappingCompatibleClasses,
@@ -28,6 +29,10 @@ import {
   MappingTest,
   PackageableElementExplicitReference,
   DataElementReference,
+  RelationalCSVData,
+  ModelStoreData,
+  ExternalFormatData,
+  ModelEmbeddedData,
 } from '@finos/legend-graph';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
@@ -208,6 +213,7 @@ const CreateTestSuiteModal = observer(
               name="Test Suite Name"
               prompt="Unique Identifier for Test suite i.e Person_suite"
               value={suiteName}
+              placeholder="Suite Name"
               update={(value: string | undefined): void =>
                 setSuiteName(value ?? '')
               }
@@ -216,6 +222,7 @@ const CreateTestSuiteModal = observer(
             <PanelFormTextField
               name="Test Name"
               prompt="Unique Identifier for first test in suite"
+              placeholder="Test Name"
               value={testName}
               update={(value: string | undefined): void =>
                 setTestName(value ?? '')
@@ -245,7 +252,11 @@ const CreateTestSuiteModal = observer(
               disabled={
                 !isValid || creatorState.isCreatingSuiteState.isInProgress
               }
-              title={'Create Test'}
+              title={
+                !isValid
+                  ? 'Suite Name and Test Name Required'
+                  : 'Create Test Suite'
+              }
               onClick={create}
               text="Create"
             />
@@ -648,30 +659,30 @@ const MappingTestSuiteQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            <div className="mapping-test-editor__action-btn">
+            <div className="btn__dropdown-combo">
               <button
-                className="mapping-test-editor__action-btn__label"
+                className="btn__dropdown-combo__label"
                 onClick={editWithQueryBuilder()}
                 title="Edit Query"
                 tabIndex={-1}
               >
-                <PencilIcon className="mapping-test-editor__action-btn__label__icon" />
-                <div className="mapping-test-editor__action-btn__label__title">
+                <PencilIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
                   Edit Query
                 </div>
               </button>
               <DropdownMenu
-                className="mapping-test-editor__action-btn__dropdown-btn"
+                className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={editWithQueryBuilder(true)}
                     >
                       Text Mode
                     </MenuContentItem>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={clearQuery}
                     >
                       Clear Query
@@ -715,14 +726,14 @@ const StoreTestDataEditor = observer(
       mappingTestState.mappingTestableState.mappingEditorState.isReadOnly;
     const dataElements =
       storeTestDataState.editorStore.graphManagerState.graph.dataElements;
-    const data = storeTestDataState.storeTestData.data;
-    const isUsingReference = data instanceof DataElementReference;
+    const currentData = storeTestDataState.storeTestData.data;
+    const isUsingReference = currentData instanceof DataElementReference;
     const open = (): void => storeTestDataState.setDataElementModal(true);
     const close = (): void => storeTestDataState.setDataElementModal(false);
     const changeToUseMyOwn = (): void => {
       if (isUsingReference) {
         const newBare = returnUndefOnError(() =>
-          data.accept_EmbeddedDataVisitor(
+          currentData.accept_EmbeddedDataVisitor(
             new EmbeddedDataCreatorFromEmbeddedData(),
           ),
         );
@@ -732,10 +743,49 @@ const StoreTestDataEditor = observer(
       }
     };
 
-    const handler = (val: DataElement): void => {
-      const value = new DataElementReference();
-      value.dataElement = PackageableElementExplicitReference.create(val);
-      storeTestDataState.changeEmbeddedData(value);
+    const sharedDataHandler = (val: DataElement): void => {
+      const dataRef = new DataElementReference();
+      dataRef.dataElement = PackageableElementExplicitReference.create(val);
+      const dataElementValue = val.data;
+      let embeddedData: EmbeddedData = dataRef;
+      if (
+        currentData instanceof ModelStoreData &&
+        dataElementValue instanceof ExternalFormatData
+      ) {
+        const modelStoreVal = currentData.modelData?.[0];
+        if (modelStoreVal instanceof ModelEmbeddedData) {
+          const newModelEmbeddedData = new ModelEmbeddedData();
+          newModelEmbeddedData.model =
+            PackageableElementExplicitReference.create(
+              modelStoreVal.model.value,
+            );
+
+          newModelEmbeddedData.data = dataRef;
+          const modelStoreData = new ModelStoreData();
+          modelStoreData.modelData = [newModelEmbeddedData];
+          embeddedData = modelStoreData;
+        }
+      }
+      storeTestDataState.changeEmbeddedData(embeddedData);
+    };
+    const filter = (val: DataElement): boolean => {
+      const dataElementData = val.data;
+      if (currentData instanceof RelationalCSVData) {
+        if (dataElementData instanceof RelationalCSVData) {
+          return true;
+        }
+        return false;
+      } else if (currentData instanceof ModelStoreData) {
+        if (
+          dataElementData instanceof ExternalFormatData ||
+          dataElementData instanceof ModelStoreData
+        ) {
+          return true;
+        }
+        return false;
+      }
+      // TODO add extensions
+      return true;
     };
     return (
       <div className="service-test-data-editor">
@@ -783,7 +833,8 @@ const StoreTestDataEditor = observer(
             isReadOnly={false}
             editorStore={storeTestDataState.editorStore}
             close={close}
-            handler={handler}
+            filterBy={filter}
+            handler={sharedDataHandler}
           />
         )}
         <EmbeddedDataEditor
@@ -1241,7 +1292,7 @@ export const MappingTestableEditor = observer(
     };
 
     useApplicationNavigationContext(
-      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_TEST_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_EDITOR_TEST,
     );
     return (
       <div className="service-test-suite-editor panel">

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

@@ -20,6 +20,7 @@ import { observer } from 'mobx-react-lite';
 import {
   ProjectConfigurationEditorState,
   CONFIGURATION_EDITOR_TAB,
+  projectTypeTabFilter,
 } from '../../../../stores/editor/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import {
   clsx,
@@ -41,13 +42,16 @@ import {
   PanelContent,
   PanelHeader,
   PanelContentLists,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
   type Platform,
+  type ProjectConfiguration,
+  type ProjectStructureVersion,
   PlatformConfiguration,
   ProjectDependency,
-  type ProjectConfiguration,
+  ProjectType,
 } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -64,6 +68,28 @@ import {
 } from '@finos/legend-lego/application';
 import type { StoreProjectData } from '@finos/legend-server-depot';
 
+const isProjectConfigurationVersionOutdated = (
+  projectConfig: ProjectConfiguration,
+  latestVersion: ProjectStructureVersion | undefined,
+  isEmbeddedMode: boolean,
+): boolean => {
+  if (!latestVersion) {
+    return false;
+  }
+  const mainVersionOutdated =
+    latestVersion.version > projectConfig.projectStructureVersion.version;
+  if (isEmbeddedMode) {
+    return mainVersionOutdated;
+  }
+  const currentProjectExtensionVersion =
+    projectConfig.projectStructureVersion.extensionVersion ?? -1;
+  const latestProjectExtensionVersion = latestVersion.extensionVersion ?? -1;
+  return (
+    mainVersionOutdated ||
+    latestProjectExtensionVersion > currentProjectExtensionVersion
+  );
+};
+
 const ProjectStructureEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
     const { projectConfig, isReadOnly } = props;
@@ -71,13 +97,12 @@ const ProjectStructureEditor = observer(
     const applicationStore = useApplicationStore();
     const latestVersion =
       editorStore.projectConfigurationEditorState.latestProjectStructureVersion;
-    const currentProjectExtensionVersion =
-      projectConfig.projectStructureVersion.extensionVersion ?? -1;
-    const latestProjectExtensionVersion = latestVersion?.extensionVersion ?? -1;
-    const isVersionOutdated =
-      latestVersion &&
-      (latestVersion.version > projectConfig.projectStructureVersion.version ||
-        latestProjectExtensionVersion > currentProjectExtensionVersion);
+    const isProjectStructureVersionOutdated =
+      isProjectConfigurationVersionOutdated(
+        projectConfig,
+        latestVersion,
+        editorStore.projectConfigurationEditorState.isInEmbeddedMode,
+      );
     const isGroupIdChanged =
       editorStore.projectConfigurationEditorState.isGroupIdChanged;
     const isArtifactIdChanged =
@@ -108,7 +133,7 @@ const ProjectStructureEditor = observer(
         <div className="project-configuration-editor__project__structure__version">
           <div className="project-configuration-editor__project__structure__version__label">
             <div className="project-configuration-editor__project__structure__version__label__status">
-              {isVersionOutdated ? (
+              {isProjectStructureVersionOutdated ? (
                 <ExclamationCircleIcon
                   className="project-configuration-editor__project__structure__version__label__status--outdated"
                   title="Project structure is outdated"
@@ -124,7 +149,7 @@ const ProjectStructureEditor = observer(
               {`PROJECT STRUCTURE VERSION ${projectConfig.projectStructureVersion.fullVersion}`}
             </div>
           </div>
-          {isVersionOutdated && (
+          {isProjectStructureVersionOutdated && latestVersion && (
             <button
               className="project-configuration-editor__project__structure__version__update-btn"
               disabled={isReadOnly}
@@ -132,7 +157,10 @@ const ProjectStructureEditor = observer(
               tabIndex={-1}
               title={`Current project structure is outdated. Click to update to the latest version (v${latestVersion.fullVersion}})`}
             >
-              Update to version {latestVersion.fullVersion}
+              Update to version{' '}
+              {editorStore.projectConfigurationEditorState.isInEmbeddedMode
+                ? latestVersion.version
+                : latestVersion.fullVersion}
             </button>
           )}
         </div>
@@ -511,20 +539,106 @@ const ProjectPlatformVersionEditor = observer(
   },
 );
 
+const ProjectAdvancedEditor = observer(
+  (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
+    const { projectConfig } = props;
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const currentProjectType = projectConfig.projectType ?? ProjectType.MANAGED;
+    const isEmbeddedMode = currentProjectType === ProjectType.EMBEDDED;
+    const managedModeBlurb =
+      'Managed Projects are managed by our SDLC server, which includes managing the build and deployment of your project.This enables rich features such as releasing and dependency management work within our ecosystem.This is the recommended mode and should not be changed unless your customized build is robust to handle these operations and you are aware of the different features our managed mode provides.';
+    const embeddedModeBlurb =
+      'Embedded Projects have their own customized build. The build is managed directly on the underlying version system (gitlab, github etc) and the owners of the projects are responsible for managing their build and incorporating the necessary steps to enable features such as releasing and dependency management. Our SDLC server still manages the file structure of where the elements entities are located and correlate with the project structure version.';
+    const managedToEmbedded =
+      'You are about to change from managed to embedded project type. This will cause your build files (pom, ci etc) to no longer be managed by our SDLC process. Your element folder structure will remain managed by us but your build will become your responsibility. Please ensure you understand the risks of changing over before continuing.';
+    const embeddedToManaged =
+      'You are about to change from embedded to managed project type. Your build will now be managed by our SDLC sever in addition to your element folder structure. Your current build files will all be deleted and replaces with our own. Please ensure you understand the risks of changing over before continuing.';
+    const changeProjectType = (): void => {
+      applicationStore.alertService.setActionAlertInfo({
+        message: `${isEmbeddedMode ? embeddedToManaged : managedToEmbedded}`,
+        prompt: 'Do you want to proceed?',
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Continue',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: () => {
+              flowResult(
+                editorStore.projectConfigurationEditorState.changeProjectType(),
+              ).catch(applicationStore.alertUnhandledError);
+            },
+          },
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    };
+
+    return (
+      <Panel>
+        <PanelForm>
+          <div className="panel__content__form__section__header__label">
+            {`Project Type: ${prettyCONSTName(currentProjectType)} `}
+          </div>
+          <div className="documentation-preview">
+            <div className="documentation-preview__text">
+              <div className="project-configuration-editor__advanced__project-type__info">
+                {managedModeBlurb}
+              </div>
+              <div className="project-configuration-editor__advanced__project-type__info">
+                {embeddedModeBlurb}
+              </div>
+            </div>
+
+            <div className="documentation-preview__hint">
+              <DocumentationLink
+                documentationKey={
+                  LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_WHAT_IS_EMBEDDED_MODE_PROJECT_TYPE
+                }
+              />
+            </div>
+          </div>
+          <div className="platform-configurations-editor__dependencies">
+            <div className="platform-configurations-editor__dependencies__header">
+              <button
+                className="btn--dark btn--conflict btn--important project-configuration-editor__advanced__caution__btn"
+                onClick={changeProjectType}
+                tabIndex={-1}
+              >
+                {`Change to ${
+                  isEmbeddedMode ? 'Managed Type' : 'Embedded Type'
+                }`}
+              </button>
+            </div>
+          </div>
+        </PanelForm>
+      </Panel>
+    );
+  },
+);
+
 export const ProjectConfigurationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const configState = editorStore.tabManagerState.getCurrentEditorState(
     ProjectConfigurationEditorState,
   );
+  const projectType =
+    configState.originalConfig.projectType ?? ProjectType.MANAGED;
   const sdlcState = editorStore.sdlcState;
   const isReadOnly = editorStore.isInViewerMode;
   const selectedTab = configState.selectedTab;
+  const dependencyEditorState = configState.projectDependencyEditorState;
   const tabs = [
     CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE,
     CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES,
     CONFIGURATION_EDITOR_TAB.PLATFORM_CONFIGURATIONS,
-  ];
+    CONFIGURATION_EDITOR_TAB.ADVANCED,
+  ].filter((tab) => projectTypeTabFilter(projectType, tab));
   const changeTab =
     (tab: CONFIGURATION_EDITOR_TAB): (() => void) =>
     (): void =>
@@ -664,6 +778,10 @@ export const ProjectConfigurationEditor = observer(() => {
   if (!configState.projectConfiguration) {
     return null;
   }
+  const isLoading =
+    configState.updatingConfigurationState.isInProgress ||
+    configState.fetchingProjectVersionsState.isInProgress ||
+    dependencyEditorState.fetchingDependencyInfoState.isInProgress;
   return (
     <div className="project-configuration-editor">
       <Panel>
@@ -717,6 +835,7 @@ export const ProjectConfigurationEditor = observer(() => {
           </PanelHeaderActions>
         </PanelHeader>
         <PanelContent className="project-configuration-editor__content">
+          <PanelLoadingIndicator isLoading={isLoading} />
           {selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE && (
             <ProjectStructureEditor
               projectConfig={currentProjectConfiguration}
@@ -732,6 +851,12 @@ export const ProjectConfigurationEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           )}
+          {selectedTab === CONFIGURATION_EDITOR_TAB.ADVANCED && (
+            <ProjectAdvancedEditor
+              projectConfig={currentProjectConfiguration}
+              isReadOnly={isReadOnly}
+            />
+          )}
         </PanelContent>
       </Panel>
     </div>

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

@@ -995,7 +995,6 @@ export const ProjectDependencyEditor = observer(() => {
 
   return (
     <PanelContentLists>
-      <PanelLoadingIndicator isLoading={isLoading} />
       {isLoading && (
         <div className="project-dependency-editor__progress-msg">
           {configState.updatingConfigurationState.isInProgress