Code editor rename

Author: krystian-panek-vmltech

ui.frontend/src/App.css

@@ -6,3 +6,7 @@ body {
 input[type='search'] {
   box-sizing: border-box !important;
 }
+
+.coral3-Shell-header {
+  z-index: 1;
+}

ui.frontend/src/components/ImmersiveEditor.tsx renamed to ui.frontend/src/components/CodeEditor.tsx

@@ -9,7 +9,7 @@ import { debounce } from '../utils/debounce';
 import { modelStorage } from '../utils/modelStorage';
 import { registerGroovyLanguage } from '../utils/monaco/groovy';
 
-type ImmersiveEditorProps<C extends ColorVersion> = editor.IStandaloneEditorConstructionOptions & {
+type CodeEditorProps<C extends ColorVersion> = editor.IStandaloneEditorConstructionOptions & {
   id: string;
   scrollToBottomOnUpdate?: boolean;
   initialValue?: string;
@@ -21,7 +21,7 @@ type ImmersiveEditorProps<C extends ColorVersion> = editor.IStandaloneEditorCons
 const SaveViewStateDebounce = 1000;
 const SuggestWidgetHeight = 480;
 
-const ImmersiveEditor = <C extends ColorVersion>({ containerProps, syntaxError, onChange, id, language, value, initialValue, readOnly, scrollToBottomOnUpdate, ...props }: ImmersiveEditorProps<C>) => {
+const CodeEditor = <C extends ColorVersion>({ containerProps, syntaxError, onChange, id, language, value, initialValue, readOnly, scrollToBottomOnUpdate, ...props }: CodeEditorProps<C>) => {
   const [isOpen, setIsOpen] = useState(false);
   const monacoRef = useMonaco();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -169,4 +169,4 @@ const ImmersiveEditor = <C extends ColorVersion>({ containerProps, syntaxError,
   );
 };
 
-export default ImmersiveEditor;
+export default CodeEditor;

ui.frontend/src/pages/ConsolePage.tsx

@@ -9,7 +9,7 @@ import ConsoleHelpButton from '../components/ConsoleHelpButton';
 import ExecutionAbortButton from '../components/ExecutionAbortButton';
 import ExecutionCopyOutputButton from '../components/ExecutionCopyOutputButton';
 import ExecutionProgressBar from '../components/ExecutionProgressBar';
-import ImmersiveEditor from '../components/ImmersiveEditor';
+import CodeEditor from '../components/CodeEditor.tsx';
 import KeyboardShortcutsButton from '../components/KeyboardShortcutsButton';
 import { appState } from '../hooks/app';
 import { useCompilation } from '../hooks/code';
@@ -98,7 +98,7 @@ const ConsolePage = () => {
                   <KeyboardShortcutsButton />
                 </Flex>
               </Flex>
-              <ImmersiveEditor id="code-editor" initialValue={code} readOnly={executing} onChange={setCode} syntaxError={syntaxError} language="groovy" />
+              <CodeEditor id="code-editor" initialValue={code} readOnly={executing} onChange={setCode} syntaxError={syntaxError} language="groovy" />
             </Flex>
           </Item>
           <Item key="output">
@@ -120,7 +120,7 @@ const ConsolePage = () => {
                   <ConsoleHelpButton />
                 </Flex>
               </Flex>
-              <ImmersiveEditor id="output-preview" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscroll} />
+              <CodeEditor id="output-preview" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscroll} />
             </Flex>
           </Item>
         </TabPanels>

ui.frontend/src/pages/ExecutionView.tsx

@@ -15,7 +15,7 @@ import ExecutionAbortButton from '../components/ExecutionAbortButton';
 import ExecutionCopyOutputButton from '../components/ExecutionCopyOutputButton';
 import ExecutionProgressBar from '../components/ExecutionProgressBar';
 import ExecutionStatusBadge from '../components/ExecutionStatusBadge';
-import ImmersiveEditor from '../components/ImmersiveEditor';
+import CodeEditor from '../components/CodeEditor.tsx';
 import { appState } from '../hooks/app.ts';
 import { useExecutionPolling } from '../hooks/execution';
 import { useFormatter } from '../hooks/formatter';
@@ -140,7 +140,7 @@ const ExecutionView = () => {
                   </ButtonGroup>
                 </Flex>
               </View>
-              <ImmersiveEditor id="execution-view" value={execution.executable.content} language="groovy" readOnly />
+              <CodeEditor id="execution-view" value={execution.executable.content} language="groovy" readOnly />
             </Flex>
           </Item>
           <Item key="output">
@@ -162,7 +162,7 @@ const ExecutionView = () => {
                   &nbsp;
                 </Flex>
               </Flex>
-              <ImmersiveEditor id="execution-output" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscrollOutput} />
+              <CodeEditor id="execution-output" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscrollOutput} />
             </Flex>
           </Item>
         </TabPanels>

ui.frontend/src/pages/ScriptView.tsx

@@ -7,9 +7,9 @@ import FileCode from '@spectrum-icons/workflow/FileCode';
 import History from '@spectrum-icons/workflow/History';
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import CodeExecuteButton from '../components/CodeExecuteButton.tsx';
-import ImmersiveEditor from '../components/ImmersiveEditor.tsx';
-import { NavigationSearchParams, useNavigationTab } from '../hooks/navigation.ts';
+import CodeExecuteButton from '../components/CodeExecuteButton';
+import CodeEditor from '../components/CodeEditor';
+import { NavigationSearchParams, useNavigationTab } from '../hooks/navigation';
 import { toastRequest } from '../utils/api';
 import { ArgumentValues, Description, ExecutionQueryParams, QueueOutput, Script, ScriptOutput, ScriptType } from '../utils/api.types';
 import { Urls } from '../utils/url.ts';
@@ -177,7 +177,7 @@ const ScriptView = () => {
                   </ButtonGroup>
                 </Flex>
               </View>
-              <ImmersiveEditor id="script-view" value={script.content} language="groovy" readOnly />
+              <CodeEditor id="script-view" value={script.content} language="groovy" readOnly />
             </Flex>
           </Item>
         </TabPanels>