-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support better K8s Resource Name editing (#3167)
* Support better K8s Resource Name editing * Remove AutoFocus hook; use native react autofocus * Align to existing infrastructure around annotations * Support AXE better * Add Cypress page object for the component * Improve CodeCov for new components * Drop autoTrimmed based on UX feedback & update tests to match new design * Support read-only mode & improve updating data * Handle special character cases * Address leading dashes & safeK8sPrefix clash * Improved test examples for extreme edge cases & documentation of flags * Handle additional edge cases
- Loading branch information
1 parent
101545e
commit 7964daa
Showing
27 changed files
with
1,046 additions
and
193 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import * as _ from 'lodash-es'; | ||
| import { RecursivePartial } from '~/typeHelpers'; | ||
| import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types'; | ||
|
|
||
| export const mockK8sNameDescriptionFieldData = ( | ||
| overrides: RecursivePartial<K8sNameDescriptionFieldData> = {}, | ||
| ): K8sNameDescriptionFieldData => | ||
| _.merge( | ||
| {}, | ||
| { | ||
| name: '', | ||
| description: '', | ||
| k8sName: { | ||
| value: '', | ||
| state: { | ||
| immutable: false, | ||
| invalidLength: false, | ||
| invalidCharacters: false, | ||
| maxLength: 253, | ||
| touched: false, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...d/src/__tests__/cypress/cypress/pages/components/subComponents/K8sNameDescriptionField.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { SubComponentBase } from '~/__tests__/cypress/cypress/pages/components/subComponents/SubComponentBase'; | ||
|
|
||
| export class K8sNameDescriptionField extends SubComponentBase { | ||
| constructor(private compTestId: string, scopedBaseTestId?: string) { | ||
| super(scopedBaseTestId); | ||
| } | ||
|
|
||
| private findByScopedTestId(suffix: string): Cypress.Chainable<JQuery<HTMLElement>> { | ||
| return this.findScope().findByTestId(`${this.compTestId}-${suffix}`); | ||
| } | ||
|
|
||
| findDisplayNameInput(): Cypress.Chainable<JQuery<HTMLElement>> { | ||
| return this.findByScopedTestId('name'); | ||
| } | ||
|
|
||
| findDescriptionInput(): Cypress.Chainable<JQuery<HTMLElement>> { | ||
| return this.findByScopedTestId('description'); | ||
| } | ||
|
|
||
| findResourceEditLink(): Cypress.Chainable<JQuery<HTMLElement>> { | ||
| return this.findByScopedTestId('editResourceLink'); | ||
| } | ||
|
|
||
| findResourceNameInput(): Cypress.Chainable<JQuery<HTMLElement>> { | ||
| return this.findByScopedTestId('resourceName'); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
frontend/src/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import * as React from 'react'; | ||
| import { HelperTextItem } from '@patternfly/react-core'; | ||
| import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types'; | ||
|
|
||
| type Variants = React.ComponentProps<typeof HelperTextItem>['variant']; | ||
|
|
||
| type HelperTextItemType = React.FC<{ | ||
| k8sName: K8sNameDescriptionFieldData['k8sName']; | ||
| }>; | ||
|
|
||
| export const HelperTextItemMaxLength: HelperTextItemType = ({ k8sName }) => { | ||
| let variant: Variants = 'indeterminate'; | ||
| if (k8sName.state.invalidLength) { | ||
| variant = 'error'; | ||
| } else if (k8sName.value.trim().length > 0) { | ||
| variant = 'success'; | ||
| } | ||
|
|
||
| return ( | ||
| <HelperTextItem variant={variant} hasIcon> | ||
| Cannot exceed {k8sName.state.maxLength} characters | ||
| </HelperTextItem> | ||
| ); | ||
| }; | ||
|
|
||
| export const HelperTextItemValidCharacters: HelperTextItemType = ({ k8sName }) => { | ||
| let variant: Variants = 'indeterminate'; | ||
| if (k8sName.state.invalidCharacters) { | ||
| variant = 'error'; | ||
| } else if (k8sName.value.trim().length > 0) { | ||
| variant = 'success'; | ||
| } | ||
|
|
||
| return ( | ||
| <HelperTextItem variant={variant} hasIcon> | ||
| Must start and end with a letter or number. Valid characters include lowercase letters, | ||
| numbers, and hyphens (-). | ||
| </HelperTextItem> | ||
| ); | ||
| }; |
Oops, something went wrong.