Upgrade unblocked dependencies

package.json

@@ -97,7 +97,7 @@
     "graphql": "^14.6.0",
     "graphql-config": "^2.2.2",
     "graphql-fields": "2.0.3",
-    "graphql-playground-html": "1.6.13",
+    "graphql-playground-html": "^1.6.27",
     "graphql-redis-subscriptions": "^2.2.1",
     "graphql-subscriptions": "^1.1.0",
     "graphql-tools": "^4.0.7",
@@ -183,8 +183,8 @@
     "@types/html-to-text": "^1.4.31",
     "@types/html-webpack-plugin": "^3.2.3",
     "@types/ioredis": "^4.14.9",
-    "@types/jest": "^26.0.3",
-    "@types/jest-axe": "^3.2.2",
+    "@types/jest": "^26.0.13",
+    "@types/jest-axe": "^3.5.0",
     "@types/jsdom": "^16.2.0",
     "@types/jsonwebtoken": "^8.3.8",
     "@types/linkifyjs": "^2.1.3",
@@ -239,7 +239,7 @@
     "@typescript-eslint/parser": "^3.4.0",
     "autoprefixer": "^9.7.5",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.1.0",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^4.0.0",
@@ -273,7 +273,7 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eventemitter2": "^6.3.1",
     "farce": "^0.2.8",
-    "final-form": "4.18.6",
+    "final-form": "^4.20.1",
     "final-form-arrays": "^3.0.2",
     "flat": "^5.0.0",
     "fluent-intl-polyfill": "^0.1.0",
@@ -291,10 +291,10 @@
     "husky": "^4.2.3",
     "intersection-observer": "^0.7.0",
     "intl": "^1.2.5",
-    "jest": "^26.1.0",
-    "jest-axe": "^3.4.0",
-    "jest-junit": "^11.0.1",
-    "jest-localstorage-mock": "^2.4.2",
+    "jest": "^26.4.2",
+    "jest-axe": "^4.0.0",
+    "jest-junit": "^11.1.0",
+    "jest-localstorage-mock": "^2.4.3",
     "jest-mock-console": "^1.0.1",
     "keymaster": "^1.6.2",
     "lint-staged": "^10.2.11",
@@ -326,7 +326,7 @@
     "react-dom": "^16.13.1",
     "react-error-overlay": "^6.0.7",
     "react-final-form": "6.3.0",
-    "react-final-form-arrays": "^3.1.1",
+    "react-final-form-arrays": "^3.1.2",
     "react-helmet": "^5.2.1",
     "react-popper": "^1.3.7",
     "react-relay": "^10.0.1",
@@ -356,7 +356,7 @@
     "terser-webpack-plugin": "^2.3.5",
     "thread-loader": "^2.1.3",
     "timekeeper": "^2.2.0",
-    "ts-jest": "26.1.1",
+    "ts-jest": "26.3.0",
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
     "ts-node-dev": "1.0.0-pre.44",
