setEditModal(undefined)}
+ onSubmit={handleDashboardEdit}
+ />
+ )}
+ {dashboards.length > 0 ? (
+
+ {dashboards.map(e => (
+ setEditModal(dashboard),
+ }}
+ />
+ ))}
+
+ ) : (
+
+ )}
+
+ );
}
export default withToasts(DashboardTable);
diff --git a/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx b/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx
new file mode 100644
index 000000000000..f145dfe79ca0
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx
@@ -0,0 +1,144 @@
+/**
+ * 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 Button from 'src/components/Button';
+import { Empty } from 'src/common/components';
+import { t, styled } from '@superset-ui/core';
+import Icon from 'src/components/Icon';
+import { IconContainer } from '../utils';
+
+interface EmptyStateProps {
+ tableName: string;
+ tab?: string;
+}
+
+const ButtonContainer = styled.div`
+ Button {
+ svg {
+ color: ${({ theme }) => theme.colors.grayscale.light5};
+ }
+ }
+`;
+
+export default function EmptyState({ tableName, tab }: EmptyStateProps) {
+ const mineRedirects = {
+ DASHBOARDS: '/dashboard/new',
+ CHARTS: '/chart/add',
+ SAVED_QUERIES: '/superset/sqllab',
+ };
+ const favRedirects = {
+ DASHBOARDS: '/dashboard/list/',
+ CHARTS: '/chart/list',
+ SAVED_QUERIES: '/savedqueryview/list/',
+ };
+ const tableIcon = {
+ RECENTS: 'union.png',
+ DASHBOARDS: 'empty-dashboard.png',
+ CHARTS: 'empty-charts.png',
+ SAVED_QUERIES: 'empty-queries.png',
+ };
+ const mine = (
+ {`No ${
+ tableName === 'SAVED_QUERIES'
+ ? t('saved queries')
+ : t(`${tableName.toLowerCase()}`)
+ } yet`}
+ );
+ const recent = (
+
+ {(() => {
+ if (tab === 'Viewed') {
+ return t(
+ `Recently viewed charts, dashboards, and saved queries will appear here`,
+ );
+ }
+ if (tab === 'Created') {
+ return t(
+ 'Recently created charts, dashboards, and saved queries will appear here',
+ );
+ }
+ if (tab === 'Examples') {
+ return t(
+ `Recent example charts, dashboards, and saved queries will appear here`,
+ );
+ }
+ if (tab === 'Edited') {
+ return t(
+ `Recently edited charts, dashboards, and saved queries will appear here`,
+ );
+ }
+ return null;
+ })()}
+
+ );
+ // Mine and Recent Activity(all tabs) tab empty state
+ if (tab === 'Mine' || tableName === 'RECENTS') {
+ return (
+
+ {tableName !== 'RECENTS' && (
+
+
+
+ )}
+
+ );
+ }
+ // Favorite tab empty state
+ return (
+
+ {t("You don't have any favorites yet!")}
+
+ }
+ >
+
+
+ );
+}
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
new file mode 100644
index 000000000000..dc0590bacbda
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -0,0 +1,260 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { t, SupersetClient, styled } from '@superset-ui/core';
+import withToasts from 'src/messageToasts/enhancers/withToasts';
+import { Dropdown, Menu } from 'src/common/components';
+import { useListViewResource, copyQueryLink } from 'src/views/CRUD/hooks';
+import ListViewCard from 'src/components/ListViewCard';
+import DeleteModal from 'src/components/DeleteModal';
+import Icon from 'src/components/Icon';
+import SubMenu from 'src/components/Menu/SubMenu';
+import EmptyState from './EmptyState';
+
+import { IconContainer, CardContainer, createErrorHandler } from '../utils';
+
+const PAGE_SIZE = 3;
+
+interface Query {
+ id?: number;
+ sql_tables?: Array;
+ database?: {
+ database_name: string;
+ };
+ rows?: string;
+ description?: string;
+ end_time?: string;
+ label?: string;
+}
+
+interface SavedQueriesProps {
+ user: {
+ userId: string | number;
+ };
+ queryFilter: string;
+ addDangerToast: (arg0: string) => void;
+ addSuccessToast: (arg0: string) => void;
+}
+
+const QueryData = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ .title {
+ font-weight: ${({ theme }) => theme.typography.weights.normal};
+ color: ${({ theme }) => theme.colors.grayscale.light2};
+ }
+ .holder {
+ margin: ${({ theme }) => theme.gridUnit * 2}px;
+ }
+`;
+const SavedQueries = ({
+ user,
+ addDangerToast,
+ addSuccessToast,
+}: SavedQueriesProps) => {
+ const {
+ state: { loading, resourceCollection: queries },
+ hasPerm,
+ fetchData,
+ refreshData,
+ } = useListViewResource('saved_query', t('query'), addDangerToast);
+ const [queryFilter, setQueryFilter] = useState('Mine');
+ const [queryDeleteModal, setQueryDeleteModal] = useState(false);
+ const [currentlyEdited, setCurrentlyEdited] = useState({});
+
+ const canEdit = hasPerm('can_edit');
+ const canDelete = hasPerm('can_delete');
+
+ const handleQueryDelete = ({ id, label }: Query) => {
+ SupersetClient.delete({
+ endpoint: `/api/v1/saved_query/${id}`,
+ }).then(
+ () => {
+ refreshData();
+ setQueryDeleteModal(false);
+ addSuccessToast(t('Deleted: %s', label));
+ },
+ createErrorHandler(errMsg =>
+ addDangerToast(t('There was an issue deleting %s: %s', label, errMsg)),
+ ),
+ );
+ };
+
+ const getFilters = () => {
+ const filters = [];
+ if (queryFilter === 'Mine') {
+ filters.push({
+ id: 'created_by',
+ operator: 'rel_o_m',
+ value: `${user?.userId}`,
+ });
+ } else {
+ filters.push({
+ id: 'id',
+ operator: 'saved_query_is_fav',
+ value: true,
+ });
+ }
+ return filters;
+ };
+
+ useEffect(() => {
+ fetchData({
+ pageIndex: 0,
+ pageSize: PAGE_SIZE,
+ sortBy: [
+ {
+ id: 'changed_on_delta_humanized',
+ desc: true,
+ },
+ ],
+ filters: getFilters(),
+ });
+ }, [queryFilter]);
+
+ const renderMenu = (query: Query) => (
+
+ );
+ return (
+ <>
+ {queryDeleteModal && (
+ {
+ if (queryDeleteModal) {
+ handleQueryDelete(currentlyEdited);
+ }
+ }}
+ onHide={() => {
+ setQueryDeleteModal(false);
+ }}
+ open
+ title={t('Delete Query?')}
+ />
+ )}
+ setQueryFilter('Favorite'),
+ },
+ {
+ name: 'Mine',
+ label: t('Mine'),
+ onClick: () => setQueryFilter('Mine'),
+ },
+ ]}
+ buttons={[
+ {
+ name: (
+
+ SQL Query{' '}
+
+ ),
+ buttonStyle: 'tertiary',
+ onClick: () => {
+ window.location.href = '/superset/sqllab';
+ },
+ },
+ {
+ name: 'View All »',
+ buttonStyle: 'link',
+ onClick: () => {
+ window.location.href = '/savedqueryview/list';
+ },
+ },
+ ]}
+ />
+ {queries.length > 0 ? (
+
+ {queries.map(q => (
+
+
+
{t('Tables')}
+
{q?.sql_tables?.length}
+
+
{t('Datasource Name')}
+
{q?.sql_tables && q.sql_tables[0]?.table}
+
-
-
-
-
-
-
- {t('Dashboards')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t('Recently Viewed')}
-
-
-
-
-
-
-
-
-
-
-
-
- {t('Favorites')}
-
-
-
-
-
-
-
-
-