Fix folder empty description issue and added icon to display it

This commit is contained in:
carlosmonastyrski
2025-03-04 13:44:40 -03:00
parent 4eba80905a
commit 1512d4f496
7 changed files with 31 additions and 27 deletions

View File

@@ -48,7 +48,7 @@ export const registerSecretFolderRouter = async (server: FastifyZodProvider) =>
.transform(prefixWithSlash) .transform(prefixWithSlash)
.transform(removeTrailingSlash) .transform(removeTrailingSlash)
.describe(FOLDERS.CREATE.directory), .describe(FOLDERS.CREATE.directory),
description: z.string().optional().describe(FOLDERS.CREATE.description) description: z.string().optional().nullable().describe(FOLDERS.CREATE.description)
}), }),
response: { response: {
200: z.object({ 200: z.object({
@@ -79,7 +79,7 @@ export const registerSecretFolderRouter = async (server: FastifyZodProvider) =>
folderId: folder.id, folderId: folder.id,
folderName: folder.name, folderName: folder.name,
folderPath: path, folderPath: path,
description: req.body.description ...(req.body.description ? { description: req.body.description } : {})
} }
} }
}); });
@@ -129,7 +129,7 @@ export const registerSecretFolderRouter = async (server: FastifyZodProvider) =>
.transform(prefixWithSlash) .transform(prefixWithSlash)
.transform(removeTrailingSlash) .transform(removeTrailingSlash)
.describe(FOLDERS.UPDATE.directory), .describe(FOLDERS.UPDATE.directory),
description: z.string().optional().describe(FOLDERS.UPDATE.description) description: z.string().optional().nullable().describe(FOLDERS.UPDATE.description)
}), }),
response: { response: {
200: z.object({ 200: z.object({
@@ -201,7 +201,7 @@ export const registerSecretFolderRouter = async (server: FastifyZodProvider) =>
.transform(prefixWithSlash) .transform(prefixWithSlash)
.transform(removeTrailingSlash) .transform(removeTrailingSlash)
.describe(FOLDERS.UPDATE.path), .describe(FOLDERS.UPDATE.path),
description: z.string().optional().describe(FOLDERS.UPDATE.description) description: z.string().optional().nullable().describe(FOLDERS.UPDATE.description)
}) })
.array() .array()
.min(1) .min(1)

View File

@@ -9,7 +9,7 @@ export type TCreateFolderDTO = {
environment: string; environment: string;
path: string; path: string;
name: string; name: string;
description?: string; description?: string | null;
} & TProjectPermission; } & TProjectPermission;
export type TUpdateFolderDTO = { export type TUpdateFolderDTO = {
@@ -17,7 +17,7 @@ export type TUpdateFolderDTO = {
path: string; path: string;
id: string; id: string;
name: string; name: string;
description?: string; description?: string | null;
} & TProjectPermission; } & TProjectPermission;
export type TUpdateManyFoldersDTO = { export type TUpdateManyFoldersDTO = {
@@ -27,7 +27,7 @@ export type TUpdateManyFoldersDTO = {
path: string; path: string;
id: string; id: string;
name: string; name: string;
description?: string; description?: string | null;
}[]; }[];
} & Omit<TProjectPermission, "projectId">; } & Omit<TProjectPermission, "projectId">;

View File

@@ -25,7 +25,7 @@ export type TCreateFolderDTO = {
environment: string; environment: string;
name: string; name: string;
path?: string; path?: string;
description?: string description?: string | null;
}; };
export type TUpdateFolderDTO = { export type TUpdateFolderDTO = {
@@ -34,7 +34,7 @@ export type TUpdateFolderDTO = {
name: string; name: string;
folderId: string; folderId: string;
path?: string; path?: string;
description?: string description?: string | null;
}; };
export type TDeleteFolderDTO = { export type TDeleteFolderDTO = {
@@ -52,6 +52,6 @@ export type TUpdateFolderBatchDTO = {
environment: string; environment: string;
id: string; id: string;
path?: string; path?: string;
description?: string; description?: string | null;
}[]; }[];
}; };

View File

