chore: upgrade react-scripts (#354)

* chore: upgrade react-scripts

* chore: node-sass -> sass

* chore: upgrade eslint

* chore: upgrade webpack

* fix: upgrade to Storybook v6

* fix: use buffer polyfill

* fix: example app build

* ci: don't fail build due to warnings

* chore: upgrade to cypress 7.x

* chore: upgrade to cypress 8.x

* chore: upgrade cypress v10

* test: cy.server -> cy.intercept

* chore: better handling of node polyfills

* test: fix left-over fixtures

* chore: add 'prepack' scripts

* chore: use `sass-embedded` instead of `sass`

* chore: back to `sass`

`sass-embedded` doesn't (yet) have a CLI

* chore: upgrade pkgs

* chore: upgrade storybook deps

* chore: upgrade yarn

Author: jhpedemonte

.yarn/patches/react-scripts-npm-5.0.1-d06bd2d5ad

@@ -0,0 +1,45 @@
+diff --git a/.vscode/diff/vulsCount.txt b/.vscode/diff/vulsCount.txt
+new file mode 100644
+index 0000000000000000000000000000000000000000..c227083464fb9af8955c90d2924774ee50abb547
+--- /dev/null
++++ b/.vscode/diff/vulsCount.txt
+@@ -0,0 +1 @@
++0
+\ No newline at end of file
+diff --git a/config/webpack.config.js b/config/webpack.config.js
+index e465d8e7a00ec889e9c4c29ba7812019f8319a41..60e754e0923304b717e42f80b92eab57d1136430 100644
+--- a/config/webpack.config.js
++++ b/config/webpack.config.js
+@@ -37,6 +37,7 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
+ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
+ // @remove-on-eject-end
+ const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
++const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+ 
+ // Source maps are resource heavy and can cause out of memory issue for large source files.
+ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+@@ -303,6 +304,14 @@ module.exports = function (webpackEnv) {
+       ],
+     },
+     resolve: {
++      fallback: {
++        // requested by ibm-watson
++        // @see https://github.com/watson-developer-cloud/node-sdk/tree/master/examples/webpack
++        fs: false,
++        module: false,
++        net: false,
++        tls: false,
++      },
+       // This allows you to set a fallback for where webpack should look for modules.
+       // We placed these paths second because we want `node_modules` to "win"
+       // if there are any conflicts. This matches Node resolution mechanism.
+@@ -604,6 +613,9 @@ module.exports = function (webpackEnv) {
+       ].filter(Boolean),
+     },
+     plugins: [
++      new NodePolyfillPlugin({
++        excludeAliases: ['console']
++      }),
+       // Generates an `index.html` file with the <script> injected.
+       new HtmlWebpackPlugin(
+         Object.assign(

.yarn/releases/yarn-3.1.0.cjs

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

.yarn/releases/yarn-3.2.3.cjs

@@ -179,16 +179,16 @@ If you don't have a React application already, start with [create-react-app](htt
    npm install --save @ibm-watson/discovery-react-components @ibm-watson/discovery-styles ibm-watson carbon-components carbon-components-react carbon-icons
    ```
 
-2. Add `node-sass` as a dev dependency
+2. Add `sass` (or `sass-embedded`) as a dev dependency
 
    ```
-   yarn add -D node-sass
+   yarn add -D sass
    ```
 
    or
 
    ```
-   npm install --save-dev node-sass
+   npm install --save-dev sass
    ```
 
 3. Add the `DiscoverySearch` component with corresponding `searchClient` and optionally any components you would like to use to display Discovery Search Results.
@@ -464,10 +464,10 @@ See the following for [more info about Lerna](https://github.com/lerna/lerna) or
 
 #### Styles (packages/discovery-styles)
 
-| Command      | Description                                       |
-| ------------ | ------------------------------------------------- |
-| `yarn start` | runs `node-sass` in `watch` mode                  |
-| `yarn build` | runs `node-sass` to compile `scss` files to `css` |
+| Command      | Description                                  |
+| ------------ | -------------------------------------------- |
+| `yarn start` | runs `sass` in `watch` mode                  |
+| `yarn build` | runs `sass` to compile `scss` files to `css` |
 
 ### Running the project
 

.yarnrc.yml

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  defaultCommandTimeout: 30000,
+  video: false,
+  retries: {
+    runMode: 2,
+    openMode: 0
+  },
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:3000/'
+  }
+});

README.md

@@ -4,9 +4,6 @@ describe('Autocomplete', () => {
   beforeEach(() => {
     mockHomePage();
 
-    // Set up/override routes & fixtures that are specific to this file
-    cy.fixture('autocompletion/autocompletions.json').as('autocompletionsJSON');
-
     // Set an alias for the search input
     cy.findByPlaceholderText('Search').as('searchInput');
   });
@@ -16,11 +13,9 @@ describe('Autocomplete', () => {
     const expectedAutocompletions = ['have', 'helm', 'how', 'hadoop', 'hive', 'hostname', 'high'];
 
     beforeEach(() => {
-      cy.route(
-        'GET',
-        '**/autocompletion?version=2019-01-01&prefix=h&count=7',
-        '@autocompletionsJSON'
-      ).as('getAutocompletions');
+      cy.intercept('GET', '**/autocompletion?version=2019-01-01&prefix=h&count=7', {
+        fixture: 'autocompletion/autocompletions.json'
+      }).as('getAutocompletions');
       cy.get('@searchInput').type('h');
       cy.wait('@getAutocompletions');
     });
@@ -56,7 +51,9 @@ describe('Autocomplete', () => {
 
   describe('When typing " " into the search input', () => {
     beforeEach(() => {
-      cy.route('POST', '**/query?version=2019-01-01', '@queryJSON').as('postQuery');
+      cy.intercept('POST', '**/query?version=2019-01-01', { fixture: 'query/query.json' }).as(
+        'postQuery'
+      );
       cy.get('@searchInput').type(' ');
     });
 
@@ -72,7 +69,7 @@ describe('Autocomplete', () => {
       });
 
       it('performs a query with the correct term', () => {
-        cy.get('@postQuery').its('requestBody.natural_language_query').should('be.eq', ' ');
+        cy.get('@postQuery').its('request.body.natural_language_query').should('be.eq', ' ');
       });
     });
   });

examples/discovery-search-app/cypress.config.ts

@@ -4,10 +4,6 @@ describe('Basic search', () => {
   beforeEach(() => {
     mockHomePage();
 
-    // Set up/override routes & fixtures that are specific to this file
-    cy.fixture('query/noResults.json').as('noResultsJSON');
-    cy.fixture('query/error500.json').as('error500JSON');
-
     // set an alias for the search input, since we're using that a lot
     cy.findByPlaceholderText('Search').as('searchInput');
   });
@@ -21,11 +17,11 @@ describe('Basic search', () => {
 
       // Querying with results
       cy.get('@searchInput').type('abil{enter}');
-      cy.get('@postQuery').its('requestBody.natural_language_query').should('eq', 'abil');
+      cy.get('@postQuery').its('request.body.natural_language_query').should('eq', 'abil');
 
       // query should have values set for `return` param
       cy.get('@postQuery')
-        .its('requestBody.return')
+        .its('request.body.return')
         .should('include.members', [
           'document_id',
           'document_passages',
@@ -50,14 +46,10 @@ describe('Basic search', () => {
   });
 
   describe('When clicking to view document', () => {
-    beforeEach(() => {
-      cy.fixture('query/correctedQuery.json').as('correctedQueryJSON');
-    });
-
     it('should open document preview', () => {
-      cy.route('POST', '**/query?version=2019-01-01', '@correctedQueryJSON').as(
-        'postQueryCorrected'
-      );
+      cy.intercept('POST', '**/query?version=2019-01-01', {
+        fixture: 'query/correctedQuery.json'
+      }).as('postQueryCorrected');
       cy.get('@searchInput').type('Watson{enter}');
 
       cy.get('button[data-testid="search-result-element-preview-button"]')
@@ -68,16 +60,18 @@ describe('Basic search', () => {
 
       // When showing document preview, verify that another request is sent
       cy.get('@postQueryCorrected')
-        .its('requestBody.filter')
+        .its('request.body.filter')
         .should('eq', 'document_id:e69fd25f-5cbf-4f53-bef3-67834ac1965b');
-      cy.get('@postQueryCorrected').its('requestBody.return').should('be.empty');
+      cy.get('@postQueryCorrected').its('request.body.return').should('be.empty');
     });
   });
 
   // Querying without results
   describe('When entering a query with no results', () => {
     beforeEach(() => {
-      cy.route('POST', '**/query?version=2019-01-01', '@noResultsJSON').as('postQueryNoResults');
+      cy.intercept('POST', '**/query?version=2019-01-01', { fixture: 'query/noResults.json' }).as(
+        'postQueryNoResults'
+      );
       cy.get('@searchInput').type('abil{enter}');
       cy.wait('@postQueryNoResults');
     });
@@ -90,38 +84,30 @@ describe('Basic search', () => {
 
 describe('Basic search errors', () => {
   beforeEach(() => {
-    // start the cypress server
-    cy.server();
-
     // Sets up and handles the collections, component settings, and initial query requests that run on page-load
-    cy.fixture('collections/collections').as('collectionsJSON');
-    cy.route('GET', '**/collections?version=2019-01-01', '@collectionsJSON').as('getCollections');
-    cy.fixture('component_settings/componentSettings').as('componentSettingsJSON');
-    cy.route('GET', '**/component_settings?version=2019-01-01', '@componentSettingsJSON').as(
-      'getComponentSettings'
-    );
-
-    // Set up/override routes & fixtures that are specific to this file
-    cy.fixture('query/query').as('queryJSON');
-    cy.fixture('query/error500.json').as('error500JSON');
+    cy.intercept('GET', '**/collections?version=2019-01-01', {
+      fixture: 'collections/collections'
+    }).as('getCollections');
+    cy.intercept('GET', '**/component_settings?version=2019-01-01', {
+      fixture: 'component_settings/componentSettings'
+    }).as('getComponentSettings');
   });
 
   describe('When a user search returns an error', () => {
     it('SearchResults displays error message', () => {
       // query req on initial load
-      cy.fixture('query/query').as('queryJSON');
-      cy.route('POST', '**/query?version=2019-01-01', '@queryJSON').as('postQuery');
+      cy.intercept('POST', '**/query?version=2019-01-01', { fixture: 'query/query' }).as(
+        'postQuery'
+      );
 
       visitHomePage(['@getCollections', '@getComponentSettings']);
 
       cy.findByPlaceholderText('Search').as('searchInput');
 
       // user search request
-      cy.route({
-        method: 'POST',
-        url: '**/query?version=2019-01-01',
-        response: '@error500JSON',
-        status: 500
+      cy.intercept('POST', '**/query?version=2019-01-01', {
+        fixture: 'query/error500.json',
+        statusCode: 500
       }).as('postQueryError');
       cy.get('@searchInput').type('abil{enter}');
       cy.wait('@postQueryError');

examples/discovery-search-app/cypress.json

@@ -3,10 +3,6 @@ import { mockHomePage } from '../../support/utils';
 describe('Collection Filter', () => {
   beforeEach(() => {
     mockHomePage();
-
-    // Set up/override routes & fixtures that are specific to this file
-    cy.fixture('query/singleCollectionQuery.json').as('singleCollectionQueryJSON');
-    cy.fixture('query/doubleCollectionQuery.json').as('doubleCollectionQueryJSON');
   });
 
   describe('when the example app loads', () => {
@@ -39,16 +35,16 @@ describe('Collection Filter', () => {
 
       describe('and we select a single collection', () => {
         beforeEach(() => {
-          cy.route('POST', '**/query?version=2019-01-01', '@singleCollectionQueryJSON').as(
-            'postQuerySingleCollection'
-          );
+          cy.intercept('POST', '**/query?version=2019-01-01', {
+            fixture: 'query/singleCollectionQuery.json'
+          }).as('postQuerySingleCollection');
           cy.get('.bx--list-box__menu-item').contains('finnegans wake').click();
           cy.wait('@postQuerySingleCollection').as('singleCollectionQueryObject');
         });
 
         it('should make a query against only the selected collection', () => {
           cy.get('@singleCollectionQueryObject')
-            .its('requestBody.collection_ids')
+            .its('request.body.collection_ids')
             .should('contain', 'paris19221939')
             .and('have.length', 1);
         });
@@ -59,7 +55,7 @@ describe('Collection Filter', () => {
 
         describe('and we click the clear selected collections button', () => {
           beforeEach(() => {
-            cy.route('POST', '**/query?version=2019-01-01', '@queryJSON').as(
+            cy.intercept('POST', '**/query?version=2019-01-01', { fixture: 'query/query.json' }).as(
               'postQueryClearedSelections'
             );
             cy.get('div[aria-label="Clear all selected items"]').click();
@@ -68,38 +64,38 @@ describe('Collection Filter', () => {
 
           it('makes a query against all available collections', () => {
             cy.get('@clearedCollectionsQueryObject')
-              .its('requestBody.collection_ids')
+              .its('request.body.collection_ids')
               .should('be.empty');
           });
         });
 
         describe('and we select another collection', () => {
           beforeEach(() => {
-            cy.route('POST', '**/query?version=2019-01-01', 'doubleCollectionQueryJSON').as(
-              'postQueryDoubleCollection'
-            );
+            cy.intercept('POST', '**/query?version=2019-01-01', {
+              fixture: 'query/doubleCollectionQuery.json'
+            }).as('postQueryDoubleCollection');
             cy.get('.bx--list-box__menu-item').contains('deadspin').click();
             cy.wait('@postQueryDoubleCollection').as('doubleCollectionQueryObject');
           });
 
           it('makes a query against both of the selected collections', () => {
             cy.get('@doubleCollectionQueryObject')
-              .its('requestBody.collection_ids')
+              .its('request.body.collection_ids')
               .should('contain', 'deadspin9876')
               .and('contain', 'paris19221939');
           });
 
           describe('and we clear the selected collections', () => {
             beforeEach(() => {
-              cy.route('POST', '**/query?version=2019-01-01', '@queryJSON').as(
-                'postQueryClearedSelections'
-              );
+              cy.intercept('POST', '**/query?version=2019-01-01', {
+                fixture: 'query/query.json'
+              }).as('postQueryClearedSelections');
               cy.get('div[aria-label="Clear all selected items"]').click();
               cy.wait('@postQueryClearedSelections').as('originalQueryObject');
             });
 
             it('makes a query against all available collections', () => {
-              cy.get('@originalQueryObject').its('requestBody.collection_ids').should('be.empty');
+              cy.get('@originalQueryObject').its('request.body.collection_ids').should('be.empty');
             });
           });
         });