Merge pull request #536 from gladly-team/jtan/fix-for-existing-url

Add Protocol if needed for URL

src/components/AddShortcut.js

@@ -1,11 +1,10 @@
-/* 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'
 import { Typography } from '@material-ui/core'
 import TextField from '@material-ui/core/TextField'
+import { addProtocolToURLIfNeeded } from 'src/utils/urls'
 import Notification from './Notification'
 
 const useStyles = makeStyles((theme) => ({
@@ -37,19 +36,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-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 isValidUrl = (urlString) => {
   try {
     return Boolean(new URL(urlString))

src/components/ShortcutIcon.js

@@ -12,6 +12,7 @@ import EditIcon from '@material-ui/icons/Edit'
 import CheckIcon from '@material-ui/icons/Check'
 import Link from 'src/components/Link'
 import CloseIcon from '@material-ui/icons/Close'
+import { addProtocolToURLIfNeeded } from 'src/utils/urls'
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -131,7 +132,11 @@ const ShortcutIcon = ({ onEdit, onDelete, text, url, id }) => {
           <Typography className={classes.deleteText}>Confirm Delete</Typography>
         </div>
       ) : (
-        <Link to={url} target="_blank" className={classes.link}>
+        <Link
+          to={addProtocolToURLIfNeeded(url)}
+          target="_blank"
+          className={classes.link}
+        >
           <Fade in={hover}>
             <div className={classes.buttons}>
               <IconButton

src/components/ShortcutIcon.stories.jsx

@@ -26,3 +26,12 @@ basic.args = {
   onEdit: () => console.log('onEdit'),
   onDelete: () => console.log('onDelete'),
 }
+
+export const withoutHttps = Template.bind({})
+withoutHttps.args = {
+  id: 'abcd',
+  text: 'Google Googledy',
+  url: 'www.google.com',
+  onEdit: () => console.log('onEdit'),
+  onDelete: () => console.log('onDelete'),
+}

src/components/__tests__/ShortcutIcon.test.js

@@ -29,6 +29,16 @@ describe('ShortcutIcon component', () => {
     expect(wrapper.find(Link).prop('to')).toEqual(mockProps.url)
   })
 
+  it('has an https link with url property', () => {
+    const ShortcutIcon = require('src/components/ShortcutIcon').default
+    const mockProps = {
+      ...getMockProps(),
+      url: 'www.google.com',
+    }
+    const wrapper = mount(<ShortcutIcon {...mockProps} />)
+    expect(wrapper.find(Link).prop('to')).toEqual('http://www.google.com')
+  })
+
   it('displays abbreviated version of link name along with full title', () => {
     const ShortcutIcon = require('src/components/ShortcutIcon').default
     const mockProps = getMockProps()

src/utils/__tests__/urls.test.js

@@ -35,3 +35,10 @@ describe('Urls: getSquadsLink', () => {
     )
   })
 })
+
+describe('addProtocolToURLIfNeeded', () => {
+  it('appends https if applicable', () => {
+    const { addProtocolToURLIfNeeded } = require('src/utils/urls')
+    expect(addProtocolToURLIfNeeded('test-user')).toBe('http://test-user')
+  })
+})

src/utils/urls.js

@@ -1,3 +1,5 @@
+/* eslint no-useless-escape: 0 */
+
 import ensureValuesAreDefined from 'src/utils/ensureValuesAreDefined'
 import { withBasePath } from 'src/utils/navigationUtils'
 import { MEDIA_ENDPOINT } from 'src/utils/constants'
@@ -108,3 +110,16 @@ export const shopLandingURL = 'https://shop.gladly.io/'
 
 export const groupImpactLeaderboardFAQ =
   'https://gladly.zendesk.com/hc/en-us/articles/17622871939725-Leaderboards'
+
+export 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
+}