Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/contrib/bulkEdit/browser/preview/bulkEditPane.ts
3296 views
1
/*---------------------------------------------------------------------------------------------
2
* Copyright (c) Microsoft Corporation. All rights reserved.
3
* Licensed under the MIT License. See License.txt in the project root for license information.
4
*--------------------------------------------------------------------------------------------*/
5
6
import { ButtonBar } from '../../../../../base/browser/ui/button/button.js';
7
import type { IAsyncDataTreeViewState } from '../../../../../base/browser/ui/tree/asyncDataTree.js';
8
import { ITreeContextMenuEvent } from '../../../../../base/browser/ui/tree/tree.js';
9
import { CachedFunction, LRUCachedFunction } from '../../../../../base/common/cache.js';
10
import { CancellationToken } from '../../../../../base/common/cancellation.js';
11
import { FuzzyScore } from '../../../../../base/common/filters.js';
12
import { DisposableStore } from '../../../../../base/common/lifecycle.js';
13
import { Mutable } from '../../../../../base/common/types.js';
14
import { URI } from '../../../../../base/common/uri.js';
15
import './bulkEdit.css';
16
import { ResourceEdit } from '../../../../../editor/browser/services/bulkEditService.js';
17
import { IMultiDiffEditorOptions, IMultiDiffResourceId } from '../../../../../editor/browser/widget/multiDiffEditor/multiDiffEditorWidgetImpl.js';
18
import { IRange } from '../../../../../editor/common/core/range.js';
19
import { ITextModelService } from '../../../../../editor/common/services/resolverService.js';
20
import { localize } from '../../../../../nls.js';
21
import { MenuId } from '../../../../../platform/actions/common/actions.js';
22
import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.js';
23
import { IContextKey, IContextKeyService, RawContextKey } from '../../../../../platform/contextkey/common/contextkey.js';
24
import { IContextMenuService } from '../../../../../platform/contextview/browser/contextView.js';
25
import { IDialogService } from '../../../../../platform/dialogs/common/dialogs.js';
26
import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
27
import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
28
import { IKeybindingService } from '../../../../../platform/keybinding/common/keybinding.js';
29
import { ILabelService } from '../../../../../platform/label/common/label.js';
30
import { IOpenEvent, WorkbenchAsyncDataTree } from '../../../../../platform/list/browser/listService.js';
31
import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
32
import { IStorageService, StorageScope, StorageTarget } from '../../../../../platform/storage/common/storage.js';
33
import { defaultButtonStyles } from '../../../../../platform/theme/browser/defaultStyles.js';
34
import { IThemeService } from '../../../../../platform/theme/common/themeService.js';
35
import { ResourceLabels } from '../../../../browser/labels.js';
36
import { ViewPane } from '../../../../browser/parts/views/viewPane.js';
37
import { IViewletViewOptions } from '../../../../browser/parts/views/viewsViewlet.js';
38
import { IMultiDiffEditorResource, IResourceDiffEditorInput } from '../../../../common/editor.js';
39
import { IViewDescriptorService } from '../../../../common/views.js';
40
import { BulkEditPreviewProvider, BulkFileOperation, BulkFileOperations, BulkFileOperationType } from './bulkEditPreview.js';
41
import { BulkEditAccessibilityProvider, BulkEditDataSource, BulkEditDelegate, BulkEditElement, BulkEditIdentityProvider, BulkEditNaviLabelProvider, BulkEditSorter, CategoryElement, CategoryElementRenderer, compareBulkFileOperations, FileElement, FileElementRenderer, TextEditElement, TextEditElementRenderer } from './bulkEditTree.js';
42
import { ACTIVE_GROUP, IEditorService, SIDE_GROUP } from '../../../../services/editor/common/editorService.js';
43
44
const enum State {
45
Data = 'data',
46
Message = 'message'
47
}
48
49
export class BulkEditPane extends ViewPane {
50
51
static readonly ID = 'refactorPreview';
52
static readonly Schema = 'vscode-bulkeditpreview-multieditor';
53
54
static readonly ctxHasCategories = new RawContextKey('refactorPreview.hasCategories', false);
55
static readonly ctxGroupByFile = new RawContextKey('refactorPreview.groupByFile', true);
56
static readonly ctxHasCheckedChanges = new RawContextKey('refactorPreview.hasCheckedChanges', true);
57
58
private static readonly _memGroupByFile = `${this.ID}.groupByFile`;
59
60
private _tree!: WorkbenchAsyncDataTree<BulkFileOperations, BulkEditElement, FuzzyScore>;
61
private _treeDataSource!: BulkEditDataSource;
62
private _treeViewStates = new Map<boolean, IAsyncDataTreeViewState>();
63
private _message!: HTMLSpanElement;
64
65
private readonly _ctxHasCategories: IContextKey<boolean>;
66
private readonly _ctxGroupByFile: IContextKey<boolean>;
67
private readonly _ctxHasCheckedChanges: IContextKey<boolean>;
68
69
private readonly _disposables = new DisposableStore();
70
private readonly _sessionDisposables = new DisposableStore();
71
private _currentResolve?: (edit?: ResourceEdit[]) => void;
72
private _currentInput?: BulkFileOperations;
73
private _currentProvider?: BulkEditPreviewProvider;
74
75
constructor(
76
options: IViewletViewOptions,
77
@IInstantiationService private readonly _instaService: IInstantiationService,
78
@IEditorService private readonly _editorService: IEditorService,
79
@ILabelService private readonly _labelService: ILabelService,
80
@ITextModelService private readonly _textModelService: ITextModelService,
81
@IDialogService private readonly _dialogService: IDialogService,
82
@IContextMenuService private readonly _contextMenuService: IContextMenuService,
83
@IStorageService private readonly _storageService: IStorageService,
84
@IContextKeyService contextKeyService: IContextKeyService,
85
@IViewDescriptorService viewDescriptorService: IViewDescriptorService,
86
@IKeybindingService keybindingService: IKeybindingService,
87
@IContextMenuService contextMenuService: IContextMenuService,
88
@IConfigurationService configurationService: IConfigurationService,
89
@IOpenerService openerService: IOpenerService,
90
@IThemeService themeService: IThemeService,
91
@IHoverService hoverService: IHoverService,
92
) {
93
super(
94
{ ...options, titleMenuId: MenuId.BulkEditTitle },
95
keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, _instaService, openerService, themeService, hoverService
96
);
97
98
this.element.classList.add('bulk-edit-panel', 'show-file-icons');
99
this._ctxHasCategories = BulkEditPane.ctxHasCategories.bindTo(contextKeyService);
100
this._ctxGroupByFile = BulkEditPane.ctxGroupByFile.bindTo(contextKeyService);
101
this._ctxHasCheckedChanges = BulkEditPane.ctxHasCheckedChanges.bindTo(contextKeyService);
102
}
103
104
override dispose(): void {
105
this._tree.dispose();
106
this._disposables.dispose();
107
super.dispose();
108
}
109
110
protected override renderBody(parent: HTMLElement): void {
111
super.renderBody(parent);
112
113
const resourceLabels = this._instaService.createInstance(
114
ResourceLabels,
115
{ onDidChangeVisibility: this.onDidChangeBodyVisibility }
116
);
117
this._disposables.add(resourceLabels);
118
119
const contentContainer = document.createElement('div');
120
contentContainer.className = 'content';
121
parent.appendChild(contentContainer);
122
123
// tree
124
const treeContainer = document.createElement('div');
125
contentContainer.appendChild(treeContainer);
126
127
this._treeDataSource = this._instaService.createInstance(BulkEditDataSource);
128
this._treeDataSource.groupByFile = this._storageService.getBoolean(BulkEditPane._memGroupByFile, StorageScope.PROFILE, true);
129
this._ctxGroupByFile.set(this._treeDataSource.groupByFile);
130
131
this._tree = this._instaService.createInstance(
132
WorkbenchAsyncDataTree<BulkFileOperations, BulkEditElement, FuzzyScore>, this.id, treeContainer,
133
new BulkEditDelegate(),
134
[this._instaService.createInstance(TextEditElementRenderer), this._instaService.createInstance(FileElementRenderer, resourceLabels), this._instaService.createInstance(CategoryElementRenderer)],
135
this._treeDataSource,
136
{
137
accessibilityProvider: this._instaService.createInstance(BulkEditAccessibilityProvider),
138
identityProvider: new BulkEditIdentityProvider(),
139
expandOnlyOnTwistieClick: true,
140
multipleSelectionSupport: false,
141
keyboardNavigationLabelProvider: new BulkEditNaviLabelProvider(),
142
sorter: new BulkEditSorter(),
143
selectionNavigation: true
144
}
145
);
146
147
this._disposables.add(this._tree.onContextMenu(this._onContextMenu, this));
148
this._disposables.add(this._tree.onDidOpen(e => this._openElementInMultiDiffEditor(e)));
149
150
// buttons
151
const buttonsContainer = document.createElement('div');
152
buttonsContainer.className = 'buttons';
153
contentContainer.appendChild(buttonsContainer);
154
const buttonBar = new ButtonBar(buttonsContainer);
155
this._disposables.add(buttonBar);
156
157
const btnConfirm = buttonBar.addButton({ supportIcons: true, ...defaultButtonStyles });
158
btnConfirm.label = localize('ok', 'Apply');
159
btnConfirm.onDidClick(() => this.accept(), this, this._disposables);
160
161
const btnCancel = buttonBar.addButton({ ...defaultButtonStyles, secondary: true });
162
btnCancel.label = localize('cancel', 'Discard');
163
btnCancel.onDidClick(() => this.discard(), this, this._disposables);
164
165
// message
166
this._message = document.createElement('span');
167
this._message.className = 'message';
168
this._message.innerText = localize('empty.msg', "Invoke a code action, like rename, to see a preview of its changes here.");
169
parent.appendChild(this._message);
170
171
//
172
this._setState(State.Message);
173
}
174
175
protected override layoutBody(height: number, width: number): void {
176
super.layoutBody(height, width);
177
const treeHeight = height - 50;
178
this._tree.getHTMLElement().parentElement!.style.height = `${treeHeight}px`;
179
this._tree.layout(treeHeight, width);
180
}
181
182
private _setState(state: State): void {
183
this.element.dataset['state'] = state;
184
}
185
186
async setInput(edit: ResourceEdit[], token: CancellationToken): Promise<ResourceEdit[] | undefined> {
187
this._setState(State.Data);
188
this._sessionDisposables.clear();
189
this._treeViewStates.clear();
190
191
if (this._currentResolve) {
192
this._currentResolve(undefined);
193
this._currentResolve = undefined;
194
}
195
196
const input = await this._instaService.invokeFunction(BulkFileOperations.create, edit);
197
this._currentProvider = this._instaService.createInstance(BulkEditPreviewProvider, input);
198
this._sessionDisposables.add(this._currentProvider);
199
this._sessionDisposables.add(input);
200
201
//
202
const hasCategories = input.categories.length > 1;
203
this._ctxHasCategories.set(hasCategories);
204
this._treeDataSource.groupByFile = !hasCategories || this._treeDataSource.groupByFile;
205
this._ctxHasCheckedChanges.set(input.checked.checkedCount > 0);
206
207
this._currentInput = input;
208
209
return new Promise<ResourceEdit[] | undefined>(resolve => {
210
211
token.onCancellationRequested(() => resolve(undefined));
212
213
this._currentResolve = resolve;
214
this._setTreeInput(input);
215
216
// refresh when check state changes
217
this._sessionDisposables.add(input.checked.onDidChange(() => {
218
this._tree.updateChildren();
219
this._ctxHasCheckedChanges.set(input.checked.checkedCount > 0);
220
}));
221
});
222
}
223
224
hasInput(): boolean {
225
return Boolean(this._currentInput);
226
}
227
228
private async _setTreeInput(input: BulkFileOperations) {
229
230
const viewState = this._treeViewStates.get(this._treeDataSource.groupByFile);
231
await this._tree.setInput(input, viewState);
232
this._tree.domFocus();
233
234
if (viewState) {
235
return;
236
}
237
238
// async expandAll (max=10) is the default when no view state is given
239
const expand = [...this._tree.getNode(input).children].slice(0, 10);
240
while (expand.length > 0) {
241
const { element } = expand.shift()!;
242
if (element instanceof FileElement) {
243
await this._tree.expand(element, true);
244
}
245
if (element instanceof CategoryElement) {
246
await this._tree.expand(element, true);
247
expand.push(...this._tree.getNode(element).children);
248
}
249
}
250
}
251
252
accept(): void {
253
254
const conflicts = this._currentInput?.conflicts.list();
255
256
if (!conflicts || conflicts.length === 0) {
257
this._done(true);
258
return;
259
}
260
261
let message: string;
262
if (conflicts.length === 1) {
263
message = localize('conflict.1', "Cannot apply refactoring because '{0}' has changed in the meantime.", this._labelService.getUriLabel(conflicts[0], { relative: true }));
264
} else {
265
message = localize('conflict.N', "Cannot apply refactoring because {0} other files have changed in the meantime.", conflicts.length);
266
}
267
268
this._dialogService.warn(message).finally(() => this._done(false));
269
}
270
271
discard() {
272
this._done(false);
273
}
274
275
private _done(accept: boolean): void {
276
this._currentResolve?.(accept ? this._currentInput?.getWorkspaceEdit() : undefined);
277
this._currentInput = undefined;
278
this._setState(State.Message);
279
this._sessionDisposables.clear();
280
}
281
282
toggleChecked() {
283
const [first] = this._tree.getFocus();
284
if ((first instanceof FileElement || first instanceof TextEditElement) && !first.isDisabled()) {
285
first.setChecked(!first.isChecked());
286
} else if (first instanceof CategoryElement) {
287
first.setChecked(!first.isChecked());
288
}
289
}
290
291
groupByFile(): void {
292
if (!this._treeDataSource.groupByFile) {
293
this.toggleGrouping();
294
}
295
}
296
297
groupByType(): void {
298
if (this._treeDataSource.groupByFile) {
299
this.toggleGrouping();
300
}
301
}
302
303
toggleGrouping() {
304
const input = this._tree.getInput();
305
if (input) {
306
307
// (1) capture view state
308
const oldViewState = this._tree.getViewState();
309
this._treeViewStates.set(this._treeDataSource.groupByFile, oldViewState);
310
311
// (2) toggle and update
312
this._treeDataSource.groupByFile = !this._treeDataSource.groupByFile;
313
this._setTreeInput(input);
314
315
// (3) remember preference
316
this._storageService.store(BulkEditPane._memGroupByFile, this._treeDataSource.groupByFile, StorageScope.PROFILE, StorageTarget.USER);
317
this._ctxGroupByFile.set(this._treeDataSource.groupByFile);
318
}
319
}
320
321
private async _openElementInMultiDiffEditor(e: IOpenEvent<BulkEditElement | undefined>): Promise<void> {
322
323
const fileOperations = this._currentInput?.fileOperations;
324
if (!fileOperations) {
325
return;
326
}
327
328
let selection: IRange | undefined = undefined;
329
let fileElement: FileElement;
330
if (e.element instanceof TextEditElement) {
331
fileElement = e.element.parent;
332
selection = e.element.edit.textEdit.textEdit.range;
333
} else if (e.element instanceof FileElement) {
334
fileElement = e.element;
335
selection = e.element.edit.textEdits[0]?.textEdit.textEdit.range;
336
} else {
337
// invalid event
338
return;
339
}
340
341
const result = await this._computeResourceDiffEditorInputs.get(fileOperations);
342
const resourceId = await result.getResourceDiffEditorInputIdOfOperation(fileElement.edit);
343
const options: Mutable<IMultiDiffEditorOptions> = {
344
...e.editorOptions,
345
viewState: {
346
revealData: {
347
resource: resourceId,
348
range: selection,
349
}
350
}
351
};
352
const multiDiffSource = URI.from({ scheme: BulkEditPane.Schema });
353
const label = 'Refactor Preview';
354
this._editorService.openEditor({
355
multiDiffSource,
356
label,
357
options,
358
isTransient: true,
359
description: label,
360
resources: result.resources
361
}, e.sideBySide ? SIDE_GROUP : ACTIVE_GROUP);
362
}
363
364
private readonly _computeResourceDiffEditorInputs = new LRUCachedFunction<
365
BulkFileOperation[],
366
Promise<{ resources: IMultiDiffEditorResource[]; getResourceDiffEditorInputIdOfOperation: (operation: BulkFileOperation) => Promise<IMultiDiffResourceId> }>
367
>(async (fileOperations) => {
368
const computeDiffEditorInput = new CachedFunction<BulkFileOperation, Promise<IMultiDiffEditorResource>>(async (fileOperation) => {
369
const fileOperationUri = fileOperation.uri;
370
const previewUri = this._currentProvider!.asPreviewUri(fileOperationUri);
371
// delete
372
if (fileOperation.type & BulkFileOperationType.Delete) {
373
return {
374
original: { resource: URI.revive(previewUri) },
375
modified: { resource: undefined },
376
goToFileResource: fileOperation.uri,
377
} satisfies IMultiDiffEditorResource;
378
379
}
380
// rename, create, edits
381
else {
382
let leftResource: URI | undefined;
383
try {
384
(await this._textModelService.createModelReference(fileOperationUri)).dispose();
385
leftResource = fileOperationUri;
386
} catch {
387
leftResource = BulkEditPreviewProvider.emptyPreview;
388
}
389
return {
390
original: { resource: URI.revive(leftResource) },
391
modified: { resource: URI.revive(previewUri) },
392
goToFileResource: leftResource,
393
} satisfies IMultiDiffEditorResource;
394
}
395
});
396
397
const sortedFileOperations = fileOperations.slice().sort(compareBulkFileOperations);
398
const resources: IResourceDiffEditorInput[] = [];
399
for (const operation of sortedFileOperations) {
400
resources.push(await computeDiffEditorInput.get(operation));
401
}
402
const getResourceDiffEditorInputIdOfOperation = async (operation: BulkFileOperation): Promise<IMultiDiffResourceId> => {
403
const resource = await computeDiffEditorInput.get(operation);
404
return { original: resource.original.resource, modified: resource.modified.resource };
405
};
406
return {
407
resources,
408
getResourceDiffEditorInputIdOfOperation
409
};
410
});
411
412
private _onContextMenu(e: ITreeContextMenuEvent<any>): void {
413
414
this._contextMenuService.showContextMenu({
415
menuId: MenuId.BulkEditContext,
416
contextKeyService: this.contextKeyService,
417
getAnchor: () => e.anchor
418
});
419
}
420
}
421
422