Skip to content

Commit fae73ce

Browse files
olgennolgenn
authored
Refactoring Inspect page (#3457)
1 parent 3be819b commit fae73ce

File tree

7 files changed

+65
-128
lines changed

7 files changed

+65
-128
lines changed

frontend/src/components/form/CodeEditor/constants.ts renamed to frontend/src/components/CodeEditor/constants.ts

File renamed without changes.

‎frontend/src/components/CodeEditor/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useEffect, useState } from 'react';
2+
import ace from 'ace-builds';
3+
import GeneralCodeEditor, { CodeEditorProps as GeneralCodeEditorProps } from '@cloudscape-design/components/code-editor';
4+
5+
ace.config.set('useWorker', false);
6+
7+
import { Mode } from '@cloudscape-design/global-styles';
8+
9+
import { useAppSelector } from 'hooks';
10+
11+
import { selectSystemMode } from 'App/slice';
12+
13+
import { CODE_EDITOR_I18N_STRINGS } from './constants';
14+
15+
import 'ace-builds/src-noconflict/theme-cloud_editor';
16+
import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
17+
import 'ace-builds/src-noconflict/mode-yaml';
18+
import 'ace-builds/src-noconflict/mode-json';
19+
import 'ace-builds/src-noconflict/ext-language_tools';
20+
21+
export type CodeEditorProps = Omit<GeneralCodeEditorProps, 'ace' | 'onPreferencesChange' | 'themes' | 'preferences'>;
22+
23+
export const CodeEditor: React.FC<CodeEditorProps> = (props) => {
24+
const systemMode = useAppSelector(selectSystemMode) ?? '';
25+
26+
const [codeEditorPreferences, setCodeEditorPreferences] = useState<GeneralCodeEditorProps['preferences']>(() => ({
27+
theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor',
28+
}));
29+
30+
useEffect(() => {
31+
if (systemMode === Mode.Dark)
32+
setCodeEditorPreferences({
33+
theme: 'cloud_editor_dark',
34+
});
35+
else
36+
setCodeEditorPreferences({
37+
theme: 'cloud_editor',
38+
});
39+
}, [systemMode]);
40+
41+
const onCodeEditorPreferencesChange: GeneralCodeEditorProps['onPreferencesChange'] = (e) => {
42+
setCodeEditorPreferences(e.detail);
43+
};
44+
45+
return (
46+
<GeneralCodeEditor
47+
i18nStrings={CODE_EDITOR_I18N_STRINGS}
48+
ace={ace}
49+
themes={{ light: [], dark: [] }}
50+
preferences={codeEditorPreferences}
51+
onPreferencesChange={onCodeEditorPreferencesChange}
52+
{...props}
53+
/>
54+
);
55+
};

‎frontend/src/components/form/CodeEditor/index.tsx‎

Lines changed: 2 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,11 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import { Controller, FieldValues } from 'react-hook-form';
3-
import ace from 'ace-builds';
4-
import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor';
53
import FormField from '@cloudscape-design/components/form-field';
64

7-
import { CODE_EDITOR_I18N_STRINGS } from './constants';
5+
import { CodeEditor } from '../../CodeEditor';
86

97
import { FormCodeEditorProps } from './types';
108

