From 83964e8b428872be351d10c8bf192de2d7004c74 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 26 Mar 2026 15:06:35 +0100
Subject: [PATCH 01/10] feat(new-nav): add Terraform variables settings page

---
 .../settings/terraform-variables.tsx          |  48 +-
 .../service-settings/feature/src/index.ts     |   2 +
 .../dockerfile-fragment-inline-modal.spec.tsx |   0
 .../dockerfile-fragment-inline-modal.tsx      |   0
 ...file-fragment-inline-setting.spec.tsx.snap | 109 ++++
 ...ockerfile-fragment-inline-setting.spec.tsx |  68 +++
 .../dockerfile-fragment-inline-setting.tsx    |  32 ++
 .../terraform-tfvars-popover.spec.tsx         |   0
 .../terraform-tfvars-popover.tsx              |   0
 .../terraform-variables-context.tsx           | 513 ++++++++++++++++++
 .../terraform-variables-settings.tsx          |   0
 .../terraform-variables-table.spec.tsx        |   0
 .../terraform-variables-table.tsx             |   0
 .../terraform-variables-utils.spec.ts         |   0
 .../terraform-variables-utils.ts              |   0
 15 files changed, 770 insertions(+), 2 deletions(-)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx (100%)
 create mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
 create mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
 create mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx (100%)
 create mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts (100%)
 rename libs/domains/{service-terraform => service-settings}/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts (100%)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 99b85e0ec34..9f7765ced05 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -1,4 +1,11 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { match } from 'ts-pattern'
+import { TerraformVariablesProvider, TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
+import { type TerraformGeneralData, useService } from '@qovery/domains/services/feature'
+import { SettingsHeading } from '@qovery/shared/console-shared'
+import { LoaderSpinner, Section } from '@qovery/shared/ui'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables'
@@ -6,6 +13,43 @@ export const Route = createFileRoute(
   component: RouteComponent,
 })
 
+const TerraformVariablesLoader = () => (
+  <div className="flex min-h-page-container items-center justify-center">
+    <LoaderSpinner />
+  </div>
+)
+
+const TerraformVariablesWrapper = () => {
+  const { serviceId } = useParams({ strict: false })
+  const { data: service } = useService({ serviceId })
+  const methods = useForm<TerraformGeneralData>({
+    mode: 'onChange',
+    defaultValues: match(service)
+      .with({ serviceType: 'TERRAFORM' }, (s) => s)
+      .otherwise(() => ({})),
+  })
+
+  return (
+    <Section className="px-8 pb-8 pt-6">
+      <SettingsHeading
+        title="Terraform variables"
+        description="Select .tfvars files and configure variable values for your Terraform deployment"
+      />
+      <div className="max-w-content-with-navigation-left">
+        <FormProvider {...methods}>
+          <TerraformVariablesProvider>
+            <TerraformVariablesTable />
+          </TerraformVariablesProvider>
+        </FormProvider>
+      </div>
+    </Section>
+  )
+}
+
 function RouteComponent() {
-  return <div className="px-10 py-7">Terraform variables</div>
+  return (
+    <Suspense fallback={<TerraformVariablesLoader />}>
+      <TerraformVariablesWrapper />
+    </Suspense>
+  )
 }
diff --git a/libs/domains/service-settings/feature/src/index.ts b/libs/domains/service-settings/feature/src/index.ts
index 9bef3cb849a..69fd42887c1 100644
--- a/libs/domains/service-settings/feature/src/index.ts
+++ b/libs/domains/service-settings/feature/src/index.ts
@@ -9,3 +9,5 @@ export * from './lib/service-domain-settings/service-domain-settings/service-dom
 export * from './lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings'
 export * from './lib/terraform-configuration-settings/terraform-configuration-settings'
 export * from './lib/terraform-arguments-settings/terraform-arguments-settings'
