added comments till Content mapper

ui/src/components/Common/FileUpload/fileupload.scss

@@ -1,4 +1,7 @@
 @import '../../../scss/variables';
+/**
+ * Styles for the file upload container.
+ */
 .file-upload-container {
   display: flex;
   height: 21.25rem;
@@ -10,6 +13,9 @@
   border-radius: 0.25rem;
   border: 0.125rem dashed $color-base-gray-40;
 
+  /**
+   * Styles for the file upload element.
+   */
   .file-upload {
     display: flex;
     height: 4.5rem;
@@ -20,6 +26,9 @@
     flex-shrink: 0;
   }
 
+  /**
+   * Styles for the text inside the file upload element.
+   */
   .file-upload-text {
     text-align: center;
     font-family: Inter;
@@ -30,21 +39,42 @@
     letter-spacing: 0.16px;
   }
 
+  /**
+   * Styles for the image inside the file upload container.
+   */
   .file-upload-image {
     width: 15rem;
     height: 15rem;
     flex-shrink: 0;
   }
 }
 
+/**
+ * Adds a hover effect to the element, displaying a dashed border in the base purple color.
+ *
+ * @class hover
+ */
 .hover {
   border: 0.125rem dashed $color-base-purple;
 }
 
+/**
+ * This SCSS file contains styles for the FileUpload component.
+ */
+
 .hidden {
   display: none;
 }
 
