@finos/legend-application-studio 23.1.6 → 23.1.8

package/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx

@@ -28,7 +28,7 @@ import { type EntityDiff, EntityChangeType } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   useApplicationStore,
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-application';
 import { sortObjectKeys } from '@finos/legend-shared';
 
@@ -153,7 +153,7 @@ export const EntityDiffView = observer(
         <div className="entity-diff-view__content">
           {diffEditorState.diffMode === DIFF_VIEW_MODE.GRAMMAR && (
             <TextDiffView
-              language={EDITOR_LANGUAGE.PURE}
+              language={CODE_EDITOR_LANGUAGE.PURE}
               from={fromGrammarText}
               to={toGrammarText}
             />

package/src/components/editor/edit-panel/element-generation-editor/ElementNativeView.tsx

@@ -21,9 +21,9 @@ import { ELEMENT_NATIVE_VIEW_MODE } from '../../../../stores/editor/EditorConfig
 import { flowResult } from 'mobx';
 import {
   useApplicationStore,
-  EDITOR_LANGUAGE,
-  TextInputEditor,
+  CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-application';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const ElementNativeView = observer(
   (props: { currentElementState: ElementEditorState }) => {
@@ -32,8 +32,8 @@ export const ElementNativeView = observer(
     const generatedText = currentElementState.textContent;
     const editorLanguage =
       currentElementState.editMode === ELEMENT_NATIVE_VIEW_MODE.GRAMMAR
-        ? EDITOR_LANGUAGE.PURE
-        : EDITOR_LANGUAGE.JSON;
+        ? CODE_EDITOR_LANGUAGE.PURE
+        : CODE_EDITOR_LANGUAGE.JSON;
 
     useEffect(() => {
       switch (currentElementState.editMode) {
@@ -51,7 +51,7 @@ export const ElementNativeView = observer(
     }, [applicationStore, currentElementState, currentElementState.editMode]);
 
     return (
-      <TextInputEditor
+      <CodeEditor
         inputValue={generatedText}
         language={editorLanguage}
         isReadOnly={true}

package/src/components/editor/edit-panel/element-generation-editor/FileSystemViewer.tsx

@@ -49,11 +49,9 @@ import {
   FileSystem_File,
   getFileSystemChildNodes,
 } from '../../../../stores/editor/shared/FileSystemTreeUtils.js';
-import {
-  TextInputEditor,
-  useApplicationStore,
-} from '@finos/legend-application';
+import { useApplicationStore } from '@finos/legend-application';
 import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const FileSystemTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
@@ -278,7 +276,7 @@ export const FileSystemViewer = observer(
             </div>
             <PanelContent>
               {fileNode instanceof FileSystem_File && (
-                <TextInputEditor
+                <CodeEditor
                   inputValue={getTextContent(fileNode.content, fileNode.format)}
                   isReadOnly={true}
                   language={getEditorLanguageForFormat(fileNode.format)}

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -44,7 +44,7 @@ import {
   type InnerSchemaSetEditorState,
   SCHEMA_SET_TAB_TYPE,
 } from '../../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/FileGenerationViewerState.js';
 import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -56,6 +56,7 @@ import {
   externalFormat_schema_setLocation,
 } from '../../../../stores/editor/shared/modifier/DSL_ExternalFormat_GraphModifierHelper.js';
 import { SchemaSetModelGenerationEditor } from './DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const SchemaLoader = observer(
   (props: {
@@ -147,7 +148,7 @@ const SchemaLoader = observer(
 const SchemaBasicEditor = observer(
   (props: {
     schema: Schema;
-    language: EDITOR_LANGUAGE;
+    language: CODE_EDITOR_LANGUAGE;
     isReadOnly: boolean;
   }) => {
     const { schema, isReadOnly, language } = props;
@@ -176,7 +177,7 @@ const SchemaBasicEditor = observer(
         />
         <div className={clsx('schema-editor__content')}>
           <div className="schema-editor__content__input">
-            <TextInputEditor
+            <CodeEditor
               inputValue={schema.content}
               language={language}
               updateInput={(val: string): void => {
@@ -207,7 +208,7 @@ export const SchemaSetGeneralEditor = observer(
     // TEMPROARY engine api should return `fileformat`.
     const language = description
       ? getEditorLanguageForFormat(description.name)
-      : EDITOR_LANGUAGE.TEXT;
+      : CODE_EDITOR_LANGUAGE.TEXT;
     const changeState =
       (schema: Schema): (() => void) =>
       (): void => {

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -31,7 +31,8 @@ import {
   ResizablePanelSplitterLine,
 } from '@finos/legend-art';
 import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 enum HIDDEN_CONFIGURATION_PROPERTIES {
   FORMAT = 'format',
@@ -212,10 +213,10 @@ export const SchemaSetModelGenerationEditor = observer(
                       .isInProgress
                   }
                 />
-                <TextInputEditor
+                <CodeEditor
                   inputValue={modelGenerationState.generationValue}
                   isReadOnly={true}
-                  language={EDITOR_LANGUAGE.PURE}
+                  language={CODE_EDITOR_LANGUAGE.PURE}
                 />
               </PanelContent>
             </div>

package/src/components/editor/edit-panel/mapping-editor/MappingEditor.tsx

@@ -50,7 +50,7 @@ import {
 import { MappingElementState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { MappingExplorer } from './MappingExplorer.js';
 import { MappingTestEditor } from './MappingTestEditor.js';
-import { MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
+import { DEPRECATED__MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
 import { MappingTestsExplorer } from './MappingTestsExplorer.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { MappingExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionState.js';
@@ -151,7 +151,7 @@ export const MappingEditor = observer(() => {
   const isReadOnly = mappingEditorState.isReadOnly;
   const currentTabState = mappingEditorState.currentTabState;
   const renderActiveMappingElementTab = (): React.ReactNode => {
-    if (currentTabState instanceof MappingTestState) {
+    if (currentTabState instanceof DEPRECATED__MappingTestState) {
       return (
         <MappingTestEditor
           key={currentTabState.uuid}
@@ -256,7 +256,7 @@ export const MappingEditor = observer(() => {
                         />
                       }
                     >
-                      {tabState instanceof MappingTestState && (
+                      {tabState instanceof DEPRECATED__MappingTestState && (
                         <>
                           <FlaskIcon className="mapping-editor__header__tab__icon--test" />
                           <button

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -65,12 +65,10 @@ import {
   MappingExecutionRelationalInputDataState,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionState.js';
 import {
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
   ActionAlertActionType,
   ActionAlertType,
   useApplicationStore,
-  ExecutionPlanViewer,
-  TextInputEditor,
 } from '@finos/legend-application';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -89,7 +87,11 @@ import {
   relationalInputData_setInputType,
 } from '../../../../stores/editor/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
-import type { QueryBuilderState } from '@finos/legend-query-builder';
+import {
+  ExecutionPlanViewer,
+  type QueryBuilderState,
+} from '@finos/legend-query-builder';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 interface ClassMappingSelectOption {
   label: string;
@@ -167,12 +169,12 @@ export const ClassMappingSelectorModal = observer(
 
 export const getRelationalInputTestDataEditorLanguage = (
   type: RelationalInputType,
-): EDITOR_LANGUAGE => {
+): CODE_EDITOR_LANGUAGE => {
   switch (type) {
     case RelationalInputType.SQL:
-      return EDITOR_LANGUAGE.SQL;
+      return CODE_EDITOR_LANGUAGE.SQL;
     default:
-      return EDITOR_LANGUAGE.TEXT;
+      return CODE_EDITOR_LANGUAGE.TEXT;
   }
 };
 
@@ -385,10 +387,10 @@ const MappingExecutionQueryEditor = observer(
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <div className="mapping-execution-builder__query-panel__query">
-              <TextInputEditor
+              <CodeEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
-                language={EDITOR_LANGUAGE.PURE}
+                language={CODE_EDITOR_LANGUAGE.PURE}
                 showMiniMap={false}
               />
             </div>
@@ -434,8 +436,8 @@ export const MappingExecutionObjectInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.JSON}
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.JSON}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
         />
@@ -454,8 +456,8 @@ export const MappingExecutionFlatDataInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.TEXT}
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.TEXT}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
         />
@@ -477,7 +479,7 @@ export const MappingExecutionRelationalInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <TextInputEditor
+        <CodeEditor
           language={getRelationalInputTestDataEditorLanguage(
             inputDataState.inputData.inputType,
           )}
@@ -853,10 +855,10 @@ export const MappingExecutionBuilder = observer(
                   </div>
                 </div>
                 <div className="panel__content mapping-execution-builder__result-panel__content">
-                  <TextInputEditor
+                  <CodeEditor
                     inputValue={executionResultText ?? ''}
                     isReadOnly={true}
-                    language={EDITOR_LANGUAGE.JSON}
+                    language={CODE_EDITOR_LANGUAGE.JSON}
                   />
                 </div>
               </div>

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -17,7 +17,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
-  type MappingTestState,
+  type DEPRECATED__MappingTestState as DEPRECATED__MappingTestState,
   MAPPING_TEST_EDITOR_TAB_TYPE,
   TEST_RESULT,
   MappingTestObjectInputDataState,
@@ -59,12 +59,10 @@ import {
   assertErrorThrown,
 } from '@finos/legend-shared';
 import {
-  EDITOR_LANGUAGE,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
   ActionAlertActionType,
   ActionAlertType,
-  ExecutionPlanViewer,
-  TextInputEditor,
 } from '@finos/legend-application';
 import {
   ClassMappingSelectorModal,
@@ -94,11 +92,13 @@ import {
 import {
   type QueryBuilderState,
   QueryBuilderTextEditorMode,
+  ExecutionPlanViewer,
 } from '@finos/legend-query-builder';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const MappingTestQueryEditor = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { testState, isReadOnly } = props;
     const queryState = testState.queryState;
     const editorStore = useEditorStore();
@@ -309,10 +309,10 @@ const MappingTestQueryEditor = observer(
                 editWithQueryBuilder()();
               }}
             >
-              <TextInputEditor
+              <CodeEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
-                language={EDITOR_LANGUAGE.PURE}
+                language={CODE_EDITOR_LANGUAGE.PURE}
                 showMiniMap={false}
               />
             </div>
@@ -361,8 +361,8 @@ export const MappingTestObjectInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.JSON}
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.JSON}
           inputValue={inputDataState.data}
           isReadOnly={isReadOnly}
           updateInput={updateInput}
@@ -385,8 +385,8 @@ export const MappingTestFlatDataInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.TEXT}
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.TEXT}
           inputValue={inputDataState.inputData.data}
           isReadOnly={isReadOnly}
           updateInput={updateInput}
@@ -412,7 +412,7 @@ export const MappingTestRelationalInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <TextInputEditor
+        <CodeEditor
           language={getRelationalInputTestDataEditorLanguage(
             inputDataState.inputData.inputType,
           )}
@@ -468,7 +468,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
 );
 
 export const MappingTestInputDataBuilder = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { testState, isReadOnly } = props;
     const inputDataState = testState.inputDataState;
     const editorStore = useEditorStore();
@@ -573,7 +573,7 @@ export const MappingTestInputDataBuilder = observer(
 
 export const MappingTestExpectedOutputAssertionBuilder = observer(
   (props: {
-    testState: MappingTestState;
+    testState: DEPRECATED__MappingTestState;
     assertionState: MappingTestExpectedOutputAssertionState;
     isReadOnly: boolean;
   }) => {
@@ -638,11 +638,11 @@ export const MappingTestExpectedOutputAssertionBuilder = observer(
               <ErrorIcon />
             </div>
           )}
-          <TextInputEditor
+          <CodeEditor
             inputValue={assertionState.expectedResult}
             updateInput={updateExpectedResult}
             isReadOnly={isReadOnly}
-            language={EDITOR_LANGUAGE.JSON}
+            language={CODE_EDITOR_LANGUAGE.JSON}
           />
         </div>
       </div>
@@ -651,7 +651,7 @@ export const MappingTestExpectedOutputAssertionBuilder = observer(
 );
 
 export const MappingTestAssertionBuilder = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { testState, isReadOnly } = props;
     const assertionState = testState.assertionState;
 
@@ -669,7 +669,7 @@ export const MappingTestAssertionBuilder = observer(
 );
 
 export const MappingTestBuilder = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { testState, isReadOnly } = props;
     const applicationStore = useApplicationStore();
 
@@ -720,7 +720,7 @@ export const MappingTestBuilder = observer(
 );
 
 export const MappingTestEditor = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { testState, isReadOnly } = props;
     const applicationStore = useApplicationStore();
     const selectedTab = testState.selectedTab;

package/src/components/editor/edit-panel/mapping-editor/MappingTestsExplorer.tsx

@@ -18,7 +18,7 @@ import { useState, useCallback, forwardRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useDrop } from 'react-dnd';
 import {
-  type MappingTestState,
+  type DEPRECATED__MappingTestState,
   MAPPING_TEST_EDITOR_TAB_TYPE,
   TEST_RESULT,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
@@ -61,7 +61,7 @@ export const MappingTestExplorerContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      mappingTestState?: MappingTestState;
+      mappingTestState?: DEPRECATED__MappingTestState;
       showCreateNewTestModal?: () => void;
       isReadOnly: boolean;
     }
@@ -132,7 +132,7 @@ export const MappingTestExplorerContextMenu = observer(
 );
 
 export const MappingTestStatusIndicator: React.FC<{
-  testState: MappingTestState;
+  testState: DEPRECATED__MappingTestState;
 }> = (props) => {
   const { testState } = props;
   if (testState.isSkipped) {
@@ -194,7 +194,7 @@ export const MappingTestStatusIndicator: React.FC<{
 };
 
 export const MappingTestExplorer = observer(
-  (props: { testState: MappingTestState; isReadOnly: boolean }) => {
+  (props: { testState: DEPRECATED__MappingTestState; isReadOnly: boolean }) => {
     const { isReadOnly, testState } = props;
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -45,15 +45,16 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   ActionAlertActionType,
   ActionAlertType,
-  DocumentationLink,
-  DocumentationPreview,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
   shouldDisplayVirtualAssistantDocumentationEntry,
   useApplicationStore,
 } from '@finos/legend-application';
 import { ProjectDependencyEditor } from './ProjectDependencyEditor.js';
 import type { ProjectData } from '@finos/legend-server-depot';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../application/LegendStudioDocumentation.js';
+import {
+  DocumentationLink,
+  DocumentationPreview,
+} from '@finos/legend-application/components';
 
 const ProjectStructureEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
@@ -309,7 +310,7 @@ const ProjectPlatformVersionEditor = observer(
               artifacts; in this case, you can freeze the platform dependencies'
               versions"
             documentationKey={
-              LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_WHEN_TO_CONFIGURE_PLATFORM_VERSIONS
+              LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_WHEN_TO_CONFIGURE_PLATFORM_VERSIONS
             }
           />
           <div className="platform-configurations-editor__dependencies">

package/src/components/editor/edit-panel/service-editor/ServiceEditor.tsx

@@ -48,7 +48,6 @@ import {
   service_updateOwner,
 } from '../../../../stores/editor/shared/modifier/DSL_Service_GraphModifierHelper.js';
 import {
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
   useApplicationNavigationContext,
   useApplicationStore,
 } from '@finos/legend-application';
@@ -56,6 +55,7 @@ import { validate_ServicePattern } from '@finos/legend-graph';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
 import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
 import { flowResult } from 'mobx';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../application/LegendStudioDocumentation.js';
 
 type UserOption = { label: string; value: string };
 
@@ -481,7 +481,7 @@ export const ServiceEditor = observer(() => {
   );
   const seeDocumentation = (): void =>
     applicationStore.assistantService.openDocumentationEntry(
-      LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_A_SERVICE_TEST,
+      LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_A_SERVICE_TEST,
     );
 
   useApplicationNavigationContext(

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -49,9 +49,7 @@ import {
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
-  EDITOR_LANGUAGE,
-  ExecutionPlanViewer,
-  TextInputEditor,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -65,12 +63,14 @@ import {
   ServiceQueryBuilderState,
   LambdaParameterValuesEditor,
   QueryBuilderTextEditorMode,
+  ExecutionPlanViewer,
 } from '@finos/legend-query-builder';
 import { ProjectViewerEditorMode } from '../../../../stores/project-view/ProjectViewerEditorMode.js';
 import { useLegendStudioApplicationStore } from '../../../LegendStudioBaseStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { SNAPSHOT_VERSION_ALIAS } from '@finos/legend-server-depot';
 import type { ProjectGAVCoordinates } from '@finos/legend-storage';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
@@ -93,10 +93,10 @@ const ServiceExecutionResultViewer = observer(
         <Modal darkMode={true} className="editor-modal">
           <ModalHeader title="Execution Result" />
           <ModalBody>
-            <TextInputEditor
+            <CodeEditor
               inputValue={executionResultText ?? ''}
               isReadOnly={true}
-              language={EDITOR_LANGUAGE.JSON}
+              language={CODE_EDITOR_LANGUAGE.JSON}
               showMiniMap={true}
             />
           </ModalBody>
@@ -222,10 +222,10 @@ const ServiceExecutionQueryImporter = observer(
               isLoading={queryState.loadQueryInfoState.isInProgress}
             />
             {queryState.selectedQueryInfo && (
-              <TextInputEditor
+              <CodeEditor
                 inputValue={queryState.selectedQueryInfo.content}
                 isReadOnly={true}
-                language={EDITOR_LANGUAGE.PURE}
+                language={CODE_EDITOR_LANGUAGE.PURE}
                 showMiniMap={false}
                 hideGutter={true}
               />
@@ -601,10 +601,10 @@ export const ServiceExecutionQueryEditor = observer(
               editWithQueryBuilder()();
             }}
           >
-            <TextInputEditor
+            <CodeEditor
               inputValue={queryState.lambdaString}
               isReadOnly={true}
-              language={EDITOR_LANGUAGE.PURE}
+              language={CODE_EDITOR_LANGUAGE.PURE}
               showMiniMap={true}
             />
           </div>

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestDataEditor.tsx

@@ -55,12 +55,12 @@ import {
   ActionAlertActionType,
   ActionAlertType,
   buildElementOption,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
   useApplicationStore,
 } from '@finos/legend-application';
 import { prettyCONSTName } from '@finos/legend-shared';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { useEditorStore } from '../../../EditorStoreProvider.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../../application/LegendStudioDocumentation.js';
 
 export const ConnectionTestDataEditor = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
@@ -431,7 +431,7 @@ export const ServiceTestDataEditor = observer(
     };
     const seeDocumentation = (): void =>
       applicationStore.assistantService.openDocumentationEntry(
-        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_SERVICE_CONNECTION_TEST_DATA,
+        LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_WRITE_SERVICE_CONNECTION_TEST_DATA,
       );
     return (
       <div className="service-test-data-editor panel">

package/src/components/editor/edit-panel/testable/TestAssertionEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-application';
 import {
   clsx,
   CompareIcon,
@@ -49,6 +49,7 @@ import { externalFormatData_setData } from '../../../../stores/editor/shared/mod
 import { TESTABLE_RESULT } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
 import { JsonDiffView } from '../../../shared/DiffView.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 const EqualToJsonAsssertionEditor = observer(
   (props: {
@@ -84,9 +85,9 @@ const EqualToJsonAsssertionEditor = observer(
         </div>
         <div className="equal-to-json-editor__content panel__content">
           <div className="equal-to-json-editor__content__data">
-            <TextInputEditor
+            <CodeEditor
               inputValue={assertion.expected.data}
-              language={EDITOR_LANGUAGE.JSON}
+              language={CODE_EDITOR_LANGUAGE.JSON}
               updateInput={(val: string): void => {
                 equalToJsonAssertionState.setExpectedValue(val);
               }}

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -93,9 +93,9 @@ import {
   buildElementOption,
   useApplicationNavigationContext,
   type PackageableElementOption,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../application/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../application/LegendStudioDocumentation.js';
 
 const AssociationPropertyBasicEditor = observer(
   (props: {
@@ -212,7 +212,7 @@ const AssociationPropertyBasicEditor = observer(
     };
     const seeErrorDocumentation = (): void =>
       editorStore.applicationStore.assistantService.openDocumentationEntry(
-        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_WHY_DO_I_SEE_ERROR_WITH_ASSOCIATION_PROPERTY_TYPE,
+        LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_WHY_DO_I_SEE_ERROR_WITH_ASSOCIATION_PROPERTY_TYPE,
       );
 
     return (