Merge pull request #1788 from coralproject/auth-skeleton

[next] Initial support for Auth popup

config/jest/client.config.js

@@ -24,6 +24,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     "^talk-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
+    "^talk-auth/(.*)$": "<rootDir>/src/core/client/auth/$1",
     "^talk-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
     "^talk-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
     "^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",

config/watcher.ts

@@ -31,6 +31,23 @@ const config: Config = {
         runOnInit: true,
       }),
     },
+    compileRelayAuth: {
+      paths: [
+        "core/client/auth/**/*.ts",
+        "core/client/auth/**/*.tsx",
+        "core/client/auth/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
+      ],
+      executor: new CommandExecutor("npm run compile:relay-auth", {
+        runOnInit: true,
+      }),
+    },
     compileCSSTypes: {
       paths: ["**/*.css"],
       executor: new CommandExecutor("npm run compile:css-types", {
@@ -59,9 +76,15 @@ const config: Config = {
       "runWebpackDevServer",
       "compileCSSTypes",
       "compileRelayStream",
+      "compileRelayAuth",
     ],
     docz: ["runDocz", "compileCSSTypes"],
-    compile: ["compileSchema", "compileCSSTypes", "compileRelayStream"],
+    compile: [
+      "compileSchema",
+      "compileCSSTypes",
+      "compileRelayStream",
+      "compileRelayAuth",
+    ],
   },
 };
 

package.json

@@ -9,6 +9,7 @@
     "compile": "npm-run-all --parallel compile:*",
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "ts-node ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
+    "compile:relay-auth": "ts-node ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
     "compile:schema": "node ./scripts/generateSchemaTypes.js",
     "docz": "docz",
     "start": "node dist/index.js",

src/core/build/createWebpackConfig.ts

@@ -80,6 +80,28 @@ export default function createWebpackConfig({
     },
   ];
 
+  const localesOptions = {
+    pathToLocales: paths.appLocales,
+
+    // Default locale if non could be negotiated.
+    defaultLocale: "en-US",
+
+    // Fallback locale if a translation was not found.
+    // If not set, will use the text that is already
+    // in the code base.
+    fallbackLocale: "en-US",
+
+    // Common fluent files are always included in the locale bundles.
+    commonFiles: ["framework.ftl", "common.ftl"],
+
+    // Locales that come with the main bundle. Others are loaded on demand.
+    bundled: ["en-US"],
+
+    // All available locales can be loadable on demand.
+    // To restrict available locales set:
+    // availableLocales: ["en-US"],
+  };
+
   const additionalPlugins = isProduction
     ? [
         // Minify the code.
@@ -214,29 +236,26 @@ export default function createWebpackConfig({
                 {
                   loader: "locales-loader",
                   options: {
-                    pathToLocales: paths.appLocales,
-
-                    // Default locale if non could be negotiated.
-                    defaultLocale: "en-US",
-
-                    // Fallback locale if a translation was not found.
-                    // If not set, will use the text that is already
-                    // in the code base.
-                    fallbackLocale: "en-US",
-
-                    // Common fluent files are always included in the locale bundles.
-                    commonFiles: ["framework.ftl", "common.ftl"],
-
-                    // Locales that come with the main bundle. Others are loaded on demand.
-                    bundled: ["en-US"],
-
+                    ...localesOptions,
                     // Target specifies the prefix for fluent files to be loaded.
                     // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
                     target: "stream",
-
-                    // All available locales can be loadable on demand.
-                    // To restrict available locales set:
-                    // availableLocales: ["en-US"],
+                  },
+                },
+              ],
+            },
+            {
+              test: paths.appAuthLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    ...localesOptions,
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "auth",
                   },
                 },
               ],
