Updating modal wording

elastic · Feb 9, 2021 · 4a134a7 · 4a134a7
1 parent 6f85e7d
commit 4a134a7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -99,7 +99,10 @@ export const AlertsList: React.FunctionComponent = () => {
   const [alertStatusesFilter, setAlertStatusesFilter] = useState<string[]>([]);
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
   const [dismissAlertErrors, setDismissAlertErrors] = useState<boolean>(false);
-  const [manageLicenseMessage, setManageLicenseMessage] = useState<string | undefined>(undefined);
+  const [manageLicenseModalOpts, setManageLicenseModalOpts] = useState<{
+    licenseType: string;
+    alertTypeId: string;
+  } | null>(null);
   const [alertsStatusesTotal, setAlertsStatusesTotal] = useState<Record<string, number>>(
     AlertExecutionStatusValues.reduce(
       (prev: Record<string, number>, status: string) =>
@@ -240,7 +243,10 @@ export const AlertsList: React.FunctionComponent = () => {
     }
   }
 
-  const renderAlertExecutionStatus = (executionStatus: AlertExecutionStatus) => {
+  const renderAlertExecutionStatus = (
+    executionStatus: AlertExecutionStatus,
+    item: AlertTableItem
+  ) => {
     const healthColor = getHealthColor(executionStatus.status);
     const tooltipMessage =
       executionStatus.status === 'error' ? `Error: ${executionStatus?.error?.message}` : null;
@@ -276,7 +282,12 @@ export const AlertsList: React.FunctionComponent = () => {
             <EuiButtonEmpty
               size="xs"
               data-test-subj="alertStatus-error-license-fix"
-              onClick={() => setManageLicenseMessage(executionStatus?.error?.message)}
+              onClick={() =>
+                setManageLicenseModalOpts({
+                  licenseType: alertTypesState.data.get(item.alertTypeId)?.minimumLicenseRequired!,
+                  alertTypeId: item.alertTypeId,
+                })
+              }
             >
               <FormattedMessage
                 id="xpack.triggersActionsUI.sections.alertsList.fixLicenseLink"
@@ -323,8 +334,8 @@ export const AlertsList: React.FunctionComponent = () => {
       truncateText: false,
       width: '150px',
       'data-test-subj': 'alertsTableCell-status',
-      render: (executionStatus: AlertExecutionStatus) => {
-        return renderAlertExecutionStatus(executionStatus);
+      render: (executionStatus: AlertExecutionStatus, item: AlertTableItem) => {
+        return renderAlertExecutionStatus(executionStatus, item);
       },
     },
     {
@@ -673,14 +684,15 @@ export const AlertsList: React.FunctionComponent = () => {
           setPage(changedPage);
         }}
       />
-      {manageLicenseMessage !== undefined && (
+      {manageLicenseModalOpts && (
         <ManageLicenseModal
-          message={manageLicenseMessage}
+          licenseType={manageLicenseModalOpts.licenseType}
+          alertTypeId={manageLicenseModalOpts.alertTypeId}
           onConfirm={() => {
             window.open(`${http.basePath.get()}/app/management/stack/license_management`, '_blank');
-            setManageLicenseMessage(undefined);
+            setManageLicenseModalOpts(null);
           }}
-          onCancel={() => setManageLicenseMessage(undefined)}
+          onCancel={() => setManageLicenseModalOpts(null)}
         />
       )}
     </Fragment>

diff --git a/...rs_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx b/...rs_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx
@@ -7,20 +7,30 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+import { capitalize } from 'lodash';
 
 interface Props {
-  message?: string;
+  licenseType: string;
+  alertTypeId: string;
   onConfirm: () => void;
   onCancel: () => void;
 }
 
-export const ManageLicenseModal: React.FC<Props> = ({ message, onConfirm, onCancel }) => {
+export const ManageLicenseModal: React.FC<Props> = ({
+  licenseType,
+  alertTypeId,
+  onConfirm,
+  onCancel,
+}) => {
+  const licenseRequired = capitalize(licenseType);
   return (
     <EuiOverlayMask>
       <EuiConfirmModal
         title={i18n.translate('xpack.triggersActionsUI.sections.manageLicense.manageLicenseTitle', {
-          defaultMessage: 'Upgrade license?',
+          defaultMessage: '{licenseRequired} license required',
+          values: { licenseRequired },
         })}
         onCancel={onCancel}
         onConfirm={onConfirm}
@@ -39,7 +49,13 @@ export const ManageLicenseModal: React.FC<Props> = ({ message, onConfirm, onCanc
         defaultFocusedButton="confirm"
         data-test-subj="manageLicenseModal"
       >
-        <p>{message}</p>
+        <p>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.manageLicense.manageLicenseMessage"
+            defaultMessage="Alert {alertTypeId} is disabled because it requires a {licenseRequired} license. Continue to License Management to view upgrade options."
+            values={{ alertTypeId, licenseRequired }}
+          />
+        </p>
       </EuiConfirmModal>
     </EuiOverlayMask>
   );