@@ -251,7 +251,7 @@ export const OverviewPage = () => {
"updateFolder" "updateFolder"
] as const); ] as const);
const handleFolderCreate = async (folderName: string, description: string | undefined) => { const handleFolderCreate = async (folderName: string, description: string | null) => {
const promises = userAvailableEnvs.map((env) => { const promises = userAvailableEnvs.map((env) => {
const environment = env.slug; const environment = env.slug;
return createFolder({ return createFolder({
@@ -280,7 +280,7 @@ export const OverviewPage = () => {
} }
}; };
const handleFolderUpdate = async (newFolderName: string, description: string | undefined) => { const handleFolderUpdate = async (newFolderName: string, description: string | null) => {
const { name: oldFolderName } = popUp.updateFolder.data as TSecretFolder; const { name: oldFolderName } = popUp.updateFolder.data as TSecretFolder;
const updatedFolders: TUpdateFolderBatchDTO["folders"] = []; const updatedFolders: TUpdateFolderBatchDTO["folders"] = [];

View File

@@ -128,7 +128,7 @@ export const ActionBar = ({
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const handleFolderCreate = async (folderName: string, description: string | undefined) => { const handleFolderCreate = async (folderName: string, description: string | null) => {
try { try {
await createFolder({ await createFolder({
name: folderName, name: folderName,

View File

@@ -7,8 +7,8 @@ import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
import { TextArea } from "@app/components/v2/TextArea/TextArea"; import { TextArea } from "@app/components/v2/TextArea/TextArea";
type Props = { type Props = {
onCreateFolder?: (folderName: string, description: string | undefined) => Promise<void>; onCreateFolder?: (folderName: string, description: string | null) => Promise<void>;
onUpdateFolder?: (folderName: string, description: string | undefined) => Promise<void>; onUpdateFolder?: (folderName: string, description: string | null) => Promise<void>;
isEdit?: boolean; isEdit?: boolean;
defaultFolderName?: string; defaultFolderName?: string;
defaultDescription?: string; defaultDescription?: string;
@@ -48,7 +48,7 @@ export const FolderForm = ({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
name: defaultFolderName, name: defaultFolderName,
description:defaultDescription description: defaultDescription || ""
} }
}); });
@@ -67,7 +67,7 @@ export const FolderForm = ({
}; };
const onSubmit = async ({ name, description }: TFormData) => { const onSubmit = async ({ name, description }: TFormData) => {
const descriptionShaped = description?.trim() === "" ? undefined : description; const descriptionShaped = description && description.trim() !== "" ? description : null;
if (isEdit) { if (isEdit) {
await onUpdateFolder?.(name, descriptionShaped); await onUpdateFolder?.(name, descriptionShaped);

View File

@@ -1,5 +1,5 @@
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faClose, faFolder, faPencilSquare } from "@fortawesome/free-solid-svg-icons"; import { faClose, faFolder, faPencilSquare, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate, useSearch } from "@tanstack/react-router"; import { useNavigate, useSearch } from "@tanstack/react-router";
@@ -43,7 +43,7 @@ export const FolderListView = ({
const { mutateAsync: updateFolder } = useUpdateFolder(); const { mutateAsync: updateFolder } = useUpdateFolder();
const { mutateAsync: deleteFolder } = useDeleteFolder(); const { mutateAsync: deleteFolder } = useDeleteFolder();
const handleFolderUpdate = async (newFolderName: string, newFolderDescription: string | undefined) => { const handleFolderUpdate = async (newFolderName: string, newFolderDescription: string | null) => {
try { try {
const { id: folderId } = popUp.updateFolder.data as TSecretFolder; const { id: folderId } = popUp.updateFolder.data as TSecretFolder;
await updateFolder({ await updateFolder({
@@ -117,14 +117,18 @@ export const FolderListView = ({
}} }}
onClick={() => handleFolderClick(name)} onClick={() => handleFolderClick(name)}
> >
<Tooltip {name}
position="right" {
className="flex items-center space-x-4 max-w-lg py-4 whitespace-pre-wrap" description &&
content={description} <Tooltip
> position="right"
<div>{name}</div> className="flex items-center space-x-4 max-w-lg py-4 whitespace-pre-wrap"
</Tooltip> content={description}
</div> >
<FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
</Tooltip>
}
</div>
<div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3"> <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
<ProjectPermissionCan <ProjectPermissionCan
I={ProjectPermissionActions.Edit} I={ProjectPermissionActions.Edit}