+export * from './lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table'
+export * from './lib/terraform-variables-settings/terraform-variables-context'
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
new file mode 100644
index 00000000000..59731808ac1
--- /dev/null
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`DockerfileFragmentInlineSetting should match snapshot with content 1`] = `
+<body
+  style=""
+>
+  <script
+    src="https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs/loader.js"
+  />
+  <div>
+    <div
+      class="mb-5 rounded border border-neutral bg-surface-neutral-subtle w-full"
+      data-testid="block-content"
+    >
+      <div
+        class="flex h-9 items-center justify-between border-b border-neutral px-4"
+      >
+        <h2
+          class="text-ssm font-medium text-neutral"
+        >
+          Commands
+        </h2>
+        <button
+          aria-label="Edit Commands"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-pen "
+          />
+        </button>
+      </div>
+      <div
+        class="p-0"
+      >
+        <section
+          style="display: flex; position: relative; text-align: initial; width: 100%; height: 200px;"
+        >
+          <div
+            style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+          >
+            <div
+              class="aspect-square border-2  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong w-4 "
+              data-testid="spinner"
+            />
+          </div>
+          <div
+            style="width: 100%; display: none;"
+          />
+        </section>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`DockerfileFragmentInlineSetting should match snapshot without content 1`] = `
+<body
+  style=""
+>
+  <script
+    src="https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs/loader.js"
+  />
+  <div>
+    <div
+      class="mb-5 rounded border border-neutral bg-surface-neutral-subtle w-full"
+      data-testid="block-content"
+    >
+      <div
+        class="flex h-9 items-center justify-between border-b border-neutral px-4"
+      >
+        <h2
+          class="text-ssm font-medium text-neutral"
+        >
+          Commands
+        </h2>
+      </div>
+      <div
+        class="p-0"
+      >
+        <div
+          class="my-4 px-10 py-5 text-center"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-wave-pulse text-neutral-subtle"
+          />
+          <p
+            class="mb-3 mt-1 text-xs font-medium text-neutral-subtle"
+          >
+            No commands defined.
+          </p>
+          <button
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-plus mr-2"
+            />
+            Add commands
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
new file mode 100644
index 00000000000..2de7e365b12
--- /dev/null
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
@@ -0,0 +1,68 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import {
+  DockerfileFragmentInlineSetting,
+  type DockerfileFragmentInlineSettingProps,
+} from './dockerfile-fragment-inline-setting'
+
+jest.mock('@tanstack/react-router', () => {
+  return {
+    ...jest.requireActual('@tanstack/react-router'),
+    useParams: () => ({
+      organizationId: 'org',
+      projectId: 'proj',
+      environmentId: 'env',
+      serviceId: 'app',
+    }),
+    Link: ({ children }: { children: React.ReactNode }) => <a href="/">{children}</a>,
+  }
+})
+
+const props: DockerfileFragmentInlineSettingProps = {
+  onSubmit: jest.fn(),
+  content: 'RUN apt-get update',
+}
+
+describe('DockerfileFragmentInlineSetting', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should display the title', () => {
+    renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
+    expect(screen.getByText('Commands')).toBeInTheDocument()
+  })
+
+  it('should show empty state when no content', () => {
+    renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
+    expect(screen.getByText('No commands defined.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /add commands/i })).toBeInTheDocument()
+  })
+
+  it('should show edit button when content exists', () => {
+    renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
+    expect(screen.queryByText('No commands defined.')).not.toBeInTheDocument()
+  })
+
+  it('should open modal when add button is clicked', async () => {
+    const { userEvent } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
+
+    await userEvent.click(screen.getByRole('button', { name: /add commands/i }))
+
+    expect(screen.getByText('Custom build commands')).toBeInTheDocument()
+  })
+
+  it('should match snapshot with content', () => {
+    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
+    expect(baseElement).toMatchSnapshot()
+  })
+
+  it('should match snapshot without content', () => {
+    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
+    expect(baseElement).toMatchSnapshot()
+  })
+})
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
new file mode 100644
index 00000000000..9128ab521d1
--- /dev/null
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
@@ -0,0 +1,32 @@
+import { CodeEditorInlineSetting, useModal } from '@qovery/shared/ui'
+import DockerfileFragmentInlineModal from '../dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal'
+
+export interface DockerfileFragmentInlineSettingProps {
+  onSubmit: (value?: string) => void
+  content?: string
+}
+
+export function DockerfileFragmentInlineSetting({ onSubmit, content }: DockerfileFragmentInlineSettingProps) {
+  const { openModal, closeModal } = useModal()
+
+  const openModalDockerfileFragment = () => {
+    openModal({
+      content: <DockerfileFragmentInlineModal content={content} onClose={closeModal} onSubmit={onSubmit} />,
+      options: {
+        fullScreen: true,
+      },
+    })
+  }
+
+  return (
+    <CodeEditorInlineSetting
+      title="Commands"
+      emptyStateText="No commands defined."
+      addButtonLabel="Add commands"
+      language="dockerfile"
+      height="200px"
+      content={content}
+      onOpenModal={openModalDockerfileFragment}
+    />
+  )
+}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
new file mode 100644
index 00000000000..1579ea3188d
--- /dev/null
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
@@ -0,0 +1,513 @@
+import { type AxiosError } from 'axios'
+import {
+  GitProviderEnum,
+  type TerraformVarKeyValue,
+  type TerraformVariableDefinition,
+  type TfVarsFileResponse,
+} from 'qovery-typescript-axios'
+import {
+  type PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useFormContext } from 'react-hook-form'
+import { useParams } from 'react-router-dom'
+import { match } from 'ts-pattern'
+import { v4 as uuidv4 } from 'uuid'
+import {
+  useListTfVarsFilesFromGitRepo,
+  useParseTerraformVariablesFromGitRepo,
+} from '@qovery/domains/organizations/feature'
+import { type TerraformGeneralData, useService } from '@qovery/domains/services/feature'
+import { buildMetadataByKey, isCustomVariable, isVariableChanged } from './terraform-variables-utils'
+
+export type UIVariable = {
+  id: string
+  key: string
+  value: string
+  source: string
+  // current secret flag shown in UI
+  secret: boolean
+  // originals (used to detect changes)
+  originalKey?: string
+  originalValue?: string
+  originalSecret?: boolean
+  // metadata
+  isNew?: boolean // created by user in UI (always treated as changed)
+  description?: string
+  // false = variable is required
+  nullable?: boolean
+}
+
+export type TfVarsFile = TfVarsFileResponse & {
+  enabled: boolean
+}
+
+export type TerraformVariablesContextType = {
+  vars: UIVariable[]
+  addVariable: (key?: string, value?: string) => void
+  updateKey: (id: string, key: string) => void
+  updateValue: (id: string, value: string) => void
+  toggleSecret: (id: string) => void
+  revertValue: (id: string) => void
+  removeVariable: (id: string) => void
+  serializeForApi: () => { key?: string; value?: string; secret?: boolean }[]
+
+  // tfVars-related
+  fetchTfVarsFiles: () => void
+  tfVarFiles: TfVarsFile[]
+  setTfVarFiles: (tfVarFiles: TfVarsFile[]) => void
+  newPath: string
+  setNewPath: (newPath: string) => void
+  submitNewPath: () => void
+  areTfVarsFilesLoading: boolean
+  newPathErrorMessage: string | undefined
+  setNewPathErrorMessage: (newPathErrorMessage: string | undefined) => void
+  setFileListOrder: (fileListOrder: string[]) => void
+
+  // Table-management-related
+  selectedRows: string[]
+  setSelectedRows: (selectedRows: string[]) => void
+  deleteSelectedRows: () => void
+  isRowSelected: (id: string) => boolean
+  selectRow: (id: string) => void
+  hoveredRow: string | undefined
+  setHoveredRow: (hoveredRow: string | undefined) => void
+  errors: Map<string, { message: string; field: 'key' | 'value' }>
+}
+
+export const CUSTOM_SOURCE = 'Custom'
+export const SECRET_UNCHANGED_VALUE = 'SECRET_VALUE_UNCHANGED'
+
+export const TerraformVariablesContext = createContext<TerraformVariablesContextType | undefined>(undefined)
+
+export const TerraformVariablesProvider = ({ children }: PropsWithChildren) => {
+  // Initial data fetching...
+  const { getValues } = useFormContext<TerraformGeneralData>()
+  const { organizationId = '', applicationId = '' } = useParams()
+  const { data: serviceResponse } = useService({ serviceId: applicationId })
+  const service = match(serviceResponse)
+    .with({ serviceType: 'TERRAFORM' }, (s) => s)
+    .otherwise(() => null)
+
+  // Memoize the repository config to prevent unnecessary re-renders and refetches.
+  // If we're in the context of the settings page, we use the service data to get the repository config.
+  // Otherwise, we use the form values of the service creation flow.
+  const formValues = getValues()
+  const repositoryConfig = useMemo(() => {
+    return {
+      url:
+        service?.terraform_files_source?.git?.git_repository?.url ??
+        formValues.git_repository?.url ??
+        formValues.repository ??
+        '',
+      branch: service?.terraform_files_source?.git?.git_repository?.branch ?? formValues.branch ?? '',
+      root_path: service?.terraform_files_source?.git?.git_repository?.root_path ?? formValues.root_path ?? '',
+      git_token_id: service?.terraform_files_source?.git?.git_repository?.git_token_id ?? formValues.git_token_id ?? '',
+      provider:
+        service?.terraform_files_source?.git?.git_repository?.provider ?? formValues.provider ?? GitProviderEnum.GITHUB,
+    }
+  }, [formValues, service])
+
+  const { data: variablesResponse } = useParseTerraformVariablesFromGitRepo({
+    organizationId,
+    repository: repositoryConfig,
+    enabled: Boolean(repositoryConfig.branch),
+  })
+
+  const [tfVarFilesResponse, setTfVarFilesResponse] = useState<TfVarsFileResponse[]>([])
+  const [newPath, setNewPath] = useState<string>('')
+  const [newPathErrorMessage, setNewPathErrorMessage] = useState<string | undefined>(undefined)
+
+  const { mutateAsync: fetchTfVars, status: tfVarsFilesStatus } = useListTfVarsFilesFromGitRepo()
+
+  const fetchTfVarsFiles = useCallback(async () => {
+    try {
+      setNewPathErrorMessage(undefined)
+      await fetchTfVars(
+        {
+          organizationId,
+          repository: repositoryConfig,
+          mode: {
+            type: 'AutoDiscover',
+          },
+        },
+        {
+          onSuccess: (data) => {
+            if (data && newPath.length === 0) {
+              // Should follow the order of the service's tf_var_file_paths
+              const servicePaths = [...(service?.terraform_variables_source.tf_var_file_paths ?? [])].reverse()
+              data.sort((a, b) => {
+                const aIndex = servicePaths.indexOf(a.source) ?? 0
+                const bIndex = servicePaths.indexOf(b.source) ?? 0
+                return aIndex - bIndex
+              })
+              setTfVarFilesResponse(data)
+            }
+          },
+        }
+      )
+    } catch (error) {
+      console.error(error)
+    }
+  }, [fetchTfVars, organizationId, repositoryConfig, newPath, service?.terraform_variables_source.tf_var_file_paths])
+
+  const areTfVarsFilesLoading = useMemo(() => tfVarsFilesStatus === 'loading', [tfVarsFilesStatus])
+
+  const submitNewPath = useCallback(async () => {
+    try {
+      if (!newPath.endsWith('.tfvars')) {
+        setNewPathErrorMessage('The path must end with .tfvars')
+        return
+      }
+
+      await fetchTfVars(
+        {
+          organizationId,
+          repository: repositoryConfig,
+          mode: {
+            type: 'SpecificPaths',
+            paths: [newPath],
+          },
+        },
+        {
+          onSuccess: (data) => {
+            if (data) {
+              setTfVarFilesResponse((prevTfVarFilesResponse) => [...prevTfVarFilesResponse, ...data])
+              setNewPath('')
+              setNewPathErrorMessage(undefined)
+            }
+          },
+          onError: (error) => {
+            setNewPathErrorMessage((error as AxiosError).message)
+          },
+        }
+      )
+    } catch (error) {
+      console.error(error)
+    }
+  }, [fetchTfVars, organizationId, repositoryConfig, newPath])
+
+  // Save tfVars file list order
+  const [fileListOrder, setFileListOrder] = useState<string[]>([])
+
+  // Transform the tfVars file response data and memoize based on content, not reference
+  const tfVarFilesFromResponse = useMemo(() => {
+    const serviceTfPaths = service?.terraform_variables_source.tf_var_file_paths
+    return tfVarFilesResponse.map((file) => ({
+      ...file,
+      enabled: serviceTfPaths?.includes(file.source) ?? false,
+    }))
+  }, [tfVarFilesResponse, service?.terraform_variables_source.tf_var_file_paths])
+
+  // Allow manual override of tfVars file enabled state
+  const [fileEnabledOverrides, setFileEnabledOverrides] = useState<Record<string, boolean>>({})
+
+  const setTfVarFiles = useCallback((newFiles: TfVarsFile[]) => {
+    const overrides: Record<string, boolean> = {}
+    newFiles.forEach((file) => {
+      overrides[file.source] = file.enabled
+    })
+    setFileEnabledOverrides(overrides)
+  }, [])
+
+  const tfVarFiles: TfVarsFile[] = useMemo(() => {
+    return tfVarFilesFromResponse
+      .sort((a, b) => fileListOrder.indexOf(a.source) - fileListOrder.indexOf(b.source))
+      .map((file) => ({
+        ...file,
+        enabled: fileEnabledOverrides[file.source] ?? file.enabled,
+      }))
+  }, [tfVarFilesFromResponse, fileEnabledOverrides, fileListOrder])
+
+  const filteredTfVarFiles = [...tfVarFiles.filter((file) => file.enabled)].reverse()
+  const filesVars = useMemo(
+    () => [
+      ...new Map(
+        filteredTfVarFiles.flatMap((file) =>
+          Object.entries(file.variables).map(([key, value]) => [
+            key,
+            { key, value, source: file.source, secret: false },
+          ])
+        )
+      ).values(),
+    ],
+    [filteredTfVarFiles]
+  )
+
+  const groupedInitialVars = useMemo(
+    () => [...(variablesResponse ?? []), ...filesVars, ...(service?.terraform_variables_source?.tf_vars ?? [])],
+    [variablesResponse, service?.terraform_variables_source?.tf_vars, filesVars]
+  )
+
+  const variableByKey = useMemo(() => {
+    return [...(variablesResponse ?? []), ...filesVars].reduce(
+      (acc, variable) => {
+        if (variable) {
+          acc[variable.key ?? ''] = variable
+        }
+        return acc
+      },
+      {} as Record<string, TerraformVariableDefinition | TerraformVarKeyValue>
+    )
+  }, [variablesResponse, filesVars])
+
+  // Separate lookup for metadata (description, nullable) to ensure they are preserved
+  // even when variables are overridden by tfvars files or manual overrides
+  const metadataByKey = useMemo(() => buildMetadataByKey(variablesResponse), [variablesResponse])
+
+  // initialVars regroups variables from the git repo and the service's tf_vars. It is used to populate the initial state of the variables. Each variable key must be unique. If a variable key is present in both the git repo and the service's tf_vars, the value from the service's tf_vars is used.
+  const initialVars: UIVariable[] = useMemo(() => {
+    const uniqueVars = new Map<string, UIVariable>()
+    groupedInitialVars?.forEach((variable) => {
+      const currentVariable = variableByKey[variable.key ?? '']
+      const originalValue =
+        currentVariable && 'value' in currentVariable
+          ? currentVariable.value ?? ''
+          : currentVariable && 'default' in currentVariable
+            ? currentVariable.default ?? ''
+            : ''
+      const originalSecret =
+        currentVariable && 'sensitive' in currentVariable
+          ? currentVariable.sensitive
+          : currentVariable && 'secret' in currentVariable
+            ? Boolean(currentVariable.secret)
+            : false
+      const source = currentVariable && 'source' in currentVariable ? currentVariable.source : CUSTOM_SOURCE
+      const value = 'value' in variable ? variable.value ?? '' : 'default' in variable ? variable.default ?? '' : ''
+      const secret =
+        'sensitive' in variable ? variable.sensitive : 'secret' in variable ? Boolean(variable.secret) : false
+      const description = metadataByKey[variable.key ?? '']?.description
+      const nullable = metadataByKey[variable.key ?? '']?.nullable ?? true
+      uniqueVars.set(variable.key ?? '', {
+        id: uuidv4(),
+        key: variable.key ?? '',
+        value,
+        originalKey: variable.key,
+        originalValue,
+        originalSecret,
+        source,
+        secret,
+        isNew: false,
+        description,
+        nullable,
+      })
+    })
+    return Array.from(uniqueVars.values())
+  }, [groupedInitialVars, variableByKey, metadataByKey])
+
+  const [vars, setVars] = useState<UIVariable[]>([])
+
+  // Create a stable signature from the initial variable data (excluding IDs which change every render)
+  const initialVarsSignature = useMemo(() => {
+    return JSON.stringify(
+      groupedInitialVars?.map((v) => ({
+        key: v.key,
+        value: 'default' in v ? v.default : 'value' in v ? v.value : '',
+        source: 'source' in v ? v.source : '',
+        secret: 'sensitive' in v ? v.sensitive : 'secret' in v ? Boolean(v.secret) : false,
+      })) ?? []
+    )
+  }, [groupedInitialVars])
+  const previousSignatureRef = useRef<string>('')
+
+  const [selectedRows, setSelectedRows] = useState<string[]>([])
+  const [hoveredRow, setHoveredRow] = useState<string | undefined>(undefined)
+
+  const errors = useMemo(() => {
+    const newErrors = new Map<string, { message: string; field: 'key' | 'value' }>()
+    vars.forEach((v) => {
+      const duplicate = vars.find((v2) => v.key === v2.key && v.id !== v2.id && v.isNew)
+      if (duplicate) {
+        newErrors.set(v.id, { message: `Variable "${v.key}" already exists`, field: 'key' })
+        return
+      }
+
+      // Check for required field validation (nullable === false means required)
+      const isEmpty = !v.value || v.value.trim() === ''
+      if (v.nullable === false && isEmpty) {
+        newErrors.set(v.id, { message: `Value required for "${v.key}"`, field: 'value' })
+      }
+    })
+    return newErrors
+  }, [vars])
+
+  const isRowSelected = useCallback(
+    (id: string) => {
+      return selectedRows.includes(id)
+    },
+    [selectedRows]
+  )
+
+  const selectRow = useCallback((id: string) => {
+    setSelectedRows((prevSelectedRows) => {
+      if (prevSelectedRows.includes(id)) {
+        return prevSelectedRows.filter((row) => row !== id)
+      } else {
+        return [...prevSelectedRows, id]
+      }
+    })
+  }, [])
+
+  // Delete the selected rows from the variables array and clear the selected rows
+  const deleteSelectedRows = useCallback(() => {
+    setVars((prev) => prev.filter((v) => !selectedRows.includes(v.id)))
+    setSelectedRows([])
+  }, [selectedRows])
+
+  const serializeForApi = useCallback(
+    () =>
+      vars
+        .filter((v) => isVariableChanged(v) || isCustomVariable(v)) // Only serialize variables that are changed or custom
+        .map((v) => ({
+          key: v.key,
+          value: v.value.trim(),
+          secret: v.secret,
+        })),
+    [vars]
+  )
+
+  useEffect(() => {
+    // Only initialize vars when the initial variable data changes (not just reference changes)
+    if (initialVars.length > 0 && initialVarsSignature !== previousSignatureRef.current) {
+      setVars(initialVars)
+      previousSignatureRef.current = initialVarsSignature
+    }
+  }, [initialVars, initialVarsSignature])
+
+  const addVariable = useCallback((key = '', value = '') => {
+    const newVar: UIVariable = {
+      id: uuidv4(),
+      key,
+      value,
+      source: CUSTOM_SOURCE,
+      secret: false,
+      // no originals for new variables (or explicitly undefined) — treated as changed
+      originalKey: undefined,
+      originalValue: undefined,
+      originalSecret: undefined,
+      isNew: true,
+      nullable: true, // custom variables are nullable by default
+    }
+    setVars((prev) => [...prev, newVar])
+  }, [])
+
+  const updateKey = useCallback((id: string, key: string) => {
+    setVars((prev) => prev.map((v) => (v.id === id ? { ...v, key } : v)))
+  }, [])
+
+  const updateValue = useCallback((id: string, value: string) => {
+    setVars((prev) => prev.map((v) => (v.id === id ? { ...v, value } : v)))
+  }, [])
+
+  const toggleSecret = useCallback((id: string) => {
+    setVars((prev) =>
+      prev.map((v) =>
+        v.id === id
+          ? {
+              ...v,
+              secret: !v.secret,
+              // If it is currently a secret and the value is the unchanged value, set the value to an empty string
+              value: v.secret && v.value === SECRET_UNCHANGED_VALUE ? '' : v.value,
+            }
+          : v
+      )
+    )
+  }, [])
+
+  const revertValue = useCallback((id: string) => {
+    setVars((prev) =>
+      prev.map((v) =>
+        v.id === id
+          ? {
+              ...v,
+              value: v.originalValue ?? '',
+              secret: v.originalSecret ?? false,
+              isOverridden: false,
+            }
+          : v
+      )
+    )
+  }, [])
+
+  const removeVariable = useCallback((id: string) => {
+    setVars((prev) => prev.filter((v) => v.id !== id))
+  }, [])
+
+  const value: TerraformVariablesContextType = useMemo(
+    () => ({
+      // Variables-related
+      vars,
+      addVariable,
+      updateKey,
+      updateValue,
+      toggleSecret,
+      revertValue,
+      removeVariable,
+      serializeForApi,
+      errors,
+      // Tfvars-related
+      fetchTfVarsFiles,
+      tfVarFiles,
+      setTfVarFiles,
+      newPath,
+      setNewPath,
+      submitNewPath,
+      areTfVarsFilesLoading,
+      newPathErrorMessage,
+      setNewPathErrorMessage,
+      setFileListOrder,
+      // Table-related
+      selectedRows,
+      setSelectedRows,
+      isRowSelected,
+      selectRow,
+      deleteSelectedRows,
+      hoveredRow,
+      setHoveredRow,
+    }),
+    [
+      vars,
+      addVariable,
+      updateKey,
+      updateValue,
+      toggleSecret,
+      revertValue,
+      removeVariable,
+      fetchTfVarsFiles,
+      tfVarFiles,
+      setTfVarFiles,
+      newPath,
+      setNewPath,
+      submitNewPath,
+      areTfVarsFilesLoading,
+      newPathErrorMessage,
+      setNewPathErrorMessage,
+      setFileListOrder,
+      serializeForApi,
+      selectedRows,
+      setSelectedRows,
+      isRowSelected,
+      selectRow,
+      deleteSelectedRows,
+      hoveredRow,
+      setHoveredRow,
+      errors,
+    ]
+  )
+
+  return <TerraformVariablesContext.Provider value={value}>{children}</TerraformVariablesContext.Provider>
+}
+
+export function useTerraformVariablesContext() {
+  const context = useContext(TerraformVariablesContext)
+  if (context === undefined) {
+    throw new Error('useTerraformVariablesContext must be used within a TerraformVariablesProvider')
+  }
+  return context
+}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts

