From dd90c9e0caddf9bc0a9a203520b676c5ffa06c14 Mon Sep 17 00:00:00 2001 From: Duong Pham Date: Tue, 5 May 2020 18:26:56 +0700 Subject: [PATCH] feat: #1123 render renderHTML for diff compare of approval modal Changes - Add diff viewer for RenderHTML component --- .../src/tests/badges/badge-branches.svg | 2 +- .../src/tests/badges/badge-functions.svg | 2 +- .../src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- .../__tests__/__snapshots__/index.tsx.snap | 4 +- .../src/components/HtmlRender/index.tsx | 5 +- .../src/tests/badges/badge-branches.svg | 2 +- .../src/tests/badges/badge-functions.svg | 2 +- .../elements/src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- .../__snapshots__/diff-render-html.tsx.snap | 17 ++++ .../ui/__tests__/diff-render-html.tsx | 18 ++++ .../app-revision-comparision.tsx.snap | 3 +- .../app-revision-comparision.tsx | 93 ++++++++++--------- .../src/components/ui/diff-render-html.tsx | 22 +++++ .../src/styles/blocks/diff-render-html.scss | 29 ++++++ .../src/tests/badges/badge-branches.svg | 2 +- .../src/tests/badges/badge-functions.svg | 2 +- .../src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- 20 files changed, 152 insertions(+), 63 deletions(-) create mode 100644 packages/marketplace/src/components/ui/__tests__/__snapshots__/diff-render-html.tsx.snap create mode 100644 packages/marketplace/src/components/ui/__tests__/diff-render-html.tsx create mode 100644 packages/marketplace/src/components/ui/diff-render-html.tsx create mode 100644 packages/marketplace/src/styles/blocks/diff-render-html.scss diff --git a/packages/cognito-auth/src/tests/badges/badge-branches.svg b/packages/cognito-auth/src/tests/badges/badge-branches.svg index b90e84a9d3..12eba5ffec 100644 --- a/packages/cognito-auth/src/tests/badges/badge-branches.svg +++ b/packages/cognito-auth/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - Coverage:branchesCoverage:branches80%80% \ No newline at end of file +Coverage:branchesCoverage:branches80%80% \ No newline at end of file diff --git a/packages/cognito-auth/src/tests/badges/badge-functions.svg b/packages/cognito-auth/src/tests/badges/badge-functions.svg index a77ddff656..b8555f62e1 100644 --- a/packages/cognito-auth/src/tests/badges/badge-functions.svg +++ b/packages/cognito-auth/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - Coverage:functionsCoverage:functions93.55%93.55% \ No newline at end of file +Coverage:functionsCoverage:functions93.55%93.55% \ No newline at end of file diff --git a/packages/cognito-auth/src/tests/badges/badge-lines.svg b/packages/cognito-auth/src/tests/badges/badge-lines.svg index 6c7e916f3c..809ca2829b 100644 --- a/packages/cognito-auth/src/tests/badges/badge-lines.svg +++ b/packages/cognito-auth/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - Coverage:linesCoverage:lines95.63%95.63% \ No newline at end of file +Coverage:linesCoverage:lines95.63%95.63% \ No newline at end of file diff --git a/packages/cognito-auth/src/tests/badges/badge-statements.svg b/packages/cognito-auth/src/tests/badges/badge-statements.svg index 30caec7589..2c3c91c6ee 100644 --- a/packages/cognito-auth/src/tests/badges/badge-statements.svg +++ b/packages/cognito-auth/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - Coverage:statementsCoverage:statements95.65%95.65% \ No newline at end of file +Coverage:statementsCoverage:statements95.65%95.65% \ No newline at end of file diff --git a/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap index a552cc47f0..93b8f29a4e 100644 --- a/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap +++ b/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`HTMLRender should render match to snapshot 1`] = ` - +
= ({ html, diffing = false }: HTMLRenderProps) => { +export const HTMLRender: React.SFC = ({ html, diffing = false, className = '' }: HTMLRenderProps) => { const jsonElements = parse(html) - return {renderer(jsonElements, diffing)} + return {renderer(jsonElements, diffing)} } diff --git a/packages/elements/src/tests/badges/badge-branches.svg b/packages/elements/src/tests/badges/badge-branches.svg index c05a3a0333..2543fba446 100644 --- a/packages/elements/src/tests/badges/badge-branches.svg +++ b/packages/elements/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - Coverage:branchesCoverage:branches77.03%77.03% \ No newline at end of file +Coverage:branchesCoverage:branches77.03%77.03% \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-functions.svg b/packages/elements/src/tests/badges/badge-functions.svg index 018416f693..457f8335f9 100644 --- a/packages/elements/src/tests/badges/badge-functions.svg +++ b/packages/elements/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - Coverage:functionsCoverage:functions95.11%95.11% \ No newline at end of file +Coverage:functionsCoverage:functions95.22%95.22% \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-lines.svg b/packages/elements/src/tests/badges/badge-lines.svg index b421799956..7bfdb6a093 100644 --- a/packages/elements/src/tests/badges/badge-lines.svg +++ b/packages/elements/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - Coverage:linesCoverage:lines96.52%96.52% \ No newline at end of file +Coverage:linesCoverage:lines96.57%96.57% \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-statements.svg b/packages/elements/src/tests/badges/badge-statements.svg index a943a5adc9..56a88c8121 100644 --- a/packages/elements/src/tests/badges/badge-statements.svg +++ b/packages/elements/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - Coverage:statementsCoverage:statements96.37%96.37% \ No newline at end of file +Coverage:statementsCoverage:statements96.42%96.42% \ No newline at end of file diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/diff-render-html.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/diff-render-html.tsx.snap new file mode 100644 index 0000000000..a10279a531 --- /dev/null +++ b/packages/marketplace/src/components/ui/__tests__/__snapshots__/diff-render-html.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DiffRenderHTML should match a snapshot 1`] = ` +
+ + + → + + +
+`; diff --git a/packages/marketplace/src/components/ui/__tests__/diff-render-html.tsx b/packages/marketplace/src/components/ui/__tests__/diff-render-html.tsx new file mode 100644 index 0000000000..d7c55a5c29 --- /dev/null +++ b/packages/marketplace/src/components/ui/__tests__/diff-render-html.tsx @@ -0,0 +1,18 @@ +import * as React from 'react' +import { shallow } from 'enzyme' +import DiffRenderHTML, { DiffRenderHTMLProps } from '../diff-render-html' + +const props: DiffRenderHTMLProps = { + currentString: 'abc', + changedString: 'axxxxxxxxxxxbc', +} + +describe('DiffRenderHTML', () => { + it('should match a snapshot', () => { + expect(shallow()).toMatchSnapshot() + }) + + afterEach(() => { + jest.resetAllMocks() + }) +}) diff --git a/packages/marketplace/src/components/ui/app-revision-comparision/__tests__/__snapshots__/app-revision-comparision.tsx.snap b/packages/marketplace/src/components/ui/app-revision-comparision/__tests__/__snapshots__/app-revision-comparision.tsx.snap index f96dbe2260..0bfe86a801 100644 --- a/packages/marketplace/src/components/ui/app-revision-comparision/__tests__/__snapshots__/app-revision-comparision.tsx.snap +++ b/packages/marketplace/src/components/ui/app-revision-comparision/__tests__/__snapshots__/app-revision-comparision.tsx.snap @@ -117,7 +117,7 @@ exports[`AdminRevisionModalInner should match a snapshot 1`] = ` > Description -
{ + if (key === 'category') { + return ( + + ) + } + if (key === 'description') { + return + } + if (key === 'desktopIntegrationTypeIds') { + const oldIntegrationTypeArray = mapIntegrationIdArrayToNameArray( + app.desktopIntegrationTypeIds, + desktopIntegrationTypes.data, + ) + const newIntegrationTypeArray = mapIntegrationIdArrayToNameArray( + revision.desktopIntegrationTypeIds, + desktopIntegrationTypes.data, + ) + const sortedOldArray = [...oldIntegrationTypeArray].sort() + const sortedNewArray = [...newIntegrationTypeArray].sort() + return ( + + ) + } + if (['redirectUris', 'signoutUris', 'limitToClientIds', 'desktopIntegrationTypeIds'].includes(key)) { + const currentString = Array.isArray(app[key]) ? app[key].join(' ') : '' + const changedString = Array.isArray(revision[key]) ? revision[key].join(' ') : '' + return + } + return +} + export const AppRevisionComparision: React.FC = ({ revisionDetailState, appDetailState, @@ -125,54 +170,10 @@ export const AppRevisionComparision: React.FC = ({ return (
{Object.keys(diffStringList).map(key => { - if (key === 'category') { - return ( -
-

{diffStringList[key]}

- -
- ) - } - if (key === 'desktopIntegrationTypeIds') { - const oldIntegrationTypeArray = mapIntegrationIdArrayToNameArray( - app.desktopIntegrationTypeIds, - desktopIntegrationTypes.data, - ) - const newIntegrationTypeArray = mapIntegrationIdArrayToNameArray( - revision.desktopIntegrationTypeIds, - desktopIntegrationTypes.data, - ) - const sortedOldArray = [...oldIntegrationTypeArray].sort() - const sortedNewArray = [...newIntegrationTypeArray].sort() - return ( -
-

{diffStringList[key]}

- -
- ) - } - if (['redirectUris', 'signoutUris', 'limitToClientIds', 'desktopIntegrationTypeIds'].includes(key)) { - const currentString = Array.isArray(app[key]) ? app[key].join(' ') : '' - const changedString = Array.isArray(revision[key]) ? revision[key].join(' ') : '' - return ( -
-

{diffStringList[key]}

- -
- ) - } return (

{diffStringList[key]}

- + {renderDiffContent({ key, app, desktopIntegrationTypes, revision })}
) })} diff --git a/packages/marketplace/src/components/ui/diff-render-html.tsx b/packages/marketplace/src/components/ui/diff-render-html.tsx new file mode 100644 index 0000000000..4c21ea15dc --- /dev/null +++ b/packages/marketplace/src/components/ui/diff-render-html.tsx @@ -0,0 +1,22 @@ +import * as React from 'react' +import styles from '@/styles/blocks/diff-render-html.scss?mod' +import { HTMLRender } from '@reapit/elements' + +export interface DiffRenderHTMLProps { + currentString?: string + changedString?: string +} + +const DiffRenderHTML = ({ currentString, changedString }: DiffRenderHTMLProps) => { + console.log(currentString, changedString) + const isDiff = currentString !== changedString + return ( +
+ + → + +
+ ) +} + +export default DiffRenderHTML diff --git a/packages/marketplace/src/styles/blocks/diff-render-html.scss b/packages/marketplace/src/styles/blocks/diff-render-html.scss new file mode 100644 index 0000000000..eb45616e32 --- /dev/null +++ b/packages/marketplace/src/styles/blocks/diff-render-html.scss @@ -0,0 +1,29 @@ +@import '../base/colors'; + +.container { + background-color: $grey-lightest; + border: 1px solid $grey-lighter; + border-radius: 3px; + padding: 10px; + color: $black; + display: flex; + align-items: center; +} + +.green { + background-color: $green-lighter; +} + +.red { + background-color: $red-lighter; +} + +.arrow { + font-size: 18px; + color: $grey; +} + +.block { + border-radius: 4px; + width: 50%; +} diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg index 33020b7f25..2daf36d476 100644 --- a/packages/marketplace/src/tests/badges/badge-branches.svg +++ b/packages/marketplace/src/tests/badges/badge-branches.svg @@ -1 +1 @@ -Coverage:branchesCoverage:branches69.96%69.96% \ No newline at end of file +Coverage:branchesCoverage:branches69.85%69.85% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg index e690575f64..4d1ca9d5b1 100644 --- a/packages/marketplace/src/tests/badges/badge-functions.svg +++ b/packages/marketplace/src/tests/badges/badge-functions.svg @@ -1 +1 @@ -Coverage:functionsCoverage:functions73.57%73.57% \ No newline at end of file +Coverage:functionsCoverage:functions73.37%73.37% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg index ebbeb33438..d9ccc04bfd 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:linesCoverage:lines89.81%89.81% \ No newline at end of file +Coverage:linesCoverage:lines89.82%89.82% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg index a2a67703d8..1c6270c33a 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statementsCoverage:statements88.95%88.95% +Coverage:statementsCoverage:statements88.93%88.93% \ No newline at end of file