Skip to content

Commit

Permalink
Add 'check for version' link in the integration details page (#1879)
Browse files Browse the repository at this point in the history 
Signed-off-by: Simeon Widdis <[email protected]>
  • Loading branch information
@Swiddis
Swiddis authored Jun 7, 2024
1 parent 19d68b2 commit becfa02
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 51 deletions.
111 changes: 71 additions & 40 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 @@ -37,22 +37,81 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</h4>
</div>
</EuiText>
<EuiSpacer
size="m"
<EuiFlexGroup
direction="column"
>
<div
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
1.0.1
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiFlexGroup
alignItems="flexEnd"
justifyContent="spaceBetween"
responsive={false}
>
<div
className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
>
1.0.1
</div>
</EuiText>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiText
size="xs"
>
<div
className="euiText euiText--extraSmall"
>
<EuiLink
href="https://github.com/opensearch-project/opensearch-catalog/releases"
>
<a
className="euiLink euiLink--primary"
href="https://github.com/opensearch-project/opensearch-catalog/releases"
rel="noreferrer"
>
Check for new versions
</a>
</EuiLink>
</div>
</EuiText>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</div>
</EuiFlexItem>
<EuiFlexItem>
<div
className="euiFlexItem"
/>
</EuiFlexItem>
</div>
</EuiText>
</EuiFlexGroup>
</div>
</EuiFlexItem>
<EuiFlexItem>
Expand All @@ -68,13 +127,6 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</h4>
</div>
</EuiText>
<EuiSpacer
size="m"
>
<div
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiBadgeGroup>
<div
className="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
Expand All @@ -95,13 +147,6 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</h4>
</div>
</EuiText>
<EuiSpacer
size="m"
>
<div
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiLink
external={true}
href="https://github.com/"
Expand Down Expand Up @@ -163,13 +208,6 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</h4>
</div>
</EuiText>
<EuiSpacer
size="m"
>
<div
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiText
size="m"
>
Expand All @@ -196,13 +234,6 @@ exports[`Available Integration Table View Test Renders nginx integration table v
</h4>
</div>
</EuiText>
<EuiSpacer
size="m"
>
<div
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiText
size="m"
>
Expand Down
39 changes: 28 additions & 11 deletions public/components/integrations/components/integration_details_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,8 @@ import {
} from '@elastic/eui';
import React from 'react';

export function IntegrationDetails(props: any) {
export function IntegrationDetails(props: { integration: IntegrationConfig }) {
const config = props.integration;
let screenshots;
if (config.statics.gallery) {
screenshots = config.statics.gallery;
}

return (
<EuiPanel data-test-subj={`${config.name}-details`}>
Expand All @@ -34,14 +30,38 @@ export function IntegrationDetails(props: any) {
<EuiText>
<h4>Version</h4>
</EuiText>
<EuiSpacer size="m" />
<EuiText size="m">{config.version}</EuiText>
{/*
For the link, we have the slightly odd constraint to have it go to the end of the version
space while being horizontally next to the version (i.e. no direct EuiText). It should be
smaller, while aligning to the bottom of the line, but not the bottom of the entire flex
area, for a nice subscript effect.
The end result is a bit of flex magic: make two vertical boxes with the second one empty
and growing, then in the top one put two horizontal boxes with space-between, aligning to
the bottom.
*/}
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" responsive={false}>
<EuiFlexItem grow={false}>
<EuiText size="m">{config.version}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs">
<EuiLink href="https://github.com/opensearch-project/opensearch-catalog/releases">
Check for new versions
</EuiLink>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<h4>Category</h4>
</EuiText>
<EuiSpacer size="m" />
<EuiBadgeGroup>
{config.labels?.map((label: string) => {
return <EuiBadge>{label}</EuiBadge>;
Expand All @@ -52,7 +72,6 @@ export function IntegrationDetails(props: any) {
<EuiText>
<h4>Contributer</h4>
</EuiText>
<EuiSpacer size="m" />
<EuiLink href={config.sourceUrl} external={true} target="blank">
{config.author}
</EuiLink>
Expand All @@ -61,15 +80,13 @@ export function IntegrationDetails(props: any) {
<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>
Expand Down

0 comments on commit becfa02

Please sign in to comment.