Skip to content

Commit

Permalink
chore: UI polishing (#2985)
Browse files Browse the repository at this point in the history 
* css polishing

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix warnings

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix some style

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* improve handling in case of header set to white

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix buttons color

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* small fix for better responsiveness

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix + test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix complexity

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fixing

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* reduce complexity

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* hide compare button in case of no doc

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix wizard bar and add unit tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix login form

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix spinner glitch on login

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* refactor tabs and fix css

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* get version for compare

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix compare versions

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* increase coverage

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix small bug

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix e2e test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add border color when hover/select tab

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix anchors

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix media icons and search bar

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add test

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* small changes

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix code smell

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* increase coverage

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add check and hide right menu in case only swagger present

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* adjust internal doc img size

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* address PR comments

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* address comments

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* small fix

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix operation swagger width

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* address comments

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix search bar css

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix bug of no swagger being displayed when navigating to the detailpage

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* fix tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add test and adjust css

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* add unit tests

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* small fix

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

---------

Signed-off-by: at670475 <andrea.tabone@broadcom.com>
  • Loading branch information
@taban03
taban03 authored Jul 31, 2023
1 parent e4dd92e commit 995d837
Show file tree
Hide file tree
Showing 43 changed files with 1,021 additions and 420 deletions.
6 changes: 4 additions & 2 deletions api-catalog-ui/frontend/cypress/integration/e2e/detail-page/service-version-compare.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@ describe('>>> Service version compare Test', () => {
it('Should show compare tab', () => {
// Location of the compare has changed, it's no longer a specific tab
cy.get('.tabs-container').should('not.exist');
cy.get('.nav-tabs').should('exist');
cy.get('.nav-tabs').should('have.length', 12);
cy.get('div.MuiTabs-root.custom-tabs.MuiTabs-vertical > div.MuiTabs-scroller.MuiTabs-scrollable > div').should('exist');
cy.get('div.MuiTabs-flexContainer.MuiTabs-flexContainerVertical') // Select the parent div
.find('a.MuiTab-root') // Find all the anchor elements within the div
.should('have.length', 12); // Check if there are 12 anchor elements within the div
cy.get('.version-text').should('exist');
cy.get('.version-text').should('contain.text', 'Compare');
});
Expand Down
5 changes: 5 additions & 0 deletions api-catalog-ui/frontend/src/components/App/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,8 @@
height: 100vh;
}

@media only screen and (max-width: 1120px) {
.content {
width: fit-content;
}
}
25 changes: 24 additions & 1 deletion api-catalog-ui/frontend/src/components/Dashboard/Dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,29 @@ a {
border: 1px solid #C9C8C5;
}

#search .MuiInputBase-root {
width: 100%;
}

#search > div > div > div > #search-icon {
margin-left: 168px;
}

#search-input > svg {
margin-left: 168px;
}

/* For Firefox */
@-moz-document url-prefix() {
#search > div > div > div > #search-icon {
margin-left: 125px;
}
#search-input > svg {
margin-left: 125px;
}
}


#search_no_results {
color: #1d5bbf;
}
Expand Down Expand Up @@ -262,7 +285,7 @@ a {
display: contents;
}

@media only screen and (max-width: 600px) {
@media only screen and (max-width: 1120px) {
#dash-buttons {
margin: 0;
float: none;
Expand Down
38 changes: 35 additions & 3 deletions api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
.header, .header > * {
align-items: center;
}
#search .MuiFormControl-root {
display: contents;
}
h1 {
margin: var( --spaceMedium ) 0;
padding-bottom: var( --spaceMedium );
Expand All @@ -21,15 +24,32 @@
left: calc(50% - #{calc(var( --headerLineWidth ) / 2)});
}
}

#search {
height: 50px;
width: 422px;
margin-left: auto;
margin-right: auto;
background: #FFFFFF;
border: 1px solid #C9C8C5;
.MuiFormControl-root {
display: flex;

display: flex;

.MuiInput-root {
width: 100%;
}
>div {
>div {
>input {
margin-left: auto;
position: static;
}
>div {
#search-icon {
margin-left: 156px;
}
}
}
}
}

Expand Down Expand Up @@ -68,7 +88,20 @@
color: var( --text20 );
position: relative;
left: var( --spaceSmaller );
margin-top: 0px;
margin-left: 156px;
}

/* For Firefox */
@-moz-document url-prefix() {
.MuiSvgIcon-root {
margin-left: 130px;
}
#search #search-icon {
margin-left: 130px;
}
}

.MuiInputBase-input {
margin-top: auto;
margin-left: 10px;
Expand All @@ -90,4 +123,3 @@
width: 99%;
display: block;
}

18 changes: 10 additions & 8 deletions api-catalog-ui/frontend/src/components/DetailPage/DetailPage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
}

.main-content2 detail-content {
display: flex;
height: 100vh;
text-align: left;
background-color: #EFEFEF;
}
Expand Down Expand Up @@ -44,14 +46,12 @@
}

