From 345f1a0f714accdb285c8b55103953790e8a8f21 Mon Sep 17 00:00:00 2001
From: RemiBonnet <bonnet.rem@gmail.com>
Date: Thu, 9 Apr 2026 15:43:45 +0200
Subject: [PATCH 1/5] feat(variable-modal): implement variable value editor
 modal and associated tests

---
 .../create-update-variable-modal.spec.tsx     | 110 ++++++++++++
 .../create-update-variable-modal.tsx          |  87 +++++++---
 .../variable-value-editor-modal.spec.tsx      | 130 +++++++++++++++
 .../variable-value-editor-modal.tsx           | 157 ++++++++++++++++++
 4 files changed, 459 insertions(+), 25 deletions(-)
 create mode 100644 libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
 create mode 100644 libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
 create mode 100644 libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx

diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
new file mode 100644
index 00000000000..8a928feb39d
--- /dev/null
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
@@ -0,0 +1,110 @@
+import { type VariableResponse } from 'qovery-typescript-axios'
+import { type ReactNode } from 'react'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { CreateUpdateVariableModal } from './create-update-variable-modal'
+
+jest.mock('@qovery/shared/ui', () => {
+  const actual = jest.requireActual('@qovery/shared/ui')
+
+  return {
+    ...actual,
+    useModal: () => ({
+      enableAlertClickOutside: jest.fn(),
+    }),
+  }
+})
+
+jest.mock('../dropdown-variable/dropdown-variable', () => ({
+  __esModule: true,
+  default: ({ children }: { children: ReactNode }) => children,
+}))
+
+jest.mock('./variable-value-editor-modal/variable-value-editor-modal', () => ({
+  VariableValueEditorModal: ({ open }: { open: boolean }) =>
+    open ? <div data-testid="mock-value-editor-modal" /> : null,
+  getValueEditorLanguage: jest.fn(() => 'plaintext'),
+  isVariableValueEditorModalScope: jest.fn((scope: string | undefined) =>
+    ['APPLICATION', 'CONTAINER', 'JOB', 'HELM', 'TERRAFORM'].includes(scope ?? '')
+  ),
+}))
+
+jest.mock('../hooks/use-create-variable/use-create-variable', () => ({
+  useCreateVariable: () => ({
+    mutateAsync: jest.fn(),
+  }),
+}))
+
+jest.mock('../hooks/use-create-variable-alias/use-create-variable-alias', () => ({
+  useCreateVariableAlias: () => ({
+    mutateAsync: jest.fn(),
+  }),
+}))
+
+jest.mock('../hooks/use-create-variable-override/use-create-variable-override', () => ({
+  useCreateVariableOverride: () => ({
+    mutateAsync: jest.fn(),
+  }),
+}))
+
+jest.mock('../hooks/use-edit-variable/use-edit-variable', () => ({
+  useEditVariable: () => ({
+    mutateAsync: jest.fn(),
+  }),
+}))
+
+const closeModal = jest.fn()
+
+const baseProps = {
+  closeModal,
+  scope: 'APPLICATION' as const,
+  projectId: 'project-id',
+  environmentId: 'environment-id',
+  serviceId: 'service-id',
+}
+
+const baseVariable = {
+  id: 'variable-id',
+  created_at: '2024-04-10T09:56:19.908145Z',
+  updated_at: '2024-04-10T09:56:19.908145Z',
+  key: 'MY_VARIABLE',
+  value: 'initial value',
+  mount_path: null,
+  scope: 'APPLICATION',
+  overridden_variable: null,
+  aliased_variable: null,
+  variable_type: 'VALUE',
+  variable_kind: 'Public',
+  service_id: 'service-id',
+  service_name: 'service-name',
+  service_type: 'APPLICATION',
+  owned_by: 'QOVERY',
+  is_secret: false,
+} as VariableResponse
+
+describe('CreateUpdateVariableModal', () => {
+  beforeEach(() => {
+    closeModal.mockReset()
+  })
+
+  it('should render the open editor button when the value field is available', () => {
+    renderWithProviders(<CreateUpdateVariableModal {...baseProps} mode="CREATE" type="VALUE" />)
+
+    expect(screen.getByRole('button', { name: /open editor/i })).toBeInTheDocument()
+  })
+
+  it('should not render the open editor button for aliases', () => {
+    renderWithProviders(<CreateUpdateVariableModal {...baseProps} mode="CREATE" type="ALIAS" variable={baseVariable} />)
+
+    expect(screen.queryByRole('button', { name: /open editor/i })).not.toBeInTheDocument()
+  })
+
+  it('should open the fullscreen editor modal when clicking the button', async () => {
+    const { userEvent } = renderWithProviders(
+      <CreateUpdateVariableModal {...baseProps} mode="UPDATE" type="VALUE" variable={baseVariable} />
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: /open editor/i }))
+
+    expect(screen.getByTestId('mock-value-editor-modal')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
index 5c81bcdc071..90b5aa12be7 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
@@ -25,6 +25,11 @@ import { useCreateVariableAlias } from '../hooks/use-create-variable-alias/use-c
 import { useCreateVariableOverride } from '../hooks/use-create-variable-override/use-create-variable-override'
 import { useCreateVariable } from '../hooks/use-create-variable/use-create-variable'
 import { useEditVariable } from '../hooks/use-edit-variable/use-edit-variable'
+import {
+  VariableValueEditorModal,
+  getValueEditorLanguage,
+  isVariableValueEditorModalScope,
+} from './variable-value-editor-modal/variable-value-editor-modal'
 
 type Scope = Exclude<keyof typeof APIVariableScopeEnum, 'BUILT_IN'>
 
@@ -58,6 +63,7 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
   const _isFile = (variable && environmentVariableFile(variable)) || (isFile ?? false)
   const { enableAlertClickOutside } = useModal()
   const [loading, setLoading] = useState(false)
+  const [isValueEditorOpen, setIsValueEditorOpen] = useState(false)
 
   const { mutateAsync: createVariable } = useCreateVariable()
   const { mutateAsync: createVariableAlias } = useCreateVariableAlias()
@@ -128,6 +134,11 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
 
   methods.watch(() => enableAlertClickOutside(methods.formState.isDirty))
   const watchScope = methods.watch('scope')
+  const watchMountPath = methods.watch('mountPath')
+  const valueEditorLanguage = getValueEditorLanguage({ isFile: _isFile, mountPath: watchMountPath })
+  const valueEditorServiceId =
+    'serviceId' in props && isVariableValueEditorModalScope(watchScope) ? props.serviceId : undefined
+  const valueEditorScope = isVariableValueEditorModalScope(watchScope) ? watchScope : undefined
 
   const _onSubmit = methods.handleSubmit(async (data) => {
     const cloneData = { ...data }
@@ -375,33 +386,59 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
             name="value"
             control={methods.control}
             render={({ field: { name, onChange, value }, fieldState: { error } }) => (
-              <div className="relative">
-                <InputTextArea
-                  ref={textareaRef}
-                  className="mb-3"
-                  name={name}
-                  onChange={onChange}
-                  value={value}
-                  label="Value"
-                  error={error?.message}
-                />
-                {'environmentId' in props && (
-                  <DropdownVariable
-                    environmentId={props.environmentId}
-                    onChange={(variableKey) => handleInsertVariable({ variableKey, value: value || '', onChange })}
+              <>
+                <div className="mb-2 flex justify-end">
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    className="gap-1.5"
+                    onClick={() => setIsValueEditorOpen(true)}
                   >
-                    <Button
-                      size="md"
-                      type="button"
-                      color="neutral"
-                      variant="surface"
-                      className="absolute bottom-1.5 right-1.5 w-8 justify-center"
+                    <Icon iconName="arrows-maximize" iconStyle="regular" className="text-xs" />
+                    Open editor
+                  </Button>
+                </div>
+                <div className="relative">
+                  <InputTextArea
+                    ref={textareaRef}
+                    className="mb-3"
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                    label="Value"
+                    error={error?.message}
+                  />
+                  {'environmentId' in props && (
+                    <DropdownVariable
+                      environmentId={props.environmentId}
+                      onChange={(variableKey) => handleInsertVariable({ variableKey, value: value || '', onChange })}
                     >
-                      <Icon className="text-sm" iconName="wand-magic-sparkles" />
-                    </Button>
-                  </DropdownVariable>
-                )}
-              </div>
+                      <Button
+                        size="md"
+                        type="button"
+                        color="neutral"
+                        variant="surface"
+                        className="absolute bottom-1.5 right-1.5 w-8 justify-center"
+                      >
+                        <Icon className="text-sm" iconName="wand-magic-sparkles" />
+                      </Button>
+                    </DropdownVariable>
+                  )}
+                </div>
+                <VariableValueEditorModal
+                  open={isValueEditorOpen}
+                  onOpenChange={setIsValueEditorOpen}
+                  value={value}
+                  onSave={onChange}
+                  title="Value editor"
+                  description="Edit the value in a larger editor."
+                  language={valueEditorLanguage}
+                  environmentId={'environmentId' in props ? props.environmentId : undefined}
+                  serviceId={valueEditorServiceId}
+                  scope={valueEditorScope}
+                />
+              </>
             )}
           />
         )}
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
new file mode 100644
index 00000000000..829bd60afb3
--- /dev/null
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
@@ -0,0 +1,130 @@
+import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
+import { VariableValueEditorModal, getValueEditorLanguage } from './variable-value-editor-modal'
+
+jest.mock('@qovery/shared/ui', () => {
+  const actual = jest.requireActual('@qovery/shared/ui')
+
+  return {
+    ...actual,
+    CodeEditor: ({ value, onChange }: { value?: string | null; onChange?: (value: string) => void }) => (
+      <textarea
+        data-testid="mock-code-editor"
+        value={value ?? ''}
+        onChange={(event) => onChange?.(event.target.value)}
+      />
+    ),
+  }
+})
+
+jest.mock('../../code-editor-variable/code-editor-variable', () => ({
+  CodeEditorVariable: ({ value, onChange }: { value?: string | null; onChange: (value: string) => void }) => (
+    <textarea
+      data-testid="mock-code-editor-variable"
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+}))
+
+describe('VariableValueEditorModal', () => {
+  it('should save the edited value and close the modal', async () => {
+    const onSave = jest.fn()
+    const onOpenChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <VariableValueEditorModal
+        open={true}
+        onOpenChange={onOpenChange}
+        onSave={onSave}
+        value="initial value"
+        title="Value editor"
+        description="Edit the value in a larger editor."
+        language="plaintext"
+        environmentId="environment-id"
+      />
+    )
+
+    await userEvent.clear(screen.getByTestId('mock-code-editor-variable'))
+    await userEvent.type(screen.getByTestId('mock-code-editor-variable'), 'updated value')
+
+    const fullscreenEditor = screen.getByTestId('value-full-screen-editor')
+    await userEvent.click(within(fullscreenEditor).getByRole('button', { name: /save/i }))
+
+    expect(onSave).toHaveBeenCalledWith('updated value')
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('should close without saving when cancelling', async () => {
+    const onSave = jest.fn()
+    const onOpenChange = jest.fn()
+    const { userEvent } = renderWithProviders(
+      <VariableValueEditorModal
+        open={true}
+        onOpenChange={onOpenChange}
+        onSave={onSave}
+        value="initial value"
+        title="Value editor"
+        description="Edit the value in a larger editor."
+        language="plaintext"
+        environmentId="environment-id"
+      />
+    )
+
+    const fullscreenEditor = screen.getByTestId('value-full-screen-editor')
+    await userEvent.click(within(fullscreenEditor).getByRole('button', { name: /^cancel$/i }))
+
+    expect(onSave).not.toHaveBeenCalled()
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('should render the variable code editor when environment context is provided', () => {
+    renderWithProviders(
+      <VariableValueEditorModal
+        open={true}
+        onOpenChange={jest.fn()}
+        onSave={jest.fn()}
+        value="initial value"
+        title="Value editor"
+        description="Edit the value in a larger editor."
+        language="yaml"
+        environmentId="environment-id"
+        serviceId="service-id"
+        scope="APPLICATION"
+      />
+    )
+
+    expect(screen.getByTestId('mock-code-editor-variable')).toBeInTheDocument()
+  })
+
+  it('should render the plain code editor when no environment context is provided', () => {
+    renderWithProviders(
+      <VariableValueEditorModal
+        open={true}
+        onOpenChange={jest.fn()}
+        onSave={jest.fn()}
+        value="initial value"
+        title="Value editor"
+        description="Edit the value in a larger editor."
+        language="plaintext"
+      />
+    )
+
+    expect(screen.getByTestId('mock-code-editor')).toBeInTheDocument()
+  })
+})
+
+describe('getValueEditorLanguage', () => {
+  it('should return yaml for yaml files', () => {
+    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.yaml' })).toBe('yaml')
+    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.yml' })).toBe('yaml')
+  })
+
+  it('should return json for json files', () => {
+    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.json' })).toBe('json')
+  })
+
+  it('should return plaintext for non file values or unknown extensions', () => {
+    expect(getValueEditorLanguage({ isFile: false, mountPath: '/etc/config.yaml' })).toBe('plaintext')
+    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.txt' })).toBe('plaintext')
+    expect(getValueEditorLanguage({ isFile: true })).toBe('plaintext')
+  })
+})
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx
new file mode 100644
index 00000000000..07365f3be54
--- /dev/null
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx
@@ -0,0 +1,157 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import { type FormEventHandler, useEffect } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { type VariableScope } from '@qovery/domains/variables/data-access'
+import { Button, CodeEditor, Icon, ModalCrud } from '@qovery/shared/ui'
+import { CodeEditorVariable } from '../../code-editor-variable/code-editor-variable'
+
+export type VariableValueEditorModalScope = Extract<
+  VariableScope,
+  'APPLICATION' | 'CONTAINER' | 'JOB' | 'HELM' | 'TERRAFORM'
+>
+
+const VALUE_EDITOR_HEIGHT = 'calc(100vh - 238px)'
+
+export function isVariableValueEditorModalScope(
+  scope: VariableScope | undefined
+): scope is VariableValueEditorModalScope {
+  return ['APPLICATION', 'CONTAINER', 'JOB', 'HELM', 'TERRAFORM'].includes(scope ?? '')
+}
+
+export function getValueEditorLanguage({ isFile, mountPath }: { isFile: boolean; mountPath?: string }) {
+  if (!isFile || !mountPath) {
+    return 'plaintext'
+  }
+
+  const normalizedMountPath = mountPath.toLowerCase()
+
+  if (normalizedMountPath.endsWith('.yaml') || normalizedMountPath.endsWith('.yml')) {
+    return 'yaml'
+  }
+
+  if (normalizedMountPath.endsWith('.json')) {
+    return 'json'
+  }
+
+  return 'plaintext'
+}
+
+export interface VariableValueEditorModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  value?: string | null
+  onSave: (value: string) => void
+  title: string
+  description: string
+  language: string
+  environmentId?: string
+  serviceId?: string
+  scope?: VariableValueEditorModalScope
+}
+
+export function VariableValueEditorModal({
+  open,
+  onOpenChange,
+  value,
+  onSave,
+  title,
+  description,
+  language,
+  environmentId,
+  serviceId,
+  scope,
+}: VariableValueEditorModalProps) {
+  const methods = useForm<{ value: string }>({
+    mode: 'onChange',
+    defaultValues: {
+      value: value ?? '',
+    },
+  })
+
+  useEffect(() => {
+    if (open) {
+      methods.reset({ value: value ?? '' })
+    }
+  }, [methods, open, value])
+
+  const handleClose = () => onOpenChange(false)
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.stopPropagation()
+
+    return methods.handleSubmit(({ value }) => {
+      onSave(value)
+      handleClose()
+    })(event)
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-background-overlay" />
+        <Dialog.Content
+          data-testid="value-full-screen-editor"
+          className="fixed left-1/2 top-6 z-modal h-[calc(100vh-48px)] w-[calc(100vw-48px)] -translate-x-1/2 rounded-md border border-neutral bg-background shadow-[0_0_32px_rgba(0,0,0,0.08)]"
+          onPointerDownOutside={(event) => event.preventDefault()}
+          onInteractOutside={(event) => event.preventDefault()}
+        >
+          <Dialog.Title className="sr-only">{title}</Dialog.Title>
+          <Dialog.Description className="sr-only">{description}</Dialog.Description>
+          <div className="h-full overflow-auto">
+            <Button
+              type="button"
+              onClick={handleClose}
+              aria-label="Close fullscreen editor"
+              variant="plain"
+              size="md"
+              radius="full"
+              className="absolute right-4 top-4"
+              iconOnly
+            >
+              <Icon iconName="xmark" iconStyle="solid" />
+            </Button>
+            <FormProvider {...methods}>
+              <ModalCrud
+                title={title}
+                description={description}
+                onSubmit={handleSubmit}
+                onClose={handleClose}
+                submitLabel="Confirm"
+              >
+                <div className="overflow-hidden rounded-md border border-neutral">
+                  <Controller
+                    name="value"
+                    control={methods.control}
+                    render={({ field }) =>
+                      environmentId ? (
+                        <CodeEditorVariable
+                          environmentId={environmentId}
+                          serviceId={serviceId}
+                          scope={scope}
+                          width="100%"
+                          height={VALUE_EDITOR_HEIGHT}
+                          language={language}
+                          value={field.value}
+                          onChange={field.onChange}
+                        />
+                      ) : (
+                        <CodeEditor
+                          width="100%"
+                          height={VALUE_EDITOR_HEIGHT}
+                          language={language}
+                          value={field.value}
+                          onChange={field.onChange}
+                        />
+                      )
+                    }
+                  />
+                </div>
+              </ModalCrud>
+            </FormProvider>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export default VariableValueEditorModal

From f50165fe4aa6a5d4d9bc97c756a9cd938b8bab54 Mon Sep 17 00:00:00 2001
From: RemiBonnet <bonnet.rem@gmail.com>
Date: Thu, 9 Apr 2026 15:50:26 +0200
Subject: [PATCH 2/5] fix(input-text-area): update label class to prevent
 pointer events when disabled

---
 .../lib/components/inputs/input-text-area/input-text-area.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx b/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
index 85745ea7049..e292acac426 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
@@ -48,7 +48,7 @@ export const InputTextArea = forwardRef<HTMLTextAreaElement, InputTextAreaProps>
   const inputActions = hasFocus ? 'input--focused' : ''
   const isDisabled = props.disabled ? 'input--disabled !border-neutral' : ''
   const labelClassName = twMerge(
-    'input__label',
+    'input__label pointer-events-none',
     hasFocus ? 'text-xs' : 'translate-y-2 text-sm',
     isLabelTransitionDisabled && '!transition-none'
   )

From bb7994253639bc5b83038880c94e163cb0efe515 Mon Sep 17 00:00:00 2001
From: RemiBonnet <bonnet.rem@gmail.com>
Date: Thu, 9 Apr 2026 16:01:10 +0200
Subject: [PATCH 3/5] test(variable-value-editor-modal): enhance tests to
 ensure submit and cancel buttons are rendered

---
 .../variable-value-editor-modal.spec.tsx               | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
index 829bd60afb3..2f9f68197b0 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
@@ -43,11 +43,12 @@ describe('VariableValueEditorModal', () => {
       />
     )
 
+    await screen.findByTestId('submit-button')
     await userEvent.clear(screen.getByTestId('mock-code-editor-variable'))
     await userEvent.type(screen.getByTestId('mock-code-editor-variable'), 'updated value')
 
     const fullscreenEditor = screen.getByTestId('value-full-screen-editor')
-    await userEvent.click(within(fullscreenEditor).getByRole('button', { name: /save/i }))
+    await userEvent.click(within(fullscreenEditor).getByTestId('submit-button'))
 
     expect(onSave).toHaveBeenCalledWith('updated value')
     expect(onOpenChange).toHaveBeenCalledWith(false)
@@ -69,6 +70,7 @@ describe('VariableValueEditorModal', () => {
       />
     )
 
+    await screen.findByTestId('cancel-button')
     const fullscreenEditor = screen.getByTestId('value-full-screen-editor')
     await userEvent.click(within(fullscreenEditor).getByRole('button', { name: /^cancel$/i }))
 
@@ -76,7 +78,7 @@ describe('VariableValueEditorModal', () => {
     expect(onOpenChange).toHaveBeenCalledWith(false)
   })
 
-  it('should render the variable code editor when environment context is provided', () => {
+  it('should render the variable code editor when environment context is provided', async () => {
     renderWithProviders(
       <VariableValueEditorModal
         open={true}
@@ -92,10 +94,11 @@ describe('VariableValueEditorModal', () => {
       />
     )
 
+    await screen.findByTestId('submit-button')
     expect(screen.getByTestId('mock-code-editor-variable')).toBeInTheDocument()
   })
 
-  it('should render the plain code editor when no environment context is provided', () => {
+  it('should render the plain code editor when no environment context is provided', async () => {
     renderWithProviders(
       <VariableValueEditorModal
         open={true}
@@ -108,6 +111,7 @@ describe('VariableValueEditorModal', () => {
       />
     )
 
+    await screen.findByTestId('submit-button')
     expect(screen.getByTestId('mock-code-editor')).toBeInTheDocument()
   })
 })

From 5e19e67915fdff4ee883a2842c523ea645394104 Mon Sep 17 00:00:00 2001
From: RemiBonnet <bonnet.rem@gmail.com>
Date: Thu, 9 Apr 2026 16:10:57 +0200
Subject: [PATCH 4/5] refactor(variable-value-editor-modal): simplify value
 editor logic and remove unused functions

---
 .../create-update-variable-modal.spec.tsx     |  4 ---
 .../create-update-variable-modal.tsx          | 34 ++++++++++++++-----
 .../variable-value-editor-modal.spec.tsx      | 19 +----------
 .../variable-value-editor-modal.tsx           | 29 +---------------
 4 files changed, 28 insertions(+), 58 deletions(-)

diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
index 8a928feb39d..67f326ed9f1 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.spec.tsx
@@ -22,10 +22,6 @@ jest.mock('../dropdown-variable/dropdown-variable', () => ({
 jest.mock('./variable-value-editor-modal/variable-value-editor-modal', () => ({
   VariableValueEditorModal: ({ open }: { open: boolean }) =>
     open ? <div data-testid="mock-value-editor-modal" /> : null,
-  getValueEditorLanguage: jest.fn(() => 'plaintext'),
-  isVariableValueEditorModalScope: jest.fn((scope: string | undefined) =>
-    ['APPLICATION', 'CONTAINER', 'JOB', 'HELM', 'TERRAFORM'].includes(scope ?? '')
-  ),
 }))
 
 jest.mock('../hooks/use-create-variable/use-create-variable', () => ({
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
index 90b5aa12be7..e858ba98a0e 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
@@ -25,13 +25,32 @@ import { useCreateVariableAlias } from '../hooks/use-create-variable-alias/use-c
 import { useCreateVariableOverride } from '../hooks/use-create-variable-override/use-create-variable-override'
 import { useCreateVariable } from '../hooks/use-create-variable/use-create-variable'
 import { useEditVariable } from '../hooks/use-edit-variable/use-edit-variable'
-import {
-  VariableValueEditorModal,
-  getValueEditorLanguage,
-  isVariableValueEditorModalScope,
-} from './variable-value-editor-modal/variable-value-editor-modal'
+import { VariableValueEditorModal } from './variable-value-editor-modal/variable-value-editor-modal'
 
 type Scope = Exclude<keyof typeof APIVariableScopeEnum, 'BUILT_IN'>
+type ValueEditorScope = Extract<Scope, 'APPLICATION' | 'CONTAINER' | 'JOB' | 'HELM' | 'TERRAFORM'>
+
+function isValueEditorScope(scope: Scope | undefined): scope is ValueEditorScope {
+  return ['APPLICATION', 'CONTAINER', 'JOB', 'HELM', 'TERRAFORM'].includes(scope ?? '')
+}
+
+function getValueEditorLanguage({ isFile, mountPath }: { isFile: boolean; mountPath?: string }) {
+  if (!isFile || !mountPath) {
+    return 'plaintext'
+  }
+
+  const normalizedMountPath = mountPath.toLowerCase()
+
+  if (normalizedMountPath.endsWith('.yaml') || normalizedMountPath.endsWith('.yml')) {
+    return 'yaml'
+  }
+
+  if (normalizedMountPath.endsWith('.json')) {
+    return 'json'
+  }
+
+  return 'plaintext'
+}
 
 export type CreateUpdateVariableModalProps = {
   closeModal: () => void
@@ -136,9 +155,8 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
   const watchScope = methods.watch('scope')
   const watchMountPath = methods.watch('mountPath')
   const valueEditorLanguage = getValueEditorLanguage({ isFile: _isFile, mountPath: watchMountPath })
-  const valueEditorServiceId =
-    'serviceId' in props && isVariableValueEditorModalScope(watchScope) ? props.serviceId : undefined
-  const valueEditorScope = isVariableValueEditorModalScope(watchScope) ? watchScope : undefined
+  const valueEditorServiceId = 'serviceId' in props && isValueEditorScope(watchScope) ? props.serviceId : undefined
+  const valueEditorScope = isValueEditorScope(watchScope) ? watchScope : undefined
 
   const _onSubmit = methods.handleSubmit(async (data) => {
     const cloneData = { ...data }
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
index 2f9f68197b0..2e7bf425754 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.spec.tsx
@@ -1,5 +1,5 @@
 import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
-import { VariableValueEditorModal, getValueEditorLanguage } from './variable-value-editor-modal'
+import { VariableValueEditorModal } from './variable-value-editor-modal'
 
 jest.mock('@qovery/shared/ui', () => {
   const actual = jest.requireActual('@qovery/shared/ui')
@@ -115,20 +115,3 @@ describe('VariableValueEditorModal', () => {
     expect(screen.getByTestId('mock-code-editor')).toBeInTheDocument()
   })
 })
-
-describe('getValueEditorLanguage', () => {
-  it('should return yaml for yaml files', () => {
-    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.yaml' })).toBe('yaml')
-    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.yml' })).toBe('yaml')
-  })
-
-  it('should return json for json files', () => {
-    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.json' })).toBe('json')
-  })
-
-  it('should return plaintext for non file values or unknown extensions', () => {
-    expect(getValueEditorLanguage({ isFile: false, mountPath: '/etc/config.yaml' })).toBe('plaintext')
-    expect(getValueEditorLanguage({ isFile: true, mountPath: '/etc/config.txt' })).toBe('plaintext')
-    expect(getValueEditorLanguage({ isFile: true })).toBe('plaintext')
-  })
-})
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx
index 07365f3be54..07086827ae2 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/variable-value-editor-modal/variable-value-editor-modal.tsx
@@ -5,37 +5,10 @@ import { type VariableScope } from '@qovery/domains/variables/data-access'
 import { Button, CodeEditor, Icon, ModalCrud } from '@qovery/shared/ui'
 import { CodeEditorVariable } from '../../code-editor-variable/code-editor-variable'
 
-export type VariableValueEditorModalScope = Extract<
-  VariableScope,
-  'APPLICATION' | 'CONTAINER' | 'JOB' | 'HELM' | 'TERRAFORM'
->
+type VariableValueEditorModalScope = Extract<VariableScope, 'APPLICATION' | 'CONTAINER' | 'JOB' | 'HELM' | 'TERRAFORM'>
 
 const VALUE_EDITOR_HEIGHT = 'calc(100vh - 238px)'
 
-export function isVariableValueEditorModalScope(
-  scope: VariableScope | undefined
-): scope is VariableValueEditorModalScope {
-  return ['APPLICATION', 'CONTAINER', 'JOB', 'HELM', 'TERRAFORM'].includes(scope ?? '')
-}
-
-export function getValueEditorLanguage({ isFile, mountPath }: { isFile: boolean; mountPath?: string }) {
-  if (!isFile || !mountPath) {
-    return 'plaintext'
-  }
-
-  const normalizedMountPath = mountPath.toLowerCase()
-
-  if (normalizedMountPath.endsWith('.yaml') || normalizedMountPath.endsWith('.yml')) {
-    return 'yaml'
-  }
-
-  if (normalizedMountPath.endsWith('.json')) {
-    return 'json'
-  }
-
-  return 'plaintext'
-}
-
 export interface VariableValueEditorModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void

From 797d999a408193b52b58c0f2399ec05d510531c4 Mon Sep 17 00:00:00 2001
From: RemiBonnet <bonnet.rem@gmail.com>
Date: Thu, 9 Apr 2026 16:25:06 +0200
Subject: [PATCH 5/5] fix(general-setting): update snapshot to prevent pointer
 events on disabled label

---
 .../general-setting/__snapshots__/general-setting.spec.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap b/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
index ff224d7eef5..0b404cdb310 100644
--- a/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
@@ -52,7 +52,7 @@ exports[`GeneralSetting should match snapshot 1`] = `
         class="input pb-0 pr-2"
       >
         <label
-          class="input__label translate-y-2 text-sm"
+          class="input__label pointer-events-none translate-y-2 text-sm"
           for="Description (optional)"
         >
           Description (optional)