Merge branch 'master' into dependabot/npm_and_yarn/word-wrap-1.2.4

package.json

@@ -68,7 +68,7 @@
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
     "swr": "^1.0.1",
-    "tab-ads": "^1.1.10",
+    "tab-ads": "^1.1.14",
     "tab-cmp": "^0.15.0-alpha.0",
     "unified": "^9.0.0",
     "uuid": "^8.3.2"

src/__tests__/pages/account.test.js

@@ -27,6 +27,7 @@ import localStorageFeaturesManager from 'src/utils/localStorageFeaturesManager'
 import Switch from '@material-ui/core/Switch'
 import localStorageMgr from 'src/utils/localstorage-mgr'
 import { STORAGE_NEW_USER_IS_TAB_V4_BETA } from 'src/utils/constants'
+import UpdateWidgetEnabledMutation from 'src/utils/mutations/UpdateWidgetEnabledMutation'
 
 jest.mock('next-offline/runtime')
 jest.mock('tab-cmp')
@@ -49,6 +50,7 @@ jest.mock('src/utils/localStorageFeaturesManager', () => ({
   getFeatureValue: jest.fn(),
 }))
 jest.mock('src/utils/localstorage-mgr', () => ({ removeItem: jest.fn() }))
+jest.mock('src/utils/mutations/UpdateWidgetEnabledMutation')
 
 const getMockDataResponse = () => ({
   user: {
@@ -62,6 +64,17 @@ const getMockDataResponse = () => ({
       },
       name: 'Cats',
     },
+    widgets: {
+      edges: [
+        {
+          node: {
+            id: 'fake-widget-id-bookmarks',
+            type: 'bookmarks',
+            enabled: false,
+          },
+        },
+      ],
+    },
   },
   app: {
     causes: {
@@ -321,6 +334,54 @@ describe('account.js', () => {
     const content = wrapper.find(Switch)
     expect(content.length).toEqual(1)
   })
+
+  it('updates Bookmarks widget data and calls mutation if applicable user', async () => {
+    expect.assertions(3)
+    const AccountPage = require('src/pages/account').default
+    const mockProps = getMockProps()
+    const defaultMockData = getMockDataResponse()
+    useData.mockReturnValue({ data: defaultMockData })
+    localStorageFeaturesManager.getFeatureValue.mockReturnValue('true')
+    const wrapper = mount(<AccountPage {...mockProps} />)
+
+    expect(wrapper.find(Switch).first().prop('checked')).toEqual(false)
+
+    await act(async () => {
+      wrapper.find(Switch).first().prop('onChange')({
+        target: { checked: true },
+      })
+      await flushAllPromises()
+      wrapper.update()
+    })
+
+    expect(UpdateWidgetEnabledMutation).toHaveBeenCalledWith(
+      defaultMockData.user,
+      {
+        id: 'fake-widget-id-bookmarks',
+        type: 'bookmarks',
+        enabled: false,
+      },
+      true
+    )
+
+    await act(async () => {
+      wrapper.find(Switch).first().prop('onChange')({
+        target: { checked: true },
+      })
+      await flushAllPromises()
+      wrapper.update()
+    })
+
+    expect(UpdateWidgetEnabledMutation).toHaveBeenCalledWith(
+      defaultMockData.user,
+      {
+        id: 'fake-widget-id-bookmarks',
+        type: 'bookmarks',
+        enabled: false,
+      },
+      false
+    )
+  })
 })
 
 const getRevertAccountItem = (wrapper) =>

src/__tests__/pages/index.test.js

@@ -10,6 +10,7 @@ import {
   STORAGE_NEW_USER_CAUSE_ID,
   HAS_SEEN_SEARCH_V2_TOOLTIP,
   CAUSE_IMPACT_TYPES,
+  WIDGET_TYPE_BOOKMARKS,
 } from 'src/utils/constants'
 import {
   showMockAchievements,
@@ -59,6 +60,8 @@ import { isSearchActivityComponentSupported } from 'src/utils/browserSupport'
 import localStorageFeaturesManager from 'src/utils/localStorageFeaturesManager'
 import moment from 'moment'
 import GroupImpactContainer from 'src/components/groupImpactComponents/GroupImpactContainer'
+import AddShortcutPageContainer from 'src/components/AddShortcutPageContainer'
+import FrontpageShortcutListContainer from 'src/components/FrontpageShortcutListContainer'
 
 jest.mock('uuid')
 uuid.mockReturnValue('some-uuid')
@@ -165,6 +168,20 @@ const getMockProps = () => ({
       notifications: [],
       searches: 10,
       showSfacIcon: false,
+      widgets: {
+        edges: [
+          {
+            node: {
+              enabled: true,
+              id: 'abcde',
+              type: WIDGET_TYPE_BOOKMARKS,
+              data: JSON.stringify({
+                bookmarks: [],
+              }),
+            },
+          },
+        ],
+      },
     },
     userImpact: {
       userId: 'asdf',
@@ -195,6 +212,7 @@ beforeEach(() => {
   useDoesBrowserSupportSearchExtension.mockReturnValue(true)
   useBrowserName.mockReturnValue('chrome')
   MockDate.set(moment(mockNow))
+  localStorageFeaturesManager.getFeatureValue.mockReturnValue('false')
 })
 
 afterEach(() => {
@@ -1544,6 +1562,33 @@ describe('index.js', () => {
   })
 })
 
+it('does display shortcut components if applicable', async () => {
+  localStorageFeaturesManager.getFeatureValue.mockReturnValue('true')
+  const IndexPage = require('src/pages/index').default
+  const defaultMockProps = getMockProps()
+  useData.mockReturnValue({ data: defaultMockProps.data })
+  const wrapper = mount(<IndexPage {...defaultMockProps} />)
+
+  expect(wrapper.find(FrontpageShortcutListContainer).exists()).toBe(true)
+
+  wrapper
+    .find(FrontpageShortcutListContainer)
+    .find(IconButton)
+    .simulate('click')
+
+  expect(wrapper.find(AddShortcutPageContainer).exists()).toBe(true)
+})
+
+it('does not shortcut components if applicable', async () => {
+  const IndexPage = require('src/pages/index').default
+  const defaultMockProps = getMockProps()
+  useData.mockReturnValue({ data: defaultMockProps.data })
+  const wrapper = mount(<IndexPage {...defaultMockProps} />)
+
+  expect(wrapper.find(FrontpageShortcutListContainer).exists()).toBe(false)
+  expect(wrapper.find(AddShortcutPageContainer).exists()).toBe(false)
+})
+
 /* END: core tests */
 
 /* START: notification tests */
@@ -1556,7 +1601,7 @@ describe('index.js: hardcoded notifications', () => {
     const IndexPage = require('src/pages/index').default
     const mockProps = getMockProps()
     useData.mockReturnValue({ data: mockProps.data, isDataFresh: true })
-    const wrapper = mount(<IndexPage {...mockProps} />)
+    const wrapper = shallow(<IndexPage {...mockProps} />)
     const notification = wrapper.find(Notification)
     expect(notification.exists()).not.toBe(true)
   })

src/components/AddShortcut.js

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+/* eslint no-useless-escape: 0 */
+
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import PropTypes from 'prop-types'
@@ -34,22 +36,42 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(2),
   },
 }))
-const AddShortcut = ({ onCancel, onSave }) => {
-  const [open, setOpen] = useState(true)
-  const [name, setName] = useState('')
-  const [url, setUrl] = useState('')
+
+const addProtocolToURLIfNeeded = (url) => {
+  const hasProtocol = (s) => {
+    const regexp =
+      /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+    return regexp.test(s)
+  }
+
+  if (!hasProtocol(url)) {
+    return `http://${url}`
+  }
+  return url
+}
+
+const AddShortcut = ({
+  onCancel,
+  onSave,
+  existingName,
+  existingUrl,
+  existingId,
+}) => {
+  const [name, setName] = useState(existingName)
+  const [url, setUrl] = useState(existingUrl)
+  useEffect(() => setName(existingName), [existingName])
+  useEffect(() => setUrl(existingUrl), [existingUrl])
   const classes = useStyles()
   const onCancelClick = () => {
-    setName('')
-    setUrl('')
+    setName(existingName)
+    setUrl(existingUrl)
     onCancel()
-    setOpen(false)
   }
   const onSaveClick = () => {
-    onSave(name, url)
-    setName('')
-    setUrl('')
-    setOpen(false)
+    const newUrl = addProtocolToURLIfNeeded(url)
+    onSave(existingId, name, newUrl)
+    setName(name)
+    setUrl(newUrl)
   }
   const changeName = (e) => {
     setName(e.target.value)
@@ -59,7 +81,6 @@ const AddShortcut = ({ onCancel, onSave }) => {
   }
   return (
     <Notification
-      open={open}
       text={
         <span className={classes.text}>
           <Typography
@@ -68,7 +89,8 @@ const AddShortcut = ({ onCancel, onSave }) => {
             gutterBottom
             color="primary"
           >
-            Add Shortcut
+            {existingName === '' && existingUrl === '' ? 'Add' : 'Edit'}{' '}
+            Shortcut
           </Typography>
           <hr />
           <div className={classes.urlFields}>
@@ -78,6 +100,8 @@ const AddShortcut = ({ onCancel, onSave }) => {
               label="Name"
               value={name}
               onChange={changeName}
+              error={name.length === 0}
+              helperText={name.length === 0 && 'Bookmark name cannot be empty.'}
               className={classes.textField}
             />
             <TextField
@@ -86,6 +110,8 @@ const AddShortcut = ({ onCancel, onSave }) => {
               label="URL"
               value={url}
               onChange={changeUrl}
+              error={url.length === 0}
+              helperText={url.length === 0 && 'URL cannot be empty.'}
               className={classes.textField}
             />
           </div>
@@ -104,6 +130,7 @@ const AddShortcut = ({ onCancel, onSave }) => {
             onClick={onSaveClick}
             className={classes.yesButton}
             variant="contained"
+            disabled={name.length === 0 || url.length === 0}
             disableElevation
           >
             Save
@@ -117,11 +144,17 @@ const AddShortcut = ({ onCancel, onSave }) => {
 AddShortcut.propTypes = {
   onCancel: PropTypes.func,
   onSave: PropTypes.func,
+  existingName: PropTypes.string,
+  existingUrl: PropTypes.string,
+  existingId: PropTypes.string,
 }
 
 AddShortcut.defaultProps = {
   onCancel: () => {},
   onSave: () => {},
+  existingName: '',
+  existingUrl: '',
+  existingId: null,
 }
 
 export default AddShortcut

src/components/AddShortcut.stories.jsx

@@ -33,3 +33,9 @@ const Template = (args) => {
 
 export const basic = Template.bind({})
 basic.args = {}
+
+export const existingValues = Template.bind({})
+existingValues.args = {
+  existingName: 'Google',
+  existingUrl: 'http://www.google.com',
+}