Catalog version in footer for Login, Dasboard and Detail pages

zowe · May 22, 2024 · 45703e4 · 45703e4
1 parent c20fc42
commit 45703e4
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 102 deletions.
diff --git a/api-catalog-ui/frontend/.env b/api-catalog-ui/frontend/.env
@@ -9,3 +9,4 @@ REACT_APP_CA_ENV=false
 REACT_APP_STATUS_UPDATE_SCALING_DURATION=1000
 REACT_APP_GATEWAY_URL=
 REACT_APP_API_PORTAL=false
+REACT_APP_ZOWE_BUILD_INFO=
diff --git a/api-catalog-ui/frontend/.env.test b/api-catalog-ui/frontend/.env.test
@@ -9,3 +9,4 @@ REACT_APP_CATALOG_PASSWORD=user
 REACT_APP_CA_ENV=false
 REACT_APP_CATALOG_HOME=/apicatalog/api/v1
 REACT_APP_API_PORTAL=false
+REACT_APP_ZOWE_BUILD_INFO=test build info
diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx
@@ -231,7 +231,11 @@ export default class Dashboard extends Component {
                                         No services found matching search criteria
                                     </Typography>
                                 )}
-                                <Footer />
+                                {hasTiles && (
+                                    <div id="dashboardFooter">
+                                        <Footer />
+                                    </div>
+                                )}
                             </div>
                         </div>
                     </div>

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -319,13 +319,14 @@ export default class DetailPage extends Component {
                                             )}
                                         />
                                     </Switch>
+                                    <div id="detailFooter">
+                                        <Footer />
+                                    </div>
                                 </Router>
                             </Suspense>
                         )}
                         {apiPortalEnabled && <Divider light id="footer-divider" />}
                     </div>
-
-                    <Footer />
                 </div>
 
                 {showSideBar && <div className="side-bar" />}

diff --git a/api-catalog-ui/frontend/src/components/Footer/Footer.jsx b/api-catalog-ui/frontend/src/components/Footer/Footer.jsx
@@ -9,62 +9,14 @@
  */
 import { Component } from 'react';
 import { Container, Link, Typography } from '@material-ui/core';
-import { isAPIPortal } from '../../utils/utilFunctions';
-import linkedInImg from '../../assets/images/linkedin-red.png';
-import twitterImg from '../../assets/images/twitter-square.png';
-import youtubeImg from '../../assets/images/youtube-square.png';
-import mailImg from '../../assets/images/square-envelope.png';
+import './footer.css';
 
 export default class Footer extends Component {
     render() {
-        if (isAPIPortal() || process.env.REACT_APP_CA_ENV === 'true') {
-            return (
-                <footer id="pageFooter">
-                    <div id="bottom-info-div">
-                        <Container>
-                            <strong />
-                            <Link className="links" />
-                            <Link className="links" />
-                        </Container>
-                        <Container>
-                            <strong>News & Information</strong>
-                            <Link className="links" />
-                            <Link className="links" />
-                            <Link className="links" />
-                            <Link className="links" />
-                            <Link className="links" />
-                            <Link className="links" />
-                        </Container>
-                        <Container>
-                            <strong>Contact Us</strong>
-                            <Link className="footer-links" style={{ paddingRight: '5px' }}>
-                                <img id="linkedin" alt="linkedin" src={linkedInImg} />
-                            </Link>
-                            <Link className="footer-links" style={{ paddingRight: '5px' }}>
-                                <img id="twitter" alt="twitter" src={twitterImg} />
-                            </Link>
-                            <Link className="footer-links" style={{ paddingRight: '5px' }}>
-                                <img id="youtube" alt="youtube" src={youtubeImg} />
-                            </Link>
-                            <Link className="footer-links">
-                                <img id="email" alt="email" src={mailImg} />
-                            </Link>
-                        </Container>
-                    </div>
-                    <div className="left">
-                        <img alt="" id="footerLogo" />
-                        <Link className="footer-links" />
-                        <br />
-                        <br />
-                        <p />
-                    </div>
-                    <div className="right">
-                        <Link data-testid="link" />
-                    </div>
-                    <Typography id="footer-message" variant="subtitle2" />
-                </footer>
-            );
-        }
-        return null;
+        return (
+            <footer id="pageFooter">
+                <Container>Version: {process.env.REACT_APP_ZOWE_BUILD_INFO}</Container>
+            </footer>
+        );
     }
 }
