Skip to content

Commit

Permalink
adjust resource name form spacing and help icon (#3234)
Browse files Browse the repository at this point in the history
  • Loading branch information
@christianvogt
christianvogt authored Sep 23, 2024
1 parent c9a5929 commit 854cb3c
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 86 deletions.
97 changes: 46 additions & 51 deletions frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import {
Button,
FormGroup,
FormHelperText,
FormSection,
HelperText,
HelperTextItem,
Stack,
StackItem,
TextArea,
TextInput,
} from '@patternfly/react-core';
Expand Down Expand Up @@ -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>
);
};

Expand Down
44 changes: 16 additions & 28 deletions frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import * as React from 'react';
import {
FormGroup,
HelperText,
StackItem,
TextInput,
ValidatedOptions,
} from '@patternfly/react-core';
import { FormGroup, HelperText, TextInput, ValidatedOptions } from '@patternfly/react-core';
import ResourceNameDefinitionTooltip from '~/concepts/k8s/ResourceNameDefinitionTooltip';
import {
HelperTextItemMaxLength,
Expand Down Expand Up @@ -37,11 +31,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) {
Expand All @@ -56,22 +46,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>
);
};

Expand Down
14 changes: 7 additions & 7 deletions frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 854cb3c

Please sign in to comment.