diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js index 45a43a6a9..8fcf46698 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js @@ -1,4 +1,6 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; +import toast from 'react-hot-toast'; +import cloneDeep from 'lodash/cloneDeep'; import { IconTrash } from '@tabler/icons'; import { useTheme } from 'providers/Theme'; import { useDispatch } from 'react-redux'; @@ -15,6 +17,7 @@ import toast from 'react-hot-toast'; const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => { const dispatch = useDispatch(); const { storedTheme } = useTheme(); + const addButtonRef = useRef(null); const formik = useFormik({ enableReinitialize: true, @@ -85,6 +88,10 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original formik.setValues(formik.values.filter((variable) => variable.uid !== id)); }; + useEffect(() => { + addButtonRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [formik.values]); + const handleReset = () => { formik.resetForm({ originalEnvironmentVariables }); }; @@ -159,11 +166,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original ))} - -
- +
+ +