Skip to content

Commit

Permalink
fix: disable edit button on App Details Summary and Parameters tabs m…
Browse files Browse the repository at this point in the history 
…ulti-source apps (argoproj#12048)

* disable edit button on App Details Summary and Parameters tabs for applications with multiple sources

Signed-off-by: ishitasequeira <ishiseq29@gmail.com>

* disable editing specific fields in Application Summary Tab for Multiple Source apps

Signed-off-by: ishitasequeira <ishiseq29@gmail.com>

---------

Signed-off-by: ishitasequeira <ishiseq29@gmail.com>
Signed-off-by: schakrad <chakradari.sindhu@gmail.com>
  • Loading branch information
@ishitasequeira @schakrad
ishitasequeira authored and schakrad committed Mar 14, 2023
1 parent 8b6db36 commit 2824a4e
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 44 deletions.
1 change: 1 addition & 0 deletions ui/src/app/applications/components/application-parameters/application-parameters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,7 @@ export const ApplicationParameters = (props: {
title={props.details.type.toLocaleUpperCase()}
items={attributes}
noReadonlyMode={props.noReadonlyMode}
hasMultipleSources={app.spec.sources && app.spec.sources.length > 0}
/>
);
};
108 changes: 64 additions & 44 deletions ui/src/app/applications/components/application-summary/application-summary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {services} from '../../../shared/services';

import {ApplicationSyncOptionsField} from '../application-sync-options/application-sync-options';
import {RevisionFormField} from '../revision-form-field/revision-form-field';
import {ComparisonStatusIcon, HealthStatusIcon, syncStatusMessage, urlPattern, formatCreationTimestamp, getAppDefaultSource, getAppSpecDefaultSource} from '../utils';
import {ComparisonStatusIcon, HealthStatusIcon, syncStatusMessage, urlPattern, formatCreationTimestamp, getAppDefaultSource, getAppSpecDefaultSource, helpTip} from '../utils';
import {ApplicationRetryOptions} from '../application-retry-options/application-retry-options';
import {ApplicationRetryView} from '../application-retry-view/application-retry-view';
import {Link} from 'react-router-dom';
Expand Down Expand Up @@ -53,6 +53,8 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
const notificationSubscriptions = useEditNotificationSubscriptions(app.metadata.annotations || {});
const updateApp = notificationSubscriptions.withNotificationSubscriptions(props.updateApp);

const hasMultipleSources = app.spec.sources && app.spec.sources.length > 0;

const attributes = [
{
title: 'PROJECT',
Expand Down Expand Up @@ -159,7 +161,12 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
{
title: 'REPO URL',
view: <Repo url={source.repoURL} />,
edit: (formApi: FormApi) => <FormField formApi={formApi} field='spec.source.repoURL' component={Text} />
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('REPO URL is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<FormField formApi={formApi} field='spec.source.repoURL' component={Text} />
)
},
...(isHelm
? [
Expand All @@ -170,54 +177,62 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
{source.chart}:{source.targetRevision}
</span>
),
edit: (formApi: FormApi) => (
<DataLoader
input={{repoURL: getAppSpecDefaultSource(formApi.getFormState().values.spec).repoURL}}
load={src => services.repos.charts(src.repoURL).catch(() => new Array<models.HelmChart>())}>
{(charts: models.HelmChart[]) => (
<div className='row'>
<div className='columns small-8'>
<FormField
formApi={formApi}
field='spec.source.chart'
component={AutocompleteField}
componentProps={{
items: charts.map(chart => chart.name),
filterSuggestions: true
}}
/>
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('CHART is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<DataLoader
input={{repoURL: getAppSpecDefaultSource(formApi.getFormState().values.spec).repoURL}}
load={src => services.repos.charts(src.repoURL).catch(() => new Array<models.HelmChart>())}>
{(charts: models.HelmChart[]) => (
<div className='row'>
<div className='columns small-8'>
<FormField
formApi={formApi}
field='spec.source.chart'
component={AutocompleteField}
componentProps={{
items: charts.map(chart => chart.name),
filterSuggestions: true
}}
/>
</div>
<DataLoader
input={{charts, chart: getAppSpecDefaultSource(formApi.getFormState().values.spec).chart}}
load={async data => {
const chartInfo = data.charts.find(chart => chart.name === data.chart);
return (chartInfo && chartInfo.versions) || new Array<string>();
}}>
{(versions: string[]) => (
<div className='columns small-4'>
<FormField
formApi={formApi}
field='spec.source.targetRevision'
component={AutocompleteField}
componentProps={{
items: versions
}}
/>
<RevisionHelpIcon type='helm' top='0' />
</div>
)}
</DataLoader>
</div>
<DataLoader
input={{charts, chart: getAppSpecDefaultSource(formApi.getFormState().values.spec).chart}}
load={async data => {
const chartInfo = data.charts.find(chart => chart.name === data.chart);
return (chartInfo && chartInfo.versions) || new Array<string>();
}}>
{(versions: string[]) => (
<div className='columns small-4'>
<FormField
formApi={formApi}
field='spec.source.targetRevision'
component={AutocompleteField}
componentProps={{
items: versions
}}
/>
<RevisionHelpIcon type='helm' top='0' />
</div>
)}
</DataLoader>
</div>
)}
</DataLoader>
)
)}
</DataLoader>
)
}
]
: [
{
title: 'TARGET REVISION',
view: <Revision repoUrl={source.repoURL} revision={source.targetRevision || 'HEAD'} />,
edit: (formApi: FormApi) => <RevisionFormField helpIconTop={'0'} hideLabel={true} formApi={formApi} repoURL={source.repoURL} />
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('TARGET REVISION is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<RevisionFormField helpIconTop={'0'} hideLabel={true} formApi={formApi} repoURL={source.repoURL} />
)
},
{
title: 'PATH',
Expand All @@ -226,7 +241,12 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
{source.path ?? ''}
</Revision>
),
edit: (formApi: FormApi) => <FormField formApi={formApi} field='spec.source.path' component={Text} />
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('PATH is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<FormField formApi={formApi} field='spec.source.path' component={Text} />
)
}
]),

Expand Down
5 changes: 5 additions & 0 deletions ui/src/app/shared/components/editable-panel/editable-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {ErrorNotification, NotificationType} from 'argo-ui';
import * as classNames from 'classnames';
import * as React from 'react';
import {Form, FormApi} from 'react-form';
import {helpTip} from '../../../applications/components/utils';

import {Consumer} from '../../context';
import {Spinner} from '../spinner';
Expand All @@ -25,6 +26,7 @@ export interface EditablePanelProps<T> {
noReadonlyMode?: boolean;
view?: string | React.ReactNode;
edit?: (formApi: FormApi) => React.ReactNode;
hasMultipleSources?: boolean;
}

interface EditablePanelState {
Expand Down Expand Up @@ -64,7 +66,10 @@ export class EditablePanel<T = {}> extends React.Component<EditablePanelProps<T>
this.setState({edit: true});
this.onModeSwitch();
}}
disabled={this.props.hasMultipleSources}
className='argo-button argo-button--base'>
{this.props.hasMultipleSources &&
helpTip('Parameters are not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')}{' '}
Edit
</button>
)}
Expand Down

0 comments on commit 2824a4e

Please sign in to comment.