Show comments and login button for guests

package.json

@@ -10,7 +10,7 @@
     "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js",
     "test": "npm run lint && npm run testonly",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
-    "storybook": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' STORYBOOK_CLOUD_APPID='test-app' STORYBOOK_CLOUD_DATABASE='test-db' start-storybook -p 3006",
+    "storybook": "start-storybook -p 3006",
     "storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 9010",
     "storybook-remote": "start-storybook -p 3006",
     "publish-storybook": "bash .scripts/publish_storybook.sh"

src/manager/components/CommentForm/index.js

@@ -41,6 +41,11 @@ export default class CommentForm extends Component {
     this.setState({ text: '' });
   }
 
+  openLogin() {
+    const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`;
+    location.href = signInUrl;
+  }
+
   handleKeyDown(e) {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -49,6 +54,22 @@ export default class CommentForm extends Component {
   }
 
   render() {
+    if (!this.props.user) {
+      return (
+        <div style={style.wrapper}>
+          <Textarea
+            style={style.input}
+            disabled={true}
+          />
+          <button
+            style={style.submitButton}
+            onClick={() => this.openLogin()}
+          >Sign in with Storybook Hub
+          </button>
+        </div>
+      );
+    }
+
     const { text } = this.state;
     return (
       <div style={style.wrapper}>

src/manager/components/CommentForm/style.js

@@ -16,11 +16,6 @@ export default {
     alignItems: 'center',
     borderTop: '1px solid rgb(234, 234, 234)',
   },
-  loginButton: {
-    ...button,
-    fontWeight: 'bold',
-    borderRight: '1px solid rgb(234, 234, 234)',
-  },
   submitButton: {
     ...button,
     cursor: 'pointer',

src/manager/components/CommentList/index.js

@@ -30,7 +30,7 @@ export default class CommentList extends Component {
           <CommentItem
             key={`comment_${idx}`}
             comment={comment}
-            ownComment={comment.userId === this.props.user.id}
+            ownComment={comment.userId === this.props.user && this.props.user.id}
             deleteComment={() => this.props.deleteComment(comment.id)}
           />
         ))}

src/manager/components/CommentsPanel/index.js

@@ -15,17 +15,6 @@ export default class CommentsPanel extends Component {
       );
     }
 
-    if (!this.props.user) {
-      const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`;
-      return (
-        <div style={style.wrapper}>
-          <div style={style.message}>
-            <a style={style.button} href={signInUrl}>SignIn with Storybook Hub</a>
-          </div>
-        </div>
-      );
-    }
-
     if (this.props.appNotAvailable) {
       const appsUrl = 'https://hub.getstorybook.io/apps';
       return (

src/manager/containers/CommentsPanel/dataStore.js

@@ -59,7 +59,7 @@ export default class DataStore {
     this.currentStory = { sbKind, sbStory };
 
     // We don't need to do anything if the there's no loggedIn user.
-    if (!this.user) return;
+    // if (!this.user) return;
 
     this._reloadCurrentComments();
     const item = this._getFromCache(this.currentStory);
@@ -88,13 +88,6 @@ export default class DataStore {
 
   setCurrentUser(user) {
     this.user = user;
-    // We don't load comments in the `setCurrentStory` if there's no loggedIn
-    // user.
-    // That's why we need to do this here.
-    if (user && this.currentStory) {
-      const { sbKind, sbStory } = this.currentStory;
-      this.setCurrentStory(sbKind, sbStory);
-    }
   }
 
   _loadUsers() {
@@ -123,7 +116,7 @@ export default class DataStore {
         // add to cache
         this._addToCache(currentStory, comments);
 
-     /* eslint no-param-reassign:0 */
+        /* eslint no-param-reassign:0 */
         // set comments only if we are on the relavant story
         if (deepEquals(currentStory, this.currentStory)) {
           this._fireComments(comments);

src/manager/containers/CommentsPanel/index.js

@@ -63,13 +63,12 @@ export default class Container extends Component {
     db.persister._getUser()
       .then(u => Promise.resolve(u), err => Promise.resolve(null))
       .then((user) => {
-        if (!user) {
+        if (user) {
+          this.store.setCurrentUser(user);
+          this.setState({ user });
+        } else {
           this.setState({ user: null });
-          return Promise.resolve(null);
         }
-
-        this.store.setCurrentUser(user);
-        this.setState({ user });
         return this._getAppInfo(db.persister);
       })
       .then((appInfo) => {