chore: UI polishing

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');
     });

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;
+    }
+}

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;

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 );
@@ -28,9 +31,6 @@
         margin-right: auto;
         background: #FFFFFF;
         border: 1px solid #C9C8C5;
-        .MuiFormControl-root {
-            display: flex;
-        }
     }
 
     #grid-container ,
@@ -90,4 +90,3 @@
     width: 99%;
     display: block;
 }
-

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;
 }
@@ -44,14 +46,12 @@
 }
 
 .detailed-description-container {
-    margin-top: 2rem;
     text-align: left;
     overflow: hidden;
-    width: 100%;
 }
 
 .api-description-container {
-    margin-left: 397px;
+    margin-left: 375px;
     padding: 2.2rem;
 }
 
@@ -87,7 +87,6 @@
 }
 
 #title {
-    padding: 2rem .3rem 1.3rem 0;
     color: #58606e;
     font-size: 28px;
     font-weight: 700;
@@ -130,12 +129,13 @@ div.content-description-container > div > div:nth-child(2) > div {
 }
 
 .nav-bar {
-    min-height: 84vh;
+    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;
@@ -146,9 +146,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;
 }
 
@@ -167,3 +165,7 @@ div.content-description-container > div > div:nth-child(2) > div {
         width: 600px;
     }
 }
+
+.MuiTabs-root.custom-tabs.MuiTabs-vertical {
+    margin-right: 12px;
+}

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() {
@@ -27,6 +27,7 @@ export default class DetailPage extends Component {
         if (currentTileId) {
             fetchTilesStart(currentTileId);
         }
+        localStorage.removeItem('selectedTab');
     }
 
     componentWillUnmount() {
@@ -40,6 +41,14 @@ export default class DetailPage extends Component {
         history.push('/dashboard');
     };
 
+    handleLinkClick = (e, id) => {
+        e.preventDefault();
+        const elementToView = document.querySelector(id);
+        if (elementToView) {
+            elementToView.scrollIntoView();
+        }
+    };
+
     render() {
         const {
             tiles,
@@ -68,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);
         }
@@ -101,16 +112,18 @@ export default class DetailPage extends Component {
                 </div>
                 {!isLoading && !fetchTilesError && (
                     <div className="api-description-container">
-                        <IconButton
-                            id="go-back-button"
-                            data-testid="go-back-button"
-                            color="primary"
-                            onClick={this.handleGoBack}
-                            size="medium"
-                        >
-                            {iconBack}
-                            Back
-                        </IconButton>
+                        {!apiPortalEnabled && (
+                            <IconButton
+                                id="go-back-button"
+                                data-testid="go-back-button"
+                                color="primary"
+                                onClick={this.handleGoBack}
+                                size="medium"
+                            >
+                                {iconBack}
+                                Back
+                            </IconButton>
+                        )}
                         <div className="detailed-description-container">
                             <div className="title-api-container">
                                 {tiles !== undefined && tiles.length === 1 && (
@@ -127,23 +140,29 @@ export default class DetailPage extends Component {
                                 )}
                             </div>
                         </div>
-                        {apiPortalEnabled && (
+                        {apiPortalEnabled && !onlySwaggerPresent && (
                             <div id="right-resources-menu">
                                 <Typography id="resources-menu-title" variant="subtitle1">
                                     On this page
                                 </Typography>
                                 <Container>
-                                    <Link className="links" href="#swagger-label">
+                                    <Link className="links" onClick={(e) => this.handleLinkClick(e, '#swagger-label')}>
                                         Swagger
                                     </Link>
-                                    <Link className="links" href="#use-cases-label">
-                                        Use cases
+                                    <Link
+                                        className="links"
+                                        onClick={(e) => this.handleLinkClick(e, '#use-cases-label')}
+                                    >
+                                        Use cases ({useCasesCounter})
                                     </Link>
-                                    <Link className="links" href="#tutorials-label">
-                                        Tutorials
+                                    <Link
+                                        className="links"
+                                        onClick={(e) => this.handleLinkClick(e, '#tutorials-label')}
+                                    >
+                                        Tutorials ({tutorialsCounter})
                                     </Link>
-                                    <Link className="links" href="#videos-label">
-                                        Videos
+                                    <Link className="links" onClick={(e) => this.handleLinkClick(e, '#videos-label')}>
+                                        Videos ({videosCounter})
                                     </Link>
                                 </Container>
                             </div>
@@ -167,7 +186,12 @@ export default class DetailPage extends Component {
                                         path={`${match.path}/:serviceId`}
                                         render={() => (
                                             <div className="tabs-swagger">
-                                                <ServiceTabContainer tiles={tiles} />
+                                                <ServiceTabContainer
+                                                    videosCounter={videosCounter}
+                                                    tutorialsCounter={tutorialsCounter}
+                                                    useCasesCounter={useCasesCounter}
+                                                    tiles={tiles}
+                                                />
                                             </div>
                                         )}
                                     />

api-catalog-ui/frontend/src/components/DetailPage/DetailPage.test.jsx

@@ -228,4 +228,74 @@ 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(
+            <DetailPage
+                tiles={[tile]}
+                services={tile.services}
+                currentTileId="apicatalog"
+                fetchTilesStart={fetchTilesStart}
+                fetchNewTiles={fetchNewTiles}
+                fetchTilesStop={jest.fn()}
+                match={match}
+                history={history}
+            />
+        );
+        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(
+            <DetailPage
+                tiles={[tile]}
+                services={tile.services}
+                currentTileId="apicatalog"
+                handleLinkClick={mockHandleLinkClick}
+                fetchTilesStart={fetchTilesStart}
+                fetchNewTiles={fetchNewTiles}
+                fetchTilesStop={jest.fn()}
+                match={match}
+                history={history}
+            />
+        );
+        // 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();
+    });
 });

api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss

@@ -113,13 +113,13 @@ 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, 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;
+            display: none;
         }
     }
 

api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx

@@ -60,7 +60,13 @@ export default class BigShield extends Component {
                         <br />
                         {!disableButton && (
                             <div>
-                                <Button primary onClick={this.handleGoToHome} size="medium" iconStart={iconBack}>
+                                <Button
+                                    id="go-back-button"
+                                    primary
+                                    onClick={this.handleGoToHome}
+                                    size="medium"
+                                    iconStart={iconBack}
+                                >
                                     Go to Dashboard
                                 </Button>
                             </div>

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
 }

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;
 }
 
@@ -140,8 +140,7 @@ form#login-form {
 }
 
 .susp-card {
-    padding-top: 200px;
-    padding-left: 600px;
+    margin: auto;
 }
 
 .MuiFormControl-root {
@@ -160,4 +159,4 @@ form#login-form {
 #warn-first-line {
     display: flex;
     padding-bottom: 10px;
-}
+}