[Streams] Improve attachments feature with details flyout and better UX #244880

cesco-f · 2025-12-02T11:01:31Z

It closes #243751.

Summary

This PR enhances the Streams attachments feature with improved UX, additional metadata display, and better user feedback.

Changes

Attachment Details Flyout

Added a new flyout to view detailed information about an attachment
Displays attachment metadata: description, tags, linked streams, created at, and last updated timestamps
Stream names are clickable links that navigate to the respective stream detail page
Includes actions to navigate to the attachment or unlink it from the stream

Confirmation Modal

Added a confirmation modal when unlinking attachments
Shows a scrollable table with the attachments being affected
Displays a warning banner when unlinking attachments

Toast Notifications

Added success toasts when attachments are linked or unlinked
Toast messages include the count of affected attachments and the stream name (in bold)
Uses appropriate icons: "cheer" for linking, "unlink" for unlinking

Attachment Table Enhancements

Added type filter dropdown to filter attachments by type (Dashboard, Rule, SLO)
Added row actions: "See details", "Go to {type}", "Unlink attachment"
Added expand button to quickly open the details flyout
Tags column now shows max 2 tags with a "+N" badge for overflow

Backend Improvements

Extended Attachment type with description, createdAt, updatedAt, and streamNames fields
Updated attachment client to fetch and return the new metadata from saved objects
Suggestions endpoint now returns streamNames for each attachment
Added API tests to verify the new fields are returned correctly

Screen.Recording.2025-12-02.at.12.02.39.mov

…ble and flyout

…eam names to details flyout

github-actions · 2025-12-02T11:02:25Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

…atus --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --include-path /api/agent_builder --update

cesco-f · 2025-12-02T11:31:29Z

/ci

cesco-f · 2025-12-02T11:54:15Z

/ci

cesco-f · 2025-12-02T13:25:52Z

/ci

elasticmachine · 2025-12-02T13:27:54Z

Pinging @elastic/streams-program-team (Team:streams-program)

Copilot

Pull request overview

This PR enhances the Streams attachments feature by adding a detailed flyout view, confirmation modals, toast notifications, improved table interactions, and additional metadata fields. The changes improve user experience when managing attachments linked to streams, providing better visibility into attachment details and clearer feedback for linking/unlinking operations.

Key changes:

Added attachment details flyout with metadata display and navigation to linked streams
Implemented confirmation modals and success toast notifications for link/unlink operations
Extended attachment data model with description, timestamps, and stream names
Enhanced attachment table with type filtering, row actions, and tag display improvements

Reviewed changes

Copilot reviewed 25 out of 27 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`x-pack/platform/test/api_integration_deployment_agnostic/apis/streams/migration_on_read.ts`	Updated test expectations to validate new attachment metadata fields (createdAt, updatedAt, description, streamNames)
`x-pack/platform/test/api_integration_deployment_agnostic/apis/streams/attachments/attachments.ts`	Added test assertions for new attachment metadata fields and streamNames across multiple test cases
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/index.tsx`	Refactored main attachments component to add filters, selection popover, confirmation modal, and details flyout integration
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/get_attachment_url.ts`	New utility to generate navigation URLs for different attachment types
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/confirm_attachment_modal.tsx`	New modal component for confirming link/unlink operations with attachment preview table
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachments_empty_prompt.tsx`	New empty state component for when no attachments exist
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_type_badge.tsx`	New badge component displaying attachment type with icon
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_tags_list.tsx`	New component for displaying tags with overflow handling
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_table.tsx`	Enhanced table with actions column, details expansion, type badges, and improved navigation
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_filters.tsx`	New filtering component with type and tag filters plus search
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_details_flyout.tsx`	New flyout displaying detailed attachment information including metadata and linked streams
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/attachment_constants.ts`	Centralized configuration for attachment type labels and icons
`x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_attachments/add_attachment_flyout.tsx`	Refactored to use shared filters component and confirmation modal
`x-pack/platform/plugins/shared/streams_app/public/components/info_panel/index.tsx`	New reusable panel component for displaying information sections
`x-pack/platform/plugins/shared/streams_app/public/components/asset_image/index.tsx`	Added attachmentsEmpty image configuration for empty state
`x-pack/platform/plugins/shared/streams/tsconfig.json`	Added @kbn/alerting-types dependency
`x-pack/platform/plugins/shared/streams/server/routes/attachments/route.ts`	Updated API example response to include new metadata fields
`x-pack/platform/plugins/shared/streams/server/lib/streams/attachments/utils.ts`	Enhanced processing functions to extract and return metadata fields from saved objects
`x-pack/platform/plugins/shared/streams/server/lib/streams/attachments/types.ts`	Extended type definitions with AttachmentData and additional metadata fields
`x-pack/platform/plugins/shared/streams/server/lib/streams/attachments/attachment_client.ts`	Updated client to enrich attachments with streamNames from storage queries
`x-pack/platform/plugins/shared/streams/moon.yml`	Added @kbn/alerting-types dependency
`oas_docs/output/kibana.yaml`	Updated OpenAPI specification with new attachment fields
`oas_docs/output/kibana.serverless.yaml`	Updated serverless OpenAPI specification with new attachment fields
`oas_docs/bundle.serverless.json`	Updated serverless bundle with new attachment example fields
`oas_docs/bundle.json`	Updated bundle with new attachment example fields

