rename filinput

Author: mabaasit

packages/compass-components/src/components/file-input.spec.tsx renamed to packages/compass-components/src/components/file-picker-dialog.spec.tsx

@@ -14,7 +14,7 @@ import {
 import FileInput, {
   FileInputBackendProvider,
   createElectronFileInputBackend,
-} from './file-input';
+} from './file-picker-dialog';
 
 describe('FileInput', function () {
   let spy;

packages/compass-components/src/components/file-input.tsx renamed to packages/compass-components/src/components/file-picker-dialog.tsx

@@ -311,7 +311,16 @@ export function createElectronFileInputBackend<ElectronWindow>(
   };
 }
 
-function FileInput({
+/**
+ * This component is not intended to work in a browser environment. It is designed
+ * to be used in environments like Electron where you have access to nodes fs module
+ * to read/write files.
+ *
+ * For browser environments, you should use the `FileSelector` component instead.
+ *
+ * @deprecated
+ */
+function FilePickerDialog({
   autoOpen = false,
   id,
   label,
@@ -553,4 +562,4 @@ function FileInput({
   );
 }
 
-export default FileInput;
+export default FilePickerDialog;

packages/compass-components/src/index.ts

@@ -18,12 +18,12 @@ import type {
   ElectronFileDialogOptions,
   ElectronShowFileDialogProvider,
   FileInputBackend,
-} from './components/file-input';
-import FileInput, {
+} from './components/file-picker-dialog';
+import FilePickerDialog, {
   createElectronFileInputBackend,
   createJSDomFileInputDummyBackend,
   FileInputBackendProvider,
-} from './components/file-input';
+} from './components/file-picker-dialog';
 import { OptionsToggle } from './components/options-toggle';
 import {
   ErrorSummary,
@@ -118,7 +118,7 @@ export {
   CollapsibleFieldSet,
   ConfirmationModal,
   ErrorSummary,
-  FileInput,
+  FilePickerDialog,
   FileInputBackendProvider,
   IndexIcon,
   OptionsToggle,

packages/compass-connection-import-export/src/components/file-input.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FileInput as CompassFileInput } from '@mongodb-js/compass-components';
+import { FilePickerDialog } from '@mongodb-js/compass-components';
 
 type FileInputProps = {
   label: string;
@@ -24,7 +24,7 @@ export function FileInput({
   );
 
   return (
-    <CompassFileInput
+    <FilePickerDialog
       disabled={disabled}
       label={label}
       onChange={onChangeFiles}

packages/compass-import-export/src/components/import-file-input.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FileInput } from '@mongodb-js/compass-components';
+import { FilePickerDialog } from '@mongodb-js/compass-components';
 
 type ImportFileInputProps = {
   autoOpen?: boolean;
@@ -28,7 +28,7 @@ function ImportFileInput({
   const values = fileName ? [fileName] : undefined;
 
   return (
-    <FileInput
+    <FilePickerDialog
       autoOpen={autoOpen}
       label="Import file:"
       id="import-file"

packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.spec.tsx

@@ -19,7 +19,7 @@ import { Binary } from 'bson';
 import ConnectionForm from '../../../';
 import { getNextKmsProviderName } from './kms-provider-content';
 import { FileInputBackendProvider } from '@mongodb-js/compass-components';
-import { createJSDomFileInputDummyBackend } from '@mongodb-js/compass-components/lib/components/file-input';
+import { createJSDomFileInputDummyBackend } from '@mongodb-js/compass-components/lib/components/file-picker-dialog';
 
 const openAdvancedTab = async (
   tabId: 'general' | 'authentication' | 'tls' | 'proxy' | 'advanced' | 'csfle'

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/ssh-tunnel-identity.spec.tsx

@@ -8,7 +8,7 @@ import SSHTunnelIdentity from './ssh-tunnel-identity';
 import type { ConnectionFormError } from '../../../utils/validation';
 import { errorMessageByFieldName } from '../../../utils/validation';
 import { FileInputBackendProvider } from '@mongodb-js/compass-components';
-import { createJSDomFileInputDummyBackend } from '@mongodb-js/compass-components/lib/components/file-input';
+import { createJSDomFileInputDummyBackend } from '@mongodb-js/compass-components/lib/components/file-picker-dialog';
 
 const formFields: {
   key: keyof SSHConnectionOptions;

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/ssh-tunnel-identity.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import {
   FormFieldContainer,
   TextInput,
-  FileInput,
+  FilePickerDialog,
 } from '@mongodb-js/compass-components';
 import type { SSHConnectionOptions } from '../../../utils/connection-ssh-handler';
 import type { ConnectionFormError } from '../../../utils/validation';
@@ -113,7 +113,7 @@ function SshTunnelIdentity({
           case 'file':
             return (
               <FormFieldContainer key={name}>
-                <FileInput
+                <FilePickerDialog
                   id={name}
                   dataTestId={name}
                   onChange={(files: string[]) => {

packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { FormFieldContainer, FileInput } from '@mongodb-js/compass-components';
+import {
+  FormFieldContainer,
+  FilePickerDialog,
+} from '@mongodb-js/compass-components';
 
 function TLSCertificateAuthority({
   tlsCAFile,
@@ -15,7 +18,7 @@ function TLSCertificateAuthority({
   return (
     <>
       <FormFieldContainer>
-        <FileInput
+        <FilePickerDialog
           description={
             displayDatabaseConnectionUserHints ? 'Learn More' : undefined
           }

packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   FormFieldContainer,
-  FileInput,
+  FilePickerDialog,
   TextInput,
 } from '@mongodb-js/compass-components';
 
@@ -27,7 +27,7 @@ function TLSClientCertificate({
   return (
     <>
       <FormFieldContainer>
-        <FileInput
+        <FilePickerDialog
           description={
             displayDatabaseConnectionUserHints ? 'Learn More' : undefined
           }