From b4b0f6e314f342c527eeaf377788dee8e7c33abf Mon Sep 17 00:00:00 2001
From: Igor Komlew <igor.komlew@canonical.com>
Date: Fri, 14 Aug 2020 15:20:14 +0200
Subject: [PATCH] Replaced <a href=> with <button> elements (#299)

* Replaced <a href=> with <button> elements, otherwise it produces warnings during build process

* Fixed test
---
 webapp-admin/src/__tests__/dialogbox-test.js |  2 +-
 webapp-admin/src/components/DialogBox.js     |  8 ++++----
 webapp-admin/src/components/ModelRow.js      | 14 ++++++++------
 webapp-admin/src/components/SubstoreList.js  | 12 ++++++------
 webapp-admin/src/components/UserRow.js       |  5 +++--
 5 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/webapp-admin/src/__tests__/dialogbox-test.js b/webapp-admin/src/__tests__/dialogbox-test.js
index a6882413..919476a1 100644
--- a/webapp-admin/src/__tests__/dialogbox-test.js
+++ b/webapp-admin/src/__tests__/dialogbox-test.js
@@ -43,7 +43,7 @@ describe('dialog box', function() {
   // Check all the expected elements are rendered
   var divs = ReactTestUtils.scryRenderedDOMComponentsWithTag(page, 'div');
   expect(divs.length).toBe(2);
-  var anchors = ReactTestUtils.scryRenderedDOMComponentsWithTag(page, 'a');
+  var anchors = ReactTestUtils.scryRenderedDOMComponentsWithTag(page, 'button');
   expect(anchors.length).toBe(2);
 
   expect(handleYesClick.mock.calls.length).toBe(0);
diff --git a/webapp-admin/src/components/DialogBox.js b/webapp-admin/src/components/DialogBox.js
index 12f6a102..e78a425d 100644
--- a/webapp-admin/src/components/DialogBox.js
+++ b/webapp-admin/src/components/DialogBox.js
@@ -33,12 +33,12 @@ class DialogBox extends Component {
                 <div className="p-card warning">
                     <p>{this.props.message}</p>
                     <div>
-                        <a href="" onClick={this.props.handleCancelClick} className={classNo}>
+                        <button onClick={this.props.handleCancelClick} className={classNo}>
                             {T('no')}
-                        </a>
-                        <a href="" onClick={this.props.handleYesClick} className={classYes}>
+                        </button>
+                        <button onClick={this.props.handleYesClick} className={classYes}>
                             {T('yes')}
-                        </a>
+                        </button>
                     </div>
                 </div>
             );
diff --git a/webapp-admin/src/components/ModelRow.js b/webapp-admin/src/components/ModelRow.js
index 24b231f5..d4862503 100644
--- a/webapp-admin/src/components/ModelRow.js
+++ b/webapp-admin/src/components/ModelRow.js
@@ -37,8 +37,9 @@ class ModelRow extends Component {
                 <div>
                     <a href={'/models/'.concat(this.props.model.id, '/edit')} className="p-button--brand small" title={T('edit-model')}><i className="fa fa-pencil"></i></a>
                     &nbsp;
-                    <a href="" onClick={this.props.delete} data-key={this.props.model.id} className="p-button--neutral small" title={T('delete-model')}>
-                        <i className="fa fa-trash" data-key={this.props.model.id}></i></a>
+                    <button onClick={this.props.delete} data-key={this.props.model.id} className="p-button--neutral small" title={T('delete-model')}>
+                        <i className="fa fa-trash" data-key={this.props.model.id}></i>
+                    </button>
                 </div>
             );
         } else {
@@ -63,8 +64,9 @@ class ModelRow extends Component {
                     {this.renderActions()}
                 </td>
                 <td className="overflow" title={this.props.model.model}>
-                    <a href="" onClick={this.copyToClipboard} data-key={this.props.model['api-key']} className="p-button--neutral small" title={T('copy-api-key')}>
-                        <i className="fa fa-clipboard" data-key={this.props.model['api-key']} /></a>
+                    <button onClick={this.copyToClipboard} data-key={this.props.model['api-key']} className="p-button--neutral small" title={T('copy-api-key')}>
+                        <i className="fa fa-clipboard" data-key={this.props.model['api-key']} />
+                    </button>
                     &nbsp;
                     {this.props.model.model}
                 </td>
@@ -72,9 +74,9 @@ class ModelRow extends Component {
                 <td className="overflow" title={fingerprintUser} >{fingerprintUser}</td>
                 <td>{this.props.model['key-active'] && this.props.model['key-active-user'] ? <i className="fa fa-check"></i> :  <i className="fa fa-times"></i>}</td>
                 <td className="overflow" title={fingerprintModel} >
-                    <a href="" className="p-button--neutral small" title={T('assertion-settings')} data-key={this.props.model.id} onClick={this.props.showAssert}>
+                    <button className="p-button--neutral small" title={T('assertion-settings')} data-key={this.props.model.id} onClick={this.props.showAssert}>
                         <i className="fa fa-sliders" aria-hidden="true" data-key={this.props.model.id} />
-                    </a>                    
+                    </button>                    
                 </td>
             </tr>
         )
diff --git a/webapp-admin/src/components/SubstoreList.js b/webapp-admin/src/components/SubstoreList.js
index 48bb44b6..704e9fbc 100644
--- a/webapp-admin/src/components/SubstoreList.js
+++ b/webapp-admin/src/components/SubstoreList.js
@@ -132,13 +132,13 @@ class SubstoreList extends Component {
         } else {
             return (
                 <div>
-                    <a href="" data-key={b.id} onClick={this.handleShowEdit} className="p-button--brand small" title={T('edit-model')}>
+                    <button data-key={b.id} onClick={this.handleShowEdit} className="p-button--brand small" title={T('edit-model')}>
                         <i data-key={b.id} className="fa fa-pencil" />
-                    </a>
+                    </button>
                     &nbsp;
-                    <a href="" data-key={b.id} onClick={this.handleShowDelete} className="p-button--neutral small" title={T('delete-model')}>
+                    <button data-key={b.id} onClick={this.handleShowDelete} className="p-button--neutral small" title={T('delete-model')}>
                         <i data-key={b.id} className="fa fa-trash" />
-                    </a>
+                    </button>
                 </div>
             )
         }
@@ -175,9 +175,9 @@ class SubstoreList extends Component {
                             <h2 className="p-card__title col-5">{T('substores')}</h2>
                             &nbsp;
                             <div className="col-1">
-                                <a href="" onClick={this.handleShowNew} className="p-button--brand" title={T('new-substore-device')}>
+                                <button onClick={this.handleShowNew} className="p-button--brand" title={T('new-substore-device')}>
                                     <i className="fa fa-plus"></i>
-                                </a>
+                                </button>
                             </div>
                         </div>
 
diff --git a/webapp-admin/src/components/UserRow.js b/webapp-admin/src/components/UserRow.js
index 597918a5..34b42c3c 100644
--- a/webapp-admin/src/components/UserRow.js
+++ b/webapp-admin/src/components/UserRow.js
@@ -26,8 +26,9 @@ class UserRow extends Component {
 				<div>
 					<a href={'/users/'.concat(this.props.user.ID, '/edit')} className="p-button--brand" title={T('edit-user')}><i className="fa fa-pencil"></i></a>
 					&nbsp;
-					<a href="" onClick={this.props.delete} data-key={this.props.user.ID} className="p-button--neutral" title={T('delete-user')}>
-						<i className="fa fa-trash" data-key={this.props.user.ID}></i></a>
+					<button onClick={this.props.delete} data-key={this.props.user.ID} className="p-button--neutral" title={T('delete-user')}>
+						<i className="fa fa-trash" data-key={this.props.user.ID}></i>
+					</button>
 				</div>
 			);
 		} else {