Add title attribute to all buttons

app/components/InterceptAllButton.tsx

@@ -3,18 +3,19 @@ import * as React from "react";
 export const InterceptAllButton = props => {
   return (
     <button
-    id="intercept-all-btn"
-    className="btn btn-sm btn-primary btn-clear"
-    disabled={props.disabled}
-    onClick={props.handleCheckedRequests}
-  >
-    Intercept
-  </button>
+      id="intercept-all-btn"
+      title="Intercept Selected Requests"
+      className="btn btn-sm btn-primary btn-clear"
+      disabled={props.disabled}
+      onClick={props.handleCheckedRequests}
+    >
+      Intercept
+    </button>
   );
 };
 
 InterceptAllButton.displayName = "InterceptAllButton";
 
 InterceptAllButton.defaultProps = {
   disabled: false
-};
+};

app/components/Intercept_Components/InterceptTextBox.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {RequestHeaderList} from "./RequestHeaderList";
+import { RequestHeaderList } from "./RequestHeaderList";
 
 export const InterceptTextBox = props => {
   const requestId = props.rowProps.checkbox.requestId;
@@ -25,9 +25,9 @@ export const InterceptTextBox = props => {
           </a>
         </div>
         <div className="response">
-          <label className="responseTextlabel">Response Text</label>
+          <label className="responseTextlabel">Mocked Response Text</label>
           <button
-            title="Fetch Response"
+            title="Fetch Response Text"
             className="fetch-responsetext btn-sm btn-primary"
             onClick={() => {
               props.fetchResponse(props.rowProps.checkbox);
@@ -38,6 +38,7 @@ export const InterceptTextBox = props => {
             className="responseText"
             defaultValue={responseTextValue}
             key={props.responseData[requestId]}
+            title="Mocked Response Text"
             //value={textAreaValue}
             onChange={event => {
               props.handleRespTextChange(event.target.value, requestId);

app/components/request_list.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import ReactTable from "react-table";
 import matchSorter from "match-sorter";
-import {InterceptForm} from "./../components/Intercept_Components/index";
-import {InterceptAllButton} from './../components/InterceptAllButton'
-import {Switch} from './Switch'
+import { InterceptForm } from "./../components/Intercept_Components/index";
+import { InterceptAllButton } from "./../components/InterceptAllButton";
+import { Switch } from "./Switch";
 export interface RequestObj {
   requests: Array<chrome.webRequest.WebRequestDetails>;
   requestId?: number;
@@ -20,20 +20,24 @@ export interface RequestObj {
   PageDetails: object;
   handlePaginationChange: React.MouseEvent<HTMLButtonElement>;
   tabId: number;
-  clearRequests:React.ChangeEvent<HTMLButtonElement>;
-  disableInterceptor:React.ChangeEvent<HTMLButtonElement>;
-  updateInterceptorStatus:React.ChangeEvent<HTMLButtonElement>;
-  isInterceptorOn:object;
-  fetchResponse:React.MouseEvent<HTMLSpanElement>
-  responseData : object;
+  clearRequests: React.ChangeEvent<HTMLButtonElement>;
+  disableInterceptor: React.ChangeEvent<HTMLButtonElement>;
+  updateInterceptorStatus: React.ChangeEvent<HTMLButtonElement>;
+  isInterceptorOn: object;
+  fetchResponse: React.MouseEvent<HTMLSpanElement>;
+  responseData: object;
   responseError: object;
 }
 const RequestList = (props: RequestObj) => {
   const columns = [
     {
       Header: "Request URL",
       accessor: "url",
-      Cell: ({original}) => <div className="url" title={original.url}>{original.url}</div>,
+      Cell: ({ original }) => (
+        <div className="url" title={original.url}>
+          {original.url}
+        </div>
+      ),
       filterable: true,
       filterMethod: (filter, rows) => {
         return matchSorter(rows, filter.value, {
@@ -45,15 +49,15 @@ const RequestList = (props: RequestObj) => {
     },
     {
       Header: "Method",
-      className:"method",
+      className: "method",
       accessor: "method",
       width: 100,
       filterable: true,
       filterMethod: (filter, row) => row[filter.id] === filter.value,
-      Filter: ({filter, onChange}) => (
+      Filter: ({ filter, onChange }) => (
         <select
           onChange={event => onChange(event.target.value)}
-          style={{width: "100%"}}
+          style={{ width: "100%" }}
           value={filter ? filter.value : ""}
         >
           <option value="">ALL</option>
@@ -66,7 +70,7 @@ const RequestList = (props: RequestObj) => {
     {
       id: "checkbox",
       accessor: "",
-      Cell: ({original}) => {
+      Cell: ({ original }) => {
         return (
           <input
             type="checkbox"
@@ -81,63 +85,70 @@ const RequestList = (props: RequestObj) => {
       Header: "Intercept",
       sortable: false,
       width: 75,
-      className: 'text-center'
+      className: "text-center"
     }
   ];
 
   const enabledRequests = props.requests.filter(request => {
-      return props.checkedReqs[request.requestId];
-    })
+    return props.checkedReqs[request.requestId];
+  });
 
   return (
     <div>
-    <div className="grid-container response-action">
-      <Switch isOn={props.isInterceptorOn[props.tabId]}  handleSwitch={props.handleSwitch}/>
-      <div className="text-right">
-        <InterceptAllButton
-        disabled={!enabledRequests.length}
-        handleCheckedRequests={() => {
-          return props.handleCheckedRequests(enabledRequests);
-        }}
-        />
-        <button
-          type="button"
-          className="btn btn-sm btn-primary btn-clear"
-          onClick={props.clearRequests}
-        >
-          CLEAR
-        </button>
+      <div className="grid-container response-action">
+        <Switch isOn={props.isInterceptorOn[props.tabId]} handleSwitch={props.handleSwitch} />
+        <div className="text-right">
+          <InterceptAllButton
+            disabled={!enabledRequests.length}
+            handleCheckedRequests={() => {
+              return props.handleCheckedRequests(enabledRequests);
+            }}
+          />
+          <button
+            type="button"
+            title="Clear All Requests"
+            className="btn btn-sm btn-primary btn-clear"
+            onClick={props.clearRequests}
+          >
+            CLEAR
+          </button>
+        </div>
       </div>
-    </div>
 
-    <ReactTable
-      data={props.requests}
-      columns={columns}
-      showPagination={true}
-      showPaginationTop={false}
-      showPaginationBottom={true}
-      defaultPageSize={10}
-      page={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentPageNumber : 0}
-      pageSize={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentRowSize : 10}
-      onPageChange={changedPageNo => props.handlePaginationChange(changedPageNo, props.tabId, "currentPageNumber")}
-      onPageSizeChange={changedRowSize => props.handlePaginationChange(changedRowSize, props.tabId, "currentRowSize")}
-      collapseOnDataChange={false}
-      SubComponent={row => (
-        <InterceptForm
-          rowProps={row}
-          handleStatusCodeChange={props.handleStatusCodeChange}
-          handleRespTextChange={props.handleRespTextChange}
-          responseText={props.responseText}
-          statusCodes={props.statusCodes}
-          handleContentTypeChange={props.handleContentTypeChange}
-          contentType={props.contentType}
-          tabId={props.tabId}
-          fetchResponse={props.fetchResponse}
-          responseData = {props.responseData}
-          responseError= {props.responseError}
-        />
-      )}
-    />
+      <ReactTable
+        data={props.requests}
+        columns={columns}
+        showPagination={true}
+        showPaginationTop={false}
+        showPaginationBottom={true}
+        defaultPageSize={10}
+        page={props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentPageNumber : 0}
+        pageSize={
+          props.PageDetails[props.tabId] ? props.PageDetails[props.tabId].currentRowSize : 10
+        }
+        onPageChange={changedPageNo =>
+          props.handlePaginationChange(changedPageNo, props.tabId, "currentPageNumber")
+        }
+        onPageSizeChange={changedRowSize =>
+          props.handlePaginationChange(changedRowSize, props.tabId, "currentRowSize")
+        }
+        collapseOnDataChange={false}
+        SubComponent={row => (
+          <InterceptForm
+            rowProps={row}
+            handleStatusCodeChange={props.handleStatusCodeChange}
+            handleRespTextChange={props.handleRespTextChange}
+            responseText={props.responseText}
+            statusCodes={props.statusCodes}
+            handleContentTypeChange={props.handleContentTypeChange}
+            contentType={props.contentType}
+            tabId={props.tabId}
+            fetchResponse={props.fetchResponse}
+            responseData={props.responseData}
+            responseError={props.responseError}
+          />
+        )}
+      />
     </div>
   );
 };