Merge pull request #228 from BharatKalluri/feat/add_url_prop_frontend

Added URL as a property on the frontend

webapp/src/components/propertyValueElement.tsx

@@ -40,6 +40,10 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             const emailRegexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
             return emailRegexp.test(val.toLowerCase())
         }
+        case 'url': {
+            const urlRegexp = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/
+            return urlRegexp.test(val.toLowerCase())
+        }
         case 'text':
             return true
         default:
@@ -93,7 +97,12 @@ const PropertyValueElement = (props:Props): JSX.Element => {
         )
     }
 
-    if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
+    if (
+        propertyTemplate.type === 'text' ||
+        propertyTemplate.type === 'number' ||
+        propertyTemplate.type === 'email' ||
+        propertyTemplate.type === 'url'
+    ) {
         if (!readOnly) {
             return (
                 <Editable

webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap

@@ -111,6 +111,21 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                     class="noicon"
                   />
                 </div>
+                <div
+                  class="MenuOption TextOption menu-option"
+                >
+                  <div
+                    class="noicon"
+                  />
+                  <div
+                    class="menu-name"
+                  >
+                    URL
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
                 <div
                   class="MenuOption TextOption menu-option"
                 >

webapp/src/widgets/propertyMenu.tsx

@@ -103,6 +103,11 @@ const PropertyMenu = React.memo((props: Props) => {
                     name={typeDisplayName(intl, 'email')}
                     onClick={() => props.onTypeChanged('email')}
                 />
+                <Menu.Text
+                    id='url'
+                    name={typeDisplayName(intl, 'url')}
+                    onClick={() => props.onTypeChanged('url')}
+                />
                 <Menu.Text
                     id='select'
                     name={typeDisplayName(intl, 'select')}