[next] Auth Popup v2 (#2101)

* feat: Implement new Sign In view

* feat: Move forgot + resetPassword to new design

* feat: Implement sign up with new design

* fix: narrow gutter

* test: add unit tests

* test: integration tests

* feat: support show / hide password

* feat: support oauth2 flow

* feat: add views for user completion

* feat: implement oauth2 sign up

* test: fix snapshots

* fix: lint

* fix: get more complete mutation response

* fix: removed array of OIDC integrations

* fix: renamed resolver function

* fix: adapt oidc client implementation

* fix: targetFilter should be stream on signup

* fix: removed unneeded message

* fix: moved password into local profile

* fix: made username optional, removed valid null value

* fix: linting

* fix: respect targetFilter

* feat: support user registration mutations

- Added `setUsername`
- Added `setEmail`
- Added `setPassword`
- Added `permit` to `@auth`
- Added `email` to `User`

* fix: fixed issue with query

* feat: added user password update

* feat: complete sign in mutation

* fix: adapt some rebasing gitches

* test: improve tests

* test: unittest for setting auth token

* fix: failing tests

* test: move most tests from enzyme to react-test-renderer

* fix: remove schema warnings in tests

* test: improve window mock

* test: test different social login configurations

* test: test social logins for sign up

* fix: use htmlFor instead of for

* test: more feature tests

* feat: always go through account completion

* test: feature test account completion

* feat: addtional account completion test

* Update start.ts

* chore: refactor auth token retrieval logic

src/core/client/admin/views/decisionHistory/components/AcceptedComment.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -13,6 +13,7 @@ it("renders correctly", () => {
     date: "2018-07-06T18:24:00.000Z",
     onGotoComment: noop,
   };
-  const wrapper = shallow(<AcceptedComment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<AcceptedComment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/AcceptedIcon.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import AcceptedIcon from "./AcceptedIcon";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<AcceptedIcon />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<AcceptedIcon />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/DecisionHistory.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -22,16 +22,18 @@ it("renders correctly", () => {
     ...baseProps,
     actions: [{ id: "1" }, { id: "2" }, { id: "3" }],
   };
-  const wrapper = shallow(<DecisionHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders empty state", () => {
   const props: PropTypesOf<typeof DecisionHistoryN> = {
     ...baseProps,
   };
-  const wrapper = shallow(<DecisionHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders hasMore", () => {
@@ -40,8 +42,9 @@ it("renders hasMore", () => {
     actions: [{ id: "1" }, { id: "2" }, { id: "3" }],
     hasMore: true,
   };
-  const wrapper = shallow(<DecisionHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders disable load more", () => {
@@ -51,6 +54,7 @@ it("renders disable load more", () => {
     hasMore: true,
     disableLoadMore: true,
   };
-  const wrapper = shallow(<DecisionHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/DecisionHistory.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 
 const DecisionHistory: StatelessComponent<Props> = props => (
-  <div data-test="decisionHistory-container">
+  <div data-testid="decisionHistory-container">
     <Title />
     <Main>
       <DecisionList>

src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import DecisionHistoryLoading from "./DecisionHistoryLoading";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<DecisionHistoryLoading />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionHistoryLoading />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.tsx

@@ -8,7 +8,7 @@ import Title from "./Title";
 import styles from "./DecisionHistoryLoading.css";
 
 const DecisionHistoryLoading: StatelessComponent = () => (
-  <div data-test="decisionHistory-loading-container">
+  <div data-testid="decisionHistory-loading-container">
     <Title />
     <Main>
       <Flex

src/core/client/admin/views/decisionHistory/components/DecisionItem.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -10,6 +10,7 @@ it("renders correctly", () => {
     icon: "icon",
     children: "children",
   };
-  const wrapper = shallow(<DecisionItem {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionItem {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/DecisionList.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof DecisionList> = {
     children: "children",
   };
-  const wrapper = shallow(<DecisionList {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DecisionList {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/DotDivider.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import DotDivider from "./DotDivider";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<DotDivider />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<DotDivider />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Empty.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import Empty from "./Empty";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<Empty />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Empty />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Footer.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof Footer> = {
     children: "children",
   };
-  const wrapper = shallow(<Footer {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Footer {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/GoToCommentLink.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     href: "#",
     onClick: noop,
   };
-  const wrapper = shallow(<GoToCommentLink {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<GoToCommentLink {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Info.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof Info> = {
     children: "children",
   };
-  const wrapper = shallow(<Info {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Info {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Main.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof Main> = {
     children: "children",
   };
-  const wrapper = shallow(<Main {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Main {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/RejectedComment.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -13,6 +13,7 @@ it("renders correctly", () => {
     date: "2018-07-06T18:24:00.000Z",
     onGotoComment: noop,
   };
-  const wrapper = shallow(<RejectedComment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<RejectedComment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/RejectedIcon.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import RejectedIcon from "./RejectedIcon";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<RejectedIcon />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<RejectedIcon />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/ShowMoreButton.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     disabled: false,
     onClick: noop,
   };
-  const wrapper = shallow(<ShowMoreButton {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ShowMoreButton {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Timestamp.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof Timestamp> = {
     children: "2018-07-06T18:24:00.000Z",
   };
-  const wrapper = shallow(<Timestamp {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Timestamp {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/Title.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import Title from "./Title";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<Title />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Title />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/admin/views/decisionHistory/components/__snapshots__/DecisionHistory.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  data-test="decisionHistory-container"
+  data-testid="decisionHistory-container"
 >
   <Title />
   <Main>
@@ -13,7 +13,6 @@ exports[`renders correctly 1`] = `
             "id": "1",
           }
         }
-        key="1"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -22,7 +21,6 @@ exports[`renders correctly 1`] = `
             "id": "2",
           }
         }
-        key="2"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -31,7 +29,6 @@ exports[`renders correctly 1`] = `
             "id": "3",
           }
         }
-        key="3"
         onClosePopover={[Function]}
       />
     </DecisionList>
@@ -41,7 +38,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders disable load more 1`] = `
 <div
-  data-test="decisionHistory-container"
+  data-testid="decisionHistory-container"
 >
   <Title />
   <Main>
@@ -52,7 +49,6 @@ exports[`renders disable load more 1`] = `
             "id": "1",
           }
         }
-        key="1"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -61,7 +57,6 @@ exports[`renders disable load more 1`] = `
             "id": "2",
           }
         }
-        key="2"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -70,7 +65,6 @@ exports[`renders disable load more 1`] = `
             "id": "3",
           }
         }
-        key="3"
         onClosePopover={[Function]}
       />
     </DecisionList>
@@ -84,7 +78,7 @@ exports[`renders disable load more 1`] = `
 
 exports[`renders empty state 1`] = `
 <div
-  data-test="decisionHistory-container"
+  data-testid="decisionHistory-container"
 >
   <Title />
   <Main>
@@ -97,7 +91,7 @@ exports[`renders empty state 1`] = `
 
 exports[`renders hasMore 1`] = `
 <div
-  data-test="decisionHistory-container"
+  data-testid="decisionHistory-container"
 >
   <Title />
   <Main>
@@ -108,7 +102,6 @@ exports[`renders hasMore 1`] = `
             "id": "1",
           }
         }
-        key="1"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -117,7 +110,6 @@ exports[`renders hasMore 1`] = `
             "id": "2",
           }
         }
-        key="2"
         onClosePopover={[Function]}
       />
       <Relay(DecisionHistoryItemContainer)
@@ -126,7 +118,6 @@ exports[`renders hasMore 1`] = `
             "id": "3",
           }
         }
-        key="3"
         onClosePopover={[Function]}
       />
     </DecisionList>

src/core/client/admin/views/decisionHistory/components/__snapshots__/DecisionHistoryLoading.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  data-test="decisionHistory-loading-container"
+  data-testid="decisionHistory-loading-container"
 >
   <Title />
   <Main>