CodeEdit

caprover · Oct 16, 2024 · 0c6380d · 0c6380d
1 parent d82a0ad
commit 0c6380d
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 45 deletions.
diff --git a/src/containers/apps/appDetails/AppConfigs.tsx b/src/containers/apps/appDetails/AppConfigs.tsx
@@ -4,6 +4,7 @@ import { Component, Fragment } from 'react'
 import { IHashMapGeneric } from '../../../models/IHashMapGeneric'
 import { localize } from '../../../utils/Language'
 import Utils from '../../../utils/Utils'
+import CodeEdit from '../../global/CodeEdit'
 import NewTabLink from '../../global/NewTabLink'
 import { IAppEnvVar } from '../AppDefinition'
 import { AppDetailsTabProps } from './AppDetails'
@@ -89,8 +90,7 @@ export default class AppConfigs extends Component<
                 <div>
                     <Row style={{ paddingBottom: 12 }}>
                         <Col span={24}>
-                            <Input.TextArea
-                                className="code-input"
+                            <CodeEdit
                                 placeholder={'key1=value1\nkey2=value2'}
                                 rows={7}
                                 value={
@@ -145,8 +145,7 @@ export default class AppConfigs extends Component<
                         />
                     </Col>
                     <Col style={{ paddingLeft: 12 }} span={16}>
-                        <Input.TextArea
-                            className="code-input"
+                        <CodeEdit
                             placeholder="value"
                             rows={1}
                             value={value.value}
@@ -633,12 +632,7 @@ export default class AppConfigs extends Component<
                             </NewTabLink>
                         </h4>
 
-                        <Input.TextArea
-                            spellCheck={false}
-                            autoCorrect="off"
-                            autoComplete="off"
-                            autoCapitalize="off"
-                            className="code-input"
+                        <CodeEdit
                             placeholder="var preDeployFunction = function (capRoverAppObj, dockerUpdateObject) ..."
                             rows={4}
                             value={
@@ -669,12 +663,7 @@ export default class AppConfigs extends Component<
                             </NewTabLink>
                         </h4>
 
-                        <Input.TextArea
-                            spellCheck={false}
-                            autoCorrect="off"
-                            autoComplete="off"
-                            autoCapitalize="off"
-                            className="code-input"
+                        <CodeEdit
                             placeholder={`## JSON / YAML
 {
   "TaskTemplate": {
@@ -746,8 +735,7 @@ export default class AppConfigs extends Component<
 
         if (this.state.tagsEditMode) {
             return (
-                <Input.TextArea
-                    className="code-input"
+                <CodeEdit
                     placeholder={'tag1,comma,separated,cannot-contain-space'}
                     rows={1}
                     defaultValue={(app.tags || [])

diff --git a/src/containers/apps/appDetails/deploy/UploaderPlainTextBase.tsx b/src/containers/apps/appDetails/deploy/UploaderPlainTextBase.tsx
@@ -2,6 +2,7 @@ import { Button, Input, Row } from 'antd'
 import { localize } from '../../../../utils/Language'
 import Toaster from '../../../../utils/Toaster'
 import ApiComponent from '../../../global/ApiComponent'
+import CodeEdit from '../../../global/CodeEdit'
 
 export default abstract class UploaderPlainTextBase extends ApiComponent<
     {
@@ -72,8 +73,7 @@ export default abstract class UploaderPlainTextBase extends ApiComponent<
         }
 
         return (
-            <Input.TextArea
-                className="code-input"
+            <CodeEdit
                 placeholder={self.getPlaceHolderValue()}
                 rows={7}
                 value={self.state.userEnteredValue}

diff --git a/src/containers/global/CodeEdit.tsx b/src/containers/global/CodeEdit.tsx
@@ -4,19 +4,25 @@ import React from 'react'
 interface CodeEditProps {
     rows?: number | undefined
     placeholder?: string | undefined
-    value: string | undefined
+    defaultValue?: string | undefined
+    value?: string | undefined
     onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
 }
 
 const CodeEdit: React.FC<CodeEditProps> = ({
     value,
     placeholder,
     rows,
+    defaultValue,
     onChange,
 }) => {
     return (
         <Input.TextArea
+            defaultValue={defaultValue}
             spellCheck={false}
+            autoCorrect="off"
+            autoComplete="off"
+            autoCapitalize="off"
             placeholder={placeholder}
             style={{
                 overflowX: 'auto',

diff --git a/src/containers/global/InputJsonifier.tsx b/src/containers/global/InputJsonifier.tsx
@@ -1,6 +1,6 @@
-import { Input } from 'antd'
-import React, { Component, Fragment } from 'react'
+import { Component, Fragment } from 'react'
 import yaml from 'yaml'
+import CodeEdit from './CodeEdit'
 
 function ensureStringifiedJson(raw: string) {
     raw = (raw || '').trim()
@@ -38,8 +38,7 @@ export default class InputJsonifier extends Component<
         return (
             <Fragment>
                 {' '}
-                <Input.TextArea
-                    className="code-input"
+                <CodeEdit
                     placeholder={self.props.placeholder}
                     rows={10}
                     defaultValue={self.props.defaultValue}

diff --git a/src/containers/nodes/AddNode.tsx b/src/containers/nodes/AddNode.tsx
@@ -3,6 +3,7 @@ import { Button, Card, Col, Collapse, Input, Radio, Row, Tooltip } from 'antd'
 import { Component } from 'react'
 import { localize } from '../../utils/Language'
 import Utils from '../../utils/Utils'
+import CodeEdit from '../global/CodeEdit'
 
 export interface INodeToAdd {
     remoteNodeIpAddress: string
@@ -117,19 +118,20 @@ export default class AddNode extends Component<
                                     />
                                 </Tooltip>
                             </div>
-                            <Input.TextArea
-                                style={{ marginBottom: 20 }}
-                                className="code-input"
-                                rows={6}
-                                placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;MIICWwIBAAKBgQDArfs81aizq8ckg16e+ewFgJg7J..."
-                                value={nodeToAdd.privateKey}
-                                onChange={(e) =>
-                                    self.changeModel(
-                                        'privateKey',
-                                        e.target.value
-                                    )
-                                }
-                            />
+
+                            <div style={{ marginBottom: 20 }}>
+                                <CodeEdit
+                                    rows={6}
+                                    placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;MIICWwIBAAKBgQDArfs81aizq8ckg16e+ewFgJg7J..."
+                                    value={nodeToAdd.privateKey}
+                                    onChange={(e) =>
+                                        self.changeModel(
+                                            'privateKey',
+                                            e.target.value
+                                        )
+                                    }
+                                />
+                            </div>
                         </Col>
                     </Row>
                     <Row justify="end">

diff --git a/src/containers/settings/NginxConfig.tsx b/src/containers/settings/NginxConfig.tsx
@@ -1,10 +1,11 @@
 import { SyncOutlined } from '@ant-design/icons'
-import { Button, Input, Row } from 'antd'
+import { Button, Row } from 'antd'
 import { localize } from '../../utils/Language'
 import Toaster from '../../utils/Toaster'
 import Utils from '../../utils/Utils'
 import ApiComponent from '../global/ApiComponent'
 import CenteredSpinner from '../global/CenteredSpinner'
+import CodeEdit from '../global/CodeEdit'
 import ErrorRetry from '../global/ErrorRetry'
 
 export default class NginxConfig extends ApiComponent<
@@ -107,9 +108,7 @@ export default class NginxConfig extends ApiComponent<
                             : 'hide-on-demand'
                     }
                 >
-                    <Input.TextArea
-                        className="code-input"
-                        placeholder=""
+                    <CodeEdit
                         rows={17}
                         value={nginxConfig.baseConfig.customValue}
                         onChange={(e) => {
@@ -118,6 +117,7 @@ export default class NginxConfig extends ApiComponent<
                             self.setState({ nginxConfig: newApiData })
                         }}
                     />
+
                     <div style={{ height: 40 }} />
                 </div>
                 <p>
@@ -138,9 +138,7 @@ export default class NginxConfig extends ApiComponent<
                             : 'hide-on-demand'
                     }
                 >
-                    <Input.TextArea
-                        className="code-input"
-                        placeholder=""
+                    <CodeEdit
                         rows={17}
                         value={nginxConfig.captainConfig.customValue}
                         onChange={(e) => {