mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 21:37:59 +00:00
Fix: Format entire frontend properly
This commit is contained in:
Daniel Hougaard
@@ -30,9 +30,9 @@ const ConfirmEnvOverwriteModal = ({
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
|
||||
<p className="text-gray-400">Your file contains the following duplicate secrets:</p>
|
||||
<p className="text-sm text-gray-500">{duplicateKeys.join(", ")}</p>
|
||||
<p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
|
||||
<p className="text-md text-gray-400">Are you sure you want to overwrite these secrets?</p>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { memo, SyntheticEvent, useRef } from "react";
|
||||
import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faCircle,
|
||||
faCodeBranch,
|
||||
faExclamationCircle,
|
||||
faEye
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import guidGenerator from "../utilities/randomId";
|
||||
@@ -31,8 +36,8 @@ interface DashboardInputFieldProps {
|
||||
* @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 {boolean} obj.isDuplicate - if the key name is duplicated
|
||||
* @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
|
||||
*
|
||||
*
|
||||
*
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
|
||||
@@ -61,29 +66,31 @@ const DashboardInputField = ({
|
||||
const error = startsWithNumber || isDuplicate;
|
||||
|
||||
return (
|
||||
<div className={`relative flex-col w-full h-10 ${
|
||||
error && value !== "" ? "bg-red/[0.15]" : ""
|
||||
} ${
|
||||
isSideBarOpen && "bg-mineshaft-700 duration-200"
|
||||
}`}>
|
||||
<div
|
||||
className={`relative h-10 w-full flex-col ${error && value !== "" ? "bg-red/[0.15]" : ""} ${
|
||||
isSideBarOpen && "bg-mineshaft-700 duration-200"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`group relative flex flex-col justify-center items-center h-full ${
|
||||
className={`group relative flex h-full flex-col items-center justify-center ${
|
||||
error ? "w-max" : "w-full"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)}
|
||||
onChange={(e) =>
|
||||
onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)
|
||||
}
|
||||
type={type}
|
||||
value={value}
|
||||
className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
|
||||
className={`ph-no-capture min-w-16 peer z-10 h-full w-full bg-transparent px-2 font-mono text-sm caret-bunker-200 outline-none ${
|
||||
error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100"
|
||||
} duration-200`}
|
||||
spellCheck="false"
|
||||
/>
|
||||
</div>
|
||||
{startsWithNumber && (
|
||||
<div className='absolute right-2 top-2 text-red z-50'>
|
||||
<HoverObject
|
||||
<div className="absolute right-2 top-2 z-50 text-red">
|
||||
<HoverObject
|
||||
text="Secret names should not start with a number"
|
||||
icon={faExclamationCircle}
|
||||
color="red"
|
||||
@@ -91,33 +98,44 @@ const DashboardInputField = ({
|
||||
</div>
|
||||
)}
|
||||
{isDuplicate && value !== "" && !startsWithNumber && (
|
||||
<div className='absolute right-2 top-2 text-red z-50'>
|
||||
<HoverObject
|
||||
<div className="absolute right-2 top-2 z-50 text-red">
|
||||
<HoverObject
|
||||
text="Secret names should be unique"
|
||||
icon={faExclamationCircle}
|
||||
color="red"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!error && <div className={`absolute right-0 top-0 text-red z-50 bg-mineshaft-800 group-hover:bg-mineshaft-700 ${
|
||||
overrideEnabled ? "visible" : "invisible group-hover:visible"
|
||||
} cursor-pointer duration-0 h-10 flex items-center px-2`}>
|
||||
<button type="button" onClick={() => {
|
||||
if (modifyValueOverride) {
|
||||
if (overrideEnabled === false) {
|
||||
modifyValueOverride("", id);
|
||||
} else {
|
||||
modifyValueOverride(undefined, id);
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<HoverObject
|
||||
text={overrideEnabled ? "This secret is overriden with your personal value" : "You can override this secret with a personal value"}
|
||||
icon={faCodeBranch}
|
||||
color={overrideEnabled ? "primary" : "bunker-400"}
|
||||
/>
|
||||
</button>
|
||||
</div>}
|
||||
{!error && (
|
||||
<div
|
||||
className={`absolute right-0 top-0 z-50 bg-mineshaft-800 text-red group-hover:bg-mineshaft-700 ${
|
||||
overrideEnabled ? "visible" : "invisible group-hover:visible"
|
||||
} duration-0 flex h-10 cursor-pointer items-center px-2`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (modifyValueOverride) {
|
||||
if (overrideEnabled === false) {
|
||||
modifyValueOverride("", id);
|
||||
} else {
|
||||
modifyValueOverride(undefined, id);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<HoverObject
|
||||
text={
|
||||
overrideEnabled
|
||||
? "This secret is overriden with your personal value"
|
||||
: "You can override this secret with a personal value"
|
||||
}
|
||||
icon={faCodeBranch}
|
||||
color={overrideEnabled ? "primary" : "bunker-400"}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -127,20 +145,29 @@ const DashboardInputField = ({
|
||||
|
||||
return (
|
||||
<PopoverObject text={value || ""} onChangeHandler={onChangeHandler} id={id}>
|
||||
<div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
|
||||
isSideBarOpen && "bg-mineshaft-700 duration-200"
|
||||
}`}>
|
||||
<div
|
||||
title={value}
|
||||
className={`relative h-10 w-full flex-col overflow-hidden ${
|
||||
isSideBarOpen && "bg-mineshaft-700 duration-200"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`group relative flex flex-col justify-center items-center h-full ${
|
||||
className={`group relative flex h-full flex-col items-center justify-center ${
|
||||
error ? "w-max" : "w-full"
|
||||
}`}
|
||||
>
|
||||
{value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
|
||||
{value?.split("\n")[0]}
|
||||
</span> : <span className='text-bunker-400'>-</span> }
|
||||
{value?.split("\n")[1] && <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
|
||||
{value?.split("\n")[1]}
|
||||
</span>}
|
||||
{value?.split("\n")[0] ? (
|
||||
<span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
|
||||
{value?.split("\n")[0]}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-bunker-400">-</span>
|
||||
)}
|
||||
{value?.split("\n")[1] && (
|
||||
<span className="ph-no-capture min-w-16 placeholder w-full truncate break-all bg-transparent px-2 text-xs leading-tight text-bunker-300 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent">
|
||||
{value?.split("\n")[1]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverObject>
|
||||
@@ -148,10 +175,10 @@ const DashboardInputField = ({
|
||||
}
|
||||
if (type === "value") {
|
||||
return (
|
||||
<div className="flex-col w-full">
|
||||
<div className="group relative whitespace-pre flex flex-col justify-center w-full">
|
||||
<div className="w-full flex-col">
|
||||
<div className="group relative flex w-full flex-col justify-center whitespace-pre">
|
||||
{overrideEnabled === true && (
|
||||
<div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
|
||||
<div className="absolute top-[0.1rem] right-[0.1rem] z-0 w-min rounded-sm bg-primary-500 px-1 text-xxs text-black opacity-80">
|
||||
Override enabled
|
||||
</div>
|
||||
)}
|
||||
@@ -160,20 +187,20 @@ const DashboardInputField = ({
|
||||
onChange={(e) => onChangeHandler(e.target.value, id)}
|
||||
onScroll={syncScroll}
|
||||
className={`${
|
||||
blurred
|
||||
? "text-transparent focus:text-transparent active:text-transparent"
|
||||
: ""
|
||||
} z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
|
||||
blurred ? "text-transparent focus:text-transparent active:text-transparent" : ""
|
||||
} ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none duration-200 no-scrollbar`}
|
||||
spellCheck="false"
|
||||
/>
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${
|
||||
blurred && !overrideEnabled
|
||||
? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200"
|
||||
? "text-bunker-800 duration-200 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400"
|
||||
: ""
|
||||
} ${overrideEnabled ? "text-primary-300" : "text-gray-400"}
|
||||
absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? "invisible" : "visible"} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
|
||||
absolute z-0 flex flex-row whitespace-pre font-mono ${
|
||||
blurred ? "invisible" : "visible"
|
||||
} ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar mt-0.5 h-10 w-full overflow-x-scroll bg-transparent px-2 py-2 text-sm outline-none duration-100 no-scrollbar peer-focus:visible`}
|
||||
>
|
||||
{value?.split(REGEX).map((word) => {
|
||||
if (word.match(REGEX) !== null) {
|
||||
@@ -203,20 +230,24 @@ const DashboardInputField = ({
|
||||
})}
|
||||
</div>
|
||||
{blurred && (
|
||||
<div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
|
||||
isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
|
||||
} peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
|
||||
<div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
|
||||
<div
|
||||
className={`peer absolute z-0 flex flex-row items-center justify-between pr-2 ${
|
||||
isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
|
||||
} h-10 w-full text-clip text-bunker-400 duration-100 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden`}
|
||||
>
|
||||
<div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
|
||||
{value?.split("").map(() => (
|
||||
<FontAwesomeIcon
|
||||
key={guidGenerator()}
|
||||
className="text-xxs mr-0.5"
|
||||
className="mr-0.5 text-xxs"
|
||||
icon={faCircle}
|
||||
/>
|
||||
))}
|
||||
{value?.split("").length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
|
||||
{value?.split("").length === 0 && <span className="text-bunker-400/80">EMPTY</span>}
|
||||
</div>
|
||||
<div className="invisible z-[100] cursor-default group-hover:visible">
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</div>
|
||||
<div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from "react"
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
@@ -8,32 +8,35 @@ import Button from "../basic/buttons/Button";
|
||||
type Props = {
|
||||
onSubmit: () => void;
|
||||
isPlain?: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={`${
|
||||
!isPlain
|
||||
? "bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2"
|
||||
: "cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center"}`}>
|
||||
{isPlain
|
||||
? <div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onSubmit}
|
||||
className="invisible group-hover:visible"
|
||||
>
|
||||
<FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
|
||||
</div>
|
||||
: <Button
|
||||
text={String(t("Delete"))}
|
||||
color="red"
|
||||
size="md"
|
||||
onButtonPressed={onSubmit}
|
||||
/>}
|
||||
<div
|
||||
className={`${
|
||||
!isPlain
|
||||
? "ml-2 h-[2.5rem] w-[4.5rem] rounded-md bg-[#9B3535] opacity-70 duration-200 hover:opacity-100"
|
||||
: "justfy-center mr-2 flex h-[2.35rem] w-[1.5rem] cursor-pointer items-center"
|
||||
}`}
|
||||
>
|
||||
{isPlain ? (
|
||||
<div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onSubmit}
|
||||
className="invisible group-hover:visible"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
className="mt-0.5 pl-2 pr-6 text-lg text-bunker-300 hover:text-red"
|
||||
icon={faXmark}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Button text={String(t("Delete"))} color="red" size="md" onButtonPressed={onSubmit} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button
|
||||
as="div"
|
||||
className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
|
||||
className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
|
||||
>
|
||||
<Button color="mineshaft" size="icon-md" icon={faDownload} onButtonPressed={() => {}} />
|
||||
</Menu.Button>
|
||||
@@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
|
||||
<Menu.Items className="absolute right-0 z-[90] mt-0.5 w-[12rem] origin-top-right space-y-2 rounded-md border border-mineshaft-500 bg-bunker p-2 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
|
||||
<Menu.Item>
|
||||
<Button
|
||||
color="mineshaft"
|
||||
|
||||
Reference in New Issue
Block a user