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

@@ -126,6 +126,29 @@ a {
     border: 1px solid #C9C8C5;
 }
 
+#search .MuiInputBase-root {
+    width: 100%;
+}
+
+#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;
 }
@@ -262,7 +285,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 );
@@ -21,15 +24,32 @@
       left: calc(50% - #{calc(var( --headerLineWidth ) / 2)});
     }
   }
+
     #search {
         height: 50px;
         width: 422px;
         margin-left: auto;
         margin-right: auto;
         background: #FFFFFF;
         border: 1px solid #C9C8C5;
-        .MuiFormControl-root {
-            display: flex;
+
+        display: flex;
+
+        .MuiInput-root {
+            width: 100%;
+        }
+        >div {
+            >div {
+                >input {
+                    margin-left: auto;
+                    position: static;
+                }
+                >div {
+                    #search-icon {
+                       margin-left: 156px;
+                    }
+                }
+            }
         }
     }
 
@@ -68,7 +88,20 @@
       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 #search-icon {
+              margin-left: 130px;
+          }
+      }
+
     .MuiInputBase-input {
       margin-top: auto;
       margin-left: 10px;
@@ -90,4 +123,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,15 +18,20 @@ 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() {
-        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');
     }
 
     componentWillUnmount() {
@@ -40,9 +45,16 @@ 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,
             isLoading,
             clearService,
             fetchTilesStop,
@@ -55,6 +67,7 @@ export default class DetailPage extends Component {
             currentTileId,
             fetchNewTiles,
         } = this.props;
+        let { tiles } = this.props;
         const iconBack = <ChevronLeftIcon />;
         let error = null;
         if (fetchTilesError !== undefined && fetchTilesError !== null) {
@@ -65,9 +78,19 @@ 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;
+        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 +124,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 +152,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 +198,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>
                                         )}
                                     />