chore(dep-graph): migrate dep-graph app to React (nrwl#8152)

.gitignore

@@ -11,4 +11,4 @@ tmp
 jest.debug.config.js
 .tool-versions
 /.verdaccio/build/local-registry
-dep-graph/dep-graph/src/assets/environment.js
+dep-graph/client/src/assets/environment.js

dep-graph/dep-graph-e2e/cypress-watch-mode.json → dep-graph/client-e2e/cypress-watch-mode.json

@@ -6,7 +6,7 @@
   "pluginsFile": "./src/plugins/index",
   "supportFile": "./src/support/index.ts",
   "video": true,
-  "videosFolder": "../../dist/cypress/dep-graph/dep-graph-e2e/videos",
-  "screenshotsFolder": "../../dist/cypress/dep-graph/dep-graph-e2e/screenshots",
+  "videosFolder": "../../dist/cypress/dep-graph/client-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/dep-graph/client-e2e/screenshots",
   "chromeWebSecurity": false
 }

dep-graph/dep-graph-e2e/cypress.json → dep-graph/client-e2e/cypress.json

@@ -6,7 +6,7 @@
   "pluginsFile": "./src/plugins/index",
   "supportFile": "./src/support/index.ts",
   "video": true,
-  "videosFolder": "../../dist/cypress/dep-graph/dep-graph-e2e/videos",
-  "screenshotsFolder": "../../dist/cypress/dep-graph/dep-graph-e2e/screenshots",
+  "videosFolder": "../../dist/cypress/dep-graph/client-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/dep-graph/client-e2e/screenshots",
   "chromeWebSecurity": false
 }

dep-graph/client-e2e/project.json

@@ -0,0 +1,33 @@
+{
+  "root": "dep-graph/client-e2e",
+  "sourceRoot": "dep-graph/client-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e-disabled": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "dep-graph/client-e2e/cypress.json",
+        "tsConfig": "dep-graph/client-e2e/tsconfig.e2e.json",
+        "devServerTarget": "dep-graph-client:serve-for-e2e",
+        "baseUrl": "http://localhost:4200"
+      }
+    },
+    "e2e-watch-disabled": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "dep-graph/client-e2e/cypress-watch-mode.json",
+        "tsConfig": "dep-graph/client-e2e/tsconfig.e2e.json",
+        "devServerTarget": "dep-graph-client:serve-for-e2e:watch",
+        "baseUrl": "http://localhost:4200"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["dep-graph/client-e2e/**/*.ts"]
+      }
+    }
+  },
+  "implicitDependencies": ["dep-graph-client"]
+}

dep-graph/dep-graph-e2e/src/integration/app.spec.ts → dep-graph/client-e2e/src/integration/app.spec.ts

@@ -1,11 +1,14 @@
 import {
   getCheckedProjectItems,
   getDeselectAllButton,
+  getImageDownloadButton,
   getIncludeProjectsInPathButton,
   getProjectItems,
+  getSelectAffectedButton,
   getSelectAllButton,
   getSelectProjectsMessage,
   getTextFilterInput,
+  getTextFilterReset,
   getUncheckedProjectItems,
   getUnfocusProjectButton,
 } from '../support/app.po';
@@ -20,15 +23,45 @@ describe('dep-graph-client', () => {
     cy.wait('@getGraph');
   });
 
