[deploy] Removing hard-coded email (#10125)

* Removing hardcoded email

* Passing email address from siteConfig to react

* Passing modFaqEmail props in tests

* Changing webpacker compiler order

.travis.yml

@@ -58,8 +58,8 @@ script:
   - bin/ci-bundle
   - yarn install --frozen-lockfile
   - bundle exec rails db:create
-  - bundle exec rails webpacker:compile
   - bundle exec rails db:schema:load
+  - bundle exec rails webpacker:compile
   - './cc-test-reporter before-build'
   - if [ "$KNAPSACK_PRO_CI_NODE_INDEX" == "0" ]; then yarn test --colors; fi
   - if [ "$KNAPSACK_PRO_CI_NODE_INDEX" == "0" ]; then ./cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.lcov.json; fi

app/javascript/chat/ChatChannelSettings/ChatChannelSettings.jsx

@@ -18,6 +18,7 @@ import ChatChannelSettingsSection from './ChatChannelSettingsSection';
 
 export default class ChatChannelSettings extends Component {
   static propTypes = {
+    modFaqEmail: PropTypes.string.isRequired,
     handleLeavingChannel: PropTypes.func.isRequired,
     activeMembershipId: PropTypes.number.isRequired,
   };
@@ -381,6 +382,8 @@ export default class ChatChannelSettings extends Component {
       invitationLink,
     } = this.state;
 
+    const { modFaqEmail } = this.props;
+
     if (!chatChannel) {
       return null;
     }
@@ -390,6 +393,7 @@ export default class ChatChannelSettings extends Component {
         <div className="p-4">
           {displaySettings ? (
             <ChatChannelSettingsSection
+              modFaqEmail={modFaqEmail}
               channelDiscoverable={channelDiscoverable}
               updateCurrentMembershipNotificationSettings={
                 this.updateCurrentMembershipNotificationSettings

app/javascript/chat/ChatChannelSettings/ChatChannelSettingsSection.jsx

@@ -27,6 +27,7 @@ const ChatChannelSettingsSection = ({
   activeMemberships,
   pendingMemberships,
   requestedMemberships,
+  modFaqEmail,
   invitationUsernames,
   showGlobalBadgeNotification,
 }) => (
@@ -74,7 +75,7 @@ const ChatChannelSettingsSection = ({
     />
     <ModFaqSection
       currentMembershipRole={currentMembership.role}
-      email="yo@dev.to"
+      email={modFaqEmail}
       className="channel-mod-faq"
     />
   </div>
@@ -86,6 +87,7 @@ ChatChannelSettingsSection.propTypes = {
   activeMemberships: PropTypes.isRequired,
   pendingMemberships: PropTypes.isRequired,
   requestedMemberships: PropTypes.isRequired,
+  modFaqEmail: PropTypes.string.isRequired,
   invitationUsernames: PropTypes.string.isRequired,
   channelDescription: PropTypes.string.isRequired,
   channelDiscoverable: PropTypes.bool.isRequired,

app/javascript/chat/__tests__/chat.test.jsx

@@ -168,7 +168,9 @@ describe('<Chat />', () => {
 
   it('should have no a11y violations', async () => {
     fetch.mockResponse(getMockResponse());
-    const { container } = render(<Chat {...getRootData()} />);
+    const { container } = render(
+      <Chat {...getRootData()} modFaqEmail="jane@doe.com" />,
+    );
     const results = await axe(container);
 
     expect(results).toHaveNoViolations();
@@ -177,7 +179,7 @@ describe('<Chat />', () => {
   it('should render expanded', () => {
     fetch.mockResponse(getMockResponse());
     const { getByTestId, getByText, getByLabelText, getByRole } = render(
-      <Chat {...getRootData()} />,
+      <Chat {...getRootData()} modFaqEmail="jane@doe.com" />,
     );
     const chat = getByTestId('chat');
 
@@ -209,7 +211,9 @@ describe('<Chat />', () => {
 
   it('should collapse and expand chat channels properly', async () => {
     fetch.mockResponse(getMockResponse());
-    const { queryByText } = render(<Chat {...getRootData()} />);
+    const { queryByText } = render(
+      <Chat {...getRootData()} modFaqEmail="jane@doe.com" />,
+    );
 
     // // chat channels
     expect(

app/javascript/chat/__tests__/chatChannelSettings.test.jsx

@@ -9,7 +9,10 @@ import ChatChannelSettings from '../ChatChannelSettings/ChatChannelSettings';
 describe('<ChatChannelSettings />', () => {
   it('should have no a11y violations', async () => {
     const { container } = render(
-      <ChatChannelSettings activeMembershipId={12} />,
+      <ChatChannelSettings
+        activeMembershipId={12}
+        modFaqEmail="jane@doe.com"
+      />,
     );
     const results = await axe(container);
 
@@ -18,7 +21,10 @@ describe('<ChatChannelSettings />', () => {
 
   it('should render if there are no channels', () => {
     const { container } = render(
-      <ChatChannelSettings activeMembershipId={12} />,
+      <ChatChannelSettings
+        activeMembershipId={12}
+        modFaqEmail="jane@doe.com"
+      />,
     );
 
     expect(container.firstElementChild).toBeNull();

app/javascript/chat/__tests__/content.test.jsx

@@ -37,7 +37,10 @@ describe('<Content />', () => {
     it('should have no a11y violations', async () => {
       const channelRequestResource = getChannelRequestData();
       const { container } = render(
-        <Content resource={channelRequestResource} />,
+        <Content
+          resource={channelRequestResource}
+          modFaqEmail="jane@doe.com"
+        />,
       );
       const results = await axe(container);
 
@@ -47,7 +50,10 @@ describe('<Content />', () => {
     it('should render', () => {
       const channelRequestResource = getChannelRequestData();
       const { queryByText, queryByTitle } = render(
-        <Content resource={channelRequestResource} />,
+        <Content
+          resource={channelRequestResource}
+          modFaqEmail="jane@doe.com"
+        />,
       );
 
       // Ensure the two buttons render

app/javascript/chat/chat.jsx

@@ -49,6 +49,7 @@ const WIDE_WIDTH_LIMIT = 1600;
 
 export default class Chat extends Component {
   static propTypes = {
+    modFaqEmail: PropTypes.string.isRequired,
     pusherKey: PropTypes.number.isRequired,
     chatChannels: PropTypes.string.isRequired,
     chatOptions: PropTypes.string.isRequired,
@@ -1467,6 +1468,7 @@ export default class Chat extends Component {
   }
   renderActiveChatChannel = (channelHeader) => {
     const { state, props } = this;
+    const { modFaqEmail } = props;
 
     return (
       <div className="activechatchannel">
@@ -1531,6 +1533,7 @@ export default class Chat extends Component {
           </div>
         </div>
         <Content
+          modFaqEmail={modFaqEmail}
           onTriggerContent={this.triggerActiveContent}
           resource={state.activeContent[state.activeChannelId]}
           activeChannel={state.activeChannel}

app/javascript/chat/content.jsx

@@ -30,13 +30,14 @@ export default class Content extends Component {
       activeMembershipId: PropTypes.func,
       sendCanvasImage: PropTypes.func,
     }).isRequired,
+    modFaqEmail: PropTypes.string.isRequired,
     fullscreen: PropTypes.bool.isRequired,
     onTriggerContent: PropTypes.func.isRequired,
     updateRequestCount: PropTypes.func.isRequired,
   };
 
   render() {
-    const { onTriggerContent, fullscreen, resource } = this.props;
+    const { onTriggerContent, fullscreen, resource, modFaqEmail } = this.props;
     if (!resource) {
       return '';
     }
@@ -80,13 +81,13 @@ export default class Content extends Component {
                 'M20 3h2v6h-2V5h-4V3h4zM4 3h4v2H4v4H2V3h2zm16 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z',
               )}
         </button>
-        <Display resource={resource} />
+        <Display resource={resource} modFaqEmail={modFaqEmail} />
       </div>
     );
   }
 }
 
-const Display = ({ resource }) => {
+const Display = ({ modFaqEmail, resource }) => {
   switch (resource.type_of) {
     case 'loading-user':
       return <div className="loading-user" title="Loading user" />;
@@ -111,6 +112,7 @@ const Display = ({ resource }) => {
     case 'chat-channel-setting':
       return (
         <ChatChannelSettings
+          modFaqEmail={modFaqEmail}
           resource={resource.data}
           activeMembershipId={resource.activeMembershipId}
           handleLeavingChannel={resource.handleLeavingChannel}

app/javascript/packs/Chat.jsx.erb

@@ -1,3 +1,4 @@
+
 import { h, render } from 'preact';
 import Chat from '../chat/chat';
 import { Snackbar } from '../Snackbar/Snackbar';
@@ -7,7 +8,7 @@ function loadElement() {
 
   if (root) {
     render(<Snackbar lifespan="3" />, document.getElementById('snack-zone'));
-    render(<Chat {...root.dataset} />, root);
+    render(<Chat {...root.dataset} modFaqEmail="<%= SiteConfig.email_addresses[:default] %>" />, root);
 
     const placeholder = document.getElementById('chat_placeholder');