Add description to PKI collection

backend/src/db/migrations/20240806173521_cert-alerting.ts

@@ -11,6 +11,7 @@ export async function up(knex: Knex): Promise<void> {
       t.string("projectId").notNullable();
       t.foreign("projectId").references("id").inTable(TableName.Project).onDelete("CASCADE");
       t.string("name").notNullable();
+      t.string("description").notNullable();
     });
   }
 

backend/src/db/schemas/pki-collections.ts

@@ -12,7 +12,8 @@ export const PkiCollectionsSchema = z.object({
   createdAt: z.date(),
   updatedAt: z.date(),
   projectId: z.string(),
-  name: z.string()
+  name: z.string(),
+  description: z.string()
 });
 
 export type TPkiCollections = z.infer<typeof PkiCollectionsSchema>;

backend/src/lib/api-docs/constants.ts

@@ -1172,14 +1172,16 @@ export const ALERTS = {
 export const PKI_COLLECTIONS = {
   CREATE: {
     projectId: "The ID of the project to create the PKI collection in",
-    name: "The name of the PKI collection"
+    name: "The name of the PKI collection",
+    description: "A description for the PKI collection"
   },
   GET: {
     collectionId: "The ID of the PKI collection to get"
   },
   UPDATE: {
     collectionId: "The ID of the PKI collection to update",
-    name: "The name of the PKI collection to update to"
+    name: "The name of the PKI collection to update to",
+    description: "The description for the PKI collection to update to"
   },
   DELETE: {
     collectionId: "The ID of the PKI collection to delete"

backend/src/server/routes/v1/pki-collection-router.ts

@@ -20,7 +20,8 @@ export const registerPkiCollectionRouter = async (server: FastifyZodProvider) =>
       description: "Create PKI collection",
       body: z.object({
         projectId: z.string().trim().describe(PKI_COLLECTIONS.CREATE.projectId),
-        name: z.string().trim().describe(PKI_COLLECTIONS.CREATE.name)
+        name: z.string().trim().describe(PKI_COLLECTIONS.CREATE.name),
+        description: z.string().trim().default("").describe(PKI_COLLECTIONS.CREATE.description)
       }),
       response: {
         200: PkiCollectionsSchema
@@ -104,7 +105,8 @@ export const registerPkiCollectionRouter = async (server: FastifyZodProvider) =>
         collectionId: z.string().trim().describe(PKI_COLLECTIONS.UPDATE.collectionId)
       }),
       body: z.object({
-        name: z.string().trim().optional().describe(PKI_COLLECTIONS.UPDATE.name)
+        name: z.string().trim().optional().describe(PKI_COLLECTIONS.UPDATE.name),
+        description: z.string().trim().optional().describe(PKI_COLLECTIONS.UPDATE.description)
       }),
       response: {
         200: PkiCollectionsSchema

backend/src/services/pki-collection/pki-collection-service.ts

@@ -40,6 +40,7 @@ export const pkiCollectionServiceFactory = ({
 }: TPkiCollectionServiceFactoryDep) => {
   const createPkiCollection = async ({
     name,
+    description,
     projectId,
     actorId,
     actorAuthMethod,
@@ -61,7 +62,8 @@ export const pkiCollectionServiceFactory = ({
 
     const pkiCollection = await pkiCollectionDAL.create({
       projectId,
-      name
+      name,
+      description
     });
 
     return pkiCollection;
@@ -92,6 +94,7 @@ export const pkiCollectionServiceFactory = ({
   const updatePkiCollection = async ({
     collectionId,
     name,
+    description,
     actorId,
     actorAuthMethod,
     actor,
@@ -110,7 +113,8 @@ export const pkiCollectionServiceFactory = ({
 
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Edit, ProjectPermissionSub.PkiCollections);
     pkiCollection = await pkiCollectionDAL.updateById(collectionId, {
-      name
+      name,
+      description
     });
 
     return pkiCollection;

backend/src/services/pki-collection/pki-collection-types.ts

@@ -2,6 +2,7 @@ import { TProjectPermission } from "@app/lib/types";
 
 export type TCreatePkiCollectionDTO = {
   name: string;
+  description: string;
 } & TProjectPermission;
 
 export type TGetPkiCollectionByIdDTO = {
@@ -11,6 +12,7 @@ export type TGetPkiCollectionByIdDTO = {
 export type TUpdatePkiCollectionDTO = {
   collectionId: string;
   name?: string;
+  description?: string;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TDeletePkiCollectionDTO = {

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>
   ) : (