fix: improvements

frontend/src/views/Settings/OrgSettingsPage/components/ImportTab/ImportTab.tsx

@@ -24,8 +24,7 @@ type TForm = z.infer<typeof formSchema>;
 export const ImportTab = () => {
   const fileUploadRef = useRef<HTMLInputElement>(null);
 
-  const { mutateAsync: importEnvKey
-  } = useImportEnvKey();
+  const { mutateAsync: importEnvKey } = useImportEnvKey();
 
   const {
     handleSubmit,
@@ -50,11 +49,14 @@ export const ImportTab = () => {
 
   const parseJson = (src: ArrayBuffer) => {
     const file = src.toString();
-    const formatedData: Record<string, string> = JSON.parse(file);
-    if (Object.keys(formatedData).includes("nonce") && Object.keys(formatedData).includes("data")) {
+    const formattedData: Record<string, string> = JSON.parse(file);
+    if (
+      Object.keys(formattedData).includes("nonce") &&
+      Object.keys(formattedData).includes("data")
+    ) {
       const data = {
-        nonce: formatedData.nonce,
-        data: formatedData.data
+        nonce: formattedData.nonce,
+        data: formattedData.data
       };
       setValue("encryptedJson", data);
       trigger("encryptedJson");
@@ -86,9 +88,9 @@ export const ImportTab = () => {
       if (!event?.target?.result) return;
       // parse function's argument looks like to be ArrayBuffer
       parseJson(event.target.result as ArrayBuffer);
-    }
+    };
     reader.readAsText(file);
-  }
+  };
 
   const submitExport = async (data: TForm) => {
     if (!data.encryptedJson) {
@@ -99,7 +101,7 @@ export const ImportTab = () => {
       return;
     }
 
-    try{
+    try {
       await importEnvKey({ encryptedJson: data.encryptedJson, decryptionKey: data.encryptionKey });
       createNotification({
         text: "Data imported successfully.",
@@ -109,11 +111,10 @@ export const ImportTab = () => {
       if (fileUploadRef.current) {
         fileUploadRef.current.value = "";
       }
-    } catch (error) {
+    } catch {
       reset();
     }
-
-  }
+  };
 
   const watchEncryptedJsonFile: any = watch("file");
   useEffect(() => {
@@ -124,13 +125,13 @@ export const ImportTab = () => {
 
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-      <h2 className="text-lg font-medium text-white mb-4">Import from external source</h2>
+      <h2 className="mb-4 text-lg font-medium text-white">Import from external source</h2>
       <p className="text-sm text-mineshaft-400">
         Import data from another secret manager to Infisical.
       </p>
-      <div className="border-b border-mineshaft-800 my-6" />
-      <div className="flex justify-left">
-        <h3 className="text-lg font-medium text-white mb-4">Import from EnvKey</h3>
+      <div className="my-6 border-b border-mineshaft-800" />
+      <div className="justify-left flex">
+        <h3 className="mb-4 text-lg font-medium text-white">Import from EnvKey</h3>
         <Link href="https://infisical.com/docs/documentation/guides/migrating-from-envkey" passHref>
           <a target="_blank" rel="noopener noreferrer">
             <div className="ml-2 mb-1 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
@@ -148,12 +149,16 @@ export const ImportTab = () => {
         <form onSubmit={handleSubmit(submitExport)}>
           <Controller
             render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl errorText={error?.message} isError={Boolean(error)} label="Encryption Key">
+              <FormControl
+                errorText={error?.message}
+                isError={Boolean(error)}
+                label="Encryption Key"
+              >
                 <input
                   {...field}
                   onChange={onChange}
                   type="password"
-                  className="w-full bg-mineshaft-800 text-white rounded-lg py-2 px-4"
+                  className="w-full rounded-lg bg-mineshaft-800 py-2 px-4 text-white"
                   placeholder="Enter encryption key"
                 />
               </FormControl>
@@ -161,14 +166,18 @@ export const ImportTab = () => {
             name="encryptionKey"
             control={control}
           />
-          <div className="flex justify-left">
+          <div className="justify-left flex">
             <Controller
               name="file"
               control={control}
               defaultValue={null}
               rules={{ required: "File is required" }}
               render={({ field, fieldState: { error } }) => (
-                <FormControl errorText={error?.message} isError={Boolean(error)} label="Export file from EnvKey">
+                <FormControl
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  label="Export file from EnvKey"
+                >
                   <>
                     <input
                       id="fileSelect"
@@ -185,22 +194,22 @@ export const ImportTab = () => {
                       onClick={() => {
                         fileUploadRef?.current?.click();
                       }}
-                      >
+                    >
                       {fileUploadRef?.current?.value ? (
-                        <span className="text-green text-sm">
+                        <span className="text-sm text-green">
                           {fileUploadRef?.current?.value.split("\\").pop()}
                         </span>
                       ) : (
                         <>
-                      Upload export file&nbsp;
-                      <FontAwesomeIcon icon={faUpload} size="xs" />
-                      </>
+                          Upload export file&nbsp;
+                          <FontAwesomeIcon icon={faUpload} size="xs" />
+                        </>
                       )}
                     </IconButton>
                   </>
                 </FormControl>
-              )} />
-
+              )}
+            />
           </div>
           <div className="mt-6">
             <Button