Display alert when an old, trial-only binding is added or backfilled

.env

@@ -61,3 +61,5 @@ VITE_DOCS_ORIGIN=https://docs.estuary.dev
 VITE_DOCS_IFRAME_STRING_INCLUDE=estuary.dev
 
 VITE_STRIPE_PUBLISHABLE_KEY=pk_live_51LC6y0L0ioq4FQU8sBPuwFgtfQSvixeKCWWRhWBbNf0q4NqXuBlkNJK9DronbnlY8x7wTXgu6KhYjw26XFpx0U2200Fqz8Dawb
+
+VITE_TRIAL_DURATION=20

src/api/liveSpecsExt.ts

@@ -1,6 +1,7 @@
 import { PostgrestResponse } from '@supabase/postgrest-js';
 import { supabaseClient } from 'context/GlobalProviders';
 import { ProtocolLabel } from 'data-plane-gateway/types/gen/consumer/protocol/consumer';
+import { DateTime } from 'luxon';
 import pLimit from 'p-limit';
 import {
     CONNECTOR_IMAGE,
@@ -25,6 +26,8 @@ import {
 import { CHUNK_SIZE, DEMO_TENANT } from 'utils/misc-utils';
 import { getCountSettings } from 'utils/table-utils';
 
+const trialDuration = import.meta.env.VITE_TRIAL_DURATION;
+
 const baseColumns = [
     'catalog_name',
     'id',
@@ -429,6 +432,53 @@ const getLiveSpecShards = (tenant: string, entityType: Entity) => {
         .eq('spec_type', entityType);
 };
 
+export interface TrialCollectionQuery {
+    catalog_name: string;
+    updated_at: string;
+}
+
+const getTrialCollections = async (
+    trialPrefixes: string[],
+    catalogNames: string[]
+) => {
+    const limiter = pLimit(3);
+    const promises: Promise<PostgrestResponse<TrialCollectionQuery>>[] = [];
+    let index = 0;
+
+    const trialCollections = catalogNames.filter((name) =>
+        trialPrefixes.some((prefix) => name.startsWith(prefix))
+    );
+
+    const promiseGenerator = (idx: number) => {
+        const trialThreshold = DateTime.utc().minus({
+            days: trialDuration,
+        });
+        const catalogNameFilter = trialCollections
+            .slice(idx, idx + CHUNK_SIZE)
+            .map((name) => `catalog_name.eq.${name}`)
+            .join(',');
+
+        return supabaseClient
+            .from(TABLES.LIVE_SPECS_EXT)
+            .select('catalog_name,updated_at')
+            .or(catalogNameFilter)
+            .eq('spec_type', 'collection')
+            .lt('updated_at', trialThreshold);
+    };
+
+    while (index < trialCollections.length) {
+        const prom = promiseGenerator(index);
+        promises.push(limiter(() => prom));
+
+        index = index + CHUNK_SIZE;
+    }
+
+    const response = await Promise.all(promises);
+    const errors = response.filter((r) => r.error);
+
+    return errors[0] ?? { data: response.flatMap((r) => r.data) };
+};
+
 const liveSpecsExtRelatedColumns = ['catalog_name', 'reads_from', 'id'];
 export const liveSpecsExtRelatedQuery = liveSpecsExtRelatedColumns.join(',');
 export interface LiveSpecsExt_Related {
@@ -482,4 +532,5 @@ export {
     getLiveSpecs_entitySelector,
     getLiveSpecs_existingTasks,
     getLiveSpecs_materializations,
+    getTrialCollections,
 };

src/api/storageMappings.ts

@@ -2,6 +2,8 @@ import { PostgrestSingleResponse } from '@supabase/postgrest-js';
 import { supabaseClient } from 'context/GlobalProviders';
 import {
     defaultTableFilter,
+    handleFailure,
+    handleSuccess,
     Pagination,
     RPCS,
     SortingProps,
@@ -51,6 +53,20 @@ const getStorageMapping = (catalog_prefix: string) => {
         .returns<StorageMappings[]>();
 };
 
+const getStorageMappingStores = async (prefixes: string[]) => {
+    return supabaseRetry(
+        () =>
+            supabaseClient
+                .from(TABLES.STORAGE_MAPPINGS)
+                .select('catalog_prefix,spec')
+                .in('catalog_prefix', prefixes),
+        'getStorageMappingStores'
+    ).then(
+        handleSuccess<Pick<StorageMappings, 'catalog_prefix' | 'spec'>[]>,
+        handleFailure
+    );
+};
+
 const republishPrefix = async (prefix: string) => {
     return supabaseRetry<PostgrestSingleResponse<string>>(
         () =>
@@ -61,4 +77,9 @@ const republishPrefix = async (prefix: string) => {
     );
 };
 
-export { getStorageMapping, getStorageMappings, republishPrefix };
+export {
+    getStorageMapping,
+    getStorageMappingStores,
+    getStorageMappings,
+    republishPrefix,
+};

src/components/collection/Config.tsx

@@ -1,83 +1,39 @@
-import { Typography, useTheme } from '@mui/material';
+import { Typography } from '@mui/material';
 import MessageWithLink from 'components/content/MessageWithLink';
 import BindingsMultiEditor from 'components/editor/Bindings';
 import AlertBox from 'components/shared/AlertBox';
 import WrapperWithHeader from 'components/shared/Entity/WrapperWithHeader';
 import ErrorBoundryWrapper from 'components/shared/ErrorBoundryWrapper';
-import { DraftSpecQuery } from 'hooks/useDraftSpecs';
-import { WarningCircle } from 'iconoir-react';
-import { ReactNode } from 'react';
-import { FormattedMessage } from 'react-intl';
-import {
-    useBinding_bindingErrorsExist,
-    useBinding_fullSourceErrorsExist,
-    useBinding_hydrationErrorsExist,
-    useBinding_resourceConfigErrorsExist,
-} from 'stores/Binding/hooks';
-import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks';
-
-interface Props {
-    draftSpecs: DraftSpecQuery[];
-    readOnly?: boolean;
-    hideBorder?: boolean;
-    RediscoverButton?: ReactNode;
-}
+import { useIntl } from 'react-intl';
+import { useBinding_hydrationErrorsExist } from 'stores/Binding/hooks';
+import SectionAlertIndicator from './SectionAlertIndicator';
+import { CollectionConfigProps } from './types';
 
 function CollectionConfig({
     draftSpecs,
     readOnly = false,
     hideBorder,
     RediscoverButton,
-}: Props) {
-    const theme = useTheme();
+}: CollectionConfigProps) {
+    const intl = useIntl();
 
-    // Binding Store
     const bindingHydrationErrorsExist = useBinding_hydrationErrorsExist();
-    const resourceConfigErrorsExist = useBinding_resourceConfigErrorsExist();
-    const bindingErrorsExist = useBinding_bindingErrorsExist();
-    const fullSourceErrorsExist = useBinding_fullSourceErrorsExist();
-
-    // Form State Store
-    const messagePrefix = useFormStateStore_messagePrefix();
-
-    const hasErrors =
-        bindingHydrationErrorsExist ||
-        resourceConfigErrorsExist ||
-        fullSourceErrorsExist;
-
-    const hasWarnings = bindingErrorsExist;
 
     return (
         <WrapperWithHeader
             hideBorder={hideBorder}
-            header={
-                <>
-                    {hasErrors || hasWarnings ? (
-                        <WarningCircle
-                            style={{
-                                marginRight: 4,
-                                fontSize: 12,
-                                color: hasErrors
-                                    ? theme.palette.error.main
-                                    : theme.palette.warning.main,
-                            }}
-                        />
-                    ) : null}
-
-                    <Typography variant="subtitle1">
-                        <FormattedMessage
-                            id={`${messagePrefix}.collections.heading`}
-                        />
-                    </Typography>
-                </>
-            }
+            header={<SectionAlertIndicator />}
         >
             <ErrorBoundryWrapper>
                 {bindingHydrationErrorsExist ? (
                     <AlertBox
                         severity="error"
                         title={
-                            <FormattedMessage id="workflows.error.initFormSection" />
+                            <Typography component="span">
+                                {intl.formatMessage({
+                                    id: 'workflows.error.initFormSection',
+                                })}
+                            </Typography>
                         }
                         short
                     >

src/components/collection/ResourceConfig.tsx

@@ -4,10 +4,12 @@ import AdvancedOptions from 'components/editor/Bindings/AdvancedOptions';
 import Backfill from 'components/editor/Bindings/Backfill';
 import FieldSelectionViewer from 'components/editor/Bindings/FieldSelection';
 import { useEditorStore_queryResponse_draftedBindingIndex } from 'components/editor/Store/hooks';
+import TrialOnlyPrefixAlert from 'components/materialization/TrialOnlyPrefixAlert';
 import ErrorBoundryWrapper from 'components/shared/ErrorBoundryWrapper';
 import { useEntityType } from 'context/EntityContext';
 import { FormattedMessage } from 'react-intl';
 import {
+    useBinding_collectionMetadataProperty,
     useBinding_currentBindingIndex,
     useBinding_hydrated,
     useBinding_resourceConfigOfMetaBindingProperty,
@@ -46,8 +48,27 @@ function ResourceConfig({
         'disable'
     );
 
+    const trialCollection = useBinding_collectionMetadataProperty(
+        collectionName,
+        'trialStorage'
+    );
+
+    const collectionAdded = useBinding_collectionMetadataProperty(
+        collectionName,
+        'added'
+    );
+
     return (
         <>
+            {entityType === 'materialization' ? (
+                <Box style={{ marginBottom: 16 }}>
+                    <TrialOnlyPrefixAlert
+                        messageId="workflows.error.oldBoundCollection.added"
+                        triggered={Boolean(trialCollection && collectionAdded)}
+                    />
+                </Box>
+            ) : null}
+
             <Typography
                 component="div"
                 sx={{ mb: 2 }}
@@ -72,6 +93,7 @@ function ResourceConfig({
 
             <Backfill
                 bindingIndex={draftedBindingIndex}
+                collection={collectionName}
                 collectionEnabled={!collectionDisabled}
             />
 

src/components/collection/SectionAlertIndicator.tsx

@@ -0,0 +1,59 @@
+import { Typography, useTheme } from '@mui/material';
+import { WarningCircle } from 'iconoir-react';
+import { useIntl } from 'react-intl';
+import {
+    useBinding_bindingErrorsExist,
+    useBinding_fullSourceErrorsExist,
+    useBinding_hydrationErrorsExist,
+    useBinding_resourceConfigErrorsExist,
+} from 'stores/Binding/hooks';
+import { useBindingStore } from 'stores/Binding/Store';
+import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks';
+
+export default function SectionAlertIndicator() {
+    const intl = useIntl();
+    const theme = useTheme();
+
+    // Binding Store
+    const bindingHydrationErrorsExist = useBinding_hydrationErrorsExist();
+    const resourceConfigErrorsExist = useBinding_resourceConfigErrorsExist();
+    const bindingErrorsExist = useBinding_bindingErrorsExist();
+    const fullSourceErrorsExist = useBinding_fullSourceErrorsExist();
+    const sourceBackfillRecommended = useBindingStore((state) =>
+        Object.values(state.collectionMetadata).some(
+            (meta) => meta.sourceBackfillRecommended
+        )
+    );
+
+    // Form State Store
+    const messagePrefix = useFormStateStore_messagePrefix();
+
+    const hasErrors =
+        bindingHydrationErrorsExist ||
+        resourceConfigErrorsExist ||
+        fullSourceErrorsExist;
+
+    const hasWarnings = bindingErrorsExist || sourceBackfillRecommended;
+
+    return (
+        <>
+            {hasErrors || hasWarnings ? (
+                <WarningCircle
+                    style={{
+                        marginRight: 4,
+                        fontSize: 12,
+                        color: hasErrors
+                            ? theme.palette.error.main
+                            : theme.palette.warning.main,
+                    }}
+                />
+            ) : null}
+
+            <Typography variant="subtitle1">
+                {intl.formatMessage({
+                    id: `${messagePrefix}.collections.heading`,
+                })}
+            </Typography>
+        </>
+    );
+}

src/components/collection/types.ts

@@ -0,0 +1,9 @@
+import { DraftSpecQuery } from 'hooks/useDraftSpecs';
+import { ReactNode } from 'react';
+
+export interface CollectionConfigProps {
+    draftSpecs: DraftSpecQuery[];
+    readOnly?: boolean;
+    hideBorder?: boolean;
+    RediscoverButton?: ReactNode;
+}