feat: Add tag description in Field in the Feast UI (feast-dev#3258)

benjamintanweihao · web-flow · commit 086f2790236b · 2022-09-28T07:36:34.000-07:00
Signed-off-by: Benjamin Tan &lt;benjamin.tan@tech.jago.com&gt;

Signed-off-by: Benjamin Tan &lt;benjamin.tan@tech.jago.com&gt;
Co-authored-by: Benjamin Tan &lt;benjamin.tan@tech.jago.com&gt;
diff --git 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>
