ref(issue-views): Implement FE packaging logic for issue views (#92053)

Adds disabled states and upsells to issue views that reflect our
packaging logic. Controlled by the `organizations:issue-views` flag.

Exhaustive list of changes if feature is not enabled: 
* All Views: The `+ Create View` button in the header has been disabled 
* All Views: The `+ Create View` button in the "My Views" empty state
has been disabled
* All Views: The rename and duplicate options in the issue view tables
have been removed
* Taxonomy and Feed Views: The `Save As` button has been disabled 
* Issue View: the `Save` button (and its dropdown) has been disabled 

Still waiting on upsell copy and designs.

Author: MichaelSun48

static/app/views/issueList/issueViews/issueViewSaveButton.spec.tsx

@@ -16,6 +16,10 @@ import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import {IssueViewSaveButton} from 'sentry/views/issueList/issueViews/issueViewSaveButton';
 import {IssueSortOptions} from 'sentry/views/issueList/utils';
 
+const organization = OrganizationFixture({
+  features: ['issue-views'],
+});
+
 const defaultProps = {
   query: 'is:unresolved',
   sort: IssueSortOptions.DATE,
@@ -73,6 +77,7 @@ describe('IssueViewSaveButton', function () {
       </Fragment>,
       {
         initialRouterConfig: initialRouterConfigFeed,
+        organization,
       }
     );
 
@@ -124,6 +129,7 @@ describe('IssueViewSaveButton', function () {
       </Fragment>,
       {
         initialRouterConfig: initialRouterConfigView,
+        organization,
       }
     );
 
@@ -183,6 +189,7 @@ describe('IssueViewSaveButton', function () {
           },
         },
       },
+      organization,
     });
 
     // Should show unsaved changes
@@ -231,8 +238,8 @@ describe('IssueViewSaveButton', function () {
       {
         organization: OrganizationFixture({
           access: ['org:read'],
+          features: ['issue-views'],
         }),
-
         initialRouterConfig: initialRouterConfigView,
       }
     );
@@ -288,6 +295,7 @@ describe('IssueViewSaveButton', function () {
           },
         },
       },
+      organization,
     });
 
     await screen.findByTestId('save-button-unsaved');
@@ -311,4 +319,13 @@ describe('IssueViewSaveButton', function () {
     // The save button should no longer show unsaved changes
     expect(screen.getByTestId('save-button')).toBeInTheDocument();
   });
+
+  it('shows a feature disabled hovercard when the feature is disabled', async function () {
+    render(<IssueViewSaveButton {...defaultProps} />, {
+      organization: OrganizationFixture({
+        features: [],
+      }),
+    });
+    expect(await screen.findByRole('button', {name: 'Save As'})).toBeDisabled();
+  });
 });

static/app/views/issueList/issueViews/issueViewSaveButton.tsx

