refactor(edge/stacks): migrate edit view to react [EE-2222] (#11648)

app/react/components/CodeEditor.tsx

@@ -3,7 +3,7 @@ import { StreamLanguage, LanguageSupport } from '@codemirror/language';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as highlightTags } from '@lezer/highlight';
 
@@ -13,6 +13,7 @@ import { CopyButton } from '@@/buttons/CopyButton';
 
 import styles from './CodeEditor.module.css';
 import { TextTip } from './Tip/TextTip';
+import { StackVersionSelector } from './StackVersionSelector';
 
 interface Props extends AutomationTestingProps {
   id: string;
@@ -24,6 +25,8 @@ interface Props extends AutomationTestingProps {
   onChange: (value: string) => void;
   value: string;
   height?: string;
+  versions?: number[];
+  onVersionChange?: (version: number) => void;
 }
 
 const theme = createTheme({
@@ -65,12 +68,16 @@ export function CodeEditor({
   placeholder,
   readonly,
   value,
+  versions,
+  onVersionChange,
   height = '500px',
   yaml: isYaml,
   dockerFile: isDockerFile,
   shell: isShell,
   'data-cy': dataCy,
 }: Props) {
+  const [isRollback, setIsRollback] = useState(false);
+
   const extensions = useMemo(() => {
     const extensions = [];
     if (isYaml) {
@@ -85,30 +92,56 @@ export function CodeEditor({
     return extensions;
   }, [isYaml, isDockerFile, isShell]);
 
+  function handleVersionChange(version: number) {
+    if (versions && versions.length > 1) {
+      if (version < versions[0]) {
+        setIsRollback(true);
+      } else {
+        setIsRollback(false);
+      }
+    }
+
+    onVersionChange?.(version);
+  }
+
   return (
     <>
-      <div className="mb-2 flex items-center justify-between">
-        <div className="flex flex-1 items-center">
-          {!!placeholder && <TextTip color="blue">{placeholder}</TextTip>}
-        </div>
+      <div className="mb-2 flex flex-col">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            {!!placeholder && <TextTip color="blue">{placeholder}</TextTip>}
+          </div>
 
-        <CopyButton
-          data-cy={`copy-code-button-${id}`}
-          fadeDelay={2500}
-          copyText={value}
-          color="link"
-          className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
-          indicatorPosition="left"
-        >
-          Copy to clipboard
-        </CopyButton>
+          <div className="flex-2 ml-auto mr-2 flex items-center gap-x-2">
+            <CopyButton
+              data-cy={`copy-code-button-${id}`}
+              fadeDelay={2500}
+              copyText={value}
+              color="link"
+              className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
+              indicatorPosition="left"
+            >
+              Copy to clipboard
+            </CopyButton>
+          </div>
+        </div>
+        {versions && (
+          <div className="mt-2 flex">
+            <div className="ml-auto mr-2">
+              <StackVersionSelector
+                versions={versions}
+                onChange={handleVersionChange}
+              />
+            </div>
+          </div>
+        )}
       </div>
       <CodeMirror
         className={styles.root}
         theme={theme}
         value={value}
         onChange={onChange}
-        readOnly={readonly}
+        readOnly={readonly || isRollback}
         id={id}
         extensions={extensions}
         height={height}