[FEATURE] Create detector \ Refactor and move field mapping to first …

…the page of create detector feature opensearch-project#495 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
jovancacvetkovic · Apr 5, 2023 · f933e28 · f933e28
1 parent bb277ae
commit f933e28
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git a/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx b/...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
@@ -311,7 +311,7 @@ export default class AlertConditionPanel extends Component<
           error={getNameErrorMessage(name, nameIsInvalid, nameFieldTouched)}
         >
           <EuiFieldText
-            placeholder={'Enter a name for the alert condition.'}
+            placeholder={'Enter a name to describe the alert condition'}
             readOnly={false}
             value={name}
             onBlur={this.onNameBlur}

diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -17,7 +17,6 @@ import {
 import { createDetectorSteps } from '../../../utils/constants';
 import { MAX_ALERT_CONDITIONS } from '../utils/constants';
 import AlertConditionPanel from '../components/AlertCondition';
-import { Detector } from '../../../../../../models/interfaces';
 import { DetectorCreationStep } from '../../../models/types';
 import { CreateDetectorRulesOptions } from '../../../../../models/types';
 import { NotificationChannelTypeOptions } from '../models/interfaces';
@@ -30,6 +29,7 @@ import { NotificationsService } from '../../../../../services';
 import { validateName } from '../../../../../utils/validation';
 import { CoreServicesContext } from '../../../../../components/core_services';
 import { BREADCRUMBS } from '../../../../../utils/constants';
+import { Detector } from '../../../../../../types';
 
 interface ConfigureAlertsProps extends RouteComponentProps {
   detector: Detector;
@@ -82,7 +82,7 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
       detector: { triggers },
     } = this.props;
     this.getNotificationChannels();
-    
+
     if (triggers.length === 0) {
       this.addCondition();
     }
@@ -142,9 +142,8 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
         <EuiTitle size={'m'}>
           <h3>
             {isEdit
-              ? 'Edit alert triggers'
-              : createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title +
-                ` (${triggers.length})`}
+              ? `Alert triggers (${triggers.length})`
+              : createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title}
           </h3>
         </EuiTitle>
 
@@ -162,19 +161,15 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
                 id={`alert-condition-${index}`}
                 buttonContent={
                   <EuiTitle>
-                    <h4>{alertCondition.name}</h4>
+                    <h4>{isEdit ? alertCondition.name : 'Alert trigger'}</h4>
                   </EuiTitle>
                 }
                 paddingSize={'none'}
                 initialIsOpen={true}
                 extraAction={
-                  triggers.length > 1 ? (
-                    <EuiButton color="danger" onClick={() => this.onDelete(index)}>
-                      Remove alert trigger
-                    </EuiButton>
-                  ) : (
-                    <></>
-                  )
+                  <EuiButton color="danger" onClick={() => this.onDelete(index)}>
+                    Remove
+                  </EuiButton>
                 }
               >
                 <EuiHorizontalRule margin={'xs'} />
@@ -197,7 +192,7 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
         <EuiSpacer size={'m'} />
 
         <EuiButton disabled={triggers.length >= MAX_ALERT_CONDITIONS} onClick={this.addCondition}>
-          {`Add ${triggers.length > 0 ? 'another' : 'an'} alert condition`}
+          {triggers.length > 0 ? 'Add another alert trigger' : 'Add alert triggers'}
         </EuiButton>
       </div>
     );

diff --git a/public/pages/CreateDetector/utils/constants.ts b/public/pages/CreateDetector/utils/constants.ts
@@ -16,7 +16,7 @@ export const createDetectorSteps: Record<DetectorCreationStep, DetectorCreationS
     step: 2,
   },
   [DetectorCreationStep.CONFIGURE_ALERTS]: {
-    title: 'Set up alerts',
+    title: 'Set up alert triggers',
     step: 3,
   },
   [DetectorCreationStep.REVIEW_CREATE]: {