Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#292 | Service Check - Add diff on expected vs actual body #402

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+97 −23,259
Open

#292 | Service Check - Add diff on expected vs actual body #402

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0988b84
Added Split View on Expected and Recived Request body in Service Chec…
michal-gasiorek-wttech Jun 22, 2021
297f448
Added consts values and fixed styles
michal-gasiorek-wttech Jun 28, 2021
9873110
Moved constat values to constants file
michal-gasiorek-wttech Jun 28, 2021
0a73ed7
Added word break to prevent longer resposes to overflow the modal
michal-gasiorek-wttech Sep 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions cogboard-webapp/src/components/PopoverWithControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import React, { useState } from 'react';
import copy from 'copy-to-clipboard';
import { CaptionWithPointer, StyledPopoverText } from './styled';
import {
CaptionWithPointer,
StyledPopoverText,
StyledPopoverTextWrapper,
StyledPopoverHeader
} from './styled';
import { Button, Popover } from '@material-ui/core';

export const PopoverWithControls = ({
title,
titleHover,
body,
bodyMessage,
expectedResponseBody,
withCopy,
className
}) => {
Expand Down Expand Up @@ -39,7 +46,20 @@ export const PopoverWithControls = ({
>
{withCopy ? <Button onClick={copyBody}>Copy</Button> : null}
<Button onClick={handlePopoverClose}>Close</Button>
<StyledPopoverText>{body}</StyledPopoverText>
{bodyMessage === 'NO MATCH' ? (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can move 'NO MATCH' string to const

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 297f448

<StyledPopoverTextWrapper>
<StyledPopoverText>
<StyledPopoverHeader>EXPECTED RESPONSE BODY</StyledPopoverHeader>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just EXPECTED RESPONSE and ACTUAL RESPONSE

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah and please move this to const too

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 297f448

{expectedResponseBody}
</StyledPopoverText>
<StyledPopoverText>
<StyledPopoverHeader>RECIVED RESPONSE BODY</StyledPopoverHeader>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you wanted to write 'RECEIVED' here

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 297f448

{body}
</StyledPopoverText>
</StyledPopoverTextWrapper>
) : (
<StyledPopoverText>{body}</StyledPopoverText>
)}
</Popover>
</>
);
Expand Down
19 changes: 18 additions & 1 deletion cogboard-webapp/src/components/styled/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,29 @@ export const StyledFormControl = styled(FormControl)`
max-width: 300px;
`;

export const StyledPopoverText = styled(Typography)`
export const StyledPopoverText = styled('div')`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you create a styled component for html selector you can simply write

Suggested change
export const StyledPopoverText = styled('div')`
export const StyledPopoverText = styled.div`

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 297f448

background: ${COLORS.WHITE};
color: ${COLORS.BLACK};
padding: 1rem;
`;

export const StyledPopoverHeader = styled(Typography)`
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: bold;
color: ${COLORS.RED};
border-bottom: 2px ${COLORS.RED} solid;
`;

export const StyledPopoverTextWrapper = styled('div')`
display: flex;
justify-content: space-around;

& > * {
flex-basis: 50%;
}
`;

export const StyledTabs = styled(Tabs)`
margin-bottom: 12px;

Expand Down
2 changes: 2 additions & 0 deletions cogboard-webapp/src/components/widgets/types/ServiceCheckWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ const ServiceCheckWidget = ({
<PopoverWithControls
title={`Response: ${bodyMessage}`}
body={body}
bodyMessage={bodyMessage}
expectedResponseBody={expectedResponseBody}
withCopy={true}
/>
<WidgetButton href={url}>
Expand Down