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

refactor(ui): convert a few components to use hooks #11800

Merged
merged 6 commits into from
Sep 21, 2023
Merged

refactor(ui): convert a few components to use hooks #11800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e0e49b9
refactor(ui): convert `ResourceEditor` to use hooks
agilgur5 Sep 10, 2023
e67635c
refactor(ui): convert `WorkflowDrawer` to use hooks
agilgur5 Sep 10, 2023
9ba2fcf
refactor(ui): convert `TagsInput` to use hooks
agilgur5 Sep 10, 2023
3920693
refactor(ui): convert `TagsInput` callback to `useEffect`
agilgur5 Sep 10, 2023
7e2d6af
fix lint
agilgur5 Sep 10, 2023
7c7da9b
fix(ui): `TagsInput` ref needs to call `inputProps.ref` as well
agilgur5 Sep 11, 2023
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
75 changes: 30 additions & 45 deletions ui/src/app/shared/components/resource-editor/resource-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as kubernetes from 'argo-ui/src/models/kubernetes';
import * as React from 'react';
import {useState} from 'react';
import {Button} from '../button';
import {ErrorNotice} from '../error-notice';
import {ObjectEditor} from '../object-editor/object-editor';
Expand All @@ -15,69 +16,53 @@ interface Props<T> {
onSubmit?: (value: T) => Promise<any>;
}

