NO-JIRA: feat: add cancel button when graph is loading.

[alanconway]

While the graph is loading, replace the "sync" button with a "cancel" button to cancel the fetch.

[openshift-ci-robot]

@alanconway: This pull request explicitly references no jira issue.

Details

In response to this:

While the graph is loading, replace the "sync" button with a "cancel" button to cancel the fetch.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1b5d2c64-a522-46e2-a136-8f544d6d1793

📥 Commits

Reviewing files that changed from the base of the PR and between 983fd65 and 80f72cc.

📒 Files selected for processing (4)

• web/locales/en/plugin__troubleshooting-panel-console-plugin.json
• web/src/components/AdvancedSearchForm.tsx
• web/src/components/Korrel8rPanel.tsx
• web/src/redux-actions.ts

---

Walkthrough

The pull request implements a fetch cancellation mechanism for the troubleshooting panel, refactors UI terminology from "Cancel" to "Close" for consistency, extends the Result type with optional error and messaging fields, and updates corresponding localization strings.

Changes

Cohort / File(s)	Summary
Localization Updates web/locales/en/plugin__troubleshooting-panel-console-plugin.json	Added new translation keys for advanced search cancellation ("Cancel the current search", "Canceled", "No results.") and search interruption messaging ("Search was interrupted"). Removed "Correlation result was empty." entry.
AdvancedSearchForm Component web/src/components/AdvancedSearchForm.tsx	Renamed public prop interface from onCancel to onClose and updated button text and handler bindings accordingly.
Korrel8rPanel Component web/src/components/Korrel8rPanel.tsx	Introduced fetch cancellation state and handler; replaced static Refresh button with conditional Cancel/Refresh button pair; updated error handling to distinguish CancelError cases; integrated onClose prop for AdvancedSearchForm; updated default empty-result text from "Correlation result was empty." to "No results.".
Result Type Definition web/src/redux-actions.ts	Extended Result type with optional fields isError?: boolean, title?: string, and message?: string to support error and empty-result messaging scenarios.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: alanconway

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [alanconway]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

@alanconway: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[alanconway]

/cc @PeterYurkovich

[jgbernalp]

I'm finding the doCancel closure a bit tricky to follow. Would you be open to using a ref for the cancel handle and separate isLoading state instead? Something like:

const cancelRef = React.useRef<(() => void) | null>(null);
const [isLoading, setIsLoading] = React.useState(false);

React.useEffect(() => {
  // Cancel previous
  cancelRef.current?.();
  cancelRef.current = null;

  // ...

  setIsLoading(true);
  const fetch = getGoalsGraph({ start, goals: [search.goal] });
  cancelRef.current = () => fetch.cancel();

  fetch
    .then(/* ... */)
    .catch(/* ... */)
    .finally(() => {
      cancelRef.current = null;
      setIsLoading(false);
    });

  return () => cancelRef.current?.();
}, [/* deps */]);