.detailed-description-container {
margin-top: 2rem;
text-align: left;
overflow: hidden;
width: 100%;
}

.api-description-container {
margin-left: 397px;
margin-left: 375px;
padding: 2.2rem;
}

Expand Down Expand Up @@ -87,7 +87,6 @@
}

#title {
padding: 2rem .3rem 1.3rem 0;
color: #58606e;
font-size: 28px;
font-weight: 700;
Expand Down Expand Up @@ -130,12 +129,13 @@ div.content-description-container > div > div:nth-child(2) > div {
}

.nav-bar {
min-height: 84vh;
max-width: 380px;
min-height: 40vh;
flex-direction: column;
align-items: center;
min-width: 368px;
box-shadow: 0 0 6px hsl(210 14% 90%);
padding: 10px 5px 10px 20px;
padding: 10px 5px 16px 20px;
flex: 1 0 0;
width: auto;
height: auto;
Expand All @@ -146,9 +146,7 @@ div.content-description-container > div > div:nth-child(2) > div {
}

.paragraph-description-container {
/*change width via templating mechanism to create space for the right menu (width 80%) */
width: auto;
/*width: 80%;*/
margin-left: 56px;
}

Expand All @@ -167,3 +165,7 @@ div.content-description-container > div > div:nth-child(2) > div {
width: 600px;
}
}

.MuiTabs-root.custom-tabs.MuiTabs-vertical {
margin-right: 12px;
}
80 changes: 58 additions & 22 deletions api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,20 @@ 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() {
const { fetchTilesStart, currentTileId, fetchNewTiles } = this.props;
const { fetchTilesStart, currentTileId, fetchNewTiles, history } = this.props;
fetchNewTiles();
if (currentTileId) {
fetchTilesStart(currentTileId);
}
if (!localStorage.getItem('serviceId')) {
const id = history.location.pathname.split('/service/')[1];
localStorage.setItem('serviceId', id);
}
localStorage.removeItem('selectedTab');
}

componentWillUnmount() {
Expand All @@ -40,9 +45,16 @@ export default class DetailPage extends Component {
history.push('/dashboard');
};

handleLinkClick = (e, id) => {
e.preventDefault();
const elementToView = document.querySelector(id);
if (elementToView) {
elementToView.scrollIntoView();
}
};

render() {
const {
tiles,
isLoading,
clearService,
fetchTilesStop,
Expand All @@ -55,6 +67,7 @@ export default class DetailPage extends Component {
currentTileId,
fetchNewTiles,
} = this.props;
let { tiles } = this.props;
const iconBack = <ChevronLeftIcon />;
let error = null;
if (fetchTilesError !== undefined && fetchTilesError !== null) {
Expand All @@ -65,9 +78,19 @@ export default class DetailPage extends Component {
fetchTilesStop();
fetchNewTiles();
fetchTilesStart(currentTileId);
} else if (services && services.length > 0 && !currentTileId) {
const id = history.location.pathname.split('/service/')[1];
if (id) {
const correctTile = services.find((tile) => tile.services.some((service) => service.serviceId === id));
if (correctTile) {
tiles = [correctTile];
}
}
}
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);
}
Expand Down Expand Up @@ -101,16 +124,18 @@ export default class DetailPage extends Component {
</div>
{!isLoading && !fetchTilesError && (
<div className="api-description-container">
<IconButton
id="go-back-button"
data-testid="go-back-button"
color="primary"
onClick={this.handleGoBack}
size="medium"
>
{iconBack}
Back
</IconButton>
{!apiPortalEnabled && (
<IconButton
id="go-back-button"
data-testid="go-back-button"
color="primary"
onClick={this.handleGoBack}
size="medium"
>
{iconBack}
Back
</IconButton>
)}
<div className="detailed-description-container">
<div className="title-api-container">
{tiles !== undefined && tiles.length === 1 && (
Expand All @@ -127,23 +152,29 @@ 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
</Typography>
<Container>
<Link className="links" href="#swagger-label">
<Link className="links" onClick={(e) => this.handleLinkClick(e, '#swagger-label')}>
Swagger
</Link>
<Link className="links" href="#use-cases-label">
Use cases
<Link
className="links"
onClick={(e) => this.handleLinkClick(e, '#use-cases-label')}
>
Use cases ({useCasesCounter})
</Link>
<Link className="links" href="#tutorials-label">
Tutorials
<Link
className="links"
onClick={(e) => this.handleLinkClick(e, '#tutorials-label')}
>
Tutorials ({tutorialsCounter})
</Link>
<Link className="links" href="#videos-label">
Videos
<Link className="links" onClick={(e) => this.handleLinkClick(e, '#videos-label')}>
Videos ({videosCounter})
</Link>
</Container>
</div>
Expand All @@ -167,7 +198,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>
)}
/>
Expand Down
Loading

0 comments on commit 995d837

Please sign in to comment.