You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2020/09/30 23:02:08 UTC

[GitHub] [incubator-superset] nytai commented on a change in pull request #11109: feat: saved query list actions

nytai commented on a change in pull request #11109:
URL: https://github.com/apache/incubator-superset/pull/11109#discussion_r497844477



##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -173,11 +284,52 @@ function SavedQueryList({
       {
         Cell: ({ row: { original } }: any) => {
           const handlePreview = () => {}; // openQueryPreviewModal(original); // TODO: open preview modal
-          const handleEdit = () => {}; // handleQueryEdit(original); // TODO: navigate to sql editor with selected query open
-          const handleCopy = () => {}; // TODO: copy link to clipboard
-          const handleDelete = () => {}; // openQueryDeleteModal(original);
+          const handleEdit = () => {
+            openInSqlLab(original.id);
+          };
+          const handleCopy = () => {
+            copyQueryLink(original.id);
+          };
+          const handleDelete = () => setQueryCurrentlyDeleting(original); // openQueryDeleteModal(original);
 
-          return (
+          const actions = [
+            {
+              label: 'preview-action',
+              tooltip: t('Query preview'),
+              placement: 'bottom',
+              icon: 'binoculars',
+              onClick: handlePreview,
+            },
+            canEdit
+              ? {
+                  label: 'edit-action',
+                  tooltip: t('Edit query'),
+                  placement: 'bottom',
+                  icon: 'edit',
+                  onClick: handleEdit,
+                }
+              : null,
+            {
+              label: 'copy-action',
+              tooltip: t('Copy query URL'),
+              placement: 'bottom',
+              icon: 'copy',
+              onClick: handleCopy,
+            },
+            canDelete
+              ? {
+                  label: 'delete-action',
+                  tooltip: t('Delete query'),
+                  placement: 'bottom',
+                  icon: 'trash',
+                  onClick: handleDelete,
+                }
+              : null,
+          ].filter(item => !!item);
+
+          return <ActionsBar actions={actions} />;
+
+          /* return (

Review comment:
       is there any reason to keep this commented out code around? 

##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -299,17 +450,92 @@ function SavedQueryList({
   return (
     <>
       <SubMenu {...menuData} />
-      <ListView<SavedQueryObject>
-        className="saved_query-list-view"
-        columns={columns}
-        count={queryCount}
-        data={queries}
-        fetchData={fetchData}
-        filters={filters}
-        initialSort={initialSort}
-        loading={loading}
-        pageSize={PAGE_SIZE}
-      />
+      {queryCurrentlyDeleting && (
+        <DeleteModal
+          description={t(
+            'This action will permanently delete the saved query.',
+          )}
+          onConfirm={() => {
+            if (queryCurrentlyDeleting) {
+              handleQueryDelete(queryCurrentlyDeleting);
+            }
+          }}
+          onHide={() => setQueryCurrentlyDeleting(null)}
+          open
+          title={t('Delete Query?')}
+        />
+      )}
+      <ConfirmStatusChange
+        title={t('Please confirm')}
+        description={t('Are you sure you want to delete the selected queries?')}
+        onConfirm={handleBulkQueryDelete}
+      >
+        {confirmDelete => {
+          const bulkActions: ListViewProps['bulkActions'] = canDelete
+            ? [
+                {
+                  key: 'delete',
+                  name: t('Delete'),
+                  onSelect: confirmDelete,
+                  type: 'danger',
+                },
+              ]
+            : [];
+
+          return (
+            <ListView<SavedQueryObject>
+              className="saved_query-list-view"
+              columns={columns}
+              count={queryCount}
+              data={queries}
+              fetchData={fetchData}
+              filters={filters}
+              initialSort={initialSort}
+              loading={loading}
+              pageSize={PAGE_SIZE}
+              bulkActions={bulkActions}
+              bulkSelectEnabled={bulkSelectEnabled}
+              disableBulkSelect={toggleBulkSelect}
+              renderBulkSelectCopy={selected => {

Review comment:
       I don't think we need this prop, saved queries do not have physical/virtual distinction. 

##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -61,25 +66,126 @@ function SavedQueryList({
   addSuccessToast,
 }: SavedQueryListProps) {
   const {
-    state: { loading, resourceCount: queryCount, resourceCollection: queries },
+    state: {
+      loading,
+      resourceCount: queryCount,
+      resourceCollection: queries,
+      bulkSelectEnabled,
+    },
     hasPerm,
     fetchData,
-    // refreshData, //TODO: add back later when editing?
+    toggleBulkSelect,
+    refreshData,
   } = useListViewResource<SavedQueryObject>(
     'saved_query',
     t('saved_queries'),
     addDangerToast,
   );
 
+  const [
+    queryCurrentlyDeleting,
+    setQueryCurrentlyDeleting,
+  ] = useState<SavedQueryObject | null>(null);
+
   const canCreate = hasPerm('can_add');
   const canEdit = hasPerm('can_edit');
   const canDelete = hasPerm('can_delete');
 
+  const openNewQuery = function () {
+    window.open(`${window.location.origin}/superset/sqllab?new=true`);
+  };
+
   const menuData: SubMenuProps = {
     activeChild: 'Saved Queries',
     ...commonMenuData,
   };
 
+  menuData.primaryButton = {
+    name: t('+ Query'),
+    onClick: openNewQuery,
+  };
+
+  if (canDelete) {
+    menuData.secondaryButton = {
+      name: t('Bulk Select'),
+      onClick: toggleBulkSelect,
+    };
+  }
+
+  // Action methods
+  const openInSqlLab = function (id: number) {
+    window.open(`${window.location.origin}/superset/sqllab?savedQueryId=${id}`);

Review comment:
       same here re: arrow function

##########
File path: superset-frontend/spec/javascripts/views/CRUD/data/savedquery/SavedQueryList_spec.jsx
##########
@@ -108,6 +117,51 @@ describe('SavedQueryList', () => {
     );
   });
 
+  it('renders ActionsBar in table', () => {

Review comment:
       Thanks for adding tests!

##########
File path: superset-frontend/src/components/ListView/ActionsBar.tsx
##########
@@ -0,0 +1,92 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { styled } from '@superset-ui/core';
+import TooltipWrapper from 'src/components/TooltipWrapper';
+import Icon from 'src/components/Icon';
+
+/* type ActionProps = {
+  label: string;
+  tooltip?: string | React.ReactElement;
+  placement?: string;
+  icon: IconName | string;
+  onClick: () => void;
+}; */
+
+type ActionsBarProps = {
+  actions: Array<any>;

Review comment:
       can we add an action type here? Looks like there's already one commented out above

##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -61,25 +66,126 @@ function SavedQueryList({
   addSuccessToast,
 }: SavedQueryListProps) {
   const {
-    state: { loading, resourceCount: queryCount, resourceCollection: queries },
+    state: {
+      loading,
+      resourceCount: queryCount,
+      resourceCollection: queries,
+      bulkSelectEnabled,
+    },
     hasPerm,
     fetchData,
-    // refreshData, //TODO: add back later when editing?
+    toggleBulkSelect,
+    refreshData,
   } = useListViewResource<SavedQueryObject>(
     'saved_query',
     t('saved_queries'),
     addDangerToast,
   );
 
+  const [
+    queryCurrentlyDeleting,
+    setQueryCurrentlyDeleting,
+  ] = useState<SavedQueryObject | null>(null);
+
   const canCreate = hasPerm('can_add');
   const canEdit = hasPerm('can_edit');
   const canDelete = hasPerm('can_delete');
 
+  const openNewQuery = function () {
+    window.open(`${window.location.origin}/superset/sqllab?new=true`);

Review comment:
       Any reason not to use an arrow function here? 

##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -61,25 +66,126 @@ function SavedQueryList({
   addSuccessToast,
 }: SavedQueryListProps) {
   const {
-    state: { loading, resourceCount: queryCount, resourceCollection: queries },
+    state: {
+      loading,
+      resourceCount: queryCount,
+      resourceCollection: queries,
+      bulkSelectEnabled,
+    },
     hasPerm,
     fetchData,
-    // refreshData, //TODO: add back later when editing?
+    toggleBulkSelect,
+    refreshData,
   } = useListViewResource<SavedQueryObject>(
     'saved_query',
     t('saved_queries'),
     addDangerToast,
   );
 
+  const [
+    queryCurrentlyDeleting,
+    setQueryCurrentlyDeleting,
+  ] = useState<SavedQueryObject | null>(null);
+
   const canCreate = hasPerm('can_add');
   const canEdit = hasPerm('can_edit');
   const canDelete = hasPerm('can_delete');
 
+  const openNewQuery = function () {
+    window.open(`${window.location.origin}/superset/sqllab?new=true`);
+  };
+
   const menuData: SubMenuProps = {
     activeChild: 'Saved Queries',
     ...commonMenuData,
   };
 
+  menuData.primaryButton = {
+    name: t('+ Query'),
+    onClick: openNewQuery,
+  };
+
+  if (canDelete) {
+    menuData.secondaryButton = {
+      name: t('Bulk Select'),
+      onClick: toggleBulkSelect,
+    };
+  }
+
+  // Action methods
+  const openInSqlLab = function (id: number) {
+    window.open(`${window.location.origin}/superset/sqllab?savedQueryId=${id}`);
+  };
+
+  const copyQueryLink = function (id: number) {
+    const selection: Selection | null = document.getSelection();

Review comment:
       same here re: arrow function

##########
File path: superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
##########
@@ -109,6 +109,8 @@ class TabbedSqlEditors extends React.PureComponent {
       ...URI(window.location).search(true),
     };
 
+    console.log('query', query);

Review comment:
       do we still want to keep this log? 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org