Skip to content

Commit

Permalink
merge latest ui changes (#13)
Browse files Browse the repository at this point in the history
* tooltip & width change (#7)

Co-authored-by: Leon <>

* Ui/group-changes-by-change-type (#8)

map changes

Co-authored-by: Leon <>

* ui/ performance optimization (#9)

* avoid unnecessery renderes

* removed redundant code

* added category change header

* cleaned redeundant

* pr comments

* put color

Co-authored-by: Leon <>

* ui/ restore collapse button (#12)

* avoid unnecessery renderes

* removed redundant code

* recover lost change type header

* added category change header

* cleaned redeundant

* pr comments

* put color

* split accordions state to  2 atoms

* atom rename

* spaces removed

* fix bad setState

* reverst change

* rel changed

* pr comments

Co-authored-by: Leon <>

Co-authored-by: Gustavo Massaneiro <[email protected]>
  • Loading branch information
leon-up9 and gustavomassa authored Jun 12, 2022
1 parent fb8bf54 commit 99fde1f
Show file tree
Hide file tree
Showing 17 changed files with 1,362 additions and 1,249 deletions.
2 changes: 1 addition & 1 deletion ui/craco.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,4 @@ module.exports = {
return webpackConfig
}
},
}
}
2,208 changes: 1,102 additions & 1,106 deletions ui/package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-lowlight": "^3.0.0",
"recoil": "^0.7.3",
"sass": "^1.51.0",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"
Expand Down
15 changes: 11 additions & 4 deletions ui/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@
<head>
<base href="/">
<meta charset="utf-8" />
<link rel="icon" href="https://static.up9.com/icons/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Oas diff" />
<link rel="apple-touch-icon" href="https://static.up9.com/icons/favicon.svg" />
<link href='https://fonts.googleapis.com/css?family=Source Sans Pro' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link href='https://fonts.googleapis.com/css?family=Source Sans Pro' rel="stylesheet preload prefetch" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro&display=swap" media="print"
onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro&display=swap" />
</noscript>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand All @@ -23,7 +28,8 @@
</head>
<script>
try {
window["reportData"] = {"data" : {{.PathChangelogList }}, "status": {{.Status}}}
window["reportData"] = { "data": {{.PathChangelogList }
}, "status": { {.Status } }}
} catch (error) {
console.log(error)
}
Expand All @@ -43,6 +49,7 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<link rel="icon" href="https://static.up9.com/icons/favicon.svg" />
</body>

</html>
</html>
18 changes: 5 additions & 13 deletions ui/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,24 @@
import './App.sass';
import { StatusData } from './components/StatusData/StatusData';
import { ChangeLog } from './components/ChangeLog/ChangeLog';
import { PathList } from './components/PathList/PathList';
import PathList from './components/PathList/PathList';
import { dataService } from './DataService';
import { useState } from 'react';
import { CollapsedContext, IAccordion } from './CollapsedContext';
import { Header } from './components/Header/Header';
import { RecoilRoot } from 'recoil';

const status = dataService.getStatus()
const changeLog = dataService.getData()
const totalChanges = dataService.getTotalChanged()

const App = () => {
const [accordions, setAccordions] = useState([] as IAccordion[])
const setCollapseAll = () => {
setAccordions((prev) => {
return prev.map(x => { return { ...x, isCollpased: true } })
})
}

return (
<div className="App">
<Header dateGenerated={status?.startTime} />
<StatusData baseFile={status?.baseFile} secondFile={status?.secondFile} executionTime={status?.executionTime} totalPathChanges={totalChanges} flags={Object.keys(status?.executionFlags ?? {}).length} />
<ChangeLog onCollapseAll={setCollapseAll} />
<CollapsedContext.Provider value={{ accordions: accordions, setAccordions: setAccordions }}>
<RecoilRoot>
<ChangeLog />
<PathList changeList={changeLog} />
</CollapsedContext.Provider>
</RecoilRoot>
</div >
);
}
Expand Down
16 changes: 12 additions & 4 deletions ui/src/components/ChangeLog/ChangeLog.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import './ChangeLog.sass';
import { CollapseButton } from '../../useCommonStyles';
import { useSetRecoilState } from 'recoil';
import { mainAccordionsList } from '../../recoil/collapse/';

export interface Props {
onCollapseAll: () => void
}

export const ChangeLog: React.FC<Props> = ({ onCollapseAll }) => {
export const ChangeLog = () => {

const setAccordions = useSetRecoilState(mainAccordionsList)

const onCollapseAll = () => {
setAccordions((prev) => {
return prev.map(x => { return { ...x, isCollapsed: true } })
})
}

return (
<div className='chagnelogContainer'>
<div className="endpointChangelog">
Expand Down
92 changes: 92 additions & 0 deletions ui/src/components/PathList/PathDisplay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { Accordion, AccordionSummary, AccordionDetails } from "@mui/material"
import { Path } from "../../interfaces"
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SyntaxHighlighter from "../SyntaxHighlighter"
import { ChangeTypeEnum, infoClass } from "../../consts";
import { useState, useEffect, useCallback } from "react";
import { useRecoilValue } from "recoil";
import { subAccordionsList } from "../../recoil/collapse";

export interface PathDisplayProps {
path: Path
}

export const PathDisplay: React.FC<PathDisplayProps> = ({ path }) => {
const subAccordions = useRecoilValue(subAccordionsList);
const [isExpanded, setIsExpanded] = useState(false)

const getToTypeColor = (type: string) => {
switch (type) {
case ChangeTypeEnum.Created:
return ChangeTypeEnum.Created
case ChangeTypeEnum.Updated:
return ChangeTypeEnum.Created
case ChangeTypeEnum.Deleted:
return ChangeTypeEnum.Deleted
default:
return infoClass
}
}

const getFromTypeColor = (type: string) => {
switch (type) {
case ChangeTypeEnum.Created:
return ChangeTypeEnum.Created
case ChangeTypeEnum.Updated:
return ChangeTypeEnum.Deleted
case ChangeTypeEnum.Deleted:
return ChangeTypeEnum.Deleted
default:
return infoClass
}
}

useEffect(() => {
const isGloballyExpanded = !!subAccordions.find(x => x.id === JSON.stringify(path))?.isCollapsed
setIsExpanded(isGloballyExpanded)
}, [path, subAccordions])

const onAccordionClick = useCallback(() => {
setIsExpanded(!isExpanded)
}, [isExpanded])

return (<>
<Accordion expanded={isExpanded}>
<AccordionSummary
onClick={onAccordionClick}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content">
<div className="singleLine">
<span className={`operation ${path.operation}`}>{path.operation}</span>
<span className='pathName'>{path.changelog?.path?.join(" ")}</span>
</div>
</AccordionSummary>
<AccordionDetails>
{isExpanded && <><span>Path:</span>
{path.changelog?.path?.slice(1).map((path: string, index: number) =>
<div key={index} style={{ paddingLeft: `${(index + 1 * 0.4)}em` }}>{path}</div>)
}
<div style={{ marginTop: "10px" }} className="diffContainer">

{path?.changelog?.from && <div style={{ flex: 1, width: "100%" }}>
<div>From:</div>
<SyntaxHighlighter
code={JSON.stringify(path.changelog.from)}
language="json"
className={`${getFromTypeColor(path.changelog.type)}`}
/>
</div>}
{path?.changelog?.to && <div style={{ flex: 1, width: "100%" }}>
<div>To:</div>
<SyntaxHighlighter
code={JSON.stringify(path.changelog.to)}
language="json"
className={`${getToTypeColor(path.changelog.type)}`}
/>
</div>}
</div></>}

</AccordionDetails>
</Accordion>
</>)
}
53 changes: 33 additions & 20 deletions ui/src/components/PathList/PathList.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
import { FormControl, InputLabel, MenuItem, Select, TextField, SelectChangeEvent } from '@mui/material';
import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material';
import './PathList.sass';
import React, { useMemo, useState } from 'react';
import { PathListItem } from './PathListItem';
import React, { useMemo, useState, useEffect } from 'react';
import PathListItem from './PathListItem';
import { DataItem, Path } from '../../interfaces';
import { ChangeTypeEnum } from '../../consts';
import useDebounce from '../../hooks/useDebounce';
import { useSetRecoilState } from 'recoil';
import { mainAccordionsList } from '../../recoil/collapse';

export interface Props {
changeList: DataItem[]
}

export const PathList: React.FC<Props> = ({ changeList }) => {
const [type, setType] = useState('')
const [path, setPath] = useState('')
const PathList: React.FC<Props> = ({ changeList }) => {
const [typeFilter, setTypeFilter] = useState('')
const [pathFilter, setPathFilter] = useState('')
const debouncedSearchTerm = useDebounce(pathFilter, 200);
const setAccordions = useSetRecoilState(mainAccordionsList);
const onTypeChange = (event) => { setTypeFilter(event.target.value); }
const onPathChange = (event) => { setPathFilter(event.target.value); }

const onPathFilterChange = (setFunc: Function) => (event: SelectChangeEvent<string> | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => setFunc(event.target.value)
const filteredListItems = useMemo(() => {
let listAfterFilters = changeList?.filter((change: DataItem) => change?.key.toLowerCase().includes(debouncedSearchTerm.toLowerCase()))
if (typeFilter)
listAfterFilters = listAfterFilters?.filter((change: DataItem) => change?.value?.path.some((path: Path) => path.changelog.type === typeFilter))
return listAfterFilters
}, [changeList, debouncedSearchTerm, typeFilter])

const filteredChanges = useMemo(() => {
let relevantList = changeList
if (type)
relevantList = changeList?.filter((change: DataItem) => change?.value?.path.some((path: Path) => path.changelog.type === type))

return relevantList?.filter((change: DataItem) => change?.key.toLowerCase().includes(path.toLowerCase()))
}, [changeList, path, type])
useEffect(() => {
const accordions = changeList.map(change => {
return { isCollapsed: true, id: JSON.stringify(change) }
})
setAccordions(accordions)
}, [changeList, setAccordions])

return (
<div className='pathListContainer'>
Expand All @@ -31,15 +42,15 @@ export const PathList: React.FC<Props> = ({ changeList }) => {
</div>
<div className="filters">
<FormControl>
<TextField id="outlined-basic" label="Path" variant="outlined" size="small" value={path} onChange={onPathFilterChange(setPath)} />
<TextField id="outlined-basic" label="Path" variant="outlined" size="small" value={pathFilter} onChange={onPathChange} />
</FormControl>
<div className='seperatorLine'></div>
<FormControl size='small' sx={{ minWidth: 150 }} >
<InputLabel>Change Type</InputLabel>
<Select
label="Change Type"
value={type}
onChange={onPathFilterChange(setType)}
value={typeFilter}
onChange={onTypeChange}
sx={{
margin: "0px !important",
width: "250px"
Expand All @@ -53,11 +64,13 @@ export const PathList: React.FC<Props> = ({ changeList }) => {
</FormControl>
</div>
<div className='changeLogList'>
{filteredChanges?.map((change: DataItem, index: number) => <div key={"changeLogItem" + index} className='changeLogItem'>
<PathListItem changeLogItem={change} showChangeType={type} /></div>)
}
{filteredListItems?.map((change: DataItem, index: number) =>
<PathListItem key={index} changeLogItem={change} showChangeType={typeFilter} />
)}
</div>
</div>
</div>
)
}

export default React.memo(PathList)
6 changes: 5 additions & 1 deletion ui/src/components/PathList/PathListItem.sass
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
display: flex
flex-direction: column
align-items: flex-start
.singleLine
@include limitLineNumbers()

.pathPrefix
@extend .method
Expand All @@ -26,6 +28,8 @@
@include borderAndColor($get-color)
&.post
@include borderAndColor($post-color)
&.put
@include borderAndColor($post-color)
&.delete
@include borderAndColor($delete-color)

Expand All @@ -41,7 +45,7 @@
font-style: normal
font-weight: 600
font-size: 14px
margin-bottom: 20px
margin: 20px 0
text-transform: capitalize

.diffContainer
Expand Down
Loading

0 comments on commit 99fde1f

Please sign in to comment.