feat(code-editor): Update icon when editor is dirty

Currently, when the source code is changed through the source code
editor, the sync button is always green, being the only feedback that
it was changed the top banner.

This commit updates the icon from the green check to an orange sync icon
whenever the code editor is dirty. It also changes the tooltip text from
"Sync your code" to "Code is synced"

fixes: #2185

packages/kaoto-ui/src/components/SourceCodeEditor.tsx → packages/kaoto-ui/src/components/SourceCode/SourceCodeEditor.tsx

@@ -1,12 +1,13 @@
-import { StepErrorBoundary } from './StepErrorBoundary';
-import { fetchIntegrationJson, RequestService } from '@kaoto/api';
+import { StepErrorBoundary } from '../StepErrorBoundary';
+import { SyncButton } from './SyncButton';
+import { RequestService, fetchIntegrationJson } from '@kaoto/api';
 import { useFlowsStore, useIntegrationSourceStore, useSettingsStore } from '@kaoto/store';
 import { CodeEditorMode } from '@kaoto/types';
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
 import { Alert } from '@patternfly/react-core';
-import { CheckCircleIcon, EraserIcon, RedoIcon, UndoIcon } from '@patternfly/react-icons';
+import { EraserIcon, RedoIcon, UndoIcon } from '@patternfly/react-icons';
 import { setDiagnosticsOptions } from 'monaco-yaml';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { EditorDidMount } from 'react-monaco-editor';
 import { useDebouncedCallback } from 'use-debounce';
 import { shallow } from 'zustand/shallow';
@@ -39,6 +40,13 @@ export const SourceCodeEditor = (props: ISourceCodeEditor) => {
   );
 
   const setFlowsWrapper = useFlowsStore((state) => state.setFlowsWrapper, shallow);
+  const [isDirty, setIsDirty] = useState(false);
+  const [isUpdateButtonVisible, setIsUpdateButtonVisible] = useState(false);
+
+  useEffect(() => {
+    setIsDirty(sourceCode !== syncedSourceCode);
+    setIsUpdateButtonVisible(sourceCode !== '' && props.mode === CodeEditorMode.FREE_EDIT);
+  }, [props.mode, sourceCode, syncedSourceCode]);
 
   useEffect(() => {
     setDiagnosticsOptions({
@@ -155,14 +163,10 @@ export const SourceCodeEditor = (props: ISourceCodeEditor) => {
   );
 
   const UpdateButton = (
-    <CodeEditorControl
-      key="updateButton"
-      icon={<CheckCircleIcon color={'green'} />}
-      aria-label="Apply the code"
-      data-testid={'sourceCode--applyButton'}
+    <SyncButton
+      isDirty={isDirty}
+      isVisible={isUpdateButtonVisible}
       onClick={updateModelFromTheEditor}
-      tooltipProps={{ content: 'Sync your code', position: 'top' }}
-      isVisible={sourceCode !== '' && props.mode === CodeEditorMode.FREE_EDIT}
     />
   );
 

packages/kaoto-ui/src/components/SourceCode/SyncButton.css

@@ -0,0 +1,7 @@
+.icon-warning {
+  color: var(--pf-global--warning-color--100);
+}
+
+.icon-success {
+  color: var(--pf-global--success-color--100);
+}

packages/kaoto-ui/src/components/SourceCode/SyncButton.tsx

@@ -0,0 +1,39 @@
+import './SyncButton.css';
+import { CodeEditorControl } from '@patternfly/react-code-editor';
+import { CheckCircleIcon, SyncAltIcon } from '@patternfly/react-icons';
+import { FunctionComponent, useEffect, useState } from 'react';
+
+interface ISyncIcon {
+  isDirty: boolean;
+  isVisible: boolean;
+  onClick: () => void;
+}
+
+export const SyncButton: FunctionComponent<ISyncIcon> = (props) => {
+  const [tooltipProps, setTooltipProps] = useState({ content: 'Sync your code', position: 'top' });
+
+  useEffect(() => {
+    setTooltipProps({
+      content: props.isDirty ? 'Sync your code' : 'Code is synced',
+      position: 'top',
+    });
+  }, [props.isDirty]);
+
+  return (
+    <CodeEditorControl
+      key="updateButton"
+      icon={
+        props.isDirty ? (
+          <SyncAltIcon className="icon-warning" />
+        ) : (
+          <CheckCircleIcon className="icon-success" />
+        )
+      }
+      aria-label="Apply the code"
+      data-testid="sourceCode--applyButton"
+      onClick={props.onClick}
+      tooltipProps={tooltipProps}
+      isVisible={props.isVisible}
+    />
+  );
+};

packages/kaoto-ui/src/components/index.ts

@@ -13,7 +13,7 @@ export * from './KaotoToolbar';
 export * from './PlusButtonEdge';
 export * from './MiniCatalog';
 export * from './SettingsModal';
-export * from './SourceCodeEditor';
+export * from './SourceCode/SourceCodeEditor';
 export * from './StepErrorBoundary';
 export * from './ThemeSwitcher';
 export * from './VisualizationControls';