Add description to PKI collection

frontend/src/hooks/api/pkiCollections/types.ts

@@ -1,6 +1,7 @@
 export type TPkiCollection = {
   id: string;
   name: string;
+  description: string;
   projectId: string;
   createdAt: string;
   updatedAt: string;
@@ -9,12 +10,14 @@ export type TPkiCollection = {
 export type TCreatePkiCollectionDTO = {
   projectId: string;
   name: string;
+  description: string;
 };
 
 export type TUpdatePkiCollectionTO = {
   collectionId: string;
   projectId: string;
   name?: string;
+  description?: string;
 };
 
 export type TDeletePkiCollectionDTO = {

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 
+import { PkiCollectionSection } from "../PkiAlertsTab/components";
 import { CertificatesSection } from "./components";
 
 export const CertificatesTab = () => {
@@ -11,6 +12,7 @@ export const CertificatesTab = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
+      <PkiCollectionSection />
       <CertificatesSection />
     </motion.div>
   );

frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal.tsx

@@ -15,7 +15,8 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
-  name: z.string().trim().min(1)
+  name: z.string().trim().min(1),
+  description: z.string()
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -49,16 +50,18 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
   useEffect(() => {
     if (pkiCollection) {
       reset({
-        name: pkiCollection.name
+        name: pkiCollection.name,
+        description: pkiCollection.description
       });
     } else {
       reset({
-        name: ""
+        name: "",
+        description: ""
       });
     }
   }, [pkiCollection]);
 
-  const onFormSubmit = async ({ name }: FormData) => {
+  const onFormSubmit = async ({ name, description }: FormData) => {
     try {
       if (!projectId) return;
 
@@ -67,12 +70,14 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
         await updatePkiCollection({
           collectionId: pkiCollection.id,
           name,
+          description,
           projectId
         });
       } else {
         // create
         const { id: createdId } = await createPkiCollection({
           name,
+          description,
           projectId
         });
 
@@ -121,6 +126,19 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input
+                  {...field}
+                  placeholder="A collection to house certificates for ACME device"
+                />
+              </FormControl>
+            )}
+          />
           <div className="flex items-center">
             <Button
               className="mr-4"

frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionSection.tsx

@@ -48,7 +48,7 @@ export const PkiCollectionSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">Certificate Collection</p>
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Collections</p>
         <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.PkiCollections}

frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionTable.tsx

@@ -46,11 +46,12 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
           <THead>
             <Tr>
               <Th>Name</Th>
+              <Th>Description</Th>
               <Th className="w-5" />
             </Tr>
           </THead>
           <TBody>
-            {isLoading && <TableSkeleton columns={2} innerKey="pki-collections" />}
+            {isLoading && <TableSkeleton columns={3} innerKey="pki-collections" />}
             {!isLoading &&
               data?.collections.map((pkiCollection) => {
                 return (
@@ -62,6 +63,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
                     }
                   >
                     <Td>{pkiCollection.name}</Td>
+                    <Td>{pkiCollection.description}</Td>
                     <Td>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild className="rounded-lg">

frontend/src/views/Project/PkiCollectionPage/components/PkiCollectionDetailsSection.tsx

@@ -71,10 +71,14 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
             </div>
           </div>
         </div>
-        <div>
+        <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
         </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
+          <p className="text-sm text-mineshaft-300">{pkiCollection.description}</p>
+        </div>
       </div>
     </div>
   ) : (