refactor: migrate to new ts solution setup & @vscode-elements

.eslintrc.json

@@ -70,5 +70,5 @@
       "rules": {}
     }
   ],
-  "extends": ["plugin:storybook/recommended"]
+  "extends": []
 }

.github/CODEOWNERS

@@ -34,10 +34,10 @@
 
 /libs/vscode/nx-commands-view/ @MaxKless
 
-/libs/vscode/output-channels/ @MaxKless
-
 /libs/vscode/nx-project-view/ @MaxKless
 
+/libs/vscode/output-channels/ @MaxKless
+
 /libs/vscode/project-details/ @MaxKless
 
 /libs/language-server/types/ @MaxKless

.github/workflows/ci_checks.yml

@@ -28,12 +28,22 @@ jobs:
       - run: git branch --track master origin/master
         if: ${{ github.event_name == 'pull_request' }}
 
+      - name: Gradle Wrapper Validation
+        uses: gradle/actions/wrapper-validation@v3
+
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: zulu
+          java-version: ${{ env.JAVA_VERSION }}
+          cache: gradle
+
       - name: Ensure Nx Cloud Agents are configured correctly
         run: yarn dlx nx-cloud validate --workflow-file=./.nx/workflows/agents.yaml
 
       - name: Start the Nx Cloud CI Run
         run: |
-          yarn dlx nx-cloud start-ci-run --distribute-on="4 linux-medium-js" --with-env-vars="GIT_AUTHOR_EMAIL,GIT_AUTHOR_NAME,GIT_COMMITTER_EMAIL,GIT_COMMITTER_NAME,NX_CI_EXECUTION_ENV,NX_VERBOSE_LOGGING"
+          yarn dlx nx-cloud start-ci-run --distribute-on="4 linux-medium-plus-js" --with-env-vars="GIT_AUTHOR_EMAIL,GIT_AUTHOR_NAME,GIT_COMMITTER_EMAIL,GIT_COMMITTER_NAME,NX_CI_EXECUTION_ENV,NX_VERBOSE_LOGGING"
 
       - uses: browser-actions/setup-chrome@v1
 
@@ -49,16 +59,6 @@ jobs:
       - name: Install NPM dependencies
         run: yarn install --immutable
 
-      - name: Gradle Wrapper Validation
-        uses: gradle/actions/wrapper-validation@v3
-
-      - name: Setup Java
-        uses: actions/setup-java@v3
-        with:
-          distribution: zulu
-          java-version: ${{ env.JAVA_VERSION }}
-          cache: gradle
-
       # We intentionally put the gradle tasks first because their artifacts are needed for project graph construction
       # and we do not want to give the false impression that the artifact download time is part of nx commands.
       - name: Gradle artifacts and formatting
@@ -75,7 +75,7 @@ jobs:
       - name: Run Nx Cloud conformance checks
         run: yarn nx-cloud record -- yarn nx-cloud conformance:check
 
-      - run: yarn nx affected --targets=lint,test,build,e2e-ci --configuration=ci --exclude=nx-console --parallel=3
+      - run: yarn nx affected --targets=lint,test,build,e2e-ci,typecheck --configuration=ci --exclude=nx-console --parallel=3
         timeout-minutes: 45
 
   main-windows:
@@ -125,6 +125,6 @@ jobs:
           java-version: ${{ env.JAVA_VERSION }}
           cache: gradle
 
-      # There's no need to check formatting & linting again on windows, sometimes there's a timing issue with intellij:build so run it up front
+      # There's no need to check formatting, linting & typecheck again on windows
       - run: yarn nx affected --targets="build,test,e2e-ci" --configuration=ci --exclude=nx-console --parallel=3
         timeout-minutes: 45

.gitignore

@@ -8,6 +8,7 @@ build/
 /osbuilds
 /.angular
 /cypress
+**/out-tsc
 
 # dependencies
 **/node_modules
@@ -47,6 +48,7 @@ yarn-error.log
 testem.log
 *.log
 /typings
+**/test-output
 
 # System Files
 .DS_Store

apps/generate-ui-v2-e2e/cypress.config.ts

@@ -11,5 +11,6 @@ export default defineConfig({
       ciWebServerCommand: 'nx run generate-ui-v2-e2e:serve',
     }),
     baseUrl: 'http://localhost:4200',
+    taskTimeout: 150000,
   },
 });

apps/generate-ui-v2-e2e/project.json

