Fix Templates Banner on home page#2103
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the home page onboarding experience so the “Connect templates” banner and template filters use the same “cloud templates connected + flags” logic as the templates dialog, fixing cases where the banner was incorrectly hidden.
Changes:
- Replace
cloudUser-based UI conditions with a derivedisCloudUserbased onuseCloudProfile()andflagsHooks.useShouldFetchCloudTemplates(). - Update the templates carousel filter visibility and onboarding panels to use
isCloudUser. - Adjust the templates refetch/reset effect to trigger based on the new
isCloudUsersignal.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
Outdated
Show resolved
Hide resolved
| const { isConnectedToCloudTemplates } = useCloudProfile(); | ||
| const useCloudTemplates = flagsHooks.useShouldFetchCloudTemplates(); | ||
| const isCloudUser = useMemo(() => { | ||
| return isConnectedToCloudTemplates && useCloudTemplates; | ||
| }, [isConnectedToCloudTemplates, useCloudTemplates]); |
There was a problem hiding this comment.
isCloudUser depends on isConnectedToCloudTemplates from useCloudProfile(). In use-cloud-profile.ts, isConnectedToCloudTemplates is computed as data !== null, which evaluates to true while the React Query data is still undefined (initial/pending or when the query is disabled). That can incorrectly treat users as connected (hiding the connect banner / enabling filters) until the query resolves. Consider fixing useCloudProfile to treat undefined as not-connected (e.g., data != null plus isSuccess), or guard here by deriving connection from a value that cannot be undefined.
There was a problem hiding this comment.
This is the same logic as used in the templates dialog, so it's fine
packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
Show resolved
Hide resolved
…ding-view.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
this logic is really hard to follow, if it's common we should extract it and improve the code so the logic behind is more readable |
|
|
I extracted the common logic to reusable hook |



Fixes OPS-3843
The banner is not visible in the templates dialog so I copied the check from there
openops/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsx
Lines 99 to 106 in 9b4caf0