Adds required to environment variables

ashley-o0o · Jan 16, 2025 · 1e7ce38 · 1e7ce38
1 parent 95d2b64
commit 1e7ce38
Showing 1 changed file with 46 additions and 44 deletions.
diff --git 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;