From a7731e6b3ff7875229f2cda358686b3080924f68 Mon Sep 17 00:00:00 2001
From: Yagnik <yagnikhingrajiya56@gmail.com>
Date: Fri, 9 Aug 2024 14:13:57 +0530
Subject: [PATCH 1/2] parse failed message added in common import container

---
 .../common-import-container.component.html        | 15 +++++++++------
 .../common-import-container.component.scss        |  4 ++++
 .../common-import-container.component.ts          |  5 +++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
index 98f910a1cb..5a78859e3f 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
@@ -5,10 +5,13 @@
   (drop)="onDrop($event)"
   [ngClass]="{ 'drag-over': (isDragOver | async) }"
 >
-    <span class="material-symbols-outlined">upload</span>
-    <p class="ft-12-600 drag-text">Drag and drop or</p>
-    <button mat-flat-button color="primary" class="choose-json-btn" (click)="fileInput.click()">
-      <span>{{ buttonLabel }}</span>
-    </button>
-    <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
+  <span class="material-symbols-outlined">upload</span>
+  <p class="ft-12-600 drag-text">Drag and drop or</p>
+  <button mat-flat-button color="primary" class="choose-json-btn" (click)="fileInput.click()">
+    <span>{{ buttonLabel }}</span>
+  </button>
+  <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
+  <div *ngIf="showParseFailedError" class="ft-14-500 parse-error">
+    Error: invalid {{ getFileTypeSubstring() }}
+  </div>
 </div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
index 884c6285a2..7d8159b87d 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
@@ -26,4 +26,8 @@
   .choose-json-btn {
     padding: 0 16px;
   }
+
+  .parse-error {
+    color: red;
+  }
 }
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.ts
index 1760fab000..039c7ac794 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.ts
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.ts
@@ -38,6 +38,7 @@ import { FILE_TYPE } from 'upgrade_types';
 export class CommonImportContainerComponent {
   @Input() fileType!: FILE_TYPE;
   @Input() buttonLabel!: string;
+  @Input() showParseFailedError?: boolean;
   @Output() filesSelected = new EventEmitter<File[]>();
 
   isDragOver = new BehaviorSubject<boolean>(false);
@@ -55,6 +56,10 @@ export class CommonImportContainerComponent {
     this.handleFileSelection(event.dataTransfer?.files);
   }
 
+  getFileTypeSubstring(): string {
+    return this.fileType.substring(1).toUpperCase();
+  }
+
   private handleDragState(event: DragEvent, isOver: boolean) {
     event.preventDefault();
     event.stopPropagation();

From b5c4eb1db6bf9068e83ed6848c627bded4f85dfb Mon Sep 17 00:00:00 2001
From: Yagnik <yagnikhingrajiya56@gmail.com>
Date: Fri, 9 Aug 2024 14:37:58 +0530
Subject: [PATCH 2/2] color fix for error

---
 .../common-import-container.component.html                      | 2 +-
 .../common-import-container.component.scss                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
index 5a78859e3f..49abc4c4b5 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
@@ -12,6 +12,6 @@
   </button>
   <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
   <div *ngIf="showParseFailedError" class="ft-14-500 parse-error">
-    Error: invalid {{ getFileTypeSubstring() }}
+    Error: Invalid {{ getFileTypeSubstring() }}
   </div>
 </div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
index 7d8159b87d..d4c4044bb0 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
@@ -28,6 +28,6 @@
   }
 
   .parse-error {
-    color: red;
+    color: var(--red-2);
   }
 }