key: string;
additionalColumns: Array<string>;
}>;
+ loading: boolean;
onCreate: () => void;
onDelete: (definitionKey: string) => void;
onEdit: (definitionKey: string) => void;
}
export default function AlmBindingDefinitionsTable(props: AlmBindingDefinitionsTableProps) {
- const { additionalColumnsHeaders, additionalTableInfo, alm, definitions } = props;
+ const { additionalColumnsHeaders, additionalTableInfo, alm, definitions, loading } = props;
return (
<>
<h2 className="settings-sub-category-name">
{translate('settings.almintegration.table.title')}
</h2>
- <Button data-test="settings__alm-create" onClick={props.onCreate}>
+ <Button data-test="settings__alm-create" disabled={loading} onClick={props.onCreate}>
{translate('settings.almintegration.table.create')}
</Button>
</div>
</td>
))}
<td className="text-center" data-test="settings__alm-table-row-edit">
- <ButtonIcon onClick={() => props.onEdit(key)}>
+ <ButtonIcon disabled={loading} onClick={() => props.onEdit(key)}>
<EditIcon />
</ButtonIcon>
</td>
<td className="text-center" data-test="settings__alm-table-row-delete">
- <DeleteButton onClick={() => props.onDelete(key)} />
+ <DeleteButton disabled={loading} onClick={() => props.onDelete(key)} />
</td>
</tr>
))
currentAlm: AlmKeys;
definitionKeyForDeletion?: string;
definitions: AlmSettingsBindingDefinitions;
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
projectCount?: number;
}
[AlmKeys.GitHub]: [],
[AlmKeys.GitLab]: []
},
- loading: true
+ loadingAlmDefinitions: true,
+ loadingProjectCount: false
};
componentDidMount() {
return Promise.resolve();
}
- this.setState({ loading: true });
+ this.setState({ loadingAlmDefinitions: true });
return getAlmDefinitions()
.then(definitions => {
if (this.mounted) {
this.setState({
definitions,
- loading: false
+ loadingAlmDefinitions: false
});
}
})
.catch(() => {
if (this.mounted) {
- this.setState({ loading: false });
+ this.setState({ loadingAlmDefinitions: false });
}
});
};
};
handleDelete = (definitionKey: string) => {
- this.setState({ loading: true });
+ this.setState({ loadingProjectCount: true });
return countBindedProjects(definitionKey)
.then(projectCount => {
if (this.mounted) {
this.setState({
definitionKeyForDeletion: definitionKey,
- loading: false,
+ loadingProjectCount: false,
projectCount
});
}
})
.catch(() => {
if (this.mounted) {
- this.setState({ loading: false });
+ this.setState({ loadingProjectCount: false });
}
});
};
currentAlm: AlmKeys;
definitionKeyForDeletion?: string;
definitions: AlmSettingsBindingDefinitions;
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onCancel: () => void;
onConfirmDelete: (definitionKey: string) => void;
definitionKeyForDeletion,
definitions,
currentAlm,
- loading,
+ loadingAlmDefinitions,
+ loadingProjectCount,
branchesEnabled,
multipleAlmEnabled,
projectCount
{currentAlm === AlmKeys.Azure && (
<AzureTab
definitions={definitions.azure}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
{currentAlm === AlmKeys.Bitbucket && (
<BitbucketTab
definitions={definitions.bitbucket}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
branchesEnabled={branchesEnabled}
component={component}
definitions={definitions.github}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
<GitlabTab
branchesEnabled={branchesEnabled}
definitions={definitions.gitlab}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
features?: AlmIntegrationFeatureBoxProps[];
form: (props: AlmBindingDefinitionFormChildrenProps<B>) => React.ReactNode;
help?: React.ReactNode;
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onDelete: (definitionKey: string) => void;
onUpdateDefinitions: () => void;
features,
form,
help,
- loading,
+ loadingAlmDefinitions,
+ loadingProjectCount,
multipleAlmEnabled,
optionalFields
} = this.props;
features={features}
form={form}
help={help}
- loading={loading || submitting}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
onEdit={this.handleEdit}
onSubmit={this.handleSubmit}
optionalFields={optionalFields}
+ submitting={submitting}
success={success}
/>
);
features?: AlmIntegrationFeatureBoxProps[];
form: (props: AlmBindingDefinitionFormChildrenProps<B>) => React.ReactNode;
help?: React.ReactNode;
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onCancel: () => void;
onCreate: () => void;
onEdit: (definitionKey: string) => void;
onSubmit: (config: B, originalKey: string) => void;
optionalFields?: Array<keyof B>;
+ submitting: boolean;
success: boolean;
}
editedDefinition,
features = [],
form,
- loading,
+ loadingAlmDefinitions,
+ loadingProjectCount,
multipleAlmEnabled,
optionalFields,
+ submitting,
success,
help = (
<FormattedMessage
return (
<div className="big-padded">
{multipleAlmEnabled ? (
- <DeferredSpinner loading={loading}>
+ <DeferredSpinner loading={loadingAlmDefinitions}>
<AlmBindingDefinitionsTable
additionalColumnsHeaders={additionalColumnsHeaders}
additionalTableInfo={additionalTableInfo}
alm={alm}
definitions={mappedDefinitions}
+ loading={loadingProjectCount}
onCreate={props.onCreate}
onDelete={props.onDelete}
onEdit={props.onEdit}
bindingDefinition={definition || defaultBinding}
help={help}
hideKeyField={true}
- loading={loading}
+ loading={loadingAlmDefinitions || loadingProjectCount || submitting}
onCancel={props.onCancel}
onDelete={definition ? props.onDelete : undefined}
onEdit={showEdit ? props.onEdit : undefined}
export interface AzureTabProps {
definitions: AzureBindingDefinition[];
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onDelete: (definitionKey: string) => void;
onUpdateDefinitions: () => void;
}
export default function AzureTab(props: AzureTabProps) {
- const { multipleAlmEnabled, definitions, loading } = props;
+ const { multipleAlmEnabled, definitions, loadingAlmDefinitions, loadingProjectCount } = props;
return (
<div className="bordered">
}
]}
form={childProps => <AzureForm {...childProps} />}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
export interface BitbucketTabProps {
definitions: BitbucketBindingDefinition[];
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onDelete: (definitionKey: string) => void;
onUpdateDefinitions: () => void;
}
export default function BitbucketTab(props: BitbucketTabProps) {
- const { multipleAlmEnabled, definitions, loading } = props;
+ const { multipleAlmEnabled, definitions, loadingAlmDefinitions, loadingProjectCount } = props;
return (
<div className="bordered">
</p>
</>
}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
branchesEnabled: boolean;
component?: T.Component;
definitions: GithubBindingDefinition[];
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onDelete: (definitionKey: string) => void;
onUpdateDefinitions: () => void;
}
export default function GithubTab(props: GithubTabProps) {
- const { branchesEnabled, component, multipleAlmEnabled, definitions, loading } = props;
+ const {
+ branchesEnabled,
+ component,
+ multipleAlmEnabled,
+ definitions,
+ loadingAlmDefinitions,
+ loadingProjectCount
+ } = props;
return (
<div className="bordered">
}
]}
form={childProps => <GithubForm {...childProps} />}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
branchesEnabled: boolean;
component?: T.Component;
definitions: GitlabBindingDefinition[];
- loading: boolean;
+ loadingAlmDefinitions: boolean;
+ loadingProjectCount: boolean;
multipleAlmEnabled: boolean;
onDelete: (definitionKey: string) => void;
onUpdateDefinitions: () => void;
}
export default function GitlabTab(props: GitlabTabProps) {
- const { branchesEnabled, component, multipleAlmEnabled, definitions, loading } = props;
+ const {
+ branchesEnabled,
+ component,
+ multipleAlmEnabled,
+ definitions,
+ loadingAlmDefinitions,
+ loadingProjectCount
+ } = props;
return (
<div className="bordered">
}
]}
form={childProps => <GitlabForm {...childProps} />}
- loading={loading}
+ loadingAlmDefinitions={loadingAlmDefinitions}
+ loadingProjectCount={loadingProjectCount}
multipleAlmEnabled={multipleAlmEnabled}
onDelete={props.onDelete}
onUpdateDefinitions={props.onUpdateDefinitions}
]
})
).toMatchSnapshot('additional columns');
+ expect(shallowRender()).toMatchSnapshot('loading');
expect(shallowRender({ alm: AlmKeys.GitLab })).toMatchSnapshot('title adjusts for GitLab');
});
additionalColumnsHeaders={[]}
alm={AlmKeys.Azure}
definitions={[]}
+ loading={false}
onCreate={jest.fn()}
onDelete={jest.fn()}
onEdit={jest.fn()}
.then(() => {
expect(getAlmDefinitions).toBeCalled();
expect(wrapper.state().definitions).toEqual({ github: [] });
- expect(wrapper.state().loading).toBe(false);
+ expect(wrapper.state().loadingAlmDefinitions).toBe(false);
});
});
it('should render correctly', () => {
expect(shallowRender()).toMatchSnapshot('default');
- expect(shallowRender({ loading: true })).toMatchSnapshot('loading');
+ expect(shallowRender({ loadingAlmDefinitions: true, loadingProjectCount: true })).toMatchSnapshot(
+ 'loading'
+ );
expect(shallowRender({ definitionKeyForDeletion: 'keyToDelete' })).toMatchSnapshot(
'delete modal'
);
branchesEnabled={true}
currentAlm={AlmKeys.GitHub}
definitions={{ azure: [], bitbucket: [], github: [], gitlab: [] }}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onCancel={jest.fn()}
onConfirmDelete={jest.fn()}
defaultBinding={DEFAULT_BINDING}
definitions={[mockAzureBindingDefinition()]}
form={jest.fn()}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={jest.fn()}
onUpdateDefinitions={jest.fn()}
import AlmTabRenderer, { AlmTabRendererProps } from '../AlmTabRenderer';
it('should render correctly for multi-ALM binding', () => {
- expect(shallowRender({ loading: true })).toMatchSnapshot('loading');
+ expect(shallowRender({ loadingAlmDefinitions: true })).toMatchSnapshot('loading ALM definitions');
+ expect(shallowRender({ loadingProjectCount: true })).toMatchSnapshot('loading project count');
+ expect(shallowRender({ submitting: true })).toMatchSnapshot('submitting');
expect(shallowRender()).toMatchSnapshot('loaded');
expect(shallowRender({ editedDefinition: mockGithubBindingDefinition() })).toMatchSnapshot(
'editing a definition'
});
it('should render correctly for single-ALM binding', () => {
- expect(shallowRender({ loading: true, multipleAlmEnabled: false })).toMatchSnapshot();
+ expect(
+ shallowRender({ loadingAlmDefinitions: true, multipleAlmEnabled: false })
+ ).toMatchSnapshot();
expect(shallowRender({ multipleAlmEnabled: false })).toMatchSnapshot();
expect(
shallowRender({ definitions: [mockGithubBindingDefinition()], multipleAlmEnabled: false })
defaultBinding={mockGithubBindingDefinition()}
definitions={[mockGithubBindingDefinition()]}
form={jest.fn()}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onCancel={jest.fn()}
onCreate={jest.fn()}
onDelete={jest.fn()}
onEdit={jest.fn()}
onSubmit={jest.fn()}
+ submitting={true}
success={false}
{...props}
/>
return shallow(
<AzureTab
definitions={[mockAzureBindingDefinition()]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={jest.fn()}
onUpdateDefinitions={jest.fn()}
return shallow(
<BitbucketTab
definitions={[mockBitbucketBindingDefinition()]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={jest.fn()}
onUpdateDefinitions={jest.fn()}
<GithubTab
branchesEnabled={true}
definitions={[mockGithubBindingDefinition()]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={jest.fn()}
onUpdateDefinitions={jest.fn()}
<GitlabTab
branchesEnabled={true}
definitions={[mockGitlabBindingDefinition()]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={jest.fn()}
onUpdateDefinitions={jest.fn()}
</h2>
<Button
data-test="settings__alm-create"
+ disabled={false}
onClick={[MockFunction]}
>
settings.almintegration.table.create
</h2>
<Button
data-test="settings__alm-create"
+ disabled={false}
onClick={[MockFunction]}
>
settings.almintegration.table.create
data-test="settings__alm-table-row-edit"
>
<ButtonIcon
+ disabled={false}
onClick={[Function]}
>
<EditIcon />
data-test="settings__alm-table-row-delete"
>
<DeleteButton
+ disabled={false}
onClick={[Function]}
/>
</td>
data-test="settings__alm-table-row-edit"
>
<ButtonIcon
+ disabled={false}
onClick={[Function]}
>
<EditIcon />
data-test="settings__alm-table-row-delete"
>
<DeleteButton
+ disabled={false}
onClick={[Function]}
/>
</td>
</Fragment>
`;
+exports[`should render correctly: loading 1`] = `
+<Fragment>
+ <div
+ className="spacer-top big-spacer-bottom display-flex-space-between"
+ >
+ <h2
+ className="settings-sub-category-name"
+ >
+ settings.almintegration.table.title
+ </h2>
+ <Button
+ data-test="settings__alm-create"
+ disabled={false}
+ onClick={[MockFunction]}
+ >
+ settings.almintegration.table.create
+ </Button>
+ </div>
+ <table
+ className="data zebra fixed spacer-bottom"
+ >
+ <thead>
+ <tr>
+ <th>
+ settings.almintegration.table.column.name
+ </th>
+ <th
+ className="action-small text-center"
+ >
+ settings.almintegration.table.column.edit
+ </th>
+ <th
+ className="action text-center"
+ >
+ settings.almintegration.table.column.delete
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ data-test="settings__alm-empty-table"
+ >
+ <td
+ colSpan={3}
+ >
+ settings.almintegration.table.empty.azure
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</Fragment>
+`;
+
exports[`should render correctly: title adjusts for GitLab 1`] = `
<Fragment>
<div
</h2>
<Button
data-test="settings__alm-create"
+ disabled={false}
onClick={[MockFunction]}
>
settings.almintegration.table.create
"gitlab": Array [],
}
}
- loading={true}
+ loadingAlmDefinitions={true}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onCancel={[Function]}
onConfirmDelete={[Function]}
/>
<AzureTab
definitions={Array []}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
/>
<BitbucketTab
definitions={Array []}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
<GithubTab
branchesEnabled={true}
definitions={Array []}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
<GithubTab
branchesEnabled={true}
definitions={Array []}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
<GitlabTab
branchesEnabled={true}
definitions={Array []}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
<GithubTab
branchesEnabled={true}
definitions={Array []}
- loading={true}
+ loadingAlmDefinitions={true}
+ loadingProjectCount={true}
multipleAlmEnabled={false}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
]
}
form={[MockFunction]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onCancel={[Function]}
onCreate={[Function]}
onDelete={[MockFunction]}
onEdit={[Function]}
onSubmit={[Function]}
+ submitting={false}
success={false}
/>
`;
},
]
}
+ loading={false}
onCreate={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
},
]
}
+ loading={false}
onCreate={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
</div>
`;
-exports[`should render correctly for multi-ALM binding: loading 1`] = `
+exports[`should render correctly for multi-ALM binding: loading ALM definitions 1`] = `
<div
className="big-padded"
>
},
]
}
+ loading={false}
+ onCreate={[MockFunction]}
+ onDelete={[MockFunction]}
+ onEdit={[MockFunction]}
+ />
+ </DeferredSpinner>
+</div>
+`;
+
+exports[`should render correctly for multi-ALM binding: loading project count 1`] = `
+<div
+ className="big-padded"
+>
+ <DeferredSpinner
+ loading={false}
+ timeout={100}
+ >
+ <AlmBindingDefinitionsTable
+ additionalColumnsHeaders={
+ Array [
+ "url",
+ "app_id",
+ ]
+ }
+ alm="github"
+ definitions={
+ Array [
+ Object {
+ "additionalColumns": Array [
+ "http://github.enterprise.com",
+ "123456",
+ ],
+ "key": "key",
+ },
+ ]
+ }
+ loading={true}
+ onCreate={[MockFunction]}
+ onDelete={[MockFunction]}
+ onEdit={[MockFunction]}
+ />
+ </DeferredSpinner>
+</div>
+`;
+
+exports[`should render correctly for multi-ALM binding: submitting 1`] = `
+<div
+ className="big-padded"
+>
+ <DeferredSpinner
+ loading={false}
+ timeout={100}
+ >
+ <AlmBindingDefinitionsTable
+ additionalColumnsHeaders={
+ Array [
+ "url",
+ "app_id",
+ ]
+ }
+ alm="github"
+ definitions={
+ Array [
+ Object {
+ "additionalColumns": Array [
+ "http://github.enterprise.com",
+ "123456",
+ ],
+ "key": "key",
+ },
+ ]
+ }
+ loading={false}
onCreate={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
},
]
}
+ loading={false}
onCreate={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
/>
}
hideKeyField={true}
- loading={false}
+ loading={true}
onCancel={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
/>
}
hideKeyField={true}
- loading={false}
+ loading={true}
onCancel={[MockFunction]}
onDelete={[MockFunction]}
onEdit={[MockFunction]}
]
}
form={[Function]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
</p>
</React.Fragment>
}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
]
}
form={[Function]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
]
}
form={[Function]}
- loading={false}
+ loadingAlmDefinitions={false}
+ loadingProjectCount={false}
multipleAlmEnabled={true}
onDelete={[MockFunction]}
onUpdateDefinitions={[MockFunction]}
projects / sonarqube.git / commitdiff