From fcdaf0bbd6b7ed4adb330f9915f949c566ca2647 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 17 Jan 2025 03:55:38 +1100
Subject: [PATCH] =?UTF-8?q?[8.x]=20=F0=9F=8C=8A=20Streams:=20Fix=20routing?=
 =?UTF-8?q?=20UI=20for=20no-condition=20routing=20(#206752)=20(#206965)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [🌊 Streams: Fix routing UI for no-condition routing
(#206752)](https://github.com/elastic/kibana/pull/206752)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Joe
Reuter","email":"johannes.reuter@elastic.co"},"sourceCommit":{"committedDate":"2025-01-16T15:23:18Z","message":"🌊
Streams: Fix routing UI for no-condition routing (#206752)\n\nIt is
possible for a stream to end up with no routing condition. This
is\nuseful to stop routing to a child, but keep the child stream
around.\nCurrently, this is not handled well by the UI - the font size
is wrong\nand there is no way to change it:\n<img width=\"671\"
alt=\"Screenshot 2025-01-15 at 13 25
12\"\nsrc=\"https://github.com/user-attachments/assets/25d45969-eff8-449b-9f75-831aa6c46a25\"\n/>\n\nThis
PR fixes this:\n<img width=\"684\" alt=\"Screenshot 2025-01-15 at 13 24
38\"\nsrc=\"https://github.com/user-attachments/assets/dd9399e9-0841-4962-a8af-b15dc922cc6d\"\n/>\n\n<img
width=\"660\" alt=\"Screenshot 2025-01-15 at 13 33
47\"\nsrc=\"https://github.com/user-attachments/assets/c0a33aec-3c94-46c4-b440-2d582522f89e\"\n/>","sha":"49f97246801835373c77222eda97c4c48ceb027f","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:version","v8.18.0","Feature:Streams"],"title":"🌊
Streams: Fix routing UI for no-condition
routing","number":206752,"url":"https://github.com/elastic/kibana/pull/206752","mergeCommit":{"message":"🌊
Streams: Fix routing UI for no-condition routing (#206752)\n\nIt is
possible for a stream to end up with no routing condition. This
is\nuseful to stop routing to a child, but keep the child stream
around.\nCurrently, this is not handled well by the UI - the font size
is wrong\nand there is no way to change it:\n<img width=\"671\"
alt=\"Screenshot 2025-01-15 at 13 25
12\"\nsrc=\"https://github.com/user-attachments/assets/25d45969-eff8-449b-9f75-831aa6c46a25\"\n/>\n\nThis
PR fixes this:\n<img width=\"684\" alt=\"Screenshot 2025-01-15 at 13 24
38\"\nsrc=\"https://github.com/user-attachments/assets/dd9399e9-0841-4962-a8af-b15dc922cc6d\"\n/>\n\n<img
width=\"660\" alt=\"Screenshot 2025-01-15 at 13 33
47\"\nsrc=\"https://github.com/user-attachments/assets/c0a33aec-3c94-46c4-b440-2d582522f89e\"\n/>","sha":"49f97246801835373c77222eda97c4c48ceb027f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206752","number":206752,"mergeCommit":{"message":"🌊
Streams: Fix routing UI for no-condition routing (#206752)\n\nIt is
possible for a stream to end up with no routing condition. This
is\nuseful to stop routing to a child, but keep the child stream
around.\nCurrently, this is not handled well by the UI - the font size
is wrong\nand there is no way to change it:\n<img width=\"671\"
alt=\"Screenshot 2025-01-15 at 13 25
12\"\nsrc=\"https://github.com/user-attachments/assets/25d45969-eff8-449b-9f75-831aa6c46a25\"\n/>\n\nThis
PR fixes this:\n<img width=\"684\" alt=\"Screenshot 2025-01-15 at 13 24
38\"\nsrc=\"https://github.com/user-attachments/assets/dd9399e9-0841-4962-a8af-b15dc922cc6d\"\n/>\n\n<img
width=\"660\" alt=\"Screenshot 2025-01-15 at 13 33
47\"\nsrc=\"https://github.com/user-attachments/assets/c0a33aec-3c94-46c4-b440-2d582522f89e\"\n/>","sha":"49f97246801835373c77222eda97c4c48ceb027f"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
---
 .../components/condition_editor/index.tsx     | 48 ++++++++++-----
 .../stream_detail_routing/index.tsx           | 58 +++++++------------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/streams_app/public/components/condition_editor/index.tsx b/x-pack/solutions/observability/plugins/streams_app/public/components/condition_editor/index.tsx
index 0b08ca68dc6f7..0b81072d661ab 100644
--- a/x-pack/solutions/observability/plugins/streams_app/public/components/condition_editor/index.tsx
+++ b/x-pack/solutions/observability/plugins/streams_app/public/components/condition_editor/index.tsx
@@ -7,6 +7,7 @@
 
 import {
   EuiBadge,
+  EuiButton,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -14,6 +15,7 @@ import {
   EuiSelect,
   EuiSwitch,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 import {
   AndCondition,
@@ -32,9 +34,6 @@ export function ConditionEditor(props: {
   readonly?: boolean;
   onConditionChange?: (condition: Condition) => void;
 }) {
-  if (!props.condition) {
-    return null;
-  }
   if (props.readonly) {
     return (
       <EuiPanel color="subdued" borderRadius="none" hasShadow={false} paddingSize="xs">
@@ -67,7 +66,7 @@ export function ConditionForm(props: {
   }, [syntaxEditor, props.condition]);
   return (
     <EuiFlexGroup direction="column" gutterSize="xs">
-      <EuiFlexGroup>
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
         <EuiFlexItem grow>
           <EuiText
             className={css`
@@ -78,6 +77,22 @@ export function ConditionForm(props: {
             {i18n.translate('xpack.streams.conditionEditor.title', { defaultMessage: 'Condition' })}
           </EuiText>
         </EuiFlexItem>
+        <EuiToolTip
+          content={i18n.translate('xpack.streams.conditionEditor.disableTooltip', {
+            defaultMessage: 'Route no documents to this stream without deleting existing data',
+          })}
+        >
+          <EuiButton
+            size={'xs' as 's'} // TODO: remove this cast when EUI is updated - EuiButton takes xs, but the type is wrong
+            onClick={() => props.onConditionChange(undefined)}
+            disabled={props.condition === undefined}
+          >
+            {i18n.translate('xpack.streams.conditionEditor.disable', {
+              defaultMessage: 'Disable routing',
+            })}
+          </EuiButton>
+        </EuiToolTip>
+
         <EuiSwitch
           label={i18n.translate('xpack.streams.conditionEditor.switch', {
             defaultMessage: 'Syntax editor',
@@ -102,16 +117,15 @@ export function ConditionForm(props: {
             }
           }}
         />
+      ) : !props.condition || 'operator' in props.condition ? (
+        <FilterForm
+          condition={
+            (props.condition as FilterCondition) || { field: '', operator: 'eq', value: '' }
+          }
+          onConditionChange={props.onConditionChange}
+        />
       ) : (
-        props.condition &&
-        ('operator' in props.condition ? (
-          <FilterForm
-            condition={props.condition as FilterCondition}
-            onConditionChange={props.onConditionChange}
-          />
-        ) : (
-          <pre>{JSON.stringify(props.condition, null, 2)}</pre>
-        ))
+        <pre>{JSON.stringify(props.condition, null, 2)}</pre>
       )}
     </EuiFlexGroup>
   );
@@ -213,7 +227,13 @@ function FilterForm(props: {
 
 export function ConditionDisplay(props: { condition: Condition }) {
   if (!props.condition) {
-    return null;
+    return (
+      <>
+        {i18n.translate('xpack.streams.streamDetailRouting.noCondition', {
+          defaultMessage: 'No condition, no documents will be routed',
+        })}
+      </>
+    );
   }
   return (
     <>
diff --git a/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx b/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
index 5c9d5f0931585..2c848575eb570 100644
--- a/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
+++ b/x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx
@@ -906,25 +906,16 @@ function RoutingStreamEntry({
           })}
         />
       </EuiFlexGroup>
-      {child.condition && (
-        <ConditionEditor
-          readonly={!edit}
-          condition={child.condition}
-          onConditionChange={(condition) => {
-            onChildChange({
-              ...child,
-              condition,
-            });
-          }}
-        />
-      )}
-      {!child.condition && (
-        <EuiText>
-          {i18n.translate('xpack.streams.streamDetailRouting.noCondition', {
-            defaultMessage: 'No condition, no documents will be routed',
-          })}
-        </EuiText>
-      )}
+      <ConditionEditor
+        readonly={!edit}
+        condition={child.condition}
+        onConditionChange={(condition) => {
+          onChildChange({
+            ...child,
+            condition,
+          });
+        }}
+      />
     </EuiPanel>
   );
 }
@@ -958,25 +949,16 @@ function NewRoutingStreamEntry({
             }}
           />
         </EuiFormRow>
-        {child.condition && (
-          <ConditionEditor
-            readonly={false}
-            condition={child.condition}
-            onConditionChange={(condition) => {
-              onChildChange({
-                ...child,
-                condition,
-              });
-            }}
-          />
-        )}
-        {!child.condition && (
-          <EuiText>
-            {i18n.translate('xpack.streams.streamDetailRouting.noCondition', {
-              defaultMessage: 'No condition, no documents will be routed',
-            })}
-          </EuiText>
-        )}
+        <ConditionEditor
+          readonly={false}
+          condition={child.condition}
+          onConditionChange={(condition) => {
+            onChildChange({
+              ...child,
+              condition,
+            });
+          }}
+        />
       </EuiFlexGroup>
     </EuiPanel>
   );