Skip to content

Commit fd09796

Browse files
jenny-s51jenny-s51
committed
fix: add type dropdown, remove console stmts
1 parent 9b39ba6 commit fd09796

File tree

2 files changed

+84
-60
lines changed

2 files changed

+84
-60
lines changed

‎workspaces/frontend/src/app/pages/Workspaces/Form/properties/secrets/SecretKeyValuePairInput.tsx‎

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { Button } from '@patternfly/react-core/dist/esm/components/Button';
33
import { Form } from '@patternfly/react-core/dist/esm/components/Form';
44
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
55
import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
6+
import { Stack } from '@patternfly/react-core/dist/esm/layouts/Stack';
67
import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
8+
import { useThemeContext } from 'mod-arch-kubeflow';
79
import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
810
import PasswordInput from '~/shared/components/PasswordInput';
911

@@ -29,49 +31,60 @@ const SecretKeyValuePairInput: React.FC<SecretKeyValuePairInputProps> = ({
2931
onValueChange,
3032
onRemove,
3133
canRemove,
32-
}) => (
33-
<>
34-
<Grid hasGutter data-testid="key-value-pair" className="secret-key-grid">
35-
<GridItem span={11}>
36-
<Form>
37-
<ThemeAwareFormGroupWrapper isRequired label="Key" fieldId={`key-${index}`}>
38-
<TextInput
39-
id={`key-${index}`}
40-
data-testid="key-input"
34+
}) => {
35+
const { isMUITheme } = useThemeContext();
36+
37+
return (
38+
<>
39+
<Grid hasGutter data-testid="key-value-pair" className="secret-key-grid">
40+
<GridItem span={11}>
41+
<Form>
42+
<ThemeAwareFormGroupWrapper
4143
isRequired
42-
aria-label={`key of item ${index}`}
43-
value={keyValue}
44-
onChange={(_event, val) => onKeyChange(val)}
44+
label="Key"
45+
fieldId={`key-${index}`}
46+
className={!isMUITheme ? 'pf-v6-u-ml-xl' : ''}
47+
>
48+
<TextInput
49+
id={`key-${index}`}
50+
data-testid="key-input"
51+
isRequired
52+
aria-label={`key of item ${index}`}
53+
value={keyValue}
54+
onChange={(_event, val) => onKeyChange(val)}
55+
/>
56+
</ThemeAwareFormGroupWrapper>
57+
</Form>
58+
</GridItem>
59+
<GridItem span={1} className="secret-remove-button-container">
60+
<Stack className="pf-v6-u-justify-content-flex-end">
61+
<Button
62+
isDisabled={!canRemove}
63+
data-testid="remove-key-value-pair"
64+
aria-label="Remove key-value pair"
65+
variant="plain"
66+
icon={<MinusCircleIcon />}
67+
onClick={onRemove}
4568
/>
46-
</ThemeAwareFormGroupWrapper>
47-
</Form>
48-
</GridItem>
49-
<GridItem span={1} className="secret-remove-button-container">
50-
<Button
51-
isDisabled={!canRemove}
52-
data-testid="remove-key-value-pair"
53-
aria-label="Remove key-value pair"
54-
variant="plain"
55-
icon={<MinusCircleIcon />}
56-
onClick={onRemove}
57-
/>
58-
</GridItem>
59-
</Grid>
60-
<ThemeAwareFormGroupWrapper
61-
isRequired
62-
label="Value"
63-
fieldId={`value-${index}`}
64-
className="secret-value-indented"
65-
>
66-
<PasswordInput
67-
data-testid="value-input"
69+
</Stack>
70+
</GridItem>
71+
</Grid>
72+
<ThemeAwareFormGroupWrapper
6873
isRequired
69-
aria-label={`value of item ${index}`}
70-
value={valueValue}
71-
onChange={(_event, val) => onValueChange(val)}
72-
/>
73-
</ThemeAwareFormGroupWrapper>
74-
</>
75-
);
74+
label="Value"
75+
fieldId={`value-${index}`}
76+
className={`secret-value-indented ${!isMUITheme ? 'pf-v6-u-pl-xl' : ''}`.trim()}
77+
>
78+
<PasswordInput
79+
data-testid="value-input"
80+
isRequired
81+
aria-label={`value of item ${index}`}
82+
value={valueValue}
83+
onChange={(_event, val) => onValueChange(val)}
84+
/>
85+
</ThemeAwareFormGroupWrapper>
86+
</>
87+
);
88+
};
7689

7790
export default SecretKeyValuePairInput;