@@ -380,6 +399,24 @@ export default function createWebpackConfig({
           paths.appStreamIndex,
           // Remove deactivated entries.
         ].filter(s => s),
+        auth: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          // Include an alternative client for WebpackDevServer. A client's job is to
+          // connect to WebpackDevServer by a socket and get notified about changes.
+          // When you save a file, the client will either apply hot updates (in case
+          // of CSS changes), or refresh the page (in case of JS changes). When you
+          // make a syntax error, this client will display a syntax error overlay.
+          // Note: instead of the default WebpackDevServer client, we use a custom one
+          // to bring better experience for Create React App users. You can replace
+          // the line below with these two lines if you prefer the stock client:
+          // require.resolve('webpack-dev-server/client') + '?/',
+          // require.resolve('webpack/hot/dev-server'),
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+          paths.appAuthIndex,
+          // Remove deactivated entries.
+        ].filter(s => s),
       },
       plugins: [
         ...baseConfig.plugins!,
@@ -391,6 +428,14 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
+        // Generates an `auth.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "auth.html",
+          template: paths.appAuthHTML,
+          chunks: ["auth"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

src/core/build/paths.ts

@@ -23,6 +23,9 @@ export default {
   appStreamHTML: resolveSrc("core/client/stream/index.html"),
   appStreamLocalesTemplate: resolveSrc("core/client/stream/locales.ts"),
   appStreamIndex: resolveSrc("core/client/stream/index.tsx"),
+  appAuthHTML: resolveSrc("core/client/auth/index.html"),
+  appAuthLocalesTemplate: resolveSrc("core/client/auth/locales.ts"),
+  appAuthIndex: resolveSrc("core/client/auth/index.tsx"),
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
 

src/core/client/auth/.babelrc.js

@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};

src/core/client/auth/components/App.css

@@ -0,0 +1,15 @@
+/* Here we add global stylings for body and document */
+:global {
+  body {
+    margin: "0";
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.root {
+  width: 100%;
+}

src/core/client/auth/components/App.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+import * as styles from "./App.css";
+
+export interface AppProps {
+  // TODO: (cvle) Remove %future added value when we have Relay 1.6
+  // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
+  view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
+}
+
+const App: StatelessComponent<AppProps> = props => {
+  return (
+    <Flex justifyContent="center" className={styles.root}>
+      Current View: {props.view}
+    </Flex>
+  );
+};
+
+export default App;

src/core/client/auth/containers/AppContainer.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { AppContainerLocal as Local } from "talk-auth/__generated__/AppContainerLocal.graphql";
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+
+import App from "../components/App";
+
+interface InnerProps {
+  local: Local;
+}
+
+const AppContainer: StatelessComponent<InnerProps> = ({ local: { view } }) => {
+  return <App view={view} />;
+};
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment AppContainerLocal on Local {
+      view
+    }
+  `
+)(AppContainer);
+
+export default enhanced;

src/core/client/auth/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk - Auth</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>

src/core/client/auth/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  createContext,
+  TalkContext,
+  TalkContextProvider,
+} from "talk-framework/lib/bootstrap";
+
+import AppContainer from "./containers/AppContainer";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+
+// This is called when the context is first initialized.
+async function init({ relayEnvironment }: TalkContext) {
+  await initLocalState(relayEnvironment);
+}
+
+async function main() {
+  // Bootstrap our context.
+  const context = await createContext({
+    init,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Index: StatelessComponent = () => (
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();

src/core/client/auth/local/__snapshots__/initLocalState.spec.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`init local state 1`] = `
+"{
+  \\"client:root\\": {
+    \\"__id\\": \\"client:root\\",
+    \\"__typename\\": \\"__Root\\",
+    \\"local\\": {
+      \\"__ref\\": \\"client:root.local\\"
+    }
+  },
+  \\"client:root.local\\": {
+    \\"__id\\": \\"client:root.local\\",
+    \\"__typename\\": \\"Local\\",
+    \\"view\\": \\"SIGN_IN\\"
+  }
+}"
+`;

src/core/client/auth/local/index.ts

@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";

src/core/client/auth/local/initLocalState.spec.ts

@@ -0,0 +1,36 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import initLocalState from "./initLocalState";
+
+let environment: Environment;
+let source: RecordSource;
+
+beforeEach(() => {
+  source = new RecordSource();
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: false,
+  });
+});
+
+it("init local state", () => {
+  initLocalState(environment);
+  expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
+});
+
+it("set view from query", () => {
+  const view = "SIGN_UP";
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  window.history.replaceState(
+    previousState,
+    document.title,
+    `http://localhost/?view=${view}`
+  );
+  initLocalState(environment);
+  expect(source.get(LOCAL_ID)!.view).toBe(view);
+  window.history.replaceState(previousState, document.title, previousLocation);
+});

src/core/client/auth/local/initLocalState.ts

@@ -0,0 +1,28 @@
+import qs from "query-string";
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+} from "talk-framework/lib/relay";
+
+/**
+ * Initializes the local state, before we start the App.
+ */
+export default async function initLocalState(environment: Environment) {
+  commitLocalUpdate(environment, s => {
+    const root = s.getRoot();
+
+    // Create the Local Record which is the Root for the client states.
+    const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+
+    // Parse query params
+    const query = qs.parse(location.search);
+
+    // Set default view.
+    localRecord.setValue(query.view || "SIGN_IN", "view");
+
+    root.setLinkedRecord(localRecord, "local");
+  });
+}

src/core/client/auth/local/local.graphql

@@ -0,0 +1,13 @@
+enum View {
+  SIGN_UP
+  SIGN_IN
+  FORGOT_PASSWORD
+}
+
+type Local {
+  view: View!
+}
+
+extend type Query {
+  local: Local!
+}

src/core/client/auth/locales.ts

@@ -0,0 +1,9 @@
+/**
+ * The actual content of this file is being generated by our `locales-loader`.
+ * Please check `./src/loaders` and the webpack config for more information.
+ *
+ * This file only represents the types that gets exported.
+ */
+
+import { LocalesData } from "talk-framework/lib/i18n";
+export default {} as LocalesData;

src/core/client/auth/mutations/SetViewMutation.spec.ts

@@ -0,0 +1,21 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { commit } from "./SetViewMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+  });
+});
+
+it("Sets view", () => {
+  const view = "SIGN_UP";
+  commit(environment, { view }, {} as any);
+  expect(source.get(LOCAL_ID)!.view).toEqual(view);
+});

src/core/client/auth/mutations/SetViewMutation.ts

