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

misc: added descriptive tooltips

Browse Source
This commit is contained in:
Sheen Capadngan
2024-08-16 21:09:35 +08:00
parent f90855e7a5
commit 6fe1d77375
2 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx
View File

@@ -1,5 +1,7 @@
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -7,11 +9,13 @@ import { createNotification } from "@app/components/notifications";
import {
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalContent,
Select,
SelectItem
SelectItem,
Tooltip
} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import {
@@ -191,7 +195,27 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
defaultValue=""
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Certificate Template"
label={
<div>
<FormLabel
isRequired
label="Certificate Template"
icon={
<Tooltip
className="text-center"
content={
<span>
When a template is selected, the details provided are validated
against the template policies.
</span>
}
>
<FontAwesomeIcon icon={faQuestionCircle} size="sm" />
</Tooltip>
}
/>
</div>
}
errorText={error?.message}
isError={Boolean(error)}
className="mt-4"

50
frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx
View File

@@ -1,5 +1,7 @@
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -7,11 +9,13 @@ import { createNotification } from "@app/components/notifications";
import {
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalContent,
Select,
SelectItem
SelectItem,
Tooltip
} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import {
@@ -241,7 +245,27 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
name="commonName"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Common Name (CN)"
label={
<div>
<FormLabel
isRequired
label="Common Name (CN)"
icon={
<Tooltip
className="text-center"
content={
<span>
This field accepts limited regular expressions: spaces, *, ., @, -, \
(for escaping), and alphanumeric characters only
</span>
}
>
<FontAwesomeIcon icon={faQuestionCircle} size="sm" />
</Tooltip>
}
/>
</div>
}
isError={Boolean(error)}
errorText={error?.message}
isRequired
@@ -256,7 +280,27 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle }: Props) =>
name="subjectAlternativeName"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Alternative Names (SANs)"
label={
<div>
<FormLabel
isRequired
label="Alternative Names (SAN)"
icon={
<Tooltip
className="text-center"
content={
<span>
This field accepts limited regular expressions: spaces, *, ., @, -, \
(for escaping), and alphanumeric characters only
</span>
}
>
<FontAwesomeIcon icon={faQuestionCircle} size="sm" />
</Tooltip>
}
/>
</div>
}
isError={Boolean(error)}
errorText={error?.message}
isRequired