fix(alert): Fix feature permissions on 'Create Alert' button (#21124)

* fixed hovercard

* style(): Auto eslint fix

* update reactnode

Co-authored-by: Mark Story <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mark Story <[email protected]>

Author: 3 people

src/sentry/static/sentry/app/views/eventsV2/resultsHeader.tsx

@@ -5,9 +5,6 @@ import styled from '@emotion/styled';
 import {Organization, SavedQuery} from 'app/types';
 import {fetchSavedQuery} from 'app/actionCreators/discoverSavedQueries';
 import {Client} from 'app/api';
-import Feature from 'app/components/acl/feature';
-import FeatureDisabled from 'app/components/acl/featureDisabled';
-import Hovercard from 'app/components/hovercard';
 import TimeSince from 'app/components/timeSince';
 import {t} from 'app/locale';
 import withApi from 'app/utils/withApi';
@@ -97,21 +94,6 @@ class ResultsHeader extends React.Component<Props, State> {
     } = this.props;
     const {savedQuery, loading} = this.state;
 
-    const renderDisabled = p => (
-      <Hovercard
-        body={
-          <FeatureDisabled
-            features={p.features}
-            hideHelpToggle
-            message={t('Discover queries are disabled')}
-            featureName={t('Discover queries')}
-          />
-        }
-      >
-        {p.children(p)}
-      </Hovercard>
-    );
-
     return (
       <Layout.Header>
         <Layout.HeaderContent>
@@ -128,25 +110,16 @@ class ResultsHeader extends React.Component<Props, State> {
           {this.renderAuthor()}
         </Layout.HeaderContent>
         <Layout.HeaderActions>
-          <Feature
+          <SavedQueryButtonGroup
+            location={location}
             organization={organization}
-            features={['discover-query']}
-            hookName="feature-disabled:discover-saved-query-create"
-            renderDisabled={renderDisabled}
-          >
-            {({hasFeature}) => (
-              <SavedQueryButtonGroup
-                location={location}
-                organization={organization}
-                eventView={eventView}
-                savedQuery={savedQuery}
-                savedQueryLoading={loading}
-                disabled={!hasFeature || (errorCode >= 400 && errorCode < 500)}
-                updateCallback={() => this.fetchData()}
-                onIncompatibleAlertQuery={onIncompatibleAlertQuery}
-              />
-            )}
-          </Feature>
+            eventView={eventView}
+            savedQuery={savedQuery}
+            savedQueryLoading={loading}
+            disabled={errorCode >= 400 && errorCode < 500}
+            updateCallback={() => this.fetchData()}
+            onIncompatibleAlertQuery={onIncompatibleAlertQuery}
+          />
         </Layout.HeaderActions>
       </Layout.Header>
     );

src/sentry/static/sentry/app/views/eventsV2/savedQuery/index.tsx

@@ -11,6 +11,8 @@ import Button from 'app/components/button';
 import DropdownButton from 'app/components/dropdownButton';
 import DropdownControl from 'app/components/dropdownControl';
 import Feature from 'app/components/acl/feature';
+import FeatureDisabled from 'app/components/acl/featureDisabled';
+import Hovercard from 'app/components/hovercard';
 import Input from 'app/components/forms/input';
 import space from 'app/styles/space';
 import {IconDelete} from 'app/icons';
@@ -204,8 +206,7 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
     });
   };
 
-  renderButtonSaveAs() {
-    const {disabled} = this.props;
+  renderButtonSaveAs(disabled: boolean) {
     const {queryName} = this.state;
     /**
      * For a great UX, we should focus on `ButtonSaveInput` when `ButtonSave`
@@ -252,7 +253,7 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
     );
   }
 
-  renderButtonSave() {
+  renderButtonSave(disabled: boolean) {
     const {isNewQuery, isEditingQuery} = this.state;
 
     // Existing query that hasn't been modified.
@@ -270,21 +271,21 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
           <Button
             onClick={this.handleUpdateQuery}
             data-test-id="discover2-savedquery-button-update"
-            disabled={this.props.disabled}
+            disabled={disabled}
           >
             <IconUpdate />
             {t('Save Changes')}
           </Button>
-          {this.renderButtonSaveAs()}
+          {this.renderButtonSaveAs(disabled)}
         </React.Fragment>
       );
     }
 
     // Is a new query enable saveas
-    return this.renderButtonSaveAs();
+    return this.renderButtonSaveAs(disabled);
   }
 
-  renderButtonDelete() {
+  renderButtonDelete(disabled: boolean) {
     const {isNewQuery} = this.state;
 
     if (isNewQuery) {
@@ -295,7 +296,7 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
       <Button
         data-test-id="discover2-savedquery-button-delete"
         onClick={this.handleDeleteQuery}
-        disabled={this.props.disabled}
+        disabled={disabled}
         icon={<IconDelete />}
       />
     );
@@ -319,13 +320,42 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
 
   render() {
     const {organization} = this.props;
+
+    const renderDisabled = p => (
+      <Hovercard
+        body={
+          <FeatureDisabled
+            features={p.features}
+            hideHelpToggle
+            message={t('Discover queries are disabled')}
+            featureName={t('Discover queries')}
+          />
+        }
+      >
+        {p.children(p)}
+      </Hovercard>
+    );
+
+    const renderQueryButton = (renderFunc: (disabled: boolean) => React.ReactNode) => {
+      return (
+        <Feature
+          organization={organization}
+          features={['discover-query']}
+          hookName="feature-disabled:discover-saved-query-create"
+          renderDisabled={renderDisabled}
+        >
+          {({hasFeature}) => renderFunc(!hasFeature || this.props.disabled)}
+        </Feature>
+      );
+    };
+
     return (
       <ButtonGroup>
-        {this.renderButtonSave()}
+        {renderQueryButton(disabled => this.renderButtonSave(disabled))}
         <Feature organization={organization} features={['incidents']}>
           {({hasFeature}) => hasFeature && this.renderButtonCreateAlert()}
         </Feature>
-        {this.renderButtonDelete()}
+        {renderQueryButton(disabled => this.renderButtonDelete(disabled))}
       </ButtonGroup>
     );
   }

tests/js/spec/views/eventsV2/savedQuery/index.spec.jsx

@@ -36,7 +36,7 @@ function generateWrappedComponent(
 
 describe('EventsV2 > SaveQueryButtonGroup', function () {
   // Organization + Location does not affect state in this component
-  const organization = TestStubs.Organization();
+  const organization = TestStubs.Organization({features: ['discover-query']});
   const location = {
     pathname: '/organization/eventsv2/',
     query: {},