Skip to content

Commit 4cefe05

Browse files
Georgi2704Georgi2704
authored
Fix layout issue with workflows on subscription detail page (#1878)
* Fix layout issue with workflows on subscription detail page * linted * Change to Link
1 parent f388119 commit 4cefe05

File tree

4 files changed

+86
-92
lines changed

4 files changed

+86
-92
lines changed

‎.changeset/nervous-beds-type.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@orchestrator-ui/orchestrator-ui-components': patch
3+
---
4+
5+
1858 Fix layout issue with workflows on subscription detail page

‎packages/orchestrator-ui-components/src/components/WfoBadges/WfoProcessStatusBadge/WfoProcessStatusBadge.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { FC } from 'react';
22

3-
import { useOrchestratorTheme } from '../../../hooks';
4-
import { ProcessStatus } from '../../../types';
3+
import { useOrchestratorTheme } from '@/hooks';
4+
import { ProcessStatus } from '@/types';
5+
56
import { WfoBadge } from '../WfoBadge';
67

78
export type WfoProcessStatusBadgeProps = {

‎packages/orchestrator-ui-components/src/components/WfoSubscription/WfoProcessesTimeline.tsx‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import React from 'react';
22

33
import { useTranslations } from 'next-intl';
4+
import Link from 'next/link';
45

56
import {
67
EuiComment,
78
EuiCommentList,
89
EuiFlexGroup,
10+
EuiFlexItem,
911
EuiSpacer,
1012
EuiText,
1113
} from '@elastic/eui';
1214

13-
import { WfoLoading, WfoRadioDropdownOption } from '@/components';
14-
import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
15-
import { WfoRadioDropdown, sortProcessesByDate } from '@/components';
15+
import {
16+
PATH_TASKS,
17+
PATH_WORKFLOWS,
18+
WfoLoading,
19+
WfoRadioDropdown,
20+
WfoRadioDropdownOption,
21+
sortProcessesByDate,
22+
} from '@/components';
1623
import { useWithOrchestratorTheme } from '@/hooks';
1724
import { SortOrder, SubscriptionDetailProcess } from '@/types';
1825
import {
@@ -33,65 +40,63 @@ const WfoProcessCard = ({ subscriptionDetailProcess }: WfoProcessCardProps) => {
3340
const t = useTranslations('subscriptions.detail.processDetail');
3441
const {
3542
tableStyle,
36-
contentCellStyle,
37-
headerCellStyle,
38-
emptyCellStyle,
39-
lastContentCellStyle,
40-
lastHeaderCellStyle,
43+
labelCellStyle,
44+
cellGroupStyle,
45+
borderStyle,
46+
rowStyle,
4147
} = useWithOrchestratorTheme(getSubscriptionDetailStyles);
4248
const processUrl = subscriptionDetailProcess.isTask
4349
? PATH_TASKS
4450
: PATH_WORKFLOWS;
4551

52+
const rows = [
53+
{
54+
label: t('id'),
55+
content: (
56+
<Link
57+
href={`${processUrl}/${subscriptionDetailProcess.processId}`}
58+
>
59+
{subscriptionDetailProcess.processId}
60+
</Link>
61+
),
62+
},
63+
{
64+
label: t('status'),
65+
content: (
66+
<div>
67+
<WfoProcessStatusBadge
68+
processStatus={subscriptionDetailProcess.lastStatus}
69+
/>
70+
</div>
71+
),
72+
},
73+
{
74+
label: t('startedAt'),
75+
content: parseDateToLocaleDateTimeString(
76+
parseDate(subscriptionDetailProcess.startedAt),
77+
),
78+
},
79+
{
80+
label: t('startedBy'),
81+
content: subscriptionDetailProcess.createdBy,
82+
},
83+
];
84+
4685
return (
47-
<>
48-
<table css={tableStyle}>
49-
<tbody>
50-
<tr>
51-
<td css={emptyCellStyle}></td>
52-
<td css={headerCellStyle}>{t('id')}</td>
53-
<td css={contentCellStyle}>
54-
<a
55-
href={`${processUrl}/${subscriptionDetailProcess.processId}`}
56-
>
57-
{subscriptionDetailProcess.processId}
58-
</a>
59-
</td>
60-
<td css={emptyCellStyle}></td>
61-
</tr>
62-
<tr>
63-
<td css={emptyCellStyle}></td>
64-
<td css={headerCellStyle}>{t('status')}</td>
65-
<td css={contentCellStyle}>
66-
<WfoProcessStatusBadge
67-
processStatus={
68-
subscriptionDetailProcess.lastStatus
69-
}
70-
/>
71-
</td>
72-
<td css={emptyCellStyle}></td>
73-
</tr>
74-
<tr>
75-
<td css={emptyCellStyle}></td>
76-
<td css={headerCellStyle}>{t('startedAt')}</td>
77-
<td css={contentCellStyle}>
78-
{parseDateToLocaleDateTimeString(
79-
parseDate(subscriptionDetailProcess.startedAt),
80-
)}
81-
</td>
82-
<td css={emptyCellStyle}></td>
83-
</tr>
84-
<tr>
85-
<td css={emptyCellStyle}></td>
86-
<td css={lastHeaderCellStyle}>{t('startedBy')}</td>
87-
<td css={lastContentCellStyle}>
88-
{subscriptionDetailProcess.createdBy}
89-
</td>
90-
<td css={emptyCellStyle}></td>
91-
</tr>
92-
</tbody>
93-
</table>
94-
</>
86+
<div css={tableStyle}>
87+
{rows.map(({ label, content }, idx) => (
88+
<div key={idx} css={rowStyle}>
89+
<div className="border" css={borderStyle}>
90+
<EuiFlexGroup key={label} css={cellGroupStyle}>
91+
<EuiFlexItem css={labelCellStyle} grow={2}>
92+
{label}
93+
</EuiFlexItem>
94+
<EuiFlexItem grow={9}>{content}</EuiFlexItem>
95+
</EuiFlexGroup>
96+
</div>
97+
</div>
98+
))}
99+
</div>
95100
);
96101
};
97102

‎packages/orchestrator-ui-components/src/components/WfoSubscription/styles.ts‎

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,23 @@ import { WfoTheme } from '@/hooks';
55
export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
66
const productBlockTreeWidth = theme.base * 28;
77

8-
const contentCellStyle = css({
9-
padding: (theme.base / 4) * 3,
10-
borderBottom: theme.border.thin,
11-
borderBottomColor: theme.colors.lightShade,
8+
const labelCellStyle = css({
9+
marginLeft: theme.size.m,
10+
});
11+
12+
const cellGroupStyle = css({
13+
paddingBlock: theme.size.m,
1214
});
1315

14-
const headerCellStyle = css({
15-
...contentCellStyle,
16-
paddingLeft: 0,
17-
width: theme.base * 16,
18-
fontWeight: theme.font.weight.medium,
16+
const borderStyle = css({
17+
borderBottom: theme.border.thin,
1918
});
2019

21-
const emptyCellStyle = css({
22-
width: theme.base,
20+
const rowStyle = css({
21+
paddingInline: theme.size.m,
22+
'&:last-of-type .border': {
23+
borderBottom: 'none',
24+
},
2325
});
2426

2527
const tableStyle = css({
@@ -34,24 +36,6 @@ export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
3436
});
3537
const workflowTargetStyle = css({ fontWeight: theme.font.weight.bold });
3638

37-
const lastContentCellStyle = css([
38-
{
39-
...contentCellStyle,
40-
},
41-
{
42-
borderBottom: 0,
43-
},
44-
]);
45-
46-
const lastHeaderCellStyle = css([
47-
{
48-
...headerCellStyle,
49-
},
50-
{
51-
borderBottomWidth: 0,
52-
},
53-
]);
54-
5539
const inUseByRelationDetailsStyle = css({
5640
borderColor: theme.colors.lightShade,
5741
borderStyle: 'solid',
@@ -71,14 +55,13 @@ export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
7155
alignItems: 'flex-start',
7256
});
7357
return {
74-
contentCellStyle,
75-
headerCellStyle,
58+
rowStyle,
59+
labelCellStyle,
60+
cellGroupStyle,
61+
borderStyle,
7662
tableStyle,
7763
timeLineStyle,
7864
workflowTargetStyle,
79-
emptyCellStyle,
80-
lastContentCellStyle,
81-
lastHeaderCellStyle,
8265
inUseByRelationDetailsStyle,
8366
productBlockTreeWidth,
8467
customerDescriptionsCustomerNameStyle,

0 commit comments

Comments
 (0)