@@ -0,0 +1,25 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { TalkContext } from "talk-framework/lib/bootstrap";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
+
+export interface SetViewInput {
+  // TODO: replace with generated typescript types.
+  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
+}
+
+export type SetViewMutation = (input: SetViewInput) => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: SetViewInput,
+  { pym }: TalkContext
+) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.view, "view");
+  });
+}
+
+export const withSetViewMutation = createMutationContainer("setView", commit);

src/core/client/auth/mutations/index.ts

@@ -0,0 +1 @@
+export { withSetViewMutation, SetViewMutation } from "./SetViewMutation";

src/core/client/embed/index.html

@@ -6,6 +6,12 @@
   <meta charset="utf-8">
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, user-scalable=no">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
 </head>
 
 <body>

src/core/client/framework/testHelpers/createRelayEnvironment.ts

@@ -31,12 +31,19 @@ export interface CreateRelayEnvironmentNetworkParams {
 export interface CreateRelayEnvironmentParams {
   /** If set, creates a network to a local graphql server with a local schema */
   network?: CreateRelayEnvironmentNetworkParams;
-  /** Allows to set initial state for Local state */
-  initLocalState?: (
-    local: RecordProxy,
-    source: RecordSourceProxy,
-    environment: Environment
-  ) => void;
+  /**
+   * Initializes an empty local state if true.
+   * When passing in a function it gets executed after
+   * the intialization. Defaults to true.
+   */
+  initLocalState?:
+    | ((
+        local: RecordProxy,
+        source: RecordSourceProxy,
+        environment: Environment
+      ) => void)
+    | false
+    | true;
   /** Use this source for creating the environment */
   source?: RecordSource;
 }
@@ -61,18 +68,20 @@ export default function createRelayEnvironment(
     network,
     store: new Store(params.source || new RecordSource()),
   });
-  commitLocalUpdate(environment, sourceProxy => {
-    const root = sourceProxy.getRoot();
-    const localRecord = createAndRetain(
-      environment,
-      sourceProxy,
-      LOCAL_ID,
-      LOCAL_TYPE
-    );
-    root.setLinkedRecord(localRecord, "local");
-    if (params.initLocalState) {
-      params.initLocalState!(localRecord, sourceProxy, environment);
-    }
-  });
+  if (params.initLocalState !== false) {
+    commitLocalUpdate(environment, sourceProxy => {
+      const root = sourceProxy.getRoot();
+      const localRecord = createAndRetain(
+        environment,
+        sourceProxy,
+        LOCAL_ID,
+        LOCAL_TYPE
+      );
+      root.setLinkedRecord(localRecord, "local");
+      if (typeof params.initLocalState === "function") {
+        params.initLocalState!(localRecord, sourceProxy, environment);
+      }
+    });
+  }
   return environment;
 }

src/core/client/stream/components/App.css

@@ -1,7 +1,8 @@
 /* Here we add global stylings for body and document */
 :global {
   body {
-    margin: "0";
+    margin: 0;
+    padding: 2px 8px;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;

src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap

@@ -1,21 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;

src/core/client/stream/components/PostCommentForm.css

@@ -1,3 +1,7 @@
+.root {
+  width: 100%;
+}
+
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
 

src/core/client/stream/components/PostCommentForm.tsx

@@ -20,7 +20,7 @@ export interface PostCommentFormProps {
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
-      <form autoComplete="off" onSubmit={handleSubmit}>
+      <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
         <Field name="body" validate={required}>
           {({ input, meta }) => (
             <div>

src/core/client/stream/components/Stream.tsx

@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
+import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -20,7 +21,8 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div className={styles.root}>
+    <Flex className={styles.root} direction="column" itemGutter>
+      <UserBoxContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
@@ -50,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
           </Localized>
         )}
       </Flex>
-    </div>
+    </Flex>
   );
 };
 

src/core/client/stream/components/UserBoxUnauthenticated.css

@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}

src/core/client/stream/components/UserBoxUnauthenticated.spec.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/components/UserBoxUnauthenticated.tsx

