Introduce tabs for notebook views (#19526)

* Introduce tabs for notebook views

Cards have been restructured to contain tabs instead of cells directly.
Tabs then contain the cards that are displayed. Cards may contain one or
more cards.

The panel component has been reused to implement the cells. There is
still some cleanup left to do of unused functions, but I want to reduce
the size of the PR as much as possible.
This commit is contained in:
Daniel Grajeda
2022-06-06 03:07:08 -07:00
committed by GitHub
parent 535799fe23
commit 4fd2f92e27
14 changed files with 509 additions and 209 deletions

View File

@@ -32,7 +32,6 @@ import { NotebookViewsExtension } from 'sql/workbench/services/notebook/browser/
import { TestConfigurationService } from 'sql/platform/connection/test/common/testConfigurationService';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { NotebookViewModel } from 'sql/workbench/services/notebook/browser/notebookViews/notebookViewModel';
import { isUndefinedOrNull } from 'vs/base/common/types';
import { SQL_NOTEBOOK_PROVIDER } from 'sql/workbench/services/notebook/browser/notebookService';
import { NBFORMAT, NBFORMAT_MINOR } from 'sql/workbench/common/constants';
@@ -95,25 +94,22 @@ suite('NotebookViewModel', function (): void {
test('initialize', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
viewModel.initialize(true); //is new view
let cellsWithNewView = notebookViews.getCells().filter(cell => cell.views.find(v => v.guid === viewModel.guid));
assert.strictEqual(cellsWithNewView.length, 2);
assert.strictEqual(viewModel.cells.length, 2);
assert.strictEqual(viewModel.name, defaultViewName);
assert.strictEqual(viewModel.cards.length, 2, 'View model was not initialized with the correct number of cards');
assert.strictEqual(viewModel.cells.length, 2, 'View model was not initialized with the correct number of cells');
assert.strictEqual(viewModel.name, defaultViewName, 'View model was not inirialized with the correct name');
});
test('initialize notebook with no metadata', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(notebookContentWithoutMeta);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
viewModel.initialize(true);
let cellsWithNewView = notebookViews.getCells().filter(cell => cell.views.find(v => v.guid === viewModel.guid));
assert.strictEqual(cellsWithNewView.length, 2);
assert.strictEqual(viewModel.cells.length, 2);
assert.strictEqual(viewModel.name, defaultViewName);
assert.strictEqual(viewModel.cards.length, 2, 'View model with no metadata was not initialized with the correct number of cards');
assert.strictEqual(viewModel.cells.length, 2, 'View model with no metadata was not initialized with the correct number of cells');
assert.strictEqual(viewModel.name, defaultViewName, 'View model with no metadata was not inirialized with the correct name');
});
test('rename', async function (): Promise<void> {
@@ -128,7 +124,7 @@ suite('NotebookViewModel', function (): void {
exceptionThrown = true;
}
assert.strictEqual(view.name, `${defaultViewName} 1`);
assert.strictEqual(view.name, `${defaultViewName} 1`, 'Rename did not result in expected name');
assert(!exceptionThrown);
});
@@ -146,74 +142,52 @@ suite('NotebookViewModel', function (): void {
exceptionThrown = true;
}
assert(exceptionThrown);
assert(exceptionThrown, 'Duplicating a view name should throw an exception');
});
test('hide cell', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
let viewModel = notebookViews.createNewView(defaultViewName);
let cellToHide = viewModel.cells[0];
viewModel.hideCell(cellToHide);
assert.strictEqual(viewModel.hiddenCells.length, 1);
assert(viewModel.hiddenCells.includes(cellToHide));
assert.strictEqual(viewModel.hiddenCells.length, 1, 'Hiding a cell should add it to hiddenCells');
assert(viewModel.hiddenCells.includes(cellToHide), 'Hiding a cell should add it to hiddenCells');
});
test('insert cell', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
let viewModel = notebookViews.createNewView(defaultViewName);
let cellToInsert = viewModel.cells[0];
viewModel.hideCell(cellToInsert);
assert(viewModel.hiddenCells.includes(cellToInsert));
assert(viewModel.hiddenCells.includes(cellToInsert), 'Expecting a hidden cell');
viewModel.insertCell(cellToInsert);
assert(!viewModel.hiddenCells.includes(cellToInsert));
assert(!viewModel.hiddenCells.includes(cellToInsert), 'Inserting a cell should remove it from hiddenCells');
});
test('move cell', async function (): Promise<void> {
test('move card', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
let viewModel = notebookViews.createNewView(defaultViewName);
let cellToMove = viewModel.cells[0];
viewModel.moveCard(viewModel.cards[0], 98, 99);
viewModel.moveCell(cellToMove, 98, 99);
let cellMeta = viewModel.getCellMetadata(cellToMove);
assert.strictEqual(cellMeta.x, 98);
assert.strictEqual(cellMeta.y, 99);
assert.strictEqual(viewModel.cards[0].x, 98, 'Card x position did not update on move');
assert.strictEqual(viewModel.cards[0].y, 99, 'Card y position did not update on move');
});
test('resize cell', async function (): Promise<void> {
test('resize card', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
let viewModel = notebookViews.createNewView(defaultViewName);
let cellToResize = viewModel.cells[0];
viewModel.resizeCard(viewModel.cards[0], 3, 4);
viewModel.resizeCell(cellToResize, 3, 4);
let cellMeta = viewModel.getCellMetadata(cellToResize);
assert.strictEqual(cellMeta.width, 3);
assert.strictEqual(cellMeta.height, 4);
});
test('get cell metadata', async function (): Promise<void> {
let notebookViews = await initializeNotebookViewsExtension(initialNotebookContent);
let viewModel = new NotebookViewModel(defaultViewName, notebookViews);
viewModel.initialize();
let cell = viewModel.cells[0];
let cellMeta = notebookViews.getExtensionCellMetadata(cell);
assert(!isUndefinedOrNull(cellMeta.views.find(v => v.guid === viewModel.guid)));
assert.deepStrictEqual(viewModel.getCellMetadata(cell), cellMeta.views.find(v => v.guid === viewModel.guid));
assert.strictEqual(viewModel.cards[0].width, 3, 'Card width did not update on resize');
assert.strictEqual(viewModel.cards[0].height, 4, 'Card height did not update on resize');
});
test('delete', async function (): Promise<void> {
@@ -278,6 +252,9 @@ suite('NotebookViewModel', function (): void {
await model.loadContents();
await model.requestModelLoad();
return new NotebookViewsExtension(model);
const notebookViews = new NotebookViewsExtension(model);
notebookViews.initialize();
return notebookViews;
}
});

View File

@@ -87,10 +87,8 @@ suite('NotebookViews', function (): void {
test('should not modify the notebook document until a view is created', async () => {
//Create some content
notebookViews.notebook.addCell(CellTypes.Code, 0);
const cell = notebookViews.notebook.cells[0];
assert.strictEqual(notebookViews.getExtensionMetadata(), undefined);
assert.strictEqual(notebookViews.getExtensionCellMetadata(cell), undefined);
//Check that the view is created
notebookViews.createNewView(defaultViewName);
@@ -101,11 +99,10 @@ suite('NotebookViews', function (): void {
assert.strictEqual(notebookViews.getViews().length, 0, 'notebook should not initially generate any views');
let newView = notebookViews.createNewView(defaultViewName);
let cellsWithMatchingGuid = newView.cells.filter(cell => newView.getCellMetadata(cell).guid === newView.guid);
assert.strictEqual(notebookViews.getViews().length, 1, 'only one view was created');
assert.strictEqual(newView.name, defaultViewName, 'view was not created with its given name');
assert.strictEqual(newView.cells.length, 2, 'view did not contain the same number of cells as the notebook used to create it');
assert.strictEqual(cellsWithMatchingGuid.length, newView.cells.length, 'cell metadata was not created for all cells in view');
});
test('remove view', async function (): Promise<void> {
@@ -113,10 +110,7 @@ suite('NotebookViews', function (): void {
notebookViews.removeView(newView.guid);
let cellsWithNewView = notebookViews.getCells().filter(cell => cell.views.find(v => v.guid === newView.guid));
assert.strictEqual(notebookViews.getViews().length, 0, 'view not removed from notebook metadata');
assert.strictEqual(cellsWithNewView.length, 0, 'view not removed from cells');
});
test('default view name', async function (): Promise<void> {
@@ -134,21 +128,20 @@ suite('NotebookViews', function (): void {
assert.strictEqual(notebookViews.getActiveView(), newView);
});
test('update cell', async function (): Promise<void> {
test('update card', async function (): Promise<void> {
let newView = notebookViews.createNewView();
let c1 = newView.cells[0];
let card = newView.cards[0];
let cellData = newView.getCellMetadata(c1);
cellData = { ...cellData, x: 0, y: 0, hidden: true, width: 0, height: 0 };
notebookViews.updateCell(c1, newView, cellData);
let cardData = { ...card, x: 0, y: 0, width: 0, height: 0 };
notebookViews.updateCard(card, cardData, newView);
cellData = { ...cellData, x: 1, y: 1, hidden: false, width: 1, height: 1 };
notebookViews.updateCell(c1, newView, cellData);
assert.deepStrictEqual(newView.getCellMetadata(c1), cellData, 'update did not set all values');
cardData = { ...cardData, x: 1, y: 1, width: 1, height: 1 };
notebookViews.updateCard(newView.cards[0], cardData, newView);
assert.deepStrictEqual(newView.cards[0], cardData, 'update did not set all values');
cellData = { ...cellData, x: 3 };
notebookViews.updateCell(c1, newView, { x: 3 });
assert.deepStrictEqual(newView.getCellMetadata(c1), cellData, 'update should only override set values');
cardData = { ...cardData, x: 3 };
notebookViews.updateCard(newView.cards[0], { x: 3 }, newView);
assert.deepStrictEqual(newView.cards[0], cardData, 'update should only override set values');
});
function setupServices() {

View File

@@ -20,7 +20,7 @@ import { IContextViewProvider, IDelegate } from 'vs/base/browser/ui/contextview/
import { IEditorInput, IEditorPane } from 'vs/workbench/common/editor';
import { INotebookShowOptions } from 'sql/workbench/api/common/sqlExtHost.protocol';
import { NotebookViewsExtension } from 'sql/workbench/services/notebook/browser/notebookViews/notebookViewsExtension';
import { INotebookView, INotebookViewCell, INotebookViewMetadata, INotebookViews } from 'sql/workbench/services/notebook/browser/notebookViews/notebookViews';
import { INotebookView, INotebookViewCard, INotebookViewMetadata, INotebookViews } from 'sql/workbench/services/notebook/browser/notebookViews/notebookViews';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { ITelemetryEventProperties } from 'sql/platform/telemetry/common/telemetry';
import { INotebookEditOperation } from 'sql/workbench/api/common/sqlExtHostTypes';
@@ -799,6 +799,7 @@ export class NotebookViewStub implements INotebookView {
isNew: boolean;
name: string = '';
guid: string = '';
cards: INotebookViewCard[];
cells: readonly ICellModel[] = [];
hiddenCells: readonly ICellModel[];
displayedCells: readonly ICellModel[];
@@ -811,13 +812,16 @@ export class NotebookViewStub implements INotebookView {
nameAvailable(name: string): boolean {
throw new Error('Method not implemented.');
}
getCellMetadata(cell: ICellModel): INotebookViewCell {
getCellMetadata(cell: ICellModel): INotebookViewCard {
throw new Error('Method not implemented.');
}
hideCell(cell: ICellModel): void {
throw new Error('Method not implemented.');
}
moveCell(cell: ICellModel, x: number, y: number): void {
moveCard(card: INotebookViewCard, x: number, y: number): void {
throw new Error('Method not implemented.');
}
resizeCard(card: INotebookViewCard, width: number, height: number): void {
throw new Error('Method not implemented.');
}
resizeCell(cell: ICellModel, width: number, height: number): void {
@@ -832,7 +836,7 @@ export class NotebookViewStub implements INotebookView {
getCell(guid: string): Readonly<ICellModel> {
throw new Error('Method not implemented.');
}
insertCell(cell: ICellModel): void {
insertCell(cell: ICellModel): INotebookViewCard {
throw new Error('Method not implemented.');
}
save(): void {