|
1 | 1 | import { injectable, postConstruct, inject } from 'inversify';
|
| 2 | +import { Message } from '@phosphor/messaging'; |
| 3 | +import { addEventListener } from '@theia/core/lib/browser/widgets/widget'; |
| 4 | +import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs'; |
2 | 5 | import { LibraryPackage, LibraryService } from '../../common/protocol/library-service';
|
3 | 6 | import { ListWidget } from '../widgets/component-list/list-widget';
|
| 7 | +import { Installable } from '../../common/protocol'; |
4 | 8 | import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
|
5 | 9 |
|
6 | 10 | @injectable()
|
@@ -33,4 +37,110 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
|
33 | 37 | ]);
|
34 | 38 | }
|
35 | 39 |
|
| 40 | + protected async install({ item, version }: { item: LibraryPackage, version: Installable.Version }): Promise<void> { |
| 41 | + const dependencies = await this.service.listDependencies({ item, version, filterSelf: true }); |
| 42 | + let installDependencies: boolean | undefined = undefined; |
| 43 | + if (dependencies.length) { |
| 44 | + const message = document.createElement('div'); |
| 45 | + message.innerHTML = `The library <b>${item.name}:${version}</b> needs ${dependencies.length === 1 ? 'another dependency' : 'some other dependencies'} currently not installed:`; |
| 46 | + const listContainer = document.createElement('div'); |
| 47 | + listContainer.style.maxHeight = '300px'; |
| 48 | + listContainer.style.overflowY = 'auto'; |
| 49 | + const list = document.createElement('ul'); |
| 50 | + list.style.listStyleType = 'none'; |
| 51 | + for (const { name } of dependencies) { |
| 52 | + const listItem = document.createElement('li'); |
| 53 | + listItem.textContent = ` - ${name}`; |
| 54 | + listItem.style.fontWeight = 'bold'; |
| 55 | + list.appendChild(listItem); |
| 56 | + } |
| 57 | + listContainer.appendChild(list); |
| 58 | + message.appendChild(listContainer); |
| 59 | + const question = document.createElement('div'); |
| 60 | + question.textContent = `Would you like to install ${dependencies.length === 1 ? 'the missing dependency' : 'all the missing dependencies'}?`; |
| 61 | + message.appendChild(question); |
| 62 | + const result = await new MessageBoxDialog({ |
| 63 | + title: `Dependencies for library ${item.name}:${version}`, |
| 64 | + message, |
| 65 | + buttons: [ |
| 66 | + 'Install all', |
| 67 | + `Install ${item.name} only`, |
| 68 | + 'Cancel' |
| 69 | + ], |
| 70 | + maxWidth: 740 // Aligned with `settings-dialog.css`. |
| 71 | + }).open(); |
| 72 | + |
| 73 | + if (result) { |
| 74 | + const { response } = result; |
| 75 | + if (response === 0) { // All |
| 76 | + installDependencies = true; |
| 77 | + } else if (response === 1) { // Current only |
| 78 | + installDependencies = false; |
| 79 | + } |
| 80 | + } |
| 81 | + } |
| 82 | + |
| 83 | + if (typeof installDependencies === 'boolean') { |
| 84 | + return this.service.install({ item, version, installDependencies }); |
| 85 | + } |
| 86 | + } |
| 87 | + |
| 88 | +} |
| 89 | + |
| 90 | +class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> { |
| 91 | + |
| 92 | + protected response: number; |
| 93 | + |
| 94 | + constructor(protected readonly options: MessageBoxDialog.Options) { |
| 95 | + super(options); |
| 96 | + this.contentNode.appendChild(this.createMessageNode(this.options.message)); |
| 97 | + (options.buttons || ['OK']).forEach((text, index) => { |
| 98 | + const button = this.createButton(text); |
| 99 | + button.classList.add(index === 0 ? 'main' : 'secondary'); |
| 100 | + this.controlPanel.appendChild(button); |
| 101 | + this.toDisposeOnDetach.push(addEventListener(button, 'click', () => { |
| 102 | + this.response = index; |
| 103 | + this.accept(); |
| 104 | + })); |
| 105 | + }); |
| 106 | + } |
| 107 | + |
| 108 | + protected onCloseRequest(message: Message): void { |
| 109 | + super.onCloseRequest(message); |
| 110 | + this.accept(); |
| 111 | + } |
| 112 | + |
| 113 | + get value(): MessageBoxDialog.Result { |
| 114 | + return { response: this.response }; |
| 115 | + } |
| 116 | + |
| 117 | + protected createMessageNode(message: string | HTMLElement): HTMLElement { |
| 118 | + if (typeof message === 'string') { |
| 119 | + const messageNode = document.createElement('div'); |
| 120 | + messageNode.textContent = message; |
| 121 | + return messageNode; |
| 122 | + } |
| 123 | + return message; |
| 124 | + } |
| 125 | + |
| 126 | + protected handleEnter(event: KeyboardEvent): boolean | void { |
| 127 | + this.response = 0; |
| 128 | + super.handleEnter(event); |
| 129 | + } |
| 130 | + |
| 131 | +} |
| 132 | +export namespace MessageBoxDialog { |
| 133 | + export interface Options extends DialogProps { |
| 134 | + /** |
| 135 | + * When empty, `['OK']` will be inferred. |
| 136 | + */ |
| 137 | + buttons?: string[]; |
| 138 | + message: string | HTMLElement; |
| 139 | + } |
| 140 | + export interface Result { |
| 141 | + /** |
| 142 | + * The index of `buttons` that was clicked. |
| 143 | + */ |
| 144 | + readonly response: number; |
| 145 | + } |
36 | 146 | }
|
0 commit comments