Browse Source

fix(dashboards): only display dataset selector when opening the widget modal from dashboards (#30891)

Hides the dataset selector when opening the add widget modal from outside of dashboards (example: from discover). Dataset selector should only be displayed when the user is editing from a dashboard.
edwardgou-sentry 3 years ago
parent
commit
6e1161d86c

+ 4 - 0
static/app/components/modals/addDashboardWidgetModal.tsx

@@ -540,6 +540,7 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
       selectedWidgets,
       onUpdateWidget,
       onAddLibraryWidget,
+      source,
     } = this.props;
     const state = this.state;
     const errors = state.errors;
@@ -627,6 +628,9 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
             </StyledField>
           </DoubleFieldWrapper>
           {organization.features.includes('issues-in-dashboards') &&
+            [DashboardWidgetSource.DASHBOARDS, DashboardWidgetSource.LIBRARY].includes(
+              source
+            ) &&
             state.displayType === DisplayType.TABLE && (
               <React.Fragment>
                 <StyledFieldLabel>{t('Data Set')}</StyledFieldLabel>

+ 29 - 2
tests/js/spec/components/modals/addDashboardWidgetModal.spec.jsx

@@ -1050,7 +1050,7 @@ describe('Modals -> AddDashboardWidgetModal', function () {
   });
 
   describe('Issue Widgets', function () {
-    function mountIssueModal({onAddWidget, onUpdateWidget, widget}) {
+    function mountModalWithRtl({onAddWidget, onUpdateWidget, widget, source}) {
       return reactMountWithTheme(
         <AddDashboardWidgetModal
           Header={stubEl}
@@ -1062,13 +1062,14 @@ describe('Modals -> AddDashboardWidgetModal', function () {
           onUpdateWidget={onUpdateWidget}
           widget={widget}
           closeModal={() => void 0}
+          source={source || types.DashboardWidgetSource.DASHBOARDS}
         />
       );
     }
 
     it('sets widgetType to issues', async function () {
       const onAdd = jest.fn(() => {});
-      const wrapper = mountIssueModal({
+      const wrapper = mountModalWithRtl({
         onAddWidget: onAdd,
         onUpdateWidget: () => undefined,
       });
@@ -1096,5 +1097,31 @@ describe('Modals -> AddDashboardWidgetModal', function () {
       );
       wrapper.unmount();
     });
+
+    it('does not render the dataset selector', async function () {
+      const wrapper = mountModalWithRtl({
+        onAddWidget: () => undefined,
+        onUpdateWidget: () => undefined,
+        source: types.DashboardWidgetSource.DISCOVERV2,
+      });
+      await tick();
+      userEvent.click(screen.getByText('Line Chart'));
+      userEvent.click(screen.getByText('Table'));
+      expect(screen.queryByText('Data Set')).not.toBeInTheDocument();
+      wrapper.unmount();
+    });
+
+    it('renders the dataset selector', function () {
+      const wrapper = mountModalWithRtl({
+        onAddWidget: () => undefined,
+        onUpdateWidget: () => undefined,
+        source: types.DashboardWidgetSource.DASHBOARDS,
+      });
+      userEvent.click(screen.getByText('Line Chart'));
+      userEvent.click(screen.getByText('Table'));
+
+      expect(screen.getByText('Data Set')).toBeInTheDocument();
+      wrapper.unmount();
+    });
   });
 });