Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Catalog version in footer for Login, Dasboard and Detail pages #3554

Merged
merged 2 commits into from
May 27, 2024
Merged

feat: Catalog version in footer for Login, Dasboard and Detail pages #3554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf2a5f9
Catalog version in footer for Login, Dasboard and Detail pages
boris-bc May 22, 2024
8d628e5
Merge branch 'v3.x.x' into boris-bc/catalog-version-in-footer
balhar-jakub May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions api-catalog-ui/frontend/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=
1 change: 1 addition & 0 deletions api-catalog-ui/frontend/.env.test
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 2 additions & 0 deletions api-catalog-ui/frontend/cypress/e2e/dashboard/dashboard.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ function login() {
cy.get('input[name="password"]').type(password);

cy.get('@submitButton').click();

cy.contains('Version: ');
}

describe('>>> Dashboard test', () => {
Expand Down
2 changes: 2 additions & 0 deletions api-catalog-ui/frontend/cypress/e2e/detail-page/detail-page.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ describe('>>> Detail page test', () => {
cy.contains(
'The API Mediation Layer for z/OS internal API services. The API Mediation Layer provides a single point of access to mainframe REST APIs and offers enterprise cloud-like features such as high-availability, scalability, dynamic API discovery, and documentation.'
);

cy.contains('Version: ');
});

it('Should display the API Catalog service title, URL and description in Swagger', () => {
Expand Down
2 changes: 2 additions & 0 deletions api-catalog-ui/frontend/cypress/e2e/login/login-ok.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ describe('>>> Login ok page test', () => {
cy.get('li[data-testid="logout"]').click();
cy.contains('API Catalog');

cy.contains('Version: ');

cy.getCookie('apimlAuthenticationToken').should('not.exist');
});
});
6 changes: 5 additions & 1 deletion api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,13 +271,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" />}
Expand Down
62 changes: 7 additions & 55 deletions api-catalog-ui/frontend/src/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,15 @@
* Copyright Contributors to the Zowe Project.
*/
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 { Container } from '@material-ui/core';
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>
);
}
}
18 changes: 3 additions & 15 deletions api-catalog-ui/frontend/src/components/Footer/Footer.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
});
});
44 changes: 14 additions & 30 deletions api-catalog-ui/frontend/src/components/Footer/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
4 changes: 4 additions & 0 deletions api-catalog-ui/frontend/src/components/Login/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down Expand Up @@ -423,6 +424,9 @@ function Login(props) {
)}
</form>
</div>
<div id="loginFooter">
<Footer />
</div>
</div>
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,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"
Expand Down
Loading