Skip to content

Commit

Permalink
fix: consistent forms for UI (#8922)
Browse files Browse the repository at this point in the history 
Signed-off-by: saumeya <saumeyakatyal@gmail.com>
Co-authored-by: Remington Breeze <remington@breeze.software>
  • Loading branch information
@saumeya @rbreeze
saumeya and rbreeze committed Apr 4, 2022
1 parent a5933db commit e53a3f8
Show file tree
Hide file tree
Showing 12 changed files with 277 additions and 246 deletions.
6 changes: 3 additions & 3 deletions ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
View file
Expand Up @@ -151,8 +151,8 @@ export const ApplicationCreatePanel = (props: {
)) || (
<Form
validateError={(a: models.Application) => ({
'metadata.name': !a.metadata.name && 'Application name is required',
'spec.project': !a.spec.project && 'Project name is required',
'metadata.name': !a.metadata.name && 'Application Name is required',
'spec.project': !a.spec.project && 'Project Name is required',
'spec.source.repoURL': !a.spec.source.repoURL && 'Repository URL is required',
'spec.source.targetRevision': !a.spec.source.targetRevision && a.spec.source.hasOwnProperty('chart') && 'Version is required',
'spec.source.path': !a.spec.source.path && !a.spec.source.chart && 'Path is required',
Expand Down Expand Up @@ -204,7 +204,7 @@ export const ApplicationCreatePanel = (props: {
<div className='argo-form-row'>
<FormField
formApi={api}
label='Project'
label='Project Name'
qeId='application-create-field-project'
field='spec.project'
component={AutocompleteField}
Expand Down
10 changes: 5 additions & 5 deletions ui/src/app/applications/components/applications-list/applications-summary.tsx
View file
Expand Up @@ -27,23 +27,23 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic

const attributes = [
{
title: 'APPLICATIONS:',
title: 'APPLICATIONS',
value: applications.length
},
{
title: 'SYNCED:',
title: 'SYNCED',
value: applications.filter(app => app.status.sync.status === 'Synced').length
},
{
title: 'HEALTHY:',
title: 'HEALTHY',
value: applications.filter(app => app.status.health.status === 'Healthy').length
},
{
title: 'CLUSTERS:',
title: 'CLUSTERS',
value: new Set(applications.map(app => app.spec.destination.server)).size
},
{
title: 'NAMESPACES:',
title: 'NAMESPACES',
value: new Set(applications.map(app => app.spec.destination.namespace)).size
}
];
Expand Down
111 changes: 54 additions & 57 deletions ui/src/app/settings/components/certs-list/certs-list.tsx
View file
Expand Up @@ -43,10 +43,12 @@ export class CertsList extends React.Component<RouteComponentProps<any>> {
items: [
{
title: 'Add TLS certificate',
iconClassName: 'fa fa-plus',
action: () => (this.showAddTLSCertificate = true)
},
{
title: 'Add SSH known hosts',
iconClassName: 'fa fa-plus',
action: () => (this.showAddSSHKnownHosts = true)
}
]
Expand Down Expand Up @@ -123,33 +125,31 @@ export class CertsList extends React.Component<RouteComponentProps<any>> {
</button>
</div>
}>
<div className='argo-container'>
<div className='certs-list white-box'>
<h4>Create TLS repository certificate</h4>
<Form
onSubmit={params => this.addTLSCertificate(params as NewTLSCertParams)}
getApi={api => (this.formApiTLS = api)}
preSubmit={(params: NewTLSCertParams) => ({
serverName: params.serverName,
certData: btoa(params.certData)
})}
validateError={(params: NewTLSCertParams) => ({
serverName: !params.serverName && 'Repository server name is required',
certData: !params.certData && 'Certificate data is required'
})}>
{formApiTLS => (
<form onSubmit={formApiTLS.submitForm} role='form' className='certs-list width-control' encType='multipart/form-data'>
<div className='argo-form-row'>
<FormField formApi={formApiTLS} label='Repository server name' field='serverName' component={Text} />
</div>
<div className='argo-form-row'>
<FormField formApi={formApiTLS} label='TLS certificate (PEM format)' field='certData' component={TextArea} />
</div>
</form>
)}
</Form>
</div>
</div>
<Form
onSubmit={params => this.addTLSCertificate(params as NewTLSCertParams)}
getApi={api => (this.formApiTLS = api)}
preSubmit={(params: NewTLSCertParams) => ({
serverName: params.serverName,
certData: btoa(params.certData)
})}
validateError={(params: NewTLSCertParams) => ({
serverName: !params.serverName && 'Repository Server Name is required',
certData: !params.certData && 'TLS Certificate is required'
})}>
{formApiTLS => (
<form onSubmit={formApiTLS.submitForm} role='form' className='certs-list width-control' encType='multipart/form-data'>
<div className='white-box'>
<p>CREATE TLS REPOSITORY CERTIFICATE</p>
<div className='argo-form-row'>
<FormField formApi={formApiTLS} label='Repository Server Name' field='serverName' component={Text} />
</div>
<div className='argo-form-row'>
<FormField formApi={formApiTLS} label='TLS Certificate (PEM format)' field='certData' component={TextArea} />
</div>
</div>
</form>
)}
</Form>
</SlidingPanel>
<SlidingPanel
isShown={this.showAddSSHKnownHosts}
Expand All @@ -164,36 +164,33 @@ export class CertsList extends React.Component<RouteComponentProps<any>> {
</button>
</div>
}>
<div className='argo-container'>
<div className='certs-list white-box'>
<h4>Create SSH known host entries</h4>

<p>
Paste SSH known hosts data in the text area below, one entry per line. You can use output from <code>ssh-keyscan</code> or the contents on an{' '}
<code>ssh_known_hosts</code> file verbatim. Lines starting with <code>#</code> will be treated as comments and ignored.
</p>
<p>
<strong>Make sure there are no linebreaks in the keys.</strong>
</p>
<Form
onSubmit={params => this.addSSHKnownHosts(params as NewSSHKnownHostParams)}
getApi={api => (this.formApiSSH = api)}
preSubmit={(params: NewSSHKnownHostParams) => ({
certData: btoa(params.certData)
})}
validateError={(params: NewSSHKnownHostParams) => ({
certData: !params.certData && 'SSH known hosts data is required'
})}>
{formApiSSH => (
<form onSubmit={formApiSSH.submitForm} role='form' className='certs-list width-control' encType='multipart/form-data'>
<div className='argo-form-row'>
<FormField formApi={formApiSSH} label='SSH known hosts data' field='certData' component={TextArea} />
</div>
</form>
)}
</Form>
</div>
</div>
<Form
onSubmit={params => this.addSSHKnownHosts(params as NewSSHKnownHostParams)}
getApi={api => (this.formApiSSH = api)}
preSubmit={(params: NewSSHKnownHostParams) => ({
certData: btoa(params.certData)
})}
validateError={(params: NewSSHKnownHostParams) => ({
certData: !params.certData && 'SSH known hosts data is required'
})}>
{formApiSSH => (
<form onSubmit={formApiSSH.submitForm} role='form' className='certs-list width-control' encType='multipart/form-data'>
<div className='white-box'>
<p>CREATE SSH KNOWN HOST ENTRIES</p>
<p>
Paste SSH known hosts data in the text area below, one entry per line. You can use output from <code>ssh-keyscan</code> or the contents on
an <code>ssh_known_hosts</code> file verbatim. Lines starting with <code>#</code> will be treated as comments and ignored.
</p>
<p>
<strong>Make sure there are no linebreaks in the keys.</strong>
</p>
<div className='argo-form-row'>
<FormField formApi={formApiSSH} label='SSH known hosts data' field='certData' component={TextArea} />
</div>
</div>
</form>
)}
</Form>
</SlidingPanel>
</Page>
);
Expand Down
11 changes: 7 additions & 4 deletions ui/src/app/settings/components/gpgkeys-list/gpgkeys-list.tsx
View file
Expand Up @@ -36,6 +36,7 @@ export class GpgKeysList extends React.Component<RouteComponentProps<any>> {
items: [
{
title: 'Add GnuPG key',
iconClassName: 'fa fa-plus',
action: () => (this.showAddGnuPGKey = true)
}
]
Expand Down Expand Up @@ -107,20 +108,22 @@ export class GpgKeysList extends React.Component<RouteComponentProps<any>> {
</button>
</div>
}>
<h4>Add GnuPG public key</h4>
<Form
onSubmit={params => this.addGnuPGPublicKey({keyData: params.keyData})}
getApi={api => (this.formApi = api)}
preSubmit={(params: NewGnuPGPublicKeyParams) => ({
keyData: params.keyData
})}
validateError={(params: NewGnuPGPublicKeyParams) => ({
keyData: !params.keyData && 'Key data is required'
keyData: !params.keyData && 'GnuPG public key data is required'
})}>
{formApi => (
<form onSubmit={formApi.submitForm} role='form' className='gpgkeys-list width-control' encType='multipart/form-data'>
<div className='argo-form-row'>
<FormField formApi={formApi} label='GnuPG public key data (ASCII-armored)' field='keyData' component={TextArea} />
<div className='white-box'>
<p>ADD GnuPG PUBLIC KEY</p>
<div className='argo-form-row'>
<FormField formApi={formApi} label='GnuPG public key data (ASCII-armored)' field='keyData' component={TextArea} />
</div>
</div>
</form>
)}
Expand Down
22 changes: 11 additions & 11 deletions ui/src/app/settings/components/project-details/project-details.tsx
View file
Expand Up @@ -217,6 +217,9 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
}}
header={
<div>
<button onClick={() => this.projectRoleFormApi.submitForm(null)} className='argo-button argo-button--base'>
{params.get('newRole') != null ? 'Create' : 'Update'}
</button>{' '}
<button
onClick={() => {
this.setState({token: ''});
Expand All @@ -225,9 +228,6 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
className='argo-button argo-button--base-o'>
Cancel
</button>{' '}
<button onClick={() => this.projectRoleFormApi.submitForm(null)} className='argo-button argo-button--base'>
{params.get('newRole') != null ? 'Create' : 'Update'}
</button>{' '}
{params.get('newRole') === null ? (
<button
onClick={async () => {
Expand Down Expand Up @@ -300,14 +300,6 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
}}
header={
<div>
<button
onClick={() => {
this.setState({token: ''});
ctx.navigation.goto('.', {editWindow: null, newWindow: null}, {replace: true});
}}
className='argo-button argo-button--base-o'>
Cancel
</button>{' '}
<button
onClick={() => {
if (params.get('newWindow') === null) {
Expand All @@ -318,6 +310,14 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
className='argo-button argo-button--base'>
{params.get('newWindow') != null ? 'Create' : 'Update'}
</button>{' '}
<button
onClick={() => {
this.setState({token: ''});
ctx.navigation.goto('.', {editWindow: null, newWindow: null}, {replace: true});
}}
className='argo-button argo-button--base-o'>
Cancel
</button>{' '}
{params.get('newWindow') === null ? (
<button
onClick={async () => {
Expand Down

0 comments on commit e53a3f8

Please sign in to comment.