From f6879e98e6e2f58210d9b6090f0e1100afb7c444 Mon Sep 17 00:00:00 2001 From: bdebon Date: Thu, 23 Feb 2023 11:48:44 +0100 Subject: [PATCH] feat(toggle): toggle input initialisation without animation (#504) --- ...-settings-preview-environments-feature.tsx | 18 ++++++---- ...age-settings-preview-environments.spec.tsx | 1 + .../page-settings-preview-environments.tsx | 8 +++-- .../inputs/input-toggle/input-toggle.tsx | 33 ++++++++++--------- 4 files changed, 36 insertions(+), 24 deletions(-) diff --git a/libs/pages/services/src/lib/feature/page-settings-preview-environments-feature/page-settings-preview-environments-feature.tsx b/libs/pages/services/src/lib/feature/page-settings-preview-environments-feature/page-settings-preview-environments-feature.tsx index e235b05b23a..b4880528b3e 100644 --- a/libs/pages/services/src/lib/feature/page-settings-preview-environments-feature/page-settings-preview-environments-feature.tsx +++ b/libs/pages/services/src/lib/feature/page-settings-preview-environments-feature/page-settings-preview-environments-feature.tsx @@ -41,8 +41,6 @@ export function PageSettingsPreviewEnvironmentsFeature() { mode: 'onChange', }) - const watchEnvPreview = methods.watch('auto_preview') - const onSubmit = methods.handleSubmit(async (data) => { if (data) { setLoading(true) @@ -80,19 +78,20 @@ export function PageSettingsPreviewEnvironmentsFeature() { } }) - useEffect(() => { + const toggleAll = (value: boolean) => { //set all preview applications "true" when env preview is true if (loadingStatusEnvironmentDeploymentRules === 'loaded') { - applications?.forEach((application) => methods.setValue(application.id, watchEnvPreview)) + applications?.forEach((application) => methods.setValue(application.id, value, { shouldDirty: true })) } - }, [loadingStatusEnvironmentDeploymentRules, watchEnvPreview, methods, applications]) + } useEffect(() => { if (loadingStatusEnvironment === 'loaded') dispatch(fetchEnvironmentDeploymentRules(environmentId)) }, [dispatch, loadingStatusEnvironment, environmentId]) useEffect(() => { - if (loadingStatusEnvironmentDeploymentRules === 'loaded') { + // !loading is here to prevent the toggle to glitch the time we are submitting the two api endpoints + if (loadingStatusEnvironmentDeploymentRules === 'loaded' && !loading) { methods.setValue('auto_preview', environmentDeploymentRules?.auto_preview) applications?.forEach((application) => methods.setValue(application.id, application.auto_preview)) } @@ -100,7 +99,12 @@ export function PageSettingsPreviewEnvironmentsFeature() { return ( - + ) } diff --git a/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.spec.tsx b/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.spec.tsx index 2f4a3df8c65..084ddece1ba 100644 --- a/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.spec.tsx +++ b/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.spec.tsx @@ -9,6 +9,7 @@ import PageSettingsPreviewEnvironments, { const props: PageSettingsPreviewEnvironmentsProps = { onSubmit: jest.fn(), applications: applicationFactoryMock(3), + toggleAll: jest.fn(), } describe('PageSettingsPreviewEnvironments', () => { diff --git a/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.tsx b/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.tsx index 48a0a994625..ffb840c9ed2 100644 --- a/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.tsx +++ b/libs/pages/services/src/lib/ui/page-settings-preview-environments/page-settings-preview-environments.tsx @@ -7,10 +7,11 @@ export interface PageSettingsPreviewEnvironmentsProps { onSubmit: () => void loading: boolean applications?: ApplicationEntity[] + toggleAll: (value: boolean) => void } export function PageSettingsPreviewEnvironments(props: PageSettingsPreviewEnvironmentsProps) { - const { onSubmit, applications, loading } = props + const { onSubmit, applications, loading, toggleAll } = props const { control, formState } = useFormContext() return ( @@ -30,7 +31,10 @@ export function PageSettingsPreviewEnvironments(props: PageSettingsPreviewEnviro { + toggleAll(value) + field.onChange(value) + }} title="Activate preview environment for all applications" description="Automatically create a preview environment when a merge/pull request is submitted on one of your applications." forceAlignTop diff --git a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx index aa223ea680c..ddc06887c5a 100644 --- a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx +++ b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx @@ -13,21 +13,19 @@ export interface InputToggleProps { } export function InputToggle(props: InputToggleProps) { - const { - small, - value = false, - onChange, - description, - title, - className = '', - forceAlignTop = false, - disabled = false, - } = props + const { small, value, onChange, description, title, className = '', forceAlignTop = false, disabled = false } = props const [toggleActive, setToggleActive] = useState(value) + const [animateEnabled, setAnimateEnabled] = useState(false) useEffect(() => { setToggleActive(value) + + // we need to put that in a timeout otherwise the animation classes are added too quickly and the animation is triggered + setTimeout(() => { + // if value is undefined or null, we don't want to animate + setAnimateEnabled(value !== undefined && value !== null) + }, 10) }, [value]) const toggleSizeBg = small ? 'w-8 h-4.5' : 'w-12 h-6' @@ -35,6 +33,9 @@ export function InputToggle(props: InputToggleProps) { const changeToggle = () => { if (disabled) return + // we need to put that in a timeout otherwise the animation classes are added too quickly and the animation is triggered + + setAnimateEnabled(true) onChange && onChange(!toggleActive) setToggleActive(!toggleActive) } @@ -55,13 +56,15 @@ export function InputToggle(props: InputToggleProps) {