Add email body template & Optimize notification setting UI

kibana-reports/package.json

@@ -30,6 +30,7 @@
     "@types/dompurify": "^2.0.4",
     "@types/jsdom": "^16.2.4",
     "babel-polyfill": "^6.26.0",
+    "cheerio": "^1.0.0-rc.3",
     "cron-validator": "^1.1.1",
     "dompurify": "^2.1.1",
     "elastic-builder": "^2.7.1",

kibana-reports/public/components/main/report_details/report_details.tsx

@@ -147,20 +147,12 @@ export function ReportDetails(props) {
       scheduleDetails: `\u2014`,
       alertDetails: `\u2014`,
       channel: deliveryType,
-      kibanaRecipients: deliveryParams.kibana_recipients
-        ? deliveryParams.kibana_recipients
-        : `\u2014`,
       emailRecipients:
         deliveryType === 'Channel' ? deliveryParams.recipients : `\u2014`,
       emailSubject:
         deliveryType === 'Channel' ? deliveryParams.title : `\u2014`,
       emailBody:
         deliveryType === 'Channel' ? deliveryParams.textDescription : `\u2014`,
-      reportAsAttachment:
-        deliveryType === 'Channel' &&
-        deliveryParams.email_format === 'Attachment'
-          ? 'True'
-          : 'False',
       queryUrl: queryUrl,
     };
     return reportDetails;
