feat: alerts/reports add/edit modal (#11770)

superset-frontend/spec/javascripts/views/CRUD/alert/AlertList_spec.jsx

@@ -19,6 +19,7 @@
 import fetchMock from 'fetch-mock';
 import React from 'react';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import { styledMount as mount } from 'spec/helpers/theming';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
@@ -78,33 +79,30 @@ fetchMock.get(alertsCreatedByEndpoint, { result: [] });
 fetchMock.put(alertEndpoint, { ...mockalerts[0], active: false });
 fetchMock.put(alertsEndpoint, { ...mockalerts[0], active: false });
 
-async function mountAndWait(props) {
-  const mounted = mount(<AlertList {...props} user={mockUser} store={store} />);
-  await waitForComponentToPaint(mounted);
-
-  return mounted;
-}
-
 describe('AlertList', () => {
-  let wrapper;
+  const wrapper = mount(
+    <Provider store={store}>
+      <AlertList store={store} user={mockUser} />
+    </Provider>,
+  );
 
   beforeAll(async () => {
-    wrapper = await mountAndWait();
+    await waitForComponentToPaint(wrapper);
   });
 
-  it('renders', () => {
+  it('renders', async () => {
     expect(wrapper.find(AlertList)).toExist();
   });
 
-  it('renders a SubMenu', () => {
+  it('renders a SubMenu', async () => {
     expect(wrapper.find(SubMenu)).toExist();
   });
 
-  it('renders a ListView', () => {
+  it('renders a ListView', async () => {
     expect(wrapper.find(ListView)).toExist();
   });
 
-  it('renders switches', () => {
+  it('renders switches', async () => {
     expect(wrapper.find(Switch)).toHaveLength(3);
   });
 });

superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx

@@ -0,0 +1,137 @@
+/**
+ * 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 { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
+import AlertReportModal from 'src/views/CRUD/alert/AlertReportModal';
+import Modal from 'src/common/components/Modal';
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import { styledMount as mount } from 'spec/helpers/theming';
+
+const mockData = {
+  id: 1,
+  name: 'test report',
+  description: 'test report description',
+};
+const FETCH_REPORT_ENDPOINT = 'glob:*/api/v1/report/*';
+const REPORT_PAYLOAD = { result: mockData };
+
+fetchMock.get(FETCH_REPORT_ENDPOINT, REPORT_PAYLOAD);
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
+// Report mock is default for testing
+const mockedProps = {
+  addDangerToast: () => {},
+  onAdd: jest.fn(() => []),
+  onHide: () => {},
+  show: true,
+  isReport: true,
+};
+
+// Related mocks
+const ownersEndpoint = 'glob:*/api/v1/dashboard/related/owners?*';
+const databaseEndpoint = 'glob:*/api/v1/dataset/related/database?*';
+const dashboardEndpoint = 'glob:*/api/v1/dashboard?*';
+const chartEndpoint = 'glob:*/api/v1/chart?*';
+
+fetchMock.get(ownersEndpoint, {
+  result: [],
+});
+
+fetchMock.get(databaseEndpoint, {
+  result: [],
+});
+
+fetchMock.get(dashboardEndpoint, {
+  result: [],
+});
+
+fetchMock.get(chartEndpoint, {
+  result: [],
+});
+
+async function mountAndWait(props = mockedProps) {
+  const mounted = mount(
+    <Provider store={store}>
+      <AlertReportModal show {...props} />
+    </Provider>,
+    {
+      context: { store },
+    },
+  );
+
+  await waitForComponentToPaint(mounted);
+
+  return mounted;
+}
+
+describe('AlertReportModal', () => {
+  let wrapper;
+
+  beforeAll(async () => {
+    wrapper = await mountAndWait();
+  });
+
+  it('renders', () => {
+    expect(wrapper.find(AlertReportModal)).toExist();
+  });
+
+  it('renders a Modal', () => {
+    expect(wrapper.find(Modal)).toExist();
+  });
+
+  it('renders add header for report when no alert is included, and isReport is true', async () => {
+    const addWrapper = await mountAndWait();
+
+    expect(
+      addWrapper.find('[data-test="alert-report-modal-title"]').text(),
+    ).toEqual('Add Report');
+  });
+
+  it('renders add header for alert when no alert is included, and isReport is false', async () => {
+    const props = {
+      ...mockedProps,
+      isReport: false,
+    };
+
+    const addWrapper = await mountAndWait(props);
+
+    expect(
+      addWrapper.find('[data-test="alert-report-modal-title"]').text(),
+    ).toEqual('Add Alert');
+  });
+
+  it.skip('renders edit header when alert prop is included', () => {
+    expect(
+      wrapper.find('[data-test="alert-report-modal-title"]').text(),
+    ).toEqual('Edit Report');
+  });
+
+  it('renders input element for name', () => {
+    expect(wrapper.find('input[name="name"]')).toExist();
+  });
+
+  it('renders input element for description', () => {
+    expect(wrapper.find('input[name="description"]')).toExist();
+  });
+});

superset-frontend/src/common/components/Modal/Modal.tsx

@@ -84,6 +84,7 @@ const StyledModal = styled(BaseModal)<StyledModalProps>`
 
   .ant-modal-body {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
+    overflow: auto;
   }
 
   .ant-modal-footer {
@@ -105,6 +106,10 @@ const StyledModal = styled(BaseModal)<StyledModalProps>`
   .ant-tabs {
     margin-top: -${({ theme }) => theme.gridUnit * 4}px;
   }
+
+  &.no-content-padding .ant-modal-body {
+    padding: 0;
+  }
 `;
 
 const CustomModal = ({

superset-frontend/src/common/components/Radio.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+import { Radio as BaseRadio } from 'src/common/components';
+
+const StyledRadio = styled(BaseRadio)`
+  .ant-radio-inner {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    border-color: ${({ theme }) => theme.colors.grayscale.base};
+  }
+
+  .ant-radio.ant-radio-checked {
+    .ant-radio-inner {
+      background-color: ${({ theme }) => theme.colors.primary.dark1};
+      border-color: ${({ theme }) => theme.colors.primary.dark1};
+    }
+
+    .ant-radio-inner::after {
+      background-color: ${({ theme }) => theme.colors.grayscale.light5};
+    }
+  }
+
+  .ant-radio:hover,
+  .ant-radio:focus {
+    .ant-radio-inner {
+      border-color: ${({ theme }) => theme.colors.primary.dark1};
+    }
+  }
+`;
+const StyledGroup = styled(BaseRadio.Group)`
+  font-size: inherit;
+`;
+
+export const Radio = Object.assign(StyledRadio, {
+  Group: StyledGroup,
+});

superset-frontend/src/common/components/Select.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+import { Select as BaseSelect } from 'src/common/components';
+
+const StyledSelect = styled(BaseSelect)`
+  &.ant-select-single {
+    .ant-select-selector {
+      height: 36px;
+      padding: 0 11px;
+      background-color: ${({ theme }) => theme.colors.grayscale.light3};
+      border: none;
+
+      .ant-select-selection-search-input {
+        height: 100%;
+      }
+
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: 35px;
+        color: ${({ theme }) => theme.colors.grayscale.dark1};
+      }
+    }
+  }
+`;
+const StyledOption = styled(BaseSelect.Option)``;
+
+export const Select = Object.assign(StyledSelect, {
+  Option: StyledOption,
+});

superset-frontend/src/common/components/index.tsx

@@ -39,10 +39,10 @@ export {
   Input,
   Modal,
   Popover,
+  Radio,
   Select,
   Skeleton,
   Switch,
-  Radio,
   Tabs,
   Tooltip,
 } from 'antd';

superset-frontend/src/middleware/asyncEvent.ts

@@ -184,8 +184,9 @@ const initAsyncEvents = (options: AsyncEventOptions) => {
     if (
       isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES) &&
       transport === TRANSPORT_POLLING
-    )
+    ) {
       processEvents();
+    }
 
     return action => next(action);
   };