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 (opensearch-project#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.