Update create-react-app and dependencies (#125)

* Update create-react-app and dependencies Transitively this required a lot of updates. Notably: * It required newer versions of NPM, Node.js, and the Typescript compiler. Either one of those or the way CRA configures them caused more errors to be flagged in tests which had to be fixed. * randomstring relies on randombytes which needs a newer version to work with the new Node.js environment. I had to override it in package.json for now but presumably it will be updated eventually. * Add preview support for datasets * Adds ellipses for TreeGrid titles, wrapping for TreeGrid body cells, and support for TreeGrids wider than their parent. * Refactors the list of entity filters and attributes into a shared function so it can be used for both the preview and the attribute selection. * Update create-react-app and dependencies Transitively this required a lot of updates. Notably: * It required newer versions of NPM, Node.js, and the Typescript compiler. Either one of those or the way CRA configures them caused more errors to be flagged in tests which had to be fixed. * One fallout from this was that AttributeValues from SearchEntityInstances needed to be made nullable to correctly allow null fields to be returned (e.g. standard_concept). Unfortunately, this doesn't doesn't work correctly for map type objects due to OAI/OpenAPI-Specification#1368. Upgrading to OpenAPI 3.1 will provide a new, working syntax for this but will also require many other changes to the schema. In the meantime, "| null" is manually added to the generated code. * randomstring relies on randombytes which needs a newer version to work with the new Node.js environment. I had to override it in package.json for now but presumably it will be updated eventually.
DataBiosphere · Mar 25, 2022 · fe2cd85 · fe2cd85
1 parent 3a406ff
commit fe2cd85
Show file tree

Hide file tree

Showing 14 changed files with 13,185 additions and 22,773 deletions.
diff --git a/api/src/main/resources/api/service_openapi.yaml b/api/src/main/resources/api/service_openapi.yaml
@@ -574,6 +574,7 @@ components:
         instances:
           type: array
           description: Repeated instances results of the search.
+          nullable: true
           items:
             $ref: '#/components/schemas/EntityInstanceStruct'
         nextPageToken:
@@ -584,4 +585,5 @@ components:
       description: A map of an entity instance attribute names to their value for this instance.
       additionalProperties:
         type: object
+        nullable: true
         $ref: '#/components/schemas/AttributeValue'
diff --git a/ui/cypress/integration/tests.js b/ui/cypress/integration/tests.js
@@ -20,6 +20,10 @@ describe("Basic tests", () => {
 
     cy.get("button[name='New Cohort']").click();
     cy.get("button[name='Contains Conditions Codes']").click();
+
+    cy.get("button:Contains('condition_occurrence')");
+
+    cy.get("input[name='queries-mode']").click();
     cy.contains("SELECT *");
   });
 });
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -27,40 +27,36 @@
     "immer": "^9.0.12",
     "mui-rff": "^5.0.0",
     "portable-fetch": "^3.0.0",
-    "randomstring": "^1.2.1",
+    "randomstring": "^1.2.2",
     "react": "^17.0.2",
     "react-async": "^10.0.1",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-final-form": "^6.5.8",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "react-test-renderer": "^17.0.2",
     "typescript": "^4.4.2",
     "use-immer": "^0.6.0",
     "web-vitals": "^1.1.2"
   },
+  "overrides": {
+    "randombytes": "^2.1.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "fake": "REACT_APP_USE_FAKE_API=y react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "codegen": "rm -rf src/tanagra-api && openapi-generator-cli generate -i ../api/src/main/resources/api/service_openapi.yaml -g typescript-fetch -t ./openapi-templates --additional-properties=typescriptThreePlus=true -o src/tanagra-api"
+    "codegen": "rm -rf src/tanagra-api && openapi-generator-cli generate -i ../api/src/main/resources/api/service_openapi.yaml -g typescript-fetch -t ./openapi-templates --additional-properties=typescriptThreePlus=true -o src/tanagra-api && sed -i 's/AttributeValue;/AttributeValue | null;/g' src/tanagra-api/models/SearchEntityInstancesResponse.ts"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": ["react-app", "react-app/jest"]
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -69,9 +65,10 @@
   },
   "devDependencies": {
     "@types/randomstring": "^1.1.7",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
     "cypress": "^9.1.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

diff --git a/ui/src/app.css b/ui/src/app.css
@@ -18,6 +18,10 @@
   margin: 0em 0em 1em 0em;
 }
 
