[#144] Report channel flag button

src/notifications/pages/NotificationsPage/NotificationsPage.js

@@ -3,7 +3,17 @@ import PropTypes from 'prop-types';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {useParams, useLocation} from 'react-router-dom';
-import {Divider, Header, Icon, Menu, Segment, Label, Popup, Container} from 'semantic-ui-react';
+import {
+  Divider,
+  Header,
+  Icon,
+  Menu,
+  Segment,
+  Label,
+  Popup,
+  Container,
+  Dropdown,
+} from 'semantic-ui-react';
 import {Helmet} from 'react-helmet';
 
 import * as preferencesActions from 'preferences/actions/preferences';
@@ -31,6 +41,12 @@ const NotificationsPage = ({
   const location = useLocation();
   const [activeItem, setActiveItem] = useState('Notifications');
 
+  const handleReport = reportData => {
+    window.open(
+      `https://cern.service-now.com/service-portal?id=sc_cat_item&name=request&fe=notifications&short_description=${reportData.text}%20report%20for%20channel%20"${channel.name}"%20(Channel%20ID:%20${channel.id})`
+    );
+  };
+
   if (location.section) {
     setActiveItem(location.section);
     location.section = null;
@@ -103,6 +119,51 @@ const NotificationsPage = ({
     }
   };
 
+  const reportChannel = () => {
+    return (
+      <>
+        <Popup
+          position="left center"
+          content="Report this channel"
+          trigger={
+            <Dropdown direction="left" icon="flag outline" size="middle">
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  value="categorization"
+                  text="Inappropriate categorization"
+                  onClick={(evt, data) => {
+                    handleReport(data);
+                  }}
+                />
+                <Dropdown.Item
+                  value="name"
+                  text="Inappropriate name"
+                  onClick={(evt, data) => {
+                    handleReport(data);
+                  }}
+                />
+                <Dropdown.Item
+                  value="inactive"
+                  text="Inactive channel"
+                  onClick={(evt, data) => {
+                    handleReport(data);
+                  }}
+                />
+                <Dropdown.Item
+                  value="other"
+                  text="Other reason"
+                  onClick={(evt, data) => {
+                    handleReport(data);
+                  }}
+                />
+              </Dropdown.Menu>
+            </Dropdown>
+          }
+        />
+      </>
+    );
+  };
+
   return error ? (
     <ErrorComponent error={error} />
   ) : (
@@ -118,6 +179,7 @@ const NotificationsPage = ({
       )}
 
       <Header as="h2" style={{marginTop: '0'}}>
+        <div style={{float: 'right'}}>{reportChannel()}</div>
         <Icon name={headerIcon()} />
         {channelHeader()}
       </Header>