awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

requested changes

Browse Source
This commit is contained in:
Daniel Hougaard
2025-09-23 05:07:00 +04:00
parent 2fac3c19b1
commit b73d6fcbe8
4 changed files with 69 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/v2/Input/Input.tsx
View File

@@ -1,9 +1,6 @@
import { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode } from "react";
import { cva, VariantProps } from "cva";
import { twMerge } from "tailwind-merge";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faWarning } from "@fortawesome/free-solid-svg-icons";
import { Tooltip } from "../Tooltip";
type Props = {
placeholder?: string;
@@ -15,7 +12,7 @@ type Props = {
isReadOnly?: boolean;
autoCapitalization?: boolean;
containerClassName?: string;
warningMessage?: string | ReactNode;
warning?: ReactNode;
};
const inputVariants = cva(
@@ -88,7 +85,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
size = "md",
isReadOnly,
autoCapitalization,
warningMessage,
warning,
...props
},
ref
@@ -125,11 +122,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
inputVariants({ className, isError, size, isRounded, variant })
)}
/>
{warningMessage && !rightIcon && (
<Tooltip className="w-full max-w-72" content={warningMessage}>
<FontAwesomeIcon icon={faWarning} className="absolute right-0 mr-3 text-yellow-500" />
</Tooltip>
)}
{Boolean(warning) && !rightIcon && warning}
{rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
</div>
);

35
frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
View File

@@ -1,7 +1,7 @@
import { ClipboardEvent, useRef } from "react";
import { Controller, useForm } from "react-hook-form";
import { subject } from "@casl/ability";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -12,7 +12,8 @@ import {
FilterableSelect,
FormControl,
Input,
PasswordGenerator
PasswordGenerator,
Tooltip
} from "@app/components/v2";
import { CreatableSelect } from "@app/components/v2/CreatableSelect";
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
@@ -217,17 +218,27 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
// @ts-expect-error this is for multiple ref single component
secretKeyInputRef.current = e;
}}
warningMessage={
warning={
secretKey?.includes(" ") ? (
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{secretKey.trim().replaceAll(" ", "%20")}
</code>{" "}
when making API requests.
</div>
<Tooltip
className={"w-full max-w-72"}
content={
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{encodeURIComponent(secretKey.trim())}
</code>{" "}
when making API requests.
</div>
}
>
<FontAwesomeIcon
icon={faWarning}
className="absolute right-0 mr-3 text-yellow-600"
/>
</Tooltip>
) : undefined
}
placeholder="Type your secret name"

34
frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
View File

@@ -1,12 +1,12 @@
import { ClipboardEvent, useRef } from "react";
import { Controller, useForm } from "react-hook-form";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import { Button, FormControl, Input, PasswordGenerator } from "@app/components/v2";
import { Button, FormControl, Input, PasswordGenerator, Tooltip } from "@app/components/v2";
import { CreatableSelect } from "@app/components/v2/CreatableSelect";
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -178,17 +178,27 @@ export const CreateSecretForm = ({
// @ts-expect-error this is for multiple ref single component
secretKeyInputRef.current = e;
}}
warningMessage={
warning={
secretKey?.includes(" ") ? (
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{secretKey.trim().replaceAll(" ", "%20")}
</code>{" "}
when making API requests.
</div>
<Tooltip
className={"w-full max-w-72"}
content={
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{encodeURIComponent(secretKey.trim())}
</code>{" "}
when making API requests.
</div>
}
>
<FontAwesomeIcon
icon={faWarning}
className="absolute right-0 mr-3 text-yellow-600"
/>
</Tooltip>
) : undefined
}
placeholder="Type your secret name"

32
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
View File

@@ -43,7 +43,7 @@ import { twMerge } from "tailwind-merge";
import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
import { faEyeSlash, faKey, faRotate, faWarning } from "@fortawesome/free-solid-svg-icons";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { format } from "date-fns";
import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm";
@@ -487,17 +487,27 @@ export const SecretItem = memo(
placeholder={error?.message}
isError={Boolean(error)}
onKeyUp={() => trigger("key")}
warningMessage={
warning={
field.value?.includes(" ") ? (
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{field.value.trim().replaceAll(" ", "%20")}
</code>{" "}
when making API requests.
</div>
<Tooltip
className={"w-full max-w-72"}
content={
<div>
Secret key contains whitespaces.
<br />
<br /> If this is the desired format, you need to provide it as{" "}
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
{encodeURIComponent(field.value.trim())}
</code>{" "}
when making API requests.
</div>
}
>
<FontAwesomeIcon
icon={faWarning}
className="absolute right-0 mr-3 text-yellow-600 opacity-60"
/>
</Tooltip>
) : undefined
}
{...field}