@@ -12,7 +12,7 @@
     "serve": {
       "executor": "@nx/web:file-server",
       "options": {
-        "staticFilePath": "apps/generate-ui-v2-e2e/dist/generate-ui-v2",
+        "staticFilePath": "dist/apps/generate-ui-v2-e2e/generate-ui-v2",
         "buildTarget": "generate-ui-v2-e2e:setup-lit-dir",
         "watch": false
       },

apps/generate-ui-v2-e2e/setup-lit-dir.mjs

@@ -3,12 +3,14 @@ import { normalize } from 'node:path';
 
 fs.copySync(
   normalize('../../dist/apps/generate-ui-v2'),
-  normalize('./dist/generate-ui-v2')
+  normalize('../../dist/apps/generate-ui-v2-e2e/generate-ui-v2')
 );
 
-fs.createFileSync(normalize('./dist/generate-ui-v2/index.html'));
+fs.createFileSync(
+  normalize('../../dist/apps/generate-ui-v2-e2e/generate-ui-v2/index.html')
+);
 fs.writeFileSync(
-  normalize('./dist/generate-ui-v2/index.html'),
+  normalize('../../dist/apps/generate-ui-v2-e2e/generate-ui-v2/index.html'),
   `
     <!DOCTYPE html>
     <html lang="en">
@@ -42,3 +44,11 @@ fs.writeFileSync(
     </html>
 `
 );
+
+fs.writeFileSync(
+  normalize('../../dist/apps/generate-ui-v2-e2e/generate-ui-v2/package.json'),
+  `{
+    "name": "generate-ui-v2-copy",
+    "sideEffects": true
+  }`
+);

apps/generate-ui-v2-e2e/src/e2e/app.cy.ts

@@ -18,7 +18,7 @@ describe('generate-ui-v2', () => {
     });
 
     it('should send message when generate button is clicked', () => {
-      spyOnConsoleLog().then((consoleLog) => {
+      spyOnConsoleLog().then((consoleLog: any) => {
         cy.get("[data-cy='generate-button']").click();
         expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
       });
@@ -37,7 +37,7 @@ describe('generate-ui-v2', () => {
       getFieldByName('array-field').type('test-value2{enter}');
       getFieldByName('option2').type('test-option2');
 
-      spyOnConsoleLog().then((consoleLog) => {
+      spyOnConsoleLog().then((consoleLog: any) => {
         cy.get('body').type('{ctrl}{enter}');
         expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
         expectConsoleLogToHaveBeenCalledWith(
@@ -87,17 +87,33 @@ describe('generate-ui-v2', () => {
       cy.get('[id="search-bar"]').should('be.focused');
     });
     it('should be able to run generator with shortcut', () => {
-      spyOnConsoleLog().then((consoleLog) => {
+      spyOnConsoleLog().then((consoleLog: any) => {
         cy.get('body').type('{ctrl}{enter}');
         expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
       });
     });
     it('should be able to dry run generator with shortcut', () => {
-      spyOnConsoleLog().then((consoleLog) => {
+      spyOnConsoleLog().then((consoleLog: any) => {
         cy.get('body').type('{ctrl}{shift}{enter}');
         expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
         expectConsoleLogToHaveBeenCalledWith(consoleLog, '--dry-run');
       });
     });
   });
+
+  describe('search bar', () => {
+    it('should find field by name', () => {
+      cy.get('[id="search-bar"]').type('option1');
+      getFieldByName('option1').should('be.visible');
+      cy.get(`[id="select-field-field"]`).should('not.be.visible');
+    });
+
+    it('should preserve value in field after search', () => {
+      getFieldByName('option1').type('test-value');
+      cy.get('[id="search-bar"]').type('option1');
+      getFieldByName('option1').should('have.value', 'test-value');
+      cy.get('[id="search-bar"]').clear();
+      getFieldByName('option1').should('have.value', 'test-value');
+    });
+  });
 });

apps/generate-ui-v2-e2e/src/e2e/cwd-breadcrumb.cy.ts

@@ -1,4 +1,4 @@
-import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { GeneratorSchema } from '@nx-console/shared-generate-ui-types';
 import { schema } from '../support/test-schema';
 import { visitGenerateUi } from '../support/visit-generate-ui';
 

apps/generate-ui-v2-e2e/src/e2e/field-wrapper.cy.ts

@@ -1,4 +1,4 @@
-import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { GeneratorSchema } from '@nx-console/shared-generate-ui-types';
 import { visitGenerateUi } from '../support/visit-generate-ui';
 
 export const schema: GeneratorSchema = {

apps/generate-ui-v2-e2e/src/e2e/generator-context.cy.ts

@@ -1,4 +1,4 @@
-import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { GeneratorSchema } from '@nx-console/shared-generate-ui-types';
 import {
   expectConsoleLogToHaveBeenCalledWith,
   spyOnConsoleLog,
@@ -32,7 +32,7 @@ describe('generator context', () => {
     visitGenerateUi(schemaProj);
     getFieldByName('project').should('have.value', 'project3');
 
-    spyOnConsoleLog().then((consoleLog) => {
+    spyOnConsoleLog().then((consoleLog: any) => {
       cy.get("[data-cy='generate-button']").click();
       expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
       expectConsoleLogToHaveBeenCalledWith(consoleLog, '--project=project3');
@@ -59,7 +59,7 @@ describe('generator context', () => {
   };
   it('should use fixed form value and use them to construct the generate command', () => {
     visitGenerateUi(schemaFixed);
-    spyOnConsoleLog().then((consoleLog) => {
+    spyOnConsoleLog().then((consoleLog: any) => {
       cy.get("[data-cy='generate-button']").click();
       expectConsoleLogToHaveBeenCalledWith(consoleLog, 'run-generator');
       expectConsoleLogToHaveBeenCalledWith(consoleLog, '--sample=value');

apps/generate-ui-v2-e2e/src/support/console-spy.ts

@@ -1,6 +1,4 @@
-export const spyOnConsoleLog = (): Cypress.Chainable<
-  Cypress.Agent<sinon.SinonSpy>
-> =>
+export const spyOnConsoleLog = (): any =>
   cy.window().then((win) => {
     return cy.spy(win.console, 'log').as('consoleLog');
   });

apps/generate-ui-v2-e2e/src/support/test-schema.ts

@@ -1,4 +1,4 @@
-import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { GeneratorSchema } from '@nx-console/shared-generate-ui-types';
 
 export const schema: GeneratorSchema = {
   collectionName: '@nx/test',

apps/generate-ui-v2-e2e/src/support/visit-generate-ui.ts

@@ -1,4 +1,4 @@
-import { GeneratorSchema } from '@nx-console/shared/generate-ui-types';
+import { GeneratorSchema } from '@nx-console/shared-generate-ui-types';
 
 export const visitGenerateUi = (schema: GeneratorSchema) =>
   cy.visit('/', {

apps/generate-ui-v2-e2e/tsconfig.json

@@ -1,15 +1,20 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "sourceMap": false,
-    "outDir": "../../dist/out-tsc",
+    "outDir": "out-tsc/generate-ui-v2-e2e",
     "types": ["cypress", "node", "cypress-real-events"],
-    "moduleResolution": "node"
+    "lib": ["DOM"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.js",
-    "cypress.config.ts",
-    "src/support/test-schema.ts"
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"],
+  "references": [
+    {
+      "path": "../../libs/shared/nx-version"
+    },
+    {
+      "path": "../../libs/shared/schema"
+    },
+    {
+      "path": "../../libs/shared/generate-ui-types"
+    }
   ]
 }

apps/generate-ui-v2/package.json

@@ -1,3 +1,4 @@
 {
+  "name": "generate-ui-v2",
   "sideEffects": true
 }

apps/generate-ui-v2/src/components/button.ts

@@ -26,17 +26,19 @@ export class Button extends EditorContext(LitElement) {
   renderVSCode() {
     if (this.appearance === 'icon') {
       return html`
-        <vscode-button appearance="icon">
-          <icon-element
-            class="flex items-start"
-            icon="${this.text}"
-            color="${this.color}"
-            ?applyFillColor=${this.applyFillColor}
-          ></icon-element>
+        <vscode-button
+          icon="${this.text}"
+          style="
+          --vscode-button-background: none;
+          --vscode-button-foreground: ${this.color ??
+          'var(--foreground-color)'};
+          --vscode-button-hoverBackground: var(--field-nav-hover-color);"
+          class="h-[1.25rem] w-[1.25rem]"
+        >
         </vscode-button>
       `;
     }
-    return html`<vscode-button appearance="${this.appearance}"
+    return html`<vscode-button ?secondary="${this.appearance === 'secondary'}"
       >${this.text}</vscode-button
     >`;
   }

apps/generate-ui-v2/src/components/cwd-breadcrumb.ts

@@ -33,7 +33,7 @@ export class CwdBreadcrumb extends GeneratorContextContext(
       setTimeout(() => {
         this.renderRoot
           .querySelector<HTMLInputElement>(
-            this.editor === 'vscode' ? 'vscode-text-field' : 'input'
+            this.editor === 'vscode' ? 'vscode-textfield' : 'input'
           )
           ?.focus();
       }, 0);
@@ -43,7 +43,7 @@ export class CwdBreadcrumb extends GeneratorContextContext(
   confirmEdit() {
     this.path =
       this.renderRoot.querySelector(
-        this.editor === 'vscode' ? 'vscode-text-field' : 'input'
+        this.editor === 'vscode' ? 'vscode-textfield' : 'input'
       )?.value || '';
     this.isEditable = false;
     this.dispatchValue();
@@ -129,13 +129,15 @@ export class CwdBreadcrumb extends GeneratorContextContext(
 
   renderInlineEdit() {
     if (this.editor === 'vscode') {
-      return html` <vscode-text-field
+      return html` <vscode-textfield
         type="text"
         .value="${this.path}"
         @keydown="${this.handleInlineEditKeydown}"
         data-cy="inline-edit-field"
+        style="border-width: calc(var(--border-width) * 1px);"
+        class="focus:border-focusBorder"
       >
-      </vscode-text-field>`;
+      </vscode-textfield>`;
     } else {
       return html`
         <input

apps/generate-ui-v2/src/components/field-list.ts

@@ -1,4 +1,4 @@
-import { Option } from '@nx-console/shared/schema';
+import { Option } from '@nx-console/shared-schema';
 import { LitElement, TemplateResult, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { extractItemOptions } from '../utils/generator-schema-utils';