awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-03 07:26:00 +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
frontend/src/components/v2/Input/Input.tsx
+3 -10
View File
@@ -1,9 +1,6 @@
import { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode } from "react"; import { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode } from "react";
import { cva, VariantProps } from "cva"; import { cva, VariantProps } from "cva";
import { twMerge } from "tailwind-merge"; 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 = { type Props = {
placeholder?: string; placeholder?: string;
@@ -15,7 +12,7 @@ type Props = {
isReadOnly?: boolean; isReadOnly?: boolean;
autoCapitalization?: boolean; autoCapitalization?: boolean;
containerClassName?: string; containerClassName?: string;
warningMessage?: string | ReactNode; warning?: ReactNode;
}; };
const inputVariants = cva( const inputVariants = cva(
@@ -88,7 +85,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
size = "md", size = "md",
isReadOnly, isReadOnly,
autoCapitalization, autoCapitalization,
warningMessage, warning,
...props ...props
}, },
ref ref
@@ -125,11 +122,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
inputVariants({ className, isError, size, isRounded, variant }) inputVariants({ className, isError, size, isRounded, variant })
)} )}
/> />
{warningMessage && !rightIcon && ( {Boolean(warning) && !rightIcon && warning}
<Tooltip className="w-full max-w-72" content={warningMessage}>
<FontAwesomeIcon icon={faWarning} className="absolute right-0 mr-3 text-yellow-500" />
</Tooltip>
)}
{rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>} {rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
</div> </div>
); );
frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+23 -12
View File
@@ -1,7 +1,7 @@
import { ClipboardEvent, useRef } from "react"; import { ClipboardEvent, useRef } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { subject } from "@casl/ability"; 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
@@ -12,7 +12,8 @@ import {
FilterableSelect, FilterableSelect,
FormControl, FormControl,
Input, Input,
PasswordGenerator PasswordGenerator,
Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { CreatableSelect } from "@app/components/v2/CreatableSelect"; import { CreatableSelect } from "@app/components/v2/CreatableSelect";
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; 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 // @ts-expect-error this is for multiple ref single component
secretKeyInputRef.current = e; secretKeyInputRef.current = e;
}} }}
warningMessage={ warning={
secretKey?.includes(" ") ? ( secretKey?.includes(" ") ? (
<div> <Tooltip
Secret key contains whitespaces. className={"w-full max-w-72"}
<br /> content={
<br /> If this is the desired format, you need to provide it as{" "} <div>
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5"> Secret key contains whitespaces.
{secretKey.trim().replaceAll(" ", "%20")} <br />
</code>{" "} <br /> If this is the desired format, you need to provide it as{" "}
when making API requests. <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
</div> {encodeURIComponent(secretKey.trim())}
</code>{" "}
when making API requests.
</div>
}
>
<FontAwesomeIcon
icon={faWarning}
className="absolute right-0 mr-3 text-yellow-600"
/>
</Tooltip>
) : undefined ) : undefined
} }
placeholder="Type your secret name" placeholder="Type your secret name"
frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
+22 -12
View File
@@ -1,12 +1,12 @@
import { ClipboardEvent, useRef } from "react"; import { ClipboardEvent, useRef } from "react";
import { Controller, useForm } from "react-hook-form"; 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import { createNotification } from "@app/components/notifications"; 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 { CreatableSelect } from "@app/components/v2/CreatableSelect";
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -178,17 +178,27 @@ export const CreateSecretForm = ({
// @ts-expect-error this is for multiple ref single component // @ts-expect-error this is for multiple ref single component
secretKeyInputRef.current = e; secretKeyInputRef.current = e;
}} }}
warningMessage={ warning={
secretKey?.includes(" ") ? ( secretKey?.includes(" ") ? (
<div> <Tooltip
Secret key contains whitespaces. className={"w-full max-w-72"}
<br /> content={
<br /> If this is the desired format, you need to provide it as{" "} <div>
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5"> Secret key contains whitespaces.
{secretKey.trim().replaceAll(" ", "%20")} <br />
</code>{" "} <br /> If this is the desired format, you need to provide it as{" "}
when making API requests. <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
</div> {encodeURIComponent(secretKey.trim())}
</code>{" "}
when making API requests.
</div>
}
>
<FontAwesomeIcon
icon={faWarning}
className="absolute right-0 mr-3 text-yellow-600"
/>
</Tooltip>
) : undefined ) : undefined
} }
placeholder="Type your secret name" placeholder="Type your secret name"
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+21 -11
View File
@@ -43,7 +43,7 @@ import { twMerge } from "tailwind-merge";
import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types"; import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission"; import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 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 { PendingAction } from "@app/hooks/api/secretFolders/types";
import { format } from "date-fns"; import { format } from "date-fns";
import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm"; import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm";
@@ -487,17 +487,27 @@ export const SecretItem = memo(
placeholder={error?.message} placeholder={error?.message}
isError={Boolean(error)} isError={Boolean(error)}
onKeyUp={() => trigger("key")} onKeyUp={() => trigger("key")}
warningMessage={ warning={
field.value?.includes(" ") ? ( field.value?.includes(" ") ? (
<div> <Tooltip
Secret key contains whitespaces. className={"w-full max-w-72"}
<br /> content={
<br /> If this is the desired format, you need to provide it as{" "} <div>
<code className="rounded-md bg-mineshaft-500 px-1 py-0.5"> Secret key contains whitespaces.
{field.value.trim().replaceAll(" ", "%20")} <br />
</code>{" "} <br /> If this is the desired format, you need to provide it as{" "}
when making API requests. <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
</div> {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 ) : undefined
} }
{...field} {...field}