Usernames: Create/update/delete in profile editor

ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { Spinner } from '../../Spinner';
 import { bemGenerator } from './util';
 
 export enum IconType {
@@ -19,6 +20,7 @@ export enum IconType {
   'notifications' = 'notifications',
   'reset' = 'reset',
   'share' = 'share',
+  'spinner' = 'spinner',
   'timer' = 'timer',
   'trash' = 'trash',
   'verify' = 'verify',
@@ -28,6 +30,7 @@ export type Props = {
   ariaLabel: string;
   disabled?: boolean;
   icon: IconType;
+  fakeButton?: boolean;
   onClick?: () => void;
 };
 
@@ -37,17 +40,50 @@ export const ConversationDetailsIcon: React.ComponentType<Props> = ({
   ariaLabel,
   disabled,
   icon,
+  fakeButton,
   onClick,
 }) => {
-  const iconClassName = bem('icon', icon);
-  const content = (
-    <div
-      className={classNames(
-        iconClassName,
-        disabled && `${iconClassName}--disabled`
-      )}
-    />
-  );
+  let content: React.ReactChild;
+
+  if (icon === IconType.spinner) {
+    content = <Spinner svgSize="small" size="24" />;
+  } else {
+    const iconClassName = bem('icon', icon);
+    content = (
+      <div
+        className={classNames(
+          iconClassName,
+          disabled && `${iconClassName}--disabled`
+        )}
+      />
+    );
+  }
+
+  // We need this because sometimes this component is inside other buttons
+  if (onClick && fakeButton && !disabled) {
+    return (
+      <div
+        aria-label={ariaLabel}
+        role="button"
+        className={bem('button')}
+        tabIndex={0}
+        onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onClick();
+        }}
+        onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            onClick();
+          }
+        }}
+      >
+        {content}
+      </div>
+    );
+  }
 
   if (onClick) {
     return (
@@ -56,7 +92,11 @@ export const ConversationDetailsIcon: React.ComponentType<Props> = ({
         className={bem('button')}
         disabled={disabled}
         type="button"
-        onClick={onClick}
+        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onClick();
+        }}
       >
         {content}
       </button>