adding Undo and Redo in Source editor #308

packages/ui/src/components/SourceCode/RedoButton.tsx

@@ -0,0 +1,22 @@
+import { CodeEditorControl } from '@patternfly/react-code-editor';
+import { RedoIcon } from '@patternfly/react-icons';
+import { FunctionComponent } from 'react';
+
+interface IRedoIcon {
+  isVisible: boolean;
+  onClick: () => void;
+}
+
+export const RedoButton: FunctionComponent<IRedoIcon> = (props) => {
+  return (
+    <CodeEditorControl
+      key="redoButton"
+      icon={<RedoIcon className="icon-redo" />}
+      aria-label="Redo change"
+      data-testid="sourceCode--redoButton"
+      onClick={props.onClick}
+      tooltipProps={{content: 'Redo change', position: 'top'}}
+      isVisible={true}
+    />
+  );
+};

packages/ui/src/components/SourceCode/SourceCode.tsx

@@ -7,6 +7,8 @@ import { SyncButton } from './SyncButton';
 import './workers/enable-workers';
 import { sourceSchemaConfig, SourceSchemaType } from '../../models/camel';
 import { EntitiesContext } from '../../providers/entities.provider';
+import { UndoButton } from './UndoButton';
+import { RedoButton } from './RedoButton';
 
 interface SourceCodeProps {
   code: string;
@@ -56,8 +58,20 @@ export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
     quickSuggestions: { other: true, strings: true, comments: true },
   });
 
+  const undoAction = () => {
+    (editorRef.current?.getModel() as any)?.undo();
+  }
+
+  const redoAction = () => {
+    (editorRef.current?.getModel() as any)?.redo();
+  }
+
   const customControls = useMemo(() => {
-    return [<SyncButton key="sync-button" isDirty={false} isVisible onClick={() => undefined} />];
+    return [
+      <UndoButton key="undo-button" isVisible onClick={() => undoAction} />,
+      <RedoButton key="redo-button" isVisible onClick={() => redoAction} />,
+      <SyncButton key="sync-button" isDirty={false} isVisible onClick={() => undefined} />,
+    ];
   }, []);
 
   return (

packages/ui/src/components/SourceCode/UndoButton.tsx

@@ -0,0 +1,22 @@
+import { CodeEditorControl } from '@patternfly/react-code-editor';
+import { UndoIcon } from '@patternfly/react-icons';
+import { FunctionComponent } from 'react';
+
+interface IUndoIcon {
+  isVisible: boolean;
+  onClick: () => void;
+}
+
+export const UndoButton: FunctionComponent<IUndoIcon> = (props) => {
+  return (
+    <CodeEditorControl
+      key="undoButton"
+      icon={<UndoIcon className="icon-undo" />}
+      aria-label="Undo change"
+      data-testid="sourceCode--undoButton"
+      onClick={props.onClick}
+      tooltipProps={{content: 'Undo change', position: 'top'}}
+      isVisible={true}
+    />
+  );
+};