fix: History content negative z-index disallow clicks#1069
Merged
Assem-Uber merged 3 commits intocadence-workflow:masterfrom Nov 7, 2025
Merged
Conversation
Signed-off-by: Assem Hafez <assem.hafez@uber.com>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the z-index stacking context for the workflow history component to prevent the sticky header from appearing above external elements like popovers and modals. The changes create a proper stacking context hierarchy by introducing a container wrapper.
- Replaced React Fragment with a styled div container to establish a new stacking context
- Moved z-index management from content section to container level with explicit stacking context
- Added z-index: 1 to sticky header to ensure proper layering within the new stacking context
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/views/workflow-history/workflow-history.tsx | Replaced Fragment wrapper with div container to establish proper stacking context |
| src/views/workflow-history/workflow-history.styles.ts | Added container styles with z-index: 0 and removed negative z-index from contentSection |
| src/views/workflow-history/workflow-history-header/workflow-history-header.styles.ts | Added z-index: 1 to sticky header for proper layering within new stacking context |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
macrotim
approved these changes
Nov 7, 2025
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Assem-Uber
added a commit
to Assem-Uber/cadence-web
that referenced
this pull request
Nov 19, 2025
…ow#1069) * fix content clicks Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Update src/views/workflow-history/workflow-history.styles.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Assem-Uber
added a commit
that referenced
this pull request
Nov 24, 2025
* Create fetcher utility Signed-off-by: Assem Hafez <assem.hafez@uber.com> * rename query Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Create hook for fetching history Signed-off-by: Assem Hafez <assem.hafez@uber.com> * add configurable throttleMs to the hook Signed-off-by: Assem Hafez <assem.hafez@uber.com> * use fetcher in workflow history * remove useKeepLoadingEvents Signed-off-by: Assem Hafez <assem.hafez@uber.com> * grouping utility Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update test cases Signed-off-by: Assem Hafez <assem.hafez@uber.com> * change the api of onChange and add destroy method Signed-off-by: Assem Hafez <assem.hafez@uber.com> * replace getGroups with getState Signed-off-by: Assem Hafez <assem.hafez@uber.com> * init grouper hook Signed-off-by: Assem Hafez <assem.hafez@uber.com> * user grouper in history Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update fetcher based on feedback Signed-off-by: Assem Hafez <assem.hafez@uber.com> * rename unmout to destroy Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Create hook for fetching history Signed-off-by: Assem Hafez <assem.hafez@uber.com> * move condition into executeImmediately Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update destroy in method Signed-off-by: Assem Hafez <assem.hafez@uber.com> * mock grouper throttle Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix use fetcher test case Signed-off-by: Assem Hafez <assem.hafez@uber.com> * feat: Grouped events table header (#1059) * Grouped events header Signed-off-by: Assem Hafez <assem.hafez@uber.com> * add test cases Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix comment typo Signed-off-by: Assem Hafez <assem.hafez@uber.com> * add space for reset button Signed-off-by: Assem Hafez <assem.hafez@uber.com> * move grouped table Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Update src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.tsx Co-authored-by: Adhitya Mamallan <adi1998is@gmail.com> * Change Id to ID Signed-off-by: Assem Hafez <assem.hafez@uber.com> --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> Co-authored-by: Adhitya Mamallan <adi1998is@gmail.com> * chore: Fixed docker URI for kafka image (#1066) Signed-off-by: Tim Chan <tim.chan@uber.com> * chore: New feature flag for Cron List View (#1068) Signed-off-by: Tim Chan <tim.chan@uber.com> * use fetcher in workflow history * fix content clicks Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix use initial selected event Signed-off-by: Assem Hafez <assem.hafez@uber.com> * increase page size Signed-off-by: Assem Hafez <assem.hafez@uber.com> * optimize first page processing Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix test cases Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix: History content negative z-index disallow clicks (#1069) * fix content clicks Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Update src/views/workflow-history/workflow-history.styles.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat: Use fetcher in workflow history (#1064) * Create fetcher utility Signed-off-by: Assem Hafez <assem.hafez@uber.com> * rename query Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Create hook for fetching history Signed-off-by: Assem Hafez <assem.hafez@uber.com> * add configurable throttleMs to the hook Signed-off-by: Assem Hafez <assem.hafez@uber.com> * use fetcher in workflow history * remove useKeepLoadingEvents Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update fetcher based on feedback Signed-off-by: Assem Hafez <assem.hafez@uber.com> * rename unmout to destroy Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Create hook for fetching history Signed-off-by: Assem Hafez <assem.hafez@uber.com> * move condition into executeImmediately Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update destroy in method Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix type error with query params Signed-off-by: Assem Hafez <assem.hafez@uber.com> --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> * fix: Autocomplete for bool values (#1072) Fix workflows query autocomplete to suggest the correct tokens for boolean values Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * Add feature flag for Failover History (#1070) Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * Add failover history tab (#1071) Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * chore: Added ts-node to dev-deps (#1074) Signed-off-by: Tim Chan <tim.chan@uber.com> * feat: Hook to fetch & filter Failover History of a domain (#1075) Add hook for fetching and filtering failover history Add helper function to check if a ClusterFailover matches a given cluster attribute Add some types/constants for domain page failovers Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * feat: New Cron Tab (#1078) Signed-off-by: Tim Chan <tim.chan@uber.com> * feat: Failover History table (#1076) * Add table to display failover history of a domain, with support for both active-passive and active-active domains Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: Fix console.error pollution (#1077) * chore: Fix console.error pollution Signed-off-by: Tim Chan <tim.chan@uber.com> * Relocated to src/test-utils. Signed-off-by: Tim Chan <tim.chan@uber.com> --------- Signed-off-by: Tim Chan <tim.chan@uber.com> * Add flag for History Page v2 (#1081) Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * feat: Filters for Failover History Table (#1079) Add filters for Failover History table, but only for active-active domains Create filter for Cluster Attribute Scope, which depends on domain description to suggest possible scopes Create filter for Cluster Attribute Value, which depends on selected scope to suggest possible values/names Remove (now) unused styles file from DomainPageFailovers Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * feat: Create a grouping utility that only parses new events (#1065) * grouping utility Signed-off-by: Assem Hafez <assem.hafez@uber.com> * update test cases Signed-off-by: Assem Hafez <assem.hafez@uber.com> * change the api of onChange and add destroy method Signed-off-by: Assem Hafez <assem.hafez@uber.com> * replace getGroups with getState Signed-off-by: Assem Hafez <assem.hafez@uber.com> * call onchange after updating pending events Signed-off-by: Assem Hafez <assem.hafez@uber.com> * use sync processBatch for first page Signed-off-by: Assem Hafez <assem.hafez@uber.com> * Update src/views/workflow-history/helpers/workflow-history-grouper.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply PR comments * Update src/views/workflow-history/helpers/workflow-history-grouper.types.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat: Add modal to view full failover event (#1080) * Add modal for viewing an individual failover event, which is shown when "See more" in the table is clicked Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * feat: New components for Workflow History V2 (#1082) * Add new Workflow History V2 root component, which (for now) renders only a placeholder header component and placeholder tables. * Implement Workflow History Header with basic UI and sticky functionality * Add logic in WorkflowHistoryWrapper to render V2 UI based on feature flag Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> * update test cases * hook for history grouper * remove comments * fetcher updates * add placeholder for fetcher * update fetcher mock * fetcher start update * update todo * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix copilot comments * remove extra comment * lint fix * change lastFlattented initial value to -1 * remove unused import * address comments --------- Signed-off-by: Assem Hafez <assem.hafez@uber.com> Signed-off-by: Tim Chan <tim.chan@uber.com> Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com> Co-authored-by: Adhitya Mamallan <adi1998is@gmail.com> Co-authored-by: Tim Chan <timothyc@alum.mit.edu> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Adhitya Mamallan <adhitya.mamallan@uber.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix issue with clicks in history content page, the content had -ve
z-indexwhich dismissed all clicks for conent. The z-index was needed to make the content show behind the sticky header while keeping the header below popovers & modals.This is changed to have the header
z-index=1while havingposition: relativeandz-index=0on the history container div.Issue introduced in #1058.
Testing
Non sticky header:
Screen.Recording.2025-11-07.at.17.41.36.mov
Sticky Header:
Screen.Recording.2025-11-07.at.17.40.42.mov
Sticky header with popovers:
Sticky header with modals:
