awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-14 07:30:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

ref(frontend): fix file or disable eslint rules

Browse Source
This commit is contained in:
이강준
2022-11-26 18:20:02 +09:00
parent f2329884f8
commit 568042fac0
19 changed files with 186 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/DashboardInputField.js
+59 -28
View File
@@ -1,39 +1,44 @@
import React from "react";
import React, { Fragment } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircle } from "@fortawesome/free-solid-svg-icons";
import guidGenerator from "../utilities/randomId";
/**
* This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
* @param {string} text - the value of the input in the Dashboard Input Field
* @returns
* @returns
*/
const findReferences = (text) => {
var splitText = text.split('${');
var splitText = text.split("${");
let textArray = [splitText[0]];
for (var i = 1; i < splitText.length; i++) {
let insideBrackets = "${" + splitText[i].split('}')[0]
if (splitText[i].includes('}')) {
insideBrackets += "}"
let insideBrackets = "${" + splitText[i].split("}")[0];
if (splitText[i].includes("}")) {
insideBrackets += "}";
}
textArray.push(insideBrackets)
textArray.push(splitText[i].split('}')[1])
textArray.push(insideBrackets);
textArray.push(splitText[i].split("}")[1]);
}
return textArray;
}
};
/**
* This component renders the input fields on the dashboard
* @param {object} obj - the order number of a keyPair
* @param {number} obj.index - the order number of a keyPair
* @param {object} obj - the order number of a keyPair
* @param {number} obj.index - the order number of a keyPair
* @param {function} obj.onChangeHandler - what happens when the input is modified
* @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 {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
* @returns
* @returns
*/
const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {
const DashboardInputField = ({
index,
onChangeHandler,
type,
value,
blurred,
}) => {
if (type === "varName") {
return (
<div className="flex-col w-full">
@@ -67,32 +72,58 @@ const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) =>
} asolute 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-4 focus:ring-primary/50 duration-200`}
spellCheck="false"
/>
<div
<div
className={`${
blurred
? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
: ""
} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-100`}
>
{findReferences(value).map((text, id) =>
id % 2 == 0 || text.length <= 2
? <span className="ph-no-capture">{text}</span>
: <span className="ph-no-capture text-yellow">
{text.slice(0, 2)}
<span className="ph-no-capture text-yellow-200/80">
{text.slice(2, text.length - 1)}
{findReferences(value).map((texts, id) => {
if (id % 2 == 0 || texts.length <= 2) {
return (
<span className="ph-no-capture" key={id}>
{texts}
</span>
);
}
return (
<span
className="ph-no-capture text-yellow"
key={id}
>
{texts.slice(0, 2)}
<span className="ph-no-capture text-yellow-200/80">
{texts.slice(2, texts.length - 1)}
</span>
{texts.slice(
texts.length - 1,
texts.length
) == "}" ? (
<span className="ph-no-capture text-yellow">
{texts.slice(
texts.length - 1,
texts.length
)}{" "}
</span>
) : (
<span className="ph-no-capture text-yellow-400">
{texts.slice(
texts.length - 1,
texts.length
)}{" "}
</span>
)}
</span>
{text.slice(text.length - 1, text.length) == "}"
? <span className="ph-no-capture text-yellow">{text.slice(text.length - 1, text.length)} </span>
: <span className="ph-no-capture text-yellow-400">{text.slice(text.length - 1, text.length)} </span>}
</span>)}
);
})}
</div>
{blurred && (
<div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
<p className="ml-2"></p>
{value
.split("")
.slice(0,42)
.slice(0, 42)
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}