refactor: use buttons to get rid of deprecated javascript URLs

Author: visualfanatic

src/components/BrowserFilter/BrowserFilter.scss

@@ -138,6 +138,7 @@
 }
 
 .remove {
+  @include buttonReset;
   display: inline-block;
   height: 14px;
   margin: 8px;

src/components/BrowserFilter/FilterRow.react.js

@@ -103,7 +103,7 @@ let FilterRow = ({
       options={constraints.map((c) => Constraints[c].name)}
       onChange={(c) => onChangeConstraint(constraintLookup[c])} />
     {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)}
-    <a role='button' href='javascript:;' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></a>
+    <button type='button' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></button>
   </div>
 );
 

src/components/Button/Button.react.js

@@ -39,15 +39,14 @@ let Button = (props) => {
     styleOverride = { width: props.width, minWidth: props.width, ...props.additionalStyles };
   }
   return (
-    <a
-      href='javascript:;'
-      role='button'
+    <button
+      type='button'
       style={styleOverride}
       className={classes.join(' ')}
       onClick={clickHandler}
       onFocus={(e) => { if (props.disabled) e.target.blur(); }} >
       <span>{props.value}</span>
-    </a>
+    </button>
   );
 }
 

src/components/Button/Button.scss

@@ -9,17 +9,15 @@
 
 .button {
   @include DosisFont;
+  @include buttonReset($bg: none, $border: 1px solid $blue, $padding: 0 16px);
   display: inline-block;
   height: 30px;
-  border: 1px solid $blue;
   line-height: 28px;
   outline: 0;
   text-decoration: none;
   text-align: center;
   border-radius: 5px;
-  cursor: pointer;
   min-width: 110px;
-  padding: 0 16px;
   font-size: 14px;
 
   color: $blue;

src/components/Filter/Filter.react.js

@@ -47,6 +47,7 @@ function deleteRow(filters, index) {
 let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, context) => {
   blacklist = blacklist || [];
   let available = Filters.availableFilters(schema, filters);
+  console.log('c', context)
   return (
     <div>
       {filters.toArray().map((filter, i) => {
@@ -60,7 +61,7 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, co
         }
 
         // Get the column preference of the current class.
-        const currentColumnPreference = context.currentApp.columnPreference[className];
+        const currentColumnPreference = context.currentApp.columnPreference && context.currentApp.columnPreference[className];
 
         // Check if the preference exists.
         if (currentColumnPreference) {

src/components/PermissionsDialog/PermissionsDialog.react.js

@@ -1061,13 +1061,12 @@ export default class PermissionsDialog extends React.Component {
     if (!this.state.transitioning) {
       trash = (
         <div className={styles.delete}>
-          <a
-            href="javascript:;"
-            role="button"
+          <button
+            type='button'
             onClick={this.deleteRow.bind(this, key, pointer)}
           >
             <Icon name="trash-solid" width={20} height={20} />
-          </a>
+          </button>
         </div>
       );
     }

src/components/PermissionsDialog/PermissionsDialog.scss

@@ -314,6 +314,10 @@
    height: 50px;
    padding-top: 15px;
    text-align: right;
+
+   button {
+     @include buttonReset;
+   }
 
    svg {
      vertical-align: top;

src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js

@@ -359,13 +359,12 @@ export default class ProtectedFieldsDialog extends React.Component {
     if (!this.state.transitioning) {
       trash = (
         <div className={styles.delete}>
-          <a
-            href="javascript:;"
-            role="button"
+          <button
+            type='button'
             onClick={this.deleteRow.bind(this, key)}
           >
             <Icon name="trash-solid" width={20} height={20} />
-          </a>
+          </button>
         </div>
       );
     }

src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss

@@ -176,6 +176,10 @@ $permissionsDialogWidth: calc(
   padding-top: 15px;
   text-align: right;
 
+  button {
+    @include buttonReset;
+  }
+
   svg {
     vertical-align: top;
     cursor: pointer;

src/components/PushAudienceDialog/InstallationCondition.react.js

@@ -115,15 +115,13 @@ export default class InstallationCondition extends React.Component {
       </div>
     );
 
-    //TODO Shoulse use <Button> and have a link type style without border.
     let labelDescription = (
-      <a
-        href='javascript:;'
-        role='button'
+      <button
+        type='button'
         className={styles.description}
         onClick={this.props.onDeleteRow}>
         Remove
-      </a>
+      </button>
     );
 
     return (

src/components/PushAudienceDialog/InstallationCondition.scss

@@ -17,7 +17,7 @@
 .description {
   margin-top: 2px;
   color: $pink;
-  cursor: pointer;
+  @include buttonReset;
 }
 
 .valueInput {

src/components/PushAudiencesSelector/PushAudiencesOption.react.js

@@ -85,24 +85,22 @@ export default class PushAudiencesOption extends PushAudiencesBaseRow {
             <div className={styles.subline}>
               {detailsView}
               {!this.state.isNewSegment ?
-                <a
-                  role='button'
+                <button
+                  type='button'
                   className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
-                  href='javascript:;'
                   onClick={this.handleDetailsToggle.bind(this,this.props.query, this.props.schema)}>
                   {this.state.expandedView ? 'less details' : 'more details'}
-                </a> :
-                <a
-                  role='button'
+                </button> :
+                <button
+                  type='button'
                   className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
-                  href='javascript:;'
                   onClick={this.props.onEditAudience.bind(undefined, {
                     name: this.props.name,
                     filters: this.props.filters,
                     query: this.props.query,
                   })}>
                   {'Edit audience'}
-                </a>
+                </button>
               }
             </div>
           </div>

src/components/PushAudiencesSelector/PushAudiencesOption.scss

@@ -88,6 +88,7 @@
     }
 
     .moreDetails {
+      @include buttonReset;
       color: $blue;
 
       &.hideMoreDetails {

src/dashboard/Analytics/SlowQueries/SlowQueries.react.js

@@ -164,14 +164,13 @@ class SlowQueries extends TableView {
               ...newValue,
               mutated: true
             })} />
-          <a
-            href='javascript:;'
-            role='button'
+          <button
+            type='button'
             onClick={this.handleDownload.bind(this)}
             className={styles.toolbarAction}>
             <Icon name='download' width={14} height={14} fill='#66637a' />
             Download
-          </a>
+          </button>
         </div>
       );
     }

src/dashboard/Analytics/SlowQueries/SlowQueries.scss

@@ -8,7 +8,7 @@
 @import 'stylesheets/globals.scss';
 
 .toolbarAction {
-  padding: 0px 20px;
+  @include buttonReset($padding: 0px 20px);
   color: white;
 
   > *:not(svg) {

src/dashboard/Data/Webhooks/Webhooks.react.js

@@ -23,6 +23,7 @@ import TextInput                             from 'components/TextInput/TextInpu
 import Toolbar                               from 'components/Toolbar/Toolbar.react';
 import { ActionTypes as SchemaActionTypes }  from 'lib/stores/SchemaStore';
 import { ActionTypes as WebhookActionTypes } from 'lib/stores/WebhookStore';
+import styles                                from './Webhooks.scss'
 
 let TableWarning = ({ text }) => <div>
   <Icon name='warn-outline' fill='#343445' width={20} height={20}/><span style={{ position: 'relative', top: '2px' }}> {text}</span>
@@ -250,9 +251,9 @@ class Webhooks extends TableView {
     let rowStyle = hook.url ? { cursor: 'pointer' } : {};
     let deleteColumnContents = null;
     if (hook.url) {
-      deleteColumnContents = <a role='button' href='javascript:;' onClick={showDelete}>
+      deleteColumnContents = <button type='button' onClick={showDelete} className={styles.deleteButton}>
         <Icon name='trash-outline' fill='#343445' width={20} height={20}/>
-      </a>;
+      </button>;
     } else {
       let isOverridden = !!this.tableData().find(otherHook => otherHook.url &&
         otherHook.functionName == hook.functionName &&

src/dashboard/Data/Webhooks/Webhooks.scss

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+ @import 'stylesheets/globals.scss';
+
+.deleteButton {
+  @include buttonReset;
+}

src/dashboard/Push/Push.scss

@@ -70,6 +70,7 @@
 }
 
 .localeRemoveButton {
+  @include buttonReset;
   position: absolute;
   right: 15px;
   font-size: 12px;

src/dashboard/Push/PushAudiencesIndexRow.react.js

@@ -40,24 +40,22 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow {
       <tr>
         <td className={styles.colName}>
           {this.props.name}
-          <a
+          <button
             className={styles.newPushButton}
-            href='javascript:;'
-            role='button'
+            type='button'
             onClick={this.props.onSendPush.bind(undefined, this.props.id)}>
               Send a new push
-          </a>
+          </button>
         </td>
         <td className={styles.colSize}>{countDetails}</td>
         <td className={styles.colDetails}>
           {detailsView}
-          <a
-            role='button'
-            href='javascript:;'
+          <button
+            type='button'
             className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
             onClick={this.handleDetailsToggle.bind(this,this.props.query, this.props.schema)}>
             {this.state.expandedView ? 'less details' : 'more details' }
-          </a>
+          </button>
         </td>
         <td className={styles.colCreatedOn}>
           {DateUtils.yearMonthDayFormatter(this.props.createdAt)}
@@ -66,13 +64,12 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow {
           {this.props.timesUsed}
         </td>
         <td className={styles.colAction}>
-          <a
+          <button
             className={styles.removeIcon}
-            role='button'
-            href='javascript:;'
+            type='button'
             onClick={this.props.onDelete.bind(undefined, this.props.id, this.props.name)}>
             <Icon name='trash-outline' fill='#343445' width={20} height={20} role='button'/>
-          </a>
+          </button>
         </td>
       </tr>
     );

src/dashboard/Push/PushAudiencesIndexRow.scss

@@ -60,6 +60,7 @@
 }
 
 .moreDetails {
+  @include buttonReset;
   color: $blue;
   font-size: 14px;
 
@@ -73,6 +74,7 @@
 }
 
 .newPushButton {
+  @include buttonReset;
   font-size: 14px;
   display: block;
   margin: -5px 0 -10px 0;
@@ -84,6 +86,7 @@
 
 //NOTE: May be used to global so SVG icons wrapped by <a> can have common styles.
 .removeIcon {
+  @include buttonReset;
   &:hover, &:focus {
     svg {
       fill: $blue;

src/dashboard/Push/PushNew.react.js

@@ -75,7 +75,7 @@ let LocalizedMessageField = ({
     <div className={styles.localeContainer}>
       <div className={styles.localeTitle}>
         <span>Localized message</span>
-        <a href='javascript:;' role='button' className={styles.localeRemoveButton} onClick={onClickRemove.bind(undefined, id, currentLocaleOption)}>REMOVE</a>
+        <button type='button' className={styles.localeRemoveButton} onClick={onClickRemove.bind(undefined, id, currentLocaleOption)}>REMOVE</button>
       </div>
       <Field
         key={`message1_${id}`}

src/stylesheets/globals.scss

@@ -194,3 +194,11 @@ $sidebarCollapsedWidth: 54px;
   }
 }
 }
+
+@mixin buttonReset($bg: none, $border: 0, $padding: 0) {
+  border: $border;
+  background: $bg;
+  cursor: pointer;
+  font-family: inherit;
+  padding: $padding;
+}