From 0caa5f79f65811ba7dc8a1b3ac827f44ad2f7b7b Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 26 Mar 2026 17:29:22 +0100
Subject: [PATCH 02/10] feat(new-nav): add Terraform variables settings page

---
 .../settings/terraform-variables.tsx          |   3 +-
 .../service-settings/feature/src/index.ts     |   1 -
 ...file-fragment-inline-setting.spec.tsx.snap | 109 ----
 ...ockerfile-fragment-inline-setting.spec.tsx |  68 ---
 .../dockerfile-fragment-inline-setting.tsx    |  32 --
 .../terraform-tfvars-popover.tsx              |  42 +-
 .../terraform-variables-context.tsx           | 513 ------------------
 .../terraform-variables-table.tsx             | 127 ++---
 .../service-terraform/feature/src/index.ts    |   5 +-
 .../terraform-variables-context.tsx           |   6 +-
 .../dockerfile-fragment-inline-modal.spec.tsx |   0
 .../dockerfile-fragment-inline-modal.tsx      |   0
 .../src/lib}/terraform-variables-utils.ts     |   6 +-
 13 files changed, 96 insertions(+), 816 deletions(-)
 delete mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
 delete mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
 delete mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
 delete mode 100644 libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
 rename libs/domains/service-terraform/feature/src/lib/{terraform-variables-settings => }/terraform-variables-context.tsx (98%)
 rename libs/domains/{service-settings => service-terraform}/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx (100%)
 rename libs/domains/{service-settings => service-terraform}/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx (100%)
 rename libs/domains/{service-settings/feature/src/lib/terraform-variables-settings => service-terraform/feature/src/lib}/terraform-variables-utils.ts (87%)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 9f7765ced05..138c635dc94 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -2,7 +2,8 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
 import { Suspense } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { match } from 'ts-pattern'
-import { TerraformVariablesProvider, TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
+import { TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
+import { TerraformVariablesProvider } from '@qovery/domains/service-terraform/feature'
 import { type TerraformGeneralData, useService } from '@qovery/domains/services/feature'
 import { SettingsHeading } from '@qovery/shared/console-shared'
 import { LoaderSpinner, Section } from '@qovery/shared/ui'
diff --git a/libs/domains/service-settings/feature/src/index.ts b/libs/domains/service-settings/feature/src/index.ts
index 69fd42887c1..741244c0d4f 100644
--- a/libs/domains/service-settings/feature/src/index.ts
+++ b/libs/domains/service-settings/feature/src/index.ts
@@ -10,4 +10,3 @@ export * from './lib/service-deployment-restrictions-settings/service-deployment
 export * from './lib/terraform-configuration-settings/terraform-configuration-settings'
 export * from './lib/terraform-arguments-settings/terraform-arguments-settings'
 export * from './lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table'
-export * from './lib/terraform-variables-settings/terraform-variables-context'
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
deleted file mode 100644
index 59731808ac1..00000000000
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
+++ /dev/null
@@ -1,109 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`DockerfileFragmentInlineSetting should match snapshot with content 1`] = `
-<body
-  style=""
->
-  <script
-    src="https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs/loader.js"
-  />
-  <div>
-    <div
-      class="mb-5 rounded border border-neutral bg-surface-neutral-subtle w-full"
-      data-testid="block-content"
-    >
-      <div
-        class="flex h-9 items-center justify-between border-b border-neutral px-4"
-      >
-        <h2
-          class="text-ssm font-medium text-neutral"
-        >
-          Commands
-        </h2>
-        <button
-          aria-label="Edit Commands"
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
-          type="button"
-        >
-          <i
-            aria-hidden="true"
-            class="fa-regular fa-pen "
-          />
-        </button>
-      </div>
-      <div
-        class="p-0"
-      >
-        <section
-          style="display: flex; position: relative; text-align: initial; width: 100%; height: 200px;"
-        >
-          <div
-            style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
-          >
-            <div
-              class="aspect-square border-2  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong w-4 "
-              data-testid="spinner"
-            />
-          </div>
-          <div
-            style="width: 100%; display: none;"
-          />
-        </section>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`DockerfileFragmentInlineSetting should match snapshot without content 1`] = `
-<body
-  style=""
->
-  <script
-    src="https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs/loader.js"
-  />
-  <div>
-    <div
-      class="mb-5 rounded border border-neutral bg-surface-neutral-subtle w-full"
-      data-testid="block-content"
-    >
-      <div
-        class="flex h-9 items-center justify-between border-b border-neutral px-4"
-      >
-        <h2
-          class="text-ssm font-medium text-neutral"
-        >
-          Commands
-        </h2>
-      </div>
-      <div
-        class="p-0"
-      >
-        <div
-          class="my-4 px-10 py-5 text-center"
-        >
-          <i
-            aria-hidden="true"
-            class="fa-regular fa-wave-pulse text-neutral-subtle"
-          />
-          <p
-            class="mb-3 mt-1 text-xs font-medium text-neutral-subtle"
-          >
-            No commands defined.
-          </p>
-          <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
-            type="button"
-          >
-            <i
-              aria-hidden="true"
-              class="fa-regular fa-plus mr-2"
-            />
-            Add commands
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
deleted file mode 100644
index 2de7e365b12..00000000000
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import {
-  DockerfileFragmentInlineSetting,
-  type DockerfileFragmentInlineSettingProps,
-} from './dockerfile-fragment-inline-setting'
-
-jest.mock('@tanstack/react-router', () => {
-  return {
-    ...jest.requireActual('@tanstack/react-router'),
-    useParams: () => ({
-      organizationId: 'org',
-      projectId: 'proj',
-      environmentId: 'env',
-      serviceId: 'app',
-    }),
-    Link: ({ children }: { children: React.ReactNode }) => <a href="/">{children}</a>,
-  }
-})
-
-const props: DockerfileFragmentInlineSettingProps = {
-  onSubmit: jest.fn(),
-  content: 'RUN apt-get update',
-}
-
-describe('DockerfileFragmentInlineSetting', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should display the title', () => {
-    renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
-    expect(screen.getByText('Commands')).toBeInTheDocument()
-  })
-
-  it('should show empty state when no content', () => {
-    renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
-    expect(screen.getByText('No commands defined.')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /add commands/i })).toBeInTheDocument()
-  })
-
-  it('should show edit button when content exists', () => {
-    renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
-    expect(screen.queryByText('No commands defined.')).not.toBeInTheDocument()
-  })
-
-  it('should open modal when add button is clicked', async () => {
-    const { userEvent } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
-
-    await userEvent.click(screen.getByRole('button', { name: /add commands/i }))
-
-    expect(screen.getByText('Custom build commands')).toBeInTheDocument()
-  })
-
-  it('should match snapshot with content', () => {
-    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} />)
-    expect(baseElement).toMatchSnapshot()
-  })
-
-  it('should match snapshot without content', () => {
-    const { baseElement } = renderWithProviders(<DockerfileFragmentInlineSetting {...props} content={undefined} />)
-    expect(baseElement).toMatchSnapshot()
-  })
-})
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
deleted file mode 100644
index 9128ab521d1..00000000000
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { CodeEditorInlineSetting, useModal } from '@qovery/shared/ui'
-import DockerfileFragmentInlineModal from '../dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal'
-
-export interface DockerfileFragmentInlineSettingProps {
-  onSubmit: (value?: string) => void
-  content?: string
-}
-
-export function DockerfileFragmentInlineSetting({ onSubmit, content }: DockerfileFragmentInlineSettingProps) {
-  const { openModal, closeModal } = useModal()
-
-  const openModalDockerfileFragment = () => {
-    openModal({
-      content: <DockerfileFragmentInlineModal content={content} onClose={closeModal} onSubmit={onSubmit} />,
-      options: {
-        fullScreen: true,
-      },
-    })
-  }
-
-  return (
-    <CodeEditorInlineSetting
-      title="Commands"
-      emptyStateText="No commands defined."
-      addButtonLabel="Add commands"
-      language="dockerfile"
-      height="200px"
-      content={content}
-      onOpenModal={openModalDockerfileFragment}
-    />
-  )
-}
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 54fbcab823a..8d91488036a 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -1,6 +1,7 @@
 import { type CheckedState } from '@radix-ui/react-checkbox'
 import { Reorder } from 'framer-motion'
 import { useCallback, useEffect, useState } from 'react'