-  it('should display message to select projects', () => {
-    getSelectProjectsMessage().should('be.visible');
+  describe('select projects message', () => {
+    it('should display on load', () => {
+      getSelectProjectsMessage().should('be.visible');
+    });
+
+    it('should hide  when a project is selected', () => {
+      cy.contains('nx-dev').scrollIntoView().should('be.visible');
+      cy.get('[data-project="nx-dev"]').should('be.visible');
+      cy.get('[data-project="nx-dev"]').click({ force: true });
+      getSelectProjectsMessage().should('not.exist');
+    });
   });
 
-  it('should hide select projects message when a project is selected', () => {
-    cy.contains('nx-dev').scrollIntoView().should('be.visible');
-    cy.get('[data-project="nx-dev"]').should('be.visible');
-    cy.get('[data-project="nx-dev"]').click({ force: true });
-    getSelectProjectsMessage().should('not.be.visible');
+  describe('text filter', () => {
+    it('should hide clear button initially', () => {
+      getTextFilterReset().should('not.exist');
+    });
+
+    it('should show clear button after typing', () => {
+      getTextFilterInput().type('nx-dev');
+      getTextFilterReset().should('exist');
+    });
+
+    it('should hide clear button after clicking', () => {
+      getTextFilterInput().type('nx-dev');
+      getTextFilterReset().click().should('not.exist');
+    });
+
+    it('should filter projects', () => {
+      getTextFilterInput().type('nx-dev');
+      getCheckedProjectItems().should('have.length', 9);
+    });
+
+    it('should clear selection on reset', () => {
+      getTextFilterInput().type('nx-dev');
+      getCheckedProjectItems().should('have.length', 9);
+      getTextFilterReset().click();
+      getCheckedProjectItems().should('have.length', 0);
+    });
   });
 
   describe('selecting a different project', () => {
@@ -54,14 +87,28 @@ describe('dep-graph-client', () => {
     });
   });
 
+  describe('show affected button', () => {
+    it('should be hidden initially', () => {
+      getSelectAffectedButton().should('not.exist');
+    });
+
+    it('should check all affected project items', () => {
+      cy.get('[data-cy=project-select]').select('Affected', { force: true });
+      cy.wait('@getGraph');
+      getSelectAffectedButton().click();
+
+      getCheckedProjectItems().should('have.length', 5);
+    });
+  });
+
   describe('selecting projects', () => {
     it('should select a project by clicking on the project name', () => {
       cy.get('[data-project="nx-dev"]').should('have.data', 'active', false);
       cy.get('[data-project="nx-dev"]').click({
         force: true,
       });
 
-      cy.get('[data-project="nx-dev"]').should('have.data', 'active', true);
+      cy.get('[data-project="nx-dev"][data-active="true"]').should('exist');
     });
 
     it('should deselect a project by clicking on the project name again', () => {
@@ -125,4 +172,21 @@ describe('dep-graph-client', () => {
       getCheckedProjectItems().should('have.length', 17);
     });
   });
+
+  describe('image download button', () => {
+    it('should be hidden initally', () => {
+      getImageDownloadButton().should('have.class', 'opacity-0');
+    });
+
+    it('should be shown when a project is selected', () => {
+      cy.get('[data-project="nx-dev"]').prev('button').click({ force: true });
+      getImageDownloadButton().should('not.have.class', 'opacity-0');
+    });
+
+    it('should be hidden when no more projects are selected', () => {
+      cy.get('[data-project="nx-dev"]').prev('button').click({ force: true });
+      getDeselectAllButton().click();
+      getImageDownloadButton().should('have.class', 'opacity-0');
+    });
+  });
 });

dep-graph/dep-graph-e2e/src/support/app.po.ts → dep-graph/client-e2e/src/support/app.po.ts

@@ -2,6 +2,8 @@ export const getSelectProjectsMessage = () => cy.get('#no-projects-chosen');
 export const getGraph = () => cy.get('#graph-container');
 export const getSelectAllButton = () => cy.get('[data-cy=selectAllButton]');
 export const getDeselectAllButton = () => cy.get('[data-cy=deselectAllButton]');
+export const getSelectAffectedButton = () => cy.get('[data-cy=affectedButton]');
+
 export const getUnfocusProjectButton = () => cy.get('[data-cy=unfocusButton]');
 
 export const getProjectItems = () => cy.get('[data-project]');
@@ -13,5 +15,10 @@ export const getGroupByfolderItems = () =>
   cy.get('input[name=displayOptions][value=groupByFolder]');
 
 export const getTextFilterInput = () => cy.get('[data-cy=textFilterInput]');
+export const getTextFilterReset = () => cy.get('[data-cy=textFilterReset]');
+
 export const getIncludeProjectsInPathButton = () =>
   cy.get('input[name=textFilterCheckbox]');
+
+export const getImageDownloadButton = () =>
+  cy.get('[data-cy=downloadImageButton]');

dep-graph/dep-graph-e2e/src/watch-mode-integration/watch-mode.spec.ts → dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts

@@ -4,7 +4,7 @@ describe('dep-graph-client in watch mode', () => {
   beforeEach(() => {
     cy.clock();
     cy.visit('/');
-    cy.tick(1000);
+    cy.tick(2000);
   });
 
   it('should auto-select new libs as they are created', () => {

dep-graph/client/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

dep-graph/dep-graph/browserslist → dep-graph/client/.browserslistrc

@@ -1,4 +1,7 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 #

dep-graph/client/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "rules": {
+    "@typescript-eslint/no-implicit-any": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

dep-graph/client/jest.config.js

@@ -0,0 +1,13 @@
+// nx-ignore-next-line
+const nxPreset = require('@nrwl/jest/preset');
+
+module.exports = {
+  ...nxPreset,
+  displayName: 'dep-graph-client',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/nx-dev',
+};

dep-graph/dep-graph/postcss.config.js → dep-graph/client/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {
-      config: './dep-graph/dep-graph/tailwind.config.js',
+      config: './dep-graph/client/tailwind.config.js',
     },
     autoprefixer: {},
   },

dep-graph/dep-graph/project.json → dep-graph/client/project.json

@@ -1,18 +1,18 @@
 {
-  "root": "dep-graph/dep-graph",
-  "sourceRoot": "dep-graph/dep-graph/src",
+  "root": "dep-graph/client",
+  "sourceRoot": "dep-graph/client/src",
   "projectType": "application",
   "targets": {
     "build-base": {
       "executor": "@nrwl/web:webpack",
       "options": {
         "maxWorkers": 8,
         "outputPath": "build/apps/dep-graph",
-        "index": "dep-graph/dep-graph/src/index.html",
-        "main": "dep-graph/dep-graph/src/main.ts",
-        "polyfills": "dep-graph/dep-graph/src/polyfills.ts",
-        "tsConfig": "dep-graph/dep-graph/tsconfig.app.json",
-        "styles": ["dep-graph/dep-graph/src/styles.scss"],
+        "index": "dep-graph/client/src/index.html",
+        "main": "dep-graph/client/src/main.tsx",
+        "polyfills": "dep-graph/client/src/polyfills.ts",
+        "tsConfig": "dep-graph/client/tsconfig.app.json",
+        "styles": ["dep-graph/client/src/styles.scss"],
         "scripts": [],
         "assets": [],
         "optimization": true,
@@ -34,10 +34,10 @@
         "dev": {
           "fileReplacements": [],
           "assets": [
-            "dep-graph/dep-graph/src/favicon.ico",
-            "dep-graph/dep-graph/src/assets/graphs/",
+            "dep-graph/client/src/favicon.ico",
+            "dep-graph/client/src/assets/graphs/",
             {
-              "input": "dep-graph/dep-graph/src/assets",
+              "input": "dep-graph/client/src/assets",
               "output": "/",
               "glob": "environment.js"
             }
@@ -63,21 +63,21 @@
     "serve-base": {
       "executor": "@nrwl/web:dev-server",
       "options": {
-        "buildTarget": "dep-graph-dep-graph:build-base:dev"
+        "buildTarget": "dep-graph-client:build-base:dev"
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["dep-graph/dep-graph/**/*.ts"]
+        "lintFilePatterns": ["dep-graph/client/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/dep-graph/dep-graph"],
+      "outputs": ["coverage/dep-graph/client"],
       "options": {
-        "jestConfig": "dep-graph/dep-graph/jest.config.js",
+        "jestConfig": "dep-graph/client/jest.config.js",
         "passWithNoTests": true
       }
     },
@@ -87,14 +87,14 @@
       "options": {
         "commands": [
           "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts dev",
-          "nx serve-base dep-graph-dep-graph"
+          "nx serve-base dep-graph-client"
         ]
       },
       "configurations": {
         "watch": {
           "commands": [
             "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts watch",
-            "nx serve-base dep-graph-dep-graph"
+            "nx serve-base dep-graph-client"
           ]
         }
       }
@@ -105,20 +105,20 @@
       "options": {
         "commands": [
           "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts dev",
-          "nx serve-base dep-graph-dep-graph"
+          "nx serve-base dep-graph-client"
         ],
         "readyWhen": "No issues found."
       },
       "configurations": {
         "watch": {
           "commands": [
             "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts watch",
-            "nx serve-base dep-graph-dep-graph"
+            "nx serve-base dep-graph-client"
           ],
           "readyWhen": "No issues found."
         }
       }
     }
   },
-  "tags": ["core"]
+  "tags": []
 }

dep-graph/client/src/app/app.tsx

@@ -0,0 +1,12 @@
+import { Shell } from './shell';
+import { GlobalStateProvider } from './state.provider';
+
+export function App() {
+  return (
+    <GlobalStateProvider>
+      <Shell></Shell>
+    </GlobalStateProvider>
+  );
+}
+
+export default App;