From 3c8f63ed92c94a8be40a16f23ac13074320b92fc Mon Sep 17 00:00:00 2001 From: AmitUp9 <96980485+AmitUp9@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:14:31 +0200 Subject: [PATCH] Feature/UI/tra 4390 status bar banner demo env (#921) * no message * banner styling condition added and button text transform disabled * added prps to container * build fix --- ui-common/package-lock.json | 4 ++-- ui-common/package.json | 2 +- .../src/components/TrafficViewer/TrafficViewer.tsx | 11 ++++++----- ui-common/src/components/UI/StatusBar.tsx | 8 ++++++-- ui-common/src/components/UI/index.ts | 2 +- .../src/components/UI/style/StatusBar.module.sass | 3 +++ ui/package.json | 2 +- ui/src/components/Pages/TrafficPage/TrafficPage.tsx | 7 ++++--- 8 files changed, 24 insertions(+), 15 deletions(-) diff --git a/ui-common/package-lock.json b/ui-common/package-lock.json index e9d1a7594..155ac73af 100644 --- a/ui-common/package-lock.json +++ b/ui-common/package-lock.json @@ -1,12 +1,12 @@ { "name": "@up9/mizu-common", - "version": "1.0.10", + "version": "1.0.135", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@up9/mizu-common", - "version": "1.0.10", + "version": "1.0.135", "license": "MIT", "dependencies": { "@craco/craco": "^6.4.3", diff --git a/ui-common/package.json b/ui-common/package.json index 771c9d099..682c4b861 100644 --- a/ui-common/package.json +++ b/ui-common/package.json @@ -1,6 +1,6 @@ { "name": "@up9/mizu-common", - "version": "1.0.135", + "version": "1.0.136", "description": "Made with create-react-library", "author": "", "license": "MIT", diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx index 0659f818b..3d86c01fd 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx @@ -48,12 +48,13 @@ interface TrafficViewerProps { actionButtons?: JSX.Element, isShowStatusBar?: boolean, webSocketUrl : string, - isCloseWebSocket : boolean + isCloseWebSocket : boolean, + isDemoBannerView : boolean } export const TrafficViewer : React.FC = ({setAnalyzeStatus, trafficViewerApiProp, actionButtons,isShowStatusBar,webSocketUrl, - isCloseWebSocket}) => { + isCloseWebSocket, isDemoBannerView}) => { const classes = useLayoutStyles(); @@ -293,7 +294,7 @@ export const TrafficViewer : React.FC = ({setAnalyzeStatus, return (
- {tappingStatus && isShowStatusBar && } + {tappingStatus && isShowStatusBar && }
pause = ({setAnalyzeStatus, const MemoiedTrafficViewer = React.memo(TrafficViewer) const TrafficViewerContainer: React.FC = ({ setAnalyzeStatus, trafficViewerApiProp, actionButtons, isShowStatusBar = true , - webSocketUrl, isCloseWebSocket}) => { + webSocketUrl, isCloseWebSocket, isDemoBannerView}) => { return + setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} /> } diff --git a/ui-common/src/components/UI/StatusBar.tsx b/ui-common/src/components/UI/StatusBar.tsx index b7f09cbca..5b13b9a99 100644 --- a/ui-common/src/components/UI/StatusBar.tsx +++ b/ui-common/src/components/UI/StatusBar.tsx @@ -10,12 +10,16 @@ const pluralize = (noun: string, amount: number) => { return `${noun}${amount !== 1 ? 's' : ''}` } -export const StatusBar = () => { +interface StatusBarProps { + isDemoBannerView: boolean; + } + +export const StatusBar = ({isDemoBannerView}) => { const tappingStatus = useRecoilValue(tappingStatusAtom); const [expandedBar, setExpandedBar] = useState(false); const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails); - return
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar"> + return
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar">
{tappingStatus.some(pod => !pod.isTapped) && warning} diff --git a/ui-common/src/components/UI/index.ts b/ui-common/src/components/UI/index.ts index 254859f34..45a5c79cd 100644 --- a/ui-common/src/components/UI/index.ts +++ b/ui-common/src/components/UI/index.ts @@ -9,4 +9,4 @@ import { InformationIcon } from "./InformationIcon"; export {LoadingOverlay,Select,Tabs,Tooltip,Checkbox,CustomModal,InformationIcon} -export {StatusBar} +export {StatusBar} \ No newline at end of file diff --git a/ui-common/src/components/UI/style/StatusBar.module.sass b/ui-common/src/components/UI/style/StatusBar.module.sass index 20c8535c6..52fc71605 100644 --- a/ui-common/src/components/UI/style/StatusBar.module.sass +++ b/ui-common/src/components/UI/style/StatusBar.module.sass @@ -19,6 +19,9 @@ overflow: hidden max-width: clamp(150px,50%,600px) + &.banner + top: 53px + .podsCount display: flex justify-content: center diff --git a/ui/package.json b/ui/package.json index cf962f038..3e6f6b2b2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,7 +13,7 @@ "@types/jest": "^26.0.22", "@types/node": "^12.20.10", "@uiw/react-textarea-code-editor": "^1.4.12", - "@up9/mizu-common": "1.0.135", + "@up9/mizu-common": "1.0.136", "axios": "^0.25.0", "core-js": "^3.20.2", "craco-babel-loader": "^1.0.3", diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index 7f51dd62b..ce3536c9f 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -43,7 +43,7 @@ const trafficViewerApi = {...api} type="submit" variant="contained" className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} - style={{ marginRight: 25 }} + style={{ marginRight: 25, textTransform: 'unset' }} onClick={handleOpenOasModal}> OpenApi Specs } @@ -52,7 +52,8 @@ const trafficViewerApi = {...api} size="large" variant="contained" className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} - onClick={openServiceMapModalDebounce}> + onClick={openServiceMapModalDebounce} + style={{textTransform: 'unset'}}> Service Map }
@@ -66,7 +67,7 @@ const trafficViewerApi = {...api} return ( <> + trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal} isDemoBannerView={false}/> ); };