Stop 'enter' on lots of IconButtons from firing twice & breaking things

Because these are already buttons, affordances like enter=click are
automatic. In most cases it doesn't matter, but for expand/collapse
toggles it does, because it stopped the button working: it toggled
instantly back to the original state due to the double press.

Author: pimterry

src/components/common/copy-button.tsx

@@ -67,7 +67,6 @@ export const CopyButtonPill = (p: { content: string, children?: React.ReactNode
 
     return <PillButton
         tabIndex={0}
-        onKeyDown={clickOnEnter}
         onClick={() => {
             copyToClipboard(p.content);
             showSuccess();

src/components/common/editable-pairs.tsx

@@ -196,7 +196,6 @@ export class EditablePairs<R> extends React.Component<EditablePairsProps<R>> {
                         values.splice(i, 1);
                         onChangeValues(values);
                     })}
-                    onKeyPress={clickOnEnter}
                 >
                     <Icon icon={['far', 'trash-alt']} />
                 </PairDeleteButton>

src/components/common/icon-button.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { styled } from '../../styles'
 import { Icon, IconProp } from '../../icons';
 
-import { clickOnEnter } from '../component-utils';
 import { UnstyledButton, UnstyledButtonLink } from './inputs';
 
 export const IconButton = styled((p: {
@@ -20,7 +19,6 @@ export const IconButton = styled((p: {
         tabIndex={p.disabled ? -1 : 0}
         disabled={p.disabled}
         onClick={p.onClick}
-        onKeyPress={clickOnEnter}
     >
         <Icon
             icon={p.icon}

src/components/mock/mock-item-menu.tsx

@@ -2,9 +2,9 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { styled, css } from '../../styles';
-import { Icon, IconProp } from '../../icons';
+import { IconProp } from '../../icons';
 
-import { clickOnEnter } from '../component-utils';
+import { IconButton } from '../common/icon-button';
 
 export const IconMenu = styled.div<{ topOffset: number }>`
     position: absolute;
@@ -22,13 +22,12 @@ export const IconMenuButton = styled(React.memo((p: {
     title: string,
     onClick: (event: React.MouseEvent) => void,
     disabled?: boolean
-}) => <Icon
+}) => <IconButton
     className={p.className}
     icon={p.icon}
     title={p.title}
-    tabIndex={p.disabled ? -1 : 0}
-    onKeyPress={clickOnEnter}
-    onClick={p.disabled ? _.noop : p.onClick}
+    disabled={p.disabled}
+    onClick={p.onClick}
 />))`
     padding: 5px;
     margin: 0 5px;
@@ -37,18 +36,22 @@ export const IconMenuButton = styled(React.memo((p: {
 
     font-size: 1.2em;
 
-    ${p => p.disabled
-        ? css`
-            color: ${p => p.theme.containerWatermark};
-        `
-        : css`
-            cursor: pointer;
-            color: ${p => p.theme.primaryInputBackground};
-
-            &:hover, &:focus {
-                outline: none;
-                color: ${p => p.theme.popColor};
-            }
-        `
+    > svg {
+        display: block;
+    }
+
+    :disabled {
+        opacity: 1;
+        color: ${p => p.theme.containerWatermark};
+    }
+
+    :not(:disabled) {
+        cursor: pointer;
+        color: ${p => p.theme.primaryInputBackground};
+
+        &:hover, &:focus {
+            outline: none;
+            color: ${p => p.theme.popColor};
+        }
     }
 `;

src/components/mock/mock-rule-row.tsx

@@ -69,10 +69,6 @@ const RowContainer = styled(LittleCard)<{
     width: calc(100% - ${p => p.depth * 40}px);
     margin-left: ${p => p.depth * 40}px;
 
-    svg {
-        margin: 0 5px;
-    }
-
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -137,6 +133,10 @@ export const AddRuleRow = styled((p: {
         Add a new rule to rewrite requests or responses
     </RowContainer>
 )`
+    > svg {
+        margin: 0 5px;
+    }
+
     margin-top: 20px;
 
     justify-content: center;