ref(frontend): update to absolute import

2026-10-14 10:29:52 +00:00 · 2022-11-26 18:19:41 +09:00
parent 001df70e26
commit 22c184840c
73 changed files with 2029 additions and 1287 deletions
@@ -2,14 +2,14 @@ import React, { useState, useEffect, useCallback, Fragment } from "react";
 import { useRouter } from "next/router";
 import Head from "next/head";
 import Image from "next/image";
-import guidGenerator from "../../components/utilities/randomId";
-import getSecretsForProject from "../../components/utilities/getSecretsForProject";
-import pushKeys from "../../components/utilities/pushKeys";
+import guidGenerator from "~/utilities/randomId";
+import getSecretsForProject from "~/utilities/getSecretsForProject";
+import pushKeys from "~/utilities/pushKeys";
 import getWorkspaces from "../api/workspace/getWorkspaces";
 import getUser from "../api/user/getUser";
-import NavHeader from "../../components/navigation/NavHeader";
+import NavHeader from "~/components/navigation/NavHeader";

-import DashboardInputField from "../../components/dashboard/DashboardInputField";
+import DashboardInputField from "~/components/dashboard/DashboardInputField";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 	faMagnifyingGlass,
@@ -26,19 +26,26 @@ import {
 	faCheck,
 	faCopy,
 	faCircleInfo,
-	faX
+	faX,
 } from "@fortawesome/free-solid-svg-icons";
-import ListBox from "../../components/basic/Listbox";
-import DropZone from "../../components/dashboard/DropZone";
+import ListBox from "~/components/basic/Listbox";
+import DropZone from "~/components/dashboard/DropZone";
 import { Menu, Transition } from "@headlessui/react";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
-import BottonRightPopup from "../../components/basic/popups/BottomRightPopup";
+import BottonRightPopup from "~/components/basic/popups/BottomRightPopup";
 import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
-import pushKeysIntegration from "../../components/utilities/pushKeysIntegration";
-import Button from "../../components/basic/buttons/Button";
+import pushKeysIntegration from "~/utilities/pushKeysIntegration";
+import Button from "~/components/basic/buttons/Button";

-const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility, isBlurred }) => {
+const KeyPair = ({
+	keyPair,
+	deleteRow,
+	modifyKey,
+	modifyValue,
+	modifyVisibility,
+	isBlurred,
+}) => {
 	return (
 		<div className="px-1 flex flex-col items-center ml-1">
 			<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-10 my-1 items-center px-2">
@@ -86,9 +93,12 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 						<Menu.Items className="absolute right-0 mt-0.5 w-44 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-1 py-1">
 							<div
 								onClick={() =>
-									modifyVisibility(keyPair[4] == "personal"
-									? "shared"
-									: "personal", keyPair[1])
+									modifyVisibility(
+										keyPair[4] == "personal"
+											? "shared"
+											: "personal",
+										keyPair[1]
+									)
 								}
 								className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
 							>
@@ -123,7 +133,6 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 	);
 };

-
 const envMapping = {
 	Development: "dev",
 	Staging: "staging",
@@ -186,7 +195,6 @@ export default function Dashboard() {
 		};
 	}, [buttonReady]);

-
 	const reorderRows = () => {
 		setSortMethod(
 			sortMethod == "alphabetical" ? "-alphabetical" : "alphabetical"
@@ -218,21 +226,21 @@ export default function Dashboard() {
 				setFileState,
 				setIsKeyAvailable,
 				setData,
-				workspaceId: router.query.id
-			})
+				workspaceId: router.query.id,
+			});

 			const user = await getUser();
 			setIsNew(
-				(Date.parse(new Date()) -
-					Date.parse(user.createdAt)) /
-					60000 <
+				(Date.parse(new Date()) - Date.parse(user.createdAt)) / 60000 <
 					3
 					? true
 					: false
 			);

