use dialog's checkbox and fix tests

Author: Meriem-BenIsmail

src/__tests__/test-components/GitPanel.spec.tsx

@@ -188,6 +188,8 @@ describe('GitPanel', () => {
     it('should commit when commit message is provided', async () => {
       configSpy.mockResolvedValue({ options: commitUser });
 
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
+
       await userEvent.type(screen.getAllByRole('textbox')[0], commitSummary);
       await userEvent.type(
         screen.getAllByRole('textbox')[1],
@@ -223,6 +225,7 @@ describe('GitPanel', () => {
 
     it('should prompt for user identity if explicitly configured', async () => {
       configSpy.mockResolvedValue({ options: commitUser });
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
 
       props.settings = MockSettings(false, true) as any;
       renderResult.rerender(<GitPanel {...props} />);
@@ -245,6 +248,7 @@ describe('GitPanel', () => {
     it('should prompt for user identity if user.name is not set', async () => {
       configSpy.mockImplementation(mockConfigImplementation('user.email'));
       mockUtils.showDialog.mockResolvedValue(dialogValue);
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
 
       await userEvent.type(screen.getAllByRole('textbox')[0], commitSummary);
       await userEvent.click(screen.getByRole('button', { name: 'Commit' }));
@@ -261,6 +265,7 @@ describe('GitPanel', () => {
     it('should prompt for user identity if user.email is not set', async () => {
       configSpy.mockImplementation(mockConfigImplementation('user.name'));
       mockUtils.showDialog.mockResolvedValue(dialogValue);
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
 
       await userEvent.type(screen.getAllByRole('textbox')[0], commitSummary);
       await userEvent.click(screen.getByRole('button', { name: 'Commit' }));
@@ -280,6 +285,7 @@ describe('GitPanel', () => {
 
       configSpy.mockImplementation(mockConfigImplementation('user.email'));
       mockUtils.showDialog.mockResolvedValue(dialogValue);
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
 
       await userEvent.type(screen.getAllByRole('textbox')[0], commitSummary);
       await userEvent.click(screen.getByRole('button', { name: 'Commit' }));
@@ -298,6 +304,7 @@ describe('GitPanel', () => {
       renderResult.rerender(<GitPanel {...props} />);
       configSpy.mockImplementation(mockConfigImplementation('user.name'));
       mockUtils.showDialog.mockResolvedValue(dialogValue);
+      props.model.checkNotebooksForOutputs = jest.fn().mockResolvedValue([]);
 
       await userEvent.type(screen.getAllByRole('textbox')[0], commitSummary);
       await userEvent.click(screen.getByRole('button', { name: 'Commit' }));

src/components/GitPanel.tsx

@@ -35,7 +35,6 @@ import { HistorySideBar } from './HistorySideBar';
 import { RebaseAction } from './RebaseAction';
 import { Toolbar } from './Toolbar';
 import { WarningBox } from './WarningBox';
-import { Widget } from '@lumino/widgets';
 
 /**
  * Interface describing component properties.
@@ -817,19 +816,12 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
         notebooksWithOutputs.length > 0 &&
         (clearSetting === null || clearSetting === undefined)
       ) {
-        const bodyWidget = new Widget();
-        bodyWidget.node.innerHTML = `
-            <div>
-              <p>Clear all outputs before committing?</p>
-              <label>
-                <input type="checkbox" id="dontAskAgain" /> Save my preference
-              </label>
-            </div>
-          `;
-
         const dialog = new Dialog({
           title: this.props.trans.__('Notebook outputs detected'),
-          body: bodyWidget,
+          checkbox: {
+            label: this.props.trans.__('Clear all outputs before committing?'),
+            checked: false
+          },
           buttons: [
             Dialog.cancelButton({
               label: this.props.trans.__('Keep Outputs & Commit')
@@ -847,11 +839,9 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
         }
         const accepted =
           result.button.label === this.props.trans.__('Clean & Commit');
-        const checkbox =
-          bodyWidget.node.querySelector<HTMLInputElement>('#dontAskAgain');
 
         // Remember the user’s choice if checkbox is checked
-        if (checkbox?.checked) {
+        if (result?.isChecked) {
           this.props.settings.set('clearOutputsBeforeCommit', accepted);
         }
         if (accepted) {