Chat: Remove Report Button from user's own profile sidebar (#4604) [deploy]

* Remove Report Button from user's own profile sidebar * Update UserDetails test file to include window * Uncomment code and Add tests * Resolve issue with display property change persisting * Update snapshot * Uncomment line of code
2019-12-02 16:35:47 -05:00 · 2019-12-02 16:35:47 -05:00 · 54d8762af2
commit 54d8762af2
parent 247833a952
7 changed files with 98 additions and 30 deletions
--- a/app/javascript/chat/tests/snapshots/userDetails.test.jsx.snap
+++ b/app/javascript/chat/tests/snapshots/userDetails.test.jsx.snap
@ -125,16 +125,14 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
  </div>
  <div
    class="userdetails__blockreport"
-  >
-    <button
-      onClick={[Function]}
-    >
-      Report Abuse
-    </button>
-  </div>
+  />
  <div
    id="userdetails__reportabuse"
-    style="display:none"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
  >
    <div
      class="userdetails__reportabuse"
@ -175,7 +173,11 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
  </div>
  <div
    id="userdetails__blockmsg"
-    style="display:none"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
  >
    <div
      class="userdetails__blockmsg"
@ -343,6 +345,11 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
  <div
    class="userdetails__blockreport"
  >
+    <button
+      onClick={[Function]}
+    >
+      Block User
+    </button>
    <button
      onClick={[Function]}
    >
@ -351,7 +358,11 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
  </div>
  <div
    id="userdetails__reportabuse"
-    style="display:none"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
  >
    <div
      class="userdetails__reportabuse"
@ -392,7 +403,11 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
  </div>
  <div
    id="userdetails__blockmsg"
-    style="display:none"
+    style={
+      Object {
+        "display": "none",
+      }
+    }
  >
    <div
      class="userdetails__blockmsg"
--- a/app/javascript/chat/tests/userDetails.test.jsx
+++ b/app/javascript/chat/tests/userDetails.test.jsx
@ -1,9 +1,16 @@
 import { h } from 'preact';
 import render from 'preact-render-to-json';
+import { JSDOM } from 'jsdom';
 import { shallow } from 'preact-render-spy';
 import UserDetails from '../userDetails';

