From a2dc6b24b3d35077538b434e57a292bf8453e550 Mon Sep 17 00:00:00 2001 From: Oleg Vavilov Date: Mon, 12 Jan 2026 22:41:37 +0300 Subject: [PATCH] Refactoring Inspect page --- .../{form => }/CodeEditor/constants.ts | 0 frontend/src/components/CodeEditor/index.tsx | 55 +++++++++++++++++++ .../src/components/form/CodeEditor/index.tsx | 45 +-------------- .../src/components/form/CodeEditor/types.ts | 3 +- frontend/src/components/index.ts | 2 + .../pages/Fleets/Details/Inspect/index.tsx | 44 +-------------- .../src/pages/Runs/Details/Inspect/index.tsx | 44 +-------------- 7 files changed, 65 insertions(+), 128 deletions(-) rename frontend/src/components/{form => }/CodeEditor/constants.ts (100%) create mode 100644 frontend/src/components/CodeEditor/index.tsx diff --git a/frontend/src/components/form/CodeEditor/constants.ts b/frontend/src/components/CodeEditor/constants.ts similarity index 100% rename from frontend/src/components/form/CodeEditor/constants.ts rename to frontend/src/components/CodeEditor/constants.ts diff --git a/frontend/src/components/CodeEditor/index.tsx b/frontend/src/components/CodeEditor/index.tsx new file mode 100644 index 000000000..f8d9daf38 --- /dev/null +++ b/frontend/src/components/CodeEditor/index.tsx @@ -0,0 +1,55 @@ +import React, { useEffect, useState } from 'react'; +import ace from 'ace-builds'; +import GeneralCodeEditor, { CodeEditorProps as GeneralCodeEditorProps } from '@cloudscape-design/components/code-editor'; + +ace.config.set('useWorker', false); + +import { Mode } from '@cloudscape-design/global-styles'; + +import { useAppSelector } from 'hooks'; + +import { selectSystemMode } from 'App/slice'; + +import { CODE_EDITOR_I18N_STRINGS } from './constants'; + +import 'ace-builds/src-noconflict/theme-cloud_editor'; +import 'ace-builds/src-noconflict/theme-cloud_editor_dark'; +import 'ace-builds/src-noconflict/mode-yaml'; +import 'ace-builds/src-noconflict/mode-json'; +import 'ace-builds/src-noconflict/ext-language_tools'; + +export type CodeEditorProps = Omit; + +export const CodeEditor: React.FC = (props) => { + const systemMode = useAppSelector(selectSystemMode) ?? ''; + + const [codeEditorPreferences, setCodeEditorPreferences] = useState(() => ({ + theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor', + })); + + useEffect(() => { + if (systemMode === Mode.Dark) + setCodeEditorPreferences({ + theme: 'cloud_editor_dark', + }); + else + setCodeEditorPreferences({ + theme: 'cloud_editor', + }); + }, [systemMode]); + + const onCodeEditorPreferencesChange: GeneralCodeEditorProps['onPreferencesChange'] = (e) => { + setCodeEditorPreferences(e.detail); + }; + + return ( + + ); +}; diff --git a/frontend/src/components/form/CodeEditor/index.tsx b/frontend/src/components/form/CodeEditor/index.tsx index 4d23ea101..254c960d0 100644 --- a/frontend/src/components/form/CodeEditor/index.tsx +++ b/frontend/src/components/form/CodeEditor/index.tsx @@ -1,26 +1,11 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { Controller, FieldValues } from 'react-hook-form'; -import ace from 'ace-builds'; -import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor'; import FormField from '@cloudscape-design/components/form-field'; -import { CODE_EDITOR_I18N_STRINGS } from './constants'; +import { CodeEditor } from '../../CodeEditor'; import { FormCodeEditorProps } from './types'; -ace.config.set('useWorker', false); - -import { Mode } from '@cloudscape-design/global-styles'; - -import { useAppSelector } from 'hooks'; - -import { selectSystemMode } from 'App/slice'; - -import 'ace-builds/src-noconflict/theme-cloud_editor'; -import 'ace-builds/src-noconflict/theme-cloud_editor_dark'; -import 'ace-builds/src-noconflict/mode-yaml'; -import 'ace-builds/src-noconflict/ext-language_tools'; - export const FormCodeEditor = ({ name, control, @@ -34,27 +19,6 @@ export const FormCodeEditor = ({ onChange: onChangeProp, ...props }: FormCodeEditorProps) => { - const systemMode = useAppSelector(selectSystemMode) ?? ''; - - const [codeEditorPreferences, setCodeEditorPreferences] = useState(() => ({ - theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor', - })); - - useEffect(() => { - if (systemMode === Mode.Dark) - setCodeEditorPreferences({ - theme: 'cloud_editor_dark', - }); - else - setCodeEditorPreferences({ - theme: 'cloud_editor', - }); - }, [systemMode]); - - const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => { - setCodeEditorPreferences(e.detail); - }; - return ( ({ { onChange(event.detail.value); onChangeProp?.(event); }} - themes={{ light: [], dark: [] }} - preferences={codeEditorPreferences} - onPreferencesChange={onCodeEditorPreferencesChange} /> ); diff --git a/frontend/src/components/form/CodeEditor/types.ts b/frontend/src/components/form/CodeEditor/types.ts index 380c009c5..baedd567b 100644 --- a/frontend/src/components/form/CodeEditor/types.ts +++ b/frontend/src/components/form/CodeEditor/types.ts @@ -1,7 +1,8 @@ import { ControllerProps, FieldValues } from 'react-hook-form'; -import { CodeEditorProps } from '@cloudscape-design/components/code-editor'; import { FormFieldProps } from '@cloudscape-design/components/form-field'; +import { CodeEditorProps } from '../../CodeEditor'; + export type FormCodeEditorProps = Omit< CodeEditorProps, 'value' | 'name' | 'i18nStrings' | 'ace' | 'onPreferencesChange' | 'preferences' diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 70d240a25..c8aa4013f 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -88,6 +88,8 @@ export type { FormCardsProps } from './form/Cards/types'; export { FormCards } from './form/Cards'; export { Notifications } from './Notifications'; export { ConfirmationDialog } from './ConfirmationDialog'; +export { CodeEditor } from './CodeEditor'; +export type { CodeEditorProps } from './CodeEditor'; export { FileUploader } from './FileUploader'; export { InfoLink } from './InfoLink'; export { ButtonWithConfirmation } from './ButtonWithConfirmation'; diff --git a/frontend/src/pages/Fleets/Details/Inspect/index.tsx b/frontend/src/pages/Fleets/Details/Inspect/index.tsx index 844ebe849..8d9c5d509 100644 --- a/frontend/src/pages/Fleets/Details/Inspect/index.tsx +++ b/frontend/src/pages/Fleets/Details/Inspect/index.tsx @@ -1,25 +1,11 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; -import ace from 'ace-builds'; -import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor'; -import { Mode } from '@cloudscape-design/global-styles'; -import { Container, Header, Loader } from 'components'; -import { CODE_EDITOR_I18N_STRINGS } from 'components/form/CodeEditor/constants'; +import { CodeEditor, Container, Header, Loader } from 'components'; -import { useAppSelector } from 'hooks'; import { useGetFleetDetailsQuery } from 'services/fleet'; -import { selectSystemMode } from 'App/slice'; - -import 'ace-builds/src-noconflict/theme-cloud_editor'; -import 'ace-builds/src-noconflict/theme-cloud_editor_dark'; -import 'ace-builds/src-noconflict/mode-json'; -import 'ace-builds/src-noconflict/ext-language_tools'; - -ace.config.set('useWorker', false); - interface AceEditorElement extends HTMLElement { env?: { editor?: { @@ -34,8 +20,6 @@ export const FleetInspect = () => { const paramProjectName = params.projectName ?? ''; const paramFleetId = params.fleetId ?? ''; - const systemMode = useAppSelector(selectSystemMode) ?? ''; - const { data: fleetData, isLoading } = useGetFleetDetailsQuery( { projectName: paramProjectName, @@ -46,25 +30,6 @@ export const FleetInspect = () => { }, ); - const [codeEditorPreferences, setCodeEditorPreferences] = useState(() => ({ - theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor', - })); - - useEffect(() => { - if (systemMode === Mode.Dark) - setCodeEditorPreferences({ - theme: 'cloud_editor_dark', - }); - else - setCodeEditorPreferences({ - theme: 'cloud_editor', - }); - }, [systemMode]); - - const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => { - setCodeEditorPreferences(e.detail); - }; - const jsonContent = useMemo(() => { if (!fleetData) return ''; return JSON.stringify(fleetData, null, 2); @@ -98,11 +63,6 @@ export const FleetInspect = () => { { // Prevent editing - onChange is required but we ignore changes diff --git a/frontend/src/pages/Runs/Details/Inspect/index.tsx b/frontend/src/pages/Runs/Details/Inspect/index.tsx index f37aa90ad..5dc9e9a46 100644 --- a/frontend/src/pages/Runs/Details/Inspect/index.tsx +++ b/frontend/src/pages/Runs/Details/Inspect/index.tsx @@ -1,25 +1,11 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; -import ace from 'ace-builds'; -import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor'; -import { Mode } from '@cloudscape-design/global-styles'; -import { Container, Header, Loader } from 'components'; -import { CODE_EDITOR_I18N_STRINGS } from 'components/form/CodeEditor/constants'; +import { CodeEditor, Container, Header, Loader } from 'components'; -import { useAppSelector } from 'hooks'; import { useGetRunQuery } from 'services/run'; -import { selectSystemMode } from 'App/slice'; - -import 'ace-builds/src-noconflict/theme-cloud_editor'; -import 'ace-builds/src-noconflict/theme-cloud_editor_dark'; -import 'ace-builds/src-noconflict/mode-json'; -import 'ace-builds/src-noconflict/ext-language_tools'; - -ace.config.set('useWorker', false); - interface AceEditorElement extends HTMLElement { env?: { editor?: { @@ -34,32 +20,11 @@ export const RunInspect = () => { const paramProjectName = params.projectName ?? ''; const paramRunId = params.runId ?? ''; - const systemMode = useAppSelector(selectSystemMode) ?? ''; - const { data: runData, isLoading } = useGetRunQuery({ project_name: paramProjectName, id: paramRunId, }); - const [codeEditorPreferences, setCodeEditorPreferences] = useState(() => ({ - theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor', - })); - - useEffect(() => { - if (systemMode === Mode.Dark) - setCodeEditorPreferences({ - theme: 'cloud_editor_dark', - }); - else - setCodeEditorPreferences({ - theme: 'cloud_editor', - }); - }, [systemMode]); - - const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => { - setCodeEditorPreferences(e.detail); - }; - const jsonContent = useMemo(() => { if (!runData) return ''; return JSON.stringify(runData, null, 2); @@ -93,11 +58,6 @@ export const RunInspect = () => { { // Prevent editing - onChange is required but we ignore changes