11-
ace.config.set('useWorker', false);
12-
13-
import { Mode } from '@cloudscape-design/global-styles';
14-
15-
import { useAppSelector } from 'hooks';
16-
17-
import { selectSystemMode } from 'App/slice';
18-
19-
import 'ace-builds/src-noconflict/theme-cloud_editor';
20-
import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
21-
import 'ace-builds/src-noconflict/mode-yaml';
22-
import 'ace-builds/src-noconflict/ext-language_tools';
23-
249
export const FormCodeEditor = <T extends FieldValues>({
2510
name,
2611
control,
@@ -34,27 +19,6 @@ export const FormCodeEditor = <T extends FieldValues>({
3419
onChange: onChangeProp,
3520
...props
3621
}: FormCodeEditorProps<T>) => {
37-
const systemMode = useAppSelector(selectSystemMode) ?? '';
38-
39-
const [codeEditorPreferences, setCodeEditorPreferences] = useState<CodeEditorProps['preferences']>(() => ({
40-
theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor',
41-
}));
42-
43-
useEffect(() => {
44-
if (systemMode === Mode.Dark)
45-
setCodeEditorPreferences({
46-
theme: 'cloud_editor_dark',
47-
});
48-
else
49-
setCodeEditorPreferences({
50-
theme: 'cloud_editor',
51-
});
52-
}, [systemMode]);
53-
54-
const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => {
55-
setCodeEditorPreferences(e.detail);
56-
};
57-
5822
return (
5923
<Controller
6024
name={name}
@@ -74,15 +38,10 @@ export const FormCodeEditor = <T extends FieldValues>({
7438
<CodeEditor
7539
{...fieldRest}
7640
{...props}
77-
i18nStrings={CODE_EDITOR_I18N_STRINGS}
78-
ace={ace}
7941
onChange={(event) => {
8042
onChange(event.detail.value);
8143
onChangeProp?.(event);
8244
}}
83-
themes={{ light: [], dark: [] }}
84-
preferences={codeEditorPreferences}
85-
onPreferencesChange={onCodeEditorPreferencesChange}
8645
/>
8746
</FormField>
8847
);

‎frontend/src/components/form/CodeEditor/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { ControllerProps, FieldValues } from 'react-hook-form';
2-
import { CodeEditorProps } from '@cloudscape-design/components/code-editor';
32
import { FormFieldProps } from '@cloudscape-design/components/form-field';
43

4+
import { CodeEditorProps } from '../../CodeEditor';
5+
56
export type FormCodeEditorProps<T extends FieldValues> = Omit<
67
CodeEditorProps,
78
'value' | 'name' | 'i18nStrings' | 'ace' | 'onPreferencesChange' | 'preferences'

‎frontend/src/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ export type { FormCardsProps } from './form/Cards/types';
8888
export { FormCards } from './form/Cards';
8989
export { Notifications } from './Notifications';
9090
export { ConfirmationDialog } from './ConfirmationDialog';
91+
export { CodeEditor } from './CodeEditor';
92+
export type { CodeEditorProps } from './CodeEditor';
9193
export { FileUploader } from './FileUploader';
9294
export { InfoLink } from './InfoLink';
9395
export { ButtonWithConfirmation } from './ButtonWithConfirmation';

‎frontend/src/pages/Fleets/Details/Inspect/index.tsx‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,11 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import React, { useEffect, useMemo } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useParams } from 'react-router-dom';
4-
import ace from 'ace-builds';
5-
import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor';
6-
import { Mode } from '@cloudscape-design/global-styles';
74

8-
import { Container, Header, Loader } from 'components';
9-
import { CODE_EDITOR_I18N_STRINGS } from 'components/form/CodeEditor/constants';
5+
import { CodeEditor, Container, Header, Loader } from 'components';
106

11-
import { useAppSelector } from 'hooks';
127
import { useGetFleetDetailsQuery } from 'services/fleet';
138

14-
import { selectSystemMode } from 'App/slice';
15-
16-
import 'ace-builds/src-noconflict/theme-cloud_editor';
17-
import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
18-
import 'ace-builds/src-noconflict/mode-json';
19-
import 'ace-builds/src-noconflict/ext-language_tools';
20-
21-
ace.config.set('useWorker', false);
22-
239
interface AceEditorElement extends HTMLElement {
2410
env?: {
2511
editor?: {
@@ -34,8 +20,6 @@ export const FleetInspect = () => {
3420
const paramProjectName = params.projectName ?? '';
3521
const paramFleetId = params.fleetId ?? '';
3622

37-
const systemMode = useAppSelector(selectSystemMode) ?? '';
38-
3923
const { data: fleetData, isLoading } = useGetFleetDetailsQuery(
4024
{
4125
projectName: paramProjectName,
@@ -46,25 +30,6 @@ export const FleetInspect = () => {
4630
},
4731
);
4832

49-
const [codeEditorPreferences, setCodeEditorPreferences] = useState<CodeEditorProps['preferences']>(() => ({
50-
theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor',
51-
}));
52-
53-
useEffect(() => {
54-
if (systemMode === Mode.Dark)
55-
setCodeEditorPreferences({
56-
theme: 'cloud_editor_dark',
57-
});
58-
else
59-
setCodeEditorPreferences({
60-
theme: 'cloud_editor',
61-
});
62-
}, [systemMode]);
63-
64-
const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => {
65-
setCodeEditorPreferences(e.detail);
66-
};
67-
6833
const jsonContent = useMemo(() => {
6934
if (!fleetData) return '';
7035
return JSON.stringify(fleetData, null, 2);
@@ -98,11 +63,6 @@ export const FleetInspect = () => {
9863
<CodeEditor
9964
value={jsonContent}
10065
language="json"
101-
i18nStrings={CODE_EDITOR_I18N_STRINGS}
102-
ace={ace}
103-
themes={{ light: [], dark: [] }}
104-
preferences={codeEditorPreferences}
105-
onPreferencesChange={onCodeEditorPreferencesChange}
10666
editorContentHeight={600}
10767
onChange={() => {
10868
// Prevent editing - onChange is required but we ignore changes

‎frontend/src/pages/Runs/Details/Inspect/index.tsx‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,11 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import React, { useEffect, useMemo } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useParams } from 'react-router-dom';
4-
import ace from 'ace-builds';
5-
import CodeEditor, { CodeEditorProps } from '@cloudscape-design/components/code-editor';
6-
import { Mode } from '@cloudscape-design/global-styles';
74

8-
import { Container, Header, Loader } from 'components';
9-
import { CODE_EDITOR_I18N_STRINGS } from 'components/form/CodeEditor/constants';
5+
import { CodeEditor, Container, Header, Loader } from 'components';
106

11-
import { useAppSelector } from 'hooks';
127
import { useGetRunQuery } from 'services/run';
138

14-
import { selectSystemMode } from 'App/slice';
15-
16-
import 'ace-builds/src-noconflict/theme-cloud_editor';
17-
import 'ace-builds/src-noconflict/theme-cloud_editor_dark';
18-
import 'ace-builds/src-noconflict/mode-json';
19-
import 'ace-builds/src-noconflict/ext-language_tools';
20-
21-
ace.config.set('useWorker', false);
22-
239
interface AceEditorElement extends HTMLElement {
2410
env?: {
2511
editor?: {
@@ -34,32 +20,11 @@ export const RunInspect = () => {
3420
const paramProjectName = params.projectName ?? '';
3521
const paramRunId = params.runId ?? '';
3622

37-
const systemMode = useAppSelector(selectSystemMode) ?? '';
38-
3923
const { data: runData, isLoading } = useGetRunQuery({
4024
project_name: paramProjectName,
4125
id: paramRunId,
4226
});
4327

44-
const [codeEditorPreferences, setCodeEditorPreferences] = useState<CodeEditorProps['preferences']>(() => ({
45-
theme: systemMode === Mode.Dark ? 'cloud_editor_dark' : 'cloud_editor',
46-
}));
47-
48-
useEffect(() => {
49-
if (systemMode === Mode.Dark)
50-
setCodeEditorPreferences({
51-
theme: 'cloud_editor_dark',
52-
});
53-
else
54-
setCodeEditorPreferences({
55-
theme: 'cloud_editor',
56-
});
57-
}, [systemMode]);
58-
59-
const onCodeEditorPreferencesChange: CodeEditorProps['onPreferencesChange'] = (e) => {
60-
setCodeEditorPreferences(e.detail);
61-
};
62-
6328
const jsonContent = useMemo(() => {
6429
if (!runData) return '';
6530
return JSON.stringify(runData, null, 2);
@@ -93,11 +58,6 @@ export const RunInspect = () => {
9358
<CodeEditor
9459
value={jsonContent}
9560
language="json"
96-
i18nStrings={CODE_EDITOR_I18N_STRINGS}
97-
ace={ace}
98-
themes={{ light: [], dark: [] }}
99-
preferences={codeEditorPreferences}
100-
onPreferencesChange={onCodeEditorPreferencesChange}
10161
editorContentHeight={600}
10262
onChange={() => {
10363
// Prevent editing - onChange is required but we ignore changes

0 commit comments

Comments
 (0)