groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(executions): display execution step id (#1232)

Browse Source 
* feat(executions): display execution step id

* refactor: remove conditional components in execution steps

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>
This commit is contained in:
Rıdvan Akca
2023-08-23 22:53:16 +03:00
committed by GitHub
parent fd184239d6
commit a909966562
4 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/web/src/components/ExecutionStep/index.tsx
View File

@@ -21,6 +21,7 @@ import {
AppIconStatusIconWrapper,
Content,
Header,
Metadata,
Wrapper,
} from './style';
@@ -31,6 +32,24 @@ type ExecutionStepProps = {
executionStep: IExecutionStep;
};
function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
const formatMessage = useFormatMessage();
const id = (
<Typography variant="caption" component="span">
{props.id}
</Typography>
);
return (
<Box sx={{ display: 'flex' }} gridArea="id">
<Typography variant="caption" fontWeight="bold">
{formatMessage('executionStep.id', { id })}
</Typography>
</Box>
);
}
function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
const formatMessage = useFormatMessage();
const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
@@ -76,30 +95,37 @@ export default function ExecutionStep(
return (
<Wrapper elevation={1} data-test="execution-step">
<Header>
<Stack direction="row" gap={2}>
<Stack direction="row" gap={3}>
<AppIconWrapper>
<AppIcon url={app?.iconUrl} name={app?.name} />
<AppIconStatusIconWrapper>
<AppIcon url={app?.iconUrl} name={app?.name} />
{validationStatusIcon}
</AppIconStatusIconWrapper>
</AppIconWrapper>
<Box flex="1">
<Typography variant="caption">
{isTrigger
? formatMessage('flowStep.triggerType')
: formatMessage('flowStep.actionType')}
</Typography>
<Metadata flex="1">
<ExecutionStepId id={executionStep.step.id} />
<Typography variant="body2">
{step.position}. {app?.name}
</Typography>
</Box>
<Box flex="1" gridArea="step">
<Typography variant="caption">
{isTrigger && formatMessage('flowStep.triggerType')}
{isAction && formatMessage('flowStep.actionType')}
</Typography>
<Box alignSelf="flex-end">
<ExecutionStepDate createdAt={executionStep.createdAt} />
</Box>
<Typography variant="body2">
{step.position}. {app?.name}
</Typography>
</Box>
<Box
display="flex"
justifyContent={["left", "right"]}
gridArea="date"
>
<ExecutionStepDate createdAt={executionStep.createdAt} />
</Box>
</Metadata>
</Stack>
</Header>