From 163a173811709f6d21eb106124064f29556e0e0d Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Fri, 8 Sep 2023 10:07:13 +0200
Subject: [PATCH] Display metadata icon

---
 ui/src/app/forms/metadata/metadata.component.css  | 4 ++++
 ui/src/app/forms/metadata/metadata.component.html | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/forms/metadata/metadata.component.css b/ui/src/app/forms/metadata/metadata.component.css
index 9bd048dac0f..b224e8649e1 100644
--- a/ui/src/app/forms/metadata/metadata.component.css
+++ b/ui/src/app/forms/metadata/metadata.component.css
@@ -1,3 +1,7 @@
 .main { padding: 16px; }
 mat-form-field.full-width { width: 100%; }
 mat-form-field.mid-width { width: 50%; }
+.quart-width { width: 25%; }
+.icon-display { display: inline-flex; position: relative; left: 16px; top: 22px; }
+.width-10 { width: 10%; }
+.width-40 { width: 40%; }
diff --git a/ui/src/app/forms/metadata/metadata.component.html b/ui/src/app/forms/metadata/metadata.component.html
index f5875562b52..b530f3cbf87 100644
--- a/ui/src/app/forms/metadata/metadata.component.html
+++ b/ui/src/app/forms/metadata/metadata.component.html
@@ -34,8 +34,11 @@
             <mat-label>Icon</mat-label>
             <input placeholder="Can be a URI or a relative path in the project" matInput formControlName="icon">
         </mat-form-field>
+        <span class="icon-display width-10">
+            <img width="56" [src]="form.controls['icon'].value">
+        </span>
 
-        <mat-form-field appearance="outline" class="mid-width">
+        <mat-form-field appearance="outline" class="width-40">
             <mat-label>Global Memory Limit</mat-label>
             <input placeholder="Informative limit of memory used by the devfile. Ex: 1Gi" matInput formControlName="globalMemoryLimit">
         </mat-form-field>