Add follow+notify to actions menu and refactor how those modals are displayed. Closes #2247

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.stories.tsx

@@ -41,3 +41,22 @@ export const Example = Template.bind({});
 Example.args = {
   actions,
 };
+
+export const ShowFollowExample = Template.bind({});
+ShowFollowExample.args = {
+  actions,
+  showFollowItem: true,
+};
+
+export const ShowNotifyExample = Template.bind({});
+ShowNotifyExample.args = {
+  actions,
+  showNotifyItem: true,
+};
+
+export const ShowNotifyAndFollowExample = Template.bind({});
+ShowNotifyAndFollowExample.args = {
+  actions,
+  showNotifyItem: true,
+  showFollowItem: true,
+};

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -1,19 +1,38 @@
 import { FC } from 'react';
 import { Button, Dropdown, Menu } from 'antd';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { EllipsisOutlined, HeartOutlined, BellOutlined } from '@ant-design/icons';
 import styles from './ActionButtonMenu.module.scss';
 import { ExternalAction } from '../../../interfaces/external-action';
 
+const NOTIFY_KEY = 'notify';
+const FOLLOW_KEY = 'follow';
+
 export type ActionButtonMenuProps = {
   actions: ExternalAction[];
+  showFollowItem?: boolean;
+  showNotifyItem?: boolean;
   externalActionSelected: (action: ExternalAction) => void;
+  notifyItemSelected: () => void;
+  followItemSelected: () => void;
 };
 
 export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
   actions,
   externalActionSelected,
+  notifyItemSelected,
+  followItemSelected,
+  showFollowItem,
+  showNotifyItem,
 }) => {
   const onMenuClick = a => {
+    if (a.key === NOTIFY_KEY) {
+      notifyItemSelected();
+      return;
+    }
+    if (a.key === FOLLOW_KEY) {
+      followItemSelected();
+      return;
+    }
     const action = actions.find(x => x.url === a.key);
     externalActionSelected(action);
   };
@@ -28,6 +47,29 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
     ),
   }));
 
+  if (showFollowItem) {
+    items.unshift({
+      key: FOLLOW_KEY,
+      label: (
+        <span className={styles.item}>
+          <HeartOutlined className={styles.icon} /> Follow this stream
+        </span>
+      ),
+    });
+  }
+
+  if (showNotifyItem) {
+    items.unshift({
+      key: NOTIFY_KEY,
+      label: (
+        <span className={styles.item}>
+          <BellOutlined className={styles.icon} />
+          Notify when live
+        </span>
+      ),
+    });
+  }
+
   const menu = <Menu items={items} onClick={onMenuClick} />;
 
   return (