@@ -3,9 +3,12 @@ import styled from '@emotion/styled';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {openModal} from 'sentry/actionCreators/modal';
+import Feature from 'sentry/components/acl/feature';
+import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {Hovercard} from 'sentry/components/hovercard';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -47,7 +50,6 @@ function SegmentedIssueViewSaveButton({
   const canEdit = view
     ? canEditIssueView({user, groupSearchView: view, organization})
     : false;
-
   const discardUnsavedChanges = () => {
     if (view) {
       trackAnalytics('issue_views.reset.clicked', {organization});
@@ -77,52 +79,72 @@ function SegmentedIssueViewSaveButton({
   };
 
   return (
-    <ButtonBar merged>
-      <PrimarySaveButton
-        priority={buttonPriority}
-        data-test-id={hasUnsavedChanges ? 'save-button-unsaved' : 'save-button'}
-        onClick={() => {
-          if (canEdit) {
-            saveView();
-          } else {
-            openCreateIssueViewModal();
+    <Feature
+      features={'organizations:issue-views'}
+      hookName="feature-disabled:issue-views"
+      renderDisabled={props => (
+        <Hovercard
+          body={
+            <FeatureDisabled
+              features={props.features}
+              hideHelpToggle
+              featureName={t('Issue Views')}
+            />
           }
-        }}
-        disabled={isSaving}
-      >
-        {canEdit ? t('Save') : t('Save As')}
-      </PrimarySaveButton>
-      <DropdownMenu
-        items={[
-          {
-            key: 'reset',
-            label: t('Reset'),
-            disabled: !hasUnsavedChanges,
-            onAction: () => {
-              discardUnsavedChanges();
-            },
-          },
-          {
-            key: 'save-as',
-            label: t('Save as new view'),
-            onAction: () => {
-              openCreateIssueViewModal();
-            },
-            hidden: !canEdit,
-          },
-        ]}
-        trigger={props => (
-          <DropdownTrigger
-            {...props}
-            disabled={isSaving}
-            icon={<IconChevron direction="down" />}
-            aria-label={t('More save options')}
+        >
+          {typeof props.children === 'function' ? props.children(props) : props.children}
+        </Hovercard>
+      )}
+    >
+      {({hasFeature}) => (
+        <ButtonBar merged>
+          <PrimarySaveButton
             priority={buttonPriority}
+            data-test-id={hasUnsavedChanges ? 'save-button-unsaved' : 'save-button'}
+            onClick={() => {
+              if (canEdit) {
+                saveView();
+              } else {
+                openCreateIssueViewModal();
+              }
+            }}
+            disabled={isSaving || !hasFeature}
+          >
+            {canEdit ? t('Save') : t('Save As')}
+          </PrimarySaveButton>
+          <DropdownMenu
+            items={[
+              {
+                key: 'reset',
+                label: t('Reset'),
+                disabled: !hasUnsavedChanges,
+                onAction: () => {
+                  discardUnsavedChanges();
+                },
+              },
+              {
+                key: 'save-as',
+                label: t('Save as new view'),
+                onAction: () => {
+                  openCreateIssueViewModal();
+                },
+                hidden: !canEdit,
+              },
+            ]}
+            trigger={props => (
+              <DropdownTrigger
+                {...props}
+                disabled={!hasFeature || isSaving}
+                icon={<IconChevron direction="down" />}
+                aria-label={t('More save options')}
+                priority={buttonPriority}
+              />
+            )}
+            position="bottom-end"
           />
-        )}
-        position="bottom-end"
-      />
-    </ButtonBar>
+        </ButtonBar>
+      )}
+    </Feature>
   );
 }
 
@@ -150,9 +172,35 @@ export function IssueViewSaveButton({query, sort}: IssueViewSaveButtonProps) {
 
   if (!viewId) {
     return (
-      <Button priority="primary" onClick={openCreateIssueViewModal}>
-        {t('Save As')}
-      </Button>
+      <Feature
+        features={'organizations:issue-views'}
+        hookName="feature-disabled:issue-views"
+        renderDisabled={props => (
+          <Hovercard
+            body={
+              <FeatureDisabled
+                features={props.features}
+                hideHelpToggle
+                featureName={t('Issue Views')}
+              />
+            }
+          >
+            {typeof props.children === 'function'
+              ? props.children(props)
+              : props.children}
+          </Hovercard>
+        )}
+      >
+        {({hasFeature}) => (
+          <Button
+            priority="primary"
+            onClick={openCreateIssueViewModal}
+            disabled={!hasFeature}
+          >
+            {t('Save As')}
+          </Button>
+        )}
+      </Feature>
     );
   }
 

static/app/views/issueList/issueViews/issueViewsList/issueViewsList.spec.tsx

@@ -15,7 +15,7 @@ import ConfigStore from 'sentry/stores/configStore';
 import IssueViewsList from 'sentry/views/issueList/issueViews/issueViewsList/issueViewsList';
 
 const organization = OrganizationFixture({
-  features: ['enforce-stacked-navigation'],
+  features: ['enforce-stacked-navigation', 'issue-views'],
 });
 
 describe('IssueViewsList', function () {

static/app/views/issueList/issueViews/issueViewsList/issueViewsList.tsx

@@ -1,9 +1,12 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import Feature from 'sentry/components/acl/feature';
+import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {Hovercard} from 'sentry/components/hovercard';
 import * as Layout from 'sentry/components/layouts/thirds';
 import Pagination from 'sentry/components/pagination';
 import Redirect from 'sentry/components/redirect';
@@ -229,20 +232,42 @@ function NoViewsBanner({
           'Your haven’t saved any issue views yet — saving views makes it easier to return to your most frequent search queries, like high priority, assigned to you, or most recent.'
         )}
       </BannerText>
-      <BannerAddViewButton
-        priority="primary"
-        icon={<IconAdd />}
-        size="sm"
-        onClick={() => {
-          trackAnalytics('issue_views.table.banner_create_view_clicked', {
-            organization,
-          });
-          handleCreateView();
-        }}
-        disabled={isCreatingView}
+      <Feature
+        features={'organizations:issue-views'}
+        hookName="feature-disabled:issue-views"
+        renderDisabled={props => (
+          <Hovercard
+            body={
+              <FeatureDisabled
+                features={props.features}
+                hideHelpToggle
+                featureName={t('Issue Views')}
+              />
+            }
+          >
+            {typeof props.children === 'function'
+              ? props.children(props)
+              : props.children}
+          </Hovercard>
+        )}
       >
-        {t('Create View')}
-      </BannerAddViewButton>
+        {({hasFeature}) => (
+          <BannerAddViewButton
+            priority="primary"
+            icon={<IconAdd />}
+            size="sm"
+            onClick={() => {
+              trackAnalytics('issue_views.table.banner_create_view_clicked', {
+                organization,
+              });
+              handleCreateView();
+            }}
+            disabled={!hasFeature || isCreatingView}
+          >
+            {t('Create View')}
+          </BannerAddViewButton>
+        )}
+      </Feature>
     </Banner>
   );
 }
@@ -370,21 +395,44 @@ export default function IssueViewsList() {
                   {t('Give Feedback')}
                 </Button>
               ) : null}
-              <Button
-                priority="primary"
-                icon={<IconAdd />}
-                size="sm"
-                disabled={isCreatingView}
-                busy={isCreatingView}
-                onClick={() => {
-                  trackAnalytics('issue_views.table.create_view_clicked', {
-                    organization,
-                  });
-                  handleCreateView();
-                }}
+
+              <Feature
+                features={'organizations:issue-views'}
+                hookName="feature-disabled:issue-views"
+                renderDisabled={props => (
+                  <Hovercard
+                    body={
+                      <FeatureDisabled
+                        features={props.features}
+                        hideHelpToggle
+                        featureName={t('Issue Views')}
+                      />
+                    }
+                  >
+                    {typeof props.children === 'function'
+                      ? props.children(props)
+                      : props.children}
+                  </Hovercard>
+                )}
               >
-                {t('Create View')}
-              </Button>
+                {({hasFeature}) => (
+                  <Button
+                    priority="primary"
+                    icon={<IconAdd />}
+                    size="sm"
+                    disabled={!hasFeature || isCreatingView}
+                    busy={isCreatingView}
+                    onClick={() => {
+                      trackAnalytics('issue_views.table.create_view_clicked', {
+                        organization,
+                      });
+                      handleCreateView();
+                    }}
+                  >
+                    {t('Create View')}
+                  </Button>
+                )}
+              </Feature>
             </ButtonBar>
           </Layout.HeaderActions>
         </Layout.Header>