From abcfb599428b852bfd11f46b189be5a565006605 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Mon, 5 Feb 2024 11:01:03 -0500 Subject: [PATCH 01/20] Add backfill section above binding selector --- .../capture/AutoDiscoverySettings.tsx | 4 +- src/components/collection/ResourceConfig.tsx | 4 +- .../index.tsx} | 114 ++++++++++++---- .../Backfill/useUpdateBackfillCounter.ts | 125 ++++++++++++++++++ src/components/editor/Bindings/index.tsx | 13 +- .../Bindings/useUpdateBackfillCounter.ts | 84 ------------ .../materialization/SourceCapture/index.tsx | 4 +- src/context/Theme.tsx | 21 +++ src/stores/ResourceConfig/Store.ts | 12 ++ src/stores/ResourceConfig/hooks.ts | 17 +++ src/stores/ResourceConfig/types.ts | 3 + 11 files changed, 278 insertions(+), 123 deletions(-) rename src/components/editor/Bindings/{ManualBackfill.tsx => Backfill/index.tsx} (57%) create mode 100644 src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts delete mode 100644 src/components/editor/Bindings/useUpdateBackfillCounter.ts diff --git a/src/components/capture/AutoDiscoverySettings.tsx b/src/components/capture/AutoDiscoverySettings.tsx index 5152d839d..d189c177f 100644 --- a/src/components/capture/AutoDiscoverySettings.tsx +++ b/src/components/capture/AutoDiscoverySettings.tsx @@ -142,8 +142,8 @@ function AutoDiscoverySettings({ readOnly }: Props) { ]); return ( - - + + diff --git a/src/components/collection/ResourceConfig.tsx b/src/components/collection/ResourceConfig.tsx index 322eecec6..e877e33f3 100644 --- a/src/components/collection/ResourceConfig.tsx +++ b/src/components/collection/ResourceConfig.tsx @@ -1,7 +1,7 @@ import { Box, Typography } from '@mui/material'; import ResourceConfigForm from 'components/collection/ResourceConfigForm'; +import Backfill from 'components/editor/Bindings/Backfill'; import FieldSelectionViewer from 'components/editor/Bindings/FieldSelection'; -import ManualBackfill from 'components/editor/Bindings/ManualBackfill'; import TimeTravel from 'components/editor/Bindings/TimeTravel'; import { useEditorStore_queryResponse_draftedBindingIndex } from 'components/editor/Store/hooks'; import { useEntityType } from 'context/EntityContext'; @@ -54,7 +54,7 @@ function ResourceConfig({ collectionName, readOnly = false }: Props) { {isEdit && draftedBindingIndex > -1 && !collectionDisabled ? ( - + ) : null} {entityType === 'materialization' && !collectionDisabled ? ( diff --git a/src/components/editor/Bindings/ManualBackfill.tsx b/src/components/editor/Bindings/Backfill/index.tsx similarity index 57% rename from src/components/editor/Bindings/ManualBackfill.tsx rename to src/components/editor/Bindings/Backfill/index.tsx index b789ce5ea..c80692849 100644 --- a/src/components/editor/Bindings/ManualBackfill.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -11,20 +11,26 @@ import { import { FormStatus } from 'stores/FormState/types'; import { useResourceConfig_addBackfilledCollection, + useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, + useResourceConfig_collections, useResourceConfig_currentCollection, useResourceConfig_removeBackfilledCollection, + useResourceConfig_setBackfillAllBindings, } from 'stores/ResourceConfig/hooks'; -import { useEditorStore_queryResponse_draftSpecs } from '../Store/hooks'; -import useUpdateBackfillCounter from './useUpdateBackfillCounter'; +import { useEditorStore_queryResponse_draftSpecs } from '../../Store/hooks'; +import useUpdateBackfillCounter, { + BindingMetadata, +} from './useUpdateBackfillCounter'; export type BooleanString = 'true' | 'false'; interface Props { - bindingIndex: number; + bindingIndex?: number; + updateAll?: boolean; } -function ManualBackfill({ bindingIndex }: Props) { +function Backfill({ bindingIndex, updateAll }: Props) { const entityType = useEntityType(); const { updateBackfillCounter } = useUpdateBackfillCounter(); @@ -37,24 +43,43 @@ function ManualBackfill({ bindingIndex }: Props) { // Resource Config Store const currentCollection = useResourceConfig_currentCollection(); + const collections = useResourceConfig_collections(); + const backfilledCollections = useResourceConfig_backfilledCollections(); const addBackfilledCollection = useResourceConfig_addBackfilledCollection(); const removeBackfilledCollection = useResourceConfig_removeBackfilledCollection(); - const selected = useMemo( - () => - currentCollection - ? backfilledCollections.includes(currentCollection) - : false, - [backfilledCollections, currentCollection] - ); + const backfillAllBindings = useResourceConfig_backfillAllBindings(); + const setBackfillAllBindings = useResourceConfig_setBackfillAllBindings(); + + const selected = useMemo(() => { + if (updateAll) { + return backfillAllBindings; + } + + return currentCollection + ? backfilledCollections.includes(currentCollection) + : false; + }, [ + backfillAllBindings, + backfilledCollections, + currentCollection, + updateAll, + ]); const [increment, setIncrement] = useState( selected ? 'true' : 'undefined' ); const serverUpdateRequired = useMemo(() => { + if (updateAll && increment !== 'undefined') { + return ( + (backfillAllBindings && increment === 'false') || + (!backfillAllBindings && increment === 'true') + ); + } + if (currentCollection && increment !== 'undefined') { return increment === 'true' ? !backfilledCollections.includes(currentCollection) @@ -62,7 +87,13 @@ function ManualBackfill({ bindingIndex }: Props) { } return false; - }, [backfilledCollections, currentCollection, increment]); + }, [ + backfillAllBindings, + backfilledCollections, + currentCollection, + increment, + updateAll, + ]); const draftSpec = useMemo( () => @@ -71,24 +102,43 @@ function ManualBackfill({ bindingIndex }: Props) { ); useEffect(() => { - if ( - draftSpec && - currentCollection && - serverUpdateRequired && - increment !== 'undefined' - ) { + if (draftSpec && serverUpdateRequired && increment !== 'undefined') { setFormState({ status: FormStatus.UPDATING }); - updateBackfillCounter( - draftSpec, - bindingIndex, - increment, - currentCollection - ).then( + const singleBindingUpdate = + typeof bindingIndex === 'number' && + bindingIndex > -1 && + currentCollection && + !updateAll; + + const bindingMetadata: BindingMetadata | undefined = + singleBindingUpdate + ? { collection: currentCollection, bindingIndex } + : undefined; + + updateBackfillCounter(draftSpec, increment, bindingMetadata).then( () => { - increment === 'true' - ? addBackfilledCollection(currentCollection) - : removeBackfilledCollection(currentCollection); + console.log('HERE'); + console.log('single binding update', singleBindingUpdate); + console.log('update all', updateAll && collections); + + if (singleBindingUpdate) { + console.log('A'); + + increment === 'true' + ? addBackfilledCollection(currentCollection) + : removeBackfilledCollection(currentCollection); + } else if (updateAll && collections) { + console.log('B'); + + setBackfillAllBindings(increment === 'true'); + + collections.forEach((collection) => + increment === 'true' + ? addBackfilledCollection(collection) + : removeBackfilledCollection(collection) + ); + } setFormState({ status: FormStatus.UPDATED }); }, @@ -105,12 +155,15 @@ function ManualBackfill({ bindingIndex }: Props) { }, [ addBackfilledCollection, bindingIndex, + collections, currentCollection, draftSpec, increment, removeBackfilledCollection, serverUpdateRequired, + setBackfillAllBindings, setFormState, + updateAll, updateBackfillCounter, ]); @@ -118,7 +171,10 @@ function ManualBackfill({ bindingIndex }: Props) { - + @@ -151,4 +207,4 @@ function ManualBackfill({ bindingIndex }: Props) { ); } -export default ManualBackfill; +export default Backfill; diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts new file mode 100644 index 000000000..2230197a9 --- /dev/null +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -0,0 +1,125 @@ +import { modifyDraftSpec } from 'api/draftSpecs'; +import { useEntityType } from 'context/EntityContext'; +import { DraftSpecQuery } from 'hooks/useDraftSpecs'; +import { useCallback } from 'react'; +import { useIntl } from 'react-intl'; +import { BASE_ERROR } from 'services/supabase'; +import { useResourceConfig_backfilledCollections } from 'stores/ResourceConfig/hooks'; +import { Schema } from 'types'; +import { getBackfillCounter, getCollectionName } from 'utils/workflow-utils'; +import { + useEditorStore_persistedDraftId, + useEditorStore_queryResponse_mutate, +} from '../../Store/hooks'; +import { BooleanString } from '.'; + +export interface BindingMetadata { + bindingIndex: number; + collection: string; +} + +const evaluateBackfillCounter = ( + binding: Schema, + increment: BooleanString +): Schema => { + let counter = getBackfillCounter(binding); + + if (increment === 'true') { + counter = counter + 1; + } else if (counter > 0) { + counter = counter - 1; + } + + binding.backfill = counter; + + return binding; +}; + +function useUpdateBackfillCounter() { + const intl = useIntl(); + const entityType = useEntityType(); + + // Draft Editor Store + const draftId = useEditorStore_persistedDraftId(); + const mutateDraftSpecs = useEditorStore_queryResponse_mutate(); + + // Resource Config Store + const backfilledCollections = useResourceConfig_backfilledCollections(); + + // TODO: Make the binding metadata argument an array. + const updateBackfillCounter = useCallback( + async ( + draftSpec: DraftSpecQuery, + increment: BooleanString, + bindingMetadata?: BindingMetadata + ) => { + if ( + !mutateDraftSpecs || + (bindingMetadata && bindingMetadata.bindingIndex === -1) + ) { + const errorMessageId = bindingMetadata + ? 'workflows.collectionSelector.manualBackfill.error.message' + : ''; + + const errorMessageValues = bindingMetadata + ? { collection: bindingMetadata.collection } + : undefined; + + return Promise.reject({ + ...BASE_ERROR, + message: intl.formatMessage( + { id: errorMessageId }, + errorMessageValues + ), + }); + } + + const spec: Schema = draftSpec.spec; + + if (bindingMetadata?.bindingIndex) { + const { bindingIndex } = bindingMetadata; + + spec.bindings[bindingIndex] = evaluateBackfillCounter( + spec.bindings[bindingIndex], + increment + ); + } else { + spec.bindings.forEach((binding: Schema, index: number) => { + const collection = getCollectionName(binding); + + const shouldIncrement = + !backfilledCollections.includes(collection) && + increment === 'true'; + + const shouldDecrement = + backfilledCollections.includes(collection) && + increment === 'false'; + + if (shouldIncrement || shouldDecrement) { + spec.bindings[index] = evaluateBackfillCounter( + binding, + increment + ); + } + }); + } + + const updateResponse = await modifyDraftSpec(spec, { + draft_id: draftId, + catalog_name: draftSpec.catalog_name, + spec_type: entityType, + }); + + if (updateResponse.error) { + return Promise.reject(updateResponse.error); + } + + return mutateDraftSpecs(); + }, + [backfilledCollections, draftId, entityType, intl, mutateDraftSpecs] + ); + + return { updateBackfillCounter }; +} + +export default useUpdateBackfillCounter; diff --git a/src/components/editor/Bindings/index.tsx b/src/components/editor/Bindings/index.tsx index f4151f93b..b80252801 100644 --- a/src/components/editor/Bindings/index.tsx +++ b/src/components/editor/Bindings/index.tsx @@ -1,4 +1,4 @@ -import { Typography, useTheme } from '@mui/material'; +import { Stack, Typography, useTheme } from '@mui/material'; import AutoDiscoverySettings from 'components/capture/AutoDiscoverySettings'; import BindingsEditor from 'components/editor/Bindings/Editor'; import BindingSelector from 'components/editor/Bindings/Selector'; @@ -22,13 +22,14 @@ import { useDetailsForm_details_entityName, } from 'stores/DetailsForm/hooks'; import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks'; -import { EditorStoreNames } from 'stores/names'; import { useResourceConfig_discoveredCollections, useResourceConfig_resetResourceConfigAndCollections, useResourceConfig_setResourceSchema, } from 'stores/ResourceConfig/hooks'; +import { EditorStoreNames } from 'stores/names'; import { Schema } from 'types'; +import Backfill from './Backfill'; interface Props { draftSpecs: DraftSpecQuery[]; @@ -131,9 +132,13 @@ function BindingsMultiEditor({ /> - {entityType === 'capture' ? : null} + + {entityType === 'capture' ? : null} + + {entityType === 'materialization' ? : null} - {entityType === 'materialization' ? : null} + + { - if (!mutateDraftSpecs || bindingIndex === -1) { - // TODO: Extend the type of the error object accepted by setFormState to include strings. - // Currently, this action only accepts a PostgresError object. - return Promise.reject({ - message: intl.formatMessage( - { - id: 'workflows.collectionSelector.manualBackfill.error.message', - }, - { collection } - ), - details: '', - hint: '', - code: '', - }); - } - - const spec: Schema = draftSpec.spec; - let counter = getBackfillCounter(spec.bindings[bindingIndex]); - - if (increment === 'true') { - counter = counter + 1; - } else if (counter > 0) { - counter = counter - 1; - } - - // TODO: Determine if setting the backfill counter to zero is the same as removing the property entirely. - if (counter > 0) { - spec.bindings[bindingIndex].backfill = counter; - } else { - // Remove the backfill property from the specification if it equates to default behavior. - spec.bindings[bindingIndex] = omit( - spec.bindings[bindingIndex], - 'backfill' - ); - } - - const updateResponse = await modifyDraftSpec(spec, { - draft_id: draftId, - catalog_name: draftSpec.catalog_name, - spec_type: entityType, - }); - - if (updateResponse.error) { - return Promise.reject(updateResponse.error); - } - - return mutateDraftSpecs(); - }, - [draftId, entityType, intl, mutateDraftSpecs] - ); - - return { updateBackfillCounter }; -} - -export default useUpdateBackfillCounter; diff --git a/src/components/materialization/SourceCapture/index.tsx b/src/components/materialization/SourceCapture/index.tsx index b962cdbcf..7acf9a298 100644 --- a/src/components/materialization/SourceCapture/index.tsx +++ b/src/components/materialization/SourceCapture/index.tsx @@ -9,8 +9,8 @@ const DOCS_LINK = function SourceCapture() { return ( - - + + diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index 7ae43dce8..bd2d031d0 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -39,6 +39,24 @@ import { LocalStorageKeys } from 'utils/localStorage-utils'; // } // } +declare module '@mui/material/styles' { + interface TypographyVariants { + formSectionHeader: React.CSSProperties; + } + + // allow configuration using `createTheme` + interface TypographyVariantsOptions { + formSectionHeader?: React.CSSProperties; + } +} + +// Update the Typography's variant prop options +declare module '@mui/material/Typography' { + interface TypographyPropsVariantOverrides { + formSectionHeader: true; + } +} + // Navigation Width export enum NavWidths { MOBILE = 0, @@ -721,6 +739,9 @@ const themeSettings = createTheme({ button: { fontSize: 14, }, + formSectionHeader: { + fontWeight: 500, + }, }, } as ThemeOptions); diff --git a/src/stores/ResourceConfig/Store.ts b/src/stores/ResourceConfig/Store.ts index a0aadd6c2..a363d3a8b 100644 --- a/src/stores/ResourceConfig/Store.ts +++ b/src/stores/ResourceConfig/Store.ts @@ -139,6 +139,7 @@ const getInitialCollectionStateData = (): Pick< const getInitialMiscStoreData = (): Pick< ResourceConfigState, + | 'backfillAllBindings' | 'backfilledCollections' | 'discoveredCollections' | 'hydrated' @@ -152,6 +153,7 @@ const getInitialMiscStoreData = (): Pick< | 'collectionsRequiringRediscovery' | 'rediscoveryRequired' > => ({ + backfillAllBindings: false, backfilledCollections: [], discoveredCollections: null, hydrated: false, @@ -490,6 +492,16 @@ const getInitialState = ( ); }, + setBackfillAllBindings: (value) => { + set( + produce((state: ResourceConfigState) => { + state.backfillAllBindings = value; + }), + false, + 'Backfill All Bindings Flag Set' + ); + }, + updateResourceConfig: (key, value) => { const { resourceConfig, setResourceConfig } = get(); diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts index 6db6110bd..a1040d121 100644 --- a/src/stores/ResourceConfig/hooks.ts +++ b/src/stores/ResourceConfig/hooks.ts @@ -130,6 +130,23 @@ export const useResourceConfig_removeBackfilledCollection = () => { ); }; +export const useResourceConfig_backfillAllBindings = () => { + return useZustandStore< + ResourceConfigState, + ResourceConfigState['backfillAllBindings'] + >(ResourceConfigStoreNames.GENERAL, (state) => state.backfillAllBindings); +}; + +export const useResourceConfig_setBackfillAllBindings = () => { + return useZustandStore< + ResourceConfigState, + ResourceConfigState['setBackfillAllBindings'] + >( + ResourceConfigStoreNames.GENERAL, + (state) => state.setBackfillAllBindings + ); +}; + export const useResourceConfig_resourceConfig = () => { return useZustandStore< ResourceConfigState, diff --git a/src/stores/ResourceConfig/types.ts b/src/stores/ResourceConfig/types.ts index c7d3aebf0..159dbad6f 100644 --- a/src/stores/ResourceConfig/types.ts +++ b/src/stores/ResourceConfig/types.ts @@ -53,6 +53,9 @@ export interface ResourceConfigState extends StoreWithHydration { addBackfilledCollection: (value: string) => void; removeBackfilledCollection: (value: string) => void; + backfillAllBindings: boolean; + setBackfillAllBindings: (value: boolean) => void; + // Resource Config resourceConfig: ResourceConfigDictionary; prefillResourceConfig: (bindings: any) => void; From 4226e1ee45750587410f56f0e57106699bf2bbfe Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Mon, 5 Feb 2024 12:42:56 -0500 Subject: [PATCH 02/20] Attempt to synchronize the backfill toggle button states --- .../editor/Bindings/Backfill/index.tsx | 33 +++++++++++-------- src/stores/ResourceConfig/Store.ts | 22 +++++++------ src/stores/ResourceConfig/hooks.ts | 12 +++---- src/stores/ResourceConfig/types.ts | 4 +-- 4 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index c80692849..207c7692b 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -10,12 +10,12 @@ import { } from 'stores/FormState/hooks'; import { FormStatus } from 'stores/FormState/types'; import { - useResourceConfig_addBackfilledCollection, + useResourceConfig_addBackfilledCollections, useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, useResourceConfig_collections, useResourceConfig_currentCollection, - useResourceConfig_removeBackfilledCollection, + useResourceConfig_removeBackfilledCollections, useResourceConfig_setBackfillAllBindings, } from 'stores/ResourceConfig/hooks'; import { useEditorStore_queryResponse_draftSpecs } from '../../Store/hooks'; @@ -46,9 +46,10 @@ function Backfill({ bindingIndex, updateAll }: Props) { const collections = useResourceConfig_collections(); const backfilledCollections = useResourceConfig_backfilledCollections(); - const addBackfilledCollection = useResourceConfig_addBackfilledCollection(); - const removeBackfilledCollection = - useResourceConfig_removeBackfilledCollection(); + const addBackfilledCollections = + useResourceConfig_addBackfilledCollections(); + const removeBackfilledCollections = + useResourceConfig_removeBackfilledCollections(); const backfillAllBindings = useResourceConfig_backfillAllBindings(); const setBackfillAllBindings = useResourceConfig_setBackfillAllBindings(); @@ -101,6 +102,12 @@ function Backfill({ bindingIndex, updateAll }: Props) { [draftSpecs] ); + useEffect(() => { + if (!updateAll) { + setIncrement(backfillAllBindings ? 'true' : 'false'); + } + }, [backfillAllBindings, setIncrement, updateAll]); + useEffect(() => { if (draftSpec && serverUpdateRequired && increment !== 'undefined') { setFormState({ status: FormStatus.UPDATING }); @@ -126,18 +133,16 @@ function Backfill({ bindingIndex, updateAll }: Props) { console.log('A'); increment === 'true' - ? addBackfilledCollection(currentCollection) - : removeBackfilledCollection(currentCollection); + ? addBackfilledCollections([currentCollection]) + : removeBackfilledCollections([currentCollection]); } else if (updateAll && collections) { console.log('B'); setBackfillAllBindings(increment === 'true'); - collections.forEach((collection) => - increment === 'true' - ? addBackfilledCollection(collection) - : removeBackfilledCollection(collection) - ); + increment === 'true' + ? addBackfilledCollections(collections) + : removeBackfilledCollections(collections); } setFormState({ status: FormStatus.UPDATED }); @@ -153,13 +158,13 @@ function Backfill({ bindingIndex, updateAll }: Props) { ); } }, [ - addBackfilledCollection, + addBackfilledCollections, bindingIndex, collections, currentCollection, draftSpec, increment, - removeBackfilledCollection, + removeBackfilledCollections, serverUpdateRequired, setBackfillAllBindings, setFormState, diff --git a/src/stores/ResourceConfig/Store.ts b/src/stores/ResourceConfig/Store.ts index a363d3a8b..fb695eba9 100644 --- a/src/stores/ResourceConfig/Store.ts +++ b/src/stores/ResourceConfig/Store.ts @@ -16,6 +16,7 @@ import { omit, orderBy, pick, + union, } from 'lodash'; import { createJSONFormDefaults } from 'services/ajv'; import { @@ -445,7 +446,7 @@ const getInitialState = ( }, prefillBackfilledCollections: (liveBindings, draftedBindings) => { - const { addBackfilledCollection } = get(); + const { addBackfilledCollections } = get(); draftedBindings.forEach((draftedBinding) => { const collection = getCollectionName(draftedBinding); @@ -462,33 +463,34 @@ const getInitialState = ( liveBackfillCounter !== draftedBackfillCounter || (liveBindingIndex === -1 && draftedBackfillCounter > 0) ) { - addBackfilledCollection(collection); + addBackfilledCollections([collection]); } }); }, - addBackfilledCollection: (value) => { + addBackfilledCollections: (values) => { set( produce((state: ResourceConfigState) => { - if (!state.backfilledCollections.includes(value)) { - state.backfilledCollections.push(value); - } + state.backfilledCollections = union([ + ...values, + ...state.backfilledCollections, + ]); }), false, - 'Backfilled Collection Added' + 'Backfilled Collections Added' ); }, - removeBackfilledCollection: (value) => { + removeBackfilledCollections: (values) => { set( produce((state: ResourceConfigState) => { state.backfilledCollections = state.backfilledCollections.filter( - (collection) => collection !== value + (collection) => !values.includes(collection) ); }), false, - 'Backfilled Collection Removed' + 'Backfilled Collections Removed' ); }, diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts index a1040d121..04894d999 100644 --- a/src/stores/ResourceConfig/hooks.ts +++ b/src/stores/ResourceConfig/hooks.ts @@ -110,23 +110,23 @@ export const useResourceConfig_backfilledCollections = () => { >(ResourceConfigStoreNames.GENERAL, (state) => state.backfilledCollections); }; -export const useResourceConfig_addBackfilledCollection = () => { +export const useResourceConfig_addBackfilledCollections = () => { return useZustandStore< ResourceConfigState, - ResourceConfigState['addBackfilledCollection'] + ResourceConfigState['addBackfilledCollections'] >( ResourceConfigStoreNames.GENERAL, - (state) => state.addBackfilledCollection + (state) => state.addBackfilledCollections ); }; -export const useResourceConfig_removeBackfilledCollection = () => { +export const useResourceConfig_removeBackfilledCollections = () => { return useZustandStore< ResourceConfigState, - ResourceConfigState['removeBackfilledCollection'] + ResourceConfigState['removeBackfilledCollections'] >( ResourceConfigStoreNames.GENERAL, - (state) => state.removeBackfilledCollection + (state) => state.removeBackfilledCollections ); }; diff --git a/src/stores/ResourceConfig/types.ts b/src/stores/ResourceConfig/types.ts index 159dbad6f..16d53d35e 100644 --- a/src/stores/ResourceConfig/types.ts +++ b/src/stores/ResourceConfig/types.ts @@ -50,8 +50,8 @@ export interface ResourceConfigState extends StoreWithHydration { liveBindings: any[], draftedBindings: any[] ) => void; - addBackfilledCollection: (value: string) => void; - removeBackfilledCollection: (value: string) => void; + addBackfilledCollections: (values: string[]) => void; + removeBackfilledCollections: (values: string[]) => void; backfillAllBindings: boolean; setBackfillAllBindings: (value: boolean) => void; From 789bcd262737f1e4bb792867605f4824c307599e Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 11:40:04 -0500 Subject: [PATCH 03/20] Use a callback function as the backfill button click handler --- .../editor/Bindings/Backfill/index.tsx | 217 ++++++++++-------- src/stores/ResourceConfig/hooks.ts | 15 ++ 2 files changed, 134 insertions(+), 98 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 207c7692b..282bf0249 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -2,7 +2,7 @@ import { Box, Stack, Typography } from '@mui/material'; import OutlinedToggleButton from 'components/shared/OutlinedToggleButton'; import { useEntityType } from 'context/EntityContext'; import { Check } from 'iconoir-react'; -import { useEffect, useMemo, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import { useFormStateStore_isActive, @@ -11,10 +11,10 @@ import { import { FormStatus } from 'stores/FormState/types'; import { useResourceConfig_addBackfilledCollections, - useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, useResourceConfig_collections, useResourceConfig_currentCollection, + useResourceConfig_getBackfillAllBindings, useResourceConfig_removeBackfilledCollections, useResourceConfig_setBackfillAllBindings, } from 'stores/ResourceConfig/hooks'; @@ -30,6 +30,32 @@ interface Props { updateAll?: boolean; } +const evaluateServerDifferences = ( + backfillAllBindings: boolean, + backfilledCollections: string[], + currentCollection: string | null, + increment: BooleanString, + updateAll?: boolean +) => { + if (updateAll) { + console.log('backfillAllBindings -----', backfillAllBindings); + console.log('increment -----', increment); + + return ( + (backfillAllBindings && increment === 'false') || + (!backfillAllBindings && increment === 'true') + ); + } + + if (currentCollection) { + return increment === 'true' + ? !backfilledCollections.includes(currentCollection) + : backfilledCollections.includes(currentCollection); + } + + return false; +}; + function Backfill({ bindingIndex, updateAll }: Props) { const entityType = useEntityType(); const { updateBackfillCounter } = useUpdateBackfillCounter(); @@ -51,7 +77,7 @@ function Backfill({ bindingIndex, updateAll }: Props) { const removeBackfilledCollections = useResourceConfig_removeBackfilledCollections(); - const backfillAllBindings = useResourceConfig_backfillAllBindings(); + const backfillAllBindings = useResourceConfig_getBackfillAllBindings(); const setBackfillAllBindings = useResourceConfig_setBackfillAllBindings(); const selected = useMemo(() => { @@ -69,108 +95,103 @@ function Backfill({ bindingIndex, updateAll }: Props) { updateAll, ]); - const [increment, setIncrement] = useState( - selected ? 'true' : 'undefined' + const value: BooleanString = useMemo( + () => (selected ? 'true' : 'false'), + [selected] ); - const serverUpdateRequired = useMemo(() => { - if (updateAll && increment !== 'undefined') { - return ( - (backfillAllBindings && increment === 'false') || - (!backfillAllBindings && increment === 'true') - ); - } - - if (currentCollection && increment !== 'undefined') { - return increment === 'true' - ? !backfilledCollections.includes(currentCollection) - : backfilledCollections.includes(currentCollection); - } - - return false; - }, [ - backfillAllBindings, - backfilledCollections, - currentCollection, - increment, - updateAll, - ]); - const draftSpec = useMemo( () => draftSpecs.length > 0 && draftSpecs[0].spec ? draftSpecs[0] : null, [draftSpecs] ); - useEffect(() => { - if (!updateAll) { - setIncrement(backfillAllBindings ? 'true' : 'false'); - } - }, [backfillAllBindings, setIncrement, updateAll]); - - useEffect(() => { - if (draftSpec && serverUpdateRequired && increment !== 'undefined') { - setFormState({ status: FormStatus.UPDATING }); - - const singleBindingUpdate = - typeof bindingIndex === 'number' && - bindingIndex > -1 && - currentCollection && - !updateAll; - - const bindingMetadata: BindingMetadata | undefined = - singleBindingUpdate - ? { collection: currentCollection, bindingIndex } - : undefined; - - updateBackfillCounter(draftSpec, increment, bindingMetadata).then( - () => { - console.log('HERE'); - console.log('single binding update', singleBindingUpdate); - console.log('update all', updateAll && collections); - - if (singleBindingUpdate) { - console.log('A'); - - increment === 'true' - ? addBackfilledCollections([currentCollection]) - : removeBackfilledCollections([currentCollection]); - } else if (updateAll && collections) { - console.log('B'); - - setBackfillAllBindings(increment === 'true'); - - increment === 'true' - ? addBackfilledCollections(collections) - : removeBackfilledCollections(collections); - } - - setFormState({ status: FormStatus.UPDATED }); - }, - (error) => - setFormState({ - status: FormStatus.FAILED, - error: { - title: 'workflows.collectionSelector.manualBackfill.error.title', - error, - }, - }) + const handleClick = useCallback( + (increment: BooleanString) => { + const serverUpdateRequired = evaluateServerDifferences( + backfillAllBindings, + backfilledCollections, + currentCollection, + increment, + updateAll ); - } - }, [ - addBackfilledCollections, - bindingIndex, - collections, - currentCollection, - draftSpec, - increment, - removeBackfilledCollections, - serverUpdateRequired, - setBackfillAllBindings, - setFormState, - updateAll, - updateBackfillCounter, - ]); + + if (draftSpec && serverUpdateRequired) { + setFormState({ status: FormStatus.UPDATING }); + + const singleBindingUpdate = + typeof bindingIndex === 'number' && + bindingIndex > -1 && + currentCollection && + !updateAll; + + const bindingMetadata: BindingMetadata | undefined = + singleBindingUpdate + ? { collection: currentCollection, bindingIndex } + : undefined; + + updateBackfillCounter( + draftSpec, + increment, + bindingMetadata + ).then( + () => { + console.log('HERE'); + console.log( + 'single binding update', + singleBindingUpdate + ); + console.log('backfillAllBindings', backfillAllBindings); + console.log('increment', increment); + + if (singleBindingUpdate) { + console.log('A'); + + console.log( + 'backfilledCollections', + backfilledCollections + ); + + increment === 'true' + ? addBackfilledCollections([currentCollection]) + : removeBackfilledCollections([ + currentCollection, + ]); + } else if (updateAll && collections) { + console.log('B'); + + increment === 'true' + ? addBackfilledCollections(collections) + : removeBackfilledCollections(collections); + } + + setFormState({ status: FormStatus.UPDATED }); + }, + (error) => { + setFormState({ + status: FormStatus.FAILED, + error: { + title: 'workflows.collectionSelector.manualBackfill.error.title', + error, + }, + }); + } + ); + } + }, + [ + addBackfilledCollections, + bindingIndex, + collections, + currentCollection, + draftSpec, + removeBackfilledCollections, + setBackfillAllBindings, + setFormState, + updateAll, + updateBackfillCounter, + ] + ); return ( @@ -192,14 +213,14 @@ function Backfill({ bindingIndex, updateAll }: Props) { { event.preventDefault(); event.stopPropagation(); - setIncrement(checked === 'true' ? 'false' : 'true'); + handleClick(checked === 'true' ? 'false' : 'true'); }} > diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts index 04894d999..8a9f854a6 100644 --- a/src/stores/ResourceConfig/hooks.ts +++ b/src/stores/ResourceConfig/hooks.ts @@ -1,4 +1,5 @@ import { useZustandStore } from 'context/Zustand/provider'; +import { difference } from 'lodash'; import { ResourceConfigStoreNames } from 'stores/names'; import { shallow } from 'zustand/shallow'; import { ResourceConfig, ResourceConfigState } from './types'; @@ -147,6 +148,20 @@ export const useResourceConfig_setBackfillAllBindings = () => { ); }; +export const useResourceConfig_getBackfillAllBindings = () => { + return useZustandStore< + ResourceConfigState, + ResourceConfigState['backfillAllBindings'] + >(ResourceConfigStoreNames.GENERAL, (state) => { + const collectionsNotBackfilled = difference( + state.collections, + state.backfilledCollections + ); + + return collectionsNotBackfilled.length === 0; + }); +}; + export const useResourceConfig_resourceConfig = () => { return useZustandStore< ResourceConfigState, From e5dc56d5dc6bd5cf744a51ae4bc5c19dcf5d7b72 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 12:22:06 -0500 Subject: [PATCH 04/20] Remove updateAll component property --- .../editor/Bindings/Backfill/index.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 282bf0249..db8007299 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -25,9 +25,9 @@ import useUpdateBackfillCounter, { export type BooleanString = 'true' | 'false'; +// binding index = -1 in all binding use case interface Props { - bindingIndex?: number; - updateAll?: boolean; + bindingIndex: number; } const evaluateServerDifferences = ( @@ -35,9 +35,9 @@ const evaluateServerDifferences = ( backfilledCollections: string[], currentCollection: string | null, increment: BooleanString, - updateAll?: boolean + bindingIndex: number ) => { - if (updateAll) { + if (bindingIndex === -1) { console.log('backfillAllBindings -----', backfillAllBindings); console.log('increment -----', increment); @@ -56,7 +56,7 @@ const evaluateServerDifferences = ( return false; }; -function Backfill({ bindingIndex, updateAll }: Props) { +function Backfill({ bindingIndex }: Props) { const entityType = useEntityType(); const { updateBackfillCounter } = useUpdateBackfillCounter(); @@ -81,7 +81,7 @@ function Backfill({ bindingIndex, updateAll }: Props) { const setBackfillAllBindings = useResourceConfig_setBackfillAllBindings(); const selected = useMemo(() => { - if (updateAll) { + if (bindingIndex === -1) { return backfillAllBindings; } @@ -91,8 +91,8 @@ function Backfill({ bindingIndex, updateAll }: Props) { }, [ backfillAllBindings, backfilledCollections, + bindingIndex, currentCollection, - updateAll, ]); const value: BooleanString = useMemo( @@ -113,7 +113,7 @@ function Backfill({ bindingIndex, updateAll }: Props) { backfilledCollections, currentCollection, increment, - updateAll + bindingIndex ); if (draftSpec && serverUpdateRequired) { @@ -122,8 +122,7 @@ function Backfill({ bindingIndex, updateAll }: Props) { const singleBindingUpdate = typeof bindingIndex === 'number' && bindingIndex > -1 && - currentCollection && - !updateAll; + currentCollection; const bindingMetadata: BindingMetadata | undefined = singleBindingUpdate @@ -157,7 +156,7 @@ function Backfill({ bindingIndex, updateAll }: Props) { : removeBackfilledCollections([ currentCollection, ]); - } else if (updateAll && collections) { + } else if (bindingIndex === -1 && collections) { console.log('B'); increment === 'true' @@ -188,7 +187,6 @@ function Backfill({ bindingIndex, updateAll }: Props) { removeBackfilledCollections, setBackfillAllBindings, setFormState, - updateAll, updateBackfillCounter, ] ); @@ -198,7 +196,9 @@ function Backfill({ bindingIndex, updateAll }: Props) { From edf31a5c09c0e7f4bbd88898ccfd4d8833ec2565 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 14:56:45 -0500 Subject: [PATCH 05/20] Default the binding index property for global binding update --- .../editor/Bindings/Backfill/index.tsx | 82 +++++++------------ .../Backfill/useUpdateBackfillCounter.ts | 2 +- src/components/editor/Bindings/index.tsx | 2 +- 3 files changed, 32 insertions(+), 54 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index db8007299..2d7c2a35c 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -25,38 +25,11 @@ import useUpdateBackfillCounter, { export type BooleanString = 'true' | 'false'; -// binding index = -1 in all binding use case interface Props { - bindingIndex: number; + bindingIndex?: number; } -const evaluateServerDifferences = ( - backfillAllBindings: boolean, - backfilledCollections: string[], - currentCollection: string | null, - increment: BooleanString, - bindingIndex: number -) => { - if (bindingIndex === -1) { - console.log('backfillAllBindings -----', backfillAllBindings); - console.log('increment -----', increment); - - return ( - (backfillAllBindings && increment === 'false') || - (!backfillAllBindings && increment === 'true') - ); - } - - if (currentCollection) { - return increment === 'true' - ? !backfilledCollections.includes(currentCollection) - : backfilledCollections.includes(currentCollection); - } - - return false; -}; - -function Backfill({ bindingIndex }: Props) { +function Backfill({ bindingIndex = -1 }: Props) { const entityType = useEntityType(); const { updateBackfillCounter } = useUpdateBackfillCounter(); @@ -106,23 +79,40 @@ function Backfill({ bindingIndex }: Props) { [draftSpecs] ); + const evaluateServerDifferences = useCallback( + (increment: BooleanString) => { + if (bindingIndex === -1) { + return ( + (backfillAllBindings && increment === 'false') || + (!backfillAllBindings && increment === 'true') + ); + } + + if (currentCollection) { + return increment === 'true' + ? !backfilledCollections.includes(currentCollection) + : backfilledCollections.includes(currentCollection); + } + + return false; + }, + [ + backfillAllBindings, + backfilledCollections, + bindingIndex, + currentCollection, + ] + ); + const handleClick = useCallback( (increment: BooleanString) => { - const serverUpdateRequired = evaluateServerDifferences( - backfillAllBindings, - backfilledCollections, - currentCollection, - increment, - bindingIndex - ); + const serverUpdateRequired = evaluateServerDifferences(increment); if (draftSpec && serverUpdateRequired) { setFormState({ status: FormStatus.UPDATING }); const singleBindingUpdate = - typeof bindingIndex === 'number' && - bindingIndex > -1 && - currentCollection; + bindingIndex > -1 && currentCollection; const bindingMetadata: BindingMetadata | undefined = singleBindingUpdate @@ -135,22 +125,9 @@ function Backfill({ bindingIndex }: Props) { bindingMetadata ).then( () => { - console.log('HERE'); - console.log( - 'single binding update', - singleBindingUpdate - ); - console.log('backfillAllBindings', backfillAllBindings); - console.log('increment', increment); - if (singleBindingUpdate) { console.log('A'); - console.log( - 'backfilledCollections', - backfilledCollections - ); - increment === 'true' ? addBackfilledCollections([currentCollection]) : removeBackfilledCollections([ @@ -184,6 +161,7 @@ function Backfill({ bindingIndex }: Props) { collections, currentCollection, draftSpec, + evaluateServerDifferences, removeBackfilledCollections, setBackfillAllBindings, setFormState, diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index 2230197a9..8f2316d5f 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -76,7 +76,7 @@ function useUpdateBackfillCounter() { const spec: Schema = draftSpec.spec; - if (bindingMetadata?.bindingIndex) { + if (bindingMetadata && bindingMetadata.bindingIndex > -1) { const { bindingIndex } = bindingMetadata; spec.bindings[bindingIndex] = evaluateBackfillCounter( diff --git a/src/components/editor/Bindings/index.tsx b/src/components/editor/Bindings/index.tsx index b80252801..343c42f8e 100644 --- a/src/components/editor/Bindings/index.tsx +++ b/src/components/editor/Bindings/index.tsx @@ -137,7 +137,7 @@ function BindingsMultiEditor({ {entityType === 'materialization' ? : null} - + Date: Tue, 6 Feb 2024 15:35:46 -0500 Subject: [PATCH 06/20] Set backfilled collections and flag state at the same time --- .../editor/Bindings/Backfill/index.tsx | 42 +++++-------------- .../Backfill/useUpdateBackfillCounter.ts | 6 ++- src/stores/ResourceConfig/Store.ts | 29 +++++++++---- src/stores/ResourceConfig/hooks.ts | 31 ++------------ src/stores/ResourceConfig/types.ts | 6 ++- 5 files changed, 45 insertions(+), 69 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 2d7c2a35c..554fff6e8 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -10,13 +10,10 @@ import { } from 'stores/FormState/hooks'; import { FormStatus } from 'stores/FormState/types'; import { - useResourceConfig_addBackfilledCollections, + useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, - useResourceConfig_collections, useResourceConfig_currentCollection, - useResourceConfig_getBackfillAllBindings, - useResourceConfig_removeBackfilledCollections, - useResourceConfig_setBackfillAllBindings, + useResourceConfig_setBackfilledCollections, } from 'stores/ResourceConfig/hooks'; import { useEditorStore_queryResponse_draftSpecs } from '../../Store/hooks'; import useUpdateBackfillCounter, { @@ -42,16 +39,11 @@ function Backfill({ bindingIndex = -1 }: Props) { // Resource Config Store const currentCollection = useResourceConfig_currentCollection(); - const collections = useResourceConfig_collections(); - const backfilledCollections = useResourceConfig_backfilledCollections(); - const addBackfilledCollections = - useResourceConfig_addBackfilledCollections(); - const removeBackfilledCollections = - useResourceConfig_removeBackfilledCollections(); + const setBackfilledCollections = + useResourceConfig_setBackfilledCollections(); - const backfillAllBindings = useResourceConfig_getBackfillAllBindings(); - const setBackfillAllBindings = useResourceConfig_setBackfillAllBindings(); + const backfillAllBindings = useResourceConfig_backfillAllBindings(); const selected = useMemo(() => { if (bindingIndex === -1) { @@ -125,22 +117,11 @@ function Backfill({ bindingIndex = -1 }: Props) { bindingMetadata ).then( () => { - if (singleBindingUpdate) { - console.log('A'); - - increment === 'true' - ? addBackfilledCollections([currentCollection]) - : removeBackfilledCollections([ - currentCollection, - ]); - } else if (bindingIndex === -1 && collections) { - console.log('B'); - - increment === 'true' - ? addBackfilledCollections(collections) - : removeBackfilledCollections(collections); - } + const targetCollection = singleBindingUpdate + ? currentCollection + : undefined; + setBackfilledCollections(increment, targetCollection); setFormState({ status: FormStatus.UPDATED }); }, (error) => { @@ -156,14 +137,11 @@ function Backfill({ bindingIndex = -1 }: Props) { } }, [ - addBackfilledCollections, bindingIndex, - collections, currentCollection, draftSpec, evaluateServerDifferences, - removeBackfilledCollections, - setBackfillAllBindings, + setBackfilledCollections, setFormState, updateBackfillCounter, ] diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index 8f2316d5f..1e1a4704b 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -1,4 +1,5 @@ import { modifyDraftSpec } from 'api/draftSpecs'; +import { BooleanString } from 'components/editor/Bindings/Backfill'; import { useEntityType } from 'context/EntityContext'; import { DraftSpecQuery } from 'hooks/useDraftSpecs'; import { useCallback } from 'react'; @@ -11,7 +12,6 @@ import { useEditorStore_persistedDraftId, useEditorStore_queryResponse_mutate, } from '../../Store/hooks'; -import { BooleanString } from '.'; export interface BindingMetadata { bindingIndex: number; @@ -79,11 +79,15 @@ function useUpdateBackfillCounter() { if (bindingMetadata && bindingMetadata.bindingIndex > -1) { const { bindingIndex } = bindingMetadata; + console.log('A', bindingIndex); + spec.bindings[bindingIndex] = evaluateBackfillCounter( spec.bindings[bindingIndex], increment ); } else { + console.log('B'); + spec.bindings.forEach((binding: Schema, index: number) => { const collection = getCollectionName(binding); diff --git a/src/stores/ResourceConfig/Store.ts b/src/stores/ResourceConfig/Store.ts index fb695eba9..57737890a 100644 --- a/src/stores/ResourceConfig/Store.ts +++ b/src/stores/ResourceConfig/Store.ts @@ -471,10 +471,10 @@ const getInitialState = ( addBackfilledCollections: (values) => { set( produce((state: ResourceConfigState) => { - state.backfilledCollections = union([ - ...values, - ...state.backfilledCollections, - ]); + state.backfilledCollections = union( + state.backfilledCollections, + values + ); }), false, 'Backfilled Collections Added' @@ -494,13 +494,28 @@ const getInitialState = ( ); }, - setBackfillAllBindings: (value) => { + setBackfilledCollections: (increment, targetCollection) => { set( produce((state: ResourceConfigState) => { - state.backfillAllBindings = value; + const collections: string[] = targetCollection + ? [targetCollection] + : state.collections + ? state.collections + : []; + + state.backfilledCollections = + increment === 'true' + ? union(state.backfilledCollections, collections) + : state.backfilledCollections.filter( + (collection) => !collections.includes(collection) + ); + + state.backfillAllBindings = + state.collections?.length === + state.backfilledCollections.length; }), false, - 'Backfill All Bindings Flag Set' + 'Backfilled Collections Set' ); }, diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts index 8a9f854a6..a5369f86e 100644 --- a/src/stores/ResourceConfig/hooks.ts +++ b/src/stores/ResourceConfig/hooks.ts @@ -1,5 +1,4 @@ import { useZustandStore } from 'context/Zustand/provider'; -import { difference } from 'lodash'; import { ResourceConfigStoreNames } from 'stores/names'; import { shallow } from 'zustand/shallow'; import { ResourceConfig, ResourceConfigState } from './types'; @@ -121,13 +120,13 @@ export const useResourceConfig_addBackfilledCollections = () => { ); }; -export const useResourceConfig_removeBackfilledCollections = () => { +export const useResourceConfig_setBackfilledCollections = () => { return useZustandStore< ResourceConfigState, - ResourceConfigState['removeBackfilledCollections'] + ResourceConfigState['setBackfilledCollections'] >( ResourceConfigStoreNames.GENERAL, - (state) => state.removeBackfilledCollections + (state) => state.setBackfilledCollections ); }; @@ -138,30 +137,6 @@ export const useResourceConfig_backfillAllBindings = () => { >(ResourceConfigStoreNames.GENERAL, (state) => state.backfillAllBindings); }; -export const useResourceConfig_setBackfillAllBindings = () => { - return useZustandStore< - ResourceConfigState, - ResourceConfigState['setBackfillAllBindings'] - >( - ResourceConfigStoreNames.GENERAL, - (state) => state.setBackfillAllBindings - ); -}; - -export const useResourceConfig_getBackfillAllBindings = () => { - return useZustandStore< - ResourceConfigState, - ResourceConfigState['backfillAllBindings'] - >(ResourceConfigStoreNames.GENERAL, (state) => { - const collectionsNotBackfilled = difference( - state.collections, - state.backfilledCollections - ); - - return collectionsNotBackfilled.length === 0; - }); -}; - export const useResourceConfig_resourceConfig = () => { return useZustandStore< ResourceConfigState, diff --git a/src/stores/ResourceConfig/types.ts b/src/stores/ResourceConfig/types.ts index 16d53d35e..bf6950933 100644 --- a/src/stores/ResourceConfig/types.ts +++ b/src/stores/ResourceConfig/types.ts @@ -1,3 +1,4 @@ +import { BooleanString } from 'components/editor/Bindings/Backfill'; import { DraftSpecQuery } from 'hooks/useDraftSpecs'; import { LiveSpecsExt_MaterializeCapture } from 'hooks/useLiveSpecsExt'; import { CallSupabaseResponse } from 'services/supabase'; @@ -52,9 +53,12 @@ export interface ResourceConfigState extends StoreWithHydration { ) => void; addBackfilledCollections: (values: string[]) => void; removeBackfilledCollections: (values: string[]) => void; + setBackfilledCollections: ( + increment: BooleanString, + targetCollection?: string + ) => void; backfillAllBindings: boolean; - setBackfillAllBindings: (value: boolean) => void; // Resource Config resourceConfig: ResourceConfigDictionary; From 4b5279cd4256f1b0b6ee9de54df09894fa3edbf0 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 15:55:27 -0500 Subject: [PATCH 07/20] Make bindingMetadata argument an array in hook callback --- .../editor/Bindings/Backfill/index.tsx | 7 ++- .../Backfill/useUpdateBackfillCounter.ts | 44 ++++++++++++------- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 554fff6e8..f4e517a7d 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -106,10 +106,9 @@ function Backfill({ bindingIndex = -1 }: Props) { const singleBindingUpdate = bindingIndex > -1 && currentCollection; - const bindingMetadata: BindingMetadata | undefined = - singleBindingUpdate - ? { collection: currentCollection, bindingIndex } - : undefined; + const bindingMetadata: BindingMetadata[] = singleBindingUpdate + ? [{ collection: currentCollection, bindingIndex }] + : []; updateBackfillCounter( draftSpec, diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index 1e1a4704b..de9b588a9 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -7,6 +7,7 @@ import { useIntl } from 'react-intl'; import { BASE_ERROR } from 'services/supabase'; import { useResourceConfig_backfilledCollections } from 'stores/ResourceConfig/hooks'; import { Schema } from 'types'; +import { hasLength } from 'utils/misc-utils'; import { getBackfillCounter, getCollectionName } from 'utils/workflow-utils'; import { useEditorStore_persistedDraftId, @@ -46,23 +47,30 @@ function useUpdateBackfillCounter() { // Resource Config Store const backfilledCollections = useResourceConfig_backfilledCollections(); - // TODO: Make the binding metadata argument an array. const updateBackfillCounter = useCallback( async ( draftSpec: DraftSpecQuery, increment: BooleanString, - bindingMetadata?: BindingMetadata + bindingMetadata: BindingMetadata[] ) => { - if ( - !mutateDraftSpecs || - (bindingMetadata && bindingMetadata.bindingIndex === -1) - ) { - const errorMessageId = bindingMetadata + const bindingMetadataExists = hasLength(bindingMetadata); + + const invalidBindingIndex = bindingMetadataExists + ? bindingMetadata.findIndex( + ({ bindingIndex }) => bindingIndex === -1 + ) + : -1; + + if (!mutateDraftSpecs || invalidBindingIndex > -1) { + const errorMessageId = bindingMetadataExists ? 'workflows.collectionSelector.manualBackfill.error.message' : ''; - const errorMessageValues = bindingMetadata - ? { collection: bindingMetadata.collection } + const errorMessageValues = bindingMetadataExists + ? { + collection: + bindingMetadata[invalidBindingIndex].collection, + } : undefined; return Promise.reject({ @@ -76,15 +84,17 @@ function useUpdateBackfillCounter() { const spec: Schema = draftSpec.spec; - if (bindingMetadata && bindingMetadata.bindingIndex > -1) { - const { bindingIndex } = bindingMetadata; + if (bindingMetadataExists) { + bindingMetadata.forEach(({ bindingIndex }) => { + console.log('A', bindingIndex); - console.log('A', bindingIndex); - - spec.bindings[bindingIndex] = evaluateBackfillCounter( - spec.bindings[bindingIndex], - increment - ); + if (bindingIndex > -1) { + spec.bindings[bindingIndex] = evaluateBackfillCounter( + spec.bindings[bindingIndex], + increment + ); + } + }); } else { console.log('B'); From 3891a800d29192e16f4a5acc2be7fc7d54dfd4db Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 16:02:48 -0500 Subject: [PATCH 08/20] Add error message content fallback to hook --- .../editor/Bindings/Backfill/useUpdateBackfillCounter.ts | 4 ++-- src/lang/en-US.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index de9b588a9..b6e01057b 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -63,8 +63,8 @@ function useUpdateBackfillCounter() { if (!mutateDraftSpecs || invalidBindingIndex > -1) { const errorMessageId = bindingMetadataExists - ? 'workflows.collectionSelector.manualBackfill.error.message' - : ''; + ? 'workflows.collectionSelector.manualBackfill.error.message.singleCollection' + : 'workflows.collectionSelector.manualBackfill.error.message.allBindings'; const errorMessageValues = bindingMetadataExists ? { diff --git a/src/lang/en-US.ts b/src/lang/en-US.ts index 4ca06d3ca..f23efbc67 100644 --- a/src/lang/en-US.ts +++ b/src/lang/en-US.ts @@ -998,7 +998,8 @@ const Workflows: ResolvedIntlConfig['messages'] = { 'workflows.collectionSelector.manualBackfill.message.materialization': `Trigger a backfill from the source collection to its materialized resource when published.`, 'workflows.collectionSelector.manualBackfill.cta.backfill': `Backfill`, 'workflows.collectionSelector.manualBackfill.error.title': `Backfill update failed`, - 'workflows.collectionSelector.manualBackfill.error.message': `There was an issue updating the backfill counter for one or more bindings associated with collection, {collection}.`, + 'workflows.collectionSelector.manualBackfill.error.message.singleCollection': `There was an issue updating the backfill counter for one or more bindings associated with collection, {collection}.`, + 'workflows.collectionSelector.manualBackfill.error.message.allBindings': `There was an issue updating the backfill counter for one or more bindings.`, 'workflows.entityWarnings.title': `No collections`, 'workflows.entityWarnings.message': `You have not added any collections yet. This means there will be From 6de4f9514ef36fc7c4bd5efba060deaa30e61f69 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 16:04:48 -0500 Subject: [PATCH 09/20] Remove logging statements --- .../editor/Bindings/Backfill/useUpdateBackfillCounter.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index b6e01057b..b1f3ddc4f 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -86,8 +86,6 @@ function useUpdateBackfillCounter() { if (bindingMetadataExists) { bindingMetadata.forEach(({ bindingIndex }) => { - console.log('A', bindingIndex); - if (bindingIndex > -1) { spec.bindings[bindingIndex] = evaluateBackfillCounter( spec.bindings[bindingIndex], @@ -96,8 +94,6 @@ function useUpdateBackfillCounter() { } }); } else { - console.log('B'); - spec.bindings.forEach((binding: Schema, index: number) => { const collection = getCollectionName(binding); From 0b21c99d7848bc9371e76cabcd13b0796bdbdc5f Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 16:33:38 -0500 Subject: [PATCH 10/20] Disable backfill button when binding selector empty --- src/components/editor/Bindings/Backfill/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index f4e517a7d..6a31f5aa8 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -12,9 +12,11 @@ import { FormStatus } from 'stores/FormState/types'; import { useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, + useResourceConfig_collections, useResourceConfig_currentCollection, useResourceConfig_setBackfilledCollections, } from 'stores/ResourceConfig/hooks'; +import { hasLength } from 'utils/misc-utils'; import { useEditorStore_queryResponse_draftSpecs } from '../../Store/hooks'; import useUpdateBackfillCounter, { BindingMetadata, @@ -39,6 +41,8 @@ function Backfill({ bindingIndex = -1 }: Props) { // Resource Config Store const currentCollection = useResourceConfig_currentCollection(); + const collections = useResourceConfig_collections(); + const backfilledCollections = useResourceConfig_backfilledCollections(); const setBackfilledCollections = useResourceConfig_setBackfilledCollections(); @@ -170,7 +174,7 @@ function Backfill({ bindingIndex = -1 }: Props) { { event.preventDefault(); event.stopPropagation(); From f2ded06d8c84a380f0fca488c36903cadb4b5324 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 16:51:57 -0500 Subject: [PATCH 11/20] Restrict backfill button to edit workflows --- src/components/editor/Bindings/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/editor/Bindings/index.tsx b/src/components/editor/Bindings/index.tsx index 343c42f8e..068a07891 100644 --- a/src/components/editor/Bindings/index.tsx +++ b/src/components/editor/Bindings/index.tsx @@ -137,7 +137,10 @@ function BindingsMultiEditor({ {entityType === 'materialization' ? : null} - + {workflow === 'capture_edit' || + workflow === 'materialization_edit' ? ( + + ) : null} Date: Tue, 6 Feb 2024 17:01:24 -0500 Subject: [PATCH 12/20] Distinguish task-level backfill section description --- src/components/collection/ResourceConfig.tsx | 9 ++++++++- src/components/editor/Bindings/Backfill/index.tsx | 13 ++++--------- src/components/editor/Bindings/index.tsx | 8 +++++++- src/lang/en-US.ts | 2 ++ 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/collection/ResourceConfig.tsx b/src/components/collection/ResourceConfig.tsx index e877e33f3..5a63494c9 100644 --- a/src/components/collection/ResourceConfig.tsx +++ b/src/components/collection/ResourceConfig.tsx @@ -54,7 +54,14 @@ function ResourceConfig({ collectionName, readOnly = false }: Props) { {isEdit && draftedBindingIndex > -1 && !collectionDisabled ? ( - + + } + /> ) : null} {entityType === 'materialization' && !collectionDisabled ? ( diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 6a31f5aa8..e527cf061 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -1,8 +1,7 @@ import { Box, Stack, Typography } from '@mui/material'; import OutlinedToggleButton from 'components/shared/OutlinedToggleButton'; -import { useEntityType } from 'context/EntityContext'; import { Check } from 'iconoir-react'; -import { useCallback, useMemo } from 'react'; +import { ReactNode, useCallback, useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import { useFormStateStore_isActive, @@ -25,11 +24,11 @@ import useUpdateBackfillCounter, { export type BooleanString = 'true' | 'false'; interface Props { + description: ReactNode; bindingIndex?: number; } -function Backfill({ bindingIndex = -1 }: Props) { - const entityType = useEntityType(); +function Backfill({ description, bindingIndex = -1 }: Props) { const { updateBackfillCounter } = useUpdateBackfillCounter(); // Draft Editor Store @@ -163,11 +162,7 @@ function Backfill({ bindingIndex = -1 }: Props) { - - - + {description} diff --git a/src/components/editor/Bindings/index.tsx b/src/components/editor/Bindings/index.tsx index 068a07891..bb2448d73 100644 --- a/src/components/editor/Bindings/index.tsx +++ b/src/components/editor/Bindings/index.tsx @@ -139,7 +139,13 @@ function BindingsMultiEditor({ {workflow === 'capture_edit' || workflow === 'materialization_edit' ? ( - + + } + /> ) : null} diff --git a/src/lang/en-US.ts b/src/lang/en-US.ts index 06d47342c..8eebc4dcc 100644 --- a/src/lang/en-US.ts +++ b/src/lang/en-US.ts @@ -999,7 +999,9 @@ const Workflows: ResolvedIntlConfig['messages'] = { 'workflows.collectionSelector.manualBackfill.header': `Backfill`, '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.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.cta.backfill': `Backfill`, 'workflows.collectionSelector.manualBackfill.error.title': `Backfill update failed`, 'workflows.collectionSelector.manualBackfill.error.message.singleCollection': `There was an issue updating the backfill counter for one or more bindings associated with collection, {collection}.`, From 3ace80c62b1351347af86048511bd8818385ac57 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Tue, 6 Feb 2024 18:14:29 -0500 Subject: [PATCH 13/20] Disable the backfill button when all bindings are disabled --- src/components/editor/Bindings/Backfill/index.tsx | 6 +++++- src/stores/ResourceConfig/hooks.ts | 11 +++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index e527cf061..7cf4e65cd 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -9,6 +9,7 @@ import { } from 'stores/FormState/hooks'; import { FormStatus } from 'stores/FormState/types'; import { + useResourceConfig_allBindingsDisabled, useResourceConfig_backfillAllBindings, useResourceConfig_backfilledCollections, useResourceConfig_collections, @@ -47,6 +48,7 @@ function Backfill({ description, bindingIndex = -1 }: Props) { useResourceConfig_setBackfilledCollections(); const backfillAllBindings = useResourceConfig_backfillAllBindings(); + const allBindingsDisabled = useResourceConfig_allBindingsDisabled(); const selected = useMemo(() => { if (bindingIndex === -1) { @@ -169,7 +171,9 @@ function Backfill({ description, bindingIndex = -1 }: Props) { { event.preventDefault(); event.stopPropagation(); diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts index a5369f86e..404158556 100644 --- a/src/stores/ResourceConfig/hooks.ts +++ b/src/stores/ResourceConfig/hooks.ts @@ -148,6 +148,17 @@ export const useResourceConfig_resourceConfig = () => { ); }; +export const useResourceConfig_allBindingsDisabled = () => { + return useZustandStore( + ResourceConfigStoreNames.GENERAL, + (state) => + Object.values(state.resourceConfig).every( + (config) => config.disable + ), + shallow + ); +}; + export const useResourceConfig_resourceConfigOfCollection = ( collection: keyof ResourceConfigState['resourceConfig'] ) => { From 877f5abd4f066f69032c84bcb4fba4aa4d69fb3c Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Wed, 7 Feb 2024 12:27:29 -0500 Subject: [PATCH 14/20] Change return value of helper function for logical semantics --- .../Backfill/useUpdateBackfillCounter.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index b1f3ddc4f..abb72b35d 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -22,7 +22,7 @@ export interface BindingMetadata { const evaluateBackfillCounter = ( binding: Schema, increment: BooleanString -): Schema => { +): number => { let counter = getBackfillCounter(binding); if (increment === 'true') { @@ -31,9 +31,7 @@ const evaluateBackfillCounter = ( counter = counter - 1; } - binding.backfill = counter; - - return binding; + return counter; }; function useUpdateBackfillCounter() { @@ -87,10 +85,11 @@ function useUpdateBackfillCounter() { if (bindingMetadataExists) { bindingMetadata.forEach(({ bindingIndex }) => { if (bindingIndex > -1) { - spec.bindings[bindingIndex] = evaluateBackfillCounter( - spec.bindings[bindingIndex], - increment - ); + spec.bindings[bindingIndex].backfill = + evaluateBackfillCounter( + spec.bindings[bindingIndex], + increment + ); } }); } else { @@ -106,7 +105,7 @@ function useUpdateBackfillCounter() { increment === 'false'; if (shouldIncrement || shouldDecrement) { - spec.bindings[index] = evaluateBackfillCounter( + spec.bindings[index].backfill = evaluateBackfillCounter( binding, increment ); From 21e34abb271a610af12812ea90ebcee6b045128e Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Wed, 7 Feb 2024 12:30:02 -0500 Subject: [PATCH 15/20] Accept memory cost over a performance tax --- .../editor/Bindings/Backfill/useUpdateBackfillCounter.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts index abb72b35d..dcbd652d1 100644 --- a/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts +++ b/src/components/editor/Bindings/Backfill/useUpdateBackfillCounter.ts @@ -95,14 +95,14 @@ function useUpdateBackfillCounter() { } else { spec.bindings.forEach((binding: Schema, index: number) => { const collection = getCollectionName(binding); + const collectionBackfilled = + backfilledCollections.includes(collection); const shouldIncrement = - !backfilledCollections.includes(collection) && - increment === 'true'; + !collectionBackfilled && increment === 'true'; const shouldDecrement = - backfilledCollections.includes(collection) && - increment === 'false'; + collectionBackfilled && increment === 'false'; if (shouldIncrement || shouldDecrement) { spec.bindings[index].backfill = evaluateBackfillCounter( From 144dd77a5de3b33962689c790c998c6719b283c8 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Wed, 7 Feb 2024 12:39:26 -0500 Subject: [PATCH 16/20] Remove margin --- src/components/editor/Bindings/Backfill/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 7cf4e65cd..00a3fbae7 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -159,7 +159,6 @@ function Backfill({ description, bindingIndex = -1 }: Props) { variant={ bindingIndex === -1 ? 'formSectionHeader' : 'h6' } - sx={{ mr: 0.5 }} > From 967791731db826af820115b8c2702daacc1cdaa1 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Wed, 7 Feb 2024 12:50:02 -0500 Subject: [PATCH 17/20] Remove stack --- .../editor/Bindings/Backfill/index.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 00a3fbae7..297fef25d 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -153,18 +153,14 @@ function Backfill({ description, bindingIndex = -1 }: Props) { return ( - - - - - - - {description} - + + + + + + {description} Date: Wed, 7 Feb 2024 12:53:24 -0500 Subject: [PATCH 18/20] Reset form error --- src/components/editor/Bindings/Backfill/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/editor/Bindings/Backfill/index.tsx b/src/components/editor/Bindings/Backfill/index.tsx index 297fef25d..d0a93f44b 100644 --- a/src/components/editor/Bindings/Backfill/index.tsx +++ b/src/components/editor/Bindings/Backfill/index.tsx @@ -106,7 +106,7 @@ function Backfill({ description, bindingIndex = -1 }: Props) { const serverUpdateRequired = evaluateServerDifferences(increment); if (draftSpec && serverUpdateRequired) { - setFormState({ status: FormStatus.UPDATING }); + setFormState({ status: FormStatus.UPDATING, error: null }); const singleBindingUpdate = bindingIndex > -1 && currentCollection; From 71efaf87c712146d68ba4424ad4013677b42ae39 Mon Sep 17 00:00:00 2001 From: Kiahna Tucker Date: Thu, 8 Feb 2024 08:41:43 -0500 Subject: [PATCH 19/20] Add disabled styling for primary colored outlined toggle button --- src/components/shared/OutlinedToggleButton.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/shared/OutlinedToggleButton.tsx b/src/components/shared/OutlinedToggleButton.tsx index 04c619507..8f1852865 100644 --- a/src/components/shared/OutlinedToggleButton.tsx +++ b/src/components/shared/OutlinedToggleButton.tsx @@ -7,9 +7,12 @@ import { useTheme, } from '@mui/material'; import { + disabledButtonText_primary, intensifiedOutline, outlinedButtonBackground, + outlinedButtonBackground_disabled, primaryColoredOutline, + primaryColoredOutline_disabled, primaryColoredOutline_hovered, } from 'context/Theme'; @@ -46,16 +49,18 @@ function OutlinedToggleButton({ border: primaryColoredOutline_hovered[theme.palette.mode], }, }, + [`&.${toggleButtonClasses.disabled}`]: disabledStateSx ?? { + backgroundColor: + outlinedButtonBackground_disabled[theme.palette.mode], + border: primaryColoredOutline_disabled[theme.palette.mode], + color: disabledButtonText_primary[theme.palette.mode], + }, }; if (defaultStateSx) { sx = { ...sx, ...defaultStateSx }; } - if (disabledStateSx) { - sx = { ...sx, [`&.${toggleButtonClasses.disabled}`]: disabledStateSx }; - } - return ( Date: Thu, 8 Feb 2024 09:39:34 -0500 Subject: [PATCH 20/20] Reset backfill counter related before modifying spec post-rediscovery --- src/stores/ResourceConfig/Store.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/stores/ResourceConfig/Store.ts b/src/stores/ResourceConfig/Store.ts index 57737890a..a12d792dd 100644 --- a/src/stores/ResourceConfig/Store.ts +++ b/src/stores/ResourceConfig/Store.ts @@ -369,6 +369,8 @@ const getInitialState = ( state.restrictedDiscoveredCollections = []; state.resourceConfig = {}; state.resetRediscoverySettings(); + state.backfilledCollections = []; + state.backfillAllBindings = false; }), false, 'Resource Config and Collections Reset' @@ -511,8 +513,9 @@ const getInitialState = ( ); state.backfillAllBindings = + hasLength(state.collections) && state.collections?.length === - state.backfilledCollections.length; + state.backfilledCollections.length; }), false, 'Backfilled Collections Set'