diff --git a/api-catalog-ui/frontend/src/components/Footer/Footer.test.jsx b/api-catalog-ui/frontend/src/components/Footer/Footer.test.jsx
@@ -11,21 +11,9 @@ import * as enzyme from 'enzyme';
 import Footer from './Footer';
 
 describe('>>> Footer component tests', () => {
-    it('should not display a Link', () => {
+    it('should display test build info', () => {
         const footer = enzyme.shallow(<Footer />);
-        expect(footer.find('footer').length).toBeFalsy();
-    });
-
-    it('should display link', () => {
-        process.env.REACT_APP_CA_ENV = true;
-        const footer = enzyme.shallow(<Footer />);
-        expect(footer.find('Link').length).toBeDefined();
-    });
-
-    it('should show the paragraph', () => {
-        process.env.REACT_APP_CA_ENV = true;
-        const footer = enzyme.shallow(<Footer />);
-        const paragraph = footer.find('p');
-        expect(paragraph).toExist();
+        expect(footer.find('footer').length).toBeDefined();
+        expect(footer.find('footer').contains('Version: test build info'));
     });
 });
diff --git a/api-catalog-ui/frontend/src/components/Footer/footer.css b/api-catalog-ui/frontend/src/components/Footer/footer.css
@@ -1,45 +1,29 @@
 #pageFooter {
     font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-    background-color: #fff;
-    color: #111;
     text-align: center;
     padding: .6rem 38px .3rem 28px;
     flex-direction: row;
     justify-content: space-between;
-    border-top: 1px solid #DDE3ED;
     box-sizing: border-box;
     flex-shrink: 0;
+    font-size: 12px;
 }
 
-.right {
-    display: inline-flex;
-    justify-content: space-evenly;
-    flex-direction: row;
-    padding-top: 1.3rem;
-}
-
-.right > * {
-    padding: 0 0.6rem;
-}
-
-.left {
-    padding: calc(32px/2) 0;
-    flex-direction: row;
+#loginFooter {
+    color: #f0f0f0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 60%;
+    text-align: center;
+    display:block;
 }
 
-.left img {
-    margin-right: calc(32px/2);
+#dashboardFooter {
+    color: #606060;
 }
 
-#footerLogo {
-    width: 105px;
-    height: 21px;
-}
+#detailFooter {
 
-.footer-links {
-    display: inline-flex;
-    font-size: 12px;
-    margin-left: 39px;
-    color: #53565A;
-    line-height: 19px;
-}
+    color: #606060;
+    margin-left: 45%;
+}
diff --git a/api-catalog-ui/frontend/src/components/Login/Login.jsx b/api-catalog-ui/frontend/src/components/Login/Login.jsx
@@ -30,6 +30,7 @@ import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import WarningIcon from '@material-ui/icons/Warning';
 import Spinner from '../Spinner/Spinner';
 import './Login.css';
+import Footer from '../Footer/Footer';
 
 function Login(props) {
     const [username, setUsername] = useState('');
@@ -423,6 +424,9 @@ function Login(props) {
                         )}
                     </form>
                 </div>
+                <div id="loginFooter">
+                    <Footer />
+                </div>
             </div>
         </div>
     );

diff --git a/build.gradle b/build.gradle
@@ -136,6 +136,12 @@ subprojects {
     }
 }
 
+task updateCatalogVersion {
+    ant.replaceregexp(match:'REACT_APP_ZOWE_BUILD_INFO=(.*)', replace:'REACT_APP_ZOWE_BUILD_INFO=' + version, flags:'g', byline:true) {
+        fileset(dir: 'api-catalog-ui/frontend', includes: '.env')
+    }
+}
+
 task buildCore(dependsOn: [':discovery-service:build', ':api-catalog-services:build', ':api-catalog-ui:build',
                            ':discoverable-client:build', ':zaas-client:build', ':apiml-sample-extension:build', ':cloud-gateway-service:build']) {
     description "Build core components"