Merge branch 'main' of https://github.com/Infisical/infisical

frontend/components/basic/buttons/Button.tsx

@@ -1,25 +1,28 @@
 import React from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";
 
 var classNames = require("classnames");
 
 type ButtonProps = {
   text: string;
   onButtonPressed: () => void;
-  loading: boolean;
+  loading?: boolean;
   color: string;
   size: string;
-  icon: IconProp;
+  icon?: IconProp;
-  active: boolean;
+  active?: boolean;
-  iconDisabled: string;
+  iconDisabled?: string;
-  textDisabled: string;
+  textDisabled?: string;
-}
+};
 
 /**
  * This is the main butto component in the app.
- * @param {object} props 
+ * @param {object} props
  * @param {string} props.text - text inside the button
  * @param {function} props.onButtonPressed - the action that happens when the button is clicked
  * @param {boolean} props.loading - if a button is currently in the laoding state
@@ -29,21 +32,28 @@ type ButtonProps = {
  * @param {boolean} props.active - if the button is active or disabled
  * @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
  * @param {string} props.textDisable - text inside the button when it is disabled
- * @returns 
+ * @returns
  */
-export default function Button (props: ButtonProps): JSX.Element {
+export default function Button(props: ButtonProps): JSX.Element {
   // Check if the button show always be 'active' - then true;
   // or if it should switch between 'active' and 'disabled' - then give the status
-  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
+  const activityStatus =
-  
+    props.active || (props.text != "" && props.textDisabled == undefined);
+
   let styleButton = classNames(
     "group m-auto md:m-0 inline-block rounded-md duration-200",
 
     // Setting background colors and hover modes
-    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+    props.color == "mineshaft" &&
+      activityStatus &&
+      "bg-mineshaft-700 hover:bg-primary",
     props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
-    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) &&
-    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+      activityStatus &&
+      "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) &&
+      !activityStatus &&
+      "bg-primary",
     props.color == "red" && "bg-red",
 
     // Changing the opacity when active vs when not
@@ -73,7 +83,7 @@ export default function Button (props: ButtonProps): JSX.Element {
     "relative duration-200",
 
     // Show the loading sign if the loading indicator is on
-    props.loading == true ? "opacity-0" : "opacity-100",
+    Boolean(props.loading) ? "opacity-0" : "opacity-100",
     props.size == "md" && "text-sm",
     props.size == "lg" && "text-lg"
   );
@@ -100,7 +110,7 @@ export default function Button (props: ButtonProps): JSX.Element {
         </div>
         {props.icon && (
           <FontAwesomeIcon
-            icon={props.icon as IconProp}
+            icon={props.icon}
             className={`flex my-auto font-extrabold ${
               props.size == "icon-sm" ? "text-sm" : "text-md"
             } ${(props.text || props.textDisabled) && "mr-2"}`}
@@ -115,7 +125,9 @@ export default function Button (props: ButtonProps): JSX.Element {
           />
         )}
         {(props.text || props.textDisabled) && (
-          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
+          <p className={textStyle}>
+            {activityStatus ? props.text : props.textDisabled}
+          </p>
         )}
       </div>
     </button>

frontend/components/dashboard/DashboardInputField.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { SyntheticEvent, useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -6,6 +6,15 @@ import guidGenerator from "../utilities/randomId";
 
 const REGEX = /([$]{.*?})/g;
 
+interface DashboardInputFieldProps {
+  index: number;
+  onChangeHandler: (value: string, index: number) => void;
+  value: string;
+  type: "varName" | "value";
+  blurred: boolean;
+  duplicates: string[];
+}
+
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
@@ -14,51 +23,60 @@ const REGEX = /([$]{.*?})/g;
  * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
  * @param {string} obj.value - value of the InputField
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
- * @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard
+ * @param {string[]} obj.duplicates - list of all the duplicated key names on the dashboard
  * @returns
  */
+
 const DashboardInputField = ({
   index,
   onChangeHandler,
   type,
   value,
   blurred,
-  duplicates
+  duplicates,
-}) => {
+}: DashboardInputFieldProps) => {
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement | null>(null);
-  const syncScroll = (e) => {
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    ref.current.scrollTop = e.target.scrollTop;
+    if (ref.current == null) return;
-    ref.current.scrollLeft = e.target.scrollLeft;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
   };
-  
+
   if (type === "varName") {
-    const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
+    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != "";
     const hasDuplicates = duplicates?.includes(value);
     const error = startsWithNumber || hasDuplicates;
 
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${error ? "border-red" : "border-mineshaft-500"} rounded-md`}
+          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+            error ? "border-red" : "border-mineshaft-500"
+          } rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)}
+            onChange={(e) =>
+              onChangeHandler(e.target.value.toUpperCase(), index)
+            }
             type={type}
             value={value}
-            className={`asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${error ? "focus:ring-red/50" : "focus:ring-primary/50"} duration-200`}
+            className={`absolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
+              error ? "focus:ring-red/50" : "focus:ring-primary/50"
+            } duration-200`}
             spellCheck="false"
           />
         </div>
-        {startsWithNumber && 
+        {startsWithNumber && (
           <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
             Should not start with a number
           </p>
-        }
+        )}
-        {hasDuplicates && !startsWithNumber &&
+        {hasDuplicates && !startsWithNumber && (
           <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
             Secret names should be unique
           </p>
-        }
+        )}
       </div>
     );
   } else if (type === "value") {
@@ -78,61 +96,61 @@ const DashboardInputField = ({
             } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
-          <div 
+          <div
-            ref={ref} 
+            ref={ref}
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
             } absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
-            {
+            {value.split(REGEX).map((word, id) => {
-              value
+              if (word.match(REGEX) !== null) {
-              .split(REGEX)
+                return (
-              .map((word, id) => {
+                  <span className="ph-no-capture text-yellow" key={id}>
-                if (word.match(REGEX) !== null) {
+                    {word.slice(0, 2)}
-                  return (
+                    <span className="ph-no-capture text-yellow-200/80">
-                    <span className="ph-no-capture text-yellow" key={id}>
+                      {word.slice(2, word.length - 1)}
-                      {word.slice(0, 2)}
-                      <span className="ph-no-capture text-yellow-200/80">
-                        {word.slice(2, word.length - 1)}
-                      </span>
-                      {word.slice(word.length - 1, word.length) == "}" ? (
-                        <span className="ph-no-capture text-yellow">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      ) : (
-                        <span className="ph-no-capture text-yellow-400">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      )}
                     </span>
-                  );
+                    {word.slice(word.length - 1, word.length) == "}" ? (
-                } else {
+                      <span className="ph-no-capture text-yellow">
-                  return <span key={id} className="ph-no-capture">{word}</span>;
+                        {word.slice(word.length - 1, word.length)}
-                }
+                      </span>
-              })
+                    ) : (
-            }
+                      <span className="ph-no-capture text-yellow-400">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    )}
+                  </span>
+                );
+              } else {
+                return (
+                  <span key={id} className="ph-no-capture">
+                    {word}
+                  </span>
+                );
+              }
+            })}
           </div>
           {blurred && (
             <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full max-w-2xl rounded-md text-gray-400/50 text-clip">
               <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
-                {value
+                {value.split("").map(() => (
-                  .split("")
+                  <FontAwesomeIcon
-                  .map(() => (
+                    key={guidGenerator()}
-                    <FontAwesomeIcon
+                    className="text-xxs mx-0.5"
-                      key={guidGenerator()}
+                    icon={faCircle}
-                      className="text-xxs mx-0.5"
+                  />
-                      icon={faCircle}
+                ))}
-                    />
-                  ))}
               </div>
             </div>
-          )} 
+          )}
         </div>
       </div>
     );
   }
+
+  return <>Something Wrong</>;
 };
 
 export default React.memo(DashboardInputField);

frontend/components/dashboard/DropZone.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type ChangeEvent, type DragEvent, useState } from "react";
 import Image from "next/image";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,27 +8,37 @@ import Error from "../basic/Error";
 import parse from "../utilities/file";
 import guidGenerator from "../utilities/randomId";
 
+interface DropZoneProps {
+  // TODO: change Data type from any
+  setData: (data: any) => void;
+  setErrorDragAndDrop: (hasError: boolean) => void;
+  createNewFile: () => void;
+  errorDragAndDrop: boolean;
+  setButtonReady: (isReady: boolean) => void;
+  keysExist: boolean;
+  numCurrentRows: number;
+}
+
 const DropZone = ({
   setData,
   setErrorDragAndDrop,
   createNewFile,
   errorDragAndDrop,
-  addPresetRow,
   setButtonReady,
   keysExist,
   numCurrentRows,
-}) => {
+}: DropZoneProps) => {
-  const handleDragEnter = (e) => {
+  const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
   };
 
-  const handleDragLeave = (e) => {
+  const handleDragLeave = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
   };
 
-  const handleDragOver = (e) => {
+  const handleDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -39,22 +49,25 @@ const DropZone = ({
   const [loading, setLoading] = useState(false);
 
   // This function function immediately parses the file after it is dropped
-  const handleDrop = async (e) => {
+  const handleDrop = async (e: DragEvent) => {
     setLoading(true);
     setTimeout(() => setLoading(false), 5000);
     e.preventDefault();
     e.stopPropagation();
     e.dataTransfer.dropEffect = "copy";
 
-    var file = e.dataTransfer.files[0],
+    const file = e.dataTransfer.files[0];
-      reader = new FileReader();
+    const reader = new FileReader();
-    reader.onload = function (event) {
+
-      const keyPairs = parse(event.target.result);
+    reader.onload = (event) => {
+      if (event.target === null || event.target.result === null) return;
+      // parse function's argument looks like to be ArrayBuffer
+      const keyPairs = parse(event.target.result as Buffer);
       const newData = Object.keys(keyPairs).map((key, index) => [
         guidGenerator(),
         numCurrentRows + index,
         key,
-        keyPairs[key],
+        keyPairs[key as keyof typeof keyPairs],
         "shared",
       ]);
       setData(newData);
@@ -72,23 +85,28 @@ const DropZone = ({
   };
 
   // This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
-  const handleFileSelect = (e) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     setLoading(true);
     setTimeout(() => setLoading(false), 5000);
-    var file = e.target.files[0],
+    if (e.currentTarget.files === null) return;
-      reader = new FileReader();
+    const file = e.currentTarget.files[0];
-    reader.onload = function (event) {
+    const reader = new FileReader();
-      const newData = event.target.result
+    reader.onload = (event) => {
-        .split("\n")
+      if (event.target === null || event.target.result === null) return;
-        .map((line, index) => [
+      const { result } = event.target;
-          guidGenerator(),
+      if (typeof result === "string") {
-          numCurrentRows + index,
+        const newData = result
-          line.split("=")[0],
+          .split("\n")
-          line.split("=").slice(1, line.split("=").length).join("="),
+          .map((line: string, index: number) => [
-          "shared",
+            guidGenerator(),
-        ]);
+            numCurrentRows + index,
-      setData(newData);
+            line.split("=")[0],
-      setButtonReady(true);
+            line.split("=").slice(1, line.split("=").length).join("="),
+            "shared",
+          ]);
+        setData(newData);
+        setButtonReady(true);
+      }
     };
     reader.readAsText(file);
   };
@@ -105,17 +123,17 @@ const DropZone = ({
   ) : keysExist ? (
     <div
       className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
-      onDragEnter={(e) => handleDragEnter(e)}
+      onDragEnter={handleDragEnter}
-      onDragOver={(e) => handleDragOver(e)}
+      onDragOver={handleDragOver}
-      onDragLeave={(e) => handleDragLeave(e)}
+      onDragLeave={handleDragLeave}
-      onDrop={(e) => handleDrop(e)}
+      onDrop={handleDrop}
     >
       <input
         id="fileSelect"
         type="file"
         className="opacity-0 absolute w-full h-full"
         accept=".txt,.env"
-        onChange={(e) => handleFileSelect(e)}
+        onChange={handleFileSelect}
       />
       {errorDragAndDrop ? (
         <div className="my-3 max-w-xl opacity-80"></div>
@@ -142,10 +160,10 @@ const DropZone = ({
   ) : (
     <div
       className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker outline max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
-      onDragEnter={(e) => handleDragEnter(e)}
+      onDragEnter={handleDragEnter}
-      onDragOver={(e) => handleDragOver(e)}
+      onDragOver={handleDragOver}
-      onDragLeave={(e) => handleDragLeave(e)}
+      onDragLeave={handleDragLeave}
-      onDrop={(e) => handleDrop(e)}
+      onDrop={handleDrop}
     >
       <FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
       <p className="">Drag and drop your .env file here.</p>
@@ -154,7 +172,7 @@ const DropZone = ({
         type="file"
         className="opacity-0 absolute w-full h-full"
         accept=".txt,.env"
-        onChange={(e) => handleFileSelect(e)}
+        onChange={handleFileSelect}
       />
       <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
         <div className="border-t border-gray-700 w-1/5"></div>