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 }; +};