[Streams] Refine Suggestions Before Save (#241439)

## Summary

This PR allows user to edit a given partition suggestion before saving
it.
Cell actions can also be used when editing an AI suggestions same as for
the manually created ones.

## 🎥  Demo

https://github.com/user-attachments/assets/9b65a095-d1cc-478e-b0e1-6584945b7e74

Author: mohamedhamed-ahmed

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/disabled_badge.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function DisabledBadge() {
+  return (
+    <EuiBadge color="subdued">
+      {i18n.translate('xpack.streams.streamDetailRouting.disabled', {
+        defaultMessage: 'Disabled',
+      })}
+    </EuiBadge>
+  );
+}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/index.ts

@@ -8,3 +8,5 @@ export { PreviewFlyout } from './preview_flyout';
 export type { DataTableRecordWithIndex } from './preview_flyout';
 export { MemoPreviewTable } from './preview_table';
 export { ConditionPanel, ConditionDisplay, EditableConditionPanel } from './condition_display';
+export { VerticalRule } from './vertical_rule';
+export { DisabledBadge } from './disabled_badge';

x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/vertical_rule.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import styled from '@emotion/styled';
+import { useEuiTheme } from '@elastic/eui';
+
+export function VerticalRule() {
+  const { euiTheme } = useEuiTheme();
+
+  const CentralizedContainer = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 0 ${euiTheme.size.xs};
+  `;
+
+  const Border = styled.div`
+    height: 20px;
+    border-right: ${euiTheme.border.thin};
+  `;
+
+  return (
+    <CentralizedContainer>
+      <Border />
+    </CentralizedContainer>
+  );
+}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/child_stream_list.tsx

@@ -68,6 +68,7 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
     previewSuggestion,
     acceptSuggestion,
     rejectSuggestion,
+    updateSuggestion,
   } = useReviewSuggestionsForm();
 
   const { currentRuleId, definition, routing } = routingSnapshot.context;
@@ -234,6 +235,7 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
                   rejectSuggestion={rejectSuggestion}
                   resetForm={resetForm}
                   suggestions={suggestions}
+                  updateSuggestion={updateSuggestion}
                 />
               )
             ) : null}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/control_bars.tsx

@@ -79,6 +79,51 @@ export const EditRoutingRuleControls = ({
   );
 };
 
+export const EditSuggestedRuleControls = ({
+  onSave,
+  onAccept,
+  nameError,
+  conditionError,
+}: {
+  onSave?: () => void;
+  onAccept: () => void;
+  nameError?: string;
+  conditionError?: string;
+}) => {
+  const routingSnapshot = useStreamsRoutingSelector((snapshot) => snapshot);
+  const { cancelChanges } = useStreamRoutingEvents();
+
+  const canSave = routingSnapshot.can({ type: 'suggestion.saveSuggestion' });
+  const hasPrivileges = routingSnapshot.context.definition.privileges.manage;
+
+  const hasValidationErrors = !!nameError || !!conditionError;
+  const isUpdateDisabled = hasValidationErrors || !canSave;
+
+  const handleAccept = () => {
+    if (onSave) {
+      onSave();
+    }
+    onAccept();
+  };
+
+  return (
+    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" wrap>
+      <EuiFlexItem grow={false}>
+        <CancelButton onClick={cancelChanges} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <PrivilegesTooltip hasPrivileges={hasPrivileges}>
+          <UpdateAndAcceptButton
+            isLoading={false}
+            isDisabled={isUpdateDisabled}
+            onClick={handleAccept}
+          />
+        </PrivilegesTooltip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
 const RemoveButton = ({
   isDisabled,
   onDelete,
@@ -125,8 +170,21 @@ const SaveButton = (props: EuiButtonPropsForButton) => (
 
 const UpdateButton = (props: EuiButtonPropsForButton) => (
   <EuiButton data-test-subj="streamsAppStreamDetailRoutingUpdateButton" size="s" fill {...props}>
-    {i18n.translate('xpack.streams.streamDetailRouting.change', {
-      defaultMessage: 'Change routing',
+    {i18n.translate('xpack.streams.streamDetailRouting.update', {
+      defaultMessage: 'Update',
+    })}
+  </EuiButton>
+);
+
+const UpdateAndAcceptButton = (props: EuiButtonPropsForButton) => (
+  <EuiButton
+    data-test-subj="streamsAppStreamDetailRoutingUpdateAndAcceptButton"
+    size="s"
+    fill
+    {...props}
+  >
+    {i18n.translate('xpack.streams.streamDetailRouting.updateAndAccept', {
+      defaultMessage: 'Update & Accept',
     })}
   </EuiButton>
 );

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/idle_routing_stream_entry.tsx

@@ -24,30 +24,10 @@ import { i18n } from '@kbn/i18n';
 import { isDescendantOf, isRoutingEnabled } from '@kbn/streams-schema';
 import { css } from '@emotion/css';
 import { css as cssReact } from '@emotion/react';
-import styled from '@emotion/styled';
 import { useStreamsAppRouter } from '../../../hooks/use_streams_app_router';
-import { ConditionPanel } from '../shared';
+import { ConditionPanel, VerticalRule } from '../shared';
 import type { RoutingDefinitionWithUIAttributes } from './types';
-
-function VerticalRule() {
-  const { euiTheme } = useEuiTheme();
-  const CentralizedContainer = styled.div`
-    display: flex;
-    align-items: center;
-    padding: 0 ${euiTheme.size.xs};
-  `;
-
-  const Border = styled.div`
-    height: 20px;
-    border-right: ${euiTheme.border.thin};
-  `;
-
-  return (
-    <CentralizedContainer>
-      <Border />
-    </CentralizedContainer>
-  );
-}
+import { DisabledBadge } from '../shared';
 
 export function IdleRoutingStreamEntry({
   availableStreams,
@@ -143,11 +123,7 @@ export function IdleRoutingStreamEntry({
           >
             {!isRoutingEnabled(routingRule.status) && (
               <>
-                <EuiBadge color="subdued">
-                  {i18n.translate('xpack.streams.streamDetailRouting.disabled', {
-                    defaultMessage: 'Disabled',
-                  })}
-                </EuiBadge>
+                <DisabledBadge />
                 <VerticalRule />
               </>
             )}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/index.tsx

@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiResizableContainer,
-  useIsWithinBreakpoints,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import type { Streams } from '@kbn/streams-schema';
@@ -99,15 +98,15 @@ export function StreamDetailRoutingImpl() {
   useUnsavedChangesPrompt({
     hasUnsavedChanges:
       routingSnapshot.can({ type: 'routingRule.save' }) ||
-      routingSnapshot.can({ type: 'routingRule.fork' }),
+      routingSnapshot.can({ type: 'routingRule.fork' }) ||
+      routingSnapshot.can({ type: 'suggestion.saveSuggestion' }),
     history: appParams.history,
     http: core.http,
     navigateToUrl: core.application.navigateToUrl,
     openConfirm: core.overlays.openConfirm,
   });
 
   const availableStreams = streamsListFetch.value?.streams.map((stream) => stream.name) ?? [];
-  const isVerticalLayout = useIsWithinBreakpoints(['xs', 's']);
 
   return (
     <EuiFlexItem
@@ -133,7 +132,7 @@ export function StreamDetailRoutingImpl() {
           `}
           paddingSize="none"
         >
-          <EuiResizableContainer direction={isVerticalLayout ? 'vertical' : 'horizontal'}>
+          <EuiResizableContainer>
             {(EuiResizablePanel, EuiResizableButton) => (
               <>
                 <EuiResizablePanel

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/preview_panel.tsx

@@ -53,7 +53,8 @@ export function PreviewPanel() {
     content = <EditingPanel />;
   } else if (
     routingSnapshot.matches({ ready: 'creatingNewRule' }) ||
-    routingSnapshot.matches({ ready: 'reviewSuggestedRule' })
+    routingSnapshot.matches({ ready: 'reviewSuggestedRule' }) ||
+    routingSnapshot.matches({ ready: 'editingSuggestedRule' })
   ) {
     content = <SamplePreviewPanel enableActions />;
   }

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/review_suggestions_form/create_stream_confirmation_modal.tsx

@@ -84,7 +84,11 @@ export function CreateStreamConfirmationModal({
             forkStream({
               destination: partition.name,
               where: partition.condition,
-            }).then(() => onSuccess())
+            }).then((result) => {
+              if (result.success) {
+                onSuccess();
+              }
+            })
           }
           fill
         >

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/review_suggestions_form/review_suggestions_form.tsx

@@ -20,6 +20,7 @@ import type {
 import {
   useStreamSamplesSelector,
   useStreamsRoutingSelector,
+  useStreamRoutingEvents,
 } from '../state_management/stream_routing_state_machine';
 import { CreateStreamConfirmationModal } from './create_stream_confirmation_modal';
 import type { AIFeatures } from '../../../../hooks/use_ai_features';
@@ -32,6 +33,7 @@ export interface ReviewSuggestionsFormProps
     | 'previewSuggestion'
     | 'acceptSuggestion'
     | 'rejectSuggestion'
+    | 'updateSuggestion'
   > {
   suggestions: PartitionSuggestion[];
   onRegenerate: (connectorId: string) => void;
@@ -48,29 +50,55 @@ export function ReviewSuggestionsForm({
   previewSuggestion,
   acceptSuggestion,
   rejectSuggestion,
+  updateSuggestion,
   onRegenerate,
 }: ReviewSuggestionsFormProps) {
   const ruleUnderReview = useStreamsRoutingSelector((snapshot) =>
     snapshot.matches({ ready: 'reviewSuggestedRule' }) ? snapshot.context.suggestedRuleId : null
   );
+  const editingSuggestion = useStreamsRoutingSelector((snapshot) =>
+    snapshot.matches({ ready: 'editingSuggestedRule' }) ? snapshot.context.editedSuggestion : null
+  );
+
+  // For the confirmation modal, use edited suggestion if available, otherwise find by name
+  const partitionForModal =
+    editingSuggestion || suggestions.find(({ name }) => name === ruleUnderReview)!;
+
   const selectedPreviewName = useStreamSamplesSelector(
     ({ context }) =>
       context.selectedPreview &&
       context.selectedPreview.type === 'suggestion' &&
       context.selectedPreview.name
   );
 
+  const { editSuggestion } = useStreamRoutingEvents();
+  const routingSnapshot = useStreamsRoutingSelector((snapshot) => snapshot);
+
+  const handleSave = () => {
+    const currentEditingIndex = routingSnapshot.context.editingSuggestionIndex;
+    const currentEditedSuggestion = routingSnapshot.context.editedSuggestion;
+
+    if (currentEditingIndex !== null && currentEditedSuggestion) {
+      updateSuggestion(currentEditingIndex, currentEditedSuggestion);
+    }
+  };
+
   return (
     <>
-      {ruleUnderReview && (
+      {ruleUnderReview && partitionForModal && (
         <CreateStreamConfirmationModal
-          partition={suggestions.find(({ name }) => name === ruleUnderReview)!}
-          onSuccess={() =>
-            acceptSuggestion(suggestions.findIndex(({ name }) => name === ruleUnderReview)!)
-          }
+          partition={partitionForModal}
+          onSuccess={() => {
+            acceptSuggestion(
+              editingSuggestion
+                ? routingSnapshot.context.editingSuggestionIndex!
+                : suggestions.findIndex(({ name }) => name === ruleUnderReview)!
+            );
+          }}
         />
       )}
       <EuiCallOut
+        iconType="sparkles"
         title={i18n.translate(
           'xpack.streams.reviewSuggestionsForm.euiCallOut.reviewPartitioningSuggestionsLabel',
           { defaultMessage: 'Review partitioning suggestions' }
@@ -95,8 +123,11 @@ export function ReviewSuggestionsForm({
             <SuggestedStreamPanel
               definition={definition}
               partition={partition}
+              index={index}
               onPreview={(toggle) => previewSuggestion(index, toggle)}
               onDismiss={() => rejectSuggestion(index, selectedPreviewName === partition.name)}
+              onEdit={editSuggestion}
+              onSave={handleSave}
             />
             <EuiSpacer size="s" />
           </NestedView>