From 5d03a4616c710320b6fca92eed8316f4bc3a4e02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= <contact@patrykkopycinski.com>
Date: Mon, 13 Jan 2020 18:11:12 +0100
Subject: [PATCH] PR comments

---
 .../components/optional_field_label/index.tsx    | 16 ++++++++++++++++
 .../components/schedule_item_form/index.tsx      | 11 +++++++++--
 .../rules/components/step_about_rule/schema.tsx  | 10 +---------
 .../components/step_schedule_rule/schema.tsx     |  6 ++----
 4 files changed, 28 insertions(+), 15 deletions(-)
 create mode 100644 x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx
new file mode 100644
index 0000000000000..0dab87b0a3b74
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiText } from '@elastic/eui';
+import React from 'react';
+
+import * as RuleI18n from '../../translations';
+
+export const OptionalFieldLabel = (
+  <EuiText color="subdued" size="xs">
+    {RuleI18n.OPTIONAL_FIELD}
+  </EuiText>
+);
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
index a524dc079fb03..fa4bea319f859 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
@@ -33,6 +33,13 @@ const timeTypeOptions = [
   { value: 'h', text: I18n.HOURS },
 ];
 
+// move optional label to the end of input
+const StyledLabelAppend = styled(EuiFlexItem)`
+  &.euiFlexItem.euiFlexItem--flexGrowZero {
+    margin-left: 31px;
+  }
+`;
+
 const StyledEuiFormRow = styled(EuiFormRow)`
   max-width: none;
 
@@ -107,9 +114,9 @@ export const ScheduleItem = ({ dataTestSubj, field, idAria, isDisabled }: Schedu
         <EuiFlexItem grow={false} component="span">
           {field.label}
         </EuiFlexItem>
-        <EuiFlexItem grow={false} component="span">
+        <StyledLabelAppend grow={false} component="span">
           {field.labelAppend}
-        </EuiFlexItem>
+        </StyledLabelAppend>
       </EuiFlexGroup>
     ),
     [field.label, field.labelAppend]
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx
index dbde3431a173c..3de0e7605f3d9 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx
@@ -4,11 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
 
-import * as RuleI18n from '../../translations';
 import { IMitreEnterpriseAttack } from '../../types';
 import {
   FIELD_TYPES,
@@ -18,17 +15,12 @@ import {
   ERROR_CODE,
 } from '../shared_imports';
 import { isMitreAttackInvalid } from '../mitre/helpers';
+import { OptionalFieldLabel } from '../optional_field_label';
 import { isUrlInvalid } from './helpers';
 import * as I18n from './translations';
 
 const { emptyField } = fieldValidators;
 
-const OptionalFieldLabel = (
-  <EuiText color="subdued" size="xs">
-    {RuleI18n.OPTIONAL_FIELD}
-  </EuiText>
-);
-
 export const schema: FormSchema = {
   name: {
     type: FIELD_TYPES.TEXT,
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx
index 31e56265dec42..4da17b88b9ad0 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx
@@ -4,11 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiText } from '@elastic/eui';
-import React from 'react';
 import { i18n } from '@kbn/i18n';
 
-import * as RuleI18n from '../../translations';
+import { OptionalFieldLabel } from '../optional_field_label';
 import { FormSchema } from '../shared_imports';
 
 export const schema: FormSchema = {
@@ -33,7 +31,7 @@ export const schema: FormSchema = {
         defaultMessage: 'Additional look-back',
       }
     ),
-    labelAppend: <EuiText size="xs">{RuleI18n.OPTIONAL_FIELD}</EuiText>,
+    labelAppend: OptionalFieldLabel,
     helpText: i18n.translate(
       'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldAdditionalLookBackHelpText',
       {