adjust resource name form spacing and help icon

opendatahub-io · Sep 20, 2024 · f4dcf49 · f4dcf49
1 parent 4cec257
commit f4dcf49
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 80 deletions.
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
@@ -3,10 +3,9 @@ import {
   Button,
   FormGroup,
   FormHelperText,
+  FormSection,
   HelperText,
   HelperTextItem,
-  Stack,
-  StackItem,
   TextArea,
   TextInput,
 } from '@patternfly/react-core';
@@ -61,65 +60,61 @@ const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
   const { name, description, k8sName } = data;
 
   return (
-    <Stack hasGutter>
-      <StackItem>
-        <FormGroup label={nameLabel} isRequired fieldId={`${dataTestId}-name`}>
-          <TextInput
-            aria-readonly={!onDataChange}
-            data-testid={`${dataTestId}-name`}
-            id={`${dataTestId}-name`}
-            name={`${dataTestId}-name`}
-            autoFocus={autoFocusName}
-            isRequired
-            value={name}
-            onChange={(event, value) => onDataChange?.('name', value)}
-          />
-          {!showK8sField && !!onDataChange && !k8sName.state.immutable && (
-            <FormHelperText>
-              {k8sName.value && (
-                <HelperText>
-                  <HelperTextItem>
-                    The resource name will be <b>{k8sName.value}</b>.
-                  </HelperTextItem>
-                </HelperText>
-              )}
+    <FormSection style={{ margin: 0 }}>
+      <FormGroup label={nameLabel} isRequired fieldId={`${dataTestId}-name`}>
+        <TextInput
+          aria-readonly={!onDataChange}
+          data-testid={`${dataTestId}-name`}
+          id={`${dataTestId}-name`}
+          name={`${dataTestId}-name`}
+          autoFocus={autoFocusName}
+          isRequired
+          value={name}
+          onChange={(event, value) => onDataChange?.('name', value)}
+        />
+        {!showK8sField && !!onDataChange && !k8sName.state.immutable && (
+          <FormHelperText>
+            {k8sName.value && (
               <HelperText>
                 <HelperTextItem>
-                  <Button
-                    data-testid={`${dataTestId}-editResourceLink`}
-                    variant="link"
-                    isInline
-                    onClick={() => setShowK8sField(true)}
-                  >
-                    Edit resource name
-                  </Button>{' '}
-                  <ResourceNameDefinitionTooltip />
+                  The resource name will be <b>{k8sName.value}</b>.
                 </HelperTextItem>
               </HelperText>
-            </FormHelperText>
-          )}
-        </FormGroup>
-      </StackItem>
+            )}
+            <HelperText>
+              <HelperTextItem>
+                <Button
+                  data-testid={`${dataTestId}-editResourceLink`}
+                  variant="link"
+                  isInline
+                  onClick={() => setShowK8sField(true)}
+                >
+                  Edit resource name
+                </Button>{' '}
+                <ResourceNameDefinitionTooltip />
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
       <ResourceNameField
         allowEdit={showK8sField}
         dataTestId={dataTestId}
         k8sName={k8sName}
         onDataChange={onDataChange}
       />
-      <StackItem>
-        <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
-          <TextArea
-            aria-readonly={!onDataChange}
-            data-testid={`${dataTestId}-description`}
-            id={`${dataTestId}-description`}
-            name={`${dataTestId}-description`}
-            value={description}
-            onChange={(event, value) => onDataChange?.('description', value)}
-            resizeOrientation="vertical"
-          />
-        </FormGroup>
-      </StackItem>
-    </Stack>
+      <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
+        <TextArea
+          aria-readonly={!onDataChange}
+          data-testid={`${dataTestId}-description`}
+          id={`${dataTestId}-description`}
+          name={`${dataTestId}-description`}
+          value={description}
+          onChange={(event, value) => onDataChange?.('description', value)}
+          resizeOrientation="vertical"
+        />
+      </FormGroup>
+    </FormSection>
   );
 };
 

diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   FormGroup,
   HelperText,
-  StackItem,
   TextInput,
   ValidatedOptions,
 } from '@patternfly/react-core';
@@ -37,11 +36,7 @@ const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
   };
 
   if (k8sName.state.immutable) {
-    return (
-      <StackItem>
-        <FormGroup {...formGroupProps}>{k8sName.value}</FormGroup>
-      </StackItem>
-    );
+    return <FormGroup {...formGroupProps}>{k8sName.value}</FormGroup>;
   }
 
   if (!allowEdit || !onDataChange) {
@@ -56,22 +51,20 @@ const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
   }
 
   return (
-    <StackItem>
-      <FormGroup {...formGroupProps} isRequired>
-        <TextInput
-          data-testid={`${dataTestId}-resourceName`}
-          name={`${dataTestId}-resourceName`}
-          isRequired
-          value={k8sName.value}
-          onChange={(event, value) => onDataChange('k8sName', value)}
-          validated={validated}
-        />
-        <HelperText>
-          <HelperTextItemMaxLength k8sName={k8sName} />
-          <HelperTextItemValidCharacters k8sName={k8sName} />
-        </HelperText>
-      </FormGroup>
-    </StackItem>
+    <FormGroup {...formGroupProps} isRequired>
+      <TextInput
+        data-testid={`${dataTestId}-resourceName`}
+        name={`${dataTestId}-resourceName`}
+        isRequired
+        value={k8sName.value}
+        onChange={(event, value) => onDataChange('k8sName', value)}
+        validated={validated}
+      />
+      <HelperText>
+        <HelperTextItemMaxLength k8sName={k8sName} />
+        <HelperTextItemValidCharacters k8sName={k8sName} />
+      </HelperText>
+    </FormGroup>
   );
 };
 

diff --git a/frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx b/frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
+import { Popover, Stack, StackItem } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 
 const ResourceNameDefinitionTooltip: React.FC = () => (
-  <Tooltip
-    position="right"
-    content={
+  <Popover
+    bodyContent={
       <Stack hasGutter>
         <StackItem>Resource names are what your resources are labeled in OpenShift.</StackItem>
         <StackItem>Resource names are not editable after creation.</StackItem>
       </Stack>
     }
   >
-    <HelpIcon aria-label="More info" />
-  </Tooltip>
+    <DashboardPopupIconButton icon={<OutlinedQuestionCircleIcon />} aria-label="More info" />
+  </Popover>
 );
 
 export default ResourceNameDefinitionTooltip;