AutomationCodeEditor

• Reference
• 3-min read

The AutomationCodeEditor provides a text input field specifically designed for editing code. Furthermore, it offers properties to configure, for example, syntax highlighting, spell checks, or line wrapping. Upon selecting the editor in the browser, the user can start editing by pressing the Enter key and can quit and return to the keyboard navigation flow by pressing the Escape key.

Import

import { AutomationCodeEditor } from '@dynatrace/automation-action-components';

Props

AutomationCodeEditorProps

extends

Name	Type	Default	Description
value?			The content value of the editor in controlled mode. Not allowed together with defaultValue.
defaultValue?			The default value of the editor for uncontrolled usage. Not allowed together with value.
onChange?	(value: ) =>		Callback that is called when the value in the editor changes.
placeholder?			Displayed initially in the editor when there is no other content.
language?	| | | | | | |	'other'	The language for syntax highlighting and autocompletion.
size?	|	'default'	Editor layout size, 'default' for standard spacing and 'condensed' for reduced font size, padding and margins.
fullHeight?		false	If set to true, the code editor uses the full height available in its parent.

Usage

Controlled editor

Keep the editor content in your own state and pass it back through value. The editor renders whatever value holds, so onChange must update that state — otherwise typing has no effect. Don't combine value with defaultValue.

ControlledEditor.tsx

import { AutomationCodeEditor } from '@dynatrace/automation-action-components';
import { FormField, Label } from '@dynatrace/strato-components/forms';
import { useState } from 'react';

export const ControlledEditor = () => {
  const [script, setScript] = useState(`import { coreClient } from '@dynatrace-sdk/client-core';

const me = await coreClient.getUserInfo();

export default me;`);

  return (
    <FormField>
      <Label>Script</Label>
      <AutomationCodeEditor language="ts" value={script} onChange={setScript} />
    </FormField>
  );
};

Uncontrolled editor

Use defaultValue when you want the editor to manage its own internal state. Editor will be pre-filled with initial value, then onChange would becomes a plain notification if provided. Don't combine defaultValue with value.

UncontrolledEditor.tsx

import { AutomationCodeEditor } from '@dynatrace/automation-action-components';

const defaultPayload = `{
  "threshold": 80
}`;

export const UncontrolledEditor = () => (
  <AutomationCodeEditor
    language="json"
    defaultValue={defaultPayload}
    placeholder="Enter the request payload"
    onChange={(value) => console.log('payload changed')}
  />
);