feat: annotation layers delete logic + linking w/ annotation view (ap…

…ache#11530)
maZahaca · Nov 3, 2020 · 536346f · 536346f
1 parent eef4809
commit 536346f
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 36 deletions.
diff --git a/superset-frontend/spec/javascripts/views/CRUD/annotationlayers/AnnotationLayersList_spec.jsx b/superset-frontend/spec/javascripts/views/CRUD/annotationlayers/AnnotationLayersList_spec.jsx
@@ -27,9 +27,9 @@ import AnnotationLayerModal from 'src/views/CRUD/annotationlayers/AnnotationLaye
 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 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';
 
@@ -39,7 +39,7 @@ 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 layerEndpoint = 'glob:*/api/v1/annotation_layer/*';
 const layersRelatedEndpoint = 'glob:*/api/v1/annotation_layer/related/*';
 
 const mocklayers = [...new Array(3)].map((_, i) => ({
@@ -63,8 +63,8 @@ fetchMock.get(layersEndpoint, {
   layers_count: 3,
 });
 
-/* fetchMock.delete(layerEndpoint, {});
-fetchMock.delete(layersEndpoint, {}); */
+fetchMock.delete(layerEndpoint, {});
+fetchMock.delete(layersEndpoint, {});
 
 fetchMock.get(layersRelatedEndpoint, {
   created_by: {
@@ -119,4 +119,42 @@ describe('AnnotationLayersList', () => {
       `"http://localhost/api/v1/annotation_layer/?q=(filters:!((col:name,opr:ct,value:foo)),order_column:name,order_direction:desc,page:0,page_size:25)"`,
     );
   });
+
+  it('deletes', async () => {
+    act(() => {
+      wrapper.find('[data-test="delete-action"]').first().props().onClick();
+    });
+    await waitForComponentToPaint(wrapper);
+
+    expect(
+      wrapper.find(DeleteModal).first().props().description,
+    ).toMatchInlineSnapshot(`"This action will permanently delete the layer."`);
+
+    act(() => {
+      wrapper
+        .find('#delete')
+        .first()
+        .props()
+        .onChange({ target: { value: 'DELETE' } });
+    });
+    await waitForComponentToPaint(wrapper);
+    act(() => {
+      wrapper.find('button').last().props().onClick();
+    });
+
+    await waitForComponentToPaint(wrapper);
+
+    expect(fetchMock.calls(/annotation_layer\/0/, 'DELETE')).toHaveLength(1);
+  });
+
+  it('shows/hides bulk actions when bulk actions is clicked', async () => {
+    const button = wrapper.find(Button).at(0);
+    act(() => {
+      button.props().onClick();
+    });
+    await waitForComponentToPaint(wrapper);
+    expect(wrapper.find(IndeterminateCheckbox)).toHaveLength(
+      mocklayers.length + 1, // 1 for each row and 1 for select all
+    );
+  });
 });
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
@@ -56,13 +56,12 @@ const ListViewStyles = styled.div`
         text-align: right;
       }
     }
-    .body {
-      background: ${({ theme }) => theme.colors.grayscale.light5};
+
+    .body.empty table {
+      margin-bottom: 0;
     }
 
     .ant-empty {
-      padding-bottom: 160px;
-
       .ant-empty-image {
         height: auto;
       }
@@ -157,7 +156,11 @@ const ViewModeContainer = styled.div`
 `;
 
 const EmptyWrapper = styled.div`
-  margin: ${({ theme }) => theme.gridUnit * 40}px 0;
+  padding: ${({ theme }) => theme.gridUnit * 40}px 0;
+
+  &.table {
+    background: ${({ theme }) => theme.colors.grayscale.light5};
+  }
 `;
 
 const ViewModeToggle = ({
@@ -321,7 +324,7 @@ function ListView<T extends object = any>({
             )}
           </div>
         </div>
-        <div className="body">
+        <div className={`body ${rows.length === 0 ? 'empty' : ''}`}>
           {bulkSelectEnabled && (
             <BulkSelectWrapper
               data-test="bulk-select-controls"
@@ -382,7 +385,7 @@ function ListView<T extends object = any>({
             />
           )}
           {!loading && rows.length === 0 && (
-            <EmptyWrapper>
+            <EmptyWrapper className={viewingMode}>
               <Empty
                 image={<EmptyImage />}
                 description={emptyState.message || 'No Data'}

diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx
@@ -97,8 +97,9 @@ export interface ButtonProps {
 
 export interface SubMenuProps {
   buttons?: Array<ButtonProps>;
-  name?: string;
+  name?: string | ReactNode;
   tabs?: MenuChild[];
+  children?: MenuChild[];
   activeChild?: MenuChild['name'];
   /* If usesRouter is true, a react-router <Link> component will be used instead of href.
    *  ONLY set usesRouter to true if SubMenu is wrapped in a react-router <Router>;

diff --git a/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx b/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx
@@ -18,8 +18,9 @@
  */
 
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { t, SupersetClient } from '@superset-ui/core';
+import { useParams, Link, useHistory } from 'react-router-dom';
+import { t, styled, SupersetClient } from '@superset-ui/core';
+
 import moment from 'moment';
 import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
 import ListView from 'src/components/ListView';
@@ -163,10 +164,43 @@ function AnnotationList({ addDangerToast }: AnnotationListProps) {
     },
   });
 
+  const StyledHeader = styled.div`
+    display: flex;
+    flex-direction: row;
+
+    a,
+    Link {
+      margin-left: 16px;
+      font-size: 12px;
+      font-weight: normal;
+      text-decoration: underline;
+    }
+  `;
+
+  let hasHistory = true;
+
+  try {
+    useHistory();
+  } catch (err) {
+    // If error is thrown, we know not to use <Link> in render
+    hasHistory = false;
+  }
+
   return (
     <>
       <SubMenu
-        name={t(`Annotation Layer ${annotationLayerName}`)}
+        name={
+          <StyledHeader>
+            <span>{t(`Annotation Layer ${annotationLayerName}`)}</span>
+            <span>
+              {hasHistory ? (
+                <Link to="/annotationlayermodelview/list/">Back to all</Link>
+              ) : (
+                <a href="/annotationlayermodelview/list/">Back to all</a>
+              )}
+            </span>
+          </StyledHeader>
+        }
         buttons={subMenuButtons}
       />
       <AnnotationModal

diff --git a/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayerModal.tsx b/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayerModal.tsx
@@ -131,9 +131,9 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
       }
     } else if (currentLayer) {
       // Create
-      createResource(currentLayer).then(() => {
+      createResource(currentLayer).then(response => {
         if (onLayerAdd) {
-          onLayerAdd();
+          onLayerAdd(response);
         }
 
         hide();