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

public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx

@@ -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());

public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx

@@ -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 && (

public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx

@@ -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>

public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx

@@ -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>