From 3cd2fabaea5ff3d007041ec590846d59cff19c24 Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Fri, 1 Sep 2023 08:57:17 +0800
Subject: [PATCH] feat: update ui component and use fallback (#254)

Signed-off-by: tygao <tygao@amazon.com>
---
 .../preview_panel/connector_details.tsx       | 26 ++++++-------------
 public/components/preview_panel/index.tsx     | 20 +++-----------
 2 files changed, 12 insertions(+), 34 deletions(-)

diff --git a/public/components/preview_panel/connector_details.tsx b/public/components/preview_panel/connector_details.tsx
index 0d48f881..fe699b32 100644
--- a/public/components/preview_panel/connector_details.tsx
+++ b/public/components/preview_panel/connector_details.tsx
@@ -24,22 +24,14 @@ export const ConnectorDetails = (props: { name?: string; id?: string; descriptio
         <h3>Connector details</h3>
       </EuiTitle>
       <EuiSpacer size="m" />
-      <EuiDescriptionList>
+      <EuiDescriptionList compressed>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiDescriptionListTitle>
-              <EuiTitle size="xxs">
-                <h5>Connector name</h5>
-              </EuiTitle>
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>{name}</EuiDescriptionListDescription>
+            <EuiDescriptionListTitle>Connector name</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{name ? name : '-'}</EuiDescriptionListDescription>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiDescriptionListTitle>
-              <EuiTitle size="xxs">
-                <h5>Connector ID</h5>
-              </EuiTitle>
-            </EuiDescriptionListTitle>
+            <EuiDescriptionListTitle>Connector ID</EuiDescriptionListTitle>
             <EuiDescriptionListDescription>
               {id ? (
                 <CopyableText text={id} iconLeft={false} tooltipText="Copy connector ID" />
@@ -50,12 +42,10 @@ export const ConnectorDetails = (props: { name?: string; id?: string; descriptio
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        <EuiDescriptionListTitle>
-          <EuiTitle size="xxs">
-            <h5>Connector description</h5>
-          </EuiTitle>
-        </EuiDescriptionListTitle>
-        <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>Connector description</EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          {description ? description : '-'}
+        </EuiDescriptionListDescription>
       </EuiDescriptionList>
     </>
   );
diff --git a/public/components/preview_panel/index.tsx b/public/components/preview_panel/index.tsx
index 406dda5e..e41e56c1 100644
--- a/public/components/preview_panel/index.tsx
+++ b/public/components/preview_panel/index.tsx
@@ -116,35 +116,23 @@ export const PreviewPanel = ({ onClose, model }: Props) => {
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiDescriptionList>
+        <EuiDescriptionList compressed>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiDescriptionListTitle>
-                <EuiTitle size="xxs">
-                  <h5>Status</h5>
-                </EuiTitle>
-              </EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>Status</EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
                 {respondingStatus.overall}
               </EuiDescriptionListDescription>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiDescriptionListTitle>
-                <EuiTitle size="xxs">
-                  <h5>Source</h5>
-                </EuiTitle>
-              </EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>Source</EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
                 {connector ? 'External' : 'Local'}
               </EuiDescriptionListDescription>
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer size="m" />
-          <EuiDescriptionListTitle>
-            <EuiTitle size="xxs">
-              <h5>Model ID</h5>
-            </EuiTitle>
-          </EuiDescriptionListTitle>
+          <EuiDescriptionListTitle>Model ID</EuiDescriptionListTitle>
           <EuiDescriptionListDescription>
             <CopyableText text={id} iconLeft={false} tooltipText="Copy model ID" />
           </EuiDescriptionListDescription>