chore: support additional contents - catalog

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

@@ -79,6 +79,7 @@ export default class DetailPage extends Component {
             history,
             currentTileId,
             fetchNewTiles,
+            selectedService,
         } = this.props;
         let { tiles } = this.props;
         const iconBack = <ChevronLeftIcon />;
@@ -102,7 +103,15 @@ export default class DetailPage extends Component {
         }
         const apiPortalEnabled = isAPIPortal();
         const hasTiles = !fetchTilesError && tiles && tiles.length > 0;
-        const { useCasesCounter, tutorialsCounter, videosCounter } = countAdditionalContents(services);
+        const {
+            useCasesCounter,
+            tutorialsCounter,
+            videosCounter,
+            filteredUseCases,
+            filteredTutorials,
+            videos,
+            documentation,
+        } = countAdditionalContents(selectedService);
         const onlySwaggerPresent = tutorialsCounter === 0 && videosCounter === 0 && useCasesCounter === 0;
         const showSideBar = false;
         if (
@@ -202,7 +211,7 @@ export default class DetailPage extends Component {
                                             className="links"
                                             onClick={(e) => this.handleLinkClick(e, '#tutorials-label')}
                                         >
-                                            Tutorials ({tutorialsCounter})
+                                            TechDocs Resources ({tutorialsCounter})
                                         </Link>
                                         <Link
                                             className="links"
@@ -236,9 +245,13 @@ export default class DetailPage extends Component {
                                             render={() => (
                                                 <div className="tabs-swagger">
                                                     <ServiceTabContainer
+                                                        videos={videos}
+                                                        useCases={filteredUseCases}
+                                                        tutorials={filteredTutorials}
                                                         videosCounter={videosCounter}
                                                         tutorialsCounter={tutorialsCounter}
                                                         useCasesCounter={useCasesCounter}
+                                                        documentation={documentation}
                                                         tiles={tiles}
                                                     />
                                                 </div>
@@ -271,4 +284,5 @@ DetailPage.propTypes = {
     history: PropTypes.shape({
         push: PropTypes.func.isRequired,
     }).isRequired,
+    selectedService: PropTypes.object.isRequired,
 };

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

@@ -8,7 +8,7 @@
  * Copyright Contributors to the Zowe Project.
  */
 import { shallow } from 'enzyme';
-import { describe, expect, it, jest } from '@jest/globals';
+import { describe, expect, it } from '@jest/globals';
 import DetailPage from './DetailPage';
 
 const tile = {
@@ -51,6 +51,10 @@ describe('>>> Detailed Page component tests', () => {
         process.env.REACT_APP_API_PORTAL = false;
     });
 
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
     it('should start epic on mount', () => {
         const fetchTilesStart = jest.fn();
         const fetchNewTiles = jest.fn();
@@ -252,9 +256,19 @@ describe('>>> Detailed Page component tests', () => {
         process.env.REACT_APP_API_PORTAL = true;
         const fetchTilesStart = jest.fn();
         const fetchNewTiles = jest.fn();
-        tile.services[0].videos = ['video1', 'video2'];
-        tile.services[0].tutorials = ['tutorial1', 'tutorial2'];
-        tile.services[0].useCases = ['useCase1', 'useCase2'];
+        // eslint-disable-next-line global-require
+        const utils = require('../../utils/utilFunctions');
+        const spyOnCountAdditionalContents = jest.spyOn(utils, 'default');
+        spyOnCountAdditionalContents.mockImplementation(() => ({
+            useCasesCounter: 2,
+            tutorialsCounter: 2,
+            videosCounter: 2,
+            hasSwagger: true,
+            useCases: [],
+            tutorials: [],
+            videos: [],
+            documentation: '',
+        }));
         const wrapper = shallow(
             <DetailPage
                 tiles={[tile]}
@@ -268,6 +282,7 @@ describe('>>> Detailed Page component tests', () => {
             />
         );
         expect(wrapper.find('#right-resources-menu').exists()).toEqual(true);
+        spyOnCountAdditionalContents.mockRestore();
     });
 
     it('should click on the links', () => {

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

@@ -28,6 +28,7 @@ const mapStateToProps = (state) => ({
     fetchTilesError: state.tilesReducer.error,
     selectedTile: state.selectedServiceReducer.selectedTile,
     selectedServiceId: state.selectedServiceReducer.selectedService.serviceId,
+    selectedService: state.selectedServiceReducer.selectedService,
     isLoading: loadingSelector(state),
     currentTileId: state.tilesReducer.currentTileId,
 });

api-catalog-ui/frontend/src/components/ExtraContents/BlogContainer.jsx

@@ -0,0 +1,110 @@
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import BlogTile from './BlogTile';
+
+export default function BlogContainer({ user, url, title }) {
+    const rss2json = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2F%40${user}`;
+    const [myBlog, setMyBlog] = useState([]);
+
+    const fetchData = async () => {
+        try {
+            const res = await fetch(url);
+            const data = await res.text();
+
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(data, 'text/html');
+            const divs = doc.querySelector('.linklist.relatedlinks');
+            if (divs) {
+                divs.parentNode.removeChild(divs);
+            }
+
+            let content = doc.querySelector('.shortdesc');
+            if (!content?.textContent) {
+                content = doc.querySelector('.p');
+            }
+            const tutorialTitle = doc.querySelector('h1.title');
+            const blogTitle = tutorialTitle?.textContent;
+            const blogContent = content?.textContent;
+
+            const blogData = {
+                content: blogContent,
+                description: blogContent,
+                title: blogTitle,
+                link: url,
+            };
+
+            setMyBlog(blogData);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error fetching data:', error);
+            return null;
+        }
+    };
+
+    useEffect(() => {
+        const fetchDataEffect = async () => {
+            if (!url?.includes('medium.com') && !url?.includes('docs.zowe.org')) {
+                await fetchData();
+            } else if (url?.includes('docs.zowe.org')) {
+                const blogData = {
+                    content: '',
+                    description: `Tutorial from the Zowe documentation related to ${title}`,
+                    title,
+                    link: url,
+                };
+                setMyBlog(blogData);
+            } else {
+                try {
+                    const res = await fetch(rss2json);
+                    const data = await res.json();
+                    setMyBlog(data);
+                } catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.error('Error fetching data:', error);
+                    return null;
+                }
+            }
+        };
+
+        fetchDataEffect();
+    }, [rss2json]);
+
+    function displayBlogs() {
+        if (myBlog?.items) {
+            const correctBlog = myBlog.items.find((blog) => blog?.link.includes(url));
+            return correctBlog && <BlogTile blogData={correctBlog} />;
+        }
+    }
+    if (url?.includes('medium.com')) {
+        return (
+            <div data-testid="medium-blog-container" className="BlogsContainer">
+                {displayBlogs()}
+            </div>
+        );
+    }
+
+    return (
+        myBlog && (
+            <div data-testid="tech-blog-container" className="BlogsContainer">
+                <BlogTile blogData={myBlog} />
+            </div>
+        )
+    );
+}
+
+BlogContainer.propTypes = {
+    url: PropTypes.shape({
+        includes: PropTypes.func.isRequired,
+    }).isRequired,
+    user: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+};