Merge branch 'next' of github.com:coralproject/talk into auth-views

* 'next' of github.com:coralproject/talk:
  Readd comments not found
  Make readonly and add translations
  Add localization
  Change text
  Add SetViewMutation
  Get view from query + tests
  Styling, refactor + tests
  Add UserBox
  Add auth target

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/Auth.css

@@ -1,3 +0,0 @@
-.root {
-  padding: var(--spacing-unit) 0;
-}

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

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import * as styles from "./Auth.css";
-
-import { Button, Flex, Popup, Typography } from "talk-ui/components";
-
-interface AuthProps {
-  open: boolean;
-  focus: boolean;
-  openPopup: () => void;
-  closePopup: () => void;
-  setFocus: (focus: boolean) => void;
-}
-
-const Auth: StatelessComponent<AuthProps> = props => {
-  return (
-    <div>
-      <Popup
-        href={"/static/js/src-core-client-ui-components-popup-popup.js"}
-        title="Coral Project"
-        features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
-        open={props.open}
-        focus={props.focus}
-        onFocus={() => props.setFocus(true)}
-        onBlur={() => props.setFocus(false)}
-        onClose={props.closePopup}
-      />
-      <Flex itemGutter className={styles.root}>
-        <Typography>Join the conversation </Typography>
-        <span>|</span>
-        <Button
-          size="small"
-          color="primary"
-          variant="underlined"
-          onClick={props.openPopup}
-          disabled={props.open}
-        >
-          Sign In
-        </Button>
-        <Button
-          size="small"
-          color="primary"
-          variant="outlined"
-          onClick={props.openPopup}
-          disabled={props.open}
-        >
-          Register
-        </Button>
-      </Flex>
-    </div>
-  );
-};
-
-export default Auth;

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/PermalinkButton/PermalinkButton.tsx

@@ -60,7 +60,7 @@ class Permalink extends React.Component<PermalinkProps> {
             <MatchMedia minWidth="xs">
               <ButtonIcon>share</ButtonIcon>
             </MatchMedia>
-            <Localized id="comments-permalink-share">
+            <Localized id="comments-permalinkButton-share">
               <span>Share</span>
             </Localized>
           </Button>

src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx

@@ -38,15 +38,19 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied } = this.state;
     return (
       <Flex itemGutter="half" className={styles.root}>
-        <TextField defaultValue={permalinkURL} className={styles.textField} />
+        <TextField
+          defaultValue={permalinkURL}
+          className={styles.textField}
+          readOnly
+        />
         <CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
           <Button color="primary" variant="filled" size="small">
             {copied ? (
-              <Localized id="comments-permalink-copied">
+              <Localized id="comments-permalinkPopover-copied">
                 <span>Copied!</span>
               </Localized>
             ) : (
-              <Localized id="comments-permalink-copy">
+              <Localized id="comments-permalinkPopover-copy">
                 <span>Copy</span>
               </Localized>
             )}

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

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
@@ -19,21 +20,27 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   return (
     <div className={styles.root}>
       {showAllCommentsHref && (
-        <Button
-          id="talk-comments-permalinkView-showAllComments"
-          variant="outlined"
-          color="primary"
-          onClick={onShowAllComments}
-          className={styles.button}
-          href={showAllCommentsHref}
-          target="_parent"
-          fullWidth
-          anchor
-        >
-          Show all Comments
-        </Button>
+        <Localized id="comments-permalinkView-showAllComments">
+          <Button
+            id="talk-comments-permalinkView-showAllComments"
+            variant="outlined"
+            color="primary"
+            onClick={onShowAllComments}
+            className={styles.button}
+            href={showAllCommentsHref}
+            target="_parent"
+            fullWidth
+            anchor
+          >
+            Show all Comments
+          </Button>
+        </Localized>
+      )}
+      {!comment && (
+        <Localized id="comments-permalinkView-commentNotFound">
+          <Typography>Comment not found</Typography>
+        </Localized>
       )}
-      {!comment && <Typography>Comment not found</Typography>}
       {comment && (
         <Flex direction="column">
           <CommentContainer data={comment} />

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

@@ -4,10 +4,10 @@ import { StatelessComponent } from "react";
 
 import { Button, Flex } from "talk-ui/components";
 
-import AuthContainer from "../containers/AuthContainer";
 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 {
@@ -21,8 +21,8 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div className={styles.root}>
-      <AuthContainer />
+    <Flex className={styles.root} direction="column" itemGutter>
+      <UserBoxContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
@@ -52,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,54 @@
+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"
+          variant="underlined"
+          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)>
+`;