- Service variables
- {scope && (
-
- openModal({
- content: (
-
- ),
- options: {
- width: 750,
- },
- })
- }
- onCreateVariable={() =>
- toast(
- 'success',
- 'Creation success',
- 'You need to redeploy your service for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }
- />
- )}
-
-
-
- {scope && (
-
- {
- toast(
- 'success',
- 'Creation success',
- 'You need to redeploy your service for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }}
- onEditVariable={() => {
- toast(
- 'success',
- 'Edition success',
- 'You need to redeploy your service for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }}
- onDeleteVariable={(variable) => {
- let name = variable.key
- if (name && name.length > 30) {
- name = name.substring(0, 30) + '...'
- }
- toast(
- 'success',
- 'Deletion success',
- `${name} has been deleted. You need to redeploy your service for your changes to be applied.`,
- toasterCallback,
- 'Redeploy'
- )
- }}
- />
-
- Environment variables
-
- toast(
- 'success',
- 'Creation success',
- 'You need to redeploy your environment for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }
- />
-
-
-
-
- {
- toast(
- 'success',
- 'Creation success',
- 'You need to redeploy your environment for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }}
- onEditVariable={() => {
- toast(
- 'success',
- 'Edition success',
- 'You need to redeploy your environment for your changes to be applied.',
- toasterCallback,
- 'Redeploy'
- )
- }}
- onDeleteVariable={(variable) => {
- let name = variable.key
- if (name && name.length > 30) {
- name = name.substring(0, 30) + '...'
- }
- toast(
- 'success',
- 'Deletion success',
- `${name} has been deleted. You need to redeploy your environment for your changes to be applied.`,
- toasterCallback,
- 'Redeploy'
- )
- }}
- />
-
-
-
-
- )
-}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx
new file mode 100644
index 00000000000..7b4d57ef8d8
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in.tsx
@@ -0,0 +1,67 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useDeployEnvironment } from '@qovery/domains/environments/feature'
+import { VariableList } from '@qovery/domains/variables/feature'
+import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
+import { toast } from '@qovery/shared/ui'
+
+export const Route = createFileRoute(
+ '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in'
+)({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const { organizationId, projectId, environmentId } = Route.useParams()
+
+ const { mutate: deployEnvironment } = useDeployEnvironment({
+ projectId,
+ logsLink: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL(),
+ })
+
+ const toasterCallback = () => {
+ deployEnvironment({ environmentId })
+ }
+
+ const onCreateVariableToast = () =>
+ toast(
+ 'success',
+ 'Creation success',
+ 'You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+
+ const onEditVariableToast = () =>
+ toast(
+ 'success',
+ 'Edition success',
+ 'You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+
+ const onDeleteVariableToast = () => {
+ toast(
+ 'success',
+ 'Deletion success',
+ 'Your variable has been deleted. You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+ }
+
+ return (
+ }
+ scope="ENVIRONMENT"
+ organizationId={organizationId}
+ projectId={projectId}
+ environmentId={environmentId}
+ onCreateVariable={onCreateVariableToast}
+ onEditVariable={onEditVariableToast}
+ onDeleteVariable={onDeleteVariableToast}
+ />
+ )
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx
new file mode 100644
index 00000000000..0fc81b2b406
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets.tsx
@@ -0,0 +1,26 @@
+import { Navigate, createFileRoute } from '@tanstack/react-router'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { ExternalSecretsTab } from '@qovery/domains/variables/feature'
+
+export const Route = createFileRoute(
+ '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets'
+)({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const { organizationId, projectId, environmentId } = Route.useParams()
+ const secretManagerEnabled = useFeatureFlagEnabled('secret-manager') === true
+
+ if (!secretManagerEnabled) {
+ return (
+
+ )
+ }
+
+ return
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx
new file mode 100644
index 00000000000..10ad4f720c7
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/index.tsx
@@ -0,0 +1,75 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useDeployEnvironment } from '@qovery/domains/environments/feature'
+import { VariableList, VariablesActionToolbar } from '@qovery/domains/variables/feature'
+import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
+import { toast } from '@qovery/shared/ui'
+
+export const Route = createFileRoute(
+ '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/'
+)({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const { organizationId, projectId, environmentId } = Route.useParams()
+
+ const { mutate: deployEnvironment } = useDeployEnvironment({
+ projectId,
+ logsLink: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL(),
+ })
+
+ const toasterCallback = () => {
+ deployEnvironment({ environmentId })
+ }
+
+ const onCreateVariableToast = () =>
+ toast(
+ 'success',
+ 'Creation success',
+ 'You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+
+ const onEditVariableToast = () =>
+ toast(
+ 'success',
+ 'Edition success',
+ 'You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+
+ const onDeleteVariableToast = () => {
+ toast(
+ 'success',
+ 'Deletion success',
+ 'Your variable has been deleted. You need to redeploy your environment for your changes to be applied.',
+ toasterCallback,
+ 'Redeploy'
+ )
+ }
+
+ return (
+
+ }
+ scope="ENVIRONMENT"
+ organizationId={organizationId}
+ projectId={projectId}
+ environmentId={environmentId}
+ onCreateVariable={onCreateVariableToast}
+ onEditVariable={onEditVariableToast}
+ onDeleteVariable={onDeleteVariableToast}
+ />
+ )
+}
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/route.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/route.tsx
new file mode 100644
index 00000000000..88aa02173fc
--- /dev/null
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables/route.tsx
@@ -0,0 +1,84 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
+import { Outlet, createFileRoute, useMatchRoute } from '@tanstack/react-router'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { Suspense } from 'react'
+import { Heading, Icon, LoaderSpinner, Navbar, Section } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export const Route = createFileRoute(
+ '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables'
+)({
+ component: RouteComponent,
+})
+
+const tabs = [
+ {
+ id: 'custom',
+ label: 'Custom',
+ iconName: 'sliders' as IconName,
+ routeId: '/organization/$organizationId/project/$projectId/environment/$environmentId/variables/',
+ },
+ {
+ id: 'external-secrets',
+ label: 'External secrets',
+ iconName: 'lock-keyhole' as IconName,
+ routeId: '/organization/$organizationId/project/$projectId/environment/$environmentId/variables/external-secrets',
+ },
+ {
+ id: 'built-in',
+ label: 'Built-in',
+ iconName: 'cube' as IconName,
+ routeId: '/organization/$organizationId/project/$projectId/environment/$environmentId/variables/built-in',
+ },
+]
+
+const OutletLoader = () => (
+