‎workspaces/frontend/src/app/pages/Workspaces/Form/properties/secrets/SecretsApiCreateModal.tsx‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
ModalFooter,
1212
} from '@patternfly/react-core/dist/esm/components/Modal';
1313
import { Alert, AlertVariant } from '@patternfly/react-core/dist/esm/components/Alert';
14+
import { Select } from '@patternfly/react-core/dist/esm/components/Select';
15+
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
1416
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
1517
import { useThemeContext } from 'mod-arch-kubeflow';
1618
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
@@ -80,6 +82,7 @@ export const SecretsApiCreateModal: React.FC<SecretsApiCreateModalProps> = ({
8082
return nameError;
8183
}
8284

85+
// Validate key-value pairs (Opaque is the only supported type)
8386
for (let i = 0; i < keyValuePairs.length; i++) {
8487
const pair = keyValuePairs[i];
8588
const keyError = validateKey(pair.key);
@@ -122,19 +125,12 @@ export const SecretsApiCreateModal: React.FC<SecretsApiCreateModalProps> = ({
122125
}, [keyValuePairs]);
123126

124127
const handleSubmit = useCallback(async () => {
125-
console.log('🔍 [DEBUG] handleSubmit called');
126-
console.log('🔍 [DEBUG] Secret name:', secretName);
127-
console.log('🔍 [DEBUG] Key-value pairs:', keyValuePairs);
128-
console.log('🔍 [DEBUG] Selected namespace:', selectedNamespace);
129-
130128
const validationError = validateForm();
131129
if (validationError) {
132-
console.log('❌ [DEBUG] Validation failed:', validationError);
133130
setError(validationError);
134131
return;
135132
}
136133

137-
console.log('✅ [DEBUG] Validation passed, submitting...');
138134
setIsSubmitting(true);
139135
setError(null);
140136

@@ -156,11 +152,7 @@ export const SecretsApiCreateModal: React.FC<SecretsApiCreateModalProps> = ({
156152
},
157153
};
158154

159-
console.log('📤 [DEBUG] Sending POST request with payload:', payload);
160-
161-
const response = await api.secrets.createSecret(selectedNamespace, payload);
162-
163-
console.log('✅ [DEBUG] Secret created successfully:', response);
155+
await api.secrets.createSecret(selectedNamespace, payload);
164156

165157
// Reset form
166158
setSecretName('');
@@ -172,15 +164,8 @@ export const SecretsApiCreateModal: React.FC<SecretsApiCreateModalProps> = ({
172164
onSecretCreated();
173165
}
174166
} catch (err) {
175-
console.error('❌ [DEBUG] Failed to create secret:', err);
176-
console.error('❌ [DEBUG] Error details:', {
177-
message: err instanceof Error ? err.message : 'Unknown error',
178-
stack: err instanceof Error ? err.stack : undefined,
179-
fullError: err,
180-
});
181167
setError(err instanceof Error ? err.message : 'Failed to create secret. Please try again.');
182168
} finally {
183-
console.log('🏁 [DEBUG] handleSubmit finished, isSubmitting set to false');
184169
setIsSubmitting(false);
185170
}
186171
}, [
@@ -227,6 +212,32 @@ export const SecretsApiCreateModal: React.FC<SecretsApiCreateModalProps> = ({
227212
aria-label="Secret name"
228213
/>
229214
</ThemeAwareFormGroupWrapper>
215+
<ThemeAwareFormGroupWrapper label="Secret type" isRequired fieldId="secret-type">
216+
<Select
217+
selected="Opaque"
218+
toggle={(toggleRef) => (
219+
<MenuToggle
220+
isFullWidth
221+
// Remove className and style from the toggle once https://github.com/opendatahub-io/mod-arch-library/issues/65 is fixed
222+
className={isMUITheme ? 'pf-v6-u-pl-md pf-v6-u-pr-md' : ''}
223+
style={{
224+
...(isMUITheme
225+
? {
226+
height: '56px',
227+
}
228+
: {}),
229+
}}
230+
ref={toggleRef}
231+
id="secret-type-toggle"
232+
isExpanded={false}
233+
isDisabled
234+
data-testid="secret-type-select"
235+
>
236+
Opaque
237+
</MenuToggle>
238+
)}
239+
/>
240+
</ThemeAwareFormGroupWrapper>
230241
{keyValuePairs.map(({ key, value }, i) => (
231242
<React.Fragment key={i}>
232243
<SecretKeyValuePairInput

0 commit comments

Comments
 (0)