@@ -0,0 +1,49 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import * as styles from "./UserBoxUnauthenticated.css";
+
+export interface UserBoxUnauthenticatedProps {
+  onSignIn: () => void;
+  onRegister: () => void;
+}
+
+const UserBoxUnauthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
+  return (
+    <Flex>
+      <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+        <Typography
+          className={styles.joinText}
+          variant="bodyCopyBold"
+          component="span"
+        >
+          Join the conversation
+        </Typography>
+      </Localized>
+      <Typography variant="bodyCopyBold" component="span">
+        |
+      </Typography>
+      <Localized id="comments-userBoxUnauthenticated-signIn">
+        <Button color="primary" size="small" onClick={props.onSignIn}>
+          Sign in
+        </Button>
+      </Localized>
+      <Localized id="comments-userBoxUnauthenticated-register">
+        <Button
+          color="primary"
+          size="small"
+          variant="outlined"
+          onClick={props.onRegister}
+        >
+          Register
+        </Button>
+      </Localized>
+    </Flex>
+  );
+};
+
+export default UserBoxUnauthenticated;

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -55,13 +58,16 @@ exports[`renders correctly 1`] = `
       />
     </withPropsOnChange(Flex)>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -127,13 +133,16 @@ exports[`when there is more disables load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -199,5 +208,5 @@ exports[`when there is more renders a load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;

src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)>
+  <Localized
+    id="comments-userBoxUnauthenticated-joinTheConversation"
+  >
+    <withPropsOnChange(Typography)
+      className="UserBoxUnauthenticated-joinText"
+      component="span"
+      variant="bodyCopyBold"
+    >
+      Join the conversation
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <withPropsOnChange(Typography)
+    component="span"
+    variant="bodyCopyBold"
+  >
+    |
+  </withPropsOnChange(Typography)>
+  <Localized
+    id="comments-userBoxUnauthenticated-signIn"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      onClick={[Function]}
+      size="small"
+    >
+      Sign in
+    </withPropsOnChange(Button)>
+  </Localized>
+  <Localized
+    id="comments-userBoxUnauthenticated-register"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      onClick={[Function]}
+      size="small"
+      variant="outlined"
+    >
+      Register
+    </withPropsOnChange(Button)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;

src/core/client/stream/containers/UserBoxContainer.spec.tsx

@@ -0,0 +1,24 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { UserBoxContainer } from "./UserBoxContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<UserBoxContainer> = {
+    local: {
+      authPopup: {
+        open: false,
+        focus: false,
+        view: "SIGN_IN",
+      },
+    },
+    // tslint:disable-next-line:no-empty
+    showAuthPopup: async () => {},
+    // tslint:disable-next-line:no-empty
+    setAuthPopupState: async () => {},
+  };
+  const wrapper = shallow(<UserBoxContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Component } from "react";
+
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
+import {
+  SetAuthPopupStateMutation,
+  ShowAuthPopupMutation,
+  withSetAuthPopupStateMutation,
+  withShowAuthPopupMutation,
+} from "talk-stream/mutations";
+import { Popup } from "talk-ui/components";
+
+import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+
+interface InnerProps {
+  local: Local;
+  showAuthPopup: ShowAuthPopupMutation;
+  setAuthPopupState: SetAuthPopupStateMutation;
+}
+
+export class UserBoxContainer extends Component<InnerProps> {
+  private handleFocus = () => this.props.setAuthPopupState({ focus: true });
+  private handleBlur = () => this.props.setAuthPopupState({ focus: false });
+  private handleClose = () => this.props.setAuthPopupState({ open: false });
+  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
+
+  public render() {
+    const {
+      local: {
+        authPopup: { open, focus, view },
+      },
+    } = this.props;
+    return (
+      <>
+        <Popup
+          href={`/auth.html?view=${view}`}
+          title="Talk Auth"
+          features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+          open={open}
+          focus={focus}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onClose={this.handleClose}
+        />
+        <UserBoxUnauthenticated
+          onSignIn={this.handleSignIn}
+          onRegister={this.handleRegister}
+        />
+      </>
+    );
+  }
+}
+
+const enhanced = withSetAuthPopupStateMutation(
+  withShowAuthPopupMutation(
+    withLocalStateContainer<Local>(
+      graphql`
+        fragment UserBoxContainerLocal on Local {
+          authPopup {
+            open
+            focus
+            view
+          }
+        }
+      `
+    )(UserBoxContainer)
+  )
+);
+
+export default enhanced;

src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<React.Fragment>
+  <Popup
+    features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+    focus={false}
+    href="/auth.html?view=SIGN_IN"
+    onBlur={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    open={false}
+    title="Talk Auth"
+  />
+  <UserBoxUnauthenticated
+    onRegister={[Function]}
+    onSignIn={[Function]}
+  />
+</React.Fragment>
+`;

src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`init local state 1`] = `
+"{
+  \\"client:root\\": {
+    \\"__id\\": \\"client:root\\",
+    \\"__typename\\": \\"__Root\\",
+    \\"local\\": {
+      \\"__ref\\": \\"client:root.local\\"
+    }
+  },
+  \\"client:root.local\\": {
+    \\"__id\\": \\"client:root.local\\",
+    \\"__typename\\": \\"Local\\",
+    \\"network\\": {
+      \\"__ref\\": \\"client:root.local.network\\"
+    },
+    \\"authPopup\\": {
+      \\"__ref\\": \\"client:root.local.authPopup\\"
+    }
+  },
+  \\"client:root.local.network\\": {
+    \\"__id\\": \\"client:root.local.network\\",
+    \\"__typename\\": \\"Network\\",
+    \\"isOffline\\": false
+  },
+  \\"client:root.local.authPopup\\": {
+    \\"__id\\": \\"client:root.local.authPopup\\",
+    \\"__typename\\": \\"AuthPopup\\",
+    \\"open\\": false,
+    \\"focus\\": false,
+    \\"href\\": \\"\\"
+  }
+}"
+`;

src/core/client/stream/local/constants.ts

@@ -4,3 +4,6 @@
 
 export const NETWORK_TYPE = "Network";
 export const NETWORK_ID = "client:root.local.network";
+
+export const AUTH_POPUP_TYPE = "AuthPopup";
+export const AUTH_POPUP_ID = "client:root.local.authPopup";

src/core/client/stream/local/initLocalState.spec.ts