...gins/shared/streams_app/public/components/stream_detail_attachments/attachment_tags_list.tsx

...shared/streams_app/public/components/stream_detail_attachments/attachment_details_flyout.tsx

x-pack/platform/plugins/shared/streams/server/lib/streams/attachments/attachment_client.ts

...lugins/shared/streams_app/public/components/stream_detail_attachments/attachment_filters.tsx

ruflin · 2025-12-02T15:38:01Z

Did some testing. Works as expected.

Tags: I don't see the tags, just +1 or similar. On the selection and overview page. Screen should be big enough.
Adding Attachment: When I add the attachment, I click "Add to Stream" and then it asks me again for confirmation? I understand that we ask for confirmation when a user deletes an attachment through the 3 dots on the right, but when adding, do we need an additional confirmation?

mdbirnstiehl

I added a couple of suggestions. Let me know if you have any questions or concerns.

.../shared/streams_app/public/components/stream_detail_attachments/attachments_empty_prompt.tsx

mdbirnstiehl · 2025-12-02T15:56:59Z

.../shared/streams_app/public/components/stream_detail_attachments/confirm_attachment_modal.tsx

+          'Are you sure you want to unlink {count, plural, one {this attachment} other {these attachments}}?',
+        values: { count: attachments.length },
+      })
+    : i18n.translate('xpack.streams.confirmAttachmentModal.linkSubtitle', {
+        defaultMessage:
+          'Are you sure you want to link {count, plural, one {this attachment} other {these attachments}}?',


Looks like we are using link/unlink and add/remove interchangeably throughout the UI. I wonder if we might want to stick to one or the other. If the initial button is "Add attachments" I would stick with using add and remove instead of switching between the two.

It makes sense to me!

What do you think @boriskirov @ruflin ?

Both options are ok for me.

Commit to stick with using add/remove: 8a9fd5f

.../shared/streams_app/public/components/stream_detail_attachments/confirm_attachment_modal.tsx

…tream_detail_attachments/attachments_empty_prompt.tsx Co-authored-by: Mike Birnstiehl <[email protected]>

…tream_detail_attachments/attachment_tags_list.tsx Co-authored-by: Copilot <[email protected]>

cesco-f · 2025-12-02T20:40:40Z

/ci

elasticmachine · 2025-12-03T11:24:43Z

💚 Build Succeeded

Buildkite Build
Commit: bc3481b

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`streamsApp`	1106	1117	+11

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`streamsApp`	1.1MB	1.1MB	+31.1KB

Unknown metric groups

async chunk count

id	before	after	diff
`streamsApp`	31	33	+2

History

💔 Build #368107 failed 8a9fd5f
💔 Build #368086 failed 916f5db
💔 Build #367971 failed 65b653d
💔 Build #367892 failed 37643c0
💔 Build #367888 failed 3af0e1c
💔 Build #367875 failed 639dfad

cesco-f added 9 commits December 1, 2025 11:36

feat(attachments ui): added empty attachments component and modify ta…

8c9aabd

…ble and flyout

feat(attachments): add filters and actions to attachments table

a9829ba

feat(attachment detail): added attachment details flyout

a5f4ee0

feat(modal): add modal when linking/unlinking attachments

8599fcb

feat(details flyout): added description, createdAt, updatedAt and str…

92800c6

…eam names to details flyout

feat(toasts): added toasts when linking/unlinking

f6fd533

fix(use async fn): using useAsyncFn for link/unlink operations

cd1927f

feat(tags): added show all option to AttachmentTagsList

eb49da3

refactor(info panel): info panel is shared in the streams app

ad0a19e

cesco-f added Feature:Streams This is the label for the Streams Project Team:streams-program Team Label for Streams program labels Dec 2, 2025

github-actions bot added the author:actionable-obs PRs authored by the actionable obs team label Dec 2, 2025

cesco-f added backport:skip This PR does not require backporting release_note:enhancement ci:project-deploy-observability Create an Observability project and removed author:actionable-obs PRs authored by the actionable obs team labels Dec 2, 2025

cesco-f added the author:actionable-obs PRs authored by the actionable obs team label Dec 2, 2025

kibanamachine added 2 commits December 2, 2025 11:15

Changes from node scripts/lint_ts_projects --fix

0b9c072

kibanamachine and others added 3 commits December 2, 2025 11:48

Changes from make api-docs

772e461

Changes from node scripts/regenerate_moon_projects.js --update

dc7b3ec

fix(stream names): stream names one below the other

078a590

fix(cr): code review

6136e2d

cesco-f force-pushed the attachments-ui branch from 5f50398 to 6136e2d Compare December 2, 2025 13:24

cesco-f marked this pull request as ready for review December 2, 2025 13:27

cesco-f requested a review from a team as a code owner December 2, 2025 13:27

cesco-f requested review from a team as code owners December 2, 2025 13:27

fix(test): fix test

26f88af

ruflin requested a review from Copilot December 2, 2025 15:25

Copilot AI reviewed Dec 2, 2025

View reviewed changes

mdbirnstiehl reviewed Dec 2, 2025

View reviewed changes

cesco-f and others added 4 commits December 2, 2025 18:43

Update x-pack/platform/plugins/shared/streams_app/public/components/s…

b54d561

…tream_detail_attachments/attachments_empty_prompt.tsx Co-authored-by: Mike Birnstiehl <[email protected]>

Update x-pack/platform/plugins/shared/streams_app/public/components/s…

639dfad

…tream_detail_attachments/attachment_tags_list.tsx Co-authored-by: Copilot <[email protected]>

fix(copilot): copilot code review

be8ec0e

fix(string): fix strings

37643c0

cesco-f force-pushed the attachments-ui branch from 3af0e1c to 37643c0 Compare December 2, 2025 18:01

cesco-f and others added 3 commits December 2, 2025 21:44

Merge branch 'main' into attachments-ui

65b653d

Merge branch 'main' into attachments-ui

916f5db

fix(strings): use add remove

8a9fd5f

cesco-f removed the ci:project-deploy-observability Create an Observability project label Dec 3, 2025

cesco-f and others added 2 commits December 3, 2025 10:07

Merge branch 'main' into attachments-ui

f814a51

fix(confirm modal): confirm modal only when unlinking

bc3481b

miltonhultgren self-requested a review December 3, 2025 19:38

[Streams] Improve attachments feature with details flyout and better UX #244880

Are you sure you want to change the base?

[Streams] Improve attachments feature with details flyout and better UX #244880

Uh oh!

Conversation

cesco-f commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Attachment Details Flyout

Confirmation Modal

Toast Notifications

Attachment Table Enhancements

Backend Improvements

Uh oh!

github-actions bot commented Dec 2, 2025

🤖 GitHub comments

Uh oh!

cesco-f commented Dec 2, 2025

Uh oh!

cesco-f commented Dec 2, 2025

Uh oh!

cesco-f commented Dec 2, 2025

Uh oh!

elasticmachine commented Dec 2, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ruflin commented Dec 2, 2025

Uh oh!

mdbirnstiehl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mdbirnstiehl Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

cesco-f Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

ruflin Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

cesco-f Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cesco-f commented Dec 2, 2025

Uh oh!

elasticmachine commented Dec 3, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

async chunk count

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cesco-f commented Dec 2, 2025 •

edited

Loading