-			let userAction = await checkUserAction({action: "first_time_secrets_pushed"});
-			setHasUserEverPushed(userAction ? true : false)
+			let userAction = await checkUserAction({
+				action: "first_time_secrets_pushed",
+			});
+			setHasUserEverPushed(userAction ? true : false);
 		} catch (error) {
 			console.log("Error", error);
 			setData([]);
@@ -252,39 +260,38 @@ export default function Dashboard() {
 	const modifyValue = (value, id) => {
 		setData((oldData) => {
 			oldData[id][3] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
+	};

 	const modifyKey = (value, id) => {
 		setData((oldData) => {
 			oldData[id][2] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
+	};

 	const modifyVisibility = (value, id) => {
 		setData((oldData) => {
 			oldData[id][4] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
-
+	};

 	const listenChangeValue = useCallback((value, id) => {
-		modifyValue(value, id)
-	}, [])
+		modifyValue(value, id);
+	}, []);

 	const listenChangeKey = useCallback((value, id) => {
-		modifyKey(value, id)
-	}, [])
+		modifyKey(value, id);
+	}, []);

 	const listenChangeVisibility = useCallback((value, id) => {
-		modifyVisibility(value, id)
-	}, [])
+		modifyVisibility(value, id);
+	}, []);

 	const savePush = async () => {
 		let obj = Object.assign(
@@ -294,19 +301,28 @@ export default function Dashboard() {
 		setButtonReady(false);
 		pushKeys(obj, router.query.id, env);

-		let integrations = await getWorkspaceIntegrations({workspaceId: router.query.id});
+		let integrations = await getWorkspaceIntegrations({
+			workspaceId: router.query.id,
+		});
 		integrations.map(async (integration) => {
-			if (envMapping[env] == integration.environment && integration.isActive == true) {
+			if (
+				envMapping[env] == integration.environment &&
+				integration.isActive == true
+			) {
 				let objIntegration = Object.assign(
 					{},
 					...data.map((row) => ({ [row[2]]: row[3] }))
 				);
-				await pushKeysIntegration({obj: objIntegration, integrationId: integration._id});}
+				await pushKeysIntegration({
+					obj: objIntegration,
+					integrationId: integration._id,
+				});
+			}
 		});

 		if (!hasUserEverPushed) {
-			setCheckDocsPopUpVisible(true)
-			await registerUserAction({action: "first_time_secrets_pushed"});
+			setCheckDocsPopUpVisible(true);
+			await registerUserAction({ action: "first_time_secrets_pushed" });
 		}
 	};

@@ -339,20 +355,19 @@ export default function Dashboard() {
 	function copyToClipboard() {
 		// Get the text field
 		var copyText = document.getElementById("myInput");
-	  
+
 		// Select the text field
 		copyText.select();
 		copyText.setSelectionRange(0, 99999); // For mobile devices
-	  
-		 // Copy the text inside the text field
+
+		// Copy the text inside the text field
 		navigator.clipboard.writeText(copyText.value);
-	  
+
 		setProjectIdCopied(true);
 		setTimeout(() => setProjectIdCopied(false), 2000);
 		// Alert the copied text
 		// alert("Copied the text: " + copyText.value);
-	  }
-
+	}

 	return data ? (
 		<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
@@ -371,41 +386,61 @@ export default function Dashboard() {
 			</Head>
 			<div className="flex flex-row">
 				<div className="w-full max-h-96 pb-2">
-					<NavHeader pageName="Secrets" isProjectRelated={true}/>
-					{checkDocsPopUpVisible && 
-						<BottonRightPopup 
-							buttonText="Check Docs" 
+					<NavHeader pageName="Secrets" isProjectRelated={true} />
+					{checkDocsPopUpVisible && (
+						<BottonRightPopup
+							buttonText="Check Docs"
 							buttonLink="https://infisical.com/docs/getting-started/introduction"
-							titleText="Good job!" 
-							emoji="🎉" 
-							textLine1="Congrats on adding more secrets." 
-							textLine2="Here is how to connect them to your codebase." 
+							titleText="Good job!"
+							emoji="🎉"
+							textLine1="Congrats on adding more secrets."
+							textLine2="Here is how to connect them to your codebase."
 							setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
 						/>
-					}
+					)}
 					<div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
 						<div className="flex flex-row justify-start items-center text-3xl">
 							<p className="font-semibold mr-4 mt-1">Secrets</p>
-							{data?.length==0 && <ListBox
-								selected={env}
-								data={[
-									"Development",
-									"Staging",
-									"Production",
-									"Testing",
-								]}
-								// ref={useRef(123)}
-								onChange={setEnv}
-								className="z-40"
-							/>}
+							{data?.length == 0 && (
+								<ListBox
+									selected={env}
+									data={[
+										"Development",
+										"Staging",
+										"Production",
+										"Testing",
+									]}
+									// ref={useRef(123)}
+									onChange={setEnv}
+									className="z-40"
+								/>
+							)}
 						</div>
 						<div className="flex flex-row">
 							<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400">
-								<p className="mr-2 font-bold pl-4">Project ID:</p>
-								<input type="text" value={workspaceId} id="myInput" className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none" disabled></input>
+								<p className="mr-2 font-bold pl-4">
+									Project ID:
+								</p>
+								<input
+									type="text"
+									value={workspaceId}
+									id="myInput"
+									className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
+									disabled
+								></input>
 								<div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
-									<button onClick={copyToClipboard} className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200">
-										{projectIdCopied ? <FontAwesomeIcon icon={faCheck} className="pr-0.5"/> : <FontAwesomeIcon icon={faCopy} />}
+									<button
+										onClick={copyToClipboard}
+										className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+									>
+										{projectIdCopied ? (
+											<FontAwesomeIcon
+												icon={faCheck}
+												className="pr-0.5"
+											/>
+										) : (
+											<FontAwesomeIcon icon={faCopy} />
+										)}
 									</button>
 									<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-white/10 rounded-md text-center text-gray-400 text-sm">
 										Click to Copy
@@ -455,7 +490,9 @@ export default function Dashboard() {
 												className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
 												value={searchKeys}
 												onChange={(e) =>
-													setSearchKeys(e.target.value)
+													setSearchKeys(
+														e.target.value
+													)
 												}
 												placeholder={"Search keys..."}
 											/>
@@ -465,7 +502,11 @@ export default function Dashboard() {
 												onButtonPressed={reorderRows}
 												color="mineshaft"
 												size="icon-md"
-												icon={sortMethod == "alphabetical" ? faArrowDownAZ : faArrowDownZA}
+												icon={
+													sortMethod == "alphabetical"
+														? faArrowDownAZ
+														: faArrowDownZA
+												}
 											/>
 										</div>
 										<div className="ml-2 min-w-max flex flex-row items-start justify-start">
@@ -481,7 +522,9 @@ export default function Dashboard() {
 												onButtonPressed={changeBlurred}
 												color="mineshaft"
 												size="icon-md"
-												icon={blurred ? faEye : faEyeSlash}
+												icon={
+													blurred ? faEye : faEyeSlash
+												}
 											/>
 										</div>
 										<div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
@@ -514,14 +557,17 @@ export default function Dashboard() {
 									<div className="rounded-t-md sticky top-0 z-20 bg-bunker flex flex-row pl-4 pr-6 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
 										{/* <FontAwesomeIcon icon={faAngleDown} /> */}
 										<div className="flex flex-row items-center">
-											<p className="pl-2 text-lg">Personal</p>
+											<p className="pl-2 text-lg">
+												Personal
+											</p>
 											<div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
 												<FontAwesomeIcon
 													className="ml-3 mt-1 text-lg"
 													icon={faCircleInfo}
 												/>
 												<span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-													Personal keys are only visible to you
+													Personal keys are only
+													visible to you
 												</span>
 											</div>
 										</div>
@@ -534,7 +580,8 @@ export default function Dashboard() {
 														.toLowerCase()
 														.includes(
 															searchKeys.toLowerCase()
-														) && keyPair[4] == "personal"
+														) &&
+													keyPair[4] == "personal"
 											)
 											.sort((a, b) =>
 												sortMethod == "alphabetical"
@@ -546,9 +593,13 @@ export default function Dashboard() {
 													key={keyPair[0]}
 													keyPair={keyPair}
 													deleteRow={deleteCertainRow}
-													modifyValue={listenChangeValue}
+													modifyValue={
+														listenChangeValue
+													}
 													modifyKey={listenChangeKey}
-													modifyVisibility={listenChangeVisibility}
+													modifyVisibility={
+														listenChangeVisibility
+													}
 													isBlurred={blurred}
 												/>
 											))}
@@ -562,15 +613,17 @@ export default function Dashboard() {
 									<div className="sticky top-0 z-10 bg-bunker flex flex-row pl-4 pr-5 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
 										{/* <FontAwesomeIcon icon={faAngleDown} /> */}
 										<div className="flex flex-row items-center">
-											<p className="pl-2 text-lg">Shared</p>
+											<p className="pl-2 text-lg">
+												Shared
+											</p>
 											<div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
 												<FontAwesomeIcon
 													className="ml-3 text-lg mt-1"
 													icon={faCircleInfo}
 												/>
 												<span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-													Shared keys are visible to your whole
-													team
+													Shared keys are visible to
+													your whole team
 												</span>
 											</div>
 										</div>
@@ -583,7 +636,8 @@ export default function Dashboard() {
 														.toLowerCase()
 														.includes(
 															searchKeys.toLowerCase()
-														) && keyPair[4] == "shared"
+														) &&
+													keyPair[4] == "shared"
 											)
 											.sort((a, b) =>
 												sortMethod == "alphabetical"
@@ -595,9 +649,13 @@ export default function Dashboard() {
 													key={keyPair[0]}
 													keyPair={keyPair}
 													deleteRow={deleteCertainRow}
-													modifyValue={listenChangeValue}
+													modifyValue={
+														listenChangeValue
+													}
 													modifyKey={listenChangeKey}
-													modifyVisibility={listenChangeVisibility}
+													modifyVisibility={
+														listenChangeVisibility
+													}
 													isBlurred={blurred}
 												/>
 											))}
@@ -606,7 +664,9 @@ export default function Dashboard() {
 								<div className="w-full max-w-5xl">
 									<DropZone
 										setData={addData}
-										setErrorDragAndDrop={setErrorDragAndDrop}
+										setErrorDragAndDrop={
+											setErrorDragAndDrop
+										}
 										createNewFile={addRow}
 										errorDragAndDrop={errorDragAndDrop}
 										setButtonReady={setButtonReady}
@@ -617,19 +677,23 @@ export default function Dashboard() {
 							</div>
 						) : (
 							<div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
-								{fileState.message != "There's nothing to pull" &&
+								{fileState.message !=
+									"There's nothing to pull" &&
 									fileState.message != undefined && (
 										<FontAwesomeIcon
 											className="text-7xl mb-8"
 											icon={faFolderOpen}
 										/>
 									)}
-								{(fileState.message == "There's nothing to pull" ||
+								{(fileState.message ==
+									"There's nothing to pull" ||
 									fileState.message == undefined) &&
 									isKeyAvailable && (
 										<DropZone
 											setData={setData}
-											setErrorDragAndDrop={setErrorDragAndDrop}
+											setErrorDragAndDrop={
+												setErrorDragAndDrop
+											}
 											createNewFile={addRow}
 											errorDragAndDrop={errorDragAndDrop}
 											setButtonReady={setButtonReady}
@@ -638,7 +702,10 @@ export default function Dashboard() {
 									)}
 								{fileState.message ==
 									"Failed membership validation for workspace" && (
-									<p>You are not authorized to view this project.</p>
+									<p>
+										You are not authorized to view this
+										project.
+									</p>
 								)}
 								{fileState.message ==
 									"Access needed to pull the latest file" ||
@@ -653,8 +720,8 @@ export default function Dashboard() {
 												administrator for permission.
 											</p>
 											<p className="mt-1">
-												They need to grant you access in the team
-												tab.
+												They need to grant you access in
+												the team tab.
 											</p>
 										</>
 									))}