Remove CTA when CTA-action is clicked instead of a /new route #13471

public/app/core/components/Animations/SlideDown.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
+interface Style {
+  transition?: string;
+  overflow?: string;
+}
+
 const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
 // If this is not enough, pass in <SlideDown maxHeight="....
 const defaultDuration = 200;
-const defaultStyle = {
+export const defaultStyle: Style = {
   transition: `max-height ${defaultDuration}ms ease-in-out`,
   overflow: 'hidden',
 };
 
-export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
+export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = defaultStyle }) => {
   // There are 4 main states a Transition can be in:
   // ENTERING, ENTERED, EXITING, EXITED
   // https://reactcommunity.org/react-transition-group/
@@ -25,7 +30,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
       {state => (
         <div
           style={{
-            ...defaultStyle,
+            ...style,
             ...transitionStyles[state],
           }}
         >

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -38,7 +38,7 @@ describe('Render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render CTA if theres are no API keys', () => {
+  it('should render CTA if there are no API keys', () => {
     const { wrapper } = setup({
       apiKeys: getMultipleMockKeys(0),
       apiKeysCount: 0,

public/app/features/api-keys/ApiKeysPage.tsx

@@ -7,8 +7,8 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import SlideDown from 'app/core/components/Animations/SlideDown';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import SlideDown, { defaultStyle as slideDownDefaultStyle } from 'app/core/components/Animations/SlideDown';
 import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
@@ -105,21 +105,24 @@ export class ApiKeysPage extends PureComponent<Props, any> {
   };
 
   renderEmptyList() {
+    const { isAdding } = this.state;
     return (
       <div className="page-container page-body">
-        <EmptyListCTA
-          model={{
-            title: "You haven't added any API Keys yet.",
-            buttonIcon: 'fa fa-plus',
-            buttonLink: '#',
-            onClick: this.onToggleAdding,
-            buttonTitle: ' New API Key',
-            proTip: 'Remember you can provide view-only API access to other applications.',
-            proTipLink: '',
-            proTipLinkTitle: '',
-            proTipTarget: '_blank',
-          }}
-        />
+        {!isAdding && (
+          <EmptyListCTA
+            model={{
+              title: "You haven't added any API Keys yet.",
+              buttonIcon: 'fa fa-plus',
+              buttonLink: '#',
+              onClick: this.onToggleAdding,
+              buttonTitle: ' New API Key',
+              proTip: 'Remember you can provide view-only API access to other applications.',
+              proTipLink: '',
+              proTipLinkTitle: '',
+              proTipTarget: '_blank',
+            }}
+          />
+        )}
         {this.renderAddApiKeyForm()}
       </div>
     );
@@ -127,9 +130,10 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
   renderAddApiKeyForm() {
     const { newApiKey, isAdding } = this.state;
+    const slideDownStyle = isAdding ? slideDownDefaultStyle : { ...slideDownDefaultStyle, transition: 'unset' };
 
     return (
-      <SlideDown in={isAdding}>
+      <SlideDown in={isAdding} style={slideDownStyle}>
         <div className="cta-form">
           <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
             <i className="fa fa-close" />

public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap

@@ -45,6 +45,12 @@ exports[`Render should render API keys table if there are any keys 1`] = `
     </div>
     <Component
       in={false}
+      style={
+        Object {
+          "overflow": "hidden",
+          "transition": "unset",
+        }
+      }
     >
       <div
         className="cta-form"
@@ -245,7 +251,7 @@ exports[`Render should render API keys table if there are any keys 1`] = `
 </div>
 `;
 
-exports[`Render should render CTA if theres are no API keys 1`] = `
+exports[`Render should render CTA if there are no API keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
@@ -270,6 +276,12 @@ exports[`Render should render CTA if theres are no API keys 1`] = `
     />
     <Component
       in={false}
+      style={
+        Object {
+          "overflow": "hidden",
+          "transition": "unset",
+        }
+      }
     >
       <div
         className="cta-form"