From a936c83d148f0f33455db1724f752741fafb90cf Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Wed, 29 Jul 2020 11:59:09 -0700
Subject: [PATCH 1/7] added back-end functionality to get report details by ID
 & updated test case

---
 .../report_details.test.tsx.snap              |  76 +++---------
 .../__tests__/report_details.test.tsx         |  25 +++-
 .../main/report_details/report_details.tsx    | 111 ++++++++++--------
 test/propsMock.js                             |  36 ++++++
 4 files changed, 139 insertions(+), 109 deletions(-)
 create mode 100644 test/propsMock.js

diff --git a/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap b/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap
index 955e0c94..cf8638c9 100644
--- a/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap
+++ b/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap
@@ -29,9 +29,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
           >
             <h2
               class="euiTitle euiTitle--medium"
-            >
-              Daily Sales Report-232o2jsf28492h3rjskfbwjk23
-            </h2>
+            />
           </div>
         </div>
         <div
@@ -137,9 +135,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Daily Sales Report-232o2jsf28492h3rjskfbwjk23
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -155,9 +151,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Report Description Here
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -173,9 +167,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Mon Apr 20 2020 20:32:12 GMT-0700 (Pacific Daylight Time)
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -191,9 +183,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Mon Apr 20 2020 20:32:12 GMT-0700 (Pacific Daylight Time)
-            </dd>
+            />
           </dl>
         </div>
       </div>
@@ -216,9 +206,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Download
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -234,9 +222,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              dashboard/daily_sales
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -252,9 +238,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              PDF
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -291,9 +275,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -309,9 +291,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -370,9 +350,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Schedule
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -388,9 +366,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Now
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -406,9 +382,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -424,9 +398,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
       </div>
@@ -457,9 +429,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              Kibana Reports
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -475,9 +445,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              admin
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -493,9 +461,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
         <div
@@ -511,9 +477,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
       </div>
@@ -536,9 +500,7 @@ exports[`<ReportDetails /> panel render component 1`] = `
             </dt>
             <dd
               class="euiDescriptionList__description"
-            >
-              --
-            </dd>
+            />
           </dl>
         </div>
         <div
diff --git a/public/components/main/report_details/__tests__/report_details.test.tsx b/public/components/main/report_details/__tests__/report_details.test.tsx
index b6eacf43..da397b78 100644
--- a/public/components/main/report_details/__tests__/report_details.test.tsx
+++ b/public/components/main/report_details/__tests__/report_details.test.tsx
@@ -16,6 +16,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ReportDetails } from '../report_details';
+import propsMock from '../../../../../test/propsMock';
+import httpClientMock from '../../../../../test/httpMockClient';
+import 'babel-polyfill';
 
 describe('<ReportDetails /> panel', () => {
   const created_date = new Date('April 20, 2020 20:32:12');
@@ -44,13 +47,25 @@ describe('<ReportDetails /> panel', () => {
     report_as_attachment: false,
   };
 
-  test('render component', () => {
-    const { container } = render(
+  const params = { reportId: "1"};
+  const match = {
+    params: {
+      reportId: "1"
+    }
+  }
+
+  test('render component', async (done) => {
+    const { container } = await render(
       <ReportDetails
-        reportId={'1'}
-        reportDetailsMetadata={reportDetailsMockMetadata}
+        // reportId={propsMock.match["params"]["reportId"]}
+        // reportDetailsMetadata={reportDetailsMockMetadata}
+        httpClient={httpClientMock}
+        props={propsMock}
+        match={match}
       />
+
     );
-    expect(container.firstChild).toMatchSnapshot();
+    await expect(container.firstChild).toMatchSnapshot();
+    done();
   });
 });
diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx
index b89c97e1..9aeef6ae 100644
--- a/public/components/main/report_details/report_details.tsx
+++ b/public/components/main/report_details/report_details.tsx
@@ -13,7 +13,7 @@
  * permissions and limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -35,6 +35,7 @@ import { ShareModal } from './share_modal/share_modal';
 
 interface ReportDetailsRouteProps {
   reportId: string;
+  httpClient: any;
   reportDetailsMetadata: {
     report_name: string;
     description: string;
@@ -75,36 +76,52 @@ export const ReportDetailsComponent = (props) => {
   );
 };
 
-const created_date = new Date('April 20, 2020 20:32:12');
+export function ReportDetails(props) {
+  const [reportDetails, setReportDetails] = useState({});
+  const reportId = props.match["params"]["reportId"];
+  // todo: replace values with values from props.reportDetailsMetadata
 
-const reportDetailsMockMetadata = {
-  report_name: 'Daily Sales Report-232o2jsf28492h3rjskfbwjk23',
-  description: 'Report Description Here',
-  created: created_date.toString(),
-  last_updated: created_date.toString(),
-  source_type: 'Download',
-  source: 'dashboard/daily_sales',
-  default_file_format: 'PDF',
-  report_header: '--',
-  report_footer: '--',
-  report_type: 'Schedule',
-  schedule_type: 'Now',
-  schedule_details: '--',
-  alert_details: '--',
-  channel: 'Kibana Reports',
-  kibana_recipients: 'admin',
-  email_recipients: '--',
-  email_subject: '--',
-  email_body: '--',
-  report_as_attachment: false,
-};
+  const handleReportDetails = (e) => {
+    setReportDetails(e);
+  }
 
-export function ReportDetails(props: ReportDetailsRouteProps) {
-  const reportId = props.reportId;
-  // todo: replace values with values from props.reportDetailsMetadata
-  const reportDetailsMetadata = reportDetailsMockMetadata;
+  const getReportDetailsData = (data) => {
+    let reportDetails = {
+      report_name: data["report_name"],
+      description: data["description"],
+      created: data["time_created"],
+      last_updated: "--",
+      source_type: data["report_type"],
+      source: data["source_type"],
+      default_file_format: data["report_params"]["report_format"],
+      report_header: '--',
+      report_footer: '--',
+      report_type: data["report_type"],
+      schedule_type: '--',
+      schedule_details: '--',
+      alert_details: '--',
+      channel: '--',
+      kibana_recipients: '--',
+      email_recipients: '--',
+      email_subject: '--',
+      email_body: '--',
+      report_as_attachment: false
+    }
+    return reportDetails;
+  }
+
+  useEffect(() => {
+    const { httpClient } = props;
+    httpClient.get('../api/reporting/reports/' + reportId)
+      .then((response) => {
+        handleReportDetails(getReportDetailsData(response));
+      })
+      .catch((error) => {
+        console.log("Error when fetching report details: ", error);
+      })
+  }, []);
 
-  const includeReportAsAttachmentString = reportDetailsMetadata.report_as_attachment
+  const includeReportAsAttachmentString = reportDetails["report_as_attachment"]
     ? 'True'
     : 'False';
   return (
@@ -119,7 +136,7 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
             <EuiFlexItem>
               <EuiPageHeaderSection>
                 <EuiTitle>
-                  <h2>{reportDetailsMetadata.report_name}</h2>
+                  <h2>{reportDetails["report_name"]}</h2>
                 </EuiTitle>
               </EuiPageHeaderSection>
             </EuiFlexItem>
@@ -159,35 +176,35 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Name'}
-              reportDetailsComponentContent={reportDetailsMetadata.report_name}
+              reportDetailsComponentContent={reportDetails["report_name"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Description'}
-              reportDetailsComponentContent={reportDetailsMetadata.description}
+              reportDetailsComponentContent={reportDetails["description"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Created'}
-              reportDetailsComponentContent={reportDetailsMetadata.created}
+              reportDetailsComponentContent={reportDetails["created"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Last updated'}
-              reportDetailsComponentContent={reportDetailsMetadata.last_updated}
+              reportDetailsComponentContent={reportDetails["last_updated"]}
             />
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source type'}
-              reportDetailsComponentContent={reportDetailsMetadata.source_type}
+              reportDetailsComponentContent={reportDetails["source_type"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source'}
-              reportDetailsComponentContent={reportDetailsMetadata.source}
+              reportDetailsComponentContent={reportDetails["source"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Default file format'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.default_file_format
+                reportDetails["default_file_format"]
               }
             />
             <ReportDetailsComponent />
@@ -197,13 +214,13 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report header'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.report_header
+                reportDetails["report_header"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report footer'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.report_footer
+                reportDetails["report_footer"]
               }
             />
             <ReportDetailsComponent />
@@ -217,24 +234,24 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report type'}
-              reportDetailsComponentContent={reportDetailsMetadata.report_type}
+              reportDetailsComponentContent={reportDetails["report_type"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule type'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.schedule_type
+                reportDetails["schedule_type"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule details'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.schedule_details
+                reportDetails["schedule_details"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Alert details'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.alert_details
+                reportDetails["alert_details"]
               }
             />
           </EuiFlexGroup>
@@ -246,24 +263,24 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Channel'}
-              reportDetailsComponentContent={reportDetailsMetadata.channel}
+              reportDetailsComponentContent={reportDetails["channel"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Kibana recipients'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.kibana_recipients
+                reportDetails["kibana_recipients"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email recipients'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.email_recipients
+                reportDetails["email_recipients"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email subject'}
               reportDetailsComponentContent={
-                reportDetailsMetadata.email_subject
+                reportDetails["email_subject"]
               }
             />
           </EuiFlexGroup>
@@ -271,7 +288,7 @@ export function ReportDetails(props: ReportDetailsRouteProps) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email body'}
-              reportDetailsComponentContent={reportDetailsMetadata.email_body}
+              reportDetailsComponentContent={reportDetails["email_body"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Include report as attachment'}
diff --git a/test/propsMock.js b/test/propsMock.js
new file mode 100644
index 00000000..3e41eb53
--- /dev/null
+++ b/test/propsMock.js
@@ -0,0 +1,36 @@
+/*
+ *   Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file 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.
+ */
+
+ const propsMock = {
+   match: {
+     params: {
+       reportId: jest.fn(),
+     }
+   }
+ };
+
+//  const matchMock = {
+//    params: {reportId: "1"}
+//  }
+//  propsMock.match = jest.fn(() => ({
+//   params: {
+//     reportId: "1"
+//   }
+//  }));
+// propsMock.match = matchMock;
+
+
+// propsMock.params = jest.fn();
+ export default propsMock;
\ No newline at end of file

From 3579c4fb62cfbc52afeb54d3c7473988c3f661a2 Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Wed, 29 Jul 2020 12:01:03 -0700
Subject: [PATCH 2/7] removed commented out lines

---
 .../main/report_details/__tests__/report_details.test.tsx      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/public/components/main/report_details/__tests__/report_details.test.tsx b/public/components/main/report_details/__tests__/report_details.test.tsx
index da397b78..7d27a0a9 100644
--- a/public/components/main/report_details/__tests__/report_details.test.tsx
+++ b/public/components/main/report_details/__tests__/report_details.test.tsx
@@ -47,7 +47,6 @@ describe('<ReportDetails /> panel', () => {
     report_as_attachment: false,
   };
 
-  const params = { reportId: "1"};
   const match = {
     params: {
       reportId: "1"
@@ -57,8 +56,6 @@ describe('<ReportDetails /> panel', () => {
   test('render component', async (done) => {
     const { container } = await render(
       <ReportDetails
-        // reportId={propsMock.match["params"]["reportId"]}
-        // reportDetailsMetadata={reportDetailsMockMetadata}
         httpClient={httpClientMock}
         props={propsMock}
         match={match}

From dcf56f858e8a9d7755dfedbdd46de2588a185332 Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Wed, 29 Jul 2020 12:04:33 -0700
Subject: [PATCH 3/7] removed commented out lines

---
 test/propsMock.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/test/propsMock.js b/test/propsMock.js
index 3e41eb53..c2f4b183 100644
--- a/test/propsMock.js
+++ b/test/propsMock.js
@@ -21,16 +21,4 @@
    }
  };
 
-//  const matchMock = {
-//    params: {reportId: "1"}
-//  }
-//  propsMock.match = jest.fn(() => ({
-//   params: {
-//     reportId: "1"
-//   }
-//  }));
-// propsMock.match = matchMock;
-
-
-// propsMock.params = jest.fn();
  export default propsMock;
\ No newline at end of file

From e26211fc60a1a5655dcb3d8c6f0c695167dc1c66 Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Thu, 30 Jul 2020 10:19:18 -0700
Subject: [PATCH 4/7] remove unused Props interface

---
 .../main/report_details/report_details.tsx    | 26 -------------------
 1 file changed, 26 deletions(-)

diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx
index 9aeef6ae..9f2326a4 100644
--- a/public/components/main/report_details/report_details.tsx
+++ b/public/components/main/report_details/report_details.tsx
@@ -33,32 +33,6 @@ import {
 } from '@elastic/eui';
 import { ShareModal } from './share_modal/share_modal';
 
-interface ReportDetailsRouteProps {
-  reportId: string;
-  httpClient: any;
-  reportDetailsMetadata: {
-    report_name: string;
-    description: string;
-    created: string;
-    last_updated: string;
-    source_type: string;
-    source: string;
-    default_file_format: string;
-    report_header: string;
-    report_footer: string;
-    report_type: string;
-    schedule_type: string;
-    schedule_details: string;
-    alert_details: string;
-    channel: string;
-    kibana_recipients: string;
-    email_recipients: string;
-    email_subject: string;
-    email_body: string;
-    report_as_attachment: boolean;
-  };
-}
-
 export const ReportDetailsComponent = (props) => {
   const { reportDetailsComponentTitle, reportDetailsComponentContent } = props;
 

From 1124f2c8af403efe92b9dc6aa82ca07caeb1db71 Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Fri, 14 Aug 2020 11:38:56 -0700
Subject: [PATCH 5/7] Addressed comments- removed unused httpclient in props
 and changed to camelCase

---
 .../__tests__/report_details.test.tsx         | 26 --------
 .../main/report_details/report_details.tsx    | 66 +++++++++----------
 test/propsMock.js                             |  3 +-
 3 files changed, 34 insertions(+), 61 deletions(-)

diff --git a/public/components/main/report_details/__tests__/report_details.test.tsx b/public/components/main/report_details/__tests__/report_details.test.tsx
index 7d27a0a9..c1d282bc 100644
--- a/public/components/main/report_details/__tests__/report_details.test.tsx
+++ b/public/components/main/report_details/__tests__/report_details.test.tsx
@@ -21,32 +21,6 @@ import httpClientMock from '../../../../../test/httpMockClient';
 import 'babel-polyfill';
 
 describe('<ReportDetails /> panel', () => {
-  const created_date = new Date('April 20, 2020 20:32:12');
-
-  // since props is currently empty, snapshot test depends on const supplied from report_details.tsx
-  // will be fixed after front-end connected w/ back-end and props is defined
-  const reportDetailsMockMetadata = {
-    report_name: 'Daily Sales Report-232o2jsf28492h3rjskfbwjk23',
-    description: 'Report Description Here',
-    created: created_date.toString(),
-    last_updated: created_date.toString(),
-    source_type: 'Download',
-    source: 'dashboard/daily_sales',
-    default_file_format: 'PDF',
-    report_header: '--',
-    report_footer: '--',
-    report_type: 'Schedule',
-    schedule_type: 'Now',
-    schedule_details: '--',
-    alert_details: '--',
-    channel: 'Kibana Reports',
-    kibana_recipients: 'admin',
-    email_recipients: '--',
-    email_subject: '--',
-    email_body: '--',
-    report_as_attachment: false,
-  };
-
   const match = {
     params: {
       reportId: "1"
diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx
index 9f2326a4..018f64fa 100644
--- a/public/components/main/report_details/report_details.tsx
+++ b/public/components/main/report_details/report_details.tsx
@@ -53,7 +53,6 @@ export const ReportDetailsComponent = (props) => {
 export function ReportDetails(props) {
   const [reportDetails, setReportDetails] = useState({});
   const reportId = props.match["params"]["reportId"];
-  // todo: replace values with values from props.reportDetailsMetadata
 
   const handleReportDetails = (e) => {
     setReportDetails(e);
@@ -61,25 +60,25 @@ export function ReportDetails(props) {
 
   const getReportDetailsData = (data) => {
     let reportDetails = {
-      report_name: data["report_name"],
+      reportName: data["report_name"],
       description: data["description"],
       created: data["time_created"],
-      last_updated: "--",
-      source_type: data["report_type"],
-      source: data["source_type"],
-      default_file_format: data["report_params"]["report_format"],
-      report_header: '--',
-      report_footer: '--',
-      report_type: data["report_type"],
-      schedule_type: '--',
-      schedule_details: '--',
-      alert_details: '--',
+      lastUpdated: "--",
+      sourceType: data["report_type"],
+      source: data["report_source"],
+      defaultFileFormat: data["report_params"]["report_format"],
+      reportHeader: '--',
+      reportFooter: '--',
+      reportType: data["report_type"],
+      scheduleType: '--',
+      scheduleDetails: '--',
+      alertDetails: '--',
       channel: '--',
-      kibana_recipients: '--',
-      email_recipients: '--',
-      email_subject: '--',
-      email_body: '--',
-      report_as_attachment: false
+      kibanaRecipients: '--',
+      emailRecipients: '--',
+      emailSubject: '--',
+      emailBody: '--',
+      reportAsAttachment: false
     }
     return reportDetails;
   }
@@ -88,6 +87,7 @@ export function ReportDetails(props) {
     const { httpClient } = props;
     httpClient.get('../api/reporting/reports/' + reportId)
       .then((response) => {
+        console.log("respnose is", response);
         handleReportDetails(getReportDetailsData(response));
       })
       .catch((error) => {
@@ -95,7 +95,7 @@ export function ReportDetails(props) {
       })
   }, []);
 
-  const includeReportAsAttachmentString = reportDetails["report_as_attachment"]
+  const includeReportAsAttachmentString = reportDetails["reportAsAttachment"]
     ? 'True'
     : 'False';
   return (
@@ -110,7 +110,7 @@ export function ReportDetails(props) {
             <EuiFlexItem>
               <EuiPageHeaderSection>
                 <EuiTitle>
-                  <h2>{reportDetails["report_name"]}</h2>
+                  <h2>{reportDetails["reportName"]}</h2>
                 </EuiTitle>
               </EuiPageHeaderSection>
             </EuiFlexItem>
@@ -150,7 +150,7 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Name'}
-              reportDetailsComponentContent={reportDetails["report_name"]}
+              reportDetailsComponentContent={reportDetails["reportName"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Description'}
@@ -162,14 +162,14 @@ export function ReportDetails(props) {
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Last updated'}
-              reportDetailsComponentContent={reportDetails["last_updated"]}
+              reportDetailsComponentContent={reportDetails["lastUpdated"]}
             />
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source type'}
-              reportDetailsComponentContent={reportDetails["source_type"]}
+              reportDetailsComponentContent={reportDetails["sourceType"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source'}
@@ -178,7 +178,7 @@ export function ReportDetails(props) {
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Default file format'}
               reportDetailsComponentContent={
-                reportDetails["default_file_format"]
+                reportDetails["defaultFileFormat"]
               }
             />
             <ReportDetailsComponent />
@@ -188,13 +188,13 @@ export function ReportDetails(props) {
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report header'}
               reportDetailsComponentContent={
-                reportDetails["report_header"]
+                reportDetails["reportHeader"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report footer'}
               reportDetailsComponentContent={
-                reportDetails["report_footer"]
+                reportDetails["reportFooter"]
               }
             />
             <ReportDetailsComponent />
@@ -208,24 +208,24 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report type'}
-              reportDetailsComponentContent={reportDetails["report_type"]}
+              reportDetailsComponentContent={reportDetails["reportType"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule type'}
               reportDetailsComponentContent={
-                reportDetails["schedule_type"]
+                reportDetails["scheduleType"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule details'}
               reportDetailsComponentContent={
-                reportDetails["schedule_details"]
+                reportDetails["scheduleDetails"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Alert details'}
               reportDetailsComponentContent={
-                reportDetails["alert_details"]
+                reportDetails["alertDetails"]
               }
             />
           </EuiFlexGroup>
@@ -242,19 +242,19 @@ export function ReportDetails(props) {
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Kibana recipients'}
               reportDetailsComponentContent={
-                reportDetails["kibana_recipients"]
+                reportDetails["kibanaRecipients"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email recipients'}
               reportDetailsComponentContent={
-                reportDetails["email_recipients"]
+                reportDetails["emailRecipients"]
               }
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email subject'}
               reportDetailsComponentContent={
-                reportDetails["email_subject"]
+                reportDetails["emailSubject"]
               }
             />
           </EuiFlexGroup>
@@ -262,7 +262,7 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email body'}
-              reportDetailsComponentContent={reportDetails["email_body"]}
+              reportDetailsComponentContent={reportDetails["emailBody"]}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Include report as attachment'}
diff --git a/test/propsMock.js b/test/propsMock.js
index c2f4b183..06320f30 100644
--- a/test/propsMock.js
+++ b/test/propsMock.js
@@ -20,5 +20,4 @@
      }
    }
  };
-
- export default propsMock;
\ No newline at end of file
+ export default propsMock;

From e4d936884b7d6b655654403bb295408e5665725b Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Fri, 14 Aug 2020 11:43:56 -0700
Subject: [PATCH 6/7] ran prettier and removed console log

---
 .../__tests__/report_details.test.tsx         |  7 +-
 .../main/report_details/report_details.tsx    | 92 ++++++++-----------
 2 files changed, 40 insertions(+), 59 deletions(-)

diff --git a/public/components/main/report_details/__tests__/report_details.test.tsx b/public/components/main/report_details/__tests__/report_details.test.tsx
index c1d282bc..f0018a55 100644
--- a/public/components/main/report_details/__tests__/report_details.test.tsx
+++ b/public/components/main/report_details/__tests__/report_details.test.tsx
@@ -23,9 +23,9 @@ import 'babel-polyfill';
 describe('<ReportDetails /> panel', () => {
   const match = {
     params: {
-      reportId: "1"
-    }
-  }
+      reportId: '1',
+    },
+  };
 
   test('render component', async (done) => {
     const { container } = await render(
@@ -34,7 +34,6 @@ describe('<ReportDetails /> panel', () => {
         props={propsMock}
         match={match}
       />
-
     );
     await expect(container.firstChild).toMatchSnapshot();
     done();
diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx
index 018f64fa..86c382c6 100644
--- a/public/components/main/report_details/report_details.tsx
+++ b/public/components/main/report_details/report_details.tsx
@@ -52,24 +52,24 @@ export const ReportDetailsComponent = (props) => {
 
 export function ReportDetails(props) {
   const [reportDetails, setReportDetails] = useState({});
-  const reportId = props.match["params"]["reportId"];
+  const reportId = props.match['params']['reportId'];
 
   const handleReportDetails = (e) => {
     setReportDetails(e);
-  }
+  };
 
   const getReportDetailsData = (data) => {
     let reportDetails = {
-      reportName: data["report_name"],
-      description: data["description"],
-      created: data["time_created"],
-      lastUpdated: "--",
-      sourceType: data["report_type"],
-      source: data["report_source"],
-      defaultFileFormat: data["report_params"]["report_format"],
+      reportName: data['report_name'],
+      description: data['description'],
+      created: data['time_created'],
+      lastUpdated: '--',
+      sourceType: data['report_type'],
+      source: data['report_source'],
+      defaultFileFormat: data['report_params']['report_format'],
       reportHeader: '--',
       reportFooter: '--',
-      reportType: data["report_type"],
+      reportType: data['report_type'],
       scheduleType: '--',
       scheduleDetails: '--',
       alertDetails: '--',
@@ -78,24 +78,24 @@ export function ReportDetails(props) {
       emailRecipients: '--',
       emailSubject: '--',
       emailBody: '--',
-      reportAsAttachment: false
-    }
+      reportAsAttachment: false,
+    };
     return reportDetails;
-  }
+  };
 
   useEffect(() => {
     const { httpClient } = props;
-    httpClient.get('../api/reporting/reports/' + reportId)
+    httpClient
+      .get('../api/reporting/reports/' + reportId)
       .then((response) => {
-        console.log("respnose is", response);
         handleReportDetails(getReportDetailsData(response));
       })
       .catch((error) => {
-        console.log("Error when fetching report details: ", error);
-      })
+        console.log('Error when fetching report details: ', error);
+      });
   }, []);
 
-  const includeReportAsAttachmentString = reportDetails["reportAsAttachment"]
+  const includeReportAsAttachmentString = reportDetails['reportAsAttachment']
     ? 'True'
     : 'False';
   return (
@@ -110,7 +110,7 @@ export function ReportDetails(props) {
             <EuiFlexItem>
               <EuiPageHeaderSection>
                 <EuiTitle>
-                  <h2>{reportDetails["reportName"]}</h2>
+                  <h2>{reportDetails['reportName']}</h2>
                 </EuiTitle>
               </EuiPageHeaderSection>
             </EuiFlexItem>
@@ -150,36 +150,34 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Name'}
-              reportDetailsComponentContent={reportDetails["reportName"]}
+              reportDetailsComponentContent={reportDetails['reportName']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Description'}
-              reportDetailsComponentContent={reportDetails["description"]}
+              reportDetailsComponentContent={reportDetails['description']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Created'}
-              reportDetailsComponentContent={reportDetails["created"]}
+              reportDetailsComponentContent={reportDetails['created']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Last updated'}
-              reportDetailsComponentContent={reportDetails["lastUpdated"]}
+              reportDetailsComponentContent={reportDetails['lastUpdated']}
             />
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source type'}
-              reportDetailsComponentContent={reportDetails["sourceType"]}
+              reportDetailsComponentContent={reportDetails['sourceType']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Source'}
-              reportDetailsComponentContent={reportDetails["source"]}
+              reportDetailsComponentContent={reportDetails['source']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Default file format'}
-              reportDetailsComponentContent={
-                reportDetails["defaultFileFormat"]
-              }
+              reportDetailsComponentContent={reportDetails['defaultFileFormat']}
             />
             <ReportDetailsComponent />
           </EuiFlexGroup>
@@ -187,15 +185,11 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report header'}
-              reportDetailsComponentContent={
-                reportDetails["reportHeader"]
-              }
+              reportDetailsComponentContent={reportDetails['reportHeader']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report footer'}
-              reportDetailsComponentContent={
-                reportDetails["reportFooter"]
-              }
+              reportDetailsComponentContent={reportDetails['reportFooter']}
             />
             <ReportDetailsComponent />
             <ReportDetailsComponent />
@@ -208,25 +202,19 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Report type'}
-              reportDetailsComponentContent={reportDetails["reportType"]}
+              reportDetailsComponentContent={reportDetails['reportType']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule type'}
-              reportDetailsComponentContent={
-                reportDetails["scheduleType"]
-              }
+              reportDetailsComponentContent={reportDetails['scheduleType']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Schedule details'}
-              reportDetailsComponentContent={
-                reportDetails["scheduleDetails"]
-              }
+              reportDetailsComponentContent={reportDetails['scheduleDetails']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Alert details'}
-              reportDetailsComponentContent={
-                reportDetails["alertDetails"]
-              }
+              reportDetailsComponentContent={reportDetails['alertDetails']}
             />
           </EuiFlexGroup>
           <EuiSpacer />
@@ -237,32 +225,26 @@ export function ReportDetails(props) {
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Channel'}
-              reportDetailsComponentContent={reportDetails["channel"]}
+              reportDetailsComponentContent={reportDetails['channel']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Kibana recipients'}
-              reportDetailsComponentContent={
-                reportDetails["kibanaRecipients"]
-              }
+              reportDetailsComponentContent={reportDetails['kibanaRecipients']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email recipients'}
-              reportDetailsComponentContent={
-                reportDetails["emailRecipients"]
-              }
+              reportDetailsComponentContent={reportDetails['emailRecipients']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email subject'}
-              reportDetailsComponentContent={
-                reportDetails["emailSubject"]
-              }
+              reportDetailsComponentContent={reportDetails['emailSubject']}
             />
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiFlexGroup>
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email body'}
-              reportDetailsComponentContent={reportDetails["emailBody"]}
+              reportDetailsComponentContent={reportDetails['emailBody']}
             />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Include report as attachment'}

From a52d97685c7d681ded0fb69619e55c56b35f1d6f Mon Sep 17 00:00:00 2001
From: David Cui <davidcui@amazon.com>
Date: Fri, 14 Aug 2020 12:30:10 -0700
Subject: [PATCH 7/7] changed empty eui flex items syntax

---
 .../components/main/report_details/report_details.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx
index 86c382c6..d4b0f45d 100644
--- a/public/components/main/report_details/report_details.tsx
+++ b/public/components/main/report_details/report_details.tsx
@@ -119,11 +119,11 @@ export function ReportDetails(props) {
               alignItems="flexEnd"
               gutterSize="xs"
             >
-              <EuiFlexItem></EuiFlexItem>
-              <EuiFlexItem></EuiFlexItem>
-              <EuiFlexItem></EuiFlexItem>
-              <EuiFlexItem></EuiFlexItem>
-              <EuiFlexItem></EuiFlexItem>
+              <EuiFlexItem />
+              <EuiFlexItem />
+              <EuiFlexItem />
+              <EuiFlexItem />
+              <EuiFlexItem />
               <EuiFlexItem>
                 <EuiText size="xs">
                   <h2>