hide "copied!" message

src/actions/LogActions.js

@@ -12,6 +12,8 @@ export type LogAction = {
     type: typeof LOG.OPEN,
 } | {
     type: typeof LOG.CLOSE,
+} | {
+    type: typeof LOG.COPY_RESET,
 } | {
     type: typeof LOG.COPY_SUCCESS,
 } | {
@@ -55,3 +57,7 @@ export const copyToClipboard = (): ThunkAction => (dispatch: Dispatch, getState:
         console.error(err);
     }
 };
+
+export const resetCopyState = (): Action => ({
+    type: LOG.COPY_RESET,
+});

src/actions/constants/log.js

@@ -4,4 +4,5 @@
 export const OPEN: 'log__open' = 'log__open';
 export const CLOSE: 'log__close' = 'log__close';
 export const ADD: 'log__add' = 'log__add';
-export const COPY_SUCCESS: 'log__copy_success' = 'log__copy_success';
+export const COPY_SUCCESS: 'log__copy_success' = 'log__copy_success';
+export const COPY_RESET: 'log__copy_reset' = 'log__copy_reset';

src/components/Log/index.js

@@ -21,7 +21,8 @@ import l10nMessages from './index.messages';
 type Props = {
     log: $ElementType<State, 'log'>,
     toggle: typeof LogActions.toggle,
-    copyToClipboard: typeof LogActions.copyToClipboard
+    copyToClipboard: typeof LogActions.copyToClipboard,
+    resetCopyState: typeof LogActions.resetCopyState,
 }
 
 const Wrapper = styled.div`
@@ -98,6 +99,7 @@ const Log = (props: Props): ?React$Element<string> => {
                     maxWidth={285}
                     placement="top"
                     content={<FormattedMessage {...l10nMessages.TR_COPIED} />}
+                    afterVisibleChange={props.resetCopyState}
                 >
 
                     {copyBtn}
@@ -117,5 +119,6 @@ export default connect(
     (dispatch: Dispatch) => ({
         toggle: bindActionCreators(LogActions.toggle, dispatch),
         copyToClipboard: bindActionCreators(LogActions.copyToClipboard, dispatch),
+        resetCopyState: bindActionCreators(LogActions.resetCopyState, dispatch),
     }),
 )(Log);

src/components/Tooltip/index.js

@@ -35,6 +35,7 @@ const Tooltip = ({
     children,
     enterDelayMs,
     defaultVisible = false,
+    ...rest
 }) => (
     <Wrapper className={className}>
         <RcTooltip
@@ -53,6 +54,7 @@ const Tooltip = ({
                     }
                 </ContentWrapper>
             )}
+            {...rest}
         >
             {children}
         </RcTooltip>

src/reducers/LogReducer.js

@@ -49,6 +49,12 @@ export default (state: State = initialState, action: Action): State => {
                 copied: true,
             };
 
+        case LOG.COPY_RESET:
+            return {
+                ...state,
+                copied: false,
+            };
+
         default:
             return state;
     }