Fixes to connection type field modal (#3164)

* Edit modal primary action button should be "Save" * Remove "Field" text * Fix type dropdown being always active * Preselect short text dropdown type * Autofocus name input in modal * Fix tests to render open modal * Update section modal edit button text * Remove conditional isOpen from Field Modals
opendatahub-io · Sep 6, 2024 · 4bfade5 · 4bfade5
1 parent f08cb4e
commit 4bfade5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 33 deletions.
diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
@@ -43,7 +43,6 @@ const isConnectionTypeFieldType = (
 
 type Props = {
   field?: ConnectionTypeDataField;
-  isOpen?: boolean;
   onClose: () => void;
   onSubmit: (field: ConnectionTypeDataField) => void;
   isEdit?: boolean;
@@ -52,7 +51,6 @@ type Props = {
 
 export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
   field,
-  isOpen,
   onClose,
   onSubmit,
   isEdit,
@@ -66,7 +64,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
       ? // Cast from specific type to generic type
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
         (field.type as ConnectionTypeFieldType)
-      : undefined,
+      : ConnectionTypeFieldType.ShortText,
   );
   const [required, setRequired] = React.useState<boolean | undefined>(field?.required);
   const [isTypeSelectOpen, setIsTypeSelectOpen] = React.useState<boolean>(false);
@@ -115,15 +113,16 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
         <DashboardModalFooter
           onCancel={onClose}
           onSubmit={handleSubmit}
-          submitLabel={isEdit ? 'Edit' : 'Add'}
+          submitLabel={isEdit ? 'Save' : 'Add'}
           isSubmitDisabled={!isValid}
           alertTitle="Error"
         />
       }
       data-testid="archive-model-version-modal"
+      elementToFocus="#name"
     >
       <Form>
-        <FormGroup fieldId="name" label="Field name" isRequired>
+        <FormGroup fieldId="name" label="Name" isRequired>
           <TextInput
             id="name"
             value={name}
@@ -138,12 +137,12 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
         </FormGroup>
         <FormGroup
           fieldId="description"
-          label="Field description"
+          label="Description"
           labelIcon={
             <Popover
-              aria-label="field description help"
-              headerContent="Field description"
-              bodyContent="Use the field description to provide users in your organization with additional information about a field, or instructions for completing the field. Your input will appear in a popover, like this one."
+              aria-label="description help"
+              headerContent="Description"
+              bodyContent="Use the description to provide users in your organization with additional information about a field, or instructions for completing the field. Your input will appear in a popover, like this one."
             >
               <DashboardPopupIconButton
                 icon={<OutlinedQuestionCircleIcon />}
@@ -166,7 +165,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
             <Popover
               aria-label="environment variable help"
               headerContent="Environment variable"
-              bodyContent="Environment variables grant you access to the value provided when attaching the connection to your workbench."
+              bodyContent="Environment variables are how the system references the field value in a workbench or model server. Your input will appear in a popover, like this one. "
             >
               <DashboardPopupIconButton
                 icon={<OutlinedQuestionCircleIcon />}
@@ -211,12 +210,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
             ) : undefined}
           </FormHelperText>
         </FormGroup>
-        <FormGroup
-          fieldId="fieldType"
-          label="Field type"
-          isRequired
-          data-testid="field-type-select"
-        >
+        <FormGroup fieldId="fieldType" label="Type" isRequired data-testid="field-type-select">
           <Select
             id="fieldType"
             isOpen={isTypeSelectOpen}
@@ -239,7 +233,7 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
                 onClick={() => {
                   setIsTypeSelectOpen((open) => !open);
                 }}
-                isExpanded={isOpen}
+                isExpanded={isTypeSelectOpen}
               >
                 {fieldType ? fieldTypeToString(fieldType) : ''}
               </MenuToggle>

diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
@@ -5,7 +5,6 @@ import ConnectionTypeSectionModal from './ConnectionTypeSectionModal';
 
 type Props = {
   field?: ConnectionTypeField;
-  isOpen?: boolean;
   onClose: () => void;
   onSubmit: (field: ConnectionTypeField) => void;
   isEdit?: boolean;

diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx
@@ -7,33 +7,26 @@ import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconBut
 
 type Props = {
   field?: SectionField;
-  isOpen?: boolean;
   onClose: () => void;
   onSubmit: (field: SectionField) => void;
   isEdit?: boolean;
 };
 
-const ConnectionTypeSectionModal: React.FC<Props> = ({
-  field,
-  isOpen,
-  onClose,
-  onSubmit,
-  isEdit,
-}) => {
+const ConnectionTypeSectionModal: React.FC<Props> = ({ field, onClose, onSubmit, isEdit }) => {
   const [name, setName] = React.useState(field?.name || '');
   const [description, setDescription] = React.useState(field?.description || '');
 
   const isValid = name.length > 0;
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       title={isEdit ? 'Edit section heading' : 'Add section heading'}
       onClose={onClose}
       variant="medium"
       footer={
         <DashboardModalFooter
-          submitLabel={isEdit ? 'Edit' : 'Add'}
+          submitLabel={isEdit ? 'Save' : 'Add'}
           onCancel={onClose}
           onSubmit={() => {
             if (isValid) {
@@ -45,6 +38,7 @@ const ConnectionTypeSectionModal: React.FC<Props> = ({
           alertTitle=""
         />
       }
+      elementToFocus="#section-name"
     >
       <Form>
         <FormGroup

diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
@@ -160,7 +160,6 @@ const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChan
           field={modalField.field}
           isEdit={modalField.isEdit}
           onClose={() => setModalField(undefined)}
-          isOpen
           onSubmit={(field) => {
             if (modalField.field && modalField.isEdit && modalField.index !== undefined) {
               // update

diff --git a/frontend/src/pages/connectionTypes/manage/__tests__/ConnectionTypeSectionModal.spec.tsx b/frontend/src/pages/connectionTypes/manage/__tests__/ConnectionTypeSectionModal.spec.tsx
@@ -8,9 +8,7 @@ describe('ConnectionTypeSectionModal', () => {
   it('should disable submit until valid', () => {
     const closeFn = jest.fn();
     const submitFn = jest.fn();
-    const result = render(
-      <ConnectionTypeSectionModal isOpen onClose={closeFn} onSubmit={submitFn} />,
-    );
+    const result = render(<ConnectionTypeSectionModal onClose={closeFn} onSubmit={submitFn} />);
 
     const nameInput = result.getByTestId('section-name');
     const descriptionInput = result.getByTestId('section-description');
@@ -36,7 +34,6 @@ describe('ConnectionTypeSectionModal', () => {
     const submitFn = jest.fn();
     const result = render(
       <ConnectionTypeSectionModal
-        isOpen
         onClose={closeFn}
         onSubmit={submitFn}
         field={{