From 1e7ce38abcc7dfa922ab37f974c5ba5927ae2f6b Mon Sep 17 00:00:00 2001
From: Ashley McEntee <123661468+ashley-o0o@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:37:49 -0500
Subject: [PATCH 1/2] Adds required to environment variables

---
 .../EnvTypeSelectField.tsx                    | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
index 025498de5c..dc300bcc36 100644
--- a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
+import { Button, FormGroup, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons';
 import { EnvironmentVariableType, EnvVariable } from '~/pages/projects/types';
 import IndentSection from '~/pages/projects/components/IndentSection';
@@ -18,50 +18,52 @@ const EnvTypeSelectField: React.FC<EnvTypeSelectFieldProps> = ({
   onUpdate,
   onRemove,
 }) => (
-  <Split data-testid="environment-variable-field">
-    <SplitItem isFilled>
-      <Stack hasGutter>
-        <StackItem data-testid="environment-variable-type-select">
-          <SimpleSelect
-            popperProps={{ appendTo: getDashboardMainContainer() }}
-            isFullWidth
-            toggleLabel={envVariable.type || 'Select environment variable type'}
-            options={Object.values(EnvironmentVariableType).map((type) => ({
-              key: type,
-              label: type,
-            }))}
-            onChange={(value) => {
-              const enumValue = asEnumMember(value, EnvironmentVariableType);
-              if (enumValue !== null) {
-                onUpdate({
-                  type: enumValue,
-                });
-              }
-            }}
-          />
-        </StackItem>
-        {envVariable.type && (
-          <StackItem>
-            <IndentSection>
-              <EnvTypeSwitch
-                env={envVariable}
-                onUpdate={(envValue) => onUpdate({ ...envVariable, values: envValue })}
-              />
-            </IndentSection>
+  <FormGroup isRequired label="Variable type">
+    <Split data-testid="environment-variable-field">
+      <SplitItem isFilled>
+        <Stack hasGutter>
+          <StackItem data-testid="environment-variable-type-select">
+            <SimpleSelect
+              popperProps={{ appendTo: getDashboardMainContainer() }}
+              isFullWidth
+              toggleLabel={envVariable.type || 'Select environment variable type'}
+              options={Object.values(EnvironmentVariableType).map((type) => ({
+                key: type,
+                label: type,
+              }))}
+              onChange={(value) => {
+                const enumValue = asEnumMember(value, EnvironmentVariableType);
+                if (enumValue !== null) {
+                  onUpdate({
+                    type: enumValue,
+                  });
+                }
+              }}
+            />
           </StackItem>
-        )}
-      </Stack>
-    </SplitItem>
-    <SplitItem>
-      <Button
-        variant="plain"
-        data-testid="remove-environment-variable-button"
-        aria-label="Remove environment variable"
-        icon={<MinusCircleIcon />}
-        onClick={() => onRemove()}
-      />
-    </SplitItem>
-  </Split>
+          {envVariable.type && (
+            <StackItem>
+              <IndentSection>
+                <EnvTypeSwitch
+                  env={envVariable}
+                  onUpdate={(envValue) => onUpdate({ ...envVariable, values: envValue })}
+                />
+              </IndentSection>
+            </StackItem>
+          )}
+        </Stack>
+      </SplitItem>
+      <SplitItem>
+        <Button
+          variant="plain"
+          data-testid="remove-environment-variable-button"
+          aria-label="Remove environment variable"
+          icon={<MinusCircleIcon />}
+          onClick={() => onRemove()}
+        />
+      </SplitItem>
+    </Split>
+  </FormGroup>
 );
 
 export default EnvTypeSelectField;

From 0aaef3383eef02fd91059bbf50b23ba926ecec17 Mon Sep 17 00:00:00 2001
From: Ashley McEntee <123661468+ashley-o0o@users.noreply.github.com>
Date: Fri, 17 Jan 2025 13:43:24 -0500
Subject: [PATCH 2/2] Accessibility fix

---
 .../spawner/environmentVariables/EnvTypeSelectField.tsx        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
index dc300bcc36..1fbc8a13a7 100644
--- a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
@@ -18,12 +18,13 @@ const EnvTypeSelectField: React.FC<EnvTypeSelectFieldProps> = ({
   onUpdate,
   onRemove,
 }) => (
-  <FormGroup isRequired label="Variable type">
+  <FormGroup isRequired label="Variable type" fieldId="environment-variable-type-select">
     <Split data-testid="environment-variable-field">
       <SplitItem isFilled>
         <Stack hasGutter>
           <StackItem data-testid="environment-variable-type-select">
             <SimpleSelect
+              toggleProps={{ id: 'environment-variable-type-select' }}
               popperProps={{ appendTo: getDashboardMainContainer() }}
               isFullWidth
               toggleLabel={envVariable.type || 'Select environment variable type'}