feat: modal of drill to detail on the dashboard

superset-frontend/packages/superset-ui-core/src/query/types/Query.ts

@@ -398,4 +398,8 @@ export enum ContributionType {
   Column = 'column',
 }
 
+export type DatasourceSamplesQuery = {
+  filters?: QueryObjectFilterClause[];
+};
+
 export default {};

superset-frontend/src/components/Chart/chartAction.js

@@ -598,10 +598,10 @@ export function refreshChart(chartKey, force, dashboardId) {
   };
 }
 
-export const getDatasetSamples = async (datasetId, force) => {
+export const getDatasetSamples = async (datasetId, force, jsonPayload) => {
   const endpoint = `/api/v1/dataset/${datasetId}/samples?force=${force}`;
   try {
-    const response = await SupersetClient.get({ endpoint });
+    const response = await SupersetClient.post({ endpoint, jsonPayload });
     return response.json.result;
   } catch (err) {
     const clientError = await getClientErrorObject(err);

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -94,6 +94,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   formData,
   width,
   height,
+  datasource,
 }) => {
   const dispatch = useDispatch();
   const uiConfig = useUiConfig();
@@ -222,6 +223,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
                 isDescriptionExpanded={isExpanded}
                 chartStatus={chartStatus}
                 formData={formData}
+                datasource={datasource}
               />
             )}
           </>

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -21,6 +21,7 @@ import moment from 'moment';
 import {
   Behavior,
   css,
+  Datasource,
   getChartMetadataRegistry,
   QueryFormData,
   styled,
@@ -38,7 +39,10 @@ import Icons from 'src/components/Icons';
 import ModalTrigger from 'src/components/ModalTrigger';
 import Button from 'src/components/Button';
 import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
-import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
+import {
+  ResultsPaneOnDashboard,
+  SamplesPane,
+} from 'src/explore/components/DataTablesPane';
 
 const MENU_KEYS = {
   CROSS_FILTER_SCOPING: 'cross_filter_scoping',
@@ -51,6 +55,7 @@ const MENU_KEYS = {
   TOGGLE_CHART_DESCRIPTION: 'toggle_chart_description',
   VIEW_QUERY: 'view_query',
   VIEW_RESULTS: 'view_results',
+  DRILL_TO_DETAIL: 'drill_to_detail',
 };
 
 const VerticalDotsContainer = styled.div`
@@ -124,6 +129,8 @@ export interface SliceHeaderControlsProps {
   supersetCanShare?: boolean;
   supersetCanCSV?: boolean;
   sliceCanEdit?: boolean;
+
+  datasource: Datasource;
 }
 interface State {
   showControls: boolean;
@@ -367,6 +374,39 @@ class SliceHeaderControls extends React.PureComponent<
           </Menu.Item>
         )}
 
+        {this.props.supersetCanExplore && (
+          <Menu.Item key={MENU_KEYS.DRILL_TO_DETAIL}>
+            <ModalTrigger
+              triggerNode={
+                <span data-test="view-query-menu-item">
+                  {t('Drill to detail')}
+                </span>
+              }
+              modalTitle={t('Drill to detail: %s', slice.slice_name)}
+              modalBody={
+                <SamplesPane
+                  datasource={this.props.datasource}
+                  dataSize={20}
+                  isRequest
+                  isVisible
+                />
+              }
+              modalFooter={
+                <Button
+                  buttonStyle="secondary"
+                  buttonSize="small"
+                  onClick={this.props.onExploreChart}
+                >
+                  {t('Edit chart')}
+                </Button>
+              }
+              draggable
+              resizable
+              responsive
+            />
+          </Menu.Item>
+        )}
+
         {(slice.description || this.props.supersetCanExplore) && (
           <Menu.Divider />
         )}

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -451,6 +451,7 @@ class Chart extends React.Component {
           formData={formData}
           width={width}
           height={this.getHeaderHeight()}
+          datasource={datasource}
         />
 
         {/*

superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx

@@ -38,10 +38,11 @@ const cache = new WeakSet();
 export const SamplesPane = ({
   isRequest,
   datasource,
-  queryForce,
+  queryForce = false,
   actions,
   dataSize = 50,
   isVisible,
+  queryPayload,
 }: SamplesPaneProps) => {
   const [filterText, setFilterText] = useState('');
   const [data, setData] = useState<Record<string, any>[][]>([]);
@@ -61,7 +62,7 @@ export const SamplesPane = ({
 
     if (isRequest && !cache.has(datasource)) {
       setIsLoading(true);
-      getDatasetSamples(datasource.id, queryForce)
+      getDatasetSamples(datasource.id, queryForce, queryPayload)
         .then(response => {
           setData(ensureIsArray(response.data));
           setColnames(ensureIsArray(response.colnames));

superset-frontend/src/explore/components/DataTablesPane/test/SamplesPane.test.tsx

@@ -29,15 +29,15 @@ import { SamplesPane } from '../components';
 import { createSamplesPaneProps } from './fixture';
 
 describe('SamplesPane', () => {
-  fetchMock.get('end:/api/v1/dataset/34/samples?force=false', {
+  fetchMock.post('end:/api/v1/dataset/34/samples?force=false', {
     result: {
       data: [],
       colnames: [],
       coltypes: [],
     },
   });
 
-  fetchMock.get('end:/api/v1/dataset/35/samples?force=true', {
+  fetchMock.post('end:/api/v1/dataset/35/samples?force=true', {
     result: {
       data: [
         { __timestamp: 1230768000000, genre: 'Action' },
@@ -48,7 +48,7 @@ describe('SamplesPane', () => {
     },
   });
 
-  fetchMock.get('end:/api/v1/dataset/36/samples?force=false', 400);
+  fetchMock.post('end:/api/v1/dataset/36/samples?force=false', 400);
 
   const setForceQuery = jest.spyOn(exploreActions, 'setForceQuery');
 

superset-frontend/src/explore/components/DataTablesPane/types.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import {
+  DatasourceSamplesQuery,
   Datasource,
   GenericDataType,
   JsonObject,
@@ -56,11 +57,12 @@ export interface ResultsPaneProps {
 export interface SamplesPaneProps {
   isRequest: boolean;
   datasource: Datasource;
-  queryForce: boolean;
+  queryForce?: boolean;
   actions?: ExploreActions;
   dataSize?: number;
   // reload OriginalFormattedTimeColumns from localStorage when isVisible is true
   isVisible: boolean;
+  queryPayload?: DatasourceSamplesQuery;
 }
 
 export interface TableControlsProps {

superset/datasets/api.py

@@ -60,9 +60,11 @@
     DatasetPostSchema,
     DatasetPutSchema,
     DatasetRelatedObjectsResponse,
+    DatasetSamplesQuerySchema,
     get_delete_ids_schema,
     get_export_ids_schema,
 )
+from superset.exceptions import QueryClauseValidationException
 from superset.utils.core import json_int_dttm_ser, parse_boolean_string
 from superset.views.base import DatasourceFilter, generate_download_headers
 from superset.views.base_api import (
@@ -212,7 +214,10 @@ class DatasetRestApi(BaseSupersetModelRestApi):
     apispec_parameter_schemas = {
         "get_export_ids_schema": get_export_ids_schema,
     }
-    openapi_spec_component_schemas = (DatasetRelatedObjectsResponse,)
+    openapi_spec_component_schemas = (
+        DatasetRelatedObjectsResponse,
+        DatasetSamplesQuerySchema,
+    )
 
     @expose("/", methods=["POST"])
     @protect()
@@ -764,7 +769,7 @@ def import_(self) -> Response:
         command.run()
         return self.response(200, message="OK")
 
-    @expose("/<pk>/samples")
+    @expose("/<pk>/samples", methods=["POST"])
     @protect()
     @safe
     @statsd_metrics
@@ -775,7 +780,7 @@ def import_(self) -> Response:
     def samples(self, pk: int) -> Response:
         """get samples from a Dataset
         ---
-        get:
+        post:
           description: >-
             get samples from a Dataset
           parameters:
@@ -787,6 +792,13 @@ def samples(self, pk: int) -> Response:
             schema:
               type: boolean
             name: force
+          requestBody:
+            description: Filter Schema
+            required: false
+            content:
+              application/json:
+                schema:
+                  $ref: '#/components/schemas/DatasetSamplesQuerySchema'
           responses:
             200:
               description: Dataset samples
@@ -810,7 +822,7 @@ def samples(self, pk: int) -> Response:
         """
         try:
             force = parse_boolean_string(request.args.get("force"))
-            rv = SamplesDatasetCommand(pk, force).run()
+            rv = SamplesDatasetCommand(pk, force, payload=request.json).run()
             response_data = simplejson.dumps(
                 {"result": rv},
                 default=json_int_dttm_ser,
@@ -825,3 +837,5 @@ def samples(self, pk: int) -> Response:
             return self.response_403()
         except DatasetSamplesFailedError as ex:
             return self.response_400(message=str(ex))
+        except QueryClauseValidationException as ex:
+            return self.response_400(message=str(ex))

superset/datasets/commands/samples.py

@@ -14,8 +14,9 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-import logging
-from typing import Any, Dict, Optional
+from typing import Any, cast, Dict, Optional
+
+from marshmallow import ValidationError
 
 from superset import security_manager
 from superset.commands.base import BaseCommand
@@ -30,29 +31,37 @@
     DatasetSamplesFailedError,
 )
 from superset.datasets.dao import DatasetDAO
-from superset.exceptions import SupersetSecurityException
+from superset.datasets.schemas import DatasetSamplesQuerySchema
+from superset.exceptions import (
+    QueryClauseValidationException,
+    SupersetSecurityException,
+)
 from superset.utils.core import QueryStatus
 
-logger = logging.getLogger(__name__)
-
 
 class SamplesDatasetCommand(BaseCommand):
-    def __init__(self, model_id: int, force: bool):
+    def __init__(
+        self,
+        model_id: int,
+        force: bool,
+        *,
+        payload: Optional[DatasetSamplesQuerySchema] = None,
+    ):
         self._model_id = model_id
         self._force = force
         self._model: Optional[SqlaTable] = None
+        self._payload = payload
 
     def run(self) -> Dict[str, Any]:
         self.validate()
-        if not self._model:
-            raise DatasetNotFoundError()
+        self._model = cast(SqlaTable, self._model)
 
         qc_instance = QueryContextFactory().create(
             datasource={
                 "type": self._model.type,
                 "id": self._model.id,
             },
-            queries=[{}],
+            queries=[self._payload] if self._payload else [{}],
             result_type=ChartDataResultType.SAMPLES,
             force=self._force,
         )
@@ -78,3 +87,8 @@ def validate(self) -> None:
             security_manager.raise_for_ownership(self._model)
         except SupersetSecurityException as ex:
             raise DatasetForbiddenError() from ex
+
+        try:
+            self._payload = DatasetSamplesQuerySchema().load(self._payload)
+        except ValidationError as ex:
+            raise QueryClauseValidationException() from ex

superset/datasets/schemas.py

@@ -23,6 +23,7 @@
 from marshmallow.validate import Length
 from marshmallow_sqlalchemy import SQLAlchemyAutoSchema
 
+from superset.charts.schemas import ChartDataFilterSchema
 from superset.datasets.models import Dataset
 
 get_delete_ids_schema = {"type": "array", "items": {"type": "integer"}}
@@ -231,3 +232,14 @@ class Meta:  # pylint: disable=too-few-public-methods
         model = Dataset
         load_instance = True
         include_relationships = True
+
+
+class DatasetSamplesQuerySchema(Schema):
+    filters = fields.List(fields.Nested(ChartDataFilterSchema), required=False)
+
+    @pre_load
+    # pylint: disable=no-self-use, unused-argument
+    def handle_none(self, data: Dict[str, Any], **kwargs: Any) -> Dict[str, Any]:
+        if data is None:
+            return {}
+        return data