interface State<T> {
editing: boolean;
value: T;
error?: Error;
}
export function ResourceEditor<T extends {metadata?: kubernetes.ObjectMeta}>(props: Props<T>) {
const [editing, setEditing] = useState(props.editing);
const [value, setValue] = useState(props.value);
const [error, setError] = useState<Error>();

export class ResourceEditor<T extends {metadata?: kubernetes.ObjectMeta}> extends React.Component<Props<T>, State<T>> {
constructor(props: Readonly<Props<T>>) {
super(props);
this.state = {editing: this.props.editing, value: this.props.value};
async function submit() {
try {
if (value.metadata && !value.metadata.namespace && props.namespace) {
value.metadata.namespace = props.namespace;
}
await props.onSubmit(value);
setError(null);
} catch (newError) {
setError(newError);
}
}

public render() {
return (
<>
{this.props.title && <h4>{this.props.title}</h4>}
{this.state.error && <ErrorNotice error={this.state.error} />}
{props.title && <h4>{props.title}</h4>}
<ErrorNotice error={error} />
<ObjectEditor
key='editor'
type={'io.argoproj.workflow.v1alpha1.' + this.props.kind}
value={this.state.value}
buttons={this.renderButtons()}
onChange={value => this.setState({value})}
/>
</>
);
}

private renderButtons() {
return (
type={'io.argoproj.workflow.v1alpha1.' + props.kind}
value={value}
buttons={
<>
{this.state.editing ? (
{editing ? (
<>
{this.props.upload && <UploadButton<T> onUpload={value => this.setState({value})} onError={error => this.setState({error})} />}
{this.props.onSubmit && (
<Button icon='plus' onClick={() => this.submit()} key='submit'>
{props.upload && <UploadButton<T> onUpload={setValue} onError={setError} />}
{props.onSubmit && (
<Button icon='plus' onClick={() => submit()} key='submit'>
Submit
</Button>
)}
</>
) : (
this.props.onSubmit && (
<Button icon='edit' onClick={() => this.setState({editing: true})} key='edit'>
props.onSubmit && (
<Button icon='edit' onClick={() => setEditing(true)} key='edit'>
Edit
</Button>
)
)}
</>
);
}

private submit() {
try {
const value = this.state.value;
if (value.metadata && !value.metadata.namespace && this.props.namespace) {
value.metadata.namespace = this.props.namespace;
}
this.props
.onSubmit(value)
.then(() => this.setState({error: null}))
.catch(error => this.setState({error}));
} catch (error) {
this.setState({error});
}
}
onChange={setValue}
/>
</>
);
}
126 changes: 55 additions & 71 deletions ui/src/app/shared/components/tags-input/tags-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import classNames from 'classnames';
import * as React from 'react';
import {useEffect, useRef, useState} from 'react';

import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui';

Expand All @@ -13,30 +14,34 @@ interface TagsInputProps {

require('./tags-input.scss');

export class TagsInput extends React.Component<TagsInputProps, {tags: string[]; input: string; focused: boolean; subTags: string[]; subTagsActive: boolean}> {
private inputElement: HTMLInputElement;
private autocompleteApi: AutocompleteApi;
export function TagsInput(props: TagsInputProps) {
const inputRef = useRef<HTMLInputElement>(null);
const autoCompleteRef = useRef<AutocompleteApi>(null);

constructor(props: TagsInputProps) {
super(props);
this.state = {tags: props.tags || [], input: '', focused: false, subTags: [], subTagsActive: false};
const [tags, setTags] = useState(props.tags || []);
const [input, setInput] = useState('');
const [focused, setFocused] = useState(false);
const [subTags, setSubTags] = useState<string[]>([]);
const [subTagsActive, setSubTagsActive] = useState(false);

useEffect(() => {
if (props.onChange) {
props.onChange(tags);
setTimeout(() => autoCompleteRef.current?.refresh());
}
}, [tags]);

public render() {
return (
<div
className={classNames('tags-input argo-field', {'tags-input--focused': this.state.focused || !!this.state.input})}
onClick={() => this.inputElement && this.inputElement.focus()}>
{this.props.tags ? (
this.props.tags.map((tag, i) => (
<div className={classNames('tags-input argo-field', {'tags-input--focused': focused || !!input})} onClick={() => inputRef.current?.focus()}>
{props.tags ? (
props.tags.map((tag, i) => (
<span className='tags-input__tag' key={tag}>
{tag}{' '}
<i
className='fa fa-times'
onClick={e => {
const newTags = [...this.state.tags.slice(0, i), ...this.state.tags.slice(i + 1)];
this.setState({tags: newTags});
this.onTagsChange(newTags);
const newTags = [...tags.slice(0, i), ...tags.slice(i + 1)];
setTags(newTags);
e.stopPropagation();
}}
/>
Expand All @@ -47,82 +52,61 @@ export class TagsInput extends React.Component<TagsInputProps, {tags: string[];
)}
<Autocomplete
filterSuggestions={true}
autoCompleteRef={api => (this.autocompleteApi = api)}
value={this.state.input}
items={this.state.subTagsActive ? this.state.subTags : this.props.autocomplete}
onChange={e => this.setState({input: e.target.value})}
onSelect={value => {
if (this.props.sublistQuery != null && !this.state.subTagsActive) {
this.setState({subTagsActive: true});
this.props.sublistQuery(value).then(list => {
this.setState({
subTags: list || []
});
});
autoCompleteRef={ref => (autoCompleteRef.current = ref)}
value={input}
items={subTagsActive ? subTags : props.autocomplete}
onChange={e => setInput(e.target.value)}
onSelect={async value => {
if (props.sublistQuery != null && !subTagsActive) {
setSubTagsActive(true);
const newSubTags = await props.sublistQuery(value);
setSubTags(newSubTags || []);
} else {
if (this.state.tags.indexOf(value) === -1) {
const newTags = this.state.tags.concat(value);
this.setState({input: '', tags: newTags, subTags: []});
this.onTagsChange(newTags);
if (tags.indexOf(value) === -1) {
const newTags = tags.concat(value);
setTags(newTags);
setInput('');
setSubTags([]);
}
this.setState({subTagsActive: false});
setSubTagsActive(false);
}
}}
renderInput={props => (
renderInput={inputProps => (
<input
{...props}
placeholder={this.props.placeholder}
ref={inputEl => {
this.inputElement = inputEl;
if (props.ref) {
(props.ref as any)(inputEl);
{...inputProps}
placeholder={props.placeholder}
ref={ref => {
inputRef.current = ref;
if (typeof inputProps.ref === 'function') {
inputProps.ref(ref);
}
}}
onFocus={e => {
if (props.onFocus) {
props.onFocus(e);
}
this.setState({focused: true});
inputProps.onFocus?.(e);
setFocused(true);
}}
onBlur={e => {
if (props.onBlur) {
props.onBlur(e);
}
this.setState({focused: false});
inputProps.onBlur?.(e);
setFocused(false);
}}
onKeyDown={e => {
if (e.keyCode === 8 && this.state.tags.length > 0 && this.state.input === '') {
const newTags = this.state.tags.slice(0, this.state.tags.length - 1);
this.setState({tags: newTags});
this.onTagsChange(newTags);
}
if (props.onKeyDown) {
props.onKeyDown(e);
if (e.keyCode === 8 && tags.length > 0 && input === '') {
const newTags = tags.slice(0, tags.length - 1);
setTags(newTags);
}
inputProps.onKeyDown?.(e);
}}
onKeyUp={e => {
if (e.keyCode === 13 && this.state.input && this.state.tags.indexOf(this.state.input) === -1) {
const newTags = this.state.tags.concat(this.state.input);
this.setState({input: '', tags: newTags});
this.onTagsChange(newTags);
}
if (props.onKeyUp) {
props.onKeyUp(e);
if (e.keyCode === 13 && input && tags.indexOf(input) === -1) {
const newTags = tags.concat(input);
setTags(newTags);
setInput('');
}
inputProps.onKeyUp?.(e);
}}
/>
)}
/>
</div>
);
}

private onTagsChange(tags: string[]) {
if (this.props.onChange) {
this.props.onChange(tags);
if (this.autocompleteApi) {
setTimeout(() => this.autocompleteApi.refresh());
}
}
}
}
31 changes: 11 additions & 20 deletions ui/src/app/workflows/components/workflow-drawer/workflow-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import {useEffect, useState} from 'react';
import {Workflow} from '../../../../models';

import {InlineTable} from '../../../shared/components/inline-table/inline-table';
Expand All @@ -18,24 +19,15 @@ interface WorkflowDrawerProps {
onChange: (key: string) => void;
}

interface WorkflowDrawerState {
workflow?: Workflow;
}

export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, WorkflowDrawerState> {
constructor(props: Readonly<WorkflowDrawerProps>) {
super(props);
this.state = {};
}
export function WorkflowDrawer(props: WorkflowDrawerProps) {
const [wf, setWorkflow] = useState<Workflow>();

public componentDidMount() {
services.workflows.get(this.props.namespace, this.props.name).then(workflow => {
this.setState({workflow});
});
}

public render() {
const wf = this.state.workflow;
useEffect(() => {
(async () => {
const newWf = await services.workflows.get(props.namespace, props.name);
setWorkflow(newWf);
})();
}, [props.namespace, props.name]);

if (!wf) {
return <Loading />;
Expand Down Expand Up @@ -104,7 +96,7 @@ export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, Workflo
<WorkflowLabels
workflow={wf}
onChange={key => {
this.props.onChange(key);
props.onChange(key);
}}
/>
</div>
Expand All @@ -115,12 +107,11 @@ export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, Workflo
<WorkflowCreatorInfo
workflow={wf}
onChange={key => {
this.props.onChange(key);
props.onChange(key);
}}
/>
</div>
</div>
</div>
);
}
}