[noTicket][risk=no]Fix workspace showing up for wrong section

[NehaBroad]

This issue is caused by a race condition that occurs when a user navigates from one category to another before the initial category has finished loading on page load.

An alternative solution is to fetch all featured workspaces during the initial page load and then filter them based on the selected category. However, the downside of this approach is that users won't see the latest workspaces unless the page is fully reloaded.

---

PR checklist

• I have included an issue ID or "no ticket" in the PR title as outlined in CONTRIBUTING.md.
• I have included a risk tag of the form [risk=no|low|moderate|severe] in the PR title as outlined in CONTRIBUTING.md.
• I have manually tested this change and my testing process is described above.
• This change includes appropriate automated tests, and I have documented any behavior that cannot be tested with code.
• I have added explanatory comments where the logic is not obvious.
• One or more of the following is true:
  • This change is intended to complete a JIRA story, so I have checked that all AC are met for that story.
  • This change fixes a bug, so I have ensured the steps to reproduce are in the Jira ticket or provided above.
  • This change impacts deployment safety (e.g. removing/altering APIs which are in use), so I have documented the impacts in the description.
  • This change includes a new feature flag, so I have created and linked new JIRA tickets to (a) turn on the feature flag and (b) remove it later.
  • This change modifies the UI, so I have taken screenshots or recordings of the new behavior and notified the PO and UX designer in Slack.
  • This change modifies API behavior, so I have run the relevant E2E tests locally because API changes are not covered by our PR checks.
  • None of the above apply to this change.

[evrii]

I'm curious if this will work, because it does not seem to remove the race condition.

I believe that if you have two calls to two different featured category and the first call finishes after the second, you will end up in a weird spot. You will end up with workspacesReceived reflecting the results from the first call but currentTab.category reflecting the category of the second call. In this case, no results will be shown, because there shouldn't be any workspaces in the first call of the second category.

I wonder if you could rewrite this to something like this:

const [workspaceRequestAbortController, setWorkspaceRequestAbortController] =
    useState<AbortController|null>(null);
...
const controller = new AbortController();
const signal = controller.signal;
setWorkspaceRequestAbortController(controller);
featuredWorkspaceApi().getFeaturedWorkspacesByCategory(currentTab.category, { signal })
  .then(workspacesReceived => {
          setWorkspaceList(
        workspacesReceived.items
          .sort((a, b) => a.workspace.name.localeCompare(b.workspace.name))
          .map((w) => new WorkspacePermissions(w))
      );
  })
  
...
  
useEffect(() => {
    workspaceRequestAbortController.abort()
    props.hideSpinner();
    getAllPublishedWorkspaces();
  }, [currentTab]);

[jmthibault79]

This does not solve the problem. I still see the bug.

I like the "alternative" you mention. Let's try that.