feat: update ui component and use fallback (#254) (#256)

Signed-off-by: tygao <tygao@amazon.com>
opensearch-project · Sep 1, 2023 · c2daa30 · c2daa30
1 parent 9c7bcce
commit c2daa30
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 34 deletions.
diff --git 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
@@ -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>