@@ -0,0 +1,52 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { timeout } from "talk-common/utils";
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import initLocalState from "./initLocalState";
+
+let environment: Environment;
+let source: RecordSource;
+
+beforeEach(() => {
+  source = new RecordSource();
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: false,
+  });
+});
+
+it("init local state", async () => {
+  initLocalState(environment);
+  await timeout();
+  expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
+});
+
+it("set assetID from query", () => {
+  const assetID = "asset-id";
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  window.history.replaceState(
+    previousState,
+    document.title,
+    `http://localhost/?assetID=${assetID}`
+  );
+  initLocalState(environment);
+  expect(source.get(LOCAL_ID)!.assetID).toBe(assetID);
+  window.history.replaceState(previousState, document.title, previousLocation);
+});
+
+it("set commentID from query", () => {
+  const commentID = "comment-id";
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  window.history.replaceState(
+    previousState,
+    document.title,
+    `http://localhost/?commentID=${commentID}`
+  );
+  initLocalState(environment);
+  expect(source.get(LOCAL_ID)!.commentID).toBe(commentID);
+  window.history.replaceState(previousState, document.title, previousLocation);
+});

src/core/client/stream/local/initLocalState.ts

@@ -7,7 +7,12 @@ import {
   LOCAL_TYPE,
 } from "talk-framework/lib/relay";
 
