[Obs Alerting] Save/use active group state from url !!

[shahzad31]

Summary

Fixes #195627
Save/use active group state from url !!

if url state exists it will be propagated to component and mixed with local state

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[github-actions]

🤖 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!)

[maryam-saeidi]

Thanks Shahzad for picking this up!

When I test locally, the grouping functionality does not work for me:

Screen.Recording.2024-10-25.at.17.32.28.mov

[github-actions]

🤖 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!)

[maryam-saeidi]

Worked like a charm on the alerts page!

Would you please also apply this logic to the alert details page > related alerts?

[umbopepato]

How about moving the initialization logic to the grouping context provider?

export const AlertsGroupingContextProvider = ({
  initialState = {},
  children,
}: PropsWithChildren<{ initialState?: AlertsGroupingState }>) => {
  const [groupingState, setGroupingState] = useState<AlertsGroupingState>(initialState);
  return (
    <AlertsGroupingContext.Provider
      value={useMemo(
        () => ({ groupingState, setGroupingState }),
        [groupingState, setGroupingState]
      )}
    >
      {children}
    </AlertsGroupingContext.Provider>
  );
};

This way we could avoid the initialization effect.

In case, this is how AlertsGrouping could forward the initialState to the provider:

export const AlertsGrouping = typedMemo(
  <T extends BaseAlertsGroupAggregations>(props: AlertsGroupingProps<T>) => {
    return (
      <AlertsGroupingContextProvider
        initialState={
          props.initialGroupings
            ? { [props.groupingId]: { activeGroups: props.initialGroupings } }
            : undefined
        }
      >
        <AlertsGroupingInternal {...props} />
      </AlertsGroupingContextProvider>
    );
  }
);

[cnasikas]

To my understanding this PR tries to sync the URL state with the grouping state. Instead of modifying the grouping component could something like that work?

useEffect(() => {
  groupingStateFromURL = getURLGroupingState()
  updateGrouping(groupingStateFromURL)
}, [// deps]

[elasticmachine]

⏳ Build in-progress, with failures

• Buildkite Build
• Commit: 37c2b64

Failed CI Steps

• Build Project Image

History

• 💔 Build #247921 failed 22768ef
• 💛 Build #246931 was flaky 8221c15
• 💔 Build #246577 failed 72b9d62
• 💚 Build #246557 succeeded 615af14
• 💛 Build #245849 was flaky d64e86d

[elasticmachine]

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!