From 618e6a34bc85ccb1f789fed56fbfc101256fb5b9 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 11:13:09 +0200 Subject: [PATCH 01/46] css polishing Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.css | 5 +++-- .../src/components/ServiceTab/ServiceTab.jsx | 13 +++++++++--- .../components/ServiceTab/_serviceTab.scss | 2 +- .../ServiceVersionDiff/ServiceVersionDiff.css | 6 +++++- .../ServiceVersionDiff/ServiceVersionDiff.jsx | 3 ++- .../_serviceVersionDiff.scss | 12 ++++++++++- .../ServicesNavigationBar.css | 7 +++++++ .../ServicesNavigationBar/SideBarLinks.jsx | 21 +++++++++++++++++-- .../SideBarLinks.test.jsx | 21 ++++++++++--------- .../_serviceNavigationBar.scss | 19 ++++++++++++++++- .../src/components/Wizard/DialogDropdown.jsx | 1 - .../src/components/Wizard/WizardDialog.jsx | 1 - api-catalog-ui/frontend/src/index.css | 2 ++ .../frontend/src/utils/utilFunctions.js | 2 ++ api-catalog-ui/frontend/src/webflow.css | 4 ++-- 15 files changed, 93 insertions(+), 26 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css index 49e4b25c7d..8ba1b63281 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css @@ -3,6 +3,8 @@ } .main-content2 detail-content { + display: flex; + height: 100vh; text-align: left; background-color: #EFEFEF; } @@ -47,7 +49,6 @@ margin-top: 2rem; text-align: left; overflow: hidden; - width: 100%; } .api-description-container { @@ -130,7 +131,7 @@ div.content-description-container > div > div:nth-child(2) > div { } .nav-bar { - min-height: 84vh; + min-height: 40vh; flex-direction: column; align-items: center; min-width: 368px; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 7a33064153..f66eb55a3d 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -230,7 +230,6 @@ export default class ServiceTab extends Component { {selectedService.description}
-
Swagger @@ -259,8 +258,8 @@ export default class ServiceTab extends Component { disabled={apiVersions.length < 2} style={ apiVersions.length < 2 - ? { backgroundColor: '#e4e4e4', color: '#c0c0c0', opacity: '0.5' } - : { backgroundColor: '#fff' } + ? { backgroundColor: '#e4e4e4', color: '#6b6868', opacity: '0.5' } + : { backgroundColor: '#fff', color: '#0056B3' } } onClick={this.handleDialogOpen} key="diff" @@ -287,6 +286,9 @@ export default class ServiceTab extends Component { > Use Cases ({useCasesCounter}) +
+ {useCasesCounter === 0 && There are no Use Cases.} +
Tutorials ({tutorialsCounter} articles) +
+ {tutorialsCounter === 0 && There are no Tutorials.} +
Videos ({videosCounter}) +
+ {videosCounter === 0 && There are no Videos.} )} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss index 804a61a398..4f453d9d90 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss +++ b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss @@ -25,7 +25,6 @@ a.nav-tab { } } p.MuiTypography-root.version-text.MuiTypography-body1 { - color: $color_2; font-size: 14px; font-weight: bold; } @@ -88,6 +87,7 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { } .footer-labels { + margin-bottom: -2px; color: $color_3; font-size: 28px; letter-spacing: 0.5px; diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css index c471466a80..be9190a03b 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css @@ -12,7 +12,7 @@ .api-diff-form>p { margin-top: auto; padding-left: 8px; - padding-right: 8px; + padding-right: 18px; font-size: x-large; color: #58606e; } @@ -142,3 +142,7 @@ s, del, .missing, del.comment { .MuiSelect-select { width: 110px; } + +#dialog-title { + margin-top: -8px; +} diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index 4ea1b8a530..f3a1b2c9e2 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -22,7 +22,6 @@ import { Divider, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; -import './ServiceVersionDiff.css'; export default class ServiceVersionDiff extends Component { constructor(props) { @@ -71,6 +70,7 @@ export default class ServiceVersionDiff extends Component { p { margin-top: auto; padding-left: 8px; - padding-right: 8px; + padding-right: 18px; font-size: x-large; color: $color_1; } @@ -221,3 +221,13 @@ del.comment { .MuiSelect-select { width: 110px; } + +#dialog-title { + margin-top: -70px; + color: var(--controlText15); +} + +.select-diff { + padding-right: 7px; + margin-left: -4px; +} diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index 28419324de..2089558d42 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -54,3 +54,10 @@ font-weight: bold; } +span.MuiTab-wrapper { + display: inline-block; +} + +.MuiTabs-root { + margin-left: 39px; +} diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx index 748d74ce2f..3c0df9fdcc 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx @@ -7,9 +7,26 @@ * * Copyright Contributors to the Zowe Project. */ -import { Tab, Tabs } from '@material-ui/core'; +import { Tab, Tabs, Tooltip, withStyles } from '@material-ui/core'; import { Link as RouterLink } from 'react-router-dom'; +const styles = { + truncatedTabLabel: { + maxWidth: 250, + width: 'max-content', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, +}; + +const TruncatedTabLabel = withStyles(styles)(({ label }) => ( + +
+ {label} +
+ +)); function SideBarLinks({ storeCurrentTileId, originalTiles, text, match, services }) { const handleTabClick = (value) => { const correctTile = originalTiles.find((tile) => tile.services.some((service) => service.serviceId === value)); @@ -32,7 +49,7 @@ function SideBarLinks({ storeCurrentTileId, originalTiles, text, match, services className="tabs" component={RouterLink} to={`${match.url}/${services}`} - label={text} + label={} wrapped /> diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx index d6e94f48ef..5ed2a01928 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx @@ -76,17 +76,18 @@ describe('>>> SideBarLinks component tests', () => { services={servicesMock} /> ); - + // eslint-disable-next-line no-console + console.log(wrapper.find(Tab).props()); expect(wrapper.find(Tab)).toHaveLength(1); - expect(wrapper.find(Tab).props()).toMatchObject({ - onClick: expect.any(Function), - value: 'Tab Text', - className: 'tabs', - component: RouterLink, - to: '/example/service1', - label: 'Tab Text', - wrapped: true, - }); + // expect(wrapper.find(Tab).props()).toMatchSnapshot({ + // onClick: expect.any(Function), + // value: 'Tab Text', + // className: 'tabs', + // component: RouterLink, + // to: '/example/service1', + // label: ' { const img = await fetchImagePath(); link.href = img; logo.src = img; + logo.style.height = 'auto'; + logo.style.width = 'auto'; } if (uiConfig.backgroundColor) { diff --git a/api-catalog-ui/frontend/src/webflow.css b/api-catalog-ui/frontend/src/webflow.css index e4d6ce4d98..9c51b7dd11 100644 --- a/api-catalog-ui/frontend/src/webflow.css +++ b/api-catalog-ui/frontend/src/webflow.css @@ -227,7 +227,7 @@ td, th { } html { - height: 100% + height: 100%; } body { @@ -2997,7 +2997,7 @@ html.w-mod-js *[data-ix="doc-load-hidden"] { @media only screen and (max-width: 600px) { .header { - width: 600px; + width: max-content; } } From d55fd476ae5c428a71f594eb95da0de9b0cab7a7 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 11:31:46 +0200 Subject: [PATCH 02/46] fix warnings Signed-off-by: at670475 --- .../frontend/src/components/Search/SearchCriteria.jsx | 6 +++++- .../src/components/ServicesNavigationBar/SideBarLinks.jsx | 8 +++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Search/SearchCriteria.jsx b/api-catalog-ui/frontend/src/components/Search/SearchCriteria.jsx index 4cd5bf0afe..89e79e97e2 100644 --- a/api-catalog-ui/frontend/src/components/Search/SearchCriteria.jsx +++ b/api-catalog-ui/frontend/src/components/Search/SearchCriteria.jsx @@ -56,7 +56,11 @@ export default class SearchCriteria extends Component { data-testid="search-bar" InputProps={{ disableUnderline: true, - endAdornment: {icon}, + endAdornment: ( + + {icon} + + ), }} placeholder={placeholder} value={criteria} diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx index 3c0df9fdcc..f3be84c2ca 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx @@ -20,11 +20,9 @@ const styles = { }, }; -const TruncatedTabLabel = withStyles(styles)(({ label }) => ( +const TruncatedTabLabel = withStyles(styles)(({ classes, label }) => ( -
- {label} -
+
{label}
 )); function SideBarLinks({ storeCurrentTileId, originalTiles, text, match, services }) { @@ -49,7 +47,7 @@ function SideBarLinks({ storeCurrentTileId, originalTiles, text, match, services className="tabs" component={RouterLink} to={`${match.url}/${services}`} - label={} + label={} wrapped /> From f94115b9ec04aab2fde76cca0ab86a17f32f4f25 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 15:30:01 +0200 Subject: [PATCH 03/46] fix test Signed-off-by: at670475 --- .../components/DetailPage/_detailPage.scss | 4 ++-- .../SideBarLinks.test.jsx | 24 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 7962d05c42..0c14132ffe 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -116,8 +116,8 @@ body .detail-content { margin-top: -119px; } - /* Extra small devices (phones, 600px and down) */ - @media only screen and (max-width: 600px) { + /* Extra small devices (phones, 1361px and down) */ + @media only screen and (max-width: 1361px) { #right-resources-menu { display: contents; } diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx index 5ed2a01928..177074485b 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx @@ -76,18 +76,18 @@ describe('>>> SideBarLinks component tests', () => { services={servicesMock} /> ); - // eslint-disable-next-line no-console - console.log(wrapper.find(Tab).props()); - expect(wrapper.find(Tab)).toHaveLength(1); + const tabComponent = wrapper.find(Tab); - // expect(wrapper.find(Tab).props()).toMatchSnapshot({ - // onClick: expect.any(Function), - // value: 'Tab Text', - // className: 'tabs', - // component: RouterLink, - // to: '/example/service1', - // label: ' Date: Fri, 14 Jul 2023 15:50:39 +0200 Subject: [PATCH 04/46] fix some style Signed-off-by: at670475 --- .../frontend/src/components/DetailPage/DetailPage.css | 2 -- .../frontend/src/components/ServiceTab/ServiceTab.css | 7 +++++++ .../frontend/src/components/ServiceTab/_serviceTab.scss | 6 ++++++ .../components/ServiceVersionDiff/ServiceVersionDiff.css | 2 +- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css index 8ba1b63281..9307e2dbb3 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css @@ -46,7 +46,6 @@ } .detailed-description-container { - margin-top: 2rem; text-align: left; overflow: hidden; } @@ -88,7 +87,6 @@ } #title { - padding: 2rem .3rem 1.3rem 0; color: #58606e; font-size: 28px; font-weight: 700; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css index d4fadac66d..759f793c34 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css @@ -115,3 +115,10 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { margin: 0; } } + +@media only screen and (max-width: 1208px) { + #compare-button { + margin-left: 54px; + margin-top: 10px; + } +} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss index 4f453d9d90..41ee21363e 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss +++ b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss @@ -93,3 +93,9 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { letter-spacing: 0.5px; } +@media only screen and (max-width: 1208px) { + #compare-button { + margin-left: 54px; + margin-top: 10px; + } +} diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css index be9190a03b..d2692f3faf 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.css @@ -6,7 +6,7 @@ .api-diff-form { margin: auto; display: flex; - width: fit-content; + width: auto; } .api-diff-form>p { From a77522f94811633b3c7a9010147c3c3befefdad3 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 17:23:33 +0200 Subject: [PATCH 05/46] improve handling in case of header set to white Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index c147182a54..925dfcd8f4 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -79,6 +79,29 @@ function fetchImagePath() { }); } +function handleWhiteHeader(uiConfig) { + if (uiConfig.docLink) { + const docText = document.querySelector('#internal-link'); + const goBackButton = document.querySelector('#go-back-button'); + const swaggerLabel = document.getElementById('swagger-label'); + const title = document.getElementById('title'); + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + if (docText) { + docText.style.color = 'black'; + } + if (goBackButton) { + goBackButton.style.color = 'black'; + } + if (swaggerLabel) { + swaggerLabel.style.color = 'black'; + } + if (title) { + title.style.color = 'black'; + } + } + } +} + /** * Custom the UI look to match the setup from the service metadata * @param uiConfig the configuration to customize the UI @@ -133,6 +156,7 @@ export const customUIStyle = async (uiConfig) => { description.style.color = uiConfig.textColor; } } + handleWhiteHeader(uiConfig); }; export const isAPIPortal = () => process.env.REACT_APP_API_PORTAL === 'true'; From 6b9f8f190339c7079614062e94bea736366f0f17 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 17:47:50 +0200 Subject: [PATCH 06/46] fix buttons color Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index 925dfcd8f4..44aad00d8f 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -37,6 +37,8 @@ function setMultipleElements(uiConfig) { const title1 = document.getElementById('title'); const swaggerLabel = document.getElementById('swagger-label'); const header = document.getElementsByClassName('header'); + const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); + const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); if (header && header.length > 0) { header[0].style.setProperty('background-color', uiConfig.headerColor); } @@ -52,6 +54,20 @@ function setMultipleElements(uiConfig) { if (logoutButton) { logoutButton.style.setProperty('color', uiConfig.headerColor); } + if (wizardButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + wizardButton.style.setProperty('color', 'black'); + } else { + wizardButton.style.setProperty('color', uiConfig.headerColor); + } + } + if (refreshButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + refreshButton.style.setProperty('color', 'black'); + } else { + refreshButton.style.setProperty('color', uiConfig.headerColor); + } + } } } @@ -85,6 +101,7 @@ function handleWhiteHeader(uiConfig) { const goBackButton = document.querySelector('#go-back-button'); const swaggerLabel = document.getElementById('swagger-label'); const title = document.getElementById('title'); + const productTitle = document.getElementById('product-title'); if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { if (docText) { docText.style.color = 'black'; @@ -98,6 +115,9 @@ function handleWhiteHeader(uiConfig) { if (title) { title.style.color = 'black'; } + if (productTitle) { + productTitle.style.color = 'black'; + } } } } From eb98ef9625f7128ef1d490d700a41b5e9761bdde Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 14 Jul 2023 18:23:19 +0200 Subject: [PATCH 07/46] small fix for better responsiveness Signed-off-by: at670475 --- api-catalog-ui/frontend/src/components/App/App.css | 5 +++++ .../frontend/src/components/Dashboard/Dashboard.css | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/api-catalog-ui/frontend/src/components/App/App.css b/api-catalog-ui/frontend/src/components/App/App.css index 16ded3f72c..385390398b 100644 --- a/api-catalog-ui/frontend/src/components/App/App.css +++ b/api-catalog-ui/frontend/src/components/App/App.css @@ -4,3 +4,8 @@ height: 100vh; } +@media only screen and (max-width: 1120px) { + .content { + width: fit-content; + } +} diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css index 98250eb326..92904fc05a 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css +++ b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css @@ -262,7 +262,7 @@ a { display: contents; } -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 1120px) { #dash-buttons { margin: 0; float: none; From 3a52bf787fc21d68807031bbccd31b467eebdab6 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sun, 16 Jul 2023 10:38:37 +0200 Subject: [PATCH 08/46] fix + test Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 38 +++++++++---------- .../frontend/src/utils/utilFunctions.test.js | 33 ++++++++++++++++ 2 files changed, 52 insertions(+), 19 deletions(-) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index 44aad00d8f..b4a086246b 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -96,28 +96,28 @@ function fetchImagePath() { } function handleWhiteHeader(uiConfig) { - if (uiConfig.docLink) { - const docText = document.querySelector('#internal-link'); - const goBackButton = document.querySelector('#go-back-button'); - const swaggerLabel = document.getElementById('swagger-label'); - const title = document.getElementById('title'); - const productTitle = document.getElementById('product-title'); - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + const goBackButton = document.querySelector('#go-back-button'); + const swaggerLabel = document.getElementById('swagger-label'); + const title = document.getElementById('title'); + const productTitle = document.getElementById('product-title'); + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + if (uiConfig.docLink) { + const docText = document.querySelector('#internal-link'); if (docText) { docText.style.color = 'black'; } - if (goBackButton) { - goBackButton.style.color = 'black'; - } - if (swaggerLabel) { - swaggerLabel.style.color = 'black'; - } - if (title) { - title.style.color = 'black'; - } - if (productTitle) { - productTitle.style.color = 'black'; - } + } + if (goBackButton) { + goBackButton.style.color = 'black'; + } + if (swaggerLabel) { + swaggerLabel.style.color = 'black'; + } + if (title) { + title.style.color = 'black'; + } + if (productTitle) { + productTitle.style.color = 'black'; } } } diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js index 11d7768e9f..287fa89296 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js @@ -30,6 +30,8 @@ describe('>>> Util Functions tests', () => {
+ +
`; }); @@ -85,4 +87,35 @@ describe('>>> Util Functions tests', () => { jest.restoreAllMocks(); global.fetch.mockRestore(); }); + + it('should handle elements in case of white header', async () => { + const uiConfig = { + logo: '/path/img.png', + headerColor: 'white', + backgroundColor: 'blue', + fontFamily: 'Arial', + textColor: 'black', + docLink: 'doc|doc.com', + }; + + global.URL.createObjectURL = jest.fn().mockReturnValue('img-url'); + global.fetch = mockFetch(); + await customUIStyle(uiConfig); + const header = document.getElementsByClassName('header')[0]; + const title = document.getElementById('title'); + const productTitle = document.getElementById('product-title'); + const docLink = document.getElementById('internal-link'); + const swaggerLabel = document.getElementById('swagger-label'); + const link = document.querySelector("link[rel~='icon']"); + expect(link.href).toContain('img-url'); + expect(header.style.getPropertyValue('background-color')).toBe('white'); + expect(title.style.getPropertyValue('color')).toBe('black'); + expect(productTitle.style.getPropertyValue('color')).toBe('black'); + expect(docLink.style.getPropertyValue('color')).toBe('black'); + expect(swaggerLabel.style.getPropertyValue('color')).toBe('black'); + expect(document.documentElement.style.backgroundColor).toBe('blue'); + // Clean up the mocks + jest.restoreAllMocks(); + global.fetch.mockRestore(); + }); }); From f5e101dbabe1da31a10080ee665d39a031a9d90c Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sun, 16 Jul 2023 10:53:35 +0200 Subject: [PATCH 09/46] fix complexity Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index b4a086246b..63344bf305 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -30,6 +30,38 @@ export default function countAdditionalContents(service) { return { useCasesCounter, tutorialsCounter, videosCounter }; } +function setElementsColor(header, uiConfig, divider, title1, swaggerLabel, logoutButton, wizardButton, refreshButton) { + if (header && header.length > 0) { + header[0].style.setProperty('background-color', uiConfig.headerColor); + } + if (divider) { + divider.style.setProperty('background-color', uiConfig.headerColor); + } + if (title1) { + title1.style.setProperty('color', uiConfig.headerColor); + } + if (swaggerLabel) { + swaggerLabel.style.setProperty('color', uiConfig.headerColor); + } + if (logoutButton) { + logoutButton.style.setProperty('color', uiConfig.headerColor); + } + if (wizardButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + wizardButton.style.setProperty('color', 'black'); + } else { + wizardButton.style.setProperty('color', uiConfig.headerColor); + } + } + if (refreshButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + refreshButton.style.setProperty('color', 'black'); + } else { + refreshButton.style.setProperty('color', uiConfig.headerColor); + } + } +} + function setMultipleElements(uiConfig) { if (uiConfig.headerColor) { const divider = document.getElementById('separator2'); @@ -39,35 +71,7 @@ function setMultipleElements(uiConfig) { const header = document.getElementsByClassName('header'); const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); - if (header && header.length > 0) { - header[0].style.setProperty('background-color', uiConfig.headerColor); - } - if (divider) { - divider.style.setProperty('background-color', uiConfig.headerColor); - } - if (title1) { - title1.style.setProperty('color', uiConfig.headerColor); - } - if (swaggerLabel) { - swaggerLabel.style.setProperty('color', uiConfig.headerColor); - } - if (logoutButton) { - logoutButton.style.setProperty('color', uiConfig.headerColor); - } - if (wizardButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - wizardButton.style.setProperty('color', 'black'); - } else { - wizardButton.style.setProperty('color', uiConfig.headerColor); - } - } - if (refreshButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - refreshButton.style.setProperty('color', 'black'); - } else { - refreshButton.style.setProperty('color', uiConfig.headerColor); - } - } + setElementsColor(header, uiConfig, divider, title1, swaggerLabel, logoutButton, wizardButton, refreshButton); } } From 3c73ee83abfffb162b7bdb29f42531359ac8db29 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sun, 16 Jul 2023 11:44:35 +0200 Subject: [PATCH 10/46] fixing Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 62 +++++++++---------- .../frontend/src/utils/utilFunctions.test.js | 14 +++++ 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index 63344bf305..b4a086246b 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -30,38 +30,6 @@ export default function countAdditionalContents(service) { return { useCasesCounter, tutorialsCounter, videosCounter }; } -function setElementsColor(header, uiConfig, divider, title1, swaggerLabel, logoutButton, wizardButton, refreshButton) { - if (header && header.length > 0) { - header[0].style.setProperty('background-color', uiConfig.headerColor); - } - if (divider) { - divider.style.setProperty('background-color', uiConfig.headerColor); - } - if (title1) { - title1.style.setProperty('color', uiConfig.headerColor); - } - if (swaggerLabel) { - swaggerLabel.style.setProperty('color', uiConfig.headerColor); - } - if (logoutButton) { - logoutButton.style.setProperty('color', uiConfig.headerColor); - } - if (wizardButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - wizardButton.style.setProperty('color', 'black'); - } else { - wizardButton.style.setProperty('color', uiConfig.headerColor); - } - } - if (refreshButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - refreshButton.style.setProperty('color', 'black'); - } else { - refreshButton.style.setProperty('color', uiConfig.headerColor); - } - } -} - function setMultipleElements(uiConfig) { if (uiConfig.headerColor) { const divider = document.getElementById('separator2'); @@ -71,7 +39,35 @@ function setMultipleElements(uiConfig) { const header = document.getElementsByClassName('header'); const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); - setElementsColor(header, uiConfig, divider, title1, swaggerLabel, logoutButton, wizardButton, refreshButton); + if (header && header.length > 0) { + header[0].style.setProperty('background-color', uiConfig.headerColor); + } + if (divider) { + divider.style.setProperty('background-color', uiConfig.headerColor); + } + if (title1) { + title1.style.setProperty('color', uiConfig.headerColor); + } + if (swaggerLabel) { + swaggerLabel.style.setProperty('color', uiConfig.headerColor); + } + if (logoutButton) { + logoutButton.style.setProperty('color', uiConfig.headerColor); + } + if (wizardButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + wizardButton.style.setProperty('color', 'black'); + } else { + wizardButton.style.setProperty('color', uiConfig.headerColor); + } + } + if (refreshButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + refreshButton.style.setProperty('color', 'black'); + } else { + refreshButton.style.setProperty('color', uiConfig.headerColor); + } + } } } diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js index 287fa89296..4212e2294b 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js @@ -32,6 +32,12 @@ describe('>>> Util Functions tests', () => {
+
+ +
+
+ +
`; }); @@ -70,12 +76,16 @@ describe('>>> Util Functions tests', () => { const detailPage = document.getElementsByClassName('content')[0]; const description = document.getElementById('description'); const link = document.querySelector("link[rel~='icon']"); + const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); + const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); expect(logo.src).toContain('img-url'); expect(link.href).toContain('img-url'); expect(header.style.getPropertyValue('background-color')).toBe('red'); expect(divider.style.getPropertyValue('background-color')).toBe('red'); expect(title.style.getPropertyValue('color')).toBe('red'); expect(swaggerLabel.style.getPropertyValue('color')).toBe('red'); + expect(wizardButton.style.getPropertyValue('color')).toBe('red'); + expect(refreshButton.style.getPropertyValue('color')).toBe('red'); expect(logoutButton.style.getPropertyValue('color')).toBe('red'); expect(homepage.style.backgroundColor).toBe('blue'); expect(homepage.style.backgroundImage).toBe('none'); @@ -106,6 +116,8 @@ describe('>>> Util Functions tests', () => { const productTitle = document.getElementById('product-title'); const docLink = document.getElementById('internal-link'); const swaggerLabel = document.getElementById('swagger-label'); + const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); + const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); const link = document.querySelector("link[rel~='icon']"); expect(link.href).toContain('img-url'); expect(header.style.getPropertyValue('background-color')).toBe('white'); @@ -113,6 +125,8 @@ describe('>>> Util Functions tests', () => { expect(productTitle.style.getPropertyValue('color')).toBe('black'); expect(docLink.style.getPropertyValue('color')).toBe('black'); expect(swaggerLabel.style.getPropertyValue('color')).toBe('black'); + expect(wizardButton.style.getPropertyValue('color')).toBe('black'); + expect(refreshButton.style.getPropertyValue('color')).toBe('black'); expect(document.documentElement.style.backgroundColor).toBe('blue'); // Clean up the mocks jest.restoreAllMocks(); From 23bbb487e716c255bb58f11d1b424cfd43b45704 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sun, 16 Jul 2023 12:15:26 +0200 Subject: [PATCH 11/46] reduce complexity Signed-off-by: at670475 --- .../frontend/src/utils/utilFunctions.js | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index b4a086246b..0ed82c4f4f 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -30,6 +30,23 @@ export default function countAdditionalContents(service) { return { useCasesCounter, tutorialsCounter, videosCounter }; } +function setButtonsColor(wizardButton, uiConfig, refreshButton) { + if (wizardButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + wizardButton.style.setProperty('color', 'black'); + } else { + wizardButton.style.setProperty('color', uiConfig.headerColor); + } + } + if (refreshButton) { + if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { + refreshButton.style.setProperty('color', 'black'); + } else { + refreshButton.style.setProperty('color', uiConfig.headerColor); + } + } +} + function setMultipleElements(uiConfig) { if (uiConfig.headerColor) { const divider = document.getElementById('separator2'); @@ -54,20 +71,7 @@ function setMultipleElements(uiConfig) { if (logoutButton) { logoutButton.style.setProperty('color', uiConfig.headerColor); } - if (wizardButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - wizardButton.style.setProperty('color', 'black'); - } else { - wizardButton.style.setProperty('color', uiConfig.headerColor); - } - } - if (refreshButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - refreshButton.style.setProperty('color', 'black'); - } else { - refreshButton.style.setProperty('color', uiConfig.headerColor); - } - } + setButtonsColor(wizardButton, uiConfig, refreshButton); } } From 01347a651f2ba5c47fcc5a736d7a4f3c17cdca80 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 17 Jul 2023 11:43:48 +0200 Subject: [PATCH 12/46] hide compare button in case of no doc Signed-off-by: at670475 --- .../src/components/ServiceTab/ServiceTab.jsx | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index f66eb55a3d..200a57906a 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -233,12 +233,14 @@ export default class ServiceTab extends Component { Swagger - - Version - - -
{containsVersion && currentService && ( + + Version + + )} +
+ {containsVersion && currentService && ( +
- )} - -
+ + + )} {selectedVersion !== 'diff' && } {selectedVersion === 'diff' && isDialogOpen && containsVersion && ( Date: Mon, 17 Jul 2023 12:41:15 +0200 Subject: [PATCH 13/46] fix wizard bar and add unit tests Signed-off-by: at670475 --- .../components/ServiceTab/ServiceTab.test.jsx | 37 +++++++++++++++++++ .../frontend/src/components/Wizard/wizard.css | 3 +- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index f4d987ea53..5264ce2bde 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -97,4 +97,41 @@ describe('>>> ServiceTab component tests', () => { dropDownMenu.children().at(1).simulate('click'); expect(serviceTab.find('[data-testid="version-menu"]').first().text()).toBe('org.zowe v1org.zowe v2'); }); + + it('should throw error when tiles are null', () => { + const selectService = jest.fn(); + expect(() => + shallow( + + ) + ).toThrow('No tile is selected.'); + }); + + it('should throw error when tiles are undefined', () => { + const selectService = jest.fn(); + expect(() => + shallow( + + ) + ).toThrow('No tile is selected.'); + }); + + it('should throw error when tiles are empty', () => { + const selectService = jest.fn(); + expect(() => + shallow( + + ) + ).toThrow('No tile is selected.'); + }); }); diff --git a/api-catalog-ui/frontend/src/components/Wizard/wizard.css b/api-catalog-ui/frontend/src/components/Wizard/wizard.css index 58871e192f..9b54fb426e 100644 --- a/api-catalog-ui/frontend/src/components/Wizard/wizard.css +++ b/api-catalog-ui/frontend/src/components/Wizard/wizard.css @@ -22,6 +22,7 @@ #wizard-navigation { min-height: 20em; + margin-left: auto; } #wizard-navigation > div { @@ -153,7 +154,7 @@ label.MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLab display: none; } -#yaml-upload { +#yaml-upload { display: flex; justify-content: center; align-items: center; From 850b282f1de9c604f3155482c3e641e4131ba908 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 17 Jul 2023 13:36:45 +0200 Subject: [PATCH 14/46] fix login form Signed-off-by: at670475 --- api-catalog-ui/frontend/src/components/Login/Login.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Login/Login.css b/api-catalog-ui/frontend/src/components/Login/Login.css index c27522ead8..111eda2ec0 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.css +++ b/api-catalog-ui/frontend/src/components/Login/Login.css @@ -45,7 +45,6 @@ .w-form { display: inline-table; resize: inherit; - position: static; flex-direction: column; justify-content: flex-end; align-items: flex-end; @@ -140,8 +139,7 @@ form#login-form { } .susp-card { - padding-top: 200px; - padding-left: 600px; + margin: auto; } .MuiFormControl-root { @@ -160,4 +158,4 @@ form#login-form { #warn-first-line { display: flex; padding-bottom: 10px; -} \ No newline at end of file +} From b85fd3dbc1611d56c87bec73f67b35872fca394f Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 17 Jul 2023 13:54:15 +0200 Subject: [PATCH 15/46] fix spinner glitch on login Signed-off-by: at670475 --- .../frontend/src/components/Login/Login.css | 1 + .../frontend/src/components/Login/Login.jsx | 19 +++++++++---------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Login/Login.css b/api-catalog-ui/frontend/src/components/Login/Login.css index 111eda2ec0..f645b79252 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.css +++ b/api-catalog-ui/frontend/src/components/Login/Login.css @@ -45,6 +45,7 @@ .w-form { display: inline-table; resize: inherit; + position: static; flex-direction: column; justify-content: flex-end; align-items: flex-end; diff --git a/api-catalog-ui/frontend/src/components/Login/Login.jsx b/api-catalog-ui/frontend/src/components/Login/Login.jsx index 76f8c147fd..eceb119349 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.jsx +++ b/api-catalog-ui/frontend/src/components/Login/Login.jsx @@ -185,6 +185,15 @@ function Login(props) { return (
+
)} -
From e1ee4eb37c988c32948748c292eac664d8d4cebf Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Thu, 20 Jul 2023 16:59:51 +0200 Subject: [PATCH 16/46] refactor tabs and fix css Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.css | 2 - .../src/components/DetailPage/DetailPage.jsx | 1 + .../components/DetailPage/_detailPage.scss | 2 +- .../components/ServiceTab/ServiceTab.test.jsx | 4 +- .../ServiceNavigationBar.test.jsx | 16 +--- .../ServicesNavigationBar.css | 46 ++++++--- .../ServicesNavigationBar.jsx | 67 ++++++++++--- .../ServicesNavigationBar/SideBarLinks.jsx | 56 ----------- .../SideBarLinks.test.jsx | 93 ------------------- .../_serviceNavigationBar.scss | 66 +++++-------- .../src/components/Swagger/SwaggerUI.jsx | 2 +- 11 files changed, 119 insertions(+), 236 deletions(-) delete mode 100644 api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx delete mode 100644 api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css index 9307e2dbb3..4950de3057 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css @@ -145,9 +145,7 @@ div.content-description-container > div > div:nth-child(2) > div { } .paragraph-description-container { - /*change width via templating mechanism to create space for the right menu (width 80%) */ width: auto; - /*width: 80%;*/ margin-left: 56px; } diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index fe9f0e52c4..be42032995 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -27,6 +27,7 @@ export default class DetailPage extends Component { if (currentTileId) { fetchTilesStart(currentTileId); } + localStorage.removeItem('selectedTab'); } componentWillUnmount() { diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 0c14132ffe..221d779ae6 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -119,7 +119,7 @@ body .detail-content { /* Extra small devices (phones, 1361px and down) */ @media only screen and (max-width: 1361px) { #right-resources-menu { - display: contents; + display: none; } } diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index 5264ce2bde..5ddedc695b 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -42,8 +42,10 @@ const tiles = { 'The API Mediation Layer for z/OS internal API services. The API Mediation Layer provides a single point of access to mainframe REST APIs and offers enterprise cloud-like features such as high-availability, scalability, dynamic API discovery, and documentation.', services: [selectedService], }; - describe('>>> ServiceTab component tests', () => { + beforeEach(() => { + process.env.REACT_APP_API_PORTAL = false; + }); it('should display service tab information', () => { const selectService = jest.fn(); const serviceTab = shallow( diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx index 02e6c4bebb..96bef42675 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx @@ -33,21 +33,15 @@ const tile = { createdTimestamp: '2018-08-22T08:31:22.948+0000', }; -describe('>>> ServiceNavigationBar component tests', () => { - it('should clear when unmounting', () => { - const clear = jest.fn(); - const serviceNavigationBar = shallow( - - ); - const instance = serviceNavigationBar.instance(); - instance.componentWillUnmount(); - expect(clear).toHaveBeenCalled(); - }); +const match = { + url: '/service', +}; +describe('>>> ServiceNavigationBar component tests', () => { it('should clear when unmounting', () => { const clear = jest.fn(); const serviceNavigationBar = shallow( - + ); const instance = serviceNavigationBar.instance(); instance.componentWillUnmount(); diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index 2089558d42..110e23e5ca 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -1,15 +1,13 @@ -.nav-tabs { - width: auto; - border: 3px solid #F7F9FA; - overflow-y: auto; - display: flex; - align-items: cover; - cursor: pointer; +.nav-bar.custom-tabs.MuiTab-wrapped:hover { + border-color: #50b7f5; + background-color: #efefef; + color: #50b7f5; + transition: color 100ms ease-out; } -.nav-tabs:hover { +.nav-bar.custom-tabs.Mui-selected { border-color: #50b7f5; - background-color: #EFEFEF; + background-color: #efefef; color: #50b7f5; transition: color 100ms ease-out; } @@ -25,6 +23,8 @@ align-items: center; gap: 10px; width: auto; + background: var(--white-ffffff, #FFF); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); } #search2 { @@ -49,15 +49,35 @@ } .MuiTab-root :hover { - color: inherit; /* Use the default color on hover */ - background-color: transparent; /* Remove background color on hover */ - font-weight: bold; + border-color: #50b7f5; + background-color: #efefef; + color: #50b7f5; + transition: color 100ms ease-out; } span.MuiTab-wrapper { display: inline-block; + width: 500px; } .MuiTabs-root { - margin-left: 39px; + margin-left: -10px; +} + +.MuiTabs-scroller.MuiTabs-scrollable > div > a { + max-width: 370px; + margin-bottom: 5px; + text-transform: none; + font-size: 16px; +} + +.MuiTab-wrapped { + height: 60px; +} +.tab.MuiTab-root { + color: #000; +} + +.custom-tabs .MuiTabs-indicator { + background-color: #0056B3; /* Replace with your desired color */ } diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx index d75e8510af..60d6079f07 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx @@ -9,8 +9,8 @@ */ import { Component } from 'react'; -import { Typography } from '@material-ui/core'; -import SideBarLinks from './SideBarLinks'; +import { Tab, Tabs, Tooltip, Typography, withStyles } from '@material-ui/core'; +import { Link as RouterLink } from 'react-router-dom'; import Shield from '../ErrorBoundary/Shield/Shield'; import SearchCriteria from '../Search/SearchCriteria'; @@ -25,10 +25,38 @@ export default class ServicesNavigationBar extends Component { filterText(value); }; + handleTabChange = (event, selectedTab) => { + localStorage.setItem('selectedTab', selectedTab); + }; + + handleTabClick = (id) => { + const { storeCurrentTileId, services } = this.props; + const correctTile = services.find((tile) => tile.services.some((service) => service.serviceId === id)); + if (correctTile) { + storeCurrentTileId(correctTile.id); + } + }; + + styles = () => ({ + truncatedTabLabel: { + maxWidth: 340, + width: 'max-content', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }); + render() { - const { match, services, searchCriteria, storeCurrentTileId } = this.props; + const { match, services, searchCriteria } = this.props; const hasTiles = services && services.length > 0; const hasSearchCriteria = searchCriteria !== undefined && searchCriteria !== null && searchCriteria.length > 0; + const selectedTab = Number(localStorage.getItem('selectedTab')); + const TruncatedTabLabel = withStyles(this.styles)(({ classes, label }) => ( + +
{label}
+ + )); return (
@@ -43,20 +71,29 @@ export default class ServicesNavigationBar extends Component { Product APIs - {services.map((tile) => - tile.services.map((service) => ( -
- + {services.map((tile, tileIndex) => + tile.services.map((service, serviceIndex) => ( + this.handleTabClick(service.serviceId)} key={service.serviceId} - text={service.title} - match={match} - services={service.serviceId} + className="tabs" + component={RouterLink} + to={`${match.url}/${service.serviceId}`} + value={tileIndex * services.length + serviceIndex} + label={} + wrapped /> -
- )) - )} + )) + )} + {!hasTiles && hasSearchCriteria && ( No services found matching search criteria diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx deleted file mode 100644 index f3be84c2ca..0000000000 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.jsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - * This program and the accompanying materials are made available under the terms of the - * Eclipse Public License v2.0 which accompanies this distribution, and is available at - * https://www.eclipse.org/legal/epl-v20.html - * - * SPDX-License-Identifier: EPL-2.0 - * - * Copyright Contributors to the Zowe Project. - */ -import { Tab, Tabs, Tooltip, withStyles } from '@material-ui/core'; -import { Link as RouterLink } from 'react-router-dom'; - -const styles = { - truncatedTabLabel: { - maxWidth: 250, - width: 'max-content', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, -}; - -const TruncatedTabLabel = withStyles(styles)(({ classes, label }) => ( - -
{label}
- -)); -function SideBarLinks({ storeCurrentTileId, originalTiles, text, match, services }) { - const handleTabClick = (value) => { - const correctTile = originalTiles.find((tile) => tile.services.some((service) => service.serviceId === value)); - if (correctTile) { - storeCurrentTileId(correctTile.id); - } - }; - return ( - - handleTabClick(services)} - value={text} - className="tabs" - component={RouterLink} - to={`${match.url}/${services}`} - label={} - wrapped - /> - - ); -} -export default SideBarLinks; diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx deleted file mode 100644 index 177074485b..0000000000 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/SideBarLinks.test.jsx +++ /dev/null @@ -1,93 +0,0 @@ -/* - * This program and the accompanying materials are made available under the terms of the - * Eclipse Public License v2.0 which accompanies this distribution, and is available at - * https://www.eclipse.org/legal/epl-v20.html - * - * SPDX-License-Identifier: EPL-2.0 - * - * Copyright Contributors to the Zowe Project. - */ - -import { shallow } from 'enzyme'; -import { Tab } from '@material-ui/core'; -import { Link as RouterLink } from 'react-router-dom'; -import SideBarLinks from './SideBarLinks'; - -const tile = { - version: '1.0.0', - id: 'apicatalog', - title: 'API Mediation Layer for z/OS internal API services', - status: 'UP', - description: 'lkajsdlkjaldskj', - services: [ - { - serviceId: 'apicatalog', - title: 'API Catalog', - description: - 'API ML Microservice to locate and display API documentation for API ML discovered microservices', - status: 'UP', - secured: false, - }, - { - serviceId: 'gateway', - title: 'API Gateway', - description: - 'API ML Microservice to locate and display API documentation for API ML discovered microservices', - status: 'UP', - secured: false, - }, - ], - totalServices: 1, - activeServices: 1, - lastUpdatedTimestamp: '2018-08-22T08:32:03.110+0000', - createdTimestamp: '2018-08-22T08:31:22.948+0000', -}; - -describe('>>> SideBarLinks component tests', () => { - it('should call storeCurrentTileId function when a tab is clicked', () => { - const storeCurrentTileIdMock = jest.fn(); - const matchMock = { url: '/example' }; - const servicesMock = 'apicatalog'; - const wrapper = shallow( - - ); - - wrapper.find(Tab).simulate('click'); - - expect(storeCurrentTileIdMock).toHaveBeenCalledWith('apicatalog'); - }); - - it('should render a Tab component with the correct props', () => { - const storeCurrentTileIdMock = jest.fn(); - const matchMock = { url: '/example' }; - const servicesMock = 'service1'; - const wrapper = shallow( - - ); - const tabComponent = wrapper.find(Tab); - - expect(tabComponent).toHaveLength(1); - - expect(tabComponent.props()).toEqual({ - onClick: expect.any(Function), - value: 'Tab Text', - className: 'tabs', - component: RouterLink, - to: '/example/service1', - wrapped: true, - label: expect.anything(), - }); - }); -}); diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index fb7519a222..ee36836171 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -2,49 +2,6 @@ $color_1: #50b7f5; $background-color_1: #EFEFEF; $color_2: #CC092F; -.MuiTab-root { - font-weight: normal; // Set the default font weight - transition: font-weight 0.3s; // Add transition for smooth effect - - &:hover { - color: inherit; /* Use the default color on hover */ - background-color: transparent; /* Remove background color on hover */ - font-weight: bold; // Set font weight to bold on hover - } -} -.MuiTab-root .MuiTab-wrapper:hover { - color: inherit; /* Use the default color on hover */ - text-decoration: none; /* Remove underline on hover */ -} - -.nav-tabs { - background: var(--white-ffffff, #FFF); - box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); - .tabs { - text-transform: none; - font-size: 16px; - color: black; - width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - &:hover { - color: black; - } - } - - border: 3px solid #F7F9FA; - overflow-y: auto; - display: flex; - color: black; - align-items: cover; - cursor: pointer; - &:hover { - border-color: $color_2; - transition: color 100ms ease-out; - } -} - #search2 { height: 47px; background: #FFFFFF; @@ -89,3 +46,26 @@ span.MuiTab-wrapper { margin-left: 39px; } +.MuiTabs-scroller.MuiTabs-scrollable > div > a { + max-width: 362px; + margin-bottom: 5px; + text-transform: none; + font-size: 16px; +} + +.MuiTabs-root.custom-tabs.MuiTabs-vertical { + margin-left: auto; +} + +.tabs { + height: 100%; + display: flex; + align-items: center; + gap: 10px; + background: var(--white-ffffff, #FFF); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); +} + +.MuiTab-wrapped { + height: 60px; +} diff --git a/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx b/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx index 6b72201705..fc7a47c985 100644 --- a/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx +++ b/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx @@ -96,7 +96,7 @@ export default class SwaggerUI extends Component { setSwaggerState = () => { const { selectedService, selectedVersion } = this.props; let codeSnippets = null; - if (selectedService.apis.length !== 0) { + if (selectedService && 'apis' in selectedService && selectedService.apis && selectedService.apis.length !== 0) { if ( selectedService.apis[selectedVersion] !== null && selectedService.apis[selectedVersion] !== undefined && From 4fc7f9fda957a36e93d935a0a61a47816d2967be Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Thu, 20 Jul 2023 17:20:16 +0200 Subject: [PATCH 17/46] get version for compare Signed-off-by: at670475 --- .../frontend/src/components/ServiceTab/ServiceTab.jsx | 4 ++++ .../src/components/ServiceVersionDiff/ServiceVersionDiff.css | 4 ++++ .../src/components/ServiceVersionDiff/ServiceVersionDiff.jsx | 4 ++-- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 200a57906a..f16dc8a062 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -19,6 +19,7 @@ export default class ServiceTab extends Component { super(props); this.state = { selectedVersion: null, + previousVersion: null, isDialogOpen: false, }; this.handleDialogClose = this.handleDialogClose.bind(this); @@ -119,6 +120,8 @@ export default class ServiceTab extends Component { } handleDialogOpen = () => { + const { selectedVersion } = this.state; + this.setState({ previousVersion: selectedVersion }); this.setState({ isDialogOpen: true, selectedVersion: 'diff' }); }; @@ -272,6 +275,7 @@ export default class ServiceTab extends Component { {selectedVersion !== 'diff' && } {selectedVersion === 'diff' && isDialogOpen && containsVersion && ( span > svg { + fill: black; +} + .article { padding: 20px; max-width: 960px; diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index f3a1b2c9e2..8773527eba 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -46,7 +46,7 @@ export default class ServiceVersionDiff extends Component { }; render() { - const { serviceId, versions, getDiff, diffText, handleDialog } = this.props; + const { serviceId, versions, getDiff, diffText, handleDialog, selectedVersion } = this.props; const { selectedVersion1, selectedVersion2, open } = this.state; const selectorStyle = { width: '140px', @@ -71,7 +71,7 @@ export default class ServiceVersionDiff extends Component { data-testid="select-1" label="versionSelect1" className="select-diff" - value={selectedVersion1} + value={selectedVersion} onChange={this.handleVersion1Change} sx={selectorStyle} > From 427e9c25427d9cbe60849ae538c4206e1218f3e2 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 21 Jul 2023 17:07:46 +0200 Subject: [PATCH 18/46] fix compare versions Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.css | 9 +++- .../ErrorBoundary/BigShield/BigShield.jsx | 8 ++- .../src/components/ServiceTab/ServiceTab.css | 5 ++ .../src/components/ServiceTab/ServiceTab.jsx | 20 ++++++-- .../ServiceVersionDiff/ServiceVersionDiff.jsx | 15 ++++-- .../ServicesNavigationBar.css | 8 +-- .../ServicesNavigationBar.jsx | 50 ++++++++++--------- .../_serviceNavigationBar.scss | 4 +- 8 files changed, 79 insertions(+), 40 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css index 4950de3057..1e5bdf2324 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css @@ -51,7 +51,7 @@ } .api-description-container { - margin-left: 397px; + margin-left: 375px; padding: 2.2rem; } @@ -129,12 +129,13 @@ div.content-description-container > div > div:nth-child(2) > div { } .nav-bar { + max-width: 380px; min-height: 40vh; flex-direction: column; align-items: center; min-width: 368px; box-shadow: 0 0 6px hsl(210 14% 90%); - padding: 10px 5px 10px 20px; + padding: 10px 5px 16px 20px; flex: 1 0 0; width: auto; height: auto; @@ -164,3 +165,7 @@ div.content-description-container > div > div:nth-child(2) > div { width: 600px; } } + +.MuiTabs-root.custom-tabs.MuiTabs-vertical { + margin-right: 12px; +} diff --git a/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx b/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx index 29156a6f32..7506b68c0c 100644 --- a/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx +++ b/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx @@ -60,7 +60,13 @@ export default class BigShield extends Component {
{!disableButton && (
-
diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css index 759f793c34..21752dcaf5 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css @@ -122,3 +122,8 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { margin-top: 10px; } } + +#no-tiles-error { + font-size: 22px; + color: #CC092F; +} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index f16dc8a062..6b26bbe7c3 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -119,9 +119,17 @@ export default class ServiceTab extends Component { return apiVersions; } - handleDialogOpen = () => { + handleDialogOpen = (currentService) => { const { selectedVersion } = this.state; - this.setState({ previousVersion: selectedVersion }); + // eslint-disable-next-line no-console + console.log(selectedVersion); + // eslint-disable-next-line no-console + console.log(currentService); + if (selectedVersion === null) { + this.setState({ previousVersion: currentService.defaultApiVersion }); + } else { + this.setState({ previousVersion: selectedVersion }); + } this.setState({ isDialogOpen: true, selectedVersion: 'diff' }); }; @@ -152,8 +160,10 @@ export default class ServiceTab extends Component { return ( <> {currentService === null && ( - -

This tile does not contain service "{serviceId}"

+ +

+ The service ID "{serviceId}" does not match any registered service +

)} @@ -265,7 +275,7 @@ export default class ServiceTab extends Component { ? { backgroundColor: '#e4e4e4', color: '#6b6868', opacity: '0.5' } : { backgroundColor: '#fff', color: '#0056B3' } } - onClick={this.handleDialogOpen} + onClick={() => this.handleDialogOpen(currentService)} key="diff" > Compare API Versions diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index 8773527eba..6a69a1ded5 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -25,12 +25,13 @@ import CloseIcon from '@material-ui/icons/Close'; export default class ServiceVersionDiff extends Component { constructor(props) { - const { version1, version2 } = props; + const { version1, version2, selectedVersion } = props; super(props); this.state = { selectedVersion1: version1 ? { text: version1 } : undefined, selectedVersion2: version2 ? { text: version2 } : undefined, open: props.isDialogOpen, + defaultVersion: selectedVersion, }; this.handleVersion1Change = this.handleVersion1Change.bind(this); @@ -38,6 +39,7 @@ export default class ServiceVersionDiff extends Component { } handleVersion1Change = (event) => { + this.setState({ defaultVersion: null }); this.setState({ selectedVersion1: event.target.value }); }; @@ -46,7 +48,7 @@ export default class ServiceVersionDiff extends Component { }; render() { - const { serviceId, versions, getDiff, diffText, handleDialog, selectedVersion } = this.props; + const { serviceId, versions, getDiff, diffText, handleDialog } = this.props; const { selectedVersion1, selectedVersion2, open } = this.state; const selectorStyle = { width: '140px', @@ -71,7 +73,8 @@ export default class ServiceVersionDiff extends Component { data-testid="select-1" label="versionSelect1" className="select-diff" - value={selectedVersion} + displayEmpty + value={this.state.defaultVersion || selectedVersion1} onChange={this.handleVersion1Change} sx={selectorStyle} > @@ -105,7 +108,11 @@ export default class ServiceVersionDiff extends Component { id="diff-button" data-testid="diff-button" onClick={() => { - getDiff(serviceId, selectedVersion1, selectedVersion2); + if (this.state.defaultVersion) { + getDiff(serviceId, this.state.defaultVersion, selectedVersion2); + } else { + getDiff(serviceId, selectedVersion1, selectedVersion2); + } }} > Show diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index 110e23e5ca..9f0994ad0f 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -24,15 +24,14 @@ gap: 10px; width: auto; background: var(--white-ffffff, #FFF); - box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); + box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.25); } #search2 { height: 47px; background: #FFFFFF; border: 1px solid #C9C8C5; - margin-right: 15px; - margin-bottom: 9px; + margin: 5px 12px 9px -4px; } #search2 > div > div > input { @@ -46,6 +45,7 @@ #serviceIdTabs { margin-bottom: 10px; + margin-left: -4px; } .MuiTab-root :hover { @@ -65,6 +65,8 @@ span.MuiTab-wrapper { } .MuiTabs-scroller.MuiTabs-scrollable > div > a { + margin-left: 8px; + margin-right: 2px; max-width: 370px; margin-bottom: 5px; text-transform: none; diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx index 60d6079f07..22263756c6 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx @@ -39,7 +39,7 @@ export default class ServicesNavigationBar extends Component { styles = () => ({ truncatedTabLabel: { - maxWidth: 340, + maxWidth: '323px', width: 'max-content', whiteSpace: 'nowrap', overflow: 'hidden', @@ -71,34 +71,36 @@ export default class ServicesNavigationBar extends Component { Product APIs - - {services.map((tile, tileIndex) => - tile.services.map((service, serviceIndex) => ( - this.handleTabClick(service.serviceId)} - key={service.serviceId} - className="tabs" - component={RouterLink} - to={`${match.url}/${service.serviceId}`} - value={tileIndex * services.length + serviceIndex} - label={} - wrapped - /> - )) - )} - {!hasTiles && hasSearchCriteria && ( No services found matching search criteria )} + {hasTiles && ( + + {services.map((tile, tileIndex) => + tile.services.map((service, serviceIndex) => ( + this.handleTabClick(service.serviceId)} + key={service.serviceId} + className="tabs" + component={RouterLink} + to={`${match.url}/${service.serviceId}`} + value={tileIndex * services.length + serviceIndex} + label={} + wrapped + /> + )) + )} + + )}
); } diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index ee36836171..31172a5c75 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -3,10 +3,11 @@ $background-color_1: #EFEFEF; $color_2: #CC092F; #search2 { + margin-top: 10px; height: 47px; background: #FFFFFF; border: 1px solid #C9C8C5; - margin-right: 15px; + margin-right: 12px; margin-bottom: 9px; >div { >div { @@ -47,6 +48,7 @@ span.MuiTab-wrapper { } .MuiTabs-scroller.MuiTabs-scrollable > div > a { + background: var(--white-ffffff, #FFF); max-width: 362px; margin-bottom: 5px; text-transform: none; From 65799b10174f072e9a29de5eaffe1055c5addc06 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sat, 22 Jul 2023 13:30:41 +0200 Subject: [PATCH 19/46] add tests Signed-off-by: at670475 --- .../src/components/ServiceTab/ServiceTab.jsx | 12 ++++++++--- .../components/ServiceTab/ServiceTab.test.jsx | 20 +++++++++++++++++++ 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 6b26bbe7c3..2ce0166352 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -303,7 +303,9 @@ export default class ServiceTab extends Component { Use Cases ({useCasesCounter})
- {useCasesCounter === 0 && There are no Use Cases.} + {useCasesCounter === 0 && ( + There are no Use Cases. + )}

- {tutorialsCounter === 0 && There are no Tutorials.} + {tutorialsCounter === 0 && ( + There are no Tutorials. + )}

- {videosCounter === 0 && There are no Videos.} + {videosCounter === 0 && ( + There are no Videos. + )}
)} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index 5ddedc695b..9a0e973002 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -136,4 +136,24 @@ describe('>>> ServiceTab component tests', () => { ) ).toThrow('No tile is selected.'); }); + + it('should display default message for custom portal', () => { + process.env.REACT_APP_API_PORTAL = true; + const selectService = jest.fn(); + const serviceTab = shallow( + + ); + expect(serviceTab.find('.footer-labels').exists()).toEqual(true); + expect(serviceTab.find('.footer-labels').children().at(0).text()).toContain('Use Cases'); + expect(serviceTab.find('.footer-labels').children().at(2).text()).toContain('Tutorials'); + expect(serviceTab.find('.footer-labels').children().at(4).text()).toContain('Videos'); + expect(serviceTab.find('[data-testid="no-use-cases"]').text()).toBe('There are no Use Cases.'); + expect(serviceTab.find('[data-testid="no-tutorials"]').text()).toBe('There are no Tutorials.'); + expect(serviceTab.find('[data-testid="no-videos"]').text()).toBe('There are no Videos.'); + }); }); From 892053345ce8fffa58c04297340cb87beca0ea99 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Sat, 22 Jul 2023 13:36:02 +0200 Subject: [PATCH 20/46] add test Signed-off-by: at670475 --- .../ServiceNavigationBar.test.jsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx index 96bef42675..36a05ac2a0 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx @@ -82,4 +82,19 @@ describe('>>> ServiceNavigationBar component tests', () => { expect(serviceNavigationBar.find('#serviceIdTabs')).toExist(); expect(serviceNavigationBar.find('#serviceIdTabs').text()).toEqual('Product APIs'); }); + + it('should set current tile id', () => { + const storeCurrentTileId = jest.fn(); + const serviceNavigationBar = shallow( + + ); + const instance = serviceNavigationBar.instance(); + instance.handleTabClick('apicatalog'); + expect(storeCurrentTileId).toHaveBeenCalled(); + }); }); From 39a99ca62a4c82caf250ea56f5914461c7935734 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 11:53:10 +0200 Subject: [PATCH 21/46] increase coverage Signed-off-by: at670475 --- .../src/components/ServiceTab/ServiceTab.jsx | 4 ---- .../ServiceVersionDiff/ServiceVersionDiff.test.jsx | 10 ++++++++++ .../frontend/src/utils/utilFunctions.test.js | 12 ++++++++++++ 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 2ce0166352..05d6645c20 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -121,10 +121,6 @@ export default class ServiceTab extends Component { handleDialogOpen = (currentService) => { const { selectedVersion } = this.state; - // eslint-disable-next-line no-console - console.log(selectedVersion); - // eslint-disable-next-line no-console - console.log(currentService); if (selectedVersion === null) { this.setState({ previousVersion: currentService.defaultApiVersion }); } else { diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx index 03ede6eee9..5225f5e153 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx @@ -53,4 +53,14 @@ describe('>>> ServiceVersionDiff component tests', () => { serviceVersionDiff.find('[data-testid="diff-button"]').first().simulate('click'); expect(getDiff.mock.calls.length).toBe(1); }); + + it('Should call getDiff when default version', () => { + const getDiff = jest.fn(); + const serviceVersionDiff = shallow( + + ); + + serviceVersionDiff.find('[data-testid="diff-button"]').first().simulate('click'); + expect(getDiff.mock.calls.length).toBe(1); + }); }); diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js index 4212e2294b..74a57c8317 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js @@ -38,6 +38,7 @@ describe('>>> Util Functions tests', () => {
+

`; }); @@ -119,6 +120,7 @@ describe('>>> Util Functions tests', () => { const wizardButton = document.querySelector('#onboard-wizard-button > span.MuiButton-label'); const refreshButton = document.querySelector('#refresh-api-button > span.MuiIconButton-label'); const link = document.querySelector("link[rel~='icon']"); + const tileLabel = document.querySelector('p#tileLabel'); expect(link.href).toContain('img-url'); expect(header.style.getPropertyValue('background-color')).toBe('white'); expect(title.style.getPropertyValue('color')).toBe('black'); @@ -127,9 +129,19 @@ describe('>>> Util Functions tests', () => { expect(swaggerLabel.style.getPropertyValue('color')).toBe('black'); expect(wizardButton.style.getPropertyValue('color')).toBe('black'); expect(refreshButton.style.getPropertyValue('color')).toBe('black'); + expect(tileLabel.style.getPropertyValue('font-family')).toBe('Arial'); expect(document.documentElement.style.backgroundColor).toBe('blue'); // Clean up the mocks jest.restoreAllMocks(); global.fetch.mockRestore(); }); + + it('should return network error when fetching image', async () => { + const uiConfig = { + logo: '/wrong-path/img.png', + }; + + global.fetch = () => Promise.resolve({ ok: false, status: 404 }); + await expect(customUIStyle(uiConfig)).rejects.toThrow('Network response was not ok'); + }); }); From da7f2d331910c3ff5846fd822b106542af50c21d Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 12:13:11 +0200 Subject: [PATCH 22/46] fix small bug Signed-off-by: at670475 --- .../src/components/ServiceVersionDiff/ServiceVersionDiff.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index 6a69a1ded5..646b696313 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -104,7 +104,7 @@ export default class ServiceVersionDiff extends Component { { From e287f093cb7af340616747591a6ebafcbbb39441 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 12:25:45 +0200 Subject: [PATCH 23/46] fix Signed-off-by: at670475 --- .../src/components/ServiceVersionDiff/ServiceVersionDiff.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index 646b696313..25444cd21d 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -38,6 +38,10 @@ export default class ServiceVersionDiff extends Component { this.handleVersion2Change = this.handleVersion2Change.bind(this); } + componentDidMount() { + this.setState({ selectedVersion1: null, selectedVersion2: null }); + } + handleVersion1Change = (event) => { this.setState({ defaultVersion: null }); this.setState({ selectedVersion1: event.target.value }); From 0ffa31fc456311008c22f31907d7b329e0e2800e Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 15:58:03 +0200 Subject: [PATCH 24/46] fix e2e test Signed-off-by: at670475 --- .../e2e/detail-page/service-version-compare.test.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/api-catalog-ui/frontend/cypress/integration/e2e/detail-page/service-version-compare.test.js b/api-catalog-ui/frontend/cypress/integration/e2e/detail-page/service-version-compare.test.js index f003e58898..65059a48e4 100644 --- a/api-catalog-ui/frontend/cypress/integration/e2e/detail-page/service-version-compare.test.js +++ b/api-catalog-ui/frontend/cypress/integration/e2e/detail-page/service-version-compare.test.js @@ -39,8 +39,10 @@ describe('>>> Service version compare Test', () => { it('Should show compare tab', () => { // Location of the compare has changed, it's no longer a specific tab cy.get('.tabs-container').should('not.exist'); - cy.get('.nav-tabs').should('exist'); - cy.get('.nav-tabs').should('have.length', 12); + cy.get('div.MuiTabs-root.custom-tabs.MuiTabs-vertical > div.MuiTabs-scroller.MuiTabs-scrollable > div').should('exist'); + cy.get('div.MuiTabs-flexContainer.MuiTabs-flexContainerVertical') // Select the parent div + .find('a.MuiTab-root') // Find all the anchor elements within the div + .should('have.length', 12); // Check if there are 12 anchor elements within the div cy.get('.version-text').should('exist'); cy.get('.version-text').should('contain.text', 'Compare'); }); From aefb9a4a909ec13ca5c64be1d16d7e850fbb144e Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 16:18:49 +0200 Subject: [PATCH 25/46] add border color when hover/select tab Signed-off-by: at670475 --- .../ServicesNavigationBar.css | 27 +++++++------------ .../_serviceNavigationBar.scss | 12 +++++++++ 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index 9f0994ad0f..102def9524 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -1,17 +1,3 @@ -.nav-bar.custom-tabs.MuiTab-wrapped:hover { - border-color: #50b7f5; - background-color: #efefef; - color: #50b7f5; - transition: color 100ms ease-out; -} - -.nav-bar.custom-tabs.Mui-selected { - border-color: #50b7f5; - background-color: #efefef; - color: #50b7f5; - transition: color 100ms ease-out; -} - #search_no_results { color: #1d5bbf; } @@ -49,9 +35,8 @@ } .MuiTab-root :hover { - border-color: #50b7f5; background-color: #efefef; - color: #50b7f5; + color: #0056B3; transition: color 100ms ease-out; } @@ -81,5 +66,13 @@ span.MuiTab-wrapper { } .custom-tabs .MuiTabs-indicator { - background-color: #0056B3; /* Replace with your desired color */ + display: none; +} + +.custom-tabs .tabs:hover { + border: 4px solid #0056B3; +} + +.custom-tabs .tabs.Mui-selected { + border: 4px solid #0056B3; } diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index 31172a5c75..05636710ee 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -71,3 +71,15 @@ span.MuiTab-wrapper { .MuiTab-wrapped { height: 60px; } + +.custom-tabs .MuiTabs-indicator { + display: none; +} + +.custom-tabs .tabs:hover { + border: 4px solid $color_2; +} + +.custom-tabs .tabs.Mui-selected { + border: 4px solid $color_2; +} From 5e6bdf414bf96418639282373d54325bbb3a9b73 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 24 Jul 2023 17:08:52 +0200 Subject: [PATCH 26/46] fix anchors Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.jsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index be42032995..f9162c355b 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -41,6 +41,12 @@ export default class DetailPage extends Component { history.push('/dashboard'); }; + handleLinkClick = (e, id) => { + e.preventDefault(); + const elementToView = document.querySelector(id); + elementToView.scrollIntoView(); + }; + render() { const { tiles, @@ -134,16 +140,22 @@ export default class DetailPage extends Component { On this page - + this.handleLinkClick(e, '#swagger-label')}> Swagger - + this.handleLinkClick(e, '#use-cases-label')} + > Use cases - + this.handleLinkClick(e, '#tutorials-label')} + > Tutorials - + this.handleLinkClick(e, '#videos-label')}> Videos From a7794ee4867715060f2f3264a34be7f27f1f09be Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 11:57:00 +0200 Subject: [PATCH 27/46] fix media icons and search bar Signed-off-by: at670475 --- .../src/components/Dashboard/_dashboard.scss | 3 ++ .../frontend/src/components/Login/Login.css | 2 +- .../frontend/src/components/Tile/_tile.scss | 36 ++++++++++++++++--- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index 16a8192448..e4ea83a1ef 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -91,3 +91,6 @@ display: block; } +.dashboard-content #search .MuiFormControl-root { + display: contents; +} diff --git a/api-catalog-ui/frontend/src/components/Login/Login.css b/api-catalog-ui/frontend/src/components/Login/Login.css index f645b79252..78c17b8e58 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.css +++ b/api-catalog-ui/frontend/src/components/Login/Login.css @@ -15,7 +15,7 @@ background-repeat: no-repeat; display: flex; flex: auto; - height: 100%; + height: 100vh; padding-bottom: 0; } diff --git a/api-catalog-ui/frontend/src/components/Tile/_tile.scss b/api-catalog-ui/frontend/src/components/Tile/_tile.scss index 5f933eb63a..fe25a40ffe 100644 --- a/api-catalog-ui/frontend/src/components/Tile/_tile.scss +++ b/api-catalog-ui/frontend/src/components/Tile/_tile.scss @@ -59,11 +59,6 @@ body { } } - #media-icons { - position: absolute; - right: 186px; - } - #videos { margin-right: 120px; width: 30px; @@ -74,6 +69,10 @@ body { height: 20px; } + .MuiCardContent-root.tile { + display: flex; + } + @media only screen and (max-width: 1500px) { #media-icons { position: relative; @@ -117,3 +116,30 @@ body { margin-right: 5px; } } + +/* CSS styles for the container holding all the tiles */ +.grid-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +/* CSS styles for each individual tile */ +.grid-item { + flex: 0 0 calc(25% - 16px); + margin: 8px; + position: relative; /* Add relative positioning to the tile */ +} + +/* CSS styles for media-icons group within each tile */ +#media-icons { + margin-right: -102px; + display: flex; + align-items: center; + justify-content: flex-end; + position: absolute; /* Use absolute positioning for the icons container */ + right: 0; /* Align the icons container to the right side of the tile */ + top: 50%; /* Vertically center the icons container */ + transform: translateY(-50%); /* Correct the vertical alignment */ +} + From 094cb6ed2108351836b98fe092fe5e505798ba37 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 12:23:44 +0200 Subject: [PATCH 28/46] add test Signed-off-by: at670475 --- .../components/DetailPage/DetailPage.test.jsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx index 39b36b2528..7189c3fcd8 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx @@ -228,4 +228,27 @@ describe('>>> Detailed Page component tests', () => { expect(clearService).toHaveBeenCalled(); expect(fetchTilesStart).toHaveBeenCalled(); }); + + it('should display nav right menu', () => { + process.env.REACT_APP_API_PORTAL = true; + const fetchTilesStart = jest.fn(); + const fetchNewTiles = jest.fn(); + const history = { + push: jest.fn(), + pathname: jest.fn(), + }; + const wrapper = shallow( + + ); + expect(wrapper.find('#right-resources-menu').exists()).toEqual(true); + }); }); From e0bc65e1354605b4965153ed8abe6a3dc817dee9 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 14:20:46 +0200 Subject: [PATCH 29/46] small changes Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.jsx | 22 +++-- .../components/DetailPage/_detailPage.scss | 2 +- .../src/components/ServiceTab/ServiceTab.jsx | 95 +++++++++---------- .../components/ServiceTab/ServiceTab.test.jsx | 10 +- 4 files changed, 61 insertions(+), 68 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index f9162c355b..9f1e587b03 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -108,16 +108,18 @@ export default class DetailPage extends Component { {!isLoading && !fetchTilesError && (
- - {iconBack} - Back - + {!apiPortalEnabled && ( + + {iconBack} + Back + + )}
{tiles !== undefined && tiles.length === 1 && ( diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 221d779ae6..2455a83795 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -113,7 +113,7 @@ body .detail-content { box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 14px; margin-right: 30px; - margin-top: -119px; + margin-top: -60px; } /* Extra small devices (phones, 1361px and down) */ diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 05d6645c20..a4b9ff5d37 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -152,7 +152,9 @@ export default class ServiceTab extends Component { const { containsVersion } = this; const message = 'The API documentation was retrieved but could not be displayed.'; const sso = selectedService.ssoAllInstances ? 'supported' : 'not supported'; + const apiPortalEnabled = isAPIPortal(); const { useCasesCounter, tutorialsCounter, videosCounter } = countAdditionalContents(currentService); + const additionalContentsPresent = useCasesCounter !== 0 && tutorialsCounter !== 0 && videosCounter !== 0; return ( <> {currentService === null && ( @@ -165,10 +167,12 @@ export default class ServiceTab extends Component {
- - {selectedService.title} - - {hasHomepage && ( + {!apiPortalEnabled && ( + + {selectedService.title} + + )} + {hasHomepage && !apiPortalEnabled && ( <> {selectedService.status === 'UP' && ( )} -
- - - {/* eslint-disable-next-line jsx-a11y/label-has-for */} - - {basePath} - - - - - {/* eslint-disable-next-line jsx-a11y/label-has-for */} - - {selectedService.serviceId} - - - - - {/* eslint-disable-next-line jsx-a11y/label-has-for */} - - {sso} - - -
+ {!apiPortalEnabled && ( +
+ + + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + {basePath} + + + + + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + {selectedService.serviceId} + + + + + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + {sso} + + +
+ )} )} - {isAPIPortal() && ( + {isAPIPortal() && additionalContentsPresent && ( )}
diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index 9a0e973002..476be9248d 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -137,7 +137,7 @@ describe('>>> ServiceTab component tests', () => { ).toThrow('No tile is selected.'); }); - it('should display default message for custom portal', () => { + it('should not display default footer for custom portal in case of no additional content', () => { process.env.REACT_APP_API_PORTAL = true; const selectService = jest.fn(); const serviceTab = shallow( @@ -148,12 +148,6 @@ describe('>>> ServiceTab component tests', () => { selectService={selectService} /> ); - expect(serviceTab.find('.footer-labels').exists()).toEqual(true); - expect(serviceTab.find('.footer-labels').children().at(0).text()).toContain('Use Cases'); - expect(serviceTab.find('.footer-labels').children().at(2).text()).toContain('Tutorials'); - expect(serviceTab.find('.footer-labels').children().at(4).text()).toContain('Videos'); - expect(serviceTab.find('[data-testid="no-use-cases"]').text()).toBe('There are no Use Cases.'); - expect(serviceTab.find('[data-testid="no-tutorials"]').text()).toBe('There are no Tutorials.'); - expect(serviceTab.find('[data-testid="no-videos"]').text()).toBe('There are no Videos.'); + expect(serviceTab.find('.footer-labels').exists()).toEqual(false); }); }); From cc62067ffb0924b4ce5c0ed4b5a6fbaba7ab7f61 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 14:22:45 +0200 Subject: [PATCH 30/46] fix code smell Signed-off-by: at670475 --- .../frontend/src/components/Dashboard/_dashboard.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index e4ea83a1ef..41e21b3940 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -4,6 +4,9 @@ .header, .header > * { align-items: center; } + #search .MuiFormControl-root { + display: contents; + } h1 { margin: var( --spaceMedium ) 0; padding-bottom: var( --spaceMedium ); @@ -90,7 +93,3 @@ width: 99%; display: block; } - -.dashboard-content #search .MuiFormControl-root { - display: contents; -} From a1bcf62249bf06c9c859c9fe040024cf764cc600 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 15:45:22 +0200 Subject: [PATCH 31/46] increase coverage Signed-off-by: at670475 --- .../src/components/Dashboard/_dashboard.scss | 3 -- .../src/components/DetailPage/DetailPage.jsx | 4 +- .../components/DetailPage/DetailPage.test.jsx | 47 +++++++++++++++++++ .../components/DetailPage/_detailPage.scss | 4 +- .../ServiceVersionDiff.test.jsx | 11 +++++ 5 files changed, 64 insertions(+), 5 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index 41e21b3940..6fc5e63a12 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -31,9 +31,6 @@ margin-right: auto; background: #FFFFFF; border: 1px solid #C9C8C5; - .MuiFormControl-root { - display: flex; - } } #grid-container , diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index 9f1e587b03..bc1e6cbe3b 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -44,7 +44,9 @@ export default class DetailPage extends Component { handleLinkClick = (e, id) => { e.preventDefault(); const elementToView = document.querySelector(id); - elementToView.scrollIntoView(); + if (elementToView) { + elementToView.scrollIntoView(); + } }; render() { diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx index 7189c3fcd8..63a8a76837 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx @@ -251,4 +251,51 @@ describe('>>> Detailed Page component tests', () => { ); expect(wrapper.find('#right-resources-menu').exists()).toEqual(true); }); + + it('should click', () => { + process.env.REACT_APP_API_PORTAL = true; + const fetchTilesStart = jest.fn(); + const fetchNewTiles = jest.fn(); + const history = { + push: jest.fn(), + pathname: jest.fn(), + }; + const mockHandleLinkClick = jest.fn(); + const mockEvent = { preventDefault: jest.fn() }; + const mockElementToView = { scrollIntoView: jest.fn() }; + document.querySelector = jest.fn().mockReturnValue(mockElementToView); + const wrapper = shallow( + + ); + // Simulate a click event on the Link component, providing the id as the second argument + wrapper.instance().handleLinkClick(mockEvent, '#swagger-label'); + expect(mockEvent.preventDefault).toHaveBeenCalled(); + expect(document.querySelector).toHaveBeenCalledWith('#swagger-label'); + expect(mockElementToView.scrollIntoView).toHaveBeenCalled(); + + wrapper.instance().handleLinkClick(mockEvent, '#use-cases-label'); + expect(mockEvent.preventDefault).toHaveBeenCalled(); + expect(document.querySelector).toHaveBeenCalledWith('#use-cases-label'); + expect(mockElementToView.scrollIntoView).toHaveBeenCalled(); + + wrapper.instance().handleLinkClick(mockEvent, '#videos-label'); + expect(mockEvent.preventDefault).toHaveBeenCalled(); + expect(document.querySelector).toHaveBeenCalledWith('#videos-label'); + expect(mockElementToView.scrollIntoView).toHaveBeenCalled(); + + wrapper.instance().handleLinkClick(mockEvent, '#tutorials-label'); + expect(mockEvent.preventDefault).toHaveBeenCalled(); + expect(document.querySelector).toHaveBeenCalledWith('#tutorials-label'); + expect(mockElementToView.scrollIntoView).toHaveBeenCalled(); + }); }); diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 2455a83795..3541fb452c 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -105,7 +105,9 @@ body .detail-content { #right-resources-menu { position: relative; float: right; - display: flex; + // Hidden for the timebeing until we won't have additional content + display: none; + //display: flex; flex-direction: column; align-items: flex-start; border-radius: 4px; diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx index 5225f5e153..d571a0fd7a 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.test.jsx @@ -63,4 +63,15 @@ describe('>>> ServiceVersionDiff component tests', () => { serviceVersionDiff.find('[data-testid="diff-button"]').first().simulate('click'); expect(getDiff.mock.calls.length).toBe(1); }); + + it('should set current tile id with default version', () => { + const getDiff = jest.fn(); + const serviceVersionDiff = shallow( + + ); + serviceVersionDiff.setState({ defaultVersion: 'v1' }); + + serviceVersionDiff.find('[data-testid="diff-button"]').first().simulate('click'); + expect(getDiff.mock.calls.length).toBe(1); + }); }); From ce45ae803b84a7924ceb62bbde1e4aa1bbf35a5c Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 16:03:34 +0200 Subject: [PATCH 32/46] add check and hide right menu in case only swagger present Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.jsx | 19 +++++++++++++------ .../components/DetailPage/_detailPage.scss | 4 +--- .../src/components/ServiceTab/ServiceTab.jsx | 4 +++- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index bc1e6cbe3b..fab194fe06 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -18,7 +18,7 @@ import PageNotFound from '../PageNotFound/PageNotFound'; import BigShield from '../ErrorBoundary/BigShield/BigShield'; import ServicesNavigationBarContainer from '../ServicesNavigationBar/ServicesNavigationBarContainer'; import Shield from '../ErrorBoundary/Shield/Shield'; -import { customUIStyle, isAPIPortal } from '../../utils/utilFunctions'; +import countAdditionalContents, { customUIStyle, isAPIPortal } from '../../utils/utilFunctions'; export default class DetailPage extends Component { componentDidMount() { @@ -77,6 +77,8 @@ export default class DetailPage extends Component { } const apiPortalEnabled = isAPIPortal(); const hasTiles = !fetchTilesError && tiles && tiles.length > 0; + const { useCasesCounter, tutorialsCounter, videosCounter } = countAdditionalContents(services); + const onlySwaggerPresent = tutorialsCounter === 0 && videosCounter === 0 && useCasesCounter === 0; if (hasTiles && 'customStyleConfig' in tiles[0] && tiles[0].customStyleConfig) { customUIStyle(tiles[0].customStyleConfig); } @@ -138,7 +140,7 @@ export default class DetailPage extends Component { )}
- {apiPortalEnabled && ( + {apiPortalEnabled && !onlySwaggerPresent && (
On this page @@ -151,16 +153,16 @@ export default class DetailPage extends Component { className="links" onClick={(e) => this.handleLinkClick(e, '#use-cases-label')} > - Use cases + Use cases ({useCasesCounter}) this.handleLinkClick(e, '#tutorials-label')} > - Tutorials + Tutorials ({tutorialsCounter}) this.handleLinkClick(e, '#videos-label')}> - Videos + Videos ({videosCounter})
@@ -184,7 +186,12 @@ export default class DetailPage extends Component { path={`${match.path}/:serviceId`} render={() => (
- +
)} /> diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 3541fb452c..2455a83795 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -105,9 +105,7 @@ body .detail-content { #right-resources-menu { position: relative; float: right; - // Hidden for the timebeing until we won't have additional content - display: none; - //display: flex; + display: flex; flex-direction: column; align-items: flex-start; border-radius: 4px; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index a4b9ff5d37..4da9241192 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -140,6 +140,9 @@ export default class ServiceTab extends Component { }, tiles, selectedService, + useCasesCounter, + tutorialsCounter, + videosCounter, } = this.props; if (tiles === null || tiles === undefined || tiles.length === 0) { throw new Error('No tile is selected.'); @@ -153,7 +156,6 @@ export default class ServiceTab extends Component { const message = 'The API documentation was retrieved but could not be displayed.'; const sso = selectedService.ssoAllInstances ? 'supported' : 'not supported'; const apiPortalEnabled = isAPIPortal(); - const { useCasesCounter, tutorialsCounter, videosCounter } = countAdditionalContents(currentService); const additionalContentsPresent = useCasesCounter !== 0 && tutorialsCounter !== 0 && videosCounter !== 0; return ( <> From 3e6e0cd0ce5ef70765091730632a98999db51ae0 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 16:10:17 +0200 Subject: [PATCH 33/46] adjust internal doc img size Signed-off-by: at670475 --- api-catalog-ui/frontend/src/components/Header/_header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Header/_header.scss b/api-catalog-ui/frontend/src/components/Header/_header.scss index c7c0de93bf..faf06ac4a8 100644 --- a/api-catalog-ui/frontend/src/components/Header/_header.scss +++ b/api-catalog-ui/frontend/src/components/Header/_header.scss @@ -68,8 +68,8 @@ body { #img-internal-link { margin-right: 20px; margin-left: 12px; - height: 16px; - width: 16px; + height: 15px; + width: 15px; } }//end header } From 3dadb222f99bd915ac70d506786ee705af1b0b86 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 16:43:19 +0200 Subject: [PATCH 34/46] fix tests Signed-off-by: at670475 --- .../frontend/src/components/DetailPage/DetailPage.test.jsx | 7 +++++-- .../frontend/src/components/ServiceTab/ServiceTab.jsx | 2 +- .../frontend/src/components/ServiceTab/ServiceTab.test.jsx | 4 ++-- api-catalog-ui/frontend/src/selectors/selectors.jsx | 6 +----- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx index 63a8a76837..d7c904f923 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx @@ -237,10 +237,13 @@ describe('>>> Detailed Page component tests', () => { push: jest.fn(), pathname: jest.fn(), }; + tile.services[0].videos = ['video1', 'video2']; + tile.services[0].tutorials = ['tutorial1', 'tutorial2']; + tile.services[0].useCases = ['useCase1', 'useCase2']; const wrapper = shallow( >> Detailed Page component tests', () => { expect(wrapper.find('#right-resources-menu').exists()).toEqual(true); }); - it('should click', () => { + it('should click on the links', () => { process.env.REACT_APP_API_PORTAL = true; const fetchTilesStart = jest.fn(); const fetchNewTiles = jest.fn(); diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 4da9241192..970d8086d3 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -12,7 +12,7 @@ import { Component } from 'react'; import Shield from '../ErrorBoundary/Shield/Shield'; import SwaggerContainer from '../Swagger/SwaggerContainer'; import ServiceVersionDiffContainer from '../ServiceVersionDiff/ServiceVersionDiffContainer'; -import countAdditionalContents, { isAPIPortal } from '../../utils/utilFunctions'; +import { isAPIPortal } from '../../utils/utilFunctions'; export default class ServiceTab extends Component { constructor(props) { diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index 476be9248d..7784f925ac 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -137,7 +137,7 @@ describe('>>> ServiceTab component tests', () => { ).toThrow('No tile is selected.'); }); - it('should not display default footer for custom portal in case of no additional content', () => { + it('should display default footer for custom portal in case of additional content', () => { process.env.REACT_APP_API_PORTAL = true; const selectService = jest.fn(); const serviceTab = shallow( @@ -148,6 +148,6 @@ describe('>>> ServiceTab component tests', () => { selectService={selectService} /> ); - expect(serviceTab.find('.footer-labels').exists()).toEqual(false); + expect(serviceTab.find('.footer-labels').exists()).toEqual(true); }); }); diff --git a/api-catalog-ui/frontend/src/selectors/selectors.jsx b/api-catalog-ui/frontend/src/selectors/selectors.jsx index 63bccc2b12..41a166bb58 100644 --- a/api-catalog-ui/frontend/src/selectors/selectors.jsx +++ b/api-catalog-ui/frontend/src/selectors/selectors.jsx @@ -21,11 +21,7 @@ function filterService(searchCriteria, service) { if (!service.title) { return false; } - let matchDoc = false; - if (service.apiDoc) { - matchDoc = service.apiDoc.toLowerCase().includes(searchCriteria.toLowerCase()); - } - return service.title.toLowerCase().includes(searchCriteria.toLowerCase()) || matchDoc; + return service.title.toLowerCase().includes(searchCriteria.toLowerCase()); } function compareResult(searchCriteria, tile, filteredServices) { From 4505ddad9c439a155f4bc20eb752ff2105828149 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Tue, 25 Jul 2023 16:49:10 +0200 Subject: [PATCH 35/46] fix tests Signed-off-by: at670475 --- .../components/ServiceTab/ServiceTab.test.jsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index 7784f925ac..bca1d08f4c 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -146,8 +146,30 @@ describe('>>> ServiceTab component tests', () => { selectedService={selectedService} tiles={[tiles]} selectService={selectService} + useCasesCounter={1} + videosCounter={2} + tutorialsCounter={1} /> ); expect(serviceTab.find('.footer-labels').exists()).toEqual(true); + expect(serviceTab.find('#detail-footer').exists()).toEqual(true); + }); + + it('should not display default footer for custom portal in case there is not additional content', () => { + process.env.REACT_APP_API_PORTAL = true; + const selectService = jest.fn(); + const serviceTab = shallow( + + ); + expect(serviceTab.find('.footer-labels').exists()).toEqual(false); + expect(serviceTab.find('#detail-footer').exists()).toEqual(false); }); }); From 83c636aac3958db7406f3bf2dc8fdc1a46154a65 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Wed, 26 Jul 2023 14:40:44 +0200 Subject: [PATCH 36/46] address PR comments Signed-off-by: at670475 --- .../src/components/Dashboard/Dashboard.css | 19 ++++++++++ .../src/components/Dashboard/_dashboard.scss | 37 +++++++++++++++++++ .../frontend/src/components/Login/Login.css | 6 +++ .../frontend/src/components/Login/Login.jsx | 10 +---- .../src/components/Search/_search.scss | 3 +- .../src/components/ServiceTab/ServiceTab.jsx | 6 ++- .../ServiceVersionDiff/ServiceVersionDiff.jsx | 6 +-- .../ServicesNavigationBar.css | 4 ++ .../_serviceNavigationBar.scss | 7 ++++ .../frontend/src/utils/utilFunctions.js | 14 ++----- 10 files changed, 86 insertions(+), 26 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css index 92904fc05a..926aa70bd5 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css +++ b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css @@ -126,6 +126,25 @@ a { border: 1px solid #C9C8C5; } +#search > div > div > div > #search-icon { + margin-left: 168px; +} + +#search-input > svg { + margin-left: 168px; +} + +/* For Firefox */ +@-moz-document url-prefix() { + #search > div > div > div > #search-icon { + margin-left: 125px; + } + #search-input > svg { + margin-left: 125px; + } +} + + #search_no_results { color: #1d5bbf; } diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index 6fc5e63a12..1a790f6374 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -24,6 +24,7 @@ left: calc(50% - #{calc(var( --headerLineWidth ) / 2)}); } } + #search { height: 50px; width: 422px; @@ -31,6 +32,21 @@ margin-right: auto; background: #FFFFFF; border: 1px solid #C9C8C5; + + display: flex; + >div { + >div { + >input { + margin-left: auto; + position: static; + } + >div { + >#search-icon { + margin-left: 156px; + } + } + } + } } #grid-container , @@ -68,7 +84,28 @@ color: var( --text20 ); position: relative; left: var( --spaceSmaller ); + margin-top: 0px; + margin-left: 156px; } + + /* For Firefox */ + @-moz-document url-prefix() { + .MuiSvgIcon-root { + margin-left: 130px; + } + #search { + >div { + >div { + >div { + >#search-icon { + margin-left: 130px; + } + } + } + } + } + } + .MuiInputBase-input { margin-top: auto; margin-left: 10px; diff --git a/api-catalog-ui/frontend/src/components/Login/Login.css b/api-catalog-ui/frontend/src/components/Login/Login.css index 78c17b8e58..bf75e309a8 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.css +++ b/api-catalog-ui/frontend/src/components/Login/Login.css @@ -8,6 +8,12 @@ right: 6rem; } +#spinner { + position: absolute; + z-index: 1; + margin-left: -64px; +} + .login-object { overflow: hidden; background-image: url("../../assets/images/zowe-background.jpg"); diff --git a/api-catalog-ui/frontend/src/components/Login/Login.jsx b/api-catalog-ui/frontend/src/components/Login/Login.jsx index eceb119349..5848baf7cf 100644 --- a/api-catalog-ui/frontend/src/components/Login/Login.jsx +++ b/api-catalog-ui/frontend/src/components/Login/Login.jsx @@ -185,15 +185,7 @@ function Login(props) { return (
- +
div { >div { >input { + margin-left: -190px; font-style: italic; width: auto; } @@ -56,7 +57,7 @@ svg.MuiSvgIcon-root.clear-text-search { margin-left: 142px; } #search-icon { - margin-left: 142px; + //margin-left: 142px; position: relative; float: left; width: auto; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 970d8086d3..dcdd93eb67 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -126,7 +126,11 @@ export default class ServiceTab extends Component { } else { this.setState({ previousVersion: selectedVersion }); } - this.setState({ isDialogOpen: true, selectedVersion: 'diff' }); + this.setState({ + isDialogOpen: true, + selectedVersion: 'diff', + previousVersion: selectedVersion ?? currentService.defaultApiVersion, + }); }; handleDialogClose = () => { diff --git a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx index 25444cd21d..a53a4e1c4e 100644 --- a/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceVersionDiff/ServiceVersionDiff.jsx @@ -112,11 +112,7 @@ export default class ServiceVersionDiff extends Component { id="diff-button" data-testid="diff-button" onClick={() => { - if (this.state.defaultVersion) { - getDiff(serviceId, this.state.defaultVersion, selectedVersion2); - } else { - getDiff(serviceId, selectedVersion1, selectedVersion2); - } + getDiff(serviceId, this.state.defaultVersion ?? selectedVersion1, selectedVersion2); }} > Show diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index 102def9524..de30d553dc 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -76,3 +76,7 @@ span.MuiTab-wrapper { .custom-tabs .tabs.Mui-selected { border: 4px solid #0056B3; } + +svg.MuiSvgIcon-root.clear-text-search { + margin-bottom: 3px; +} diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index 05636710ee..e2a32d6b86 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -18,6 +18,7 @@ $color_2: #CC092F; >div { >#search-icon { margin-top: 7px; + margin-left: 120px; } } } @@ -59,6 +60,12 @@ span.MuiTab-wrapper { margin-left: auto; } +svg.MuiSvgIcon-root.clear-text-search { + margin-left: 120px; + margin-bottom: 3px; +} + + .tabs { height: 100%; display: flex; diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js index 0ed82c4f4f..30066c981e 100644 --- a/api-catalog-ui/frontend/src/utils/utilFunctions.js +++ b/api-catalog-ui/frontend/src/utils/utilFunctions.js @@ -31,19 +31,13 @@ export default function countAdditionalContents(service) { } function setButtonsColor(wizardButton, uiConfig, refreshButton) { + const color = + uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF' ? 'black' : uiConfig.headerColor; if (wizardButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - wizardButton.style.setProperty('color', 'black'); - } else { - wizardButton.style.setProperty('color', uiConfig.headerColor); - } + wizardButton.style.setProperty('color', color); } if (refreshButton) { - if (uiConfig.headerColor === 'white' || uiConfig.headerColor === '#FFFFFF') { - refreshButton.style.setProperty('color', 'black'); - } else { - refreshButton.style.setProperty('color', uiConfig.headerColor); - } + refreshButton.style.setProperty('color', color); } } From 347782b8fa8ee0374c5299c81dba3910989e6b3f Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Wed, 26 Jul 2023 14:47:41 +0200 Subject: [PATCH 37/46] address comments Signed-off-by: at670475 --- .../frontend/src/components/Search/_search.scss | 1 - .../frontend/src/components/ServiceTab/ServiceTab.css | 4 ++++ .../frontend/src/components/ServiceTab/ServiceTab.jsx | 4 +--- .../frontend/src/components/ServiceTab/_serviceTab.scss | 9 +++++++++ 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Search/_search.scss b/api-catalog-ui/frontend/src/components/Search/_search.scss index 0ba36bba54..8ce28b2b2b 100644 --- a/api-catalog-ui/frontend/src/components/Search/_search.scss +++ b/api-catalog-ui/frontend/src/components/Search/_search.scss @@ -57,7 +57,6 @@ svg.MuiSvgIcon-root.clear-text-search { margin-left: 142px; } #search-icon { - //margin-left: 142px; position: relative; float: left; width: auto; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css index 21752dcaf5..e316906b7d 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.css @@ -127,3 +127,7 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { font-size: 22px; color: #CC092F; } + +#no-tiles-error > p { + margin-left: 88px; +} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index dcdd93eb67..b2c0f3b302 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -165,9 +165,7 @@ export default class ServiceTab extends Component { <> {currentService === null && ( -

- The service ID "{serviceId}" does not match any registered service -

+

The service ID "{serviceId}" does not match any registered service

 )} diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss index 41ee21363e..c12ab60b2f 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss +++ b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss @@ -99,3 +99,12 @@ p.MuiTypography-root.version-text.MuiTypography-body1 { margin-top: 10px; } } + +#no-tiles-error { + font-size: 22px; + color: $color_3; +} + +#no-tiles-error > p { + margin-left: 11px; +} From a99520070e495550832c5d885fe006ab716450fe Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Wed, 26 Jul 2023 14:57:01 +0200 Subject: [PATCH 38/46] small fix Signed-off-by: at670475 --- .../components/ServicesNavigationBar/_serviceNavigationBar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index e2a32d6b86..79d08eeb80 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -50,7 +50,7 @@ span.MuiTab-wrapper { .MuiTabs-scroller.MuiTabs-scrollable > div > a { background: var(--white-ffffff, #FFF); - max-width: 362px; + max-width: 353px; margin-bottom: 5px; text-transform: none; font-size: 16px; From 1fe8595df5483a35af3e6830a7931261b21b01e5 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Wed, 26 Jul 2023 15:16:50 +0200 Subject: [PATCH 39/46] fix operation swagger width Signed-off-by: at670475 --- .../frontend/src/components/Swagger/_swagger.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss b/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss index f5756d57f4..2f451d529f 100644 --- a/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss +++ b/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss @@ -36,6 +36,7 @@ body { .opblock-summary-method { background: var( --success10 ); + width: 50px; } } &[aria-label*='get'], @@ -45,6 +46,7 @@ body { .opblock-summary-method { background: var( --info10 ); + width: 50px; } } &[aria-label*='delete'], @@ -54,6 +56,7 @@ body { .opblock-summary-method { background: var( --critical10 ); + width: 50px; } } &[aria-label*='put'], @@ -63,6 +66,7 @@ body { .opblock-summary-method { background: var( --warn10 ); + width: 50px; } } @@ -129,7 +133,7 @@ body { justify-content: space-between; > * { - + &:first-child { flex: 100%; } @@ -174,4 +178,4 @@ body { } } }//end opblock-body -} \ No newline at end of file +} From fce95db940c4d229856371243fc99f1b40dca36c Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Thu, 27 Jul 2023 15:49:59 +0200 Subject: [PATCH 40/46] address comments Signed-off-by: at670475 --- .../ServicesNavigationBar.jsx | 43 ++++++++++++------- .../_serviceNavigationBar.scss | 4 ++ .../src/components/Swagger/Swagger.css | 4 ++ .../src/components/Swagger/SwaggerUI.jsx | 2 +- .../src/components/Swagger/_swagger.scss | 5 +++ .../frontend/src/components/Tile/Tile.jsx | 1 + 6 files changed, 42 insertions(+), 17 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx index 22263756c6..e472db0cf4 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx @@ -26,6 +26,7 @@ export default class ServicesNavigationBar extends Component { }; handleTabChange = (event, selectedTab) => { + localStorage.removeItem('serviceId'); localStorage.setItem('selectedTab', selectedTab); }; @@ -51,7 +52,19 @@ export default class ServicesNavigationBar extends Component { const { match, services, searchCriteria } = this.props; const hasTiles = services && services.length > 0; const hasSearchCriteria = searchCriteria !== undefined && searchCriteria !== null && searchCriteria.length > 0; - const selectedTab = Number(localStorage.getItem('selectedTab')); + let selectedTab = Number(localStorage.getItem('selectedTab')); + let allServices; + let allServiceIds; + if (hasTiles) { + allServices = services.flatMap((tile) => tile.services); + allServiceIds = allServices.map((service) => service.serviceId); + if (localStorage.getItem('serviceId')) { + const id = localStorage.getItem('serviceId'); + if (allServiceIds.includes(id)) { + selectedTab = allServiceIds.indexOf(id); + } + } + } const TruncatedTabLabel = withStyles(this.styles)(({ classes, label }) => (
{label}
@@ -78,27 +91,25 @@ export default class ServicesNavigationBar extends Component { )} {hasTiles && ( - {services.map((tile, tileIndex) => - tile.services.map((service, serviceIndex) => ( - this.handleTabClick(service.serviceId)} - key={service.serviceId} - className="tabs" - component={RouterLink} - to={`${match.url}/${service.serviceId}`} - value={tileIndex * services.length + serviceIndex} - label={} - wrapped - /> - )) - )} + {allServices.map((service, serviceIndex) => ( + this.handleTabClick(service.serviceId)} + key={service.serviceId} + className="tabs" + component={RouterLink} + to={`${match.url}/${service.serviceId}`} + value={serviceIndex} + label={} + wrapped + /> + ))} )}
diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index 79d08eeb80..e46e6c0773 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -90,3 +90,7 @@ svg.MuiSvgIcon-root.clear-text-search { .custom-tabs .tabs.Mui-selected { border: 4px solid $color_2; } + +.MuiTabs-flexContainerVertical { + margin-bottom: 7px; +} diff --git a/api-catalog-ui/frontend/src/components/Swagger/Swagger.css b/api-catalog-ui/frontend/src/components/Swagger/Swagger.css index bac857abc1..5f2fdb5cf3 100644 --- a/api-catalog-ui/frontend/src/components/Swagger/Swagger.css +++ b/api-catalog-ui/frontend/src/components/Swagger/Swagger.css @@ -1753,3 +1753,7 @@ button.opblock-summary-control { svg.svg-assets { display: none; } + +#no-doc_message { + color: #de1b1b; +} diff --git a/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx b/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx index fc7a47c985..72e0705e20 100644 --- a/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx +++ b/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx @@ -180,7 +180,7 @@ export default class SwaggerUI extends Component {
{error && (
-

+

API documentation could not be retrieved. There may be something wrong in your Swagger definition. Please review the values of 'schemes', 'host' and 'basePath'.

diff --git a/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss b/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss index 2f451d529f..09dd7ec05f 100644 --- a/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss +++ b/api-catalog-ui/frontend/src/components/Swagger/_swagger.scss @@ -179,3 +179,8 @@ body { } }//end opblock-body } + +#no-doc_message { + margin-left: -41px; + color: #de1b1b; +} diff --git a/api-catalog-ui/frontend/src/components/Tile/Tile.jsx b/api-catalog-ui/frontend/src/components/Tile/Tile.jsx index 1ea176843e..a4593ae075 100644 --- a/api-catalog-ui/frontend/src/components/Tile/Tile.jsx +++ b/api-catalog-ui/frontend/src/components/Tile/Tile.jsx @@ -56,6 +56,7 @@ export default class Tile extends Component { const tileRoute = `/service/${service.serviceId}`; storeCurrentTileId(tile.id); history.push(tileRoute); + localStorage.setItem('serviceId', service.serviceId); }; render() { From 5bc276c77554c6756b6bfb98d268a418fc3ed856 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Thu, 27 Jul 2023 17:12:31 +0200 Subject: [PATCH 41/46] fix search bar css Signed-off-by: at670475 --- .../src/components/Dashboard/Dashboard.css | 4 ++++ .../src/components/Dashboard/_dashboard.scss | 4 ++++ .../frontend/src/components/Search/_search.scss | 12 +++++------- .../frontend/src/components/Search/search.css | 13 +++++-------- .../ServicesNavigationBar.css | 14 +++++++++++--- .../_serviceNavigationBar.scss | 17 +++++++++++++---- 6 files changed, 42 insertions(+), 22 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css index 926aa70bd5..6b0364a2fc 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css +++ b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css @@ -126,6 +126,10 @@ a { border: 1px solid #C9C8C5; } +#search .MuiInputBase-root { + width: 100%; +} + #search > div > div > div > #search-icon { margin-left: 168px; } diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index 1a790f6374..ef8bbb132a 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -34,6 +34,10 @@ border: 1px solid #C9C8C5; display: flex; + + .MuiInput-root { + width: 100%; + } >div { >div { >input { diff --git a/api-catalog-ui/frontend/src/components/Search/_search.scss b/api-catalog-ui/frontend/src/components/Search/_search.scss index 8ce28b2b2b..75d5876056 100644 --- a/api-catalog-ui/frontend/src/components/Search/_search.scss +++ b/api-catalog-ui/frontend/src/components/Search/_search.scss @@ -36,8 +36,9 @@ } } } + position: absolute; font-style: italic; - margin-top: 7px; + right: 10px; } .MuiFormControl-root.MuiTextField-root.search-bar { display: contents; @@ -46,16 +47,13 @@ >div { >div { >input { - margin-left: -190px; - font-style: italic; - width: auto; + padding-left: 16px; + padding-right: 40px; + padding-top: 16px; } } } } -svg.MuiSvgIcon-root.clear-text-search { - margin-left: 142px; -} #search-icon { position: relative; float: left; diff --git a/api-catalog-ui/frontend/src/components/Search/search.css b/api-catalog-ui/frontend/src/components/Search/search.css index 0ccc34eb3c..6778b26a8f 100644 --- a/api-catalog-ui/frontend/src/components/Search/search.css +++ b/api-catalog-ui/frontend/src/components/Search/search.css @@ -23,10 +23,10 @@ } #search > div > div > input { - margin-left: 40px; - margin-top: 6px; font-style: italic; - width: auto; + padding-left: 10px; + padding-right: 40px; + padding-top: 15px; } svg.MuiSvgIcon-root.clear-text-search { @@ -48,16 +48,13 @@ svg.MuiSvgIcon-root.clear-text-search { } #search-input { + position: absolute; + right: 5px; font-style: italic; - margin-top: 7px; } #search-icon { - margin-left: 142px; - position: relative; - float: left; margin-top: 10px; - width: auto; } @media only screen and (max-width: 530px) { diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css index de30d553dc..3250f2bee6 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.css @@ -17,12 +17,17 @@ height: 47px; background: #FFFFFF; border: 1px solid #C9C8C5; - margin: 5px 12px 9px -4px; + margin: 5px 14px 9px -1px; +} + +#search2 .MuiInputBase-root { + width: 100%; } #search2 > div > div > input { - margin-left: 13px; - margin-top: 6px; + padding-left: 10px; + padding-right: 40px; + padding-top: 14px; } #search2> div> div> div> #search-icon { @@ -48,6 +53,9 @@ span.MuiTab-wrapper { .MuiTabs-root { margin-left: -10px; } +.MuiTabs-root > div:nth-child(2) { + padding-top: 2px; +} .MuiTabs-scroller.MuiTabs-scrollable > div > a { margin-left: 8px; diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss index e46e6c0773..bb20c768f6 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss @@ -7,23 +7,32 @@ $color_2: #CC092F; height: 47px; background: #FFFFFF; border: 1px solid #C9C8C5; - margin-right: 12px; + margin-right: 13px; margin-bottom: 9px; + + .MuiInput-root { + width: 100%; + } >div { >div { >input { - margin-left: 13px; - margin-top: 6px; + padding-left: 16px; + padding-right: 40px; + padding-top: 14px; } >div { >#search-icon { margin-top: 7px; - margin-left: 120px; + } + margin-right: 0; + &#search-input { + right: 5px; } } } } } + #serviceIdTabs { margin-bottom: 10px; font-weight: bold; From 2059385ef321a76eb13a30b1062baaaa8473e7f9 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 28 Jul 2023 14:06:51 +0200 Subject: [PATCH 42/46] fix bug of no swagger being displayed when navigating to the detailpage Signed-off-by: at670475 --- .../src/components/DetailPage/DetailPage.jsx | 16 ++++++++++++++-- .../src/components/ServiceTab/ServiceTab.jsx | 2 +- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx index fab194fe06..7b2c30b49d 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx @@ -22,11 +22,15 @@ import countAdditionalContents, { customUIStyle, isAPIPortal } from '../../utils export default class DetailPage extends Component { componentDidMount() { - const { fetchTilesStart, currentTileId, fetchNewTiles } = this.props; + const { fetchTilesStart, currentTileId, fetchNewTiles, history } = this.props; fetchNewTiles(); if (currentTileId) { fetchTilesStart(currentTileId); } + if (!localStorage.getItem('serviceId')) { + const id = history.location.pathname.split('/service/')[1]; + localStorage.setItem('serviceId', id); + } localStorage.removeItem('selectedTab'); } @@ -51,7 +55,6 @@ export default class DetailPage extends Component { render() { const { - tiles, isLoading, clearService, fetchTilesStop, @@ -64,6 +67,7 @@ export default class DetailPage extends Component { currentTileId, fetchNewTiles, } = this.props; + let { tiles } = this.props; const iconBack = ; let error = null; if (fetchTilesError !== undefined && fetchTilesError !== null) { @@ -74,6 +78,14 @@ export default class DetailPage extends Component { fetchTilesStop(); fetchNewTiles(); fetchTilesStart(currentTileId); + } else if (services && services.length > 0 && !currentTileId) { + const id = history.location.pathname.split('/service/')[1]; + if (id) { + const correctTile = services.find((tile) => tile.services.some((service) => service.serviceId === id)); + if (correctTile) { + tiles = [correctTile]; + } + } } const apiPortalEnabled = isAPIPortal(); const hasTiles = !fetchTilesError && tiles && tiles.length > 0; diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index b2c0f3b302..2c428fe7f7 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -60,7 +60,7 @@ export default class ServiceTab extends Component { currentTileId, tiles, } = this.props; - if (tiles && tiles.length > 0) { + if (tiles && tiles.length > 0 && tiles[0] && tiles[0].services) { tiles[0].services.forEach((service) => { if (service.serviceId === serviceId) { if (service.serviceId !== selectedService.serviceId || selectedTile !== currentTileId) { From 75afa0e34014974e5f2ad11e543f354aa034017b Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 28 Jul 2023 15:28:54 +0200 Subject: [PATCH 43/46] fix tests Signed-off-by: at670475 --- .../components/DetailPage/DetailPage.test.jsx | 43 ++++++------------- .../DetailPage/DetailPageContainer.test.jsx | 2 +- 2 files changed, 15 insertions(+), 30 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx index d7c904f923..bd52835112 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx @@ -38,14 +38,17 @@ const match = { path: '/service', }; +const history = { + push: jest.fn(), + location: { + pathname: '/service/serviceId', + }, +}; + describe('>>> Detailed Page component tests', () => { it('should start epic on mount', () => { const fetchTilesStart = jest.fn(); const fetchNewTiles = jest.fn(); - const history = { - push: jest.fn(), - pathname: jest.fn(), - }; const wrapper = shallow( >> Detailed Page component tests', () => { it('should stop epic on unmount', () => { const fetchTilesStop = jest.fn(); - const history = { - push: jest.fn(), - pathname: jest.fn(), - }; const wrapper = shallow( >> Detailed Page component tests', () => { }); it('should handle a back button click', () => { - const historyMock = { push: jest.fn() }; const wrapper = shallow( >> Detailed Page component tests', () => { fetchTilesStart={jest.fn()} fetchNewTiles={jest.fn()} fetchTilesStop={jest.fn()} - history={historyMock} + history={history} match={match} /> ); wrapper.find('[data-testid="go-back-button"]').simulate('click'); - expect(historyMock.push.mock.calls[0]).toEqual(['/dashboard']); + expect(history.push.mock.calls[0]).toEqual(['/dashboard']); }); it('should load spinner when waiting for data', () => { @@ -119,7 +117,6 @@ describe('>>> Detailed Page component tests', () => { }); it('should display tile title', () => { - const historyMock = { push: jest.fn() }; const isLoading = false; const wrapper = shallow( >> Detailed Page component tests', () => { fetchTilesStart={jest.fn()} fetchNewTiles={jest.fn()} fetchTilesStop={jest.fn()} - history={historyMock} + history={history} match={match} isLoading={isLoading} /> @@ -139,7 +136,6 @@ describe('>>> Detailed Page component tests', () => { }); it('should display tile description', () => { - const historyMock = { push: jest.fn() }; const isLoading = false; const wrapper = shallow( >> Detailed Page component tests', () => { fetchTilesStart={jest.fn()} fetchNewTiles={jest.fn()} fetchTilesStop={jest.fn()} - history={historyMock} + history={history} match={match} isLoading={isLoading} /> @@ -159,7 +155,6 @@ describe('>>> Detailed Page component tests', () => { }); it('should set comms failed message when there is a Tile fetch 404 or 500 error', () => { - const historyMock = { push: jest.fn() }; const isLoading = false; const fetchTilesStop = jest.fn(); const fetchTilesError = { @@ -171,7 +166,7 @@ describe('>>> Detailed Page component tests', () => { fetchTilesStart={jest.fn()} fetchNewTiles={jest.fn()} fetchTilesStop={fetchTilesStop} - history={historyMock} + history={history} fetchTilesError={fetchTilesError} match={match} isLoading={isLoading} @@ -181,7 +176,6 @@ describe('>>> Detailed Page component tests', () => { }); it('should set comms failed message when there is a Tile fetch 404 or 500 error', () => { - const historyMock = { push: jest.fn() }; const isLoading = false; const fetchTilesStop = jest.fn(); const fetchTilesError = { @@ -193,7 +187,7 @@ describe('>>> Detailed Page component tests', () => { fetchTilesStart={jest.fn()} fetchNewTiles={jest.fn()} fetchTilesStop={fetchTilesStop} - history={historyMock} + history={history} fetchTilesError={fetchTilesError} match={match} isLoading={isLoading} @@ -203,7 +197,6 @@ describe('>>> Detailed Page component tests', () => { }); it('should clear the selected service, stop and restart fetching if a different tile is selected ', () => { - const historyMock = { push: jest.fn() }; const isLoading = false; const fetchTilesError = null; const fetchTilesStop = jest.fn(); @@ -217,7 +210,7 @@ describe('>>> Detailed Page component tests', () => { fetchTilesStart={fetchTilesStart} fetchNewTiles={jest.fn()} fetchTilesStop={fetchTilesStop} - history={historyMock} + history={history} fetchTilesError={fetchTilesError} match={match} isLoading={isLoading} @@ -233,10 +226,6 @@ describe('>>> Detailed Page component tests', () => { process.env.REACT_APP_API_PORTAL = true; const fetchTilesStart = jest.fn(); const fetchNewTiles = jest.fn(); - const history = { - push: jest.fn(), - pathname: jest.fn(), - }; tile.services[0].videos = ['video1', 'video2']; tile.services[0].tutorials = ['tutorial1', 'tutorial2']; tile.services[0].useCases = ['useCase1', 'useCase2']; @@ -259,10 +248,6 @@ describe('>>> Detailed Page component tests', () => { process.env.REACT_APP_API_PORTAL = true; const fetchTilesStart = jest.fn(); const fetchNewTiles = jest.fn(); - const history = { - push: jest.fn(), - pathname: jest.fn(), - }; const mockHandleLinkClick = jest.fn(); const mockEvent = { preventDefault: jest.fn() }; const mockElementToView = { scrollIntoView: jest.fn() }; diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPageContainer.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPageContainer.test.jsx index 234aaf43df..87ce93230e 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPageContainer.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPageContainer.test.jsx @@ -53,7 +53,7 @@ describe('DetailPage Container', () => { const history = { location: { - pathname: {}, + pathname: '/service/serviceId', }, push: jest.fn(), listen: jest.fn(), From 3b8ce7183a747b3d6a3dc2128b0f56f0fdc25885 Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Fri, 28 Jul 2023 17:06:56 +0200 Subject: [PATCH 44/46] add test and adjust css Signed-off-by: at670475 --- .../components/DetailPage/_detailPage.scss | 10 ++++++- .../src/components/ServiceTab/ServiceTab.jsx | 2 +- .../components/ServiceTab/ServiceTab.test.jsx | 30 +++++++++++++++++++ .../ServiceNavigationBar.test.jsx | 2 ++ 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss index 2455a83795..2f8f902529 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss +++ b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss @@ -163,7 +163,6 @@ body .detail-content { font-weight: initial; } #go-back-button { - margin-left: 12px; display: inline; margin-top: 20px; font-size: 13px; @@ -204,5 +203,14 @@ body .detail-content { .detailed-description-container { display: flow-root; } + .no-tiles-container { + margin-left: 20px; + } + + .btn > h4 { + padding-right: 10px; + padding-left: 10px; + font-size: 13px; + } } diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx index 2c428fe7f7..6492da1c50 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx @@ -196,7 +196,7 @@ export default class ServiceTab extends Component { title="API Homepage navigation is disabled as the service is not running" placement="bottom" > - + Service Homepage diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index bca1d08f4c..f196cb50ec 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -33,6 +33,22 @@ const selectedService = { apis: { 'org.zowe v1': { gatewayUrl: 'api/v1' } }, }; +const selectedServiceDown = { + serviceId: 'gateway', + title: 'API Gateway', + description: + 'API Gateway service to route requests to services registered in the API Mediation Layer and provides an API for mainframe security.', + status: 'DOWN', + baseUrl: 'https://localhost:6000', + homePageUrl: 'https://localhost:10010/', + basePath: '/gateway/api/v1', + apiDoc: null, + apiVersions: ['org.zowe v1', 'org.zowe v2'], + defaultApiVersion: ['org.zowe v1'], + ssoAllInstances: true, + apis: { 'org.zowe v1': { gatewayUrl: 'api/v1' } }, +}; + const tiles = { version: '1.0.0', id: 'apimediationlayer', @@ -172,4 +188,18 @@ describe('>>> ServiceTab component tests', () => { expect(serviceTab.find('.footer-labels').exists()).toEqual(false); expect(serviceTab.find('#detail-footer').exists()).toEqual(false); }); + + it('should display home page link if service down', () => { + process.env.REACT_APP_API_PORTAL = false; + const selectService = jest.fn(); + const serviceTab = shallow( + + ); + expect(serviceTab.find('[data-testid="red-homepage"]').exists()).toEqual(true); + }); }); diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx index 36a05ac2a0..cffa23ed5f 100644 --- a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx @@ -84,6 +84,7 @@ describe('>>> ServiceNavigationBar component tests', () => { }); it('should set current tile id', () => { + localStorage.setItem('serviceId', 'apicatalog'); const storeCurrentTileId = jest.fn(); const serviceNavigationBar = shallow( >> ServiceNavigationBar component tests', () => { const instance = serviceNavigationBar.instance(); instance.handleTabClick('apicatalog'); expect(storeCurrentTileId).toHaveBeenCalled(); + localStorage.removeItem('serviceId'); }); }); From a157fe755aaee51b80686e2505d65680f06bde3e Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 31 Jul 2023 11:49:09 +0200 Subject: [PATCH 45/46] add unit tests Signed-off-by: at670475 --- .../components/DetailPage/DetailPage.test.jsx | 24 ++++++- .../components/ServiceTab/ServiceTab.test.jsx | 70 +++++++++++++++++++ 2 files changed, 93 insertions(+), 1 deletion(-) diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx index bd52835112..37d146185e 100644 --- a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx +++ b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx @@ -255,7 +255,7 @@ describe('>>> Detailed Page component tests', () => { const wrapper = shallow( >> Detailed Page component tests', () => { expect(document.querySelector).toHaveBeenCalledWith('#tutorials-label'); expect(mockElementToView.scrollIntoView).toHaveBeenCalled(); }); + + it('should get correct service tile if currentTileId not defined', () => { + process.env.REACT_APP_API_PORTAL = true; + const fetchTilesStart = jest.fn(); + const fetchNewTiles = jest.fn(); + const mockHandleLinkClick = jest.fn(); + const wrapper = shallow( + + ); + const instance = wrapper.instance(); + instance.componentDidMount(); + }); }); diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx index f196cb50ec..45522486ba 100644 --- a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx +++ b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.test.jsx @@ -202,4 +202,74 @@ describe('>>> ServiceTab component tests', () => { ); expect(serviceTab.find('[data-testid="red-homepage"]').exists()).toEqual(true); }); + + it('should update state correctly when selectedVersion is null', () => { + process.env.REACT_APP_API_PORTAL = false; + const selectService = jest.fn(); + const wrapper = shallow( + + ); + wrapper.setState({ selectedVersion: null }); + + wrapper.instance().handleDialogOpen(selectedService); + + expect(wrapper.state().isDialogOpen).toEqual(true); + expect(wrapper.state().selectedVersion).toEqual('diff'); + expect(wrapper.state().previousVersion).toEqual(selectedService.defaultApiVersion); + }); + + it('should call handleDialogOpen on button click', () => { + const selectService = jest.fn(); + const wrapper = shallow( + + ); + const handleDialogOpenSpy = jest.spyOn(wrapper.instance(), 'handleDialogOpen'); + + const button = wrapper.find('#compare-button'); + button.simulate('click'); + + expect(handleDialogOpenSpy).toHaveBeenCalledTimes(1); + }); + + it('should disable the button if apiVersions length is less than 2', () => { + const selectService = jest.fn(); + const apiVersions = ['1.0.0']; + selectedService.apiVersions = apiVersions; + const wrapper = shallow( + + ); + wrapper.setState({ apiVersions }); + + const button = wrapper.find('#compare-button'); + + expect(button.prop('disabled')).toEqual(true); + expect(button.prop('style')).toEqual({ + backgroundColor: '#e4e4e4', + color: '#6b6868', + opacity: '0.5', + }); + }); + + it('should enable the button if apiVersions length is greater than or equal to 2', () => { + const selectService = jest.fn(); + const wrapper = shallow( + + ); + const apiVersions = ['org.zowe v1', 'org.zowe v2']; + selectedService.apiVersions = apiVersions; + wrapper.setState({ apiVersions }); + + const button = wrapper.find('#compare-button'); + + expect(button.prop('disabled')).toEqual(false); + expect(button.prop('style')).toEqual({ + backgroundColor: '#fff', + color: '#0056B3', + }); + }); }); From 57501f281c0e08cc5616ae0c345b80d29320976d Mon Sep 17 00:00:00 2001 From: Andrea Tabone Date: Mon, 31 Jul 2023 13:29:31 +0200 Subject: [PATCH 46/46] small fix Signed-off-by: at670475 --- .../src/components/Dashboard/_dashboard.scss | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss index ef8bbb132a..c3c56b3f1b 100644 --- a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss +++ b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss @@ -45,7 +45,7 @@ position: static; } >div { - >#search-icon { + #search-icon { margin-left: 156px; } } @@ -97,16 +97,8 @@ .MuiSvgIcon-root { margin-left: 130px; } - #search { - >div { - >div { - >div { - >#search-icon { - margin-left: 130px; - } - } - } - } + #search #search-icon { + margin-left: 130px; } }