fix: reporting config page create and delete bugs

Author: alex-sheehan-edx

src/components/ReportingConfig/ReportingConfigForm.jsx

@@ -141,7 +141,9 @@ class ReportingConfigForm extends React.Component {
       submitState,
     } = this.state;
     const selectedCatalogs = (config?.enterpriseCustomerCatalogs || []).map(item => item.uuid);
-    const dataTypesOptions = reportingConfigTypes.dataType.map(item => ({ label: item[1], value: item[0] }));
+    const dataTypesOptions = reportingConfigTypes.dataType.map((item, index) => ({
+      key: index, label: item[1], value: item[0],
+    }));
     const dataTypesOptionsValues = dataTypesOptions.map(item => item.value);
     const selectedDataTypesOption = config ? [{ label: config.dataType, value: config.dataType, hidden: true }] : [];
     return (
@@ -404,7 +406,16 @@ ReportingConfigForm.propTypes = {
     uuid: PropTypes.string,
     title: PropTypes.string,
   })).isRequired,
-  reportingConfigTypes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+  reportingConfigTypes: PropTypes.shape({
+    dataType: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    reportType: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    deliveryMethod: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    dayOfWeek: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]))),
+    frequency: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  }).isRequired,
   createConfig: PropTypes.func.isRequired,
   updateConfig: PropTypes.func,
   deleteConfig: PropTypes.func,

src/components/ReportingConfig/ReportingConfigForm.test.jsx

@@ -114,6 +114,23 @@ const createConfig = () => { };
 const updateConfig = () => { };
 
 describe('<ReportingConfigForm />', () => {
+  it('properly handles deletion of configs', () => {
+    const mock = jest.fn();
+    const wrapper = mount((
+      <ReportingConfigForm
+        config={config}
+        createConfig={createConfig}
+        updateConfig={updateConfig}
+        availableCatalogs={availableCatalogs}
+        reportingConfigTypes={reportingConfigTypes}
+        deleteConfig={mock}
+      />
+    ));
+    // It's finding three buttons for some reason??
+    wrapper.find('.btn-outline-danger').at(0).simulate('click');
+    expect(mock).toHaveBeenCalled();
+  });
+
   it('renders the proper fields when changing the delivery method', () => {
     const wrapper = mount((
       <ReportingConfigForm
@@ -251,7 +268,7 @@ describe('<ReportingConfigForm />', () => {
       />
     ));
     expect(
-      wrapper.find('select#enterpriseCustomerCatalogs').instance().value = ['test-enterprise-customer-catalog'],
-    );
+      wrapper.find('select#enterpriseCustomerCatalogs').instance().value,
+    ).toEqual('test-enterprise-customer-catalog');
   });
 });

src/components/ReportingConfig/index.jsx

@@ -73,7 +73,10 @@ class ReportingConfig extends React.Component {
         .findIndex(config => config.uuid === uuid);
 
       this.setState((state) => {
-        const newReportingConfig = { ...state.reportingConfigs }.splice(deletedIndex, 1);
+        // Copy the existing, needs to be updated, list of reporting configs
+        const newReportingConfig = [...state.reportingConfigs];
+        // Splice out the one that's being deleted
+        newReportingConfig.splice(deletedIndex, 1);
         return {
           reportingConfigs: newReportingConfig,
         };

src/components/ReportingConfig/index.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ReportingConfig from './index';
+
+const defaultProps = {
+  location: {
+    state: { hasRequestedCodes: true },
+  },
+  match: { path: 'foobar' },
+  history: { replace: jest.fn() },
+  enterpriseId: 'enterpriseFoobar',
+};
+
+describe('<ReportingConfig /> ', () => {
+  it('properly removes forms on delete', () => {
+    const wrapper = mount(<ReportingConfig {...defaultProps} />);
+    const configUuidToDelete = 'fake enterprise uuid';
+    wrapper.setState(
+      {
+        reportingConfigs: [
+          { uuid: configUuidToDelete },
+          { uuid: 'foo' },
+          { uuid: 'bar' },
+        ],
+      },
+    );
+    // Make sure deleteConfig doesn't blow things up
+    wrapper.instance().deleteConfig(configUuidToDelete);
+  });
+});