+import { type TfVarsFile, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
 import {
   Button,
   Checkbox,
@@ -14,7 +15,6 @@ import {
   Tooltip,
 } from '@qovery/shared/ui'
 import { twMerge } from '@qovery/shared/util-js'
-import { type TfVarsFile, useTerraformVariablesContext } from '../terraform-variables-context'
 
 const TfvarItem = ({
   file,
@@ -47,7 +47,7 @@ const TfvarItem = ({
 
   return (
     <div
-      className="grid w-full grid-cols-[1fr_70px] items-center justify-between border-b border-neutral-250 px-4 py-3 last:rounded-b-lg last:border-b-0 hover:bg-neutral-100"
+      className="grid w-full grid-cols-[1fr_70px] items-center justify-between border-b border-neutral px-4 py-3 last:border-b-0 "
       onMouseEnter={() => setHoveredRow(file.source)}
       onMouseLeave={() => setHoveredRow(undefined)}
     >
@@ -60,14 +60,14 @@ const TfvarItem = ({
           className="ml-1 cursor-pointer"
         />
         <label className="flex cursor-pointer flex-col gap-0.5 text-sm" htmlFor={file.source}>
-          <span className="text-neutral-400">{file.source}</span>
-          <span className="text-xs text-neutral-350">{Object.keys(file.variables).length} variables</span>
+          <span className="text-neutral">{file.source}</span>
+          <span className="text-xs text-neutral-subtle">{Object.keys(file.variables).length} variables</span>
         </label>
       </div>
       <div className="flex items-center justify-between">
-        <Icon iconName="grip-lines" iconStyle="regular" className="text-neutral-350" />
+        <Icon iconName="grip-lines" iconStyle="regular" className="text-neutral-subtle" />
         <div className="flex items-center gap-1.5">
-          <span className="text-md leading-3 text-neutral-300">#</span>
+          <span className="text-md leading-3 text-neutral-subtle">#</span>
           <InputTextSmall
             name="order"
             value={currentIndex}
@@ -142,7 +142,7 @@ export const TfvarsFilesPopover = () => {
               side="left"
               content={
                 <span
-                  className="relative right-0 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-brand-400 text-sm font-bold leading-[0] text-white"
+                  className="relative right-0 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-surface-brand-solid text-sm font-bold leading-[0] text-neutralInvert"
                   data-testid="enabled-files-count"
                 >
                   {enabledFilesCount}
@@ -174,16 +174,16 @@ export const TfvarsFilesPopover = () => {
           )}
         </div>
       </Popover.Trigger>
-      <Popover.Content side="right" className="flex w-[340px] flex-col rounded-lg border border-neutral-250 p-0">
+      <Popover.Content side="right" className="flex w-[340px] flex-col rounded-lg border border-neutral p-0">
         <div className="flex items-center justify-between px-3 py-2">
-          <span className="px-1 py-1 text-sm font-medium text-neutral-400">Add and order .tfvars files</span>
+          <span className="px-1 py-1 text-sm font-medium text-neutral">Add and order .tfvars files</span>
           <Popover.Close>
-            <button type="button" className="flex items-center justify-center px-1 py-1">
-              <Icon iconName="xmark" className="text-lg font-normal leading-4 text-neutral-350" />
-            </button>
+            <Button type="button" iconOnly variant="plain">
+              <Icon iconName="xmark" className="text-sm font-normal leading-4 text-neutral-subtle" />
+            </Button>
           </Popover.Close>
         </div>
-        <div className="flex flex-col gap-2 border-t border-neutral-250 px-4 py-3">
+        <div className="flex flex-col gap-2 border-t border-neutral px-4 py-3">
           <div className="relative">
             <InputTextSmall
               name="path"
@@ -209,31 +209,31 @@ export const TfvarsFilesPopover = () => {
                 type="button"
                 onClick={submitNewPath}
               >
-                <Icon iconName="plus" className="text-lg font-normal leading-4 text-neutral-350" />
+                <Icon iconName="plus" className="text-lg font-normal leading-4 text-neutral-subtle" />
               </button>
             )}
           </div>
-          {newPathErrorMessage && <div className="text-xs text-red-500">{newPathErrorMessage}</div>}
+          {newPathErrorMessage && <div className="text-xs text-negative">{newPathErrorMessage}</div>}
         </div>
         {!areTfVarsFilesLoading && tfVarFiles.length !== 0 && (
-          <div className="flex items-center justify-between border-t border-neutral-250 bg-neutral-100 px-4 py-1">
-            <span className="text-xs text-neutral-350">File order defines override priority.</span>
+          <div className="flex items-center justify-between border-t border-neutral bg-surface-neutral px-4 py-1">
+            <span className="text-xs text-neutral-subtle">File order defines override priority.</span>
             <Tooltip
               classNameContent="max-w-[230px]"
               content="Files higher in the list override variables from lower ones."
               side="left"
             >
-              <span className="text-sm text-neutral-350">
+              <span className="text-sm text-neutral-subtle">
                 <Icon iconName="info-circle" iconStyle="regular" />
               </span>
             </Tooltip>
           </div>
         )}
-        <div className="flex flex-col border-t border-neutral-250">
+        <div className="flex flex-col border-t border-neutral">
           {areTfVarsFilesLoading && tfVarFiles.length === 0 ? (
             <>
               {Array.from({ length: 2 }).map((_, index) => (
-                <div key={index} className="flex w-full items-center gap-4 border-b border-neutral-250 px-4 py-4">
+                <div key={index} className="flex w-full items-center gap-4 border-b border-neutral px-4 py-4">
                   <div className="flex items-center">
                     <Skeleton height={16} width={16} />
                   </div>
@@ -254,7 +254,7 @@ export const TfvarsFilesPopover = () => {
                     initial={{ cursor: 'grab' }}
                     exit={{ cursor: 'grab' }}
                     whileDrag={{ cursor: 'grabbing', borderColor: '#642DFF', borderWidth: '2px' }}
-                    className={twMerge('flex w-full items-center border-b border-neutral-250')}
+                    className={twMerge('flex w-full items-center border-b border-neutral')}
                     data-testid="tfvar-item"
                   >
                     <TfvarItem key={file.source} file={file} index={index} onIndexChange={onIndexChange} />
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
deleted file mode 100644
index 1579ea3188d..00000000000
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
+++ /dev/null
@@ -1,513 +0,0 @@
-import { type AxiosError } from 'axios'
-import {
-  GitProviderEnum,
-  type TerraformVarKeyValue,
-  type TerraformVariableDefinition,
-  type TfVarsFileResponse,
-} from 'qovery-typescript-axios'
-import {
-  type PropsWithChildren,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { useFormContext } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
-import { match } from 'ts-pattern'
-import { v4 as uuidv4 } from 'uuid'
-import {
-  useListTfVarsFilesFromGitRepo,
-  useParseTerraformVariablesFromGitRepo,
-} from '@qovery/domains/organizations/feature'
-import { type TerraformGeneralData, useService } from '@qovery/domains/services/feature'
-import { buildMetadataByKey, isCustomVariable, isVariableChanged } from './terraform-variables-utils'
-
-export type UIVariable = {
-  id: string
-  key: string
-  value: string
-  source: string
-  // current secret flag shown in UI
-  secret: boolean
-  // originals (used to detect changes)
-  originalKey?: string
-  originalValue?: string
-  originalSecret?: boolean
-  // metadata
-  isNew?: boolean // created by user in UI (always treated as changed)
-  description?: string
-  // false = variable is required
-  nullable?: boolean
-}
-
-export type TfVarsFile = TfVarsFileResponse & {
-  enabled: boolean
-}
-
-export type TerraformVariablesContextType = {
-  vars: UIVariable[]
-  addVariable: (key?: string, value?: string) => void
-  updateKey: (id: string, key: string) => void
-  updateValue: (id: string, value: string) => void
-  toggleSecret: (id: string) => void
-  revertValue: (id: string) => void
-  removeVariable: (id: string) => void
-  serializeForApi: () => { key?: string; value?: string; secret?: boolean }[]
-
-  // tfVars-related
-  fetchTfVarsFiles: () => void
-  tfVarFiles: TfVarsFile[]
-  setTfVarFiles: (tfVarFiles: TfVarsFile[]) => void
-  newPath: string
-  setNewPath: (newPath: string) => void
-  submitNewPath: () => void
-  areTfVarsFilesLoading: boolean
-  newPathErrorMessage: string | undefined
-  setNewPathErrorMessage: (newPathErrorMessage: string | undefined) => void
-  setFileListOrder: (fileListOrder: string[]) => void
-
-  // Table-management-related
-  selectedRows: string[]
-  setSelectedRows: (selectedRows: string[]) => void
-  deleteSelectedRows: () => void
-  isRowSelected: (id: string) => boolean
-  selectRow: (id: string) => void
-  hoveredRow: string | undefined
-  setHoveredRow: (hoveredRow: string | undefined) => void
-  errors: Map<string, { message: string; field: 'key' | 'value' }>
-}
-
-export const CUSTOM_SOURCE = 'Custom'
-export const SECRET_UNCHANGED_VALUE = 'SECRET_VALUE_UNCHANGED'
-
-export const TerraformVariablesContext = createContext<TerraformVariablesContextType | undefined>(undefined)
-
-export const TerraformVariablesProvider = ({ children }: PropsWithChildren) => {
-  // Initial data fetching...
-  const { getValues } = useFormContext<TerraformGeneralData>()
-  const { organizationId = '', applicationId = '' } = useParams()
-  const { data: serviceResponse } = useService({ serviceId: applicationId })
-  const service = match(serviceResponse)
-    .with({ serviceType: 'TERRAFORM' }, (s) => s)
-    .otherwise(() => null)
-
-  // Memoize the repository config to prevent unnecessary re-renders and refetches.
-  // If we're in the context of the settings page, we use the service data to get the repository config.
-  // Otherwise, we use the form values of the service creation flow.
-  const formValues = getValues()
-  const repositoryConfig = useMemo(() => {
-    return {
-      url:
-        service?.terraform_files_source?.git?.git_repository?.url ??
-        formValues.git_repository?.url ??
-        formValues.repository ??
-        '',
-      branch: service?.terraform_files_source?.git?.git_repository?.branch ?? formValues.branch ?? '',
-      root_path: service?.terraform_files_source?.git?.git_repository?.root_path ?? formValues.root_path ?? '',
-      git_token_id: service?.terraform_files_source?.git?.git_repository?.git_token_id ?? formValues.git_token_id ?? '',
-      provider:
-        service?.terraform_files_source?.git?.git_repository?.provider ?? formValues.provider ?? GitProviderEnum.GITHUB,
-    }
-  }, [formValues, service])
-
-  const { data: variablesResponse } = useParseTerraformVariablesFromGitRepo({
-    organizationId,
-    repository: repositoryConfig,
-    enabled: Boolean(repositoryConfig.branch),
-  })
-
-  const [tfVarFilesResponse, setTfVarFilesResponse] = useState<TfVarsFileResponse[]>([])
-  const [newPath, setNewPath] = useState<string>('')
-  const [newPathErrorMessage, setNewPathErrorMessage] = useState<string | undefined>(undefined)
-
-  const { mutateAsync: fetchTfVars, status: tfVarsFilesStatus } = useListTfVarsFilesFromGitRepo()
-
-  const fetchTfVarsFiles = useCallback(async () => {
-    try {
-      setNewPathErrorMessage(undefined)
-      await fetchTfVars(
-        {
-          organizationId,
-          repository: repositoryConfig,
-          mode: {
-            type: 'AutoDiscover',
-          },
-        },
-        {
-          onSuccess: (data) => {
-            if (data && newPath.length === 0) {
-              // Should follow the order of the service's tf_var_file_paths
-              const servicePaths = [...(service?.terraform_variables_source.tf_var_file_paths ?? [])].reverse()
-              data.sort((a, b) => {
-                const aIndex = servicePaths.indexOf(a.source) ?? 0
-                const bIndex = servicePaths.indexOf(b.source) ?? 0
-                return aIndex - bIndex
-              })
-              setTfVarFilesResponse(data)
-            }
-          },
-        }
-      )
-    } catch (error) {
-      console.error(error)
-    }
-  }, [fetchTfVars, organizationId, repositoryConfig, newPath, service?.terraform_variables_source.tf_var_file_paths])
-
-  const areTfVarsFilesLoading = useMemo(() => tfVarsFilesStatus === 'loading', [tfVarsFilesStatus])
-
-  const submitNewPath = useCallback(async () => {
-    try {
-      if (!newPath.endsWith('.tfvars')) {
-        setNewPathErrorMessage('The path must end with .tfvars')
-        return
-      }
-
-      await fetchTfVars(
-        {
-          organizationId,
-          repository: repositoryConfig,
-          mode: {
-            type: 'SpecificPaths',
-            paths: [newPath],
-          },
-        },
-        {
-          onSuccess: (data) => {
-            if (data) {
-              setTfVarFilesResponse((prevTfVarFilesResponse) => [...prevTfVarFilesResponse, ...data])
-              setNewPath('')
-              setNewPathErrorMessage(undefined)
-            }
-          },
-          onError: (error) => {
-            setNewPathErrorMessage((error as AxiosError).message)
-          },
-        }
-      )
-    } catch (error) {
-      console.error(error)
-    }
-  }, [fetchTfVars, organizationId, repositoryConfig, newPath])
-
-  // Save tfVars file list order
-  const [fileListOrder, setFileListOrder] = useState<string[]>([])
-
-  // Transform the tfVars file response data and memoize based on content, not reference
-  const tfVarFilesFromResponse = useMemo(() => {
-    const serviceTfPaths = service?.terraform_variables_source.tf_var_file_paths
-    return tfVarFilesResponse.map((file) => ({
-      ...file,
-      enabled: serviceTfPaths?.includes(file.source) ?? false,
-    }))
-  }, [tfVarFilesResponse, service?.terraform_variables_source.tf_var_file_paths])
-
-  // Allow manual override of tfVars file enabled state
-  const [fileEnabledOverrides, setFileEnabledOverrides] = useState<Record<string, boolean>>({})
-
-  const setTfVarFiles = useCallback((newFiles: TfVarsFile[]) => {
-    const overrides: Record<string, boolean> = {}
-    newFiles.forEach((file) => {
-      overrides[file.source] = file.enabled
-    })
-    setFileEnabledOverrides(overrides)
-  }, [])
-
-  const tfVarFiles: TfVarsFile[] = useMemo(() => {
-    return tfVarFilesFromResponse
-      .sort((a, b) => fileListOrder.indexOf(a.source) - fileListOrder.indexOf(b.source))
-      .map((file) => ({
-        ...file,
-        enabled: fileEnabledOverrides[file.source] ?? file.enabled,
-      }))
-  }, [tfVarFilesFromResponse, fileEnabledOverrides, fileListOrder])
-
-  const filteredTfVarFiles = [...tfVarFiles.filter((file) => file.enabled)].reverse()
-  const filesVars = useMemo(
-    () => [
-      ...new Map(
-        filteredTfVarFiles.flatMap((file) =>
-          Object.entries(file.variables).map(([key, value]) => [
-            key,
-            { key, value, source: file.source, secret: false },
-          ])
-        )
-      ).values(),
-    ],
-    [filteredTfVarFiles]
-  )
-
-  const groupedInitialVars = useMemo(
-    () => [...(variablesResponse ?? []), ...filesVars, ...(service?.terraform_variables_source?.tf_vars ?? [])],
-    [variablesResponse, service?.terraform_variables_source?.tf_vars, filesVars]
-  )
-
-  const variableByKey = useMemo(() => {
-    return [...(variablesResponse ?? []), ...filesVars].reduce(
-      (acc, variable) => {
-        if (variable) {
-          acc[variable.key ?? ''] = variable
-        }
-        return acc
-      },
-      {} as Record<string, TerraformVariableDefinition | TerraformVarKeyValue>
-    )
-  }, [variablesResponse, filesVars])
-
-  // Separate lookup for metadata (description, nullable) to ensure they are preserved
-  // even when variables are overridden by tfvars files or manual overrides
-  const metadataByKey = useMemo(() => buildMetadataByKey(variablesResponse), [variablesResponse])
-
-  // initialVars regroups variables from the git repo and the service's tf_vars. It is used to populate the initial state of the variables. Each variable key must be unique. If a variable key is present in both the git repo and the service's tf_vars, the value from the service's tf_vars is used.
-  const initialVars: UIVariable[] = useMemo(() => {
-    const uniqueVars = new Map<string, UIVariable>()
-    groupedInitialVars?.forEach((variable) => {
-      const currentVariable = variableByKey[variable.key ?? '']
-      const originalValue =
-        currentVariable && 'value' in currentVariable
-          ? currentVariable.value ?? ''
-          : currentVariable && 'default' in currentVariable
-            ? currentVariable.default ?? ''
-            : ''
-      const originalSecret =
-        currentVariable && 'sensitive' in currentVariable
-          ? currentVariable.sensitive
-          : currentVariable && 'secret' in currentVariable
-            ? Boolean(currentVariable.secret)
-            : false
-      const source = currentVariable && 'source' in currentVariable ? currentVariable.source : CUSTOM_SOURCE
-      const value = 'value' in variable ? variable.value ?? '' : 'default' in variable ? variable.default ?? '' : ''
-      const secret =
-        'sensitive' in variable ? variable.sensitive : 'secret' in variable ? Boolean(variable.secret) : false
-      const description = metadataByKey[variable.key ?? '']?.description
-      const nullable = metadataByKey[variable.key ?? '']?.nullable ?? true
-      uniqueVars.set(variable.key ?? '', {
-        id: uuidv4(),
-        key: variable.key ?? '',
-        value,
-        originalKey: variable.key,
-        originalValue,
-        originalSecret,
-        source,
-        secret,
-        isNew: false,
-        description,
-        nullable,
-      })
-    })
-    return Array.from(uniqueVars.values())
-  }, [groupedInitialVars, variableByKey, metadataByKey])
-
-  const [vars, setVars] = useState<UIVariable[]>([])
-
-  // Create a stable signature from the initial variable data (excluding IDs which change every render)
-  const initialVarsSignature = useMemo(() => {
-    return JSON.stringify(
-      groupedInitialVars?.map((v) => ({
-        key: v.key,
-        value: 'default' in v ? v.default : 'value' in v ? v.value : '',
-        source: 'source' in v ? v.source : '',
-        secret: 'sensitive' in v ? v.sensitive : 'secret' in v ? Boolean(v.secret) : false,
-      })) ?? []
-    )
-  }, [groupedInitialVars])
-  const previousSignatureRef = useRef<string>('')
-
-  const [selectedRows, setSelectedRows] = useState<string[]>([])
-  const [hoveredRow, setHoveredRow] = useState<string | undefined>(undefined)
-
-  const errors = useMemo(() => {
-    const newErrors = new Map<string, { message: string; field: 'key' | 'value' }>()
-    vars.forEach((v) => {
-      const duplicate = vars.find((v2) => v.key === v2.key && v.id !== v2.id && v.isNew)
-      if (duplicate) {
-        newErrors.set(v.id, { message: `Variable "${v.key}" already exists`, field: 'key' })
-        return
-      }
-
-      // Check for required field validation (nullable === false means required)
-      const isEmpty = !v.value || v.value.trim() === ''
-      if (v.nullable === false && isEmpty) {
-        newErrors.set(v.id, { message: `Value required for "${v.key}"`, field: 'value' })
-      }
-    })
-    return newErrors
-  }, [vars])
-
-  const isRowSelected = useCallback(
-    (id: string) => {
-      return selectedRows.includes(id)
-    },
-    [selectedRows]
-  )
-
-  const selectRow = useCallback((id: string) => {
-    setSelectedRows((prevSelectedRows) => {
-      if (prevSelectedRows.includes(id)) {
-        return prevSelectedRows.filter((row) => row !== id)
-      } else {
-        return [...prevSelectedRows, id]
-      }
-    })
-  }, [])
-
-  // Delete the selected rows from the variables array and clear the selected rows
-  const deleteSelectedRows = useCallback(() => {
-    setVars((prev) => prev.filter((v) => !selectedRows.includes(v.id)))
-    setSelectedRows([])
-  }, [selectedRows])
-
-  const serializeForApi = useCallback(
-    () =>
-      vars
-        .filter((v) => isVariableChanged(v) || isCustomVariable(v)) // Only serialize variables that are changed or custom
-        .map((v) => ({
-          key: v.key,
-          value: v.value.trim(),
-          secret: v.secret,
-        })),
-    [vars]
-  )
-
-  useEffect(() => {
-    // Only initialize vars when the initial variable data changes (not just reference changes)
-    if (initialVars.length > 0 && initialVarsSignature !== previousSignatureRef.current) {
-      setVars(initialVars)
-      previousSignatureRef.current = initialVarsSignature
-    }
-  }, [initialVars, initialVarsSignature])
-
-  const addVariable = useCallback((key = '', value = '') => {
-    const newVar: UIVariable = {
-      id: uuidv4(),
-      key,
-      value,
-      source: CUSTOM_SOURCE,
-      secret: false,
-      // no originals for new variables (or explicitly undefined) — treated as changed
-      originalKey: undefined,
-      originalValue: undefined,
-      originalSecret: undefined,
-      isNew: true,
-      nullable: true, // custom variables are nullable by default
-    }
-    setVars((prev) => [...prev, newVar])
-  }, [])
-
-  const updateKey = useCallback((id: string, key: string) => {
-    setVars((prev) => prev.map((v) => (v.id === id ? { ...v, key } : v)))
-  }, [])
-
-  const updateValue = useCallback((id: string, value: string) => {
-    setVars((prev) => prev.map((v) => (v.id === id ? { ...v, value } : v)))
-  }, [])
-
-  const toggleSecret = useCallback((id: string) => {
-    setVars((prev) =>
-      prev.map((v) =>
-        v.id === id
-          ? {
-              ...v,
-              secret: !v.secret,
-              // If it is currently a secret and the value is the unchanged value, set the value to an empty string
-              value: v.secret && v.value === SECRET_UNCHANGED_VALUE ? '' : v.value,
-            }
-          : v
-      )
-    )
-  }, [])
-
-  const revertValue = useCallback((id: string) => {
-    setVars((prev) =>
-      prev.map((v) =>
-        v.id === id
-          ? {
-              ...v,
-              value: v.originalValue ?? '',
-              secret: v.originalSecret ?? false,
-              isOverridden: false,
-            }
-          : v
-      )
-    )
-  }, [])
-
-  const removeVariable = useCallback((id: string) => {
-    setVars((prev) => prev.filter((v) => v.id !== id))
-  }, [])
-
-  const value: TerraformVariablesContextType = useMemo(
-    () => ({
-      // Variables-related
-      vars,
-      addVariable,
-      updateKey,
-      updateValue,
-      toggleSecret,
-      revertValue,
-      removeVariable,
-      serializeForApi,
-      errors,
-      // Tfvars-related
-      fetchTfVarsFiles,
-      tfVarFiles,
-      setTfVarFiles,
-      newPath,
-      setNewPath,
-      submitNewPath,
-      areTfVarsFilesLoading,
-      newPathErrorMessage,
-      setNewPathErrorMessage,
-      setFileListOrder,
-      // Table-related
-      selectedRows,
-      setSelectedRows,
-      isRowSelected,
-      selectRow,
-      deleteSelectedRows,
-      hoveredRow,
-      setHoveredRow,
-    }),
-    [
-      vars,
-      addVariable,
-      updateKey,
-      updateValue,
-      toggleSecret,
-      revertValue,
-      removeVariable,
-      fetchTfVarsFiles,
-      tfVarFiles,
-      setTfVarFiles,
-      newPath,
-      setNewPath,
-      submitNewPath,
-      areTfVarsFilesLoading,
-      newPathErrorMessage,
-      setNewPathErrorMessage,
-      setFileListOrder,
-      serializeForApi,
-      selectedRows,
-      setSelectedRows,
-      isRowSelected,
-      selectRow,
-      deleteSelectedRows,
-      hoveredRow,
-      setHoveredRow,
-      errors,
-    ]
-  )
-
-  return <TerraformVariablesContext.Provider value={value}>{children}</TerraformVariablesContext.Provider>
-}
-
-export function useTerraformVariablesContext() {
-  const context = useContext(TerraformVariablesContext)
-  if (context === undefined) {
-    throw new Error('useTerraformVariablesContext must be used within a TerraformVariablesProvider')
-  }
-  return context
-}
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 0ad247cb716..5c6c3ed44c8 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -1,16 +1,18 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { DropdownVariable } from '@qovery/domains/variables/feature'
-import { Badge, Button, Checkbox, Icon, LoaderSpinner, Tooltip, truncateText } from '@qovery/shared/ui'
-import { twMerge } from '@qovery/shared/util-js'
-import { TfvarsFilesPopover } from '../terraform-tfvars-popover/terraform-tfvars-popover'
-import { SECRET_UNCHANGED_VALUE, type UIVariable, useTerraformVariablesContext } from '../terraform-variables-context'
 import {
+  SECRET_UNCHANGED_VALUE,
+  type UIVariable,
   formatSource,
   getSourceBadgeClassName,
   isCustomVariable,
   isVariableChanged,
-} from '../terraform-variables-utils'
+  useTerraformVariablesContext,
+} from '@qovery/domains/service-terraform/feature'
+import { DropdownVariable } from '@qovery/domains/variables/feature'
+import { Badge, Button, Checkbox, Icon, LoaderSpinner, Tooltip, truncateText } from '@qovery/shared/ui'
+import { twMerge } from '@qovery/shared/util-js'
+import { TfvarsFilesPopover } from '../terraform-tfvars-popover/terraform-tfvars-popover'
 
 const SourceCell = ({ variable }: { variable: UIVariable }) => {
   const sourceCellRef = useRef<HTMLDivElement>(null)
@@ -41,7 +43,7 @@ const SourceCell = ({ variable }: { variable: UIVariable }) => {
 
   return (
     <div
-      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral-250 px-2 lg:px-4"
+      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral px-2 lg:px-4 "
       ref={sourceCellRef}
     >
       <Badge className={twMerge(getSourceBadgeClassName(variable), 'font-medium')} variant="surface">
@@ -88,16 +90,20 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
   }, [isSecretPlaceholder, focusValueTextarea])
 
   return (
-    <div className="w-full border-b border-neutral-250">
+    <div className="w-full border-b border-neutral">
       <div
         className={twMerge(
           'grid min-h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center',
-          hoveredRow ? (hoveredRow === variable.source ? 'bg-neutral-100' : 'bg-white') : 'bg-white',
-          isRowSelected(variable.id) && 'bg-neutral-150 hover:bg-neutral-150',
+          hoveredRow
+            ? hoveredRow === variable.source
+              ? 'bg-surface-neutral-component'
+              : 'bg-surface-neutral'
+            : 'bg-surface-neutral',
+          isRowSelected(variable.id) && 'bg-surface-neutral-componentActive hover:bg-surface-neutral-componentActive',
           isMultiline && 'min-h-auto'
         )}
       >
-        <div className="flex h-full items-center justify-center border-r border-neutral-250">
+        <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox
             checked={isRowSelected(variable.id)}
             onCheckedChange={() => selectRow(variable.id)}
@@ -107,17 +113,12 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         {/* Variable name cell */}
         <div
           className={twMerge(
-            'h-full border-r border-neutral-250 transition-all duration-100',
-            isCustomVariable(variable) && 'hover:bg-neutral-100',
-            (isCellFocused('key') || isRowSelected(variable.id)) && 'bg-neutral-150 hover:bg-neutral-150'
+            'h-full border-r border-neutral transition-all duration-100',
+            isCustomVariable(variable) && 'hover:bg-surface-neutral-component',
+            isCellFocused('key') && 'bg-surface-neutral-component hover:bg-surface-neutral-component'
           )}
         >
-          <div
-            className={twMerge(
-              'flex h-full w-full items-center border border-transparent',
-              errors.get(variable.id)?.field === 'key' && 'border-red-500'
-            )}
-          >
+          <div className={twMerge('flex h-full w-full items-center border border-transparent')}>
             {variable.isNew ? (
               <input
                 name="key"
@@ -127,7 +128,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 }}
                 className={twMerge(
                   'peer h-full w-full bg-transparent px-4 text-sm outline-none',
-                  isCellFocused('key') && 'bg-neutral-150 hover:bg-neutral-150'
+                  isCellFocused('key') && 'bg-surface-neutral-component hover:bg-surface-neutral-component'
                 )}
                 onFocus={() => setFocusedCell('key')}
                 onBlur={() => setFocusedCell(undefined)}
@@ -140,12 +141,12 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 spellCheck={false}
               />
             ) : (
-              <span className="px-4 text-sm text-neutral-350">{variable.key}</span>
+              <span className="px-4 text-sm text-neutral">{variable.key}</span>
             )}
             {variable.description && (
               <Tooltip content={variable.description}>
                 <span
-                  className="-ml-2 text-neutral-300 hover:text-neutral-400"
+                  className="-ml-2 text-neutral-disabled hover:text-neutral-subtle"
                   role="img"
                   aria-label="Variable description"
                   data-tooltip-content={variable.description}
@@ -156,8 +157,8 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             )}
             {errors.get(variable.id)?.field === 'key' && (
               <Tooltip content={errors.get(variable.id)?.message}>
-                <div className="mr-4">
-                  <Icon iconName="circle-exclamation" iconStyle="regular" className="text-red-500" />
+                <div className="mr-3">
+                  <Icon iconName="circle-exclamation" iconStyle="regular" className="text-negative" />
                 </div>
               </Tooltip>
             )}
@@ -165,7 +166,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         </div>
         {/* Variable value cell */}
         <div
-          className="group relative flex h-full min-h-[44px] items-center border-r border-neutral-250"
+          className="group relative flex h-full min-h-[44px] items-center border-r border-neutral"
           onMouseEnter={() => {
             setIsCellHovered(true)
           }}
@@ -179,16 +180,17 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
           <div
             className={twMerge(
               // Ensure the pseudo-element is behind by using after:-z-10
-              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:-z-10 after:h-full after:w-full after:transition-all after:duration-100 group-hover:after:bg-neutral-100',
-              isCellFocused('value') && 'after:bg-neutral-150 group-hover:after:bg-neutral-150',
+              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:-left-[1px] after:-top-[1px] after:bottom-0 after:right-0 after:-z-10 after:h-[calc(100%+2px)] after:w-[calc(100%+2px)] after:transition-all after:duration-100 group-hover:after:bg-surface-neutral-component',
+              isCellFocused('value') &&
+                'after:bg-surface-neutral-component group-hover:after:bg-surface-neutral-component',
               !isSecretPlaceholder && 'cursor-text',
-              errors.get(variable.id)?.field === 'value' && 'border-red-500'
+              errors.get(variable.id)?.field === 'value' && 'border-surface-negative'
             )}
             onClick={onValueCellClick}
           >
             {isSecretPlaceholder && (
-              <div className="absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-white px-4 transition-all duration-100 group-hover:bg-neutral-100">
-                <span className="text-xs text-neutral-350" data-testid="hide_value_secret">
+              <div className="absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-surface-neutral px-4 transition-all duration-100 group-hover:bg-surface-neutral-component">
+                <span className="text-xs text-neutral" data-testid="hide_value_secret">
                   ● ● ● ● ● ● ● ●
                 </span>
               </div>
@@ -203,7 +205,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
               onFocus={() => setFocusedCell('value')}
               onBlur={() => setFocusedCell(undefined)}
               className={twMerge(
-                'vertical-align-middle h-5 w-full resize-none bg-transparent px-4 text-sm text-neutral-400 outline-none',
+                'vertical-align-middle h-5 w-full resize-none bg-transparent px-4 text-sm text-neutral outline-none',
                 isMultiline && 'h-full min-h-5 resize-y py-3'
               )}
               style={{ minHeight: textareaMinHeight }}
@@ -212,10 +214,11 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             />
             <div
               className={twMerge(
-                'absolute right-0 top-0 mr-4 flex h-full translate-x-1 items-center gap-2 pl-3 opacity-0 transition-all duration-100 group-hover:bg-neutral-100',
-                isCellFocused('value') && 'bg-neutral-150 group-hover:bg-neutral-150',
+                'absolute right-0 top-0 mr-3 flex h-full translate-x-1 items-center gap-1 pl-3 opacity-0 transition-all duration-100 group-hover:bg-surface-neutral-component',
+                isCellFocused('value') && 'bg-surface-neutral-component group-hover:bg-surface-neutral-component',
                 isCellHovered && 'translate-x-0 opacity-100',
-                isVariablePopoverOpen && 'bg-white'
+                isVariablePopoverOpen &&
+                  (isRowSelected(variable.id) ? 'bg-surface-neutral-componentActive' : 'bg-surface-neutral')
               )}
             >
               {!isSecretPlaceholder && (
@@ -237,11 +240,11 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 >
                   <button
                     className={twMerge(
-                      'justify-center border-none bg-transparent px-1 text-neutral-350 hover:text-neutral-400'
+                      'justify-center border-none bg-transparent px-1 text-neutral-subtle hover:text-neutral'
                     )}
                     type="button"
                   >
-                    <Icon className="text-sm" iconName="wand-magic-sparkles" />
+                    <Icon className="text-xs" iconName="wand-magic-sparkles" />
                   </button>
                 </DropdownVariable>
               )}
@@ -249,24 +252,24 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 <button
                   type="button"
                   onClick={() => focusValueTextarea()}
-                  className="px-1 text-neutral-350 hover:text-neutral-400"
+                  className="px-1 text-neutral-subtle hover:text-neutral"
                 >
-                  <Icon iconName="pen" iconStyle="regular" />
+                  <Icon className="text-xs" iconName="pen" iconStyle="regular" />
                 </button>
               )}
               {isVariableChanged(variable) && (
                 <button
                   type="button"
                   onClick={() => revertValue(variable.id)}
-                  className="px-1 text-neutral-350 hover:text-neutral-400"
+                  className="px-1 text-neutral-subtle hover:text-neutral"
                 >
-                  <Icon iconName="rotate-left" iconStyle="regular" />
+                  <Icon className="text-xs" iconName="rotate-left" iconStyle="regular" />
                 </button>
               )}
               {errors.get(variable.id)?.field === 'value' && (
                 <Tooltip content={errors.get(variable.id)?.message}>
                   <span className="px-1">
-                    <Icon iconName="circle-exclamation" iconStyle="regular" className="text-red-500" />
+                    <Icon className="text-xs text-negative" iconName="circle-exclamation" iconStyle="regular" />
                   </span>
                 </Tooltip>
               )}
@@ -277,7 +280,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         <SourceCell variable={variable} />
         {/* Secret toggle cell */}
         <button
-          className="flex items-center justify-center text-center text-sm text-neutral-400"
+          className="flex items-center justify-center text-center text-sm text-neutral"
           type="button"
           onClick={() => {
             toggleSecret(variable.id)
@@ -286,7 +289,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
           <Icon
             iconName={variable.secret ? 'lock-keyhole' : 'lock-keyhole-open'}
             iconStyle="regular"
-            className={variable.secret ? 'text-neutral-400' : 'text-neutral-300'}
+            className={variable.secret ? 'text-neutral' : 'text-neutral-disabled'}
           />
         </button>
       </div>
@@ -315,23 +318,23 @@ const TerraformVariablesRows = () => {
   )
 
   return (
-    <div className="flex flex-col items-center justify-center border-t border-neutral-250">
-      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral-250 bg-neutral-100">
-        <div className="flex h-full items-center justify-center border-r border-neutral-250">
+    <div className="flex flex-col items-center justify-center border-t border-neutral">
+      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral bg-surface-neutral">
+        <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox
             disabled={!isSelectAllCheckboxEnabled}
             onCheckedChange={onSelectAllToggle}
             checked={isAllSelected}
           />
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Variable</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Variable</span>
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Value</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Value</span>
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Source</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Source</span>
         </div>
       </div>
 
@@ -344,12 +347,12 @@ const TerraformVariablesRows = () => {
 
 const TerraformVariablesLoadingState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral-250 bg-neutral-100 p-4">
+    <div className="flex items-center justify-center border-b border-t border-neutral bg-surface-neutral p-4">
       <div className="flex flex-col items-center gap-4 py-4">
         <LoaderSpinner classWidth="w-6" />
         <div className="flex flex-col items-center gap-1">
-          <span className="text-center text-sm font-medium text-neutral-350">Fetching .tfvars files...</span>
-          <span className="text-center text-sm text-neutral-350">Pulling your Terraform variable definitions.</span>
+          <span className="text-center text-sm font-medium text-neutral">Fetching .tfvars files...</span>
+          <span className="text-center text-sm text-neutral-subtle">Pulling your Terraform variable definitions.</span>
         </div>
       </div>
     </div>
@@ -358,10 +361,10 @@ const TerraformVariablesLoadingState = () => {
 
 const TerraformVariablesEmptyState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral-250 bg-neutral-100 p-4">
+    <div className="flex items-center justify-center border-b border-t border-neutral bg-surface-neutral p-4">
       <div className="flex flex-col items-center gap-2 py-4">
-        <Icon iconName="key" iconStyle="regular" className="text-lg text-neutral-300" />
-        <span className="text-center text-sm text-neutral-350">
+        <Icon iconName="key" iconStyle="regular" className="text-lg text-neutral-subtle" />
+        <span className="text-center text-sm text-neutral-subtle">
           Load a .tfvars file or manually add variables
           <br />
           to configure your Terraform service.
@@ -384,9 +387,9 @@ export const TerraformVariablesTable = () => {
   }, [addVariable])
 
   return (
-    <div className="flex flex-col rounded-lg border border-neutral-250">
+    <div className="flex flex-col rounded-lg border border-neutral">
       <div className="flex items-center justify-between px-4 py-3">
-        <span className="text-sm font-medium text-neutral-400">Variable configuration</span>
+        <span className="text-sm font-medium text-neutral">Variable configuration</span>
         <TfvarsFilesPopover />
       </div>
 
@@ -407,7 +410,7 @@ export const TerraformVariablesTable = () => {
             Delete selected
           </Button>
         )}
-        <Button size="md" variant="surface" className="gap-1.5" type="button" onClick={onAddVariable}>
+        <Button size="md" variant="outline" className="gap-1.5" type="button" onClick={onAddVariable}>
           Add variable
           <Icon iconName="plus" iconStyle="regular" />
         </Button>
diff --git a/libs/domains/service-terraform/feature/src/index.ts b/libs/domains/service-terraform/feature/src/index.ts
index 77a737ea7c2..04fe1afd4dc 100644
--- a/libs/domains/service-terraform/feature/src/index.ts
+++ b/libs/domains/service-terraform/feature/src/index.ts
@@ -1,10 +1,9 @@
 export * from './source-setting/source-setting'
-export * from './lib/terraform-variables-settings/terraform-variables-settings'
-export * from './lib/terraform-variables-settings/terraform-variables-context'
-export * from './lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover'
 export * from './lib/hooks/use-terraform-resources/use-terraform-resources'
 export * from './lib/terraform-resources-section/terraform-resources-section'
 export * from './lib/resource-details/resource-details'
 export * from './lib/resource-tree-list/resource-tree-list'
 export * from './lib/hooks/use-terraform-available-versions/use-terraform-available-versions'
 export * from './lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting'
+export * from './lib/terraform-variables-context'
+export * from './lib/terraform-variables-utils'
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
similarity index 98%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
index 1579ea3188d..213baf2fa40 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
@@ -1,3 +1,4 @@
+import { useParams } from '@tanstack/react-router'
 import { type AxiosError } from 'axios'
 import {
   GitProviderEnum,
@@ -16,7 +17,6 @@ import {
   useState,
 } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
 import { v4 as uuidv4 } from 'uuid'
 import {
@@ -89,8 +89,8 @@ export const TerraformVariablesContext = createContext<TerraformVariablesContext
 export const TerraformVariablesProvider = ({ children }: PropsWithChildren) => {
   // Initial data fetching...
   const { getValues } = useFormContext<TerraformGeneralData>()
-  const { organizationId = '', applicationId = '' } = useParams()
-  const { data: serviceResponse } = useService({ serviceId: applicationId })
+  const { organizationId = '', serviceId = '' } = useParams({ strict: false })
+  const { data: serviceResponse } = useService({ serviceId })
   const service = match(serviceResponse)
     .with({ serviceType: 'TERRAFORM' }, (s) => s)
     .otherwise(() => null)
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
similarity index 100%
rename from libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.spec.tsx
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
similarity index 100%
rename from libs/domains/service-settings/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-modal/dockerfile-fragment-inline-modal.tsx
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
similarity index 87%
rename from libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
index 5330bb433ec..5f061d24779 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
@@ -49,13 +49,13 @@ export const isCustomVariable = (v: UIVariable) => {
 
 export const getSourceBadgeClassName = (variable: UIVariable) => {
   if (isCustomVariable(variable)) {
-    return 'text-[#65636D] bg-[#F2EFF3] border-[#D0CDD780]'
+    return 'text-neutral-subtle bg-surface-neutral-component border-neutral-component'
   }
   if (isVariableChanged(variable)) {
-    return 'text-[#AB6400] bg-[#FFF7C2] border-[#DC9B004D]'
+    return 'text-warning bg-surface-warning-component border-warning-subtle'
   }
   if (variable.source.includes('.tfvars')) {
-    return 'text-[#218358] bg-[#E6F6EB] border-[#008F3E33]'
+    return 'text-positive bg-surface-positive-component border-positive-subtle'
   }
   return 'text-[#0D74CE] bg-[#E6F4FE] border-[#0083EB33]'
 }

From c8912ed9a52571a0c2242e7ee1e77a37b7f843ee Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 26 Mar 2026 18:14:25 +0100
Subject: [PATCH 03/10] Fix import statements in unit tests

---
 .../terraform-tfvars-popover.spec.tsx                      | 7 +++++--
 .../terraform-variables-table.spec.tsx                     | 6 +++---
 .../terraform-variables-utils.spec.ts                      | 3 +--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
index 97378bfe842..bd4e27d5495 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
@@ -1,7 +1,10 @@
 import { FormProvider, useForm } from 'react-hook-form'
+import {
+  TerraformVariablesContext,
+  type TerraformVariablesContextType,
+} from '@qovery/domains/service-terraform/feature'
+import { type TerraformGeneralData } from '@qovery/domains/services/feature'
 import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
-import { type TerraformGeneralData } from '../terraform-configuration-settings/terraform-configuration-settings'
-import { TerraformVariablesContext, type TerraformVariablesContextType } from '../terraform-variables-context'
 import { TfvarsFilesPopover } from './terraform-tfvars-popover'
 
 const WrapperComponent = ({
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
index c9f3581db3a..d9eacf9c5fd 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
@@ -1,12 +1,12 @@
 import { type TfVarsFileResponse } from 'qovery-typescript-axios'
 import { FormProvider, useForm } from 'react-hook-form'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import { type TerraformGeneralData } from '../terraform-configuration-settings/terraform-configuration-settings'
 import {
   CUSTOM_SOURCE,
   TerraformVariablesContext,
   type TerraformVariablesContextType,
-} from '../terraform-variables-context'
+} from '@qovery/domains/service-terraform/feature'
+import { type TerraformGeneralData } from '@qovery/domains/services/feature'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { TerraformVariablesTable } from './terraform-variables-table'
 
 const mockTfVarsFromRepo: TfVarsFileResponse[] = []
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
index b843ad282d3..3b2c223224b 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
@@ -1,6 +1,5 @@
 import { type TerraformVariableDefinition } from 'qovery-typescript-axios'
-import { type UIVariable } from './terraform-variables-context'
-import { buildMetadataByKey, isVariableChanged } from './terraform-variables-utils'
+import { type UIVariable, buildMetadataByKey, isVariableChanged } from '@qovery/domains/service-terraform/feature'
 
 describe('Terraform variables utility functions', () => {
   describe('buildMetadataByKey', () => {

From d212fa727d39c601dff1334893ff85b93059447b Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 08:56:57 +0100
Subject: [PATCH 04/10] Update color tokens used in the variables table

---
 .../terraform-variables-table.tsx                 | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 5c6c3ed44c8..f0d9b5a587a 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -113,7 +113,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         {/* Variable name cell */}
         <div
           className={twMerge(
-            'h-full border-r border-neutral transition-all duration-100',
+            'h-full border-r border-neutral',
             isCustomVariable(variable) && 'hover:bg-surface-neutral-component',
             isCellFocused('key') && 'bg-surface-neutral-component hover:bg-surface-neutral-component'
           )}
@@ -180,7 +180,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
           <div
             className={twMerge(
               // Ensure the pseudo-element is behind by using after:-z-10
-              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:-left-[1px] after:-top-[1px] after:bottom-0 after:right-0 after:-z-10 after:h-[calc(100%+2px)] after:w-[calc(100%+2px)] after:transition-all after:duration-100 group-hover:after:bg-surface-neutral-component',
+              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:-left-[1px] after:-top-[1px] after:bottom-0 after:right-0 after:-z-10 after:h-[calc(100%+2px)] after:w-[calc(100%+2px)] group-hover:after:bg-surface-neutral-component',
               isCellFocused('value') &&
                 'after:bg-surface-neutral-component group-hover:after:bg-surface-neutral-component',
               !isSecretPlaceholder && 'cursor-text',
@@ -189,7 +189,14 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             onClick={onValueCellClick}
           >
             {isSecretPlaceholder && (
-              <div className="absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-surface-neutral px-4 transition-all duration-100 group-hover:bg-surface-neutral-component">
+              <div
+                className={twMerge(
+                  'absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-surface-neutral px-4 group-hover:bg-surface-neutral-component',
+                  hoveredRow === variable.source &&
+                    'bg-surface-neutral-component group-hover:bg-surface-neutral-component',
+                  isRowSelected(variable.id) && 'bg-surface-neutral-componentActive'
+                )}
+              >
                 <span className="text-xs text-neutral" data-testid="hide_value_secret">
                   ● ● ● ● ● ● ● ●
                 </span>
@@ -214,7 +221,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             />
             <div
               className={twMerge(
-                'absolute right-0 top-0 mr-3 flex h-full translate-x-1 items-center gap-1 pl-3 opacity-0 transition-all duration-100 group-hover:bg-surface-neutral-component',
+                'absolute right-0 top-0 mr-3 flex h-full translate-x-1 items-center gap-1 pl-3 opacity-0 group-hover:bg-surface-neutral-component',
                 isCellFocused('value') && 'bg-surface-neutral-component group-hover:bg-surface-neutral-component',
                 isCellHovered && 'translate-x-0 opacity-100',
                 isVariablePopoverOpen &&

From e79686eeafb749732df64ffe7487c317edc2effc Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 09:07:56 +0100
Subject: [PATCH 05/10] Add TerraformVariablesSettingsForm component

---
 .../settings/terraform-variables.tsx          | 57 +++++++++++++++++--
 1 file changed, 52 insertions(+), 5 deletions(-)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 138c635dc94..4e917c2f017 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -1,12 +1,13 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
 import { Suspense } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
+import { FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { match } from 'ts-pattern'
 import { TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
-import { TerraformVariablesProvider } from '@qovery/domains/service-terraform/feature'
-import { type TerraformGeneralData, useService } from '@qovery/domains/services/feature'
+import { TerraformVariablesProvider, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
+import { type TerraformGeneralData, useEditService, useService } from '@qovery/domains/services/feature'
 import { SettingsHeading } from '@qovery/shared/console-shared'
-import { LoaderSpinner, Section } from '@qovery/shared/ui'
+import { Button, LoaderSpinner, Section } from '@qovery/shared/ui'
+import { buildEditServicePayload } from '@qovery/shared/util-services'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables'
@@ -20,6 +21,52 @@ const TerraformVariablesLoader = () => (
   </div>
 )
 
+const TerraformVariablesSettingsForm = () => {
+  const { organizationId = '', projectId = '', environmentId = '', serviceId = '' } = Route.useParams()
+  const { handleSubmit } = useFormContext<TerraformGeneralData>()
+  const { serializeForApi, tfVarFiles, errors } = useTerraformVariablesContext()
+  const { data: service } = useService({ serviceId })
+
+  const { mutate: editService, isLoading: isLoadingEditService } = useEditService({
+    organizationId,
+    projectId,
+    environmentId,
+  })
+
+  if (service?.serviceType !== 'TERRAFORM') {
+    return null
+  }
+
+  const onSubmit = handleSubmit(() => {
+    // Edit the service with the updated variables and the updated order of tfvars files
+    const payload = buildEditServicePayload({
+      service,
+      request: {
+        terraform_variables_source: {
+          ...service.terraform_variables_source,
+          tf_vars: serializeForApi(),
+          tf_var_file_paths: [...tfVarFiles.filter((file) => file.enabled)].reverse().map((file) => file.source),
+        },
+      },
+    })
+    editService({
+      serviceId,
+      payload,
+    })
+  })
+
+  return (
+    <>
+      <TerraformVariablesTable />
+      <div className="mt-10 flex justify-end">
+        <Button type="submit" size="lg" onClick={onSubmit} loading={isLoadingEditService} disabled={errors.size > 0}>
+          Save
+        </Button>
+      </div>
+    </>
+  )
+}
+
 const TerraformVariablesWrapper = () => {
   const { serviceId } = useParams({ strict: false })
   const { data: service } = useService({ serviceId })
@@ -39,7 +86,7 @@ const TerraformVariablesWrapper = () => {
       <div className="max-w-content-with-navigation-left">
         <FormProvider {...methods}>
           <TerraformVariablesProvider>
-            <TerraformVariablesTable />
+            <TerraformVariablesSettingsForm />
           </TerraformVariablesProvider>
         </FormProvider>
       </div>

From d98350520e081d6228ded944dfa85cb998568d8e Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 15:04:09 +0100
Subject: [PATCH 06/10] Post-review UI fixes

---
 .../settings/terraform-variables.tsx          |  2 +-
 .../terraform-tfvars-popover.tsx              | 20 +++++++------------
 .../terraform-variables-table.tsx             |  4 ++--
 .../src/lib/terraform-variables-utils.ts      |  2 +-
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 4e917c2f017..8a9494bff4c 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -83,7 +83,7 @@ const TerraformVariablesWrapper = () => {
         title="Terraform variables"
         description="Select .tfvars files and configure variable values for your Terraform deployment"
       />
-      <div className="max-w-content-with-navigation-left">
+      <div className="w-full">
         <FormProvider {...methods}>
           <TerraformVariablesProvider>
             <TerraformVariablesSettingsForm />
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 8d91488036a..434fabfd154 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -47,7 +47,7 @@ const TfvarItem = ({
 
   return (
     <div
-      className="grid w-full grid-cols-[1fr_70px] items-center justify-between border-b border-neutral px-4 py-3 last:border-b-0 "
+      className="grid w-full grid-cols-[1fr_70px] items-center justify-between bg-surface-neutral px-4 py-3"
       onMouseEnter={() => setHoveredRow(file.source)}
       onMouseLeave={() => setHoveredRow(undefined)}
     >
@@ -142,7 +142,7 @@ export const TfvarsFilesPopover = () => {
               side="left"
               content={
                 <span
-                  className="relative right-0 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-surface-brand-solid text-sm font-bold leading-[0] text-neutralInvert"
+                  className="absolute -left-1.5 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-surface-brand-solid text-3xs font-bold leading-[0] text-neutralInvert"
                   data-testid="enabled-files-count"
                 >
                   {enabledFilesCount}
@@ -161,13 +161,7 @@ export const TfvarsFilesPopover = () => {
               </Button>
             </Indicator>
           ) : (
-            <Button
-              size="md"
-              variant="solid"
-              className="gap-1.5 px-[13px]"
-              type="button"
-              data-testid="open-tfvars-files-button"
-            >
+            <Button size="md" variant="solid" className="gap-1.5" type="button" data-testid="open-tfvars-files-button">
               <Icon iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
@@ -205,11 +199,11 @@ export const TfvarsFilesPopover = () => {
               </div>
             ) : (
               <button
-                className="absolute right-0 top-0 flex h-full w-9 items-center justify-center"
+                className="absolute right-0 top-0 flex h-full w-9 items-center justify-center text-neutral-subtle hover:text-neutral"
                 type="button"
                 onClick={submitNewPath}
               >
-                <Icon iconName="plus" className="text-lg font-normal leading-4 text-neutral-subtle" />
+                <Icon iconName="plus" className="text-sm" />
               </button>
             )}
           </div>
@@ -253,8 +247,8 @@ export const TfvarsFilesPopover = () => {
                     value={file}
                     initial={{ cursor: 'grab' }}
                     exit={{ cursor: 'grab' }}
-                    whileDrag={{ cursor: 'grabbing', borderColor: '#642DFF', borderWidth: '2px' }}
-                    className={twMerge('flex w-full items-center border-b border-neutral')}
+                    whileDrag={{ cursor: 'grabbing', borderColor: 'var(--brand-6)', borderWidth: '2px' }}
+                    className={twMerge('flex w-full items-center border-b border-neutral last:border-b-0')}
                     data-testid="tfvar-item"
                   >
                     <TfvarItem key={file.source} file={file} index={index} onIndexChange={onIndexChange} />
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index f0d9b5a587a..5bdb20c001d 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -326,7 +326,7 @@ const TerraformVariablesRows = () => {
 
   return (
     <div className="flex flex-col items-center justify-center border-t border-neutral">
-      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral bg-surface-neutral">
+      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral bg-surface-neutral-subtle">
         <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox
             disabled={!isSelectAllCheckboxEnabled}
@@ -394,7 +394,7 @@ export const TerraformVariablesTable = () => {
   }, [addVariable])
 
   return (
-    <div className="flex flex-col rounded-lg border border-neutral">
+    <div className="flex flex-col rounded-lg border border-neutral bg-surface-neutral">
       <div className="flex items-center justify-between px-4 py-3">
         <span className="text-sm font-medium text-neutral">Variable configuration</span>
         <TfvarsFilesPopover />
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
index 5f061d24779..1c4ed77cff5 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
@@ -57,5 +57,5 @@ export const getSourceBadgeClassName = (variable: UIVariable) => {
   if (variable.source.includes('.tfvars')) {
     return 'text-positive bg-surface-positive-component border-positive-subtle'
   }
-  return 'text-[#0D74CE] bg-[#E6F4FE] border-[#0083EB33]'
+  return 'text-info bg-surface-info-component border-info-subtle'
 }

From 4e16e0062663ec54c9a6890c99263c6f2ec047d7 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 15:14:55 +0100
Subject: [PATCH 07/10] More UI tweaks

---
 .../terraform-tfvars-popover.tsx               |  2 +-
 .../terraform-variables-table.tsx              | 18 +++++++-----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 434fabfd154..94bad6fbc9b 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -248,7 +248,7 @@ export const TfvarsFilesPopover = () => {
                     initial={{ cursor: 'grab' }}
                     exit={{ cursor: 'grab' }}
                     whileDrag={{ cursor: 'grabbing', borderColor: 'var(--brand-6)', borderWidth: '2px' }}
-                    className={twMerge('flex w-full items-center border-b border-neutral last:border-b-0')}
+                    className="flex w-full items-center border-b border-neutral last:border-b-0"
                     data-testid="tfvar-item"
                   >
                     <TfvarItem key={file.source} file={file} index={index} onIndexChange={onIndexChange} />
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 5bdb20c001d..2560e508726 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -1,3 +1,4 @@
+import { clsx } from 'clsx'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import {
@@ -43,7 +44,7 @@ const SourceCell = ({ variable }: { variable: UIVariable }) => {
 
   return (
     <div
-      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral px-2 lg:px-4 "
+      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral px-4"
       ref={sourceCellRef}
     >
       <Badge className={twMerge(getSourceBadgeClassName(variable), 'font-medium')} variant="surface">
@@ -92,16 +93,11 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
   return (
     <div className="w-full border-b border-neutral">
       <div
-        className={twMerge(
-          'grid min-h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center',
-          hoveredRow
-            ? hoveredRow === variable.source
-              ? 'bg-surface-neutral-component'
-              : 'bg-surface-neutral'
-            : 'bg-surface-neutral',
-          isRowSelected(variable.id) && 'bg-surface-neutral-componentActive hover:bg-surface-neutral-componentActive',
-          isMultiline && 'min-h-auto'
-        )}
+        className={clsx('grid min-h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center bg-surface-neutral', {
+          'bg-surface-neutral-component': hoveredRow === variable.source,
+          'bg-surface-neutral-componentActive hover:bg-surface-neutral-componentActive': isRowSelected(variable.id),
+          'min-h-auto': isMultiline,
+        })}
       >
         <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox

From fa29f75f9d2856dcf5a4f58427eaedf08331d09c Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 15:40:12 +0100
Subject: [PATCH 08/10] Improve tfvars popover drag&drop color tokens

---
 .../terraform-tfvars-popover.tsx              | 22 ++++++++-----
 .../scroll-shadow-wrapper.tsx                 | 31 +++++++++++--------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 94bad6fbc9b..a3adecbce4d 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -1,6 +1,7 @@
 import { type CheckedState } from '@radix-ui/react-checkbox'
+import clsx from 'clsx'
 import { Reorder } from 'framer-motion'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { type TfVarsFile, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
 import {
   Button,
@@ -14,7 +15,6 @@ import {
   Skeleton,
   Tooltip,
 } from '@qovery/shared/ui'
-import { twMerge } from '@qovery/shared/util-js'
 
 const TfvarItem = ({
   file,
@@ -41,13 +41,21 @@ const TfvarItem = ({
     [tfVarFiles, file.source, setTfVarFiles]
   )
 
+  const isLastItem = useMemo(() => index === tfVarFiles.length - 1, [index, tfVarFiles.length])
+
   useEffect(() => {
     setCurrentIndex(index.toString())
   }, [index])
 
   return (
     <div
-      className="grid w-full grid-cols-[1fr_70px] items-center justify-between bg-surface-neutral px-4 py-3"
+      className={clsx(
+        'relative grid w-full grid-cols-[1fr_70px] items-center justify-between rounded-b-md bg-surface-neutral px-4 py-3',
+        {
+          'rounded-none after:absolute after:bottom-0 after:h-[1px] after:w-full after:bg-surface-neutral-componentActive':
+            !isLastItem,
+        }
+      )}
       onMouseEnter={() => setHoveredRow(file.source)}
       onMouseLeave={() => setHoveredRow(undefined)}
     >
@@ -239,16 +247,16 @@ export const TfvarsFilesPopover = () => {
               ))}
             </>
           ) : tfVarFiles.length > 0 ? (
-            <ScrollShadowWrapper className="max-h-[300px]">
+            <ScrollShadowWrapper hideSides className="max-h-[300px]">
               <Reorder.Group axis="y" values={tfVarFiles} onReorder={onReorder}>
                 {tfVarFiles?.map((file, index) => (
                   <Reorder.Item
                     key={file.source}
                     value={file}
-                    initial={{ cursor: 'grab' }}
+                    initial={{ cursor: 'grab', borderColor: 'var(--brand-6)' }}
                     exit={{ cursor: 'grab' }}
-                    whileDrag={{ cursor: 'grabbing', borderColor: 'var(--brand-6)', borderWidth: '2px' }}
-                    className="flex w-full items-center border-b border-neutral last:border-b-0"
+                    whileDrag={{ cursor: 'grabbing', borderWidth: '2px' }}
+                    className="flex w-full items-center"
                     data-testid="tfvar-item"
                   >
                     <TfvarItem key={file.source} file={file} index={index} onIndexChange={onIndexChange} />
diff --git a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
index 8bf7e0d64f8..14d24c193d5 100644
--- a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
+++ b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
@@ -4,10 +4,11 @@ export interface ScrollShadowWrapperProps {
   children: ReactNode
   className?: string
   style?: CSSProperties
+  hideSides?: boolean
 }
 
 export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
-  const { children, className = '', style = {} } = props
+  const { children, className = '', style = {}, hideSides = false } = props
 
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
@@ -52,19 +53,23 @@ export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
       className={`relative overflow-y-auto pr-[1px] ${className}`}
       onScroll={onScrollHandler}
     >
-      <div
-        data-testid="scroll-shadow-top"
-        className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
-          getVisibleSides().top ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
+      {!hideSides && (
+        <div
+          data-testid="scroll-shadow-top"
+          className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
+            getVisibleSides().top ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      )}
       {children}
-      <div
-        data-testid="scroll-shadow-bottom"
-        className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
-          getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
+      {!hideSides && (
+        <div
+          data-testid="scroll-shadow-bottom"
+          className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
+            getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      )}
     </div>
   )
 }

From d6556378ca8ce3f8d437250a81e63a208e4a3e1a Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 16:00:22 +0100
Subject: [PATCH 09/10] UI: add min-h to table's loading and empty states to
 avoid glitch

---
 .../terraform-variables-table/terraform-variables-table.tsx   | 4 ++--
 .../feature/src/lib/terraform-variables-context.tsx           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 2560e508726..4788497c3bf 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -350,7 +350,7 @@ const TerraformVariablesRows = () => {
 
 const TerraformVariablesLoadingState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral bg-surface-neutral p-4">
+    <div className="flex min-h-40 items-center justify-center border-b border-t border-neutral bg-surface-neutral">
       <div className="flex flex-col items-center gap-4 py-4">
         <LoaderSpinner classWidth="w-6" />
         <div className="flex flex-col items-center gap-1">
@@ -364,7 +364,7 @@ const TerraformVariablesLoadingState = () => {
 
 const TerraformVariablesEmptyState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral bg-surface-neutral p-4">
+    <div className="flex min-h-40 items-center justify-center border-b border-t border-neutral bg-surface-neutral">
       <div className="flex flex-col items-center gap-2 py-4">
         <Icon iconName="key" iconStyle="regular" className="text-lg text-neutral-subtle" />
         <span className="text-center text-sm text-neutral-subtle">
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
index 213baf2fa40..5d5692ea64f 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
@@ -90,7 +90,7 @@ export const TerraformVariablesProvider = ({ children }: PropsWithChildren) => {
   // Initial data fetching...
   const { getValues } = useFormContext<TerraformGeneralData>()
   const { organizationId = '', serviceId = '' } = useParams({ strict: false })
-  const { data: serviceResponse } = useService({ serviceId })
+  const { data: serviceResponse } = useService({ serviceId, suspense: true })
   const service = match(serviceResponse)
     .with({ serviceType: 'TERRAFORM' }, (s) => s)
     .otherwise(() => null)

From 00610327b40be718a3b79e81deb404a2ae5794d5 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 16:07:02 +0100
Subject: [PATCH 10/10] Pass down service as prop to avoid extra condition on
 serviceType

---
 .../settings/terraform-variables.tsx          | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 8a9494bff4c..359bb183890 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -4,6 +4,7 @@ import { FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { match } from 'ts-pattern'
 import { TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
 import { TerraformVariablesProvider, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
+import { type Terraform } from '@qovery/domains/services/data-access'
 import { type TerraformGeneralData, useEditService, useService } from '@qovery/domains/services/feature'
 import { SettingsHeading } from '@qovery/shared/console-shared'
 import { Button, LoaderSpinner, Section } from '@qovery/shared/ui'
@@ -21,11 +22,10 @@ const TerraformVariablesLoader = () => (
   </div>
 )
 
-const TerraformVariablesSettingsForm = () => {
-  const { organizationId = '', projectId = '', environmentId = '', serviceId = '' } = Route.useParams()
+const TerraformVariablesSettingsForm = ({ service }: { service: Terraform }) => {
+  const { organizationId = '', projectId = '', environmentId = '' } = Route.useParams()
   const { handleSubmit } = useFormContext<TerraformGeneralData>()
   const { serializeForApi, tfVarFiles, errors } = useTerraformVariablesContext()
-  const { data: service } = useService({ serviceId })
 
   const { mutate: editService, isLoading: isLoadingEditService } = useEditService({
     organizationId,
@@ -50,7 +50,7 @@ const TerraformVariablesSettingsForm = () => {
       },
     })
     editService({
-      serviceId,
+      serviceId: service.id,
       payload,
     })
   })
@@ -67,9 +67,7 @@ const TerraformVariablesSettingsForm = () => {
   )
 }
 
-const TerraformVariablesWrapper = () => {
-  const { serviceId } = useParams({ strict: false })
-  const { data: service } = useService({ serviceId })
+const TerraformVariablesContent = ({ service }: { service: Terraform }) => {
   const methods = useForm<TerraformGeneralData>({
     mode: 'onChange',
     defaultValues: match(service)
@@ -86,7 +84,7 @@ const TerraformVariablesWrapper = () => {
       <div className="w-full">
         <FormProvider {...methods}>
           <TerraformVariablesProvider>
-            <TerraformVariablesSettingsForm />
+            <TerraformVariablesSettingsForm service={service} />
           </TerraformVariablesProvider>
         </FormProvider>
       </div>
@@ -94,6 +92,17 @@ const TerraformVariablesWrapper = () => {
   )
 }
 
+const TerraformVariablesWrapper = () => {
+  const { serviceId } = useParams({ strict: false })
+  const { data: service } = useService({ serviceId })
+
+  if (service?.serviceType !== 'TERRAFORM') {
+    return null
+  }
+
+  return <TerraformVariablesContent service={service} />
+}
+
 function RouteComponent() {
   return (
     <Suspense fallback={<TerraformVariablesLoader />}>