Merge pull request #414 from lhein/308_undo_redo

adding Undo and Redo in Source editor #308

packages/ui-tests/cypress/support/cypress.d.ts

@@ -40,7 +40,6 @@ declare global {
       editorDeleteLine(line: number, repeatCount: number): Chainable<JQuery<Element>>;
       checkCodeSpanLine(spanText: string, linesCount: number | undefined): Chainable<JQuery<Element>>;
       checkCodeSpanLine(spanText: string): Chainable<JQuery<Element>>;
-      syncUpCodeChanges(): Chainable<JQuery<Element>>;
     }
   }
 }

packages/ui-tests/cypress/support/next-commands/sourceCode.ts

@@ -13,11 +13,6 @@ Cypress.Commands.add('editorAddText', (line, text) => {
 Cypress.Commands.add('uploadFixture', (fixture) => {
   cy.openSourceCode();
   cy.get('.pf-v5-c-code-editor__main > input').attachFile(fixture);
-  cy.syncUpCodeChanges();
-});
-
-Cypress.Commands.add('syncUpCodeChanges', () => {
-  cy.get('[data-testid="sourceCode--applyButton"]').click();
 });
 
 Cypress.Commands.add('editorDeleteLine', (line, repeatCount) => {

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

@@ -3,10 +3,11 @@ import { setDiagnosticsOptions } from 'monaco-yaml';
 import { FunctionComponent, Ref, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { EditorDidMount } from 'react-monaco-editor';
 import './SourceCode.scss';
-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 +57,21 @@ export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
     quickSuggestions: { other: true, strings: true, comments: true },
   });
 
+  const undoAction = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (editorRef.current?.getModel() as any)?.undo();
+  };
+
+  const redoAction = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (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} />,
+    ];
   }, []);
 
   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}
+    />
+  );
+};