@theia/scm 1.73.0-next.9 → 1.74.0-next.0

package/src/browser/scm-repositories-widget.spec.ts

@@ -14,17 +14,20 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+import { enableJSDOM, enableReactActEnvironment } from '@theia/core/lib/browser/test/jsdom';
 let disableJSDOM = enableJSDOM();
+let disableReactActEnvironment = enableReactActEnvironment();
 
 import { expect } from 'chai';
 import * as React from '@theia/core/shared/react';
-import * as ReactDOM from '@theia/core/shared/react-dom';
+import { createRoot, Root } from '@theia/core/shared/react-dom/client';
+import { MessageLoop } from '@theia/core/shared/@lumino/messaging';
 import { Emitter } from '@theia/core/lib/common/event';
 import { LabelParser } from '@theia/core/lib/browser/label-parser';
 import { ScmRepositoriesWidget } from './scm-repositories-widget';
 import { ScmRepository } from './scm-repository';
 
+disableReactActEnvironment();
 disableJSDOM();
 
 interface MakeRepoOptions {
@@ -98,7 +101,10 @@ function createWidget(opts: CreateWidgetOptions): ScmRepositoriesWidget {
     (widget as unknown as Record<string, unknown>).contextMenuRenderer = mockContextMenuRenderer;
     (widget as unknown as Record<string, unknown>).scmContextKeys = mockScmContextKeys;
 
-    (widget as unknown as { init(): void }).init();
+    React.act(() => {
+        (widget as unknown as { init(): void }).init();
+        MessageLoop.flush();
+    });
 
     return widget;
 }
@@ -111,16 +117,20 @@ describe('ScmRepositoriesWidget', () => {
     let onChangedSelectedEmitter: Emitter<ScmRepository | undefined>;
     let executedCommands: { id: string; args: unknown[] }[];
     let widget: ScmRepositoriesWidget;
+    let renderedRoots: Array<{ container: HTMLElement; root: Root }>;
 
     before(() => {
         disableJSDOM = enableJSDOM();
+        disableReactActEnvironment = enableReactActEnvironment();
     });
 
     after(() => {
+        disableReactActEnvironment();
         disableJSDOM();
     });
 
     beforeEach(() => {
+        renderedRoots = [];
         repositories = [];
         selectedRepositoryRef = { value: undefined };
         onAddEmitter = new Emitter<ScmRepository>();
@@ -138,11 +148,40 @@ describe('ScmRepositoriesWidget', () => {
     });
 
     afterEach(() => {
-        onAddEmitter.dispose();
-        onRemoveEmitter.dispose();
-        onChangedSelectedEmitter.dispose();
+        try {
+            React.act(() => {
+                for (const { root } of renderedRoots) {
+                    root.unmount();
+                }
+                widget.dispose();
+                MessageLoop.flush();
+            });
+        } finally {
+            for (const { container } of renderedRoots) {
+                container.remove();
+            }
+            renderedRoots = [];
+            onAddEmitter.dispose();
+            onRemoveEmitter.dispose();
+            onChangedSelectedEmitter.dispose();
+        }
     });
 
+    function actAndFlush(fn: () => void): void {
+        React.act(() => {
+            fn();
+            MessageLoop.flush();
+        });
+    }
+
+    function fireRepositoryAdded(repository: ScmRepository): void {
+        actAndFlush(() => onAddEmitter.fire(repository));
+    }
+
+    function fireRepositoryRemoved(repository: ScmRepository): void {
+        actAndFlush(() => onRemoveEmitter.fire(repository));
+    }
+
     // --- Visibility ---
 
     it('should not programmatically show when there are no repositories', () => {
@@ -155,7 +194,7 @@ describe('ScmRepositoriesWidget', () => {
     it('should not programmatically show when there is exactly one repository', () => {
         const repo = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo1' });
         repositories.push(repo);
-        onAddEmitter.fire(repo);
+        fireRepositoryAdded(repo);
         // With < 2 repos the widget does NOT call setHidden(false).
         // It remains in its initial state (visible in standalone test, hidden in real ViewContainer).
         expect(widget.isHidden).to.be.false;
@@ -165,7 +204,7 @@ describe('ScmRepositoriesWidget', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo1' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
         expect(widget.isHidden).to.be.false;
     });
 
@@ -173,11 +212,11 @@ describe('ScmRepositoriesWidget', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo1' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
         expect(widget.isHidden).to.be.false;
 
         repositories.splice(1, 1);
-        onRemoveEmitter.fire(repo2);
+        fireRepositoryRemoved(repo2);
         // Widget stays visible — we never programmatically hide
         expect(widget.isHidden).to.be.false;
     });
@@ -188,11 +227,16 @@ describe('ScmRepositoriesWidget', () => {
 
     // --- Rendering ---
 
-    function renderIntoContainer(node: React.ReactNode): HTMLElement {
+    function renderIntoContainer(node: React.ReactNode): { container: HTMLElement; root: Root } {
         const container = document.createElement('div');
         document.body.appendChild(container);
-        ReactDOM.render(node as React.ReactElement, container);
-        return container;
+        const root = createRoot(container);
+        const renderedRoot = { container, root };
+        renderedRoots.push(renderedRoot);
+        React.act(() => {
+            root.render(node);
+        });
+        return renderedRoot;
     }
 
     it('should render a repo icon, folder name, and status commands for each repository', () => {
@@ -202,10 +246,10 @@ describe('ScmRepositoriesWidget', () => {
         });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -218,9 +262,6 @@ describe('ScmRepositoriesWidget', () => {
 
         const statusCmd = myrepoRow!.querySelector('.theia-scm-repository-status-command');
         expect(statusCmd).to.exist;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should apply "selected" class only to the selected repository row', () => {
@@ -228,17 +269,14 @@ describe('ScmRepositoriesWidget', () => {
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
         selectedRepositoryRef.value = repo1;
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows[0].classList.contains('selected')).to.be.true;
         expect(rows[1].classList.contains('selected')).to.be.false;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should execute the status command when clicked and stop propagation', async () => {
@@ -248,10 +286,10 @@ describe('ScmRepositoriesWidget', () => {
         });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const statusCmd = container.querySelector('.theia-scm-repository-status-command') as HTMLElement;
         expect(statusCmd).to.exist;
@@ -262,9 +300,6 @@ describe('ScmRepositoriesWidget', () => {
         expect(executedCommands).to.have.length(1);
         expect(executedCommands[0].id).to.equal('git.sync');
         expect(executedCommands[0].args).to.deep.equal(['arg1']);
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     // --- Grouping: parent-based nesting ---
@@ -285,10 +320,10 @@ describe('ScmRepositoriesWidget', () => {
             parentRootUri: '/projects/myrepo'
         });
         repositories.push(parent, wt1, wt2);
-        onAddEmitter.fire(wt1);
+        fireRepositoryAdded(wt1);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(3);
@@ -300,9 +335,6 @@ describe('ScmRepositoriesWidget', () => {
         expect(rows[2].classList.contains('child')).to.be.true;
         // Parent does not have .child class
         expect(rows[0].classList.contains('child')).to.be.false;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should show submodules nested under their parent repo', () => {
@@ -316,10 +348,10 @@ describe('ScmRepositoriesWidget', () => {
             parentRootUri: '/projects/myrepo'
         });
         repositories.push(parent, sub);
-        onAddEmitter.fire(sub);
+        fireRepositoryAdded(sub);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -331,9 +363,6 @@ describe('ScmRepositoriesWidget', () => {
         const subIcon = rows[1].querySelector('.theia-scm-repository-icon');
         expect(subIcon).to.exist;
         expect(subIcon!.className).to.include('codicon-file-submodule');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should show independent nested repos flat without grouping', () => {
@@ -346,10 +375,10 @@ describe('ScmRepositoriesWidget', () => {
             providerContextValue: 'repository'
         });
         repositories.push(gitRepo, nestedRepo);
-        onAddEmitter.fire(nestedRepo);
+        fireRepositoryAdded(nestedRepo);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         // Both repos are flat (no parent relationship set)
@@ -365,9 +394,6 @@ describe('ScmRepositoriesWidget', () => {
         const icon1 = rows[1].querySelector('.theia-scm-repository-icon');
         expect(icon0!.className).to.include('codicon-repo');
         expect(icon1!.className).to.include('codicon-repo');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should use codicon-worktree for worktrees', () => {
@@ -380,17 +406,14 @@ describe('ScmRepositoriesWidget', () => {
             parentRootUri: '/projects/myrepo'
         });
         repositories.push(parent, wt);
-        onAddEmitter.fire(wt);
+        fireRepositoryAdded(wt);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         const wtIcon = rows[1].querySelector('.theia-scm-repository-icon');
         expect(wtIcon!.className).to.include('codicon-worktree');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should handle mixed scenario: parent + worktree + submodule + independent repo', () => {
@@ -413,10 +436,10 @@ describe('ScmRepositoriesWidget', () => {
             providerContextValue: 'repository'
         });
         repositories.push(parent, wt, sub, independent);
-        onAddEmitter.fire(independent);
+        fireRepositoryAdded(independent);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         // parent (root with toggle) + wt (child) + sub (child) + independent (root, no toggle)
@@ -433,9 +456,6 @@ describe('ScmRepositoriesWidget', () => {
         // Fourth: independent, flat, no collapse toggle
         expect(rows[3].classList.contains('child')).to.be.false;
         expect(rows[3].querySelector('.theia-scm-repository-collapse-toggle')).to.not.exist;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should hide children when parent is collapsed', () => {
@@ -448,48 +468,42 @@ describe('ScmRepositoriesWidget', () => {
             parentRootUri: '/projects/myrepo'
         });
         repositories.push(parent, child);
-        onAddEmitter.fire(child);
+        fireRepositoryAdded(child);
 
         // Collapse the parent
-        (widget as unknown as { toggleCollapse(uri: string): void }).toggleCollapse(parent.provider.rootUri);
+        actAndFlush(() => (widget as unknown as { toggleCollapse(uri: string): void }).toggleCollapse(parent.provider.rootUri));
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(1);
         const toggle = rows[0].querySelector('.theia-scm-repository-collapse-toggle');
         expect(toggle).to.exist;
         expect(toggle!.className).to.include('codicon-chevron-right');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should render a ... more-button on each repository row', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo1' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/repo2' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const moreButtons = container.querySelectorAll('.theia-scm-repository-more-button');
         expect(moreButtons.length).to.equal(2);
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should create separate flat entries for repos with different provider ids and no parent', () => {
         const gitRepo = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/myrepo' });
         const svnRepo = makeRepo({ id: 'svn', label: 'SVN', rootUri: '/workspace/other' });
         repositories.push(gitRepo, svnRepo);
-        onAddEmitter.fire(svnRepo);
+        fireRepositoryAdded(svnRepo);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -497,9 +511,6 @@ describe('ScmRepositoriesWidget', () => {
         expect(rows[1].classList.contains('child')).to.be.false;
         expect(rows[0].querySelector('.theia-scm-repository-collapse-toggle')).to.not.exist;
         expect(rows[1].querySelector('.theia-scm-repository-collapse-toggle')).to.not.exist;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     // --- Duplicate name disambiguation ---
@@ -509,10 +520,10 @@ describe('ScmRepositoriesWidget', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/foo' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/bar/foo' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -525,19 +536,16 @@ describe('ScmRepositoriesWidget', () => {
         // Repo at workspace root shows "/", nested repo shows relative path
         expect(desc0!.textContent).to.equal('/');
         expect(desc1!.textContent).to.equal('bar');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should show relative descriptions when duplicate names are in sibling directories', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/projects/lib' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/vendor/lib' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -549,19 +557,16 @@ describe('ScmRepositoriesWidget', () => {
 
         expect(desc0!.textContent).to.equal('projects');
         expect(desc1!.textContent).to.equal('vendor');
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 
     it('should not show a description path when all repos have unique folder names', () => {
         const repo1 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/alpha' });
         const repo2 = makeRepo({ id: 'git', label: 'Git', rootUri: '/workspace/beta' });
         repositories.push(repo1, repo2);
-        onAddEmitter.fire(repo2);
+        fireRepositoryAdded(repo2);
 
         const rendered = (widget as unknown as { render(): React.ReactNode }).render();
-        const container = renderIntoContainer(rendered);
+        const { container } = renderIntoContainer(rendered);
 
         const rows = container.querySelectorAll('.theia-scm-repository-item');
         expect(rows.length).to.equal(2);
@@ -569,8 +574,5 @@ describe('ScmRepositoriesWidget', () => {
         // No description elements since names are unique
         expect(rows[0].querySelector('.theia-scm-repository-description')).to.not.exist;
         expect(rows[1].querySelector('.theia-scm-repository-description')).to.not.exist;
-
-        ReactDOM.unmountComponentAtNode(container);
-        container.remove();
     });
 });

package/src/browser/scm-tree-widget.tsx

@@ -17,7 +17,7 @@
 /* eslint-disable no-null/no-null, @typescript-eslint/no-explicit-any */
 
 import * as React from '@theia/core/shared/react';
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct, named } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { isOSX } from '@theia/core/lib/common/os';
 import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
@@ -36,6 +36,7 @@ import { ScmService } from './scm-service';
 import { FileStat } from '@theia/filesystem/lib/common/files';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { CorePreferences } from '@theia/core/lib/common';
+import { ILogger } from '@theia/core';
 
 @injectable()
 export class ScmTreeWidget extends TreeViewWelcomeWidget {
@@ -59,6 +60,8 @@ export class ScmTreeWidget extends TreeViewWelcomeWidget {
     @inject(DecorationsService) protected readonly decorationsService: DecorationsService;
     @inject(ColorRegistry) protected readonly colors: ColorRegistry;
     @inject(ThemeService) protected readonly themeService: ThemeService;
+    @inject(ILogger) @named('scm:ScmTreeWidget')
+    protected readonly logger: ILogger;
     @inject(ScmService) protected readonly scmService: ScmService;
 
     // TODO: Make TreeWidget generic to better type those fields.
@@ -426,7 +429,7 @@ export class ScmTreeWidget extends TreeViewWelcomeWidget {
         try {
             await resource.open();
         } catch (e) {
-            console.error('Failed to open a SCM resource', e);
+            this.logger.error('Failed to open a SCM resource', e);
             return undefined;
         }
 
@@ -561,7 +564,7 @@ export namespace ScmElement {
 
 export class ScmResourceComponent extends ScmElement<ScmResourceComponent.Props> {
 
-    override render(): JSX.Element | undefined {
+    override render(): React.JSX.Element | undefined {
         const { hover } = this.state;
         const { model, treeNode, colors, parentPath, sourceUri, decoration, labelProvider, menus, contextKeys, caption, isLightTheme } = this.props;
         const resourceUri = new URI(sourceUri);
@@ -682,7 +685,7 @@ export namespace ScmResourceComponent {
 
 export class ScmResourceGroupElement extends ScmElement<ScmResourceGroupComponent.Props> {
 
-    override render(): JSX.Element {
+    override render(): React.JSX.Element {
         const { hover } = this.state;
         const { model, treeNode, menus, contextKeys, caption } = this.props;
         return <div className={`theia-header scm-theia-header ${TREE_NODE_SEGMENT_GROW_CLASS}`}
@@ -732,7 +735,7 @@ export namespace ScmResourceGroupComponent {
 
 export class ScmResourceFolderElement extends ScmElement<ScmResourceFolderElement.Props> {
 
-    override render(): JSX.Element {
+    override render(): React.JSX.Element {
         const { hover } = this.state;
         const { model, treeNode, sourceUri, labelProvider, menus, contextKeys, caption } = this.props;
         const sourceFileStat = FileStat.dir(sourceUri);