Explore: Show all dataFrames in data tab in Inspector (grafana#32161) (…

…grafana#32299)

* Add option to show/download all data

* Add test

* Address feedback

(cherry picked from commit bd7285a)

Co-authored-by: Ivana Huckova <[email protected]>

public/app/features/inspector/InspectDataTab.test.tsx

@@ -0,0 +1,65 @@
+import React, { ComponentProps } from 'react';
+import { FieldType } from '@grafana/data';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InspectDataTab } from './InspectDataTab';
+
+const createProps = (propsOverride?: Partial<ComponentProps<typeof InspectDataTab>>) => {
+  const defaultProps = {
+    isLoading: false,
+    options: {
+      withTransforms: false,
+      withFieldConfig: false,
+    },
+    data: [
+      {
+        name: 'First data frame',
+        fields: [
+          { name: 'time', type: FieldType.time, values: [100, 200, 300] },
+          { name: 'name', type: FieldType.string, values: ['uniqueA', 'b', 'c'] },
+          { name: 'value', type: FieldType.number, values: [1, 2, 3] },
+        ],
+        length: 3,
+      },
+      {
+        name: 'Second data frame',
+        fields: [
+          { name: 'time', type: FieldType.time, values: [400, 500, 600] },
+          { name: 'name', type: FieldType.string, values: ['d', 'e', 'g'] },
+          { name: 'value', type: FieldType.number, values: [4, 5, 6] },
+        ],
+        length: 3,
+      },
+    ],
+  };
+
+  return Object.assign(defaultProps, propsOverride) as ComponentProps<typeof InspectDataTab>;
+};
+
+describe('InspectDataTab', () => {
+  describe('when panel is not passed as prop (Explore)', () => {
+    it('should render InspectDataTab', () => {
+      render(<InspectDataTab {...createProps()} />);
+      expect(screen.getByLabelText(/Panel inspector Data content/i)).toBeInTheDocument();
+    });
+    it('should render Data Option row', () => {
+      render(<InspectDataTab {...createProps()} />);
+      expect(screen.getByText(/Data options/i)).toBeInTheDocument();
+    });
+    it('should show available options', () => {
+      render(<InspectDataTab {...createProps()} />);
+      const dataOptions = screen.getByText(/Data options/i);
+      userEvent.click(dataOptions);
+      expect(screen.getByText(/Show data frame/i)).toBeInTheDocument();
+      expect(screen.getByText(/Download for Excel/i)).toBeInTheDocument();
+    });
+    it('should show available dataFrame options', () => {
+      render(<InspectDataTab {...createProps()} />);
+      const dataOptions = screen.getByText(/Data options/i);
+      userEvent.click(dataOptions);
+      const dataFrameInput = screen.getByRole('textbox', { name: /Select dataframe/i });
+      userEvent.click(dataFrameInput);
+      expect(screen.getByText(/Second data frame/i)).toBeInTheDocument();
+    });
+  });
+});

public/app/features/inspector/InspectDataTab.tsx

@@ -167,18 +167,14 @@ export class InspectDataTab extends PureComponent<Props, State> {
 
   renderDataOptions(dataFrames: DataFrame[]) {
     const { options, onOptionsChange, panel, data } = this.props;
-    if (!panel || !onOptionsChange) {
-      return null;
-    }
     const { transformId, transformationOptions, selectedDataFrame } = this.state;
 
     const styles = getPanelInspectorStyles();
 
-    const panelTransformations = panel.getTransformations();
+    const panelTransformations = panel?.getTransformations();
     const showPanelTransformationsOption =
-      panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time';
-    const showFieldConfigsOption = !panel.plugin?.fieldConfigRegistry.isEmpty();
-    const showDataOptions = showPanelTransformationsOption || showFieldConfigsOption;
+      Boolean(panelTransformations?.length) && (transformId as any) !== 'join by time';
+    const showFieldConfigsOption = panel && !panel.plugin?.fieldConfigRegistry.isEmpty();
 
     let dataSelect = dataFrames;
     if (selectedDataFrame === DataTransformerID.seriesToColumns) {
@@ -194,10 +190,6 @@ export class InspectDataTab extends PureComponent<Props, State> {
 
     const selectableOptions = [...transformationOptions, ...choices];
 
-    if (!showDataOptions) {
-      return null;
-    }
-
     return (
       <QueryOperationRow
         id="Data options"
@@ -206,7 +198,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
         headerElement={<DetailText>{this.getActiveString()}</DetailText>}
         isOpen={false}
       >
-        <div className={styles.options}>
+        <div className={styles.options} data-testid="dataOptions">
           <VerticalGroup spacing="none">
             {data!.length > 1 && (
               <Field label="Show data frame">
@@ -215,12 +207,13 @@ export class InspectDataTab extends PureComponent<Props, State> {
                   value={selectedDataFrame}
                   onChange={this.onDataFrameChange}
                   width={30}
+                  aria-label="Select dataframe"
                 />
               </Field>
             )}
 
             <HorizontalGroup>
-              {showPanelTransformationsOption && (
+              {showPanelTransformationsOption && onOptionsChange && (
                 <Field
                   label="Apply panel transformations"
                   description="Table data is displayed with transformations defined in the panel Transform tab."
@@ -231,7 +224,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
                   />
                 </Field>
               )}
-              {showFieldConfigsOption && (
+              {showFieldConfigsOption && onOptionsChange && (
                 <Field
                   label="Formatted data"
                   description="Table data is formatted with options defined in the Field and Override tabs."