feat(explore): Integrate dataset panel with Folders feature (#33104)

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx

@@ -59,6 +59,48 @@ const datasource: IDatasource = {
   datasource_name: 'table1',
 };
 
+const datasourceWithFolders: IDatasource = {
+  ...datasource,
+  folders: [
+    {
+      name: 'Test folder',
+      type: 'folder',
+      uuid: '1',
+      children: [
+        {
+          name: 'Test nested folder',
+          type: 'folder',
+          uuid: '1.1',
+          children: [
+            {
+              type: 'metric',
+              uuid: metrics[0].uuid,
+              name: metrics[0].metric_name,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Second test folder',
+      type: 'folder',
+      uuid: '2',
+      children: [
+        {
+          type: 'column',
+          uuid: columns[0].uuid,
+          name: columns[0].column_name,
+        },
+        {
+          type: 'column',
+          uuid: columns[1].uuid,
+          name: columns[1].column_name,
+        },
+      ],
+    },
+  ],
+};
+
 const mockUser = {
   createdOn: '2021-04-27T18:12:38.952304',
   email: 'admin',
@@ -90,6 +132,18 @@ const props: DatasourcePanelProps = {
   width: 300,
 };
 
+const propsWithFolders = {
+  ...props,
+  datasource: datasourceWithFolders,
+  controls: {
+    ...props.controls,
+    datasource: {
+      ...props.controls.datasource,
+      datasource: datasourceWithFolders,
+    },
+  },
+};
+
 const metricProps = {
   savedMetrics: [],
   columns: [],
@@ -125,13 +179,9 @@ test('should render the metrics', async () => {
     </ExploreContainer>,
     { useRedux: true, useDnd: true },
   );
-  const metricsNum = metrics.length;
   metrics.forEach(metric =>
     expect(screen.getByText(metric.metric_name)).toBeInTheDocument(),
   );
-  expect(
-    await screen.findByText(`Showing ${metricsNum} of ${metricsNum}`),
-  ).toBeInTheDocument();
 });
 
 test('should render the columns', async () => {
@@ -142,13 +192,9 @@ test('should render the columns', async () => {
     </ExploreContainer>,
     { useRedux: true, useDnd: true },
   );
-  const columnsNum = columns.length;
   columns.forEach(col =>
     expect(screen.getByText(col.column_name)).toBeInTheDocument(),
   );
-  expect(
-    await screen.findByText(`Showing ${columnsNum} of ${columnsNum}`),
-  ).toBeInTheDocument();
 });
 
 describe('DatasourcePanel', () => {
@@ -310,3 +356,139 @@ test('should render only droppable metrics and columns', async () => {
 
   unmount();
 });
+
+test('Renders with custom folders', () => {
+  render(
+    <ExploreContainer>
+      <DatasourcePanel {...propsWithFolders} />
+      <DndMetricSelect {...metricProps} />
+    </ExploreContainer>,
+    {
+      useRedux: true,
+      useDnd: true,
+    },
+  );
+
+  expect(screen.getByText('Test folder')).toBeInTheDocument();
+  expect(screen.getByText('Test nested folder')).toBeInTheDocument();
+  expect(screen.getByText('Second test folder')).toBeInTheDocument();
+  expect(screen.getByText('Metrics')).toBeInTheDocument();
+  expect(screen.getByText('Columns')).toBeInTheDocument();
+
+  columns.forEach(col => {
+    expect(screen.getByText(col.column_name)).toBeInTheDocument();
+  });
+
+  metrics.forEach(metric => {
+    expect(screen.getByText(metric.metric_name)).toBeInTheDocument();
+  });
+
+  expect(screen.getAllByTestId('DatasourcePanelDragOption').length).toEqual(5);
+  expect(screen.getAllByTestId('datasource-panel-divider').length).toEqual(3);
+});
+
+test('Collapse folders', () => {
+  render(
+    <ExploreContainer>
+      <DatasourcePanel {...propsWithFolders} />
+      <DndMetricSelect {...metricProps} />
+    </ExploreContainer>,
+    {
+      useRedux: true,
+      useDnd: true,
+    },
+  );
+
+  userEvent.click(screen.getByText('Test folder'));
+
+  expect(screen.getByText('Test folder')).toBeInTheDocument();
+  expect(screen.queryByText('Test nested folder')).not.toBeInTheDocument();
+  expect(screen.getByText('Second test folder')).toBeInTheDocument();
+  expect(screen.getByText('Metrics')).toBeInTheDocument();
+  expect(screen.getByText('Columns')).toBeInTheDocument();
+
+  expect(screen.queryByText(metrics[0].metric_name)).not.toBeInTheDocument();
+
+  userEvent.click(screen.getByText('Test folder'));
+
+  expect(screen.getByText('Test folder')).toBeInTheDocument();
+  expect(screen.getByText('Test nested folder')).toBeInTheDocument();
+  expect(screen.getByText('Second test folder')).toBeInTheDocument();
+  expect(screen.getByText('Metrics')).toBeInTheDocument();
+  expect(screen.getByText('Columns')).toBeInTheDocument();
+
+  expect(screen.getByText(metrics[0].metric_name)).toBeInTheDocument();
+});
+
+test('Default Metrics and Columns folders dont render when all metrics and columns are assigned to custom folders', () => {
+  const datasourceWithFullFolders: IDatasource = {
+    ...datasource,
+    folders: [
+      {
+        name: 'Test folder',
+        type: 'folder',
+        uuid: '1',
+        children: [
+          {
+            name: 'Test nested folder',
+            type: 'folder',
+            uuid: '1.1',
+            children: metrics.map(m => ({
+              type: 'metric' as const,
+              uuid: m.uuid,
+              name: m.metric_name,
+            })),
+          },
+        ],
+      },
+      {
+        name: 'Second test folder',
+        type: 'folder',
+        uuid: '2',
+        children: columns.map(c => ({
+          type: 'column',
+          uuid: c.uuid,
+          name: c.column_name,
+        })),
+      },
+    ],
+  };
+  const propsWithFullFolders = {
+    ...props,
+    datasource: datasourceWithFullFolders,
+    controls: {
+      ...props.controls,
+      datasource: {
+        ...props.controls.datasource,
+        datasource: datasourceWithFullFolders,
+      },
+    },
+  };
+  render(
+    <ExploreContainer>
+      <DatasourcePanel {...propsWithFullFolders} />
+      <DndMetricSelect {...metricProps} />
+    </ExploreContainer>,
+    {
+      useRedux: true,
+      useDnd: true,
+    },
+  );
+
+  expect(screen.getByText('Test folder')).toBeInTheDocument();
+  expect(screen.getByText('Test nested folder')).toBeInTheDocument();
+  expect(screen.getByText('Second test folder')).toBeInTheDocument();
+  expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+  expect(screen.queryByText('Columns')).not.toBeInTheDocument();
+
+  columns.forEach(col => {
+    expect(screen.getByText(col.column_name)).toBeInTheDocument();
+  });
+
+  metrics.forEach(metric => {
+    expect(screen.getByText(metric.metric_name)).toBeInTheDocument();
+  });
+
+  expect(screen.getAllByTestId('DatasourcePanelDragOption').length).toEqual(5);
+  expect(screen.getAllByTestId('datasource-panel-divider').length).toEqual(1);
+});