From c26eeb6d410562edac93cf2b728f36c154783ff9 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 14 Aug 2023 12:29:57 -0400
Subject: [PATCH] Changes Panel Titles to H2 and rearranges the details content
 to details panel (#918) (#920)

* fix name change bug and modify test to test behavior



* update fail backport



* change panel titles to h2 and rearrange



* remove unecessary imports



---------


(cherry picked from commit 29f60284d2be949d703ce972d81764a49e9ac996)

Signed-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../integration_details.test.tsx.snap         | 301 ++++++++++++++++--
 .../integration_fields.test.tsx.snap          |  22 +-
 .../components/integration_assets_panel.tsx   |   6 +-
 .../components/integration_details_panel.tsx  |  61 +++-
 .../components/integration_fields_panel.tsx   |   6 +-
 .../components/integration_overview_panel.tsx |  41 ---
 .../integration_screenshots_panel.tsx         |   8 +-
 7 files changed, 357 insertions(+), 88 deletions(-)

diff --git a/public/components/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
index c54266f2a0..173627c5a3 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
@@ -8,35 +8,296 @@ exports[`Available Integration Table View Test Renders nginx integration table v
     className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     data-test-subj="nginx-details"
   >
-    <PanelTitle
-      title="Details"
-    >
-      <EuiText
-        size="m"
+    <EuiTitle>
+      <h2
+        className="euiTitle euiTitle--medium"
       >
-        <div
-          className="euiText euiText--medium"
-        >
-          <span
-            className="panel-title"
-          >
-            Details
-          </span>
-        </div>
-      </EuiText>
-    </PanelTitle>
+        Details
+      </h2>
+    </EuiTitle>
     <EuiSpacer>
       <div
         className="euiSpacer euiSpacer--l"
       />
     </EuiSpacer>
-    <EuiText>
+    <EuiFlexGroup>
       <div
-        className="euiText euiText--medium"
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        Nginx HTTP server collector
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
+              >
+                <h4>
+                  Version
+                </h4>
+              </div>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiText
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                1.0.1
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
+              >
+                <h4>
+                  Category
+                </h4>
+              </div>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiBadgeGroup>
+              <div
+                className="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
+              >
+                <span
+                  className="euiBadgeGroup__item"
+                  key=".0"
+                >
+                  <EuiBadge>
+                    <EuiInnerText>
+                      <span
+                        className="euiBadge euiBadge--iconLeft"
+                        style={
+                          Object {
+                            "backgroundColor": "#d3dae6",
+                            "color": "#000",
+                          }
+                        }
+                        title="communication"
+                      >
+                        <span
+                          className="euiBadge__content"
+                        >
+                          <span
+                            className="euiBadge__text"
+                          >
+                            communication
+                          </span>
+                        </span>
+                      </span>
+                    </EuiInnerText>
+                  </EuiBadge>
+                </span>
+                <span
+                  className="euiBadgeGroup__item"
+                  key=".1"
+                >
+                  <EuiBadge>
+                    <EuiInnerText>
+                      <span
+                        className="euiBadge euiBadge--iconLeft"
+                        style={
+                          Object {
+                            "backgroundColor": "#d3dae6",
+                            "color": "#000",
+                          }
+                        }
+                        title="http"
+                      >
+                        <span
+                          className="euiBadge__content"
+                        >
+                          <span
+                            className="euiBadge__text"
+                          >
+                            http
+                          </span>
+                        </span>
+                      </span>
+                    </EuiInnerText>
+                  </EuiBadge>
+                </span>
+                <span
+                  className="euiBadgeGroup__item"
+                  key=".2"
+                >
+                  <EuiBadge>
+                    <EuiInnerText>
+                      <span
+                        className="euiBadge euiBadge--iconLeft"
+                        style={
+                          Object {
+                            "backgroundColor": "#d3dae6",
+                            "color": "#000",
+                          }
+                        }
+                        title="logs"
+                      >
+                        <span
+                          className="euiBadge__content"
+                        >
+                          <span
+                            className="euiBadge__text"
+                          >
+                            logs
+                          </span>
+                        </span>
+                      </span>
+                    </EuiInnerText>
+                  </EuiBadge>
+                </span>
+              </div>
+            </EuiBadgeGroup>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
+              >
+                <h4>
+                  Contributer
+                </h4>
+              </div>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiLink
+              external={true}
+              href="https://github.com/"
+              target="blank"
+            >
+              <a
+                className="euiLink euiLink--primary"
+                href="https://github.com/"
+                rel="noreferrer"
+                target="blank"
+              >
+                John Doe
+                <EuiIcon
+                  aria-label="External link"
+                  className="euiLink__externalIcon"
+                  size="s"
+                  type="popout"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    aria-label="External link"
+                    className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-label="External link"
+                      className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+              </a>
+            </EuiLink>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
+              >
+                <h4>
+                  License
+                </h4>
+              </div>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiText
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                Apache-2.0
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiFlexItem>
+      <div
+        className="euiFlexItem"
+      >
+        <EuiText>
+          <div
+            className="euiText euiText--medium"
+          >
+            <h4>
+              Description
+            </h4>
+          </div>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        >
+          <div
+            className="euiSpacer euiSpacer--m"
+          />
+        </EuiSpacer>
+        <EuiText
+          size="m"
+        >
+          <div
+            className="euiText euiText--medium"
+          >
+            Nginx HTTP server collector
+          </div>
+        </EuiText>
       </div>
-    </EuiText>
+    </EuiFlexItem>
   </div>
 </EuiPanel>
 `;
diff --git a/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap
index f54fb131cd..77fb9d7a07 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap
@@ -8,23 +8,13 @@ exports[`Available Integration Table View Test Renders nginx integration table v
     className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     data-test-subj="nginx-fields"
   >
-    <PanelTitle
-      title="Fields"
-    >
-      <EuiText
-        size="m"
+    <EuiTitle>
+      <h2
+        className="euiTitle euiTitle--medium"
       >
-        <div
-          className="euiText euiText--medium"
-        >
-          <span
-            className="panel-title"
-          >
-            Fields
-          </span>
-        </div>
-      </EuiText>
-    </PanelTitle>
+        Fields
+      </h2>
+    </EuiTitle>
     <EuiSpacer
       size="l"
     >
diff --git a/public/components/integrations/components/integration_assets_panel.tsx b/public/components/integrations/components/integration_assets_panel.tsx
index 7918f2b185..4a2911d577 100644
--- a/public/components/integrations/components/integration_assets_panel.tsx
+++ b/public/components/integrations/components/integration_assets_panel.tsx
@@ -9,10 +9,10 @@ import {
   EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 import _ from 'lodash';
-import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
 import { ASSET_FILTER_OPTIONS } from '../../../../common/constants/integrations';
 
 export function IntegrationAssets(props: any) {
@@ -76,7 +76,9 @@ export function IntegrationAssets(props: any) {
 
   return (
     <EuiPanel data-test-subj={`${config.name}-assets`}>
-      <PanelTitle title={'Assets'} />
+      <EuiTitle>
+        <h2>Assets</h2>
+      </EuiTitle>
       <EuiSpacer size="l" />
       <EuiInMemoryTable
         itemId="id"
diff --git a/public/components/integrations/components/integration_details_panel.tsx b/public/components/integrations/components/integration_details_panel.tsx
index 64c7f4533d..0f116a8a21 100644
--- a/public/components/integrations/components/integration_details_panel.tsx
+++ b/public/components/integrations/components/integration_details_panel.tsx
@@ -3,9 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiBadgeGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import React from 'react';
-import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
 
 export function IntegrationDetails(props: any) {
   const config = props.integration;
@@ -16,9 +25,53 @@ export function IntegrationDetails(props: any) {
 
   return (
     <EuiPanel data-test-subj={`${config.name}-details`}>
-      <PanelTitle title={'Details'} />
+      <EuiTitle>
+        <h2>Details</h2>
+      </EuiTitle>
       <EuiSpacer />
-      <EuiText>{config.description}</EuiText>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiText>
+            <h4>Version</h4>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiText size="m">{config.version}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText>
+            <h4>Category</h4>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiBadgeGroup>
+            {config.components.map((cateogry) => {
+              return <EuiBadge>{cateogry.name}</EuiBadge>;
+            })}
+          </EuiBadgeGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText>
+            <h4>Contributer</h4>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiLink href={config.sourceUrl} external={true} target="blank">
+            {config.author}
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText>
+            <h4>License</h4>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiText size="m">{config.license}</EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiText>
+          <h4>Description</h4>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiText size="m">{config.description}</EuiText>
+      </EuiFlexItem>
     </EuiPanel>
   );
 }
diff --git a/public/components/integrations/components/integration_fields_panel.tsx b/public/components/integrations/components/integration_fields_panel.tsx
index 36fe8b4e1c..77b743e0b5 100644
--- a/public/components/integrations/components/integration_fields_panel.tsx
+++ b/public/components/integrations/components/integration_fields_panel.tsx
@@ -9,10 +9,10 @@ import {
   EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 import _ from 'lodash';
-import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
 
 export function IntegrationFields(props: any) {
   const config = props.integration;
@@ -93,7 +93,9 @@ export function IntegrationFields(props: any) {
 
   return (
     <EuiPanel data-test-subj={`${config.name}-fields`}>
-      <PanelTitle title={'Fields'} />
+      <EuiTitle>
+        <h2>Fields</h2>
+      </EuiTitle>
       <EuiSpacer size="l" />
       <EuiInMemoryTable
         itemId="id"
diff --git a/public/components/integrations/components/integration_overview_panel.tsx b/public/components/integrations/components/integration_overview_panel.tsx
index 260357e37e..8c6cb5d798 100644
--- a/public/components/integrations/components/integration_overview_panel.tsx
+++ b/public/components/integrations/components/integration_overview_panel.tsx
@@ -6,16 +6,12 @@
 import {
   EuiButton,
   EuiFlexGroup,
-  EuiLink,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiSpacer,
   EuiTitle,
   EuiFlexItem,
-  EuiText,
   EuiPageContentHeaderSection,
-  EuiBadge,
-  EuiBadgeGroup,
 } from '@elastic/eui';
 import React from 'react';
 
@@ -69,43 +65,6 @@ export function IntegrationOverview(props: any) {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPageContentHeaderSection>
-        <EuiSpacer />
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>Version</h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiText size="m">{config.version}</EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>Category</h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiBadgeGroup>
-              {config.components.map((cateogry) => {
-                return <EuiBadge>{cateogry.name}</EuiBadge>;
-              })}
-            </EuiBadgeGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>Contributer</h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiLink href={config.sourceUrl} external={true} target="blank">
-              {config.author}
-            </EuiLink>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>License</h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiText size="m">{config.license}</EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
       </EuiPageHeaderSection>
     </EuiPageHeader>
   );
diff --git a/public/components/integrations/components/integration_screenshots_panel.tsx b/public/components/integrations/components/integration_screenshots_panel.tsx
index d05f38ca5e..93866383f3 100644
--- a/public/components/integrations/components/integration_screenshots_panel.tsx
+++ b/public/components/integrations/components/integration_screenshots_panel.tsx
@@ -3,9 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiPanel, EuiFlexItem, EuiImage } from '@elastic/eui';
+import { EuiFlexGroup, EuiPanel, EuiFlexItem, EuiImage, EuiTitle, EuiSpacer } from '@elastic/eui';
 import React from 'react';
-import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 
 export function IntegrationScreenshots(props: any) {
@@ -18,7 +17,10 @@ export function IntegrationScreenshots(props: any) {
 
   return (
     <EuiPanel data-test-subj={`${config.name}-screenshots`}>
-      <PanelTitle title={'Screenshots'} />
+      <EuiTitle>
+        <h2>Screenshots</h2>
+      </EuiTitle>
+      <EuiSpacer />
       <EuiFlexGroup gutterSize="l" alignItems="flexStart">
         {screenshots?.map((screenshot: { path: string; annotation?: string }) => {
           return (