Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adjust resource name form spacing and help icon #3234

Merged
merged 1 commit into from
Sep 23, 2024
Merged

adjust resource name form spacing and help icon #3234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 46 additions & 51 deletions frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;
Loading