feat(edge): add EnvVar to stack details [EE-5463] (#9036)

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx

@@ -15,6 +15,10 @@ import { TextTip } from '@@/Tip/TextTip';
 import { SwitchField } from '@@/form-components/SwitchField';
 import { LoadingButton } from '@@/buttons';
 import { FormError } from '@@/form-components/FormError';
+import {
+  EnvironmentVariablesPanel,
+  envVarValidation,
+} from '@@/form-components/EnvironmentVariablesFieldset';
 
 import { PrivateRegistryFieldsetWrapper } from './PrivateRegistryFieldsetWrapper';
 import { FormValues } from './types';
@@ -61,6 +65,7 @@ export function EditEdgeStackForm({
     prePullImage: edgeStack.PrePullImage,
     retryDeploy: edgeStack.RetryDeploy,
     webhookEnabled: !!edgeStack.Webhook,
+    envVars: edgeStack.EnvVars || [],
   };
 
   return (
@@ -181,6 +186,13 @@ function InnerForm({
             onFieldError={(error) => setFieldError('privateRegistryId', error)}
             error={errors.privateRegistryId}
           />
+
+          <EnvironmentVariablesPanel
+            onChange={(value) => setFieldValue('envVars', value)}
+            values={values.envVars}
+            errors={errors.envVars}
+          />
+
           {values.deploymentType === DeploymentType.Compose && (
             <>
               <div className="form-group">
@@ -271,5 +283,6 @@ function formValidation(): SchemaOf<FormValues> {
       .required()
       .min(1, 'At least one edge group is required'),
     webhookEnabled: boolean().default(false),
+    envVars: envVarValidation(),
   });
 }

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx

@@ -31,6 +31,8 @@ import { LoadingButton } from '@@/buttons';
 import { FormSection } from '@@/form-components/FormSection';
 import { TextTip } from '@@/Tip/TextTip';
 import { FormError } from '@@/form-components/FormError';
+import { EnvironmentVariablesPanel } from '@@/form-components/EnvironmentVariablesFieldset';
+import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
 
 import { useValidateEnvironmentTypes } from '../useEdgeGroupHasType';
 import { atLeastTwo } from '../atLeastTwo';
@@ -43,6 +45,7 @@ interface FormValues {
   autoUpdate: AutoUpdateModel;
   refName: string;
   authentication: GitAuthModel;
+  envVars: EnvVar[];
 }
 
 export function GitForm({ stack }: { stack: EdgeStack }) {
@@ -63,6 +66,7 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
     autoUpdate: parseAutoUpdateResponse(stack.AutoUpdate),
     refName: stack.GitConfig.ReferenceName,
     authentication: parseAuthResponse(stack.GitConfig.Authentication),
+    envVars: stack.EnvVars || [],
   };
 
   const webhookId = stack.AutoUpdate?.Webhook || createWebhookId();
@@ -253,6 +257,12 @@ function InnerForm({
           }
           errors={errors.authentication}
         />
+
+        <EnvironmentVariablesPanel
+          onChange={(value) => setFieldValue('envVars', value)}
+          values={values.envVars}
+          errors={errors.envVars}
+        />
       </FormSection>
 
       <FormSection title="Actions">

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/types.ts

@@ -1,6 +1,8 @@
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 import { DeploymentType } from '@/react/edge/edge-stacks/types';
 
+import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
+
 export interface FormValues {
   edgeGroups: EdgeGroup['Id'][];
   deploymentType: DeploymentType;
@@ -10,4 +12,5 @@ export interface FormValues {
   prePullImage: boolean;
   retryDeploy: boolean;
   webhookEnabled: boolean;
+  envVars: EnvVar[];
 }

app/react/edge/edge-stacks/types.ts

@@ -5,6 +5,8 @@ import {
 } from '@/react/portainer/gitops/types';
 import { RegistryId } from '@/react/portainer/registries/types';
 
+import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
+
 import { EdgeGroup } from '../edge-groups/types';
 
 interface EdgeStackStatusDetails {
@@ -57,6 +59,7 @@ export type EdgeStack = {
   Prune: boolean;
   RetryDeploy: boolean;
   Webhook?: string;
+  EnvVars?: EnvVar[];
 };
 
 export enum EditorType {