fix:snowflake-key-pair-auth-private-key-does-not-get-removed-upon-rem…

app/client/src/components/formControls/FilePickerControl.test.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+import { ThemeProvider } from "styled-components";
+import { reducer as formReducer } from "redux-form";
+import { theme } from "constants/DefaultTheme"; // Adjust the path as necessary
+import { BrowserRouter as Router } from "react-router-dom";
+import FilePickerControl, { RenderFilePicker } from "./FilePickerControl"; // Adjust the path as necessary
+import { Field, reduxForm } from "redux-form";
+
+const rootReducer = combineReducers({
+  form: formReducer,
+});
+
+const mockStore = createStore(rootReducer);
+
+const mockInput = {
+  value: {},
+  onChange: jest.fn(),
+};
+
+const mockProps = {
+  input: mockInput,
+  meta: {},
+  disabled: false,
+  onChange: jest.fn(),
+};
+
+const TestForm = reduxForm({ form: "testForm" })(() => (
+  <Field component={RenderFilePicker} name="filePicker" {...mockProps} />
+));
+
+const renderComponent = () =>
+  render(
+    <Provider store={mockStore}>
+      <Router>
+        <ThemeProvider theme={theme}>
+          <TestForm />
+        </ThemeProvider>
+      </Router>
+    </Provider>
+  );
+
+describe("FilePickerControl Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders the component", () => {
+    renderComponent();
+    expect(screen.getByText("Select")).toBeInTheDocument();
+  });
+
+  test("selects a file and triggers onChange", async () => {
+    renderComponent();
+
+    const file = new File(["file contents"], "example.txt", {
+      type: "text/plain",
+    });
+
+    userEvent.click(screen.getByText("Select"));
+    userEvent.click(screen.getByText("Browse"));
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await act(async () => {
+      if (fileInput) {
+        console.log('File input found, uploading file...');
+        await userEvent.upload(fileInput, file);
+        console.log('File uploaded.');
+      } else {
+        throw new Error("File input not found");
+      }
+    });
+
+    await waitFor(() => {
+      console.log('Waiting for file name to appear...');
+      expect(screen.getByText("example.txt")).toBeInTheDocument();
+    });
+
+  });
+});

app/client/src/components/formControls/FilePickerControl.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import styled from "styled-components";
 import type { ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
@@ -8,7 +8,6 @@ import type { SetProgress } from "design-system-old";
 import { FilePickerV2, FileType } from "design-system-old";
 import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import { Field } from "redux-form";
-import { useEffect, useCallback } from "react";
 import { replayHighlightClass } from "globalStyles/portals";
 import { Button, Modal, ModalBody, ModalContent } from "design-system";
 
@@ -39,50 +38,56 @@ const FilePickerContainer = styled.div`
     border-radius: 0 var(--ads-v2-border-radius) var(--ads-v2-border-radius) 0 !important;
   }
 `;
+
 type RenderFilePickerProps = FilePickerControlProps & {
   input?: WrappedFieldInputProps;
   meta?: WrappedFieldMetaProps;
   disabled?: boolean;
   onChange: (event: any) => void;
 };
 
-function RenderFilePicker(props: RenderFilePickerProps) {
+export function RenderFilePicker(props: RenderFilePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [appFileToBeUploaded, setAppFileToBeUploaded] = useState<{
     file: File;
     setProgress: SetProgress;
   } | null>(null);
+  const [fileData, setFileData] = useState<string | null>(null);
 
-  // const changeOpenState = (state: boolean) => setIsOpen(state);
   const FileUploader = useCallback(
     async (file: File, setProgress: SetProgress) => {
       if (!!file) {
         setAppFileToBeUploaded({
           file,
           setProgress,
         });
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onloadend = () => {
+          const base64data = reader.result as string;
+          setFileData(base64data);
+        };
       } else {
         setAppFileToBeUploaded(null);
+        setFileData(null);
       }
     },
     [],
   );
 
-  const onRemoveFile = useCallback(() => setAppFileToBeUploaded(null), []);
+  const onRemoveFile = useCallback(() => {
+    setAppFileToBeUploaded(null);
+    setFileData(null);
+  }, []);
 
   useEffect(() => {
-    if (appFileToBeUploaded?.file) {
-      const reader = new FileReader();
-      reader.readAsDataURL(appFileToBeUploaded?.file);
-      reader.onloadend = () => {
-        const base64data = reader.result;
-        props.input?.onChange({
-          name: appFileToBeUploaded?.file.name,
-          base64Content: base64data,
-        });
-      };
-    }
-  }, [appFileToBeUploaded]);
+    if (!isOpen && appFileToBeUploaded?.file && fileData) {
+      props.input?.onChange({
+        name: appFileToBeUploaded.file.name,
+        base64Content: fileData,
+      });
+    } 
+  }, [isOpen]);
 
   return (
     <>
@@ -126,6 +131,7 @@ function RenderFilePicker(props: RenderFilePickerProps) {
     </>
   );
 }
+
 class FilePickerControl extends BaseControl<FilePickerControlProps> {
   constructor(props: FilePickerControlProps) {
     super(props);