fix: zowe logo and trademark info (#3338)

* fix(ui): UI Changes for Share Requested UI Changes for share Signed-off-by: Andrea Tabone <[email protected]> Signed-off-by: achmelo <[email protected]> * fix(ui): UI Changes for Share Fix mock errors Signed-off-by: Andrea Tabone <[email protected]> Signed-off-by: achmelo <[email protected]> * fix(ui): UI Changes for Share fix(ui): UI Changes for Share Fixup new homepage image layout, cleanup comments Signed-off-by: Andrea Tabone <[email protected]> Signed-off-by: achmelo <[email protected]> * fix(ui): UI Changes for Share Fix review comments Signed-off-by: Andrej Chmelo <[email protected]> Signed-off-by: achmelo <[email protected]> * lint Signed-off-by: achmelo <[email protected]> --------- Signed-off-by: Andrea Tabone <[email protected]> Signed-off-by: achmelo <[email protected]> Signed-off-by: Andrej Chmelo <[email protected]> Co-authored-by: Mike Simpson <[email protected]>
zowe · Mar 4, 2024 · 0d895ac · 0d895ac
1 parent 8a42c17
commit 0d895ac
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 33 deletions.
diff --git a/api-catalog-ui/frontend/src/assets/images/zowe-horizontal-color.png b/api-catalog-ui/frontend/src/assets/images/zowe-horizontal-color.png
diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss
@@ -187,7 +187,7 @@ body {
     }//end homepage/dashboard
 
     .homepage-content {
-      max-width: 1086px;
+      max-width: 1250px;
       padding-bottom: var( --spaceHuge );
       max-height: calc(100vh - #{var( --headerHeight )});
       scrollbar-width: none;
@@ -331,40 +331,14 @@ body {
           }
           &.homepage-header-images {
             width: 100%;
-            padding-left: 175px;
-            margin-top: 20px;
+            padding-left: 80px;
 
             .homepage-main-img {
               width: 501px;
             }
             .homepage-header-img {
               position: absolute;
             }
-            .homepage-security-img {
-              height: 45px;
-              left: 290px;
-              bottom: 45px;
-            }
-            .homepage-payment-img {
-              height: 67px;
-              left: 118px;
-              top: 105px;
-            }
-            .homepage-mainframe-img {
-              height: 89px;
-              left: var( --spaceSmall );
-              top: -10px;
-            }
-            .homepage-enterprise-img {
-              height: 45px;
-              left: 295px;
-              top: 55px;
-            }
-            .homepage-storage-img {
-              height: 67px;
-              left: 264px;
-              top: -42px;
-            }
           }
         }
 

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -20,7 +20,14 @@ import PageNotFound from '../PageNotFound/PageNotFound';
 import BigShield from '../ErrorBoundary/BigShield/BigShield';
 import ServicesNavigationBarContainer from '../ServicesNavigationBar/ServicesNavigationBarContainer';
 import Shield from '../ErrorBoundary/Shield/Shield';
-import countAdditionalContents, { customUIStyle, isAPIPortal, closeMobileMenu } from '../../utils/utilFunctions';
+import zoweImage from '../../assets/images/zowe-horizontal-color.png';
+
+import countAdditionalContents, {
+    customUIStyle,
+    isAPIPortal,
+    closeMobileMenu,
+    findAndFormatZowe,
+} from '../../utils/utilFunctions';
 
 const loadFeedbackButton = () => {
     if (isAPIPortal()) {
@@ -133,6 +140,7 @@ export default class DetailPage extends Component {
         ) {
             customUIStyle(tiles[0].customStyleConfig);
         }
+
         return (
             <div className="main">
                 {apiPortalEnabled && <FeedbackButton />}
@@ -186,7 +194,7 @@ export default class DetailPage extends Component {
                                 <div className="title-api-container">
                                     {tiles !== undefined && tiles.length === 1 && (
                                         <h2 id="title" className="text-block-11 title1">
-                                            {tiles[0].title}
+                                            {findAndFormatZowe(tiles[0].title)}
                                         </h2>
                                     )}
                                 </div>
@@ -200,6 +208,46 @@ export default class DetailPage extends Component {
                                     </div>
                                 )}
                             </div>
+                            {/* Extra Zowe information */}
+                            {apiPortalEnabled && tiles[0].title.toLowerCase().indexOf('zowe') >= 0 && (
+                                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                    <div>
+                                        <img id="zowe" alt="Zowe" src={zoweImage} className="hover" />
+                                    </div>
+
+                                    <div>
+                                        <Link
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            href="https://www.zowe.org/"
+                                            className="externalLink"
+                                        >
+                                            Zowe
+                                        </Link>
+                                        <sup>&reg;</sup> is a project of the&nbsp;
+                                        <Link
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            href="https://openmainframeproject.org/ "
+                                            className="externalLink"
+                                        >
+                                            Open Mainframe Project
+                                        </Link>
+                                        &nbsp;Zowe, the Zowe logo and the Open Mainframe Project are trademarks of&nbsp;
+                                        <Link
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            href="https://www.linuxfoundation.org/ "
+                                            className="externalLink"
+                                        >
+                                            The Linux Foundation.
+                                        </Link>
+                                        &nbsp;Broadcom is a Platinum member of Open Mainframe Project and a leading
+                                        contributor of several projects.
+                                    </div>
+                                    <br />
+                                </div>
+                            )}
                             {apiPortalEnabled && !onlySwaggerPresent && (
                                 <div id="right-resources-menu">
                                     <Typography id="resources-menu-title" variant="subtitle1">

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss
@@ -199,4 +199,8 @@ body .detail-content {
         padding-left: 10px;
         font-size: 13px;
     }
+
+    .externalLink {
+      color: var(--control00) !important;
+    }
 }
diff --git a/api-catalog-ui/frontend/src/components/Footer/_footer.scss b/api-catalog-ui/frontend/src/components/Footer/_footer.scss
@@ -31,6 +31,13 @@ body {
       }
     }
   }
+
+  .footerZoweLinks {
+    color: var( --text-secondary) !important;
+    u {
+      text-decoration-color: #3B4151;
+    }
+  }
 }
 h6#footer-message {
     color: #53565A;

diff --git a/api-catalog-ui/frontend/src/components/Header/_header.scss b/api-catalog-ui/frontend/src/components/Header/_header.scss
@@ -34,6 +34,39 @@ body {
       display: flex;
       flex-direction: row;
     }
+
+    .app-icon-container  {
+      position: relative;
+      display: inline-block;
+    }
+
+    .app-icon-container .tooltiptext {
+      visibility: hidden;
+      width: 250px;
+      background-color: black;
+      color: #fff;
+      text-align: center;
+      border-radius: 6px;
+      padding: 5px 0;
+      position: absolute;
+      z-index: 1;
+      top: -5px;
+      left: 110%;
+    }
+
+    .app-icon-container .tooltiptext::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent black transparent transparent;
+    }
+    .app-icon-container:hover .tooltiptext {
+      visibility: visible;
+    }
     .app-icon-container img {
       height: 26px;
     }
@@ -90,6 +123,12 @@ body {
         margin-left: var( --spaceSmall);
       }
     }
+    .registered {
+      font-size: 70%;
+       position: relative;
+       bottom: 5px;
+
+    }
   }//end header
 
   .dashboard-mobile-menu {

diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx
@@ -14,7 +14,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Shield from '../ErrorBoundary/Shield/Shield';
 import SearchCriteria from '../Search/SearchCriteria';
-import { closeMobileMenu, isAPIPortal } from '../../utils/utilFunctions';
+import { closeMobileMenu, isAPIPortal, findAndFormatZowe } from '../../utils/utilFunctions';
 import MenuCloseImage from '../../assets/images/xmark.svg';
 import { ReactComponent as BackArrowImage } from '../../assets/images/angles-left.svg';
 import { sortServices } from '../../selectors/selectors';
@@ -87,7 +87,7 @@ export default class ServicesNavigationBar extends Component {
         }
         const TruncatedTabLabel = withStyles(this.styles)(({ classes, label }) => (
             <Tooltip title={label} placement="bottom">
-                <div className={classes.truncatedTabLabel}>{label}</div>
+                <div className={classes.truncatedTabLabel}>{findAndFormatZowe(label)}</div>
             </Tooltip>
         ));
         return (

diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.js b/api-catalog-ui/frontend/src/utils/utilFunctions.js
@@ -195,3 +195,19 @@ export const customUIStyle = async (uiConfig) => {
 };
 
 export const isAPIPortal = () => process.env.REACT_APP_API_PORTAL === 'true';
+
+export const findAndFormatZowe = (title) => {
+    if (isAPIPortal()) {
+        const zoweIndex = title.toLowerCase().indexOf('zowe');
+        if (zoweIndex >= 0) {
+            const before = title.substring(0, zoweIndex);
+            const after = title.substring(zoweIndex + 5);
+            return (
+                <span>
+                    {before}Zowe<sup>&reg;</sup> {after}
+                </span>
+            );
+        }
+    }
+    return title;
+};
diff --git a/api-catalog-ui/frontend/src/utils/utilFunctions.test.js b/api-catalog-ui/frontend/src/utils/utilFunctions.test.js
@@ -7,7 +7,14 @@
  *
  * Copyright Contributors to the Zowe Project.
  */
-import countAdditionalContents, { closeMobileMenu, customUIStyle, isValidUrl, openMobileMenu } from './utilFunctions';
+import * as enzyme from 'enzyme';
+import countAdditionalContents, {
+    closeMobileMenu,
+    customUIStyle,
+    findAndFormatZowe,
+    isValidUrl,
+    openMobileMenu,
+} from './utilFunctions';
 
 describe('>>> Util Functions tests', () => {
     function mockFetch() {
@@ -246,4 +253,13 @@ describe('>>> Util Functions tests', () => {
     it('should return true when URL is valid', async () => {
         expect(isValidUrl('https://localhost.com/hello')).toBe(true);
     });
+
+    it('should not format title without zowe in it', async () => {
+        expect(findAndFormatZowe('String without key')).toEqual('String without key');
+    });
+    it('should format title with "zowe" in it', async () => {
+        process.env.REACT_APP_API_PORTAL = true;
+        const wrapper = enzyme.shallow(findAndFormatZowe('Zowe API Catalog'));
+        expect(wrapper.text()).toContain('®');
+    });
 });