Skip to content

Commit

Permalink
Changes Panel Titles to H2 and rearranges the details content to deta…
Browse files Browse the repository at this point in the history 
…ils panel (#918)

* fix name change bug and modify test to test behavior

Signed-off-by: Derek Ho <[email protected]>

* update fail backport

Signed-off-by: Derek Ho <[email protected]>

* change panel titles to h2 and rearrange

Signed-off-by: Derek Ho <[email protected]>

* remove unecessary imports

Signed-off-by: Derek Ho <[email protected]>

---------

Signed-off-by: Derek Ho <[email protected]>
  • Loading branch information
@derek-ho
derek-ho authored Aug 14, 2023
1 parent a0d6550 commit 29f6028
Show file tree
Hide file tree
Showing 7 changed files with 357 additions and 88 deletions.
301 changes: 281 additions & 20 deletions ...ponents/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
22 changes: 6 additions & 16 deletions ...mponents/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
6 changes: 4 additions & 2 deletions public/components/integrations/components/integration_assets_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 29f6028

Please sign in to comment.