+.datasets-select-panel {
+  height: 300px;
+}
+
 .new-cohort-dialog .MuiTextField-root {
   margin-bottom: 2em;
 }

diff --git a/ui/src/app.test.tsx b/ui/src/app.test.tsx
@@ -8,7 +8,7 @@ import App from "./app";
 test("render included datasets heading", async () => {
   render(
     <Provider store={store}>
-      <App entityName={"person"} />
+      <App />
     </Provider>
   );
   await waitFor(() => {

diff --git a/ui/src/components/__snapshots__/treegrid.test.tsx.snap b/ui/src/components/__snapshots__/treegrid.test.tsx.snap
@@ -27,11 +27,22 @@ Array [
             }
           }
         >
-          <h6
-            className="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+          <div
+            style={
+              Object {
+                "overflow": "hidden",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+              }
+            }
           >
-            Column 1
-          </h6>
+            <h6
+              className="MuiTypography-root MuiTypography-h6 css-1to91m4-MuiTypography-root"
+              title="Column 1"
+            >
+              Column 1
+            </h6>
+          </div>
         </td>
         <td
           style={
@@ -42,11 +53,22 @@ Array [
             }
           }
         >
-          <h6
-            className="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+          <div
+            style={
+              Object {
+                "overflow": "hidden",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+              }
+            }
           >
-            Column 2
-          </h6>
+            <h6
+              className="MuiTypography-root MuiTypography-h6 css-1to91m4-MuiTypography-root"
+              title="Column 2"
+            >
+              Column 2
+            </h6>
+          </div>
         </td>
         <td
           style={
@@ -57,29 +79,40 @@ Array [
             }
           }
         >
-          <h6
-            className="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+          <div
+            style={
+              Object {
+                "overflow": "hidden",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+              }
+            }
           >
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-              data-testid="AccountTreeIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <h6
+              className="MuiTypography-root MuiTypography-h6 css-1to91m4-MuiTypography-root"
+              title="[object Object]"
             >
-              <path
-                d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"
-              />
-            </svg>
-          </h6>
+              <svg
+                aria-hidden={true}
+                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-testid="AccountTreeIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"
+                />
+              </svg>
+            </h6>
+          </div>
         </td>
       </tr>
     </thead>
   </table>,
   <div
     style={
       Object {
-        "display": "block",
+        "display": "inline-block",
         "overflowY": "auto",
       }
     }
@@ -116,12 +149,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="1-col1"
               >
                 <button
@@ -178,12 +206,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="1-col2"
               >
                 1-col2
@@ -209,12 +232,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title=""
               >
                 
@@ -249,12 +267,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="2-col1"
               >
                 2-col1
@@ -280,12 +293,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="2-col2"
               >
                 2-col2
@@ -311,12 +319,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="2-col3"
               >
                 2-col3
@@ -347,12 +350,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="3-col1"
               >
                 3-col1
@@ -378,12 +376,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title="3-col2"
               >
                 3-col2
@@ -409,12 +402,7 @@ Array [
               }
             >
               <p
-                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-fvtpii-MuiTypography-root"
-                style={
-                  Object {
-                    "display": "inline",
-                  }
-                }
+                className="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-q1lnya-MuiTypography-root"
                 title=""
               >
                 <svg

diff --git a/ui/src/components/loading.tsx b/ui/src/components/loading.tsx
@@ -6,8 +6,8 @@ import React, { ReactNode, useEffect, useRef, useState } from "react";
 
 type Status = {
   error?: Error;
-  isPending: boolean;
-  reload: () => void;
+  isPending?: boolean;
+  reload?: () => void;
 };
 
 type Props = {
@@ -54,7 +54,7 @@ function showStatus(visible: boolean, status?: Status): ReactNode {
           <Typography paragraph>An unknown error has occurred.</Typography>
         )}
         <div>
-          <Button onClick={status.reload} variant="contained">
+          <Button onClick={status?.reload} variant="contained">
             Reload
           </Button>
         </div>

diff --git a/ui/src/components/treegrid.test.tsx b/ui/src/components/treegrid.test.tsx
@@ -1,8 +1,8 @@
 import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import IconButton from "@mui/material/IconButton";
-import renderer from "react-test-renderer";
 import { TreeGrid, TreeGridData, TreeGridId } from "components/treegrid";
+import renderer from "react-test-renderer";
 
 test("Table renders correctly", () => {
   const columns = [