Integrate PF4 nav and font-family

openshift · Dec 18, 2018 · 02ba4c7 · 02ba4c7
1 parent 338b484
commit 02ba4c7
Show file tree

Hide file tree

Showing 61 changed files with 1,723 additions and 1,407 deletions.
diff --git a/frontend/integration-tests/protractor.conf.ts b/frontend/integration-tests/protractor.conf.ts
@@ -136,3 +136,10 @@ export const checkErrors = async() => await browser.executeScript(hasError).then
     fail(`omg js error: ${err}`);
   }
 });
+
+export const waitForCount = (elementArrayFinder, expectedCount) => {
+  return async() => {
+    const actualCount = await elementArrayFinder.count();
+    return expectedCount >= actualCount;
+  };
+};
diff --git a/frontend/integration-tests/tests/olm/catalog.scenario.ts b/frontend/integration-tests/tests/olm/catalog.scenario.ts
@@ -20,7 +20,7 @@ describe('Installing a service from a Catalog Source', () => {
     execSync(`echo '${JSON.stringify(operatorGroup)}' | kubectl create -n ${testName} -f -`);
 
     browser.get(`${appHost}/status/ns/${testName}`);
-    await browser.wait(until.presenceOf($('#sidebar')));
+    await browser.wait(until.presenceOf($('.pf-c-nav')));
   });
 
   afterEach(() => {

diff --git a/frontend/integration-tests/tests/secrets.scenario.ts b/frontend/integration-tests/tests/secrets.scenario.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-nested-callbacks */
-import { $, element, browser, by, ExpectedConditions as until, Key } from 'protractor';
+import { $, $$, element, browser, by, ExpectedConditions as until, Key } from 'protractor';
 
-import { appHost, testName, checkLogs, checkErrors } from '../protractor.conf';
+import { appHost, testName, checkLogs, checkErrors, waitForCount } from '../protractor.conf';
 import * as crudView from '../views/crud.view';
 import * as secretsView from '../views/secrets.view';
 
@@ -258,6 +258,7 @@ describe('Interacting with the create secret forms', () => {
       await secretsView.createSecret(secretsView.createGenericSecretLink, testName, keyValueSecretName, async() => {
         await browser.wait(until.presenceOf(secretsView.addSecretEntryLink));
         await secretsView.addSecretEntryLink.click();
+        await browser.wait(waitForCount($$('.co-file-dropzone__textarea'), 2));
         await secretsView.genericSecretForm.each(async(el, index) => {
           await el.$('input[name=key]').sendKeys(key + index);
           await el.$('.co-file-dropzone__textarea').sendKeys(value + index);

diff --git a/frontend/integration-tests/tests/service-catalog/service-binding.scenario.ts b/frontend/integration-tests/tests/service-catalog/service-binding.scenario.ts
@@ -11,7 +11,7 @@ import * as crudView from '../../views/crud.view';
 describe('Test for Cluster Service Binding', () => {
   beforeAll(async() => {
     browser.get(`${appHost}/status/ns/${testName}`);
-    await browser.wait(until.presenceOf($('#sidebar')));
+    await browser.wait(until.presenceOf($('.pf-c-nav')));
   });
 
   afterEach(() => {

diff --git a/frontend/integration-tests/tests/service-catalog/service-broker.scenario.ts b/frontend/integration-tests/tests/service-catalog/service-broker.scenario.ts
@@ -10,7 +10,7 @@ import * as crudView from '../../views/crud.view';
 describe('Test for Cluster Service Broker', () => {
   beforeAll(async() => {
     browser.get(`${appHost}/status/ns/${testName}`);
-    await browser.wait(until.presenceOf($('#sidebar')));
+    await browser.wait(until.presenceOf($('.pf-c-nav')));
   });
 
   afterEach(() => {

diff --git a/frontend/integration-tests/tests/service-catalog/service-catalog.scenario.ts b/frontend/integration-tests/tests/service-catalog/service-catalog.scenario.ts
@@ -10,7 +10,7 @@ import * as srvCatalogView from '../../views/service-catalog.view';
 describe('Test for existence of Service Catalog nav items', () => {
   beforeAll(async() => {
     browser.get(`${appHost}/status/ns/${testName}`);
-    await browser.wait(until.presenceOf($('#sidebar')));
+    await browser.wait(until.presenceOf($('.pf-c-nav')));
   });
 
   afterEach(() => {

diff --git a/frontend/integration-tests/tests/service-catalog/service-class.scenario.ts b/frontend/integration-tests/tests/service-catalog/service-class.scenario.ts
@@ -11,7 +11,7 @@ import {execSync} from 'child_process';
 describe('Test for Cluster Service Class', () => {
   beforeAll(async() => {
     browser.get(`${appHost}/status/ns/${testName}`);
-    await browser.wait(until.presenceOf($('#sidebar')));
+    await browser.wait(until.presenceOf($('.pf-c-nav')));
   });
 
   afterEach(() => {

diff --git a/frontend/integration-tests/views/crud.view.ts b/frontend/integration-tests/views/crud.view.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import { safeDump, safeLoad } from 'js-yaml';
-import { $, $$, browser, by, element, ExpectedConditions as until } from 'protractor';
+import { $, $$, browser, by, ExpectedConditions as until } from 'protractor';
 
 import * as yamlView from './yaml.view';
 import { appHost, testName } from '../protractor.conf';
@@ -108,7 +108,7 @@ export const resourceTitle = $('#resource-title');
 
 export const nameFilter = $('.form-control.text-filter');
 export const messageLbl = $('.cos-status-box');
-export const modalAnnotationsLink = element(by.partialLinkText('Annotation'));
+export const modalAnnotationsLink = $('.loading-box__loaded').element(by.partialLinkText('Annotation'));
 
 export const visitResource = async(resource: string, name: string) => {
   await browser.get(`${appHost}/k8s/ns/${testName}/${resource}/${name}`);

diff --git a/frontend/integration-tests/views/sidenav.view.ts b/frontend/integration-tests/views/sidenav.view.ts
@@ -2,11 +2,11 @@
 
 import { $$, by, browser, element, ExpectedConditions as until } from 'protractor';
 
-export const navSectionFor = (name: string) => element(by.cssContainingText('.navigation-container__section', name));
+export const navSectionFor = (name: string) => element(by.cssContainingText('.pf-c-nav__item', name));
 
 export const clickNavLink = (path: [string, string]) => browser.wait(until.visibilityOf(navSectionFor(path[0])))
   .then(() => navSectionFor(path[0]).click())
   .then(() => browser.wait(until.visibilityOf(navSectionFor(path[0]).element(by.linkText(path[1])))))
   .then(() => navSectionFor(path[0]).element(by.linkText(path[1])).click());
 
-export const activeLink = $$('.co-m-nav-link.active');
+export const activeLink = $$('.pf-c-nav__link.pf-m-current');
diff --git a/frontend/package.json b/frontend/package.json
@@ -53,6 +53,8 @@
     ]
   },
   "dependencies": {
+    "@patternfly/react-core": "^1.40.0",
+    "@patternfly/patternfly-next": "^1.0.101",
     "brace": "0.11.x",
     "classnames": "2.x",
     "core-js": "2.x",
@@ -67,8 +69,8 @@
     "murmurhash-js": "1.0.x",
     "openshift-logos-icon": "1.7.1",
     "patternfly": "^3.54.8",
-    "patternfly-react": "^2.22.0",
-    "patternfly-react-extensions": "2.13.11",
+    "patternfly-react": "^2.25.5",
+    "patternfly-react-extensions": "2.13.15",
     "plotly.js": "1.28.x",
     "prop-types": "15.6.x",
     "react": "16.6.3",

diff --git a/frontend/public/components/_about-modal.scss b/frontend/public/components/_about-modal.scss
@@ -0,0 +1,14 @@
+.pf-c-about-modal-box {
+  dt {
+    font-size: var(--pf-c-content--FontSize);
+    text-transform: none;
+  }
+  p {
+    color: var(--pf-global--Color--dark-200);
+  }
+  // hide trademark and logo-image as they are not optional, but should be
+  .pf-c-about-modal-box__header-strapline,
+  .pf-c-about-modal-box__logo-image {
+    display:none;
+  }
+}
diff --git a/frontend/public/components/_app-toolbar.scss b/frontend/public/components/_app-toolbar.scss
@@ -0,0 +1,4 @@
+.co-username {
+  // so sizing is consistent with .pf-c-dropdown__toggle
+  padding: 0 8px;
+}
diff --git a/frontend/public/components/_build-pipeline.scss b/frontend/public/components/_build-pipeline.scss
@@ -1,7 +1,7 @@
 $pipeline-aborted-color: $color-pf-black-300;
 $pipeline-border-color: $color-pf-black-300;
-$pipeline-failed-color: $color-error;
-$pipeline-font-base: 12px;
+$pipeline-failed-color: $color-pf-red-100;
+$pipeline-font-base: 13px;
 $pipeline-in-progress-color: $color-pf-blue-400;
 $pipeline-new-color: $color-pf-blue-100;
 $pipeline-pending-color: $color-pf-black-300;
@@ -102,8 +102,8 @@ $pipeline-semi-circle-animation-time: ($pipeline-circle-animation-time / 2);
       bottom: auto;
       content: '\2192';
       left: auto;
-      right: 10px;
-      top: 37%;
+      right: 14px;
+      top: 40%;
     }
   }
 }
@@ -274,7 +274,7 @@ $pipelineStageStatus: (
     animation: pipeline-stage-fadeIcon $pipeline-icon-animation-time ($pipeline-line-grow-animation-time + $pipeline-semi-circle-animation-time + ($pipeline-inner-circle-animation-time * 2)) linear forwards;
     color: $pipeline-inner-circle-color;
     font-family: 'FontAwesome';
-    font-size: $pipeline-font-base;
+    font-size: 12px;
     left: 50%;
     opacity: 0;
     position: absolute;

diff --git a/frontend/public/components/_cluster-overview.scss b/frontend/public/components/_cluster-overview.scss
@@ -43,7 +43,6 @@
 }
 
 .cluster-overview-cell {
-  margin-top: -($grid-gutter-width / 2);
   @media(min-width: $screen-lg-min) {
     .col-lg-8 {
       padding-right: 0;

diff --git a/frontend/public/components/_detail-table.scss b/frontend/public/components/_detail-table.scss
@@ -48,7 +48,6 @@
   &__breakdown {
     display: flex;
     flex-direction: column;
-    font-size: 14px;
     justify-content: space-between;
     height: $bracket-height - 1px;
     text-align: left;

diff --git a/frontend/public/components/_documentation.scss b/frontend/public/components/_documentation.scss
@@ -1,5 +1,4 @@
 .co-documentation-links__title {
-  font-size: 14px;
   font-weight: 600;
   text-transform: none;
 }
@@ -9,7 +8,6 @@
 }
 
 .co-additional-support-links__link {
-  font-size: 14px;
   font-weight: 600;
 }
 

diff --git a/frontend/public/components/_dropdown.scss b/frontend/public/components/_dropdown.scss
@@ -1,8 +1,9 @@
-$co-namespace-selector-desktop: 40px;
-$co-namespace-selector-mobile: 27px;
+$co-namespace-selector-desktop: 47px;
+$co-namespace-selector-mobile: 35px;
 $color-dropdown-hover: rgba(0, 0, 0, .05);
 $color-bookmarker--hover: #AAA;
 $color-bookmarker: #DDD;
+$masthead-height: 76px;
 
 .dropdown {
   position: relative;
@@ -34,7 +35,7 @@ $color-bookmarker: #DDD;
 .dropdown-menu__header {
   color: $color-pf-black-600;
   flex-grow: 1;
-  font-size: 11px;
+  font-size: ($font-size-base - 1);
   padding: 3px 10px;
   text-transform: uppercase;
 }
@@ -134,26 +135,31 @@ $color-bookmarker: #DDD;
 }
 
 .co-namespace-bar {
-  background-color: #292E34;
-  height: $co-namespace-selector-mobile;
+  border-bottom: 1px solid $color-grey-background-border;
   padding: 0 15px;
   white-space: nowrap;
 
   @media (min-width: $grid-float-breakpoint) {
-    border-left: 1px solid $color-os-nav-border-bottom;
-    height: $co-namespace-selector-desktop;
+    padding-left: 30px;
+    padding-right: 30px;
   }
 
   &__dropdowns {
     display: flex;
     justify-content: space-between;
 
     .btn-link {
+      color: inherit;
       padding: 4px 0 2px !important;
 
       @media(min-width: $grid-float-breakpoint) {
-        padding-bottom: 7px !important;
-        padding-top: 12px !important;
+        padding-bottom: 10px !important;
+        padding-top: 11px !important;
+      }
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
       }
     }
   }
@@ -167,9 +173,9 @@ $color-bookmarker: #DDD;
     padding: 2px 0 !important;
 
     @media (min-width: $grid-float-breakpoint) {
-      font-size: ($font-size-base + 3);
-      padding-bottom: 7px !important;
-      padding-top: 7px !important;
+      font-size: ($font-size-base + 2);
+      padding-bottom: 9px !important;
+      padding-top: 9px !important;
     }
 
     &__titlePrefix {
@@ -179,13 +185,14 @@ $color-bookmarker: #DDD;
 }
 
 .co-namespace-selector__menu.dropdown-menu {
-  max-height: calc(100vh - (#{$masthead-height-mobile} + #{$co-namespace-selector-mobile}));
+  max-height: calc(100vh - (#{$masthead-height} + #{$co-namespace-selector-mobile}));
   max-width: 100%;
   min-width: 210px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
   @media (min-width: $grid-float-breakpoint) {
-    max-height: calc(100vh - (#{$masthead-height-desktop} + #{$co-namespace-selector-desktop}));
+    max-height: calc(100vh - (#{$masthead-height} + #{$co-namespace-selector-desktop}));
     min-width: 250px;
   }
 

diff --git a/frontend/public/components/_edit-yaml.scss b/frontend/public/components/_edit-yaml.scss
@@ -5,7 +5,7 @@
 }
 
 .yaml-editor__subheader {
-  font-size: 13px;
+  font-size: $font-size-base;
 }
 
 .yaml-editor {

diff --git a/frontend/public/components/_global-notification.scss b/frontend/public/components/_global-notification.scss
@@ -1,10 +1,16 @@
-$global-notification-text: #fff;
+$global-notification-text: $color-pf-white;
 
 .co-global-notification {
-  background-color: #0088ce;
+  background-color: $color-pf-blue-400;
   color: $global-notification-text;
+  font-weight: 300;
+  padding: 4px ($grid-gutter-width / 2);
   text-align: center;
 
+  @media(min-width: $grid-float-breakpoint) {
+    padding: 6px $grid-gutter-width;
+  }
+
   a {
     color: $global-notification-text;
     cursor: pointer;
@@ -22,10 +28,10 @@ $global-notification-text: #fff;
 }
 
 .co-global-notification__impersonate-name {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .co-global-notification__impersonate-kind {
-  font-weight: 500;
+  font-weight: 600;
   padding-right: 20px;
 }
diff --git a/frontend/public/components/_horizontal-nav.scss b/frontend/public/components/_horizontal-nav.scss
@@ -46,6 +46,7 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: 15px;
     &:hover,
     &:focus {
       color: #252525;
+      text-decoration: none;
       &::after {
         background: $color-pf-black-400;
       }