-import { NETWORK_ID, NETWORK_TYPE } from "./constants";
+import {
+  AUTH_POPUP_ID,
+  AUTH_POPUP_TYPE,
+  NETWORK_ID,
+  NETWORK_TYPE,
+} from "./constants";
 
 /**
  * Initializes the local state, before we start the App.
@@ -18,6 +23,7 @@ export default async function initLocalState(environment: Environment) {
 
     // Create the Local Record which is the Root for the client states.
     const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+    root.setLinkedRecord(localRecord, "local");
 
     // Parse query params
     const query = qs.parse(location.search);
@@ -47,6 +53,17 @@ export default async function initLocalState(environment: Environment) {
     );
     networkRecord.setValue(false, "isOffline");
     localRecord.setLinkedRecord(networkRecord, "network");
-    root.setLinkedRecord(localRecord, "local");
+
+    // Create authPopup Record
+    const authPopupRecord = createAndRetain(
+      environment,
+      s,
+      AUTH_POPUP_ID,
+      AUTH_POPUP_TYPE
+    );
+    authPopupRecord.setValue(false, "open");
+    authPopupRecord.setValue(false, "focus");
+    authPopupRecord.setValue("", "href");
+    localRecord.setLinkedRecord(authPopupRecord, "authPopup");
   });
 }

src/core/client/stream/local/local.graphql

@@ -3,11 +3,24 @@ type Network {
   isOffline: Boolean!
 }
 
+enum View {
+  SIGN_UP
+  SIGN_IN
+  FORGOT_PASSWORD
+}
+
+type AuthPopup {
+  open: Boolean!
+  focus: Boolean!
+  view: View
+}
+
 type Local {
   network: Network!
   assetID: String
-  commentID: String
   assetURL: String
+  commentID: String
+  authPopup: AuthPopup!
 }
 
 extend type Query {

src/core/client/stream/mutations/SetAuthPopupStateMutation.spec.ts

@@ -0,0 +1,52 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
+import { commit } from "./SetAuthPopupStateMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: (localRecord, sourceProxy) => {
+      const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
+      record.setValue(false, "open");
+      record.setValue(false, "focus");
+      localRecord.setLinkedRecord(record, "authPopup");
+    },
+  });
+});
+
+it("sets state", () => {
+  commit(environment, { open: true, focus: false });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
+});
+
+it("sets state", () => {
+  commit(environment, {
+    open: false,
+    focus: true,
+    href: "https://coralproject.net",
+  });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.href).toEqual("https://coralproject.net");
+});
+
+it("keep previous state", () => {
+  commit(environment, { open: false, focus: true });
+  commit(environment, {});
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
+});
+
+it("change only one", () => {
+  commit(environment, { open: false, focus: true });
+  commit(environment, { open: true });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
+});

src/core/client/stream/mutations/SetAuthPopupStateMutation.ts

@@ -0,0 +1,38 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { createMutationContainer } from "talk-framework/lib/relay";
+
+import { AUTH_POPUP_ID } from "../local";
+
+export interface SetAuthPopupStateInput {
+  open?: boolean;
+  focus?: boolean;
+  href?: string;
+}
+
+export type SetAuthPopupStateMutation = (
+  input: SetAuthPopupStateInput
+) => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: SetAuthPopupStateInput
+) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(AUTH_POPUP_ID)!;
+    if (input.open !== undefined) {
+      record.setValue(input.open, "open");
+    }
+    if (input.focus !== undefined) {
+      record.setValue(input.focus, "focus");
+    }
+    if (input.href !== undefined) {
+      record.setValue(input.href, "href");
+    }
+  });
+}
+
+export const withSetAuthPopupStateMutation = createMutationContainer(
+  "setAuthPopupState",
+  commit
+);

src/core/client/stream/mutations/SetNetworkStatusMutation.spec.ts

@@ -3,7 +3,6 @@ import { Environment, RecordSource } from "relay-runtime";
 import { createRelayEnvironment } from "talk-framework/testHelpers";
 
 import { NETWORK_ID, NETWORK_TYPE } from "../local";
-
 import { commit } from "./SetNetworkStatusMutation";
 
 let environment: Environment;

src/core/client/stream/mutations/ShowAuthPopupMutation.spec.ts

@@ -0,0 +1,42 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
+import { commit } from "./ShowAuthPopupMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+    initLocalState: (localRecord, sourceProxy) => {
+      const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
+      record.setValue(false, "open");
+      record.setValue(false, "focus");
+      localRecord.setLinkedRecord(record, "authPopup");
+    },
+  });
+});
+
+it("opens popup", () => {
+  commit(environment, { view: "SIGN_IN" });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
+  expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
+});
+
+it("focuses popup", () => {
+  commit(environment, { view: "SIGN_IN" });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
+});
+
+it("only change view when opened and focused", () => {
+  commit(environment, { view: "FORGOT_PASSWORD" });
+  expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
+  expect(source.get(AUTH_POPUP_ID)!.view).toEqual("FORGOT_PASSWORD");
+});

src/core/client/stream/mutations/ShowAuthPopupMutation.ts

@@ -0,0 +1,36 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { createMutationContainer } from "talk-framework/lib/relay";
+
+import { AUTH_POPUP_ID } from "../local";
+
+export interface ShowAuthPopupInput {
+  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
+}
+
+export type ShowAuthPopupMutation = (
+  input: ShowAuthPopupInput
+) => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: ShowAuthPopupInput
+) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(AUTH_POPUP_ID)!;
+    record.setValue(input.view, "view");
+    if (!record.getValue("open")) {
+      record.setValue(true, "open");
+      return;
+    }
+    if (!record.getValue("focus")) {
+      record.setValue(true, "focus");
+      return;
+    }
+  });
+}
+
+export const withShowAuthPopupMutation = createMutationContainer(
+  "showAuthPopup",
+  commit
+);

src/core/client/stream/mutations/index.ts

@@ -13,3 +13,11 @@ export {
   SetCommentIDMutation,
   SetCommentIDInput,
 } from "./SetCommentIDMutation";
+export {
+  withShowAuthPopupMutation,
+  ShowAuthPopupMutation,
+} from "./ShowAuthPopupMutation";
+export {
+  withSetAuthPopupStateMutation,
+  SetAuthPopupStateMutation,
+} from "./SetAuthPopupStateMutation";

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -1,141 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loads more comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-            >
-              Lukas
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
-            >
-              2018-07-06T18:20:00.000Z
-            </time>
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="PostCommentForm-postButtonContainer"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              Isabelle
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:14:00.000Z"
-              title="2018-07-06T18:14:00.000Z"
-            >
-              2018-07-06T18:14:00.000Z
-            </time>
+              Post
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Hey!
-          </p>
+        </form>
+        <div>
           <div
-            className="Comment-footer"
-          />
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Isabelle
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:14:00.000Z"
+                        title="2018-07-06T18:14:00.000Z"
+                      >
+                        2018-07-06T18:14:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Hey!
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -144,126 +203,181 @@ exports[`loads more comments 1`] = `
 `;
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
-            >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              Lukas
+              |
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              2018-07-06T18:20:00.000Z
-            </time>
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <button
+              aria-controls="talk-comments-stream-log"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+              disabled={false}
+              id="talk-comments-stream-loadMore"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Load More
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-controls="talk-comments-stream-log"
-        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-        disabled={false}
-        id="talk-comments-stream-loadMore"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Load More
-      </button>
     </div>
   </div>
 </div>

src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap

@@ -1,57 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="PermalinkView-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
-    >
-      Show all Comments
-    </a>
     <div
-      className="Flex-root Flex-alignFlexStart Flex-directionColumn"
+      className="PermalinkView-root"
     >
-      <div
-        role="article"
+      <a
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        href="http://localhost/"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        target="_parent"
       >
+        Show all Comments
+      </a>
+      <div>
         <div
-          className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
         >
-          <span
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          <div
+            role="article"
           >
-            Markus
-          </span>
-          <time
-            className="Timestamp-root RelativeTime-root"
-            dateTime="2018-07-06T18:24:00.000Z"
-            title="2018-07-06T18:24:00.000Z"
-          >
-            2018-07-06T18:24:00.000Z
-          </time>
+            <div>
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+            </div>
+            <p
+              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            >
+              Joining Too
+            </p>
+            <div
+              className="Comment-footer"
+            />
+          </div>
         </div>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-        >
-          Joining Too
-        </p>
-        <div
-          className="Comment-footer"
-        />
       </div>
     </div>
   </div>
@@ -59,77 +65,128 @@ exports[`renders permalink view 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view with unknown asset 1`] = `
+<div>
+  <div
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+  >
+    <div
+      className="PermalinkView-root"
+    >
+      <a
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        href="http://localhost/"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        target="_parent"
+      >
+        Show all Comments
+      </a>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Comment not found
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -1,108 +1,161 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="PermalinkView-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
+    <div
+      className="PermalinkView-root"
     >
-      Show all Comments
-    </a>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
-      Comment not found
-    </p>
+      <a
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        href="http://localhost/"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        target="_parent"
+      >
+        Show all Comments
+      </a>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Comment not found
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`show all comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -1,173 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
-            >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              Markus
+              |
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            I like yoghurt
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-        <div
-          className="Indent-root Indent-level0"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
           <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-with-replies"
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
             role="log"
           >
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Markus
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
-                >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                Joining Too
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    I like yoghurt
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-with-replies"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Markus
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          Joining Too
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
           </div>
         </div>

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -1,109 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-            >
-              Lukas
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
-            >
-              2018-07-06T18:20:00.000Z
-            </time>
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -1,119 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-        <div
-          className="Indent-root Indent-level0"
-        >
-          <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              role="article"
-            >
-              <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
-                >
-                  2018-07-06T18:20:00.000Z
-                </time>
-              </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
-            </div>
+              |
+            </span>
             <button
-              aria-controls="talk-comments-replyList-log--comment-0"
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-              disabled={false}
-              id="talk-comments-replyList-showAll--comment-0"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -122,8 +33,152 @@ exports[`renders comment stream 1`] = `
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
             >
-              Show All Replies
+              Sign in
             </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
+          <div
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
+                >
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-0"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <button
+                        aria-controls="talk-comments-replyList-log--comment-0"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+                        disabled={false}
+                        id="talk-comments-replyList-showAll--comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                      >
+                        Show All Replies
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -133,141 +188,198 @@ exports[`renders comment stream 1`] = `
 `;
 
 exports[`show all replies 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Stream-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <form
-      autoComplete="off"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign in
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-        <div
-          className="Indent-root Indent-level0"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
           <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-0"
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
             role="log"
           >
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-0"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Isabelle
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:14:00.000Z"
+                              title="2018-07-06T18:14:00.000Z"
+                            >
+                              2018-07-06T18:14:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          Hey!
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
-            </div>
-            <div
-              role="article"
-            >
-              <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Isabelle
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:14:00.000Z"
-                  title="2018-07-06T18:14:00.000Z"
-                >
-                  2018-07-06T18:14:00.000Z
-                </time>
-              </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                Hey!
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
           </div>
         </div>

src/core/client/stream/test/createEnvironment.ts

@@ -0,0 +1,34 @@
+import { IResolvers } from "graphql-tools";
+import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "talk-stream/local";
+
+interface CreateEnvironmentParams {
+  logNetwork?: boolean;
+  resolvers: IResolvers<any, any>;
+  initLocalState?: (
+    local: RecordProxy,
+    source: RecordSourceProxy,
+    environment: Environment
+  ) => void;
+}
+
+export default function createEnvironment(params: CreateEnvironmentParams) {
+  return createRelayEnvironment({
+    network: {
+      logNetwork: params.logNetwork,
+      resolvers: params.resolvers,
+      projectName: "tenant",
+    },
+    initLocalState: (localRecord, source, environment) => {
+      const authPopupRecord = source.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
+      authPopupRecord.setValue(false, "open");
+      authPopupRecord.setValue(false, "focus");
+      authPopupRecord.setValue("", "href");
+      localRecord.setLinkedRecord(authPopupRecord, "authPopup");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}

src/core/client/stream/test/loadMore.spec.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
-import { RecordProxy } from "relay-runtime";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const connectionStub = sinon.stub().throws();
@@ -61,14 +60,11 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
-  initLocalState: (localRecord: RecordProxy) => {
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord, source) => {
     localRecord.setValue(assetStub.id, "assetID");
   },
 });

src/core/client/stream/test/permalinkView.spec.tsx

@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const commentStub = {
@@ -44,13 +44,10 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue(commentStub.id, "commentID");

src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+
+import { timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
+
+import createEnvironment from "./createEnvironment";
+
+const resolvers = {
+  Query: {
+    comment: () => null,
+    asset: () => null,
+  },
+};
+
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("unknown-asset-id", "assetID");
+    localRecord.setValue("unknown-comment-id", "commentID");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeMessages: [],
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders permalink view with unknown asset", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx

@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const commentStub = {
@@ -40,13 +40,10 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");

src/core/client/stream/test/renderReplies.spec.tsx

@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assetWithReplies } from "./fixtures";
 
 const resolvers = {
@@ -20,13 +20,10 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetWithReplies.id, "assetID");
   },

src/core/client/stream/test/renderStream.spec.tsx

@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assets } from "./fixtures";
 
 const resolvers = {
@@ -20,13 +20,10 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assets[0].id, "assetID");
   },

src/core/client/stream/test/showAllReplies.spec.tsx

@@ -5,9 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
-import { createRelayEnvironment } from "talk-framework/testHelpers";
 import AppContainer from "talk-stream/containers/AppContainer";
 
+import createEnvironment from "./createEnvironment";
 import { assets, comments } from "./fixtures";
 
 const connectionStub = sinon.stub().throws();
@@ -77,13 +77,10 @@ const resolvers = {
   },
 };
 
-const environment = createRelayEnvironment({
-  network: {
-    // Set this to true, to see graphql responses.
-    logNetwork: false,
-    resolvers,
-    projectName: "tenant",
-  },
+const environment = createEnvironment({
+  // Set this to true, to see graphql responses.
+  logNetwork: false,
+  resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
   },

src/core/client/tsconfig.json

@@ -9,6 +9,7 @@
     "baseUrl": "./",
     "paths": {
       "talk-admin/*": ["./admin/*"],
+      "talk-auth/*": ["./auth/*"],
       "talk-stream/*": ["./stream/*"],
       "talk-framework/*": ["./framework/*"],
       "talk-ui/*": ["./ui/*"],

src/core/client/ui/components/Button/Button.css

@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 0px solid transparent;
 
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
@@ -154,6 +154,7 @@
 }
 
 .variantOutlined {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
     border: 1px solid currentColor;
@@ -220,6 +221,7 @@
 }
 
 .variantGhost {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
   }

src/core/client/ui/components/Button/Button.mdx

@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button>Push Me</Button>
     <Button size="small">Push Me</Button>
     <Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
 
 ## Filled Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled" size="small">Push Me</Button>
     <Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
 
 ## Outlined Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="outlined">Push Me</Button>
     <Button variant="outlined" size="small">Push Me</Button>
     <Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
 
 ## Ghost Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>

src/core/client/ui/components/Flex/Flex.css

@@ -1,8 +1,5 @@
 .root {
   display: flex;
-  & > * {
-    flex-shrink: 0;
-  }
 }
 
 .halfItemGutter {
@@ -63,7 +60,7 @@
 
 .wrap,
 .wrapReverse {
-  &.itemGutter {
+  &:not(.directionColumn).itemGutter {
     &:not(:empty) {
       margin-top: calc(-1 * var(--spacing-unit)) !important;
     }
@@ -80,7 +77,7 @@
     }
   }
 
-  &.halfItemGutter {
+  &:not(.directionColumn).halfItemGutter {
     &:not(:empty) {
       margin-top: calc(-0.5 * var(--spacing-unit)) !important;
     }

src/core/client/ui/components/Flex/Flex.tsx

@@ -77,7 +77,16 @@ const Flex: StatelessComponent<InnerProps> = props => {
 
   const classNames: string = cn(classes.root, className, classObject);
 
-  return <div ref={forwardRef} className={classNames} {...rest} />;
+  // The first div is required to support nested `Flex` components with itemGutters.
+  return (
+    <div>
+      <div ref={forwardRef} className={classNames} {...rest} />
+    </div>
+  );
+};
+
+Flex.defaultProps = {
+  wrap: true,
 };
 
 const enhanced = withForwardRef(withStyles(styles)(Flex));

src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap

@@ -1,51 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
-  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div
-  className="Flex-root Flex-halfItemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
-<div
-  className="Flex-root Flex-itemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
-<div
-  className="Flex-root Flex-wrap Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div
-  className="Flex-root Flex-wrapReverse Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;

src/core/client/ui/components/Popup/Popup.ts

@@ -36,6 +36,9 @@ export default class Popup extends Component<PopupProps> {
   }
 
   private setCallbacks() {
+    if (!this.ref) {
+      return;
+    }
     this.ref!.onload = e => {
       if (this.detectCloseInterval) {
         clearInterval(this.detectCloseInterval);

src/core/client/ui/components/Typography/Typography.css

@@ -23,6 +23,10 @@
   composes: bodyCopy from "talk-ui/shared/typography.css";
 }
 
+.bodyCopyBold {
+  composes: bodyCopyBold from "talk-ui/shared/typography.css";
+}
+
 .button {
   composes: button from "talk-ui/shared/typography.css";
 }

src/core/client/ui/components/Typography/Typography.mdx

@@ -17,6 +17,7 @@ import Flex from '../Flex'
     <Typography variant="heading3">Heading3</Typography>
     <Typography variant="heading4">Heading4</Typography>
     <Typography variant="bodyCopy">BodyCopy</Typography>
+    <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
   </Flex>
 </Playground>

src/core/client/ui/components/Typography/Typography.tsx

@@ -13,6 +13,7 @@ type Variant =
   | "heading3"
   | "heading4"
   | "bodyCopy"
+  | "bodyCopyBold"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -130,6 +131,7 @@ Typography.defaultProps = {
     heading3: "h1",
     heading4: "h1",
     bodyCopy: "p",
+    bodyCopyBold: "p",
     timestamp: "span",
   },
   noWrap: false,

src/core/client/ui/shared/typography.css

@@ -100,6 +100,11 @@
   color: var(--palette-text-primary);
 }
 
+.bodyCopyBold {
+  composes: bodyCopy;
+  font-weight: var(--font-weight-medium);
+}
+
 .button {
   color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";

src/core/server/graph/tenant/schema/schema.graphql

@@ -774,7 +774,8 @@ type Mutation {
   """
   updateSettings will update the Settings for the given Tenant.
   """
-  updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload @auth(roles: [ADMIN])
+  updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload
+    @auth(roles: [ADMIN])
 }
 
 ################################################################################

src/locales/en-US/stream.ftl

@@ -9,3 +9,7 @@ comments-replyList-showAll = Show all
 comments-permalink-share = Share
 comments-permalink-copy = Copy
 comments-permalink-copied = Copied
+
+comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
+comments-userBoxUnauthenticated-signIn = Sign in
+comments-userBoxUnauthenticated-register = Register