DataFlow backfill - disabled but most of the functionality is there

src/components/editor/Bindings/Backfill/BackfillCount.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import {
     useBinding_backfilledBindings_count,
-    useBinding_enabledCollections_count,
+    useBinding_collections_count,
 } from 'stores/Binding/hooks';
 import { BackfillCountProps } from './types';
 
@@ -13,7 +13,7 @@ function BackfillCount({ disabled }: BackfillCountProps) {
     const entityType = useEntityType();
 
     const backfillCount = useBinding_backfilledBindings_count();
-    const bindingsTotal = useBinding_enabledCollections_count();
+    const bindingsTotal = useBinding_collections_count();
 
     // Only reason noBackfill is in here is because we are already running the memo on backfillCount change
     const [noBackfill, itemType_backfill, itemType_bindings] = useMemo(() => {

src/components/editor/Bindings/index.tsx

@@ -110,11 +110,9 @@ function BindingsMultiEditor({
                 {workflow === 'capture_edit' ||
                 workflow === 'materialization_edit' ? (
                     <Backfill
-                        description={
-                            <FormattedMessage
-                                id={`workflows.collectionSelector.manualBackfill.message.${entityType}.allBindings`}
-                            />
-                        }
+                        description={intl.formatMessage({
+                            id: `workflows.collectionSelector.manualBackfill.message.${entityType}.allBindings`,
+                        })}
                     />
                 ) : null}
             </Stack>

src/components/shared/ChipList/index.tsx

@@ -13,7 +13,7 @@ function ChipList({
 }: ChipListProps) {
     const intl = useIntl();
 
-    const listScroller = useRef<any>(null);
+    const listScroller = useRef<HTMLDivElement>(null);
 
     // Format data coming in so we can still pass in a list of strings
     const formattedValues = useMemo(() => {
@@ -48,9 +48,11 @@ function ChipList({
     // When all chips are shown scroll down just a hair to try to make
     //   sure the user knows that the list is scrollable
     useEffect(() => {
-        if (maxRender === valueLength) {
-            listScroller.current?.scrollTo(undefined, 10);
+        if (!listScroller.current || maxRender !== valueLength) {
+            return;
         }
+
+        listScroller.current.scrollTop += 20;
     }, [maxRender, valueLength]);
 
     return (
@@ -60,6 +62,7 @@ function ChipList({
                 display: 'flex',
                 flexWrap: 'wrap',
                 listStyle: 'none',
+                alignItems: 'center',
                 p: 0,
                 m: 0,
                 minWidth: 100,

src/lang/en-US/Workflows.ts

@@ -77,9 +77,9 @@ export const Workflows: Record<string, string> = {
     'workflows.collectionSelector.manualBackfill.notSupported.title': `This {entityType} doesn’t support backfills.`,
     'workflows.collectionSelector.manualBackfill.notSupported.message': `To backfill, disable each binding, save and then re-enable and save.`,
     'workflows.collectionSelector.manualBackfill.message.capture': `Trigger a backfill of this collection from the source when published.`,
-    'workflows.collectionSelector.manualBackfill.message.capture.allBindings': `Trigger a backfill of all collections from the source when published.`,
+    'workflows.collectionSelector.manualBackfill.message.capture.allBindings': `Trigger a backfill of all collection from the source when published. The UI will mark all collections as backfilled but the server will filter out those that cannot be backfilled (e.g. disabled collections).`,
     'workflows.collectionSelector.manualBackfill.message.materialization': `Trigger a backfill from the source collection to its materialized resource when published.`,
-    'workflows.collectionSelector.manualBackfill.message.materialization.allBindings': `Trigger a backfill from all source collections to their materialized resource when published.`,
+    'workflows.collectionSelector.manualBackfill.message.materialization.allBindings': `Trigger a backfill from all source collections to their materialized resource when published. The UI will mark all collections as backfilled but the server will filter out those that cannot be backfilled (e.g. disabled collections).`,
     'workflows.collectionSelector.manualBackfill.cta.backfill': `Backfill`,
     'workflows.collectionSelector.manualBackfill.count': `{backfillCount} of {bindingsTotal} {itemType} marked for backfill`,
     'workflows.collectionSelector.manualBackfill.count.empty': `no {itemType} marked for backfill`,

src/stores/Binding/hooks.ts

@@ -122,6 +122,9 @@ export const useBinding_collections = () => {
     return useBindingStore(useShallow((state) => state.getCollections()));
 };
 
+export const useBinding_collections_count = () =>
+    useBindingStore(useShallow((state) => state.getCollections().length));
+
 export const useBinding_enabledCollections_count = () =>
     useBindingStore(
         useShallow((state) => state.getEnabledCollections().length)