-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13875 from influxdata/fix-members-resource-list
Update members to use ResourceList instead of IndexList
- Loading branch information
Showing
15 changed files
with
366 additions
and
259 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
ui/src/clockface/components/resource_list/ResourceEditableName.scss
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,77 @@ | ||
| /* | ||
| Editable Name for Resource Cards | ||
| ------------------------------------------------------------------------------ | ||
| */ | ||
|
|
||
| $resource-name-font-size: 17px; | ||
| $resource-name-font-weight: 600; | ||
|
|
||
| .resource-editable-name > a, | ||
| .input.resource-editable-name--input > input { | ||
| font-size: $resource-name-font-size; | ||
| font-weight: $resource-name-font-weight; | ||
| font-family: $ix-text-font; | ||
| } | ||
|
|
||
| .resource-editable-name > a { | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| line-height: $form-xs-height; | ||
| } | ||
|
|
||
| .resource-editable-name { | ||
| height: $form-xs-height; | ||
| position: relative; | ||
| display: inline-flex; | ||
| flex-wrap: nowrap; | ||
| margin-right: $ix-marg-a; | ||
| } | ||
|
|
||
| .input.resource-editable-name--input { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| /* Ensure placeholder text matches font weight of title */ | ||
| .input.resource-editable-name--input > input { | ||
| &::-webkit-input-placeholder { | ||
| font-weight: $resource-name-font-weight !important; | ||
| } | ||
| &::-moz-placeholder { | ||
| font-weight: $resource-name-font-weight !important; | ||
| } | ||
| &:-ms-input-placeholder { | ||
| font-weight: $resource-name-font-weight !important; | ||
| } | ||
| &:-moz-placeholder { | ||
| font-weight: $resource-name-font-weight !important; | ||
| } | ||
| } | ||
|
|
||
| /* Edit button hover behavior */ | ||
| .resource-editable-name--toggle { | ||
| font-size: $resource-name-font-size * 0.75; | ||
| transform: translateY(-10%); | ||
| padding: $ix-marg-a; | ||
| display: inline-block; | ||
| margin-left: $ix-marg-b; | ||
| transition: color 0.25s ease, opacity 0.25s ease, width 0.25s ease; | ||
| opacity: 0; | ||
| width: 0; | ||
| color: $g11-sidewalk; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| color: $g15-platinum; | ||
| } | ||
| } | ||
|
|
||
| .resource-editable-name:hover, | ||
| .resource-editable-name--editing { | ||
| .resource-editable-name--toggle { | ||
| opacity: 1; | ||
| width: $ix-marg-b + $ix-marg-c; | ||
| } | ||
| } |
172 changes: 172 additions & 0 deletions
172
ui/src/clockface/components/resource_list/ResourceEditableName.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,172 @@ | ||
| // Libraries | ||
| import React, {Component, KeyboardEvent, ChangeEvent, MouseEvent} from 'react' | ||
| import classnames from 'classnames' | ||
|
|
||
| // Components | ||
| import {Input, SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' | ||
| import {ClickOutside} from 'src/shared/components/ClickOutside' | ||
|
|
||
| // Types | ||
| import {ComponentSize} from '@influxdata/clockface' | ||
| import {RemoteDataState} from 'src/types' | ||
|
|
||
| // Decorators | ||
| import {ErrorHandling} from 'src/shared/decorators/errors' | ||
|
|
||
| interface Props { | ||
| onUpdate: (name: string) => void | ||
| name: string | ||
| onClick?: (e: MouseEvent<HTMLAnchorElement>) => void | ||
| placeholder?: string | ||
| noNameString: string | ||
| parentTestID: string | ||
| buttonTestID: string | ||
| inputTestID: string | ||
| hrefValue: string | ||
| } | ||
|
|
||
| interface State { | ||
| isEditing: boolean | ||
| workingName: string | ||
| loading: RemoteDataState | ||
| } | ||
|
|
||
| @ErrorHandling | ||
| class ResourceEditableName extends Component<Props, State> { | ||
| public static defaultProps = { | ||
| parentTestID: 'resource-editable-name', | ||
| buttonTestID: 'resource-editable-name--button', | ||
| inputTestID: 'resource-editable-name--input', | ||
| hrefValue: '#', | ||
| } | ||
|
|
||
| constructor(props: Props) { | ||
| super(props) | ||
|
|
||
| this.state = { | ||
| isEditing: false, | ||
| workingName: props.name, | ||
| loading: RemoteDataState.Done, | ||
| } | ||
| } | ||
|
|
||
| public render() { | ||
| const { | ||
| name, | ||
| hrefValue, | ||
| noNameString, | ||
| parentTestID, | ||
| buttonTestID, | ||
| } = this.props | ||
|
|
||
| return ( | ||
| <div className={this.className} data-testid={parentTestID}> | ||
| <SpinnerContainer | ||
| loading={this.state.loading} | ||
| spinnerComponent={<TechnoSpinner diameterPixels={20} />} | ||
| > | ||
| <a href={hrefValue} onClick={this.handleClick}> | ||
| <span>{name || noNameString}</span> | ||
| </a> | ||
| </SpinnerContainer> | ||
| <div | ||
| className="resource-editable-name--toggle" | ||
| onClick={this.handleStartEditing} | ||
| data-testid={buttonTestID} | ||
| > | ||
| <span className="icon pencil" /> | ||
| </div> | ||
| {this.input} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| private get input(): JSX.Element { | ||
| const {placeholder, inputTestID} = this.props | ||
| const {workingName, isEditing, loading} = this.state | ||
|
|
||
| if (isEditing && loading !== RemoteDataState.Loading) { | ||
| return ( | ||
| <ClickOutside onClickOutside={this.handleStopEditing}> | ||
| <Input | ||
| size={ComponentSize.ExtraSmall} | ||
| maxLength={90} | ||
| autoFocus={true} | ||
| spellCheck={false} | ||
| placeholder={placeholder} | ||
| onFocus={this.handleInputFocus} | ||
| onChange={this.handleInputChange} | ||
| onKeyDown={this.handleKeyDown} | ||
| className="resource-editable-name--input" | ||
| value={workingName} | ||
| testID={inputTestID} | ||
| /> | ||
| </ClickOutside> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| private handleClick = (e: MouseEvent<HTMLAnchorElement>) => { | ||
| const {onClick} = this.props | ||
| if (onClick) { | ||
| onClick(e) | ||
| } | ||
| } | ||
|
|
||
| private handleStartEditing = (): void => { | ||
| this.setState({isEditing: true}) | ||
| } | ||
|
|
||
| private handleStopEditing = async (): Promise<void> => { | ||
| const {workingName} = this.state | ||
| const {onUpdate} = this.props | ||
|
|
||
| this.setState({loading: RemoteDataState.Loading}) | ||
| await onUpdate(workingName) | ||
| this.setState({loading: RemoteDataState.Done, isEditing: false}) | ||
| } | ||
|
|
||
| private handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => { | ||
| this.setState({workingName: e.target.value}) | ||
| } | ||
|
|
||
| private handleKeyDown = async ( | ||
| e: KeyboardEvent<HTMLInputElement> | ||
| ): Promise<void> => { | ||
| const {onUpdate, name} = this.props | ||
| const {workingName} = this.state | ||
|
|
||
| if (e.key === 'Enter') { | ||
| e.persist() | ||
|
|
||
| if (!workingName) { | ||
| this.setState({isEditing: false, workingName: name}) | ||
|
|
||
| return | ||
| } | ||
| this.setState({loading: RemoteDataState.Loading}) | ||
| await onUpdate(workingName) | ||
| this.setState({isEditing: false, loading: RemoteDataState.Done}) | ||
| } | ||
|
|
||
| if (e.key === 'Escape') { | ||
| this.setState({isEditing: false, workingName: name}) | ||
| } | ||
| } | ||
|
|
||
| private handleInputFocus = (e: ChangeEvent<HTMLInputElement>): void => { | ||
| e.currentTarget.select() | ||
| } | ||
|
|
||
| private get className(): string { | ||
| const {name, noNameString} = this.props | ||
| const {isEditing} = this.state | ||
|
|
||
| return classnames('resource-editable-name', { | ||
| 'resource-editable-name--editing': isEditing, | ||
| 'untitled-name': name === noNameString, | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| export default ResourceEditableName |
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
Oops, something went wrong.