fix(virtual dataset sync): Sync virtual dataset columns when changing the SQL query (#30903)

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { SupersetTheme, t } from '@superset-ui/core';
 import { Button, AntdSelect } from 'src/components';
 import InfoTooltip from 'src/components/InfoTooltip';
@@ -46,6 +46,7 @@ export const EncryptedField = ({
   db,
   editNewDb,
 }: FieldPropTypes) => {
+  const selectedFileInputRef = useRef<HTMLInputElement | null>(null);
   const [uploadOption, setUploadOption] = useState<number>(
     CredentialInfoOptions.JsonUpload.valueOf(),
   );
@@ -152,9 +153,7 @@ export const EncryptedField = ({
             {!fileToUpload && (
               <Button
                 className="input-upload-btn"
-                onClick={() =>
-                  document?.getElementById('selectedFile')?.click()
-                }
+                onClick={() => selectedFileInputRef.current?.click()}
               >
                 {t('Choose File')}
               </Button>
@@ -178,6 +177,7 @@ export const EncryptedField = ({
             )}
 
             <input
+              ref={selectedFileInputRef}
               id="selectedFile"
               accept=".json"
               className="input-upload"
@@ -196,9 +196,9 @@ export const EncryptedField = ({
                     checked: false,
                   },
                 });
-                (
-                  document.getElementById('selectedFile') as HTMLInputElement
-                ).value = null as any;
+                if (selectedFileInputRef.current) {
+                  selectedFileInputRef.current.value = null as any;
+                }
               }}
             />
           </div>