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

feat(secret-rotation): updated helper text for options

Browse Source
This commit is contained in:
Akhil Mohan
2023-10-31 15:44:05 +05:30
parent 2de898fdbd
commit c36352f05f
7 changed files with 76 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/v2/FormControl/FormControl.tsx
View File

@@ -9,16 +9,24 @@ export type FormLabelProps = {
isRequired?: boolean;
label?: ReactNode;
icon?: ReactNode;
className?: string;
};
export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelProps) => (
<Label.Root
className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
className={twMerge(
"mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400",
className
)}
htmlFor={id}
>
{label}
{isRequired && <span className="ml-1 text-red">*</span>}
{icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
{icon && (
<span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
{icon}
</span>
)}
</Label.Root>
);

26
frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
View File

@@ -1,14 +1,16 @@
import { Controller, useForm } from "react-hook-form";
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button, FormControl, SecretInput } from "@app/components/v2";
import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
type Props = {
onSubmit: (data: Record<string, string>) => void;
onCancel: () => void;
inputSchema: {
properties: Record<string, { type: string; helperText?: string; default?: string }>;
properties: Record<string, { type: string; desc?: string; default?: string }>;
required: string[];
};
};
@@ -35,8 +37,24 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) =>
render={({ field }) => (
<FormControl
key={`provider-input-${inputName}`}
label={inputName.replaceAll("_", " ")}
helperText={inputSchema.properties[inputName]?.helperText}
label={
<div className="flex items-center space-x-2">
<FormLabel className="uppercase mb-0" label={inputName.replaceAll("_", " ")} />
{Boolean(inputSchema.properties[inputName]?.desc) && (
<Tooltip
className="max-w-xs"
content={inputSchema.properties[inputName]?.desc}
position="right"
>
<FontAwesomeIcon
icon={faQuestionCircle}
size="xs"
className="text-bunker-300"
/>
</Tooltip>
)}
</div>
}
>
<SecretInput
{...field}

16
frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx
View File

@@ -35,6 +35,7 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
const environment = watch("environment", environments?.[0]?.slug);
const secretPath = watch("secretPath");
const selectedSecrets = watch("secrets");
const { data: userWsKey } = useGetUserWsKey(workspaceId);
const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
@@ -114,11 +115,16 @@ export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Pr
position="popper"
>
{!isSecretsLoading &&
secrets?.map(({ key, _id }) => (
<SelectItem value={_id} key={_id}>
{key}
</SelectItem>
))}
secrets
?.filter(
({ _id }) =>
value === _id || !Object.values(selectedSecrets || {}).includes(_id)
)
?.map(({ key, _id }) => (
<SelectItem value={_id} key={_id}>
{key}
</SelectItem>
))}
{isSecretsLoading && (
<SelectItem value="Loading" isDisabled>
<Spinner size="xs" />