From c6726c3faea6e1d84af16066f62a05f863205901 Mon Sep 17 00:00:00 2001
From: Benjamin Tan <benjamin.tan@tech.jago.com>
Date: Wed, 28 Sep 2022 11:44:07 +0800
Subject: [PATCH] feat: Add tag description in Field in the Feast UI

Signed-off-by: Benjamin Tan <benjamin.tan@tech.jago.com>
---
 ui/src/pages/features/FeatureOverviewTab.tsx | 21 ++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/features/FeatureOverviewTab.tsx b/ui/src/pages/features/FeatureOverviewTab.tsx
index 0a1c48509c..11a2a0ab6a 100644
--- a/ui/src/pages/features/FeatureOverviewTab.tsx
+++ b/ui/src/pages/features/FeatureOverviewTab.tsx
@@ -3,13 +3,16 @@ import {
   EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiTitle,
+  EuiSpacer,
   EuiPanel,
   EuiFlexItem,
+  EuiText,
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from "@elastic/eui";
 import EuiCustomLink from "../../components/EuiCustomLink";
+import TagsDisplay from "../../components/TagsDisplay";
 import React from "react";
 import { useParams } from "react-router-dom";
 import useLoadFeature from "./useLoadFeature";
@@ -53,14 +56,28 @@ const FeatureOverviewTab = () => {
 
                   <EuiDescriptionListTitle>FeatureView</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    <EuiCustomLink 
+                    <EuiCustomLink
                       href={`/p/${projectName}/feature-view/${FeatureViewName}`}
                       to={`/p/${projectName}/feature-view/${FeatureViewName}`}>
-                      {FeatureViewName} 
+                      {FeatureViewName}
                     </EuiCustomLink>
                   </EuiDescriptionListDescription>
                 </EuiDescriptionList>
               </EuiPanel>
+              <EuiSpacer size="m" />
+              <EuiPanel hasBorder={true} grow={false}>
+                <EuiTitle size="xs">
+                  <h3>Tags</h3>
+                </EuiTitle>
+                <EuiHorizontalRule margin="xs" />
+                {featureData?.tags ? (
+                  <TagsDisplay
+                    tags={featureData.tags}
+                  />
+                ) : (
+                  <EuiText>No Tags specified on this field.</EuiText>
+                )}
+              </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
         </React.Fragment>