@@ -379,36 +379,21 @@
     "whatwg-fetch": "^3.4.0"
   },
   "dependencies-pins-documentation": {
+    "react-final-form@6.3.0": [
+      "Newer versions has problems with radio and checkbox fields.",
+      "Update when the following issue is resolved:",
+      "https://github.com/final-form/react-final-form/issues/683"
+    ],
     "ts-node-dev@1.0.0-pre.44": [
       "Newer versions unbearibly slow"
     ],
-    "ts-jest@25.4.0": [
-      "Newer versions require every definition file to be included",
-      "in tsconfig.json in the `files` field. This is cumbersome and",
-      "here is a discussion of it: https://github.com/kulshekhar/ts-jest/issues/1604"
-    ],
     "wait-for-expect@1.x.x": [
       "Newer versions breaks the use of jest fake timers"
     ],
     "consolidate@14.0.0": [
       "Newer versions has problems with using nunjucks.",
       "Update when the following issue is resolved:",
       "https://github.com/tj/consolidate.js/issues/244"
-    ],
-    "final-form@4.18.6": [
-      "Newer versions has problems with resetting forms.",
-      "Update when the following issue is resolved:",
-      "https://github.com/final-form/final-form/issues/317"
-    ],
-    "react-final-form@6.3.0": [
-      "Newer versions has problems with radio and checkbox fields.",
-      "Update when the following issue is resolved:",
-      "https://github.com/final-form/react-final-form/issues/683"
-    ],
-    "graphql-playground-html@1.6.13": [
-      "A template was broken in a release.",
-      "Update when the following issue is resolved:",
-      "https://github.com/prisma-labs/graphql-playground/pull/1238"
     ]
   },
   "husky": {

src/core/client/admin/routes/Configure/sections/Auth/OIDCConfigContainer.tsx

@@ -50,20 +50,24 @@ class OIDCConfigContainer extends React.Component<Props, State> {
       if (config) {
         if (config.issuer) {
           this.props.form.change(
-            "auth.integrations.oidc.issuer",
+            // TODO: @(cvle) Types in final-form are not accurate...
+            "auth.integrations.oidc.issuer" as any,
             config.issuer
           );
         }
         this.props.form.change(
-          "auth.integrations.oidc.authorizationURL",
+          // TODO: @(cvle) Types in final-form are not accurate...
+          "auth.integrations.oidc.authorizationURL" as any,
           config.authorizationURL
         );
         this.props.form.change(
-          "auth.integrations.oidc.jwksURI",
+          // TODO: @(cvle) Types in final-form are not accurate...
+          "auth.integrations.oidc.jwksURI" as any,
           config.jwksURI
         );
         this.props.form.change(
-          "auth.integrations.oidc.tokenURL",
+          // TODO: @(cvle) Types in final-form are not accurate...
+          "auth.integrations.oidc.tokenURL" as any,
           config.tokenURL
         );
       }

src/core/client/framework/lib/form/withForm.tsx

@@ -8,7 +8,7 @@ import {
 } from "recompose";
 
 interface FormProps {
-  form: FormApi;
+  form: FormApi<any>;
 }
 const withForm: InferableComponentEnhancer<FormProps> = hoistStatics<any>(
   (WrappedComponent: React.ComponentType<any>) => {

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx

@@ -50,6 +50,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = (props) => {
         rteRef={props.rteRef}
         siteID={props.siteID}
         onSubmit={props.onSubmit}
+        onChange={props.onChange}
         initialValues={props.initialValues}
         min={props.min}
         max={props.max}

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -177,8 +177,12 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
       void this.props.sessionStorage.removeItem(this.contextKey);
     }
     // Reset errors whenever user clears the form.
-    if (state.touched && state.touched.body && !state.values.body) {
-      form.reset({ body: RTE_RESET_VALUE });
+    if (
+      state.touched &&
+      state.touched.body &&
+      (!state.values.body || state.values.body === RTE_RESET_VALUE)
+    ) {
+      (form as any).restart({ body: RTE_RESET_VALUE });
     }
   };
 

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.spec.tsx

@@ -1,4 +1,5 @@
 import { shallow } from "enzyme";
+import { createForm } from "final-form";
 import { noop } from "lodash";
 import React from "react";
 import sinon from "sinon";
@@ -9,7 +10,6 @@ import { createPromisifiedStorage } from "coral-framework/lib/storage";
 import { act, removeFragmentRefs, wait } from "coral-framework/testHelpers";
 import { DeepPartial, PropTypesOf } from "coral-framework/types";
 
-import { RTE_RESET_VALUE } from "../../RTE/RTE";
 import { PostCommentFormContainer } from "./PostCommentFormContainer";
 
 const contextKey = "postCommentFormBody";
@@ -136,9 +136,7 @@ it("creates a comment", async () => {
   const storyID = "story-id";
   const input = { body: "Hello World!" };
   const createCommentStub = sinon.stub().returns({ edge: { node: {} } });
-  const form = { initialize: noop };
-  const formMock = sinon.mock(form);
-  formMock.expects("initialize").withArgs({ body: RTE_RESET_VALUE }).once();
+  const form = createForm({ onSubmit: noop });
 
   const props = createDefaultProps({
     createComment: createCommentStub,
@@ -176,9 +174,6 @@ it("creates a comment", async () => {
       ).toBeTruthy()
     );
   });
-  await act(async () => {
-    await wait(() => formMock.verify());
-  });
 });
 
 it("renders when story has been closed (collapsing)", async () => {

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx

@@ -147,6 +147,9 @@ export class PostCommentFormContainer extends Component<Props, State> {
         })
       );
       if (submitStatus !== "RETRY") {
+        form
+          .getRegisteredFields()
+          .forEach((name) => form.resetFieldState(name));
         form.initialize({ body: RTE_RESET_VALUE });
       }
       this.setState({ submitStatus, nudge: true });
@@ -197,8 +200,12 @@ export class PostCommentFormContainer extends Component<Props, State> {
     }
 
     // Reset errors whenever user clears the form.
-    if (state.touched && state.touched.body && !state.values.body) {
-      form.reset({ body: RTE_RESET_VALUE });
+    if (
+      state.touched &&
+      state.touched.body &&
+      (!state.values.body || state.values.body === RTE_RESET_VALUE)
+    ) {
+      (form as any).restart({ body: RTE_RESET_VALUE });
     }
   };