fix(ui): Fix API Key headers (#7827)

src/sentry/static/sentry/app/views/settings/organization/apiKeys/organizationApiKeyDetailsView.jsx

@@ -2,9 +2,9 @@ import {browserHistory} from 'react-router';
 import React from 'react';
 
 import {API_SCOPES} from '../../../../constants';
+import {addErrorMessage, addSuccessMessage} from '../../../../actionCreators/indicator';
 import {t} from '../../../../locale';
 import ApiForm from '../../../../components/forms/apiForm';
-import IndicatorStore from '../../../../stores/indicatorStore';
 import MultipleCheckboxField from '../../../../components/forms/multipleCheckboxField';
 import AsyncView from '../../../asyncView';
 import SentryTypes from '../../../../proptypes';
@@ -52,11 +52,20 @@ class OrganizationApiKeyDetailsView extends AsyncView {
   }
 
   handleSubmitSuccess = () => {
-    IndicatorStore.add(t('Saved changes'), 'success');
+    addSuccessMessage('Saved changes');
+
+    // Go back to API list
+    browserHistory.push(
+      recreateRoute('api-keys/', {
+        stepBack: -1,
+        routes: this.props.routes,
+        params: this.props.params,
+      })
+    );
   };
 
   handleSubmitError = () => {
-    IndicatorStore.add(t('Unable to save changes. Please try again.'), 'error');
+    addErrorMessage('Unable to save changes. Please try again.');
   };
 
   renderBody() {

src/sentry/static/sentry/app/views/settings/organization/apiKeys/organizationApiKeysList.jsx

@@ -1,7 +1,6 @@
 import {Box, Flex} from 'grid-emotion';
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
 
 import {t, tct} from '../../../../locale';
 import Button from '../../../../components/buttons/button';
@@ -11,16 +10,9 @@ import Link from '../../../../components/link';
 import LinkWithConfirmation from '../../../../components/linkWithConfirmation';
 import {Panel, PanelBody, PanelHeader, PanelItem} from '../../../../components/panels';
 import SettingsPageHeader from '../../components/settingsPageHeader';
+import TextBlock from '../../components/text/textBlock';
 import recreateRoute from '../../../../utils/recreateRoute';
 
-const PlusIcon = styled.span`
-  margin-right: 4px;
-`;
-
-const TextBlock = styled.p`
-  line-height: 1.8;
-`;
-
 class OrganizationApiKeysList extends React.Component {
   static propTypes = {
     routes: PropTypes.array,
@@ -35,8 +27,15 @@ class OrganizationApiKeysList extends React.Component {
     let hasKeys = keys && keys.length;
 
     let action = (
-      <Button priority="link" busy={busy} disabled={busy} onClick={onAddApiKey}>
-        <PlusIcon className="icon-plus" /> {t('New API Key')}
+      <Button
+        priority="primary"
+        size="small"
+        icon="icon-circle-add"
+        busy={busy}
+        disabled={busy}
+        onClick={onAddApiKey}
+      >
+        {t('New API Key')}
       </Button>
     );
     return (
@@ -64,21 +63,19 @@ class OrganizationApiKeysList extends React.Component {
         </div>
 
         <Panel>
-          <PanelHeader disablePadding={true}>
-            <Flex align="center">
-              <Flex align="center" flex="1">
-                <Box px={2} flex="1">
-                  {t('Name')}
-                </Box>
-                <Box px={2} flex="2">
-                  {t('Key')}
-                </Box>
-              </Flex>
-
-              <Box px={2} w={100}>
-                {t('Actions')}
+          <PanelHeader disablePadding={true} align="center">
+            <Flex align="center" flex="1">
+              <Box px={2} flex="1">
+                {t('Name')}
+              </Box>
+              <Box px={2} flex="2">
+                {t('Key')}
               </Box>
             </Flex>
+
+            <Box px={2} w={100}>
+              {t('Actions')}
+            </Box>
           </PanelHeader>
 
           <PanelBody>

src/sentry/static/sentry/app/views/settings/organization/apiKeys/organizationApiKeysView.jsx

@@ -2,6 +2,8 @@ import {browserHistory} from 'react-router';
 import React from 'react';
 
 import {Client} from '../../../../api';
+import {addSuccessMessage} from '../../../../actionCreators/indicator';
+import {t} from '../../../../locale';
 import LazyLoad from '../../../../components/lazyLoad';
 import AsyncView from '../../../asyncView';
 import SentryTypes from '../../../../proptypes';
@@ -53,6 +55,7 @@ class OrganizationApiKeysView extends AsyncView {
             routes: this.props.routes,
           })
         );
+        addSuccessMessage(t(`Created a new API key "${data.label}"`));
       },
       error: () => {
         this.setState({busy: false});

tests/js/spec/views/__snapshots__/organizationApiKeysList.spec.jsx.snap

@@ -48,13 +48,11 @@ exports[`OrganizationApiKeysList renders 1`] = `
         <Button
           busy={undefined}
           disabled={false}
+          icon="icon-circle-add"
           onClick={undefined}
-          priority="link"
+          priority="primary"
+          size="small"
         >
-          <PlusIcon
-            className="icon-plus"
-          />
-           
           New API Key
         </Button>
       }
@@ -85,10 +83,12 @@ exports[`OrganizationApiKeysList renders 1`] = `
                 <div>
                   <Button
                     disabled={false}
-                    priority="link"
+                    icon="icon-circle-add"
+                    priority="primary"
+                    size="small"
                   >
                     <button
-                      className="button button-link"
+                      className="button button-primary button-sm"
                       disabled={false}
                       onClick={[Function]}
                       role="button"
@@ -105,14 +105,50 @@ exports[`OrganizationApiKeysList renders 1`] = `
                             className="button-label css-5ipae5"
                             is={null}
                           >
-                            <PlusIcon
-                              className="icon-plus"
+                            <Icon
+                              size="small"
                             >
-                              <span
-                                className="icon-plus css-d6k0zi-PlusIcon css-q7bmn80"
-                              />
-                            </PlusIcon>
-                             
+                              <Base
+                                className="css-11bwulm-Icon css-1vxxnb60"
+                                size="small"
+                              >
+                                <div
+                                  className="css-11bwulm-Icon css-1vxxnb60"
+                                  is={null}
+                                  size="small"
+                                >
+                                  <StyledInlineSvg
+                                    size="12px"
+                                    src="icon-circle-add"
+                                  >
+                                    <InlineSvg
+                                      className="css-1ov3rcq-StyledInlineSvg css-1vxxnb61"
+                                      size="12px"
+                                      src="icon-circle-add"
+                                    >
+                                      <StyledSvg
+                                        className="css-1ov3rcq-StyledInlineSvg css-1vxxnb61"
+                                        height="12px"
+                                        viewBox={Object {}}
+                                        width="12px"
+                                      >
+                                        <svg
+                                          className="css-1vxxnb61 css-1rlza0i-StyledSvg css-adkcw30"
+                                          height="12px"
+                                          viewBox={Object {}}
+                                          width="12px"
+                                        >
+                                          <use
+                                            href="#test"
+                                            xlinkHref="#test"
+                                          />
+                                        </svg>
+                                      </StyledSvg>
+                                    </InlineSvg>
+                                  </StyledInlineSvg>
+                                </div>
+                              </Base>
+                            </Icon>
                             New API Key
                           </div>
                         </Base>
@@ -127,44 +163,48 @@ exports[`OrganizationApiKeysList renders 1`] = `
       </Wrapper>
     </SettingsPageHeading>
     <TextBlock>
-      <p
-        className="css-1eb9fn5-TextBlock css-q7bmn81"
+      <Component
+        className="css-ms59cf-TextBlock css-1gwew8k0"
       >
-        <span
-          key="5"
+        <div
+          className="css-ms59cf-TextBlock css-1gwew8k0"
         >
           <span
-            key="0"
-          >
-            API keys grant access to the 
-          </span>
-          <ExternalLink
-            href="https://docs.sentry.io/hosted/api/"
-            key="2"
-            rel="noreferrer noopener"
-            target="_blank"
+            key="5"
           >
-            <a
+            <span
+              key="0"
+            >
+              API keys grant access to the 
+            </span>
+            <ExternalLink
               href="https://docs.sentry.io/hosted/api/"
+              key="2"
               rel="noreferrer noopener"
               target="_blank"
             >
-              <span
-                key="1"
+              <a
+                href="https://docs.sentry.io/hosted/api/"
+                rel="noreferrer noopener"
+                target="_blank"
               >
-                developer web API
-              </span>
-            </a>
-          </ExternalLink>
-          <span
-            key="3"
-          >
-            .
+                <span
+                  key="1"
+                >
+                  developer web API
+                </span>
+              </a>
+            </ExternalLink>
+            <span
+              key="3"
+            >
+              .
           If you're looking to configure a Sentry client, you'll need a
           client key which is available in your project settings.
+            </span>
           </span>
-        </span>
-      </p>
+        </div>
+      </Component>
     </TextBlock>
     <div
       className="alert alert-block alert-info"
@@ -204,12 +244,15 @@ exports[`OrganizationApiKeysList renders 1`] = `
           className="css-wfa8ap-StyledPanel css-5bw71w0"
         >
           <PanelHeader
+            align="center"
             disablePadding={true}
           >
             <StyledPanelHeader
+              align="center"
               disablePadding={true}
             >
               <Component
+                align="center"
                 className="css-18fb6u1-StyledPanelHeader css-1t1cqk30"
                 disablePadding={true}
               >
@@ -229,85 +272,71 @@ exports[`OrganizationApiKeysList renders 1`] = `
                     >
                       <Flex
                         align="center"
+                        flex="1"
                       >
                         <Base
                           align="center"
-                          className="css-5ipae5"
+                          className="css-1yrw3fm"
+                          flex="1"
                         >
                           <div
-                            className="css-5ipae5"
+                            className="css-1yrw3fm"
                             is={null}
                           >
-                            <Flex
-                              align="center"
+                            <Box
                               flex="1"
+                              px={2}
                             >
                               <Base
-                                align="center"
-                                className="css-1yrw3fm"
+                                className="css-pcjga5"
                                 flex="1"
+                                px={2}
                               >
                                 <div
-                                  className="css-1yrw3fm"
+                                  className="css-pcjga5"
                                   is={null}
                                 >
-                                  <Box
-                                    flex="1"
-                                    px={2}
-                                  >
-                                    <Base
-                                      className="css-pcjga5"
-                                      flex="1"
-                                      px={2}
-                                    >
-                                      <div
-                                        className="css-pcjga5"
-                                        is={null}
-                                      >
-                                        Name
-                                      </div>
-                                    </Base>
-                                  </Box>
-                                  <Box
-                                    flex="2"
-                                    px={2}
-                                  >
-                                    <Base
-                                      className="css-1dp2adt"
-                                      flex="2"
-                                      px={2}
-                                    >
-                                      <div
-                                        className="css-1dp2adt"
-                                        is={null}
-                                      >
-                                        Key
-                                      </div>
-                                    </Base>
-                                  </Box>
+                                  Name
                                 </div>
                               </Base>
-                            </Flex>
+                            </Box>
                             <Box
+                              flex="2"
                               px={2}
-                              w={100}
                             >
                               <Base
-                                className="css-j9rhnd"
+                                className="css-1dp2adt"
+                                flex="2"
                                 px={2}
-                                w={100}
                               >
                                 <div
-                                  className="css-j9rhnd"
+                                  className="css-1dp2adt"
                                   is={null}
                                 >
-                                  Actions
+                                  Key
                                 </div>
                               </Base>
                             </Box>
                           </div>
                         </Base>
                       </Flex>
+                      <Box
+                        px={2}
+                        w={100}
+                      >
+                        <Base
+                          className="css-j9rhnd"
+                          px={2}
+                          w={100}
+                        >
+                          <div
+                            className="css-j9rhnd"
+                            is={null}
+                          >
+                            Actions
+                          </div>
+                        </Base>
+                      </Box>
                     </div>
                   </Base>
                 </Flex>