fix alignment of text for connection type form elements

opendatahub-io · Sep 6, 2024 · e043623 · e043623
1 parent 85f2b31
commit e043623
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/frontend/src/components/TruncatedText.tsx b/frontend/src/components/TruncatedText.tsx
@@ -14,6 +14,7 @@ const TruncatedText: React.FC<TruncatedTextProps> = ({ maxLines, content, ...res
         overflow: 'hidden',
         WebkitBoxOrient: 'vertical',
         WebkitLineClamp: maxLines,
+        overflowWrap: 'anywhere',
       }}
       {...rest}
     >

diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
@@ -46,7 +46,7 @@ const ConnectionTypePreview: React.FC<Props> = ({ obj }) => {
         />
         <HelperText>
           {connectionTypeDescription ? (
-            <HelperTextItem style={{ overflowWrap: 'anywhere' }}>
+            <HelperTextItem>
               <TruncatedText maxLines={2} content={connectionTypeDescription} />
             </HelperTextItem>
           ) : undefined}

diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTableToolbar.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTableToolbar.tsx
@@ -1,4 +1,4 @@
-import { Button, TextInput, ToolbarItem } from '@patternfly/react-core';
+import { Button, SearchInput, ToolbarItem } from '@patternfly/react-core';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import FilterToolbar from '~/components/FilterToolbar';
@@ -27,23 +27,23 @@ const ConnectionTypesTableToolbar: React.FC<Props> = ({
       filterOptions={options}
       filterOptionRenders={{
         [ConnectionTypesOptions.keyword]: ({ onChange, ...props }) => (
-          <TextInput
+          <SearchInput
             {...props}
             aria-label="Filter by keyword"
             placeholder="Filter by keyword"
             onChange={(_event, value) => onChange(value)}
           />
         ),
         [ConnectionTypesOptions.category]: ({ onChange, ...props }) => (
-          <TextInput
+          <SearchInput
             {...props}
             aria-label="Filter by category"
             placeholder="Filter by category"
             onChange={(_event, value) => onChange(value)}
           />
         ),
         [ConnectionTypesOptions.createdBy]: ({ onChange, ...props }) => (
-          <TextInput
+          <SearchInput
             {...props}
             aria-label="Created by"
             placeholder="Created by"

diff --git a/frontend/src/pages/connectionTypes/EmptyConnectionTypes.tsx b/frontend/src/pages/connectionTypes/EmptyConnectionTypes.tsx
@@ -16,7 +16,7 @@ const EmptyConnectionTypes: React.FC = () => (
   <PageSection isFilled>
     <EmptyState variant={EmptyStateVariant.full} data-testid="connection-types-empty-state">
       <EmptyStateHeader
-        titleText="No connection types found."
+        titleText="No connection types"
         icon={<EmptyStateIcon icon={PlusCircleIcon} />}
         headingLevel="h1"
       />

diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
@@ -66,7 +66,7 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
             id: `draggable-row-${props.id}`,
           }}
         />
-        <Td colSpan={4} dataLabel={columns[0].label} data-testid="field-name">
+        <Td dataLabel={columns[0].label} data-testid="field-name">
           <div>
             {row.name}{' '}
             <Label color="blue" data-testid="section-heading">
@@ -77,7 +77,7 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
             </div>
           </div>
         </Td>
-        <Td />
+        <Td colSpan={4} />
         <Td isActionCell modifier="nowrap">
           <Button variant="secondary" onClick={() => onAddField(row)}>
             Add field

diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx
@@ -164,17 +164,17 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
                   }}
                 />
               </FormGroup>
-              <FormGroup label="Enable" fieldId="connection-type-enable">
-                <Checkbox
-                  label="Enable users in your organization to use this connection type when adding connections."
-                  id="connection-type-enable"
-                  name="connection-type-enable"
-                  data-testid="connection-type-enable"
-                  isChecked={connectionEnabled}
-                  onChange={(_e, value) => setConnectionEnabled(value)}
-                />
-              </FormGroup>
             </FormSection>
+            <FormGroup label="Enable" fieldId="connection-type-enable">
+              <Checkbox
+                label="Enable users in your organization to use this connection type when adding connections."
+                id="connection-type-enable"
+                name="connection-type-enable"
+                data-testid="connection-type-enable"
+                isChecked={connectionEnabled}
+                onChange={(_e, value) => setConnectionEnabled(value)}
+              />
+            </FormGroup>
             <FormSection title="Fields" className="pf-v5-u-mt-0">
               <FormGroup>
                 {isEnvVarConflict ? (