feat: annotation layers CRUD list view (#11432)

superset-frontend/spec/javascripts/views/CRUD/annotationlayers/AnnotationLayersList_spec.jsx

@@ -0,0 +1,101 @@
+/**
+ * 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 thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
+import { styledMount as mount } from 'spec/helpers/theming';
+
+import AnnotationLayersList from 'src/views/CRUD/annotationlayers/AnnotationLayersList';
+import SubMenu from 'src/components/Menu/SubMenu';
+import ListView from 'src/components/ListView';
+// import Filters from 'src/components/ListView/Filters';
+// import DeleteModal from 'src/components/DeleteModal';
+// import Button from 'src/components/Button';
+// import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+// import { act } from 'react-dom/test-utils';
+
+// store needed for withToasts(AnnotationLayersList)
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
+const layersInfoEndpoint = 'glob:*/api/v1/annotation_layer/_info*';
+const layersEndpoint = 'glob:*/api/v1/annotation_layer/?*';
+// const layerEndpoint = 'glob:*/api/v1/annotation_layer/*';
+// const templatesRelatedEndpoint = 'glob:*/api/v1/annotation_layer/related/*';
+
+const mocklayers = [...new Array(3)].map((_, i) => ({
+  changed_on_delta_humanized: `${i} day(s) ago`,
+  created_by: {
+    first_name: `user`,
+    last_name: `${i}`,
+  },
+  created_on: new Date().toISOString,
+  changed_on: new Date().toISOString,
+  id: i,
+  name: `layer ${i}`,
+  desc: 'layer description',
+}));
+
+fetchMock.get(layersInfoEndpoint, {
+  permissions: ['can_delete'],
+});
+fetchMock.get(layersEndpoint, {
+  result: mocklayers,
+  layers_count: 3,
+});
+
+/* fetchMock.delete(layerEndpoint, {});
+fetchMock.delete(layersEndpoint, {});
+
+fetchMock.get(layersRelatedEndpoint, {
+  created_by: {
+    count: 0,
+    result: [],
+  },
+}); */
+
+describe('AnnotationLayersList', () => {
+  const wrapper = mount(<AnnotationLayersList />, { context: { store } });
+
+  beforeAll(async () => {
+    await waitForComponentToPaint(wrapper);
+  });
+
+  it('renders', () => {
+    expect(wrapper.find(AnnotationLayersList)).toExist();
+  });
+
+  it('renders a SubMenu', () => {
+    expect(wrapper.find(SubMenu)).toExist();
+  });
+
+  it('renders a ListView', () => {
+    expect(wrapper.find(ListView)).toExist();
+  });
+
+  it('fetches layers', () => {
+    const callsQ = fetchMock.calls(/annotation_layer\/\?q/);
+    expect(callsQ).toHaveLength(1);
+    expect(callsQ[0][0]).toMatchInlineSnapshot(
+      `"http://localhost/api/v1/annotation_layer/?q=(order_column:name,order_direction:desc,page:0,page_size:25)"`,
+    );
+  });
+});

superset-frontend/src/components/ListView/ListView.tsx

@@ -20,6 +20,7 @@ import { t, styled } from '@superset-ui/core';
 import React, { useEffect, useState } from 'react';
 import { Alert } from 'react-bootstrap';
 import { Empty } from 'src/common/components';
+import { ReactComponent as EmptyImage } from 'images/empty.svg';
 import cx from 'classnames';
 import Button from 'src/components/Button';
 import Icon from 'src/components/Icon';
@@ -37,6 +38,7 @@ import {
 import { ListViewError, useListViewState } from './utils';
 
 const ListViewStyles = styled.div`
+  background: ${({ theme }) => theme.colors.grayscale.light5};
   text-align: center;
 
   .superset-list-view {
@@ -57,6 +59,14 @@ const ListViewStyles = styled.div`
     }
     .body {
     }
+
+    .ant-empty {
+      padding-bottom: 160px;
+
+      .ant-empty-image {
+        height: auto;
+      }
+    }
   }
 
   .pagination-container {
@@ -209,6 +219,10 @@ export interface ListViewProps<T extends object = any> {
   cardSortSelectOptions?: Array<CardSortSelectOption>;
   defaultViewMode?: ViewModeType;
   highlightRowId?: number;
+  emptyState?: {
+    message?: string;
+    slot?: React.ReactNode;
+  };
 }
 
 function ListView<T extends object = any>({
@@ -229,6 +243,7 @@ function ListView<T extends object = any>({
   cardSortSelectOptions,
   defaultViewMode = 'card',
   highlightRowId,
+  emptyState = {},
 }: ListViewProps<T>) {
   const {
     getTableProps,
@@ -368,29 +383,36 @@ function ListView<T extends object = any>({
           )}
           {!loading && rows.length === 0 && (
             <EmptyWrapper>
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              <Empty
+                image={<EmptyImage />}
+                description={emptyState.message || 'No Data'}
+              >
+                {emptyState.slot || null}
+              </Empty>
             </EmptyWrapper>
           )}
         </div>
       </div>
 
-      <div className="pagination-container">
-        <Pagination
-          totalPages={pageCount || 0}
-          currentPage={pageCount ? pageIndex + 1 : 0}
-          onChange={(p: number) => gotoPage(p - 1)}
-          hideFirstAndLastPageLinks
-        />
-        <div className="row-count-container">
-          {!loading &&
-            t(
-              '%s-%s of %s',
-              pageSize * pageIndex + (rows.length && 1),
-              pageSize * pageIndex + rows.length,
-              count,
-            )}
+      {rows.length > 0 && (
+        <div className="pagination-container">
+          <Pagination
+            totalPages={pageCount || 0}
+            currentPage={pageCount ? pageIndex + 1 : 0}
+            onChange={(p: number) => gotoPage(p - 1)}
+            hideFirstAndLastPageLinks
+          />
+          <div className="row-count-container">
+            {!loading &&
+              t(
+                '%s-%s of %s',
+                pageSize * pageIndex + (rows.length && 1),
+                pageSize * pageIndex + rows.length,
+                count,
+              )}
+          </div>
         </div>
-      </div>
+      )}
     </ListViewStyles>
   );
 }

superset-frontend/src/views/App.tsx

@@ -34,6 +34,7 @@ import DatasetList from 'src/views/CRUD/data/dataset/DatasetList';
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
 import SavedQueryList from 'src/views/CRUD/data/savedquery/SavedQueryList';
 import CssTemplatesList from 'src/views/CRUD/csstemplates/CssTemplatesList';
+import AnnotationLayersList from 'src/views/CRUD/annotationlayers/AnnotationLayersList';
 import AnnotationList from 'src/views/CRUD/annotation/AnnotationList';
 
 import messageToastReducer from '../messageToasts/reducers';
@@ -104,6 +105,11 @@ const App = () => (
                   <CssTemplatesList user={user} />
                 </ErrorBoundary>
               </Route>
+              <Route path="/annotationlayermodelview/list/">
+                <ErrorBoundary>
+                  <AnnotationLayersList user={user} />
+                </ErrorBoundary>
+              </Route>
               <Route path="/annotationmodelview/:annotationLayerId/annotation/">
                 <ErrorBoundary>
                   <AnnotationList user={user} />