+const doc = new JSDOM('<!doctype html><html><body></body></html>');
+global.document = doc;
+global.window = doc.defaultView;
+global.window.currentUser = { id: '1' };
+
 const user1 = {
+  id: '1',
  username: 'bojackhorseman',
  name: 'Bojack Horseman',
  summary: 'I am the Bojack Horseman from Horsing Around and Secreteriat',
@ -16,6 +23,7 @@ const user1 = {
 };

 const user2 = {
+  id: '2',
  username: 'mrpeanutbutter',
  name: 'Mr. Peanutbutter',
  summary: 'Woof Woof *smile*',
@ -27,7 +35,11 @@ const user2 = {
  profile_image: 'https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif',
 };

-const getUserDetails = user => <UserDetails user={user} />;
+const channel = { channel_type: 'direct', id: 2 };
+
+const getUserDetails = user => (
+  <UserDetails user={user} activeChannel={channel} activeChannelId={2} />
+);

 describe('<UserDetails />', () => {
  describe('for user1', () => {
@ -60,6 +72,13 @@ describe('<UserDetails />', () => {
          .attr('href'),
      ).toEqual(`/${user1.username}`); // user.username

+      expect(
+        context
+          .find('.userdetails__blockreport')
+          .at(0)
+          .children()[0],
+      ).toEqual('');
+
      // social links
      expect(
        context
@ -132,6 +151,22 @@ describe('<UserDetails />', () => {
          .attr('href'),
      ).toEqual(`/${user2.username}`); // user.username

+      expect(
+        parentDiv
+          .find('.userdetails__blockreport')
+          .at(0)
+          .childAt(0)
+          .text(),
+      ).toEqual('Block User');
+
+      expect(
+        parentDiv
+          .find('.userdetails__blockreport')
+          .at(0)
+          .childAt(1)
+          .text(),
+      ).toEqual('Report Abuse');
+
      // social links
      expect(
        context
--- a/app/javascript/chat/userDetails.jsx
+++ b/app/javascript/chat/userDetails.jsx
@ -62,9 +62,18 @@ export default class UserDetails extends Component {
    const userMeta = ['twitter_username', 'github_username', 'website_url'];
    userMeta.forEach(metaProp => {
      if (user[metaProp]) {
-        let { className, hostUrl, srcImage, imageAltText } = userDetailsConfig[metaProp];
+        const {
+          className,
+          hostUrl,
+          srcImage,
+          imageAltText,
+        } = userDetailsConfig[metaProp];
        socialIcons.push(
-          <a href={`${hostUrl}${user[metaProp]}`} target="_blank" rel="noopener noreferrer">
+          <a
+            href={`${hostUrl}${user[metaProp]}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
            <img
              className={className}
              src={srcImage}
@ -92,6 +101,15 @@ export default class UserDetails extends Component {
        btnName: 'Block User',
      });
    }
+
+    let reportButton = '';
+    if (window.currentUser.id !== user.id) {
+      reportButton = setUpButton({
+        modalId: 'userdetails__reportabuse',
+        otherModalId: 'userdetails__blockmsg',
+        btnName: 'Report Abuse',
+      });
+    }
    return (
      <div>
        <img
@ -121,13 +139,9 @@ export default class UserDetails extends Component {
        </div>
        <div className="userdetails__blockreport">
          {blockButton}
-          {setUpButton({
-            modalId: 'userdetails__reportabuse',
-            otherModalId: 'userdetails__blockmsg',
-            btnName: 'Report Abuse',
-          })}
+          {reportButton}
        </div>
-        <div id="userdetails__reportabuse" style="display:none">
+        <div id="userdetails__reportabuse" style={{ display: 'none' }}>
          <div className="userdetails__reportabuse">
            <p>Reporting abuse will: </p>
            <ul>
@ -176,7 +190,7 @@ export default class UserDetails extends Component {
            </a>
          </div>
        </div>
-        <div id="userdetails__blockmsg" style="display:none">
+        <div id="userdetails__blockmsg" style={{ display: 'none' }}>
          <div className="userdetails__blockmsg">
            <p>Blocking on connect will: </p>
            <ul>
--- a/app/javascript/listings/listings.jsx
+++ b/app/javascript/listings/listings.jsx
@ -435,21 +435,21 @@ export class Listings extends Component {
                <em>
                  Message must be relevant and on-topic with the listing. All
                  {' '}
-                  private interactions
+                  private interactions 
                  {' '}
                  <b>must</b>
                  {' '}
-                  abide by the 
+abide by the
                  {' '}
                  <a href="/code-of-conduct">code of conduct</a>
                </em>
              ) : (
                <em>
-                  All private interactions
+                  All private interactions 
                  {' '}
                  <b>must</b>
                  {' '}
-                  abide by the 
+abide by the
                  {' '}
                  <a href="/code-of-conduct">code of conduct</a>
                </em>
--- a/app/javascript/onboarding/components/IntroSlide.jsx
+++ b/app/javascript/onboarding/components/IntroSlide.jsx
@ -46,11 +46,11 @@ class IntroSlide extends Component {
          </span>
        </p>
        <p>
-          A few
+          A few 
          {' '}
          <strong>quick questions</strong>
          {' '}
-          for you before you get
+for you before you get
          started...
        </p>
      </div>
--- a/app/javascript/profileDropdown/blockButton.js
+++ b/app/javascript/profileDropdown/blockButton.js
@ -4,8 +4,9 @@ export default function initBlock() {
  const blockButton = document.getElementById(
    'user-profile-dropdownmenu-block-button',
  );
-  if (!blockButton) { // button not always present when this is called 
-    return
+  if (!blockButton) {
+    // button not always present when this is called
+    return;
  }
  const { profileUserId } = blockButton.dataset;

--- a/app/javascript/shared/components/tags.jsx
+++ b/app/javascript/shared/components/tags.jsx
@ -203,7 +203,10 @@ class Tags extends Component {
      ) {
        this.clearSelectedSearchResult();
      }
-    } else if (!LETTERS_NUMBERS.test(e.key) && !NAVIGATION_KEYS.includes(e.key)) {
+    } else if (
+      !LETTERS_NUMBERS.test(e.key) &&
+      !NAVIGATION_KEYS.includes(e.key)
+    ) {
      e.preventDefault();
    }
  };