[9.2] [Streams] Update stream description UI (#238148) (#239178)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[Streams] Update stream description UI
(#238148)](#238148)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-15T15:24:43Z","message":"[Streams]
Update stream description UI (#238148)\n\n## Summary\n\nUpdate stream
description UI \n\nAdded edit mode and cancel button , and also Manual
entry button when\nuser lands for the fist time.\n\n### Initial
view\n<img width=\"1728\" height=\"879\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/89687f84-fe73-4336-9cf5-60e29e9ac570\"\n/>\n\n\n###
Edit mode\n<img width=\"1727\" height=\"882\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/47c60e2f-9ed5-4148-a1da-a375418b2025\"\n/>\n\n\n\n<img
width=\"1728\" height=\"792\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/fb20e4f8-b0d9-4e88-8645-f4a6f3c72a3f\"\n/>\n\n---------\n\nCo-authored-by:
Francesco Fagnani
<[email protected]>","sha":"a5fd497d75ada0c56c1c5c5fb2511333e631fdb7","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","author:obs-ux-management","v9.2.0","v9.3.0"],"title":"[Streams]
Update stream description UI
","number":238148,"url":"https://github.com/elastic/kibana/pull/238148","mergeCommit":{"message":"[Streams]
Update stream description UI (#238148)\n\n## Summary\n\nUpdate stream
description UI \n\nAdded edit mode and cancel button , and also Manual
entry button when\nuser lands for the fist time.\n\n### Initial
view\n<img width=\"1728\" height=\"879\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/89687f84-fe73-4336-9cf5-60e29e9ac570\"\n/>\n\n\n###
Edit mode\n<img width=\"1727\" height=\"882\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/47c60e2f-9ed5-4148-a1da-a375418b2025\"\n/>\n\n\n\n<img
width=\"1728\" height=\"792\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/fb20e4f8-b0d9-4e88-8645-f4a6f3c72a3f\"\n/>\n\n---------\n\nCo-authored-by:
Francesco Fagnani
<[email protected]>","sha":"a5fd497d75ada0c56c1c5c5fb2511333e631fdb7"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/238148","number":238148,"mergeCommit":{"message":"[Streams]
Update stream description UI (#238148)\n\n## Summary\n\nUpdate stream
description UI \n\nAdded edit mode and cancel button , and also Manual
entry button when\nuser lands for the fist time.\n\n### Initial
view\n<img width=\"1728\" height=\"879\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/89687f84-fe73-4336-9cf5-60e29e9ac570\"\n/>\n\n\n###
Edit mode\n<img width=\"1727\" height=\"882\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/47c60e2f-9ed5-4148-a1da-a375418b2025\"\n/>\n\n\n\n<img
width=\"1728\" height=\"792\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/fb20e4f8-b0d9-4e88-8645-f4a6f3c72a3f\"\n/>\n\n---------\n\nCo-authored-by:
Francesco Fagnani
<[email protected]>","sha":"a5fd497d75ada0c56c1c5c5fb2511333e631fdb7"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <[email protected]>
Co-authored-by: Francesco Fagnani <[email protected]>

Author: 3 people

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

@@ -164,7 +164,7 @@ export function ClassicStreamDetailManagement({
         <>
           {otherTabs.significantEvents ? (
             <>
-              <StreamDescription definition={definition} />
+              <StreamDescription definition={definition} refreshDefinition={refreshDefinition} />
               <EuiSpacer />
             </>
           ) : null}

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

@@ -7,26 +7,22 @@
 
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiMarkdownEditor,
   EuiPanel,
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useAbortController } from '@kbn/react-hooks';
-import { Streams } from '@kbn/streams-schema';
-import { isEmpty, omit } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useKibana } from '../../../hooks/use_kibana';
-import { getFormattedError } from '../../../util/errors';
-import { useTimefilter } from '../../../hooks/use_timefilter';
-import { useUpdateStreams } from '../../../hooks/use_update_streams';
+import type { Streams } from '@kbn/streams-schema';
+import React from 'react';
+import { useStreamDescriptionApi } from './stream_description/use_stream_description_api';
 import { ConnectorListButton } from '../../connector_list_button/connector_list_button';
-import { useAIFeatures } from '../../stream_detail_significant_events_view/add_significant_event_flyout/generated_flow_form/use_ai_features';
 
 export interface AISummaryProps {
   definition: Streams.all.GetResponse;
+  refreshDefinition: () => void;
 }
 
 const STREAM_DESCRIPTION_PANEL_TITLE = i18n.translate(
@@ -65,124 +61,40 @@ const SAVE_DESCRIPTION_BUTTON_LABEL = i18n.translate(
   }
 );
 
-export const StreamDescription: React.FC<AISummaryProps> = ({ definition }) => {
-  const updateStream = useUpdateStreams(definition.stream.name);
-
-  const {
-    core: { notifications },
-    dependencies: {
-      start: { streams },
-    },
-  } = useKibana();
-
-  const { timeState } = useTimefilter();
-
-  const [description, setDescription] = useState(definition.stream.description || '');
-
-  const [isGenerating, setIsGenerating] = useState(false);
-
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  const aiFeatures = useAIFeatures();
-
-  const { signal } = useAbortController();
-
-  // Save the updated description; show success and error toasts
-  const save = useCallback(
-    async (nextDescription: string) => {
-      setIsUpdating(true);
-      updateStream(
-        Streams.all.UpsertRequest.parse({
-          dashboards: definition.dashboards,
-          queries: definition.queries,
-          rules: definition.rules,
-          stream: {
-            ...omit(definition.stream, 'name'),
-            description: nextDescription,
-          },
-        })
-      )
-        .then(() => {
-          notifications.toasts.addSuccess({
-            title: i18n.translate(
-              'xpack.streams.streamDetailView.streamDescription.saveSuccessTitle',
-              {
-                defaultMessage: 'Description saved',
-              }
-            ),
-          });
-        })
-        .catch((error) => {
-          notifications.toasts.addError(error, {
-            title: i18n.translate(
-              'xpack.streams.streamDetailView.streamDescription.saveErrorTitle',
-              {
-                defaultMessage: 'Failed to save description',
-              }
-            ),
-            toastMessage: getFormattedError(error).message,
-          });
-        })
-        .finally(() => {
-          setIsUpdating(false);
-        });
-    },
-    [definition, updateStream, notifications.toasts]
-  );
-
-  const generate = useCallback(() => {
-    if (!aiFeatures?.genAiConnectors.selectedConnector) {
-      return;
-    }
+const EDIT_DESCRIPTION_BUTTON_LABEL = i18n.translate(
+  'xpack.streams.streamDetailView.streamDescription.editDescriptionButtonLabel',
+  {
+    defaultMessage: 'Edit',
+  }
+);
 
-    setIsGenerating(true);
+const MANUAL_ENTRY_BUTTON_LABEL = i18n.translate(
+  'xpack.streams.streamDetailView.streamDescription.manualEntryButtonLabel',
+  {
+    defaultMessage: 'Enter manually',
+  }
+);
 
-    streams.streamsRepositoryClient
-      .stream('POST /internal/streams/{name}/_describe_stream', {
-        signal,
-        params: {
-          path: {
-            name: definition.stream.name,
-          },
-          query: {
-            connectorId: aiFeatures.genAiConnectors.selectedConnector,
-            from: timeState.asAbsoluteTimeRange.from,
-            to: timeState.asAbsoluteTimeRange.to,
-          },
-        },
-      })
-      .subscribe({
-        next({ description: generatedDescription }) {
-          setDescription(generatedDescription);
-        },
-        complete() {
-          setIsGenerating(false);
-        },
-        error(error) {
-          setIsGenerating(false);
-          notifications.toasts.addError(error, {
-            title: i18n.translate(
-              'xpack.streams.streamDetailView.streamDescription.generateErrorTitle',
-              { defaultMessage: 'Failed to generate description' }
-            ),
-            toastMessage: getFormattedError(error).message,
-          });
-        },
-      });
-  }, [
-    definition.stream.name,
-    streams.streamsRepositoryClient,
-    timeState.asAbsoluteTimeRange.from,
-    timeState.asAbsoluteTimeRange.to,
-    aiFeatures?.genAiConnectors.selectedConnector,
-    signal,
-    notifications.toasts,
-  ]);
+const CANCEL_LABEL = i18n.translate(
+  'xpack.streams.streamDetailView.streamDescription.cancelButtonLabel',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
 
-  useEffect(() => {
-    const connectorId = aiFeatures?.genAiConnectors.selectedConnector;
-    if (!connectorId || !isEmpty(description)) return;
-  }, [aiFeatures?.genAiConnectors.selectedConnector, description]);
+export const StreamDescription: React.FC<AISummaryProps> = ({ definition, refreshDefinition }) => {
+  const {
+    isGenerating,
+    description,
+    isUpdating,
+    isEditing,
+    setDescription,
+    onCancelEdit,
+    onGenerateDescription,
+    onSaveDescription,
+    onStartEditing,
+    areButtonsDisabled,
+  } = useStreamDescriptionApi({ definition, refreshDefinition });
 
   return (
     <EuiPanel hasBorder={true} hasShadow={false} paddingSize="none" grow={false}>
@@ -192,60 +104,107 @@ export const StreamDescription: React.FC<AISummaryProps> = ({ definition }) => {
         </EuiText>
       </EuiPanel>
       <EuiPanel paddingSize="m" hasShadow={false} hasBorder={false}>
-        <EuiFlexGroup direction="column" gutterSize="m">
-          <EuiText size="s" color="subdued">
-            {STREAM_DESCRIPTION_HELP}
-          </EuiText>
-          <EuiMarkdownEditor
-            value={description}
-            onChange={(next) => {
-              setDescription(next);
-            }}
-            aria-labelledby="stream-description-editor"
-            placeholder={STREAM_DESCRIPTION_EMPTY}
-            readOnly={isGenerating || isUpdating}
-            toolbarProps={{
-              right: (
-                <EuiFlexGroup
-                  direction="row"
-                  gutterSize="s"
-                  justifyContent="flexEnd"
-                  alignItems="center"
-                >
-                  <EuiFlexItem grow={false}>
-                    <ConnectorListButton
-                      buttonProps={{
-                        size: 's',
-                        iconType: 'sparkles',
-                        children: GENERATE_DESCRIPTION_BUTTON_LABEL,
-                        onClick() {
-                          generate();
-                        },
-                        isDisabled: isGenerating || isUpdating,
-                        isLoading: isGenerating,
-                      }}
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      iconType="save"
-                      size="s"
-                      iconSize="s"
-                      fill
-                      isLoading={isUpdating}
-                      isDisabled={isUpdating || isGenerating}
-                      onClick={() => {
-                        save(description);
-                      }}
-                    >
-                      {SAVE_DESCRIPTION_BUTTON_LABEL}
-                    </EuiButton>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              ),
-            }}
-          />
-        </EuiFlexGroup>
+        {definition.stream.description || description || isEditing ? (
+          <EuiFlexGroup direction="column" gutterSize="m">
+            <EuiText size="s" color="subdued">
+              {STREAM_DESCRIPTION_HELP}
+            </EuiText>
+            <EuiMarkdownEditor
+              value={description}
+              onChange={setDescription}
+              aria-labelledby="stream-description-editor"
+              placeholder={STREAM_DESCRIPTION_EMPTY}
+              readOnly={areButtonsDisabled || !isEditing}
+              toolbarProps={{
+                right: (
+                  <EuiFlexGroup
+                    direction="row"
+                    gutterSize="s"
+                    justifyContent="flexEnd"
+                    alignItems="center"
+                  >
+                    {isEditing && (
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonEmpty
+                          aria-label={CANCEL_LABEL}
+                          size="s"
+                          isLoading={isUpdating}
+                          isDisabled={areButtonsDisabled}
+                          onClick={onCancelEdit}
+                        >
+                          {CANCEL_LABEL}
+                        </EuiButtonEmpty>
+                      </EuiFlexItem>
+                    )}
+                    <EuiFlexItem grow={false}>
+                      <ConnectorListButton
+                        buttonProps={{
+                          size: 's',
+                          iconType: 'sparkles',
+                          children: GENERATE_DESCRIPTION_BUTTON_LABEL,
+                          onClick: onGenerateDescription,
+                          isDisabled: areButtonsDisabled,
+                          isLoading: isGenerating,
+                        }}
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        iconType={isEditing ? 'save' : 'pencil'}
+                        size="s"
+                        iconSize="s"
+                        fill
+                        isLoading={isUpdating}
+                        isDisabled={areButtonsDisabled}
+                        onClick={() => {
+                          if (!isEditing) {
+                            onStartEditing();
+                          } else {
+                            onSaveDescription();
+                          }
+                        }}
+                      >
+                        {isEditing ? SAVE_DESCRIPTION_BUTTON_LABEL : EDIT_DESCRIPTION_BUTTON_LABEL}
+                      </EuiButton>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ),
+              }}
+            />
+          </EuiFlexGroup>
+        ) : (
+          <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText size="s" color="subdued">
+                {STREAM_DESCRIPTION_HELP}
+              </EuiText>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                size="s"
+                isLoading={isUpdating}
+                isDisabled={areButtonsDisabled}
+                onClick={onStartEditing}
+              >
+                {MANUAL_ENTRY_BUTTON_LABEL}
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ConnectorListButton
+                buttonProps={{
+                  fill: true,
+                  size: 's',
+                  iconType: 'sparkles',
+                  children: GENERATE_DESCRIPTION_BUTTON_LABEL,
+                  onClick: onGenerateDescription,
+                  isDisabled: areButtonsDisabled,
+                  isLoading: isGenerating,
+                }}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
       </EuiPanel>
     </EuiPanel>
   );