+/**
+ * Styles for the validation container component.
+ *
+ * The validation container is a flex container that displays a validation message
+ * for a file upload component. It has a white background color, a fixed height,
+ * and a border. The container is centered vertically and has no padding.
+ *
+ * @class validation-container
+ */
 .validation-container {
   display: flex;
   background-color: $color-base-white-5;

ui/src/components/Common/FileUpload/index.tsx

@@ -11,16 +11,30 @@ type FileUploadProps = {
   projectId: string;
 };
 
+/**
+ * FileUpload component for uploading files.
+ *
+ * @param {FileUploadProps} props - The props for the FileUpload component.
+ * @returns {JSX.Element} The rendered FileUpload component.
+ */
 const FileUpload = (props: FileUploadProps) => {
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const targetRef = useRef<any>(null);
 
+  /**
+   * Empty method to handle setting upload modal to false.
+   */
   const handleSetUploadModalFalse = (): any => {
     // Empty Method
   };
 
+  /**
+   * Reads the files and opens the upload modal.
+   *
+   * @param {FileList | null} filesList - The list of files to be uploaded.
+   */
   const readFiles = (filesList: FileList | null) => {
     //handle Null check
     if (!filesList) return;
@@ -49,6 +63,11 @@ const FileUpload = (props: FileUploadProps) => {
     setIsDragOver(false);
   };
 
+  /**
+   * Handles the drop event when files are dropped onto the component.
+   *
+   * @param {DragEvent<HTMLDivElement>} e - The drop event.
+   */
   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -57,22 +76,43 @@ const FileUpload = (props: FileUploadProps) => {
     e.dataTransfer.clearData();
   };
 
+  /**
+   * Handles the drag toggle event when dragging files over the component.
+   *
+   * @param {boolean} flag - The flag indicating whether the files are being dragged over the component.
+   * @returns {Function} The event handler function.
+   */
   const handleDragToggle = (flag: boolean) => (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragOver(flag);
   };
 
+  /**
+   * Handles the file change event when a file is selected using the file input.
+   *
+   * @param {ChangeEvent<HTMLInputElement>} e - The file change event.
+   */
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
 
     readFiles(e?.target?.files);
   };
 
+  /**
+   * Handles the file select event when the "Choose file" link is clicked.
+   *
+   * @param {any} e - The file select event.
+   */
   const handleFileSelect = (e: any) => {
     e.preventDefault();
     fileInputRef?.current?.click();
   };
 
+  /**
+   * Handles the onClose event after the files are uploaded.
+   *
+   * @param {IFile[]} files - The uploaded files.
+   */
   const onCloseAfterUpload = (files: IFile[]) => {
     props.handleOnFileUpload(files);
   };

ui/src/components/Common/FileUpload/upload.scss

@@ -1,11 +1,21 @@
 @import '../../../scss/variables';
 
 /* Asset upload window css */
+/**
+ * Styles for the asset upload component.
+ *
+ * @class .asset-upload
+ */
 .asset-upload {
   background: $color-brand-white-base;
   box-shadow: 0 $space-4 $space-30 rgba(0, 0, 0, 0.25);
   width: 31.25rem;
 
+  /**
+   * Styles for the heading section of the asset upload component.
+   *
+   * @class .asset-upload__heading
+   */
   &__heading {
     align-items: center;
     border-radius: $radii-4;
@@ -14,26 +24,58 @@
     justify-content: space-between;
     padding: 0 calc(var(--space-22) + 0.063rem);
 
+    /**
+     * Styles for the in-progress state of the heading section.
+     *
+     * @class .in-progress
+     */
     &.in-progress {
       background-color: $color-brand-primary-base;
     }
 
+    /**
+     * Styles for the success state of the heading section.
+     *
+     * @class .success
+     */
     &.success {
       background-color: $color-brand-success-base;
     }
 
+    /**
+     * Styles for the attention state of the heading section.
+     *
+     * @class .attention
+     */
     &.attention {
       background-color: $color-brand-attention-base;
     }
 
+    /**
+     * Styles for the warning state of the heading section.
+     *
+     * @class .warning
+     */
     &.warning {
       background-color: #ffab00 !important;
     }
 
+    /**
+     * Styles for the actions section of the heading.
+     *
+     * @class .asset-upload-actions
+     */
     .asset-upload-actions {
       justify-content: space-between;
       width: 4.375rem;
 
+      /**
+       * Styles for the cancel, minimize, and maximize buttons in the actions section.
+       *
+       * @class .asset-upload__cancel
+       * @class .asset-upload__minimize
+       * @class .asset-upload__maximize
+       */
       &__cancel,
       &__minimize,
       &__maximize {
@@ -45,20 +87,34 @@
         justify-content: center;
         width: $space-30;
 
+        /**
+         * Styles for the hover state of the cancel, minimize, and maximize buttons.
+         */
         &:hover {
           background: rgba(34, 34, 34, 0.2);
         }
 
+        /**
+         * Styles for the SVG icons in the cancel, minimize, and maximize buttons.
+         */
         & > svg {
           cursor: pointer;
         }
       }
 
+      /**
+       * Styles for the SVG icons in the actions section.
+       */
       & > svg {
         cursor: pointer;
       }
     }
 
+    /**
+     * Styles for the count section in the heading.
+     *
+     * @class .asset-upload__count
+     */
     .asset-upload__count {
       color: $color-font-white;
       font-size: $size-font-xl;
@@ -67,17 +123,32 @@
     }
   }
 
+  /**
+   * Styles for the body section of the asset upload component.
+   *
+   * @class .asset-upload__body
+   */
   &__body {
     height: 19.06rem;
     margin-right: $space-15;
     overflow-y: auto;
 
+    /**
+     * Styles for each file in the body section.
+     *
+     * @class .asset-upload__file
+     */
     .asset-upload__file {
       display: flex;
       height: 3.75rem;
       justify-content: space-between;
       padding: $space-15;
 
+      /**
+       * Styles for the name section of each file.
+       *
+       * @class .asset-upload__name
+       */
       &__name {
         color: $color-font-black;
         font-size: $size-font-medium;
@@ -87,24 +158,49 @@
         // @include text-wrapper;
       }
 
+      /**
+       * Styles for the actions section of each file.
+       *
+       * @class .asset-upload__actions
+       */
       &__actions {
         display: flex;
 
+        /**
+         * Styles for the progress section in the actions section.
+         *
+         * @class .asset-upload__progress
+         */
         &__progress {
           margin-right: $space-34;
 
+          /**
+           * Styles for the file loaded count in the progress section.
+           *
+           * @class .file-loaded
+           */
           .file-loaded {
             color: $color-font-base;
             font-size: $size-font-medium;
           }
 
+          /**
+           * Styles for the total size count in the progress section.
+           *
+           * @class .total-size
+           */
           .total-size {
             color: $color-font-base;
             font-size: $size-font-medium;
             font-weight: $font-weight-bold;
           }
         }
 
+        /**
+         * Styles for the cancel upload button in the actions section.
+         *
+         * @class .cancel-upload
+         */
         .cancel-upload {
           cursor: pointer;
           margin-top: calc(var(--space-2) + 0.063rem);