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/24 18:08:40 UTC

[GitHub] [incubator-superset] nytai commented on a change in pull request #11005: feat: saved query list view + sort/filters

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



##########
File path: superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx
##########
@@ -17,28 +17,283 @@
  * under the License.
  */
 
-import React from 'react';
+import { t, styled } from '@superset-ui/core';
+import React, { useMemo } from 'react';
+import {
+  createFetchRelated,
+  createFetchDistinct,
+  createErrorHandler,
+} from 'src/views/CRUD/utils';
+import { Popover } from 'src/common/components';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
+import { useListViewResource } from 'src/views/CRUD/hooks';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
+import ListView, { Filters } from 'src/components/ListView';
+import TooltipWrapper from 'src/components/TooltipWrapper';
+import Icon from 'src/components/Icon';
 import { commonMenuData } from 'src/views/CRUD/data/common';
 
+const PAGE_SIZE = 25;
+
 interface SavedQueryListProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
 }
 
+type SavedQueryObject = {};
+
+const StyledTableLabel = styled.div`
+  .count {
+    margin-left: 5px;
+    color: ${({ theme }) => theme.colors.primary.base};
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
+
+const StyledPopoverItem = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark2};
+`;
+
 function SavedQueryList({
   addDangerToast,
   addSuccessToast,
 }: SavedQueryListProps) {
+  const {
+    state: { loading, resourceCount: queryCount, resourceCollection: queries },
+    hasPerm,
+    fetchData,
+    // refreshData, //TODO: add back later when editing?
+  } = useListViewResource<SavedQueryObject>(
+    'saved_query',
+    t('saved_queries'),
+    addDangerToast,
+  );
+
+  const canCreate = hasPerm('can_add');
+  const canEdit = hasPerm('can_edit');
+  const canDelete = hasPerm('can_delete');
+
   const menuData: SubMenuProps = {
     activeChild: 'Saved Queries',
     ...commonMenuData,
   };
 
+  const initialSort = [{ id: 'label', desc: true }];
+  const columns = useMemo(
+    () => [
+      {
+        accessor: 'label',
+        Header: t('Name'),
+      },
+      {
+        accessor: 'database.database_name',
+        Header: t('Database'),
+      },
+      {
+        accessor: 'database',
+        hidden: true,
+        disableSortBy: true,
+      },
+      {
+        accessor: 'schema',
+        Header: t('Schema'),
+      },
+      {
+        Cell: ({
+          row: {
+            original: { sql_tables: tables },
+          },
+        }: any) => {
+          const names = tables.map((table: any) => table.table);
+          const main = names.shift();
+
+          if (names.length) {
+            return (
+              <StyledTableLabel>
+                <span>{main}</span>
+                <Popover
+                  placement="right"
+                  title={t('TABLES')}
+                  trigger="click"
+                  content={
+                    <>
+                      {names.map((name: string) => (
+                        <StyledPopoverItem>{name}</StyledPopoverItem>
+                      ))}
+                    </>
+                  }
+                >
+                  <span className="count">(+{names.length})</span>
+                </Popover>
+              </StyledTableLabel>
+            );
+          }
+
+          return main;
+        },
+        accessor: 'sql_tables',
+        Header: t('Tables'),
+        disableSortBy: true,
+      },
+      {
+        Cell: ({
+          row: {
+            original: { created_on: createdOn },
+          },
+        }: any) => createdOn,
+        Header: t('Created On'),
+        accessor: 'created_on',
+      },
+      {
+        Cell: ({
+          row: {
+            original: { changed_on_delta_humanized: changedOn },
+          },
+        }: any) => changedOn,
+        Header: t('Modified'),
+        accessor: 'changed_on_delta_humanized',
+      },
+      {
+        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);
+
+          return (
+            <span className="actions">
+              <TooltipWrapper
+                label="preview-action"
+                tooltip={t('Query preview')}
+                placement="bottom"
+              >
+                <span
+                  role="button"
+                  tabIndex={0}
+                  className="action-button"
+                  onClick={handlePreview}
+                >
+                  <Icon name="binoculars" />
+                </span>
+              </TooltipWrapper>
+              {canEdit && (
+                <TooltipWrapper
+                  label="edit-action"
+                  tooltip={t('Edit query')}
+                  placement="bottom"
+                >
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    className="action-button"
+                    onClick={handleEdit}
+                  >
+                    <Icon name="pencil" />
+                  </span>
+                </TooltipWrapper>
+              )}
+              <TooltipWrapper
+                label="copy-action"
+                tooltip={t('Copy query URL')}
+                placement="bottom"
+              >
+                <span
+                  role="button"
+                  tabIndex={0}
+                  className="action-button"
+                  onClick={handleCopy}
+                >
+                  <Icon name="clipboard" />
+                </span>
+              </TooltipWrapper>
+              {canDelete && (
+                <span
+                  role="button"
+                  tabIndex={0}
+                  className="action-button"
+                  data-test="database-delete"
+                  onClick={handleDelete}
+                >
+                  <TooltipWrapper
+                    label="delete-action"
+                    tooltip={t('Delete query')}
+                    placement="bottom"
+                  >
+                    <Icon name="trash" />
+                  </TooltipWrapper>
+                </span>
+              )}
+            </span>
+          );
+        },
+        Header: t('Actions'),
+        id: 'actions',
+        disableSortBy: true,
+      },
+    ],
+    [canDelete, canCreate],
+  );
+
+  const filters: Filters = useMemo(
+    () => [
+      {
+        Header: t('Database'),
+        id: 'database',
+        input: 'select',
+        operator: 'rel_o_m',
+        unfilteredLabel: 'All',
+        fetchSelects: createFetchRelated(
+          'saved_query',
+          'database',
+          createErrorHandler(errMsg =>
+            t(
+              'An error occurred while fetching dataset datasource values: %s',
+              errMsg,
+            ),
+          ),
+        ),
+        paginate: true,
+      },
+      {
+        Header: t('Schema'),
+        id: 'schema',
+        input: 'select',
+        operator: 'eq',
+        unfilteredLabel: 'All',
+        fetchSelects: createFetchDistinct(
+          'saved_query',
+          'schema',
+          createErrorHandler(errMsg =>
+            t('An error occurred while fetching schema values: %s', errMsg),
+          ),
+        ),
+        paginate: true,
+      },
+      {
+        Header: t('Search'),
+        id: 'label',
+        input: 'search',
+        operator: 'ct',

Review comment:
       since https://github.com/apache/incubator-superset/pull/11031 just merged, can you rebase and switch this to `all_text` ?




----------------------------------------------------------------
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