VersionHistoryTable: Disable other checkboxes when two are selected (#49098)

This commit is contained in:
kay delaney 2022-05-24 08:51:37 +01:00 committed by GitHub
parent a1b709626f
commit 7096bc65b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 9 deletions

View File

@ -160,11 +160,6 @@ describe('VersionSettings', () => {
expect(compareButton).toBeEnabled();
await user.click(within(tableBody).getAllByRole('checkbox')[1]);
expect(compareButton).toBeDisabled();
await user.click(within(tableBody).getAllByRole('checkbox')[1]);
await user.click(compareButton);
await waitFor(() => expect(screen.getByRole('heading', { name: /versions comparing 2 11/i })).toBeInTheDocument());

View File

@ -135,7 +135,7 @@ export class VersionsSettings extends PureComponent<Props, State> {
render() {
const { versions, viewMode, baseInfo, newInfo, isNewLatest, isLoading, diffData } = this.state;
const canCompare = versions.filter((version) => version.checked).length !== 2;
const canCompare = versions.filter((version) => version.checked).length === 2;
const showButtons = versions.length > 1;
const hasMore = versions.length >= this.limit;
@ -169,7 +169,7 @@ export class VersionsSettings extends PureComponent<Props, State> {
{isLoading ? (
<VersionsHistorySpinner msg="Fetching history list&hellip;" />
) : (
<VersionHistoryTable versions={versions} onCheck={this.onCheck} />
<VersionHistoryTable versions={versions} onCheck={this.onCheck} canCompare={canCompare} />
)}
{this.state.isAppending && <VersionsHistorySpinner msg="Fetching more entries&hellip;" />}
{showButtons && (

View File

@ -23,7 +23,7 @@ export const VersionsHistoryButtons: React.FC<VersionsButtonsType> = ({
</Button>
)}
<Tooltip content="Select two versions to start comparing" placement="bottom">
<Button type="button" disabled={canCompare} onClick={getDiff} icon="code-branch">
<Button type="button" disabled={!canCompare} onClick={getDiff} icon="code-branch">
Compare versions
</Button>
</Tooltip>

View File

@ -9,9 +9,11 @@ import { RevertDashboardModal } from './RevertDashboardModal';
type VersionsTableProps = {
versions: DecoratedRevisionModel[];
canCompare: boolean;
onCheck: (ev: React.FormEvent<HTMLInputElement>, versionId: number) => void;
};
export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, onCheck }) => (
export const VersionHistoryTable = ({ versions, canCompare, onCheck }: VersionsTableProps) => (
<table className="filter-table gf-form-group">
<thead>
<tr>
@ -34,6 +36,7 @@ export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, on
`}
checked={version.checked}
onChange={(ev) => onCheck(ev, version.id)}
disabled={!version.checked && canCompare}
/>
</td>
<td>{version.version}</td>