feat: generate the import declaration for the completion item code actions

In the completion item, the `additionalTextEdits` can only be included the changes about the
current file, the other changes should be inserted by the vscode command.

For example, when the user selects a component in an HTML file, the extension inserts the
selector in the HTML file and auto-generates the import declaration in the TS file.

Author: ivanwonder

client/src/client.ts

@@ -176,6 +176,16 @@ export class AngularLanguageClient implements vscode.Disposable {
     };
   }
 
+  async applyWorkspaceEdits(workspaceEdits: lsp.WorkspaceEdit[]) {
+    for (const edit of workspaceEdits) {
+      const workspaceEdit = this.client?.protocol2CodeConverter.asWorkspaceEdit(edit);
+      if (workspaceEdit === undefined) {
+        continue;
+      }
+      await vscode.workspace.applyEdit(workspaceEdit);
+    }
+  }
+
   private async isInAngularProject(doc: vscode.TextDocument): Promise<boolean> {
     if (this.client === null) {
       return false;

client/src/commands.ts

@@ -7,6 +7,7 @@
  */
 
 import * as vscode from 'vscode';
+import * as lsp from 'vscode-languageclient/node';
 
 import {OpenJsDocLinkCommand_Args, OpenJsDocLinkCommandId, ServerOptions} from '../../common/initialize';
 
@@ -191,6 +192,16 @@ function openJsDocLinkCommand(): Command<OpenJsDocLinkCommand_Args> {
   };
 }
 
+function applyCodeActionCommand(ngClient: AngularLanguageClient): Command {
+  return {
+    id: 'angular.applyCompletionCodeAction',
+    isTextEditorCommand: false,
+    async execute(args: lsp.WorkspaceEdit[]) {
+      await ngClient.applyWorkspaceEdits(args);
+    },
+  };
+}
+
 /**
  * Register all supported vscode commands for the Angular extension.
  * @param client language client
@@ -205,6 +216,7 @@ export function registerCommands(
     goToComponentWithTemplateFile(client),
     goToTemplateForComponent(client),
     openJsDocLinkCommand(),
+    applyCodeActionCommand(client),
   ];
 
   for (const command of commands) {

integration/lsp/ivy_spec.ts

@@ -14,7 +14,7 @@ import {URI} from 'vscode-uri';
 
 import {ProjectLanguageService, ProjectLanguageServiceParams, SuggestStrictMode, SuggestStrictModeParams} from '../../common/notifications';
 import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../../common/requests';
-import {APP_COMPONENT, APP_COMPONENT_URI, FOO_COMPONENT, FOO_COMPONENT_URI, FOO_TEMPLATE, FOO_TEMPLATE_URI, IS_BAZEL, PROJECT_PATH, TSCONFIG} from '../test_constants';
+import {APP_COMPONENT, APP_COMPONENT_MODULE_URI, APP_COMPONENT_URI, BAR_COMPONENT, BAR_COMPONENT_URI, FOO_COMPONENT, FOO_COMPONENT_URI, FOO_TEMPLATE, FOO_TEMPLATE_URI, IS_BAZEL, PROJECT_PATH, TSCONFIG} from '../test_constants';
 
 import {convertPathToFileUrl, createConnection, createTracer, initializeServer, openTextDocument} from './test_utils';
 
@@ -580,6 +580,58 @@ export class AppComponent {
     });
     expect(componentResponse).toBe(true);
   })
+
+  describe('auto-import component', () => {
+    it('should generate import in the different file', async () => {
+      openTextDocument(client, FOO_TEMPLATE, `<bar-`);
+      const response = await client.sendRequest(lsp.CompletionRequest.type, {
+        textDocument: {
+          uri: FOO_TEMPLATE_URI,
+        },
+        position: {line: 0, character: 5},
+      }) as lsp.CompletionItem[];
+      const libPostResponse = response.find(res => res.label === 'bar-component')!;
+      const detail = await client.sendRequest(lsp.CompletionResolveRequest.type, libPostResponse);
+      expect(detail.command?.command).toEqual('angular.applyCompletionCodeAction');
+      expect(detail.command?.arguments?.[0])
+          .toEqual(([{
+            'changes': {
+              [APP_COMPONENT_MODULE_URI]: [
+                {
+                  'newText': '\nimport { BarComponent } from "./bar.component";',
+                  'range':
+                      {'start': {'line': 5, 'character': 45}, 'end': {'line': 5, 'character': 45}}
+                },
+                {
+                  'newText':
+                      '{\n    declarations: [\n        AppComponent,\n        FooComponent,\n    ],\n    bootstrap: [AppComponent],\n    imports: [\n        CommonModule,\n        PostModule,\n        BarComponent\n    ]\n}',
+                  'range':
+                      {'start': {'line': 7, 'character': 10}, 'end': {'line': 17, 'character': 1}}
+                }
+              ]
+            }
+          }]
+
+                    ));
+    });
+
+    it('should generate import in the current file', async () => {
+      openTextDocument(client, BAR_COMPONENT);
+      const response = await client.sendRequest(lsp.CompletionRequest.type, {
+        textDocument: {
+          uri: BAR_COMPONENT_URI,
+        },
+        position: {line: 13, character: 16},
+      }) as lsp.CompletionItem[];
+      const libPostResponse = response.find(res => res.label === 'baz-component')!;
+      const detail = await client.sendRequest(lsp.CompletionResolveRequest.type, libPostResponse);
+      expect(detail.additionalTextEdits).toEqual([{
+        'newText':
+            '{\n    selector: \'bar-component\',\n    template: `<`,\n    standalone: true,\n    imports: [BazComponent]\n}',
+        'range': {'start': {'line': 11, 'character': 11}, 'end': {'line': 15, 'character': 1}}
+      }]);
+    });
+  });
 });
 
 describe('auto-apply optional chaining', () => {

integration/project/app/bar.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'baz-component',
+    template: `<h1>Hello {{name}}</h1>`,
+    standalone: true
+})
+export class BazComponent {
+    name = 'Angular';
+}
+
+@Component({
+    selector: 'bar-component',
+    template: `<`,
+    standalone: true
+})
+export class BarComponent {
+    name = 'Angular';
+}

integration/test_constants.ts

@@ -9,6 +9,10 @@ export const SERVER_PATH = IS_BAZEL ? join(PACKAGE_ROOT, 'server', 'index.js') :
 export const PROJECT_PATH = join(PACKAGE_ROOT, 'integration', 'project');
 export const APP_COMPONENT = join(PROJECT_PATH, 'app', 'app.component.ts');
 export const APP_COMPONENT_URI = convertPathToFileUrl(APP_COMPONENT);
+export const BAR_COMPONENT = join(PROJECT_PATH, 'app', 'bar.component.ts');
+export const BAR_COMPONENT_URI = convertPathToFileUrl(BAR_COMPONENT);
+export const APP_COMPONENT_MODULE = join(PROJECT_PATH, 'app', 'app.module.ts');
+export const APP_COMPONENT_MODULE_URI = convertPathToFileUrl(APP_COMPONENT_MODULE);
 export const FOO_TEMPLATE = join(PROJECT_PATH, 'app', 'foo.component.html');
 export const FOO_TEMPLATE_URI = convertPathToFileUrl(FOO_TEMPLATE);
 export const FOO_COMPONENT = join(PROJECT_PATH, 'app', 'foo.component.ts');

server/src/session.ts

@@ -1190,7 +1190,9 @@ export class Session {
       return item;
     }
 
-    const {kind, kindModifiers, displayParts, documentation, tags} = details;
+    const {kind, kindModifiers, displayParts, documentation, tags, codeActions} = details;
+    const codeActionsDetail = generateCommandAndTextEditsFromCodeActions(
+        codeActions ?? [], filePath, (path: string) => this.projectService.getScriptInfo(path));
     let desc = kindModifiers ? kindModifiers + ' ' : '';
     if (displayParts && displayParts.length > 0) {
       // displayParts does not contain info about kindModifiers
@@ -1206,6 +1208,8 @@ export class Session {
                  documentation, tags, (fileName) => this.getLSAndScriptInfo(fileName)?.scriptInfo)
                  .join('\n'),
     };
+    item.additionalTextEdits = codeActionsDetail.additionalTextEdits;
+    item.command = codeActionsDetail.command;
     return item;
   }
 
@@ -1340,3 +1344,67 @@ function getCodeFixesAll(
   }
   return lspCodeActions;
 }
+
+/**
+ * In the completion item, the `additionalTextEdits` can only be included the changes about the
+ * current file, the other changes should be inserted by the vscode command.
+ *
+ * For example, when the user selects a component in an HTML file, the extension inserts the
+ * selector in the HTML file and auto-generates the import declaration in the TS file.
+ *
+ * The code is copied from
+ * [here](https://github.com/microsoft/vscode/blob/4608b378a8101ff273fa5db36516da6022f66bbf/extensions/typescript-language-features/src/languageFeatures/completions.ts#L304)
+ */
+function generateCommandAndTextEditsFromCodeActions(
+    codeActions: ts.CodeAction[], currentFilePath: string,
+    getScriptInfo: (path: string) => ts.server.ScriptInfo |
+        undefined): {command?: lsp.Command; additionalTextEdits?: lsp.TextEdit[]} {
+  if (codeActions.length === 0) {
+    return {};
+  }
+
+  // Try to extract out the additionalTextEdits for the current file.
+  // Also check if we still have to apply other workspace edits and commands
+  // using a vscode command
+  const additionalTextEdits: lsp.TextEdit[] = [];
+  const commandTextEditors: lsp.WorkspaceEdit[] = [];
+
+  for (const tsAction of codeActions) {
+    const currentFileChanges =
+        tsAction.changes.filter(change => change.fileName === currentFilePath);
+    const otherWorkspaceFileChanges =
+        tsAction.changes.filter(change => change.fileName !== currentFilePath);
+
+    if (currentFileChanges.length > 0) {
+      // Apply all edits in the current file using `additionalTextEdits`
+      const additionalWorkspaceEdit =
+          tsFileTextChangesToLspWorkspaceEdit(currentFileChanges, getScriptInfo).changes;
+      if (additionalWorkspaceEdit !== undefined) {
+        for (const edit of Object.values(additionalWorkspaceEdit)) {
+          additionalTextEdits.push(...edit);
+        }
+      }
+    }
+
+    if (otherWorkspaceFileChanges.length > 0) {
+      commandTextEditors.push(
+          tsFileTextChangesToLspWorkspaceEdit(otherWorkspaceFileChanges, getScriptInfo),
+      );
+    }
+  }
+
+  let command: lsp.Command|undefined = undefined;
+  if (commandTextEditors.length > 0) {
+    // Create command that applies all edits not in the current file.
+    command = {
+      title: '',
+      command: 'angular.applyCompletionCodeAction',
+      arguments: [commandTextEditors],
+    };
+  }
+
+  return {
+    command,
+    additionalTextEdits: additionalTextEdits.length ? additionalTextEdits : undefined
+  };
+}