feat(ui): support enable word wrap in live and desired manifest panel (#20299)

Signed-off-by: linghaoSu <linghao.su@daocloud.io>

Author: linghaoSu

ui/src/app/applications/components/application-node-info/application-node-info.tsx

@@ -233,11 +233,25 @@ export const ApplicationNodeInfo = (props: {
                                                 }
                                             />
                                             <label htmlFor='hideManagedFields'>Hide Managed Fields</label>
+                                            <Checkbox
+                                                id='enableWordWrap'
+                                                checked={!!pref.appDetails.enableWordWrap}
+                                                onChange={() =>
+                                                    services.viewPreferences.updatePreferences({
+                                                        appDetails: {
+                                                            ...pref.appDetails,
+                                                            enableWordWrap: !pref.appDetails.enableWordWrap
+                                                        }
+                                                    })
+                                                }
+                                            />
+                                            <label htmlFor='enableWordWrap'>Enable Word Wrap</label>
                                         </div>
                                         <YamlEditor
                                             input={live}
                                             hideModeButtons={!live}
                                             vScrollbar={live}
+                                            enableWordWrap={pref.appDetails.enableWordWrap}
                                             onSave={(patch, patchType) =>
                                                 services.applications.patchResource(
                                                     props.application.metadata.name,
@@ -280,7 +294,30 @@ export const ApplicationNodeInfo = (props: {
         tabs.push({
             key: 'desiredManifest',
             title: 'Desired Manifest',
-            content: <YamlEditor input={props.controlled.state.targetState} hideModeButtons={true} />
+            content: (
+                <DataLoader load={() => services.viewPreferences.getPreferences()}>
+                    {pref => (
+                        <React.Fragment>
+                            <div className='application-node-info__checkboxes'>
+                                <Checkbox
+                                    id='enableWordWrap'
+                                    checked={!!pref.appDetails.enableWordWrap}
+                                    onChange={() =>
+                                        services.viewPreferences.updatePreferences({
+                                            appDetails: {
+                                                ...pref.appDetails,
+                                                enableWordWrap: !pref.appDetails.enableWordWrap
+                                            }
+                                        })
+                                    }
+                                />
+                                <label htmlFor='enableWordWrap'>Enable Word Wrap</label>
+                            </div>
+                            <YamlEditor enableWordWrap={pref.appDetails.enableWordWrap} input={props.controlled.state.targetState} hideModeButtons={true} />
+                        </React.Fragment>
+                    )}
+                </DataLoader>
+            )
         });
     }
 

ui/src/app/shared/components/yaml-editor/yaml-editor.tsx

@@ -15,6 +15,7 @@ export class YamlEditor<T> extends React.Component<
         hideModeButtons?: boolean;
         initialEditMode?: boolean;
         vScrollbar?: boolean;
+        enableWordWrap?: boolean;
         onSave?: (patch: string, patchType: string) => Promise<any>;
         onCancel?: () => any;
         minHeight?: number;
@@ -98,7 +99,11 @@ export class YamlEditor<T> extends React.Component<
                     vScrollBar={props.vScrollbar}
                     editor={{
                         input: {text: yaml, language: 'yaml'},
-                        options: {readOnly: !this.state.editing, minimap: {enabled: false}},
+                        options: {
+                            readOnly: !this.state.editing,
+                            minimap: {enabled: false},
+                            wordWrap: props.enableWordWrap ? 'on' : 'off'
+                        },
                         getApi: api => {
                             this.model = api.getModel() as monacoEditor.editor.ITextModel;
                         }

ui/src/app/shared/services/view-preferences-service.ts

@@ -20,6 +20,7 @@ export interface AppDetailsPreferences {
     inlineDiff: boolean;
     compactDiff: boolean;
     hideManagedFields?: boolean;
+    enableWordWrap?: boolean;
     orphanedResources: boolean;
     podView: PodViewPreferences;
     darkMode: boolean;