diff --git a/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx b/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
index 1a1386f299..ae787f5441 100644
--- a/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
+++ b/packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx
@@ -23,6 +23,7 @@ import { Permission } from '@openops/shared';
import { t } from 'i18next';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import { useShowTemplatesBanner } from '../../templates/hooks/use-show-templates-banner';
import { useOpenBenchmarkWizard } from './use-open-benchmark-wizard';
import { useBenchmarkBannerState } from './useBenchmarkBannerState';
@@ -56,11 +57,12 @@ const HomeOnboardingView = ({
});
const { updateUserSettings } = userSettingsHooks.useUpdateUserSettings();
- const { cloudUser, isHomeCloudConnectionClosed } = useAppStore((state) => ({
- cloudUser: state.cloudUser,
+ const { isHomeCloudConnectionClosed } = useAppStore((state) => ({
isHomeCloudConnectionClosed: state.userSettings.isHomeCloudConnectionClosed,
}));
+ const { isCloudUser } = useShowTemplatesBanner();
+
const { checkAccess } = useAuthorization();
const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
@@ -72,7 +74,7 @@ const HomeOnboardingView = ({
setTimeout(() => {
refetch({ cancelRefetch: true });
}, 1000);
- }, [cloudUser, refetch, setSelectedDomains]);
+ }, [isCloudUser, refetch, setSelectedDomains]);
const onExploreMoreClick = () => {
const currentUser = authenticationSession.getCurrentUser();
@@ -123,11 +125,11 @@ const HomeOnboardingView = ({
onSeeAllClick={onExploreTemplatesClick}
onFilterClick={onTemplatesFilterClick}
templates={templatesWithIntegrations}
- showFilters={!!cloudUser}
+ showFilters={isCloudUser}
filters={domains}
onTemplateClick={onTemplateClick}
/>
- {!cloudUser && !isHomeCloudConnectionClosed && (
+ {!isCloudUser && !isHomeCloudConnectionClosed && (
)}
- {(isHelpViewClosed || cloudUser || isHomeCloudConnectionClosed) && (
+ {(isHelpViewClosed || isCloudUser || isHomeCloudConnectionClosed) && (
{
const { theme } = useTheme();
const ownerLogoUrl = useOwnerLogoUrl();
- const { isConnectedToCloudTemplates } = useCloudProfile();
const { createPollingInterval } = useUserInfoPolling();
- const useCloudTemplates = flagsHooks.useShouldFetchCloudTemplates();
+ const { isCloudUser } = useShowTemplatesBanner();
const { checkAccess } = useAuthorization();
const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
- const isFullCatalog =
- !isTemplatePreselected &&
- (isConnectedToCloudTemplates || !useCloudTemplates);
+ const isFullCatalog = !isTemplatePreselected && isCloudUser;
const onExploreMoreClick = () => {
const currentUser = authenticationSession.getCurrentUser();
diff --git a/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog.tsx b/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog.tsx
index 79cc2fb544..4e3a774cc9 100644
--- a/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog.tsx
+++ b/packages/react-ui/src/app/features/templates/components/select-flow-template-dialog.tsx
@@ -23,7 +23,7 @@ import { useMutation } from '@tanstack/react-query';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDebounceValue } from 'usehooks-ts';
-import { useCloudProfile } from '../../cloud/lib/use-cloud-profile';
+import { useShowTemplatesBanner } from '../hooks/use-show-templates-banner';
import { cloudTemplatesApi } from '../lib/cloud-templates-api';
import { SelectFlowTemplateDialogContent } from './select-flow-template-dialog-content';
@@ -93,7 +93,7 @@ const SelectFlowTemplateDialog = ({
TEMPLATE_FILTER_DEBOUNCE_DELAY,
);
- const { isConnectedToCloudTemplates } = useCloudProfile();
+ const { isCloudUser } = useShowTemplatesBanner();
const { templatesWithIntegrations, isLoading: isTemplateListLoading } =
templatesHooks.useTemplatesMetadataWithIntegrations({
@@ -105,7 +105,7 @@ const SelectFlowTemplateDialog = ({
categories: selectedCategories,
useCloudTemplates,
gettingStartedTemplateFilter: 'exclude',
- isConnectedToCloudTemplates,
+ isConnectedToCloudTemplates: isCloudUser,
});
const {
diff --git a/packages/react-ui/src/app/features/templates/hooks/use-show-templates-banner.ts b/packages/react-ui/src/app/features/templates/hooks/use-show-templates-banner.ts
new file mode 100644
index 0000000000..885b1f3027
--- /dev/null
+++ b/packages/react-ui/src/app/features/templates/hooks/use-show-templates-banner.ts
@@ -0,0 +1,20 @@
+import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { useMemo } from 'react';
+import { useCloudProfile } from '../../cloud/lib/use-cloud-profile';
+
+/**
+ * Custom hook to determine if the templates banner should be shown.
+ * It checks if the user is connected to cloud templates and if the cloud templates flag is enabled.
+ *
+ * @returns {boolean} isCloudUser - True if the user is connected to cloud templates and cloud templates are enabled.
+ */
+export const useShowTemplatesBanner = () => {
+ const { isConnectedToCloudTemplates } = useCloudProfile();
+ const useCloudTemplates = flagsHooks.useShouldFetchCloudTemplates();
+
+ const isCloudUser = useMemo(() => {
+ return isConnectedToCloudTemplates && !!useCloudTemplates;
+ }, [isConnectedToCloudTemplates, useCloudTemplates]);
+
+ return { isCloudUser };
+};