Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix the issue with the deploy status error message
Browse files Browse the repository at this point in the history
ost-ptk committed Sep 16, 2024
1 parent 3dfdb5c commit ce34f4e
Showing 2 changed files with 42 additions and 33 deletions.
22 changes: 21 additions & 1 deletion src/apps/popup/pages/deploy-details/content.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import { DeployDetailsResult } from '@popup/pages/deploy-details/components/depl
import { getEntryPointName } from '@popup/pages/deploy-details/utils';

import {
AlignedFlexRow,
AlignedSpaceBetweenFlexRow,
BorderBottomPseudoElementProps,
ContentContainer,
@@ -24,6 +25,8 @@ import {
DeployStatus,
Hash,
HashVariant,
Status,
SvgIcon,
Tile,
Typography
} from '@libs/ui/components';
@@ -97,14 +100,31 @@ export const DeployDetailsPageContent = ({
status: singleDeploy.status,
errorMessage: singleDeploy.errorMessage
}}
placement="bottomLeft"
/>
</TitleContainer>
</ParagraphContainer>
<DeployDetailsAction deploy={singleDeploy} />
<DeployDetailsResult deploy={singleDeploy} />
<Tile style={{ marginTop: '16px' }}>
<RowsContainer marginLeftForSeparatorLine={16}>
{singleDeploy.errorMessage &&
singleDeploy.status === Status.Error && (
<RowContainer gap={SpacingSize.Medium}>
<Typography type="captionRegular" color="contentSecondary">
<Trans t={t}>Status</Trans>
</Typography>
<AlignedFlexRow gap={SpacingSize.Small}>
<SvgIcon
src="assets/icons/error.svg"
color="contentActionCritical"
size={20}
/>
<Typography type="captionRegular" wordBreak>
{singleDeploy.errorMessage}
</Typography>
</AlignedFlexRow>
</RowContainer>
)}
<RowContainer>
<Typography type="captionRegular" color="contentSecondary">
<Trans t={t}>Deploy hash</Trans>
53 changes: 21 additions & 32 deletions src/libs/ui/components/deploy-status/deploy-status.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

import { AlignedFlexRow, SpacingSize } from '@libs/layout';
import { Placement, SvgIcon, Tooltip, Typography } from '@libs/ui/components';
import { SvgIcon, Typography } from '@libs/ui/components';
import { ContentColor } from '@libs/ui/utils';

export enum Status {
@@ -69,7 +69,6 @@ export interface DeployStatusProps {
| null
| undefined;
textWithIcon?: boolean;
placement?: Placement;
}

const StatusContainer = styled(AlignedFlexRow)<{ status: Status }>(
@@ -83,8 +82,7 @@ const StatusContainer = styled(AlignedFlexRow)<{ status: Status }>(

export const DeployStatus = ({
deployResult,
textWithIcon,
placement = 'topRight'
textWithIcon
}: DeployStatusProps) => {
const { t } = useTranslation();

@@ -98,42 +96,33 @@ export const DeployStatus = ({
};

const status = getDeployStatus(deployResult);
const message = deployResult?.errorMessage;

if (textWithIcon) {
return (
<Tooltip
title={message}
placement={placement}
noWrap={!(message?.length! >= 29)}
>
<StatusContainer status={status} gap={SpacingSize.Small}>
<SvgIcon
src={StatusIcons[status]}
color={StatusColors[status] as ContentColor}
size={16}
/>
<Typography
type="captionMedium"
color={StatusColors[status] as ContentColor}
capitalize
>
{StatusLabel[status]}
</Typography>
</StatusContainer>
</Tooltip>
);
}

if (status === Status.Error || status === Status.Pending) {
return (
<Tooltip title={message} placement="bottomCenter">
<StatusContainer status={status} gap={SpacingSize.Small}>
<SvgIcon
src={StatusIcons[status]}
color={StatusColors[status] as ContentColor}
size={16}
/>
</Tooltip>
<Typography
type="captionMedium"
color={StatusColors[status] as ContentColor}
capitalize
>
{StatusLabel[status]}
</Typography>
</StatusContainer>
);
}

if (status === Status.Error || status === Status.Pending) {
return (
<SvgIcon
src={StatusIcons[status]}
color={StatusColors[status] as ContentColor}
size={16}
/>
);
}

0 comments on commit ce34f4e

Please sign in to comment.