Skip to content

Commit

Permalink
refactor(ui): migrate UserInfo to functional component (argoproj#11793
Browse files Browse the repository at this point in the history 
)

Signed-off-by: Anton Gilgur <[email protected]>
  • Loading branch information
@agilgur5
agilgur5 authored Sep 21, 2023
1 parent 3aa85af commit 6fbfedf
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 116 deletions.
30 changes: 0 additions & 30 deletions ui/src/app/shared/components/base-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,36 +24,6 @@ export class BasePage<P extends RouteComponentProps<any>, S> extends React.Compo
return this.params.getAll(name);
}

// this allows us to set-multiple parameters at once
public setQueryParams(newParams: any) {
const params = this.params;
Object.keys(newParams).forEach(name => {
const value = newParams[name];
if (value !== null) {
params.set(name, value);
} else {
params.delete(name);
}
});
this.pushParams(params);
}

public clearQueryParams() {
this.url = this.props.match.url;
}

// this allows us to set-multiple parameters at once
public appendQueryParams(newParams: {name: string; value: string}[]) {
const params = this.params;
newParams.forEach(param => params.delete(param.name));
newParams.forEach(param => params.append(param.name, param.value));
this.pushParams(params);
}

private pushParams(params: URLSearchParams) {
this.url = `${this.props.match.url}?${params.toString()}`;
}

public set url(url: string) {
this.appContext.router.history.push(url);
}
Expand Down
167 changes: 81 additions & 86 deletions ui/src/app/userinfo/components/user-info.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,93 @@
import {Page} from 'argo-ui';
import * as React from 'react';
import {RouteComponentProps} from 'react-router-dom';
import {useEffect, useState} from 'react';
import {GetUserInfoResponse} from '../../../models';
import {uiUrl} from '../../shared/base';
import {BasePage} from '../../shared/components/base-page';
import {ErrorNotice} from '../../shared/components/error-notice';
import {Notice} from '../../shared/components/notice';
import {services} from '../../shared/services';
import {CliHelp} from './cli-help';

interface State {
error?: Error;
userInfo?: GetUserInfoResponse;
}

export class UserInfo extends BasePage<RouteComponentProps<any>, State> {
constructor(props: RouteComponentProps<any>, context: any) {
super(props, context);
this.state = {};
}
export function UserInfo() {
const [error, setError] = useState<Error>(null);
const [userInfo, setUserInfo] = useState<GetUserInfoResponse>();

public componentDidMount() {
services.info
.getUserInfo()
.then(userInfo => this.setState({error: null, userInfo}))
.catch(error => this.setState({error}));
}
useEffect(() => {
(async function getUserInfoWrapper() {
try {
const newUserInfo = await services.info.getUserInfo();
setUserInfo(newUserInfo);
setError(null);
} catch (newError) {
setError(newError);
}
})();
});

public render() {
return (
<Page title='User Info' toolbar={{breadcrumbs: [{title: 'User Info'}]}}>
{<ErrorNotice error={this.state.error} />}
<Notice>
<h3>
<i className='fa fa-user-alt' /> User Info
</h3>
{this.state.userInfo && (
<>
{this.state.userInfo.issuer && (
<dl>
<dt>Issuer:</dt>
<dd>{this.state.userInfo.issuer}</dd>
</dl>
)}
{this.state.userInfo.subject && (
<dl>
<dt>Subject:</dt>
<dd>{this.state.userInfo.subject}</dd>
</dl>
)}
{this.state.userInfo.groups && this.state.userInfo.groups.length > 0 && (
<dl>
<dt>Groups:</dt>
<dd>{this.state.userInfo.groups.join(', ')}</dd>
</dl>
)}
{this.state.userInfo.name && (
<dl>
<dt>Name:</dt>
<dd>{this.state.userInfo.name}</dd>
</dl>
)}
{this.state.userInfo.email && (
<dl>
<dt>Email:</dt>
<dd>{this.state.userInfo.email}</dd>
</dl>
)}
{this.state.userInfo.emailVerified && (
<dl>
<dt>Email Verified:</dt>
<dd>{this.state.userInfo.emailVerified}</dd>
</dl>
)}
{this.state.userInfo.serviceAccountName && (
<dl>
<dt>Service Account:</dt>
<dd>{this.state.userInfo.serviceAccountName}</dd>
</dl>
)}
{this.state.userInfo.serviceAccountNamespace && (
<dl>
<dt>Service Account Namespace:</dt>
<dd>{this.state.userInfo.serviceAccountNamespace}</dd>
</dl>
)}
</>
)}
<a className='argo-button argo-button--base-o' href={uiUrl('login')}>
<i className='fa fa-shield-alt' /> Login / Logout
</a>
</Notice>
<CliHelp />
</Page>
);
}
return (
<Page title='User Info' toolbar={{breadcrumbs: [{title: 'User Info'}]}}>
<ErrorNotice error={error} />
<Notice>
<h3>
<i className='fa fa-user-alt' /> User Info
</h3>
{userInfo && (
<>
{userInfo.issuer && (
<dl>
<dt>Issuer:</dt>
<dd>{userInfo.issuer}</dd>
</dl>
)}
{userInfo.subject && (
<dl>
<dt>Subject:</dt>
<dd>{userInfo.subject}</dd>
</dl>
)}
{userInfo.groups && userInfo.groups.length > 0 && (
<dl>
<dt>Groups:</dt>
<dd>{userInfo.groups.join(', ')}</dd>
</dl>
)}
{userInfo.name && (
<dl>
<dt>Name:</dt>
<dd>{userInfo.name}</dd>
</dl>
)}
{userInfo.email && (
<dl>
<dt>Email:</dt>
<dd>{userInfo.email}</dd>
</dl>
)}
{userInfo.emailVerified && (
<dl>
<dt>Email Verified:</dt>
<dd>{userInfo.emailVerified}</dd>
</dl>
)}
{userInfo.serviceAccountName && (
<dl>
<dt>Service Account:</dt>
<dd>{userInfo.serviceAccountName}</dd>
</dl>
)}
{userInfo.serviceAccountNamespace && (
<dl>
<dt>Service Account Namespace:</dt>
<dd>{userInfo.serviceAccountNamespace}</dd>
</dl>
)}
</>
)}
<a className='argo-button argo-button--base-o' href={uiUrl('login')}>
<i className='fa fa-shield-alt' /> Login / Logout
</a>
</Notice>
<CliHelp />
</Page>
);
}

0 comments on commit 6fbfedf

Please sign in to comment.