add check and hide right menu in case only swagger present

Signed-off-by: at670475 <andrea.tabone@broadcom.com>
zowe · Jul 25, 2023 · ce45ae8 · ce45ae8
1 parent a1bcf62
commit ce45ae8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git 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 {
                                 )}
                             </div>
                         </div>
-                        {apiPortalEnabled && (
+                        {apiPortalEnabled && !onlySwaggerPresent && (
                             <div id="right-resources-menu">
                                 <Typography id="resources-menu-title" variant="subtitle1">
                                     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})
                                     </Link>
                                     <Link
                                         className="links"
                                         onClick={(e) => this.handleLinkClick(e, '#tutorials-label')}
                                     >
-                                        Tutorials
+                                        Tutorials ({tutorialsCounter})
                                     </Link>
                                     <Link className="links" onClick={(e) => this.handleLinkClick(e, '#videos-label')}>
-                                        Videos
+                                        Videos ({videosCounter})
                                     </Link>
                                 </Container>
                             </div>
@@ -184,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>
                                         )}
                                     />

diff --git 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
@@ -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 (
             <>