From 038107c4084f2cc2d7efc600db8fbdfcb8d7c936 Mon Sep 17 00:00:00 2001
From: omar-sarfraz <osarfraz@2u.com>
Date: Fri, 31 Jan 2025 19:12:21 +0500
Subject: [PATCH] feat: Add Include Date option in reporting configuration form

---
 .../ReportingConfig/ReportingConfigForm.jsx   | 28 +++++++++++++++++++
 .../ReportingConfigForm.test.jsx              | 25 +++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/src/components/ReportingConfig/ReportingConfigForm.jsx b/src/components/ReportingConfig/ReportingConfigForm.jsx
index 3552862661..1770d781ee 100644
--- a/src/components/ReportingConfig/ReportingConfigForm.jsx
+++ b/src/components/ReportingConfig/ReportingConfigForm.jsx
@@ -51,6 +51,7 @@ class ReportingConfigForm extends React.Component {
     active: this.props.config ? this.props.config.active : false,
     enableCompression: this.props.config ? this.props.config.enableCompression : true,
     submitState: SUBMIT_STATES.DEFAULT,
+    includeDate: this.props.config ? this.props.config.includeDate : false,
   };
 
   /**
@@ -127,6 +128,7 @@ class ReportingConfigForm extends React.Component {
     let requiredFields = [];
     formData.append('active', this.state.active);
     formData.append('enableCompression', this.state.enableCompression);
+    formData.append('includeDate', this.state.includeDate);
     if (formData.get('deliveryMethod') === 'email') {
       requiredFields = config ? [...REQUIRED_EMAIL_FIELDS] : [...REQUIRED_NEW_EMAIL_FIELDS];
       // transform email field to match what the api is looking for
@@ -257,6 +259,7 @@ class ReportingConfigForm extends React.Component {
       active,
       enableCompression,
       submitState,
+      includeDate,
     } = this.state;
     const selectedCatalogs = (config?.enterpriseCustomerCatalogs || []).map(item => item.uuid);
     const dataTypesOptions = reportingConfigTypes.dataType.map((item, index) => ({
@@ -515,6 +518,30 @@ class ReportingConfigForm extends React.Component {
             </Form.Text>
           </Form.Group>
         </div>
+        <div className="col">
+          <Form.Group>
+            <Form.Label>
+              <FormattedMessage
+                id="admin.portal.reporting.config.include.date"
+                defaultMessage="Include Date"
+                description="Label for the Include Date field in the reporting configuration form"
+              />
+            </Form.Label>
+            <Form.Checkbox
+              data-testid="includeDateCheckbox"
+              className="ml-3"
+              checked={includeDate}
+              onChange={() => this.setState(prevState => ({ includeDate: !prevState.includeDate }))}
+            />
+            <Form.Text>
+              <FormattedMessage
+                id="admin.portal.reporting.config.include.date.option.help"
+                defaultMessage="Specifies whether the report's filename should include the date."
+                description="Help text for the Include Date field in the reporting configuration form"
+              />
+            </Form.Text>
+          </Form.Group>
+        </div>
         <div className="row justify-content-between align-items-center form-group">
           <Form.Group
             className="mb-0"
@@ -596,6 +623,7 @@ ReportingConfigForm.propTypes = {
   config: PropTypes.shape({
     active: PropTypes.bool,
     enableCompression: PropTypes.bool,
+    includeDate: PropTypes.bool,
     dataType: PropTypes.string,
     dayOfMonth: PropTypes.number,
     dayOfWeek: PropTypes.number,
diff --git a/src/components/ReportingConfig/ReportingConfigForm.test.jsx b/src/components/ReportingConfig/ReportingConfigForm.test.jsx
index 7b4854fd32..572b82c0db 100644
--- a/src/components/ReportingConfig/ReportingConfigForm.test.jsx
+++ b/src/components/ReportingConfig/ReportingConfigForm.test.jsx
@@ -7,6 +7,7 @@ import ReportingConfigForm from './ReportingConfigForm';
 const defaultConfig = {
   enterpriseCustomerId: 'test-customer-uuid',
   active: true,
+  includeDate: false,
   deliveryMethod: 'email',
   email: ['test_email@example.com'],
   emailRaw: 'test_email@example.com',
@@ -377,4 +378,28 @@ describe('<ReportingConfigForm />', () => {
     instance.handleAPIErrorResponse(null);
     expect(mock).not.toHaveBeenCalled();
   });
+  it("should update the includeDate state when the 'Include Date' checkbox is clicked", async () => {
+    const wrapper = mount((
+      <IntlProvider locale="en">
+        <ReportingConfigForm
+          config={defaultConfig}
+          createConfig={createConfig}
+          updateConfig={updateConfig}
+          availableCatalogs={availableCatalogs}
+          reportingConfigTypes={reportingConfigTypes}
+          enterpriseCustomerUuid={enterpriseCustomerUuid}
+        />
+      </IntlProvider>
+    ));
+
+    const instance = wrapper.find('ReportingConfigForm').instance();
+    expect(instance.state.includeDate).toBeFalsy();
+
+    await act(async () => {
+      wrapper.find('[data-testid="includeDateCheckbox"]').first().prop('onChange')();
+    });
+
+    wrapper.update();
+    expect(instance.state.includeDate).toBeTruthy();
+  });
 });