@@ -194,9 +186,16 @@ export function ReportDetails(props) {
     let formatUpper = data['defaultFileFormat'];
     formatUpper = fileFormatsUpper[formatUpper];
     return (
-      <EuiLink onClick={() => {
-        generateReportById(reportId, props.httpClient, handleSuccessToast, handleErrorToast);
-      }}>
+      <EuiLink
+        onClick={() => {
+          generateReportById(
+            reportId,
+            props.httpClient,
+            handleSuccessToast,
+            handleErrorToast
+          );
+        }}
+      >
         {formatUpper + ' '}
         <EuiIcon type="importAction" />
       </EuiLink>
@@ -307,18 +306,10 @@ export function ReportDetails(props) {
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiTitle>
-            <h3>Delivery settings</h3>
+            <h3>Notification settings</h3>
           </EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup>
-            <ReportDetailsComponent
-              reportDetailsComponentTitle={'Channel'}
-              reportDetailsComponentContent={reportDetails['channel']}
-            />
-            <ReportDetailsComponent
-              reportDetailsComponentTitle={'Kibana recipient(s)'}
-              reportDetailsComponentContent={reportDetails['kibanaRecipients']}
-            />
             <ReportDetailsComponent
               reportDetailsComponentTitle={'Email recipient(s)'}
               reportDetailsComponentContent={reportDetails['emailRecipients']}
@@ -327,20 +318,10 @@ export function ReportDetails(props) {
               reportDetailsComponentTitle={'Email subject'}
               reportDetailsComponentContent={reportDetails['emailSubject']}
             />
-          </EuiFlexGroup>
-          <EuiSpacer />
-          <EuiFlexGroup>
             <ReportDetailsComponent
-              reportDetailsComponentTitle={'Email body'}
+              reportDetailsComponentTitle={'Optional message'}
               reportDetailsComponentContent={reportDetails['emailBody']}
             />
-            <ReportDetailsComponent
-              reportDetailsComponentTitle={'Include report as attachment'}
-              reportDetailsComponentContent={
-                reportDetails['reportAsAttachment']
-              }
-            />
-            <ReportDetailsComponent />
             <ReportDetailsComponent />
           </EuiFlexGroup>
         </EuiPageContent>

kibana-reports/public/components/report_definitions/delivery/delivery.tsx

@@ -22,9 +22,8 @@ import {
   EuiPageContentBody,
   EuiHorizontalRule,
   EuiSpacer,
-  EuiRadioGroup,
+  EuiCheckbox,
 } from '@elastic/eui';
-import { KibanaUserDelivery } from './kibana_user';
 import { DELIVERY_TYPE_OPTIONS } from './delivery_constants';
 import 'react-mde/lib/styles/css/react-mde-all.css';
 import { reportDefinitionParams } from '../create/create_report_definition';
@@ -44,54 +43,66 @@ export function ReportDelivery(props: ReportDeliveryProps) {
     editDefinitionId,
     reportDefinitionRequest,
     httpClientProps,
-    showEmailRecipientsError,
   } = props;
 
-  const [deliveryType, setDeliveryType] = useState(DELIVERY_TYPE_OPTIONS[0].id);
+  const [emailCheckbox, setEmailCheckbox] = useState(false);
 
-  const handleDeliveryType = (e: string) => {
-    setDeliveryType(e);
-    reportDefinitionRequest.delivery.delivery_type = e;
+  const handleEmailCheckbox = (e: {
+    target: { checked: React.SetStateAction<boolean> };
+  }) => {
+    setEmailCheckbox(e.target.checked);
+    if (e.target.checked) {
+      // if checked, set delivery type to email
+      reportDefinitionRequest.delivery.delivery_type =
+        DELIVERY_TYPE_OPTIONS[1].id;
+    } else {
+      // uncheck email checkbox means to use default setting, which is kibana user
+      defaultCreateDeliveryParams();
+    }
   };
 
-  const deliverySetting = (props: ReportDeliveryProps) => {
-    return deliveryType === DELIVERY_TYPE_OPTIONS[0].id ? (
-      <KibanaUserDelivery {...props} />
-    ) : (
-      <EmailDelivery {...props} />
-    );
+  const emailDelivery = emailCheckbox ? <EmailDelivery {...props} /> : null;
+
+  const defaultCreateDeliveryParams = () => {
+    reportDefinitionRequest.delivery = {
+      delivery_type: DELIVERY_TYPE_OPTIONS[0].id,
+      delivery_params: { kibana_recipients: [] },
+    };
   };
 
   useEffect(() => {
     if (edit) {
       httpClientProps
         .get(`../api/reporting/reportDefinitions/${editDefinitionId}`)
         .then(async (response) => {
-          handleDeliveryType(response.report_definition.delivery.delivery_type);
+          const isEmailSelected =
+            response.report_definition.delivery.delivery_type ===
+            DELIVERY_TYPE_OPTIONS[1].id;
+          handleEmailCheckbox({ target: { checked: isEmailSelected } });
         });
     } else {
-      reportDefinitionRequest.delivery.delivery_type = deliveryType;
+      // By default it's set to deliver to kibana user
+      defaultCreateDeliveryParams();
     }
   }, []);
 
   return (
     <EuiPageContent panelPaddingSize={'l'}>
       <EuiPageHeader>
         <EuiTitle>
-          <h2>Delivery settings</h2>
+          <h2>Notification settings</h2>
         </EuiTitle>
       </EuiPageHeader>
       <EuiHorizontalRule />
       <EuiPageContentBody>
-        <EuiFormRow label="Delivery type">
-          <EuiRadioGroup
-            options={DELIVERY_TYPE_OPTIONS}
-            idSelected={deliveryType}
-            onChange={handleDeliveryType}
-          />
-        </EuiFormRow>
+        <EuiCheckbox
+          id="emailCheckboxDelivery"
+          label="Add email recipients"
+          checked={emailCheckbox}
+          onChange={handleEmailCheckbox}
+        />
         <EuiSpacer />
-        {deliverySetting(props)}
+        {emailDelivery}
       </EuiPageContentBody>
     </EuiPageContent>
   );

kibana-reports/public/components/report_definitions/delivery/delivery_constants.tsx

@@ -13,27 +13,7 @@
  * permissions and limitations under the License.
  */
 
-export const EMAIL_RECIPIENT_OPTIONS = [
-  // TODO: remove once we support actual kibana users
-  { label: 'admin (self)' },
-  { label: 'davidcui' },
-  { label: 'szhongna' },
-  { label: 'jadhanir' },
-  { label: 'kvngar' },
-];
-
-export const EMAIL_FORMAT_OPTIONS = [
-  {
-    id: 'Attachment',
-    label: 'Email with report as attached file',
-  },
-  // TODO: add it back when we have fully support for embedded html
-  {
-    id: 'Embedded HTML',
-    label: 'Embedded HTML report',
-    disabled: true,
-  },
-];
+export const EMAIL_RECIPIENT_OPTIONS = [];
 
 export const DELIVERY_TYPE_OPTIONS = [
   {