chore: Rename os-masthead and change it to typescript

frontend/public/components/app.jsx

@@ -19,7 +19,7 @@ import { CreateYAML, EditYAMLPage } from './create-yaml';
 import { ErrorPage, ErrorPage404 } from './error';
 import { EventStreamPage } from './events';
 import { GlobalNotifications } from './global-notifications';
-import { OpenShiftMasthead } from './openshift-masthead';
+import { Masthead } from './masthead';
 import { NamespaceSelector } from './namespace';
 import { Nav } from './nav';
 import { ProfilePage } from './profile';
@@ -127,7 +127,7 @@ class App extends React.PureComponent {
       <GlobalNotifications />
       <Nav />
       <div id="content">
-        <OpenShiftMasthead />
+        <Masthead />
         <Route path={namespacedRoutes} component={NamespaceSelector} />
         <Switch>
           <Route path={['/all-namespaces', '/ns/:ns',]} component={RedirectComponent} />

frontend/public/components/_openshift-masthead.scss → frontend/public/components/masthead.scss

@@ -1,4 +1,4 @@
-.os-header {
+.co-header {
   display: flex;
   height: 40px;
   @media (min-width: $grid-float-breakpoint) {
@@ -10,16 +10,16 @@
   align-items: center;
 }
 
-.os-header__console-picker {
+.co-header__console-picker {
   margin-left: 10px;
 }
 
-.os-header__user {
+.co-header__user {
   margin-left: auto;
   margin-right: 20px;
 }
 
-.os-header__user-icon {
+.co-header__user-icon {
   font-size: 14px;
   margin-right: 5px;
 }

frontend/public/components/openshift-masthead.jsx → frontend/public/components/masthead.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { Link } from 'react-router-dom';
 import * as openshiftOriginLogoImg from '../imgs/openshift-origin-logo.svg';
 import * as openshiftPlatformLogoImg from '../imgs/openshift-platform-logo.svg';
@@ -13,8 +14,8 @@ const logout = e => {
   authSvc.logout();
 };
 
-const UserMenu = connectToFlags(FLAGS.AUTH_ENABLED)((props) => {
-  const actions = [
+const UserMenu = connectToFlags(FLAGS.AUTH_ENABLED)((props: FlagsProps) => {
+  const actions: { label: string, href?: string, callback?: any }[] = [
     {
       label: 'My Account',
       href: '/settings/profile'
@@ -37,26 +38,26 @@ const UserMenu = connectToFlags(FLAGS.AUTH_ENABLED)((props) => {
 });
 
 const ContextSwitcher = () => {
-  const openshiftConsoleURL = window.SERVER_FLAGS.openshiftConsoleURL;
+  const openshiftConsoleURL = (window as any).SERVER_FLAGS.openshiftConsoleURL;
 
   const items = {
     [`${openshiftConsoleURL}catalog`]: 'Service Catalog',
     [`${openshiftConsoleURL}projects`]: 'Application Console',
-    [window.SERVER_FLAGS.basePath]: 'Cluster Console'
+    [(window as any).SERVER_FLAGS.basePath]: 'Cluster Console'
   };
 
   return <div className="contextselector-pf">
-    <Dropdown title="Cluster Console" items={items} selectedKey={window.SERVER_FLAGS.basePath}
-      dropDownClassName="bootstrap-select btn-group" onChange={url => window.location = url} />
+    <Dropdown title="Cluster Console" items={items} selectedKey={(window as any).SERVER_FLAGS.basePath}
+      dropDownClassName="bootstrap-select btn-group" onChange={url => window.location.href = url} />
   </div>;
 };
 
-export const OpenShiftLogo = connectToFlags(FLAGS.OPENSHIFT)(props => {
+export const LogoImage = connectToFlags(FLAGS.OPENSHIFT)((props: FlagsProps) => {
   const isOpenShiftCluster = props.flags[FLAGS.OPENSHIFT];
   let logoImg;
 
   // Webpack won't bundle these images if we don't directly reference them, hence the switch
-  switch(window.SERVER_FLAGS.logoImageName) {
+  switch((window as any).SERVER_FLAGS.logoImageName) {
     case 'os-origin':
       logoImg = openshiftOriginLogoImg;
       break;
@@ -75,15 +76,20 @@ export const OpenShiftLogo = connectToFlags(FLAGS.OPENSHIFT)(props => {
   </div>;
 });
 
-export const OpenShiftMasthead = () => <div className="os-masthead">
+export const Masthead = () => <div className="co-masthead">
   <header role="banner">
-    <div className="os-header">
-      <div className="os-header__console-picker">
-        { window.SERVER_FLAGS.openshiftConsoleURL && <ContextSwitcher /> }
+    <div className="co-header">
+      <div className="co-header__console-picker">
+        { (window as any).SERVER_FLAGS.openshiftConsoleURL && <ContextSwitcher /> }
       </div>
-      <div className="os-header__user navbar-right">
+      <div className="co-header__user navbar-right">
         <UserMenu />
       </div>
     </div>
   </header>
 </div>;
+
+/* eslint-disable no-undef */
+export type FlagsProps = {
+  flags: {[name: string]: boolean};
+};

frontend/public/components/nav.jsx

@@ -10,7 +10,7 @@ import { formatNamespacedRouteForResource } from '../ui/ui-actions';
 import { BuildConfigModel, BuildModel, ClusterServiceVersionModel, DeploymentConfigModel, ImageStreamModel, SubscriptionModel, InstallPlanModel, CatalogSourceModel } from '../models';
 
 import { ClusterPicker } from './cluster-picker';
-import { OpenShiftLogo } from './openshift-masthead';
+import { LogoImage } from './masthead';
 
 import * as routingImg from '../imgs/routing.svg';
 import * as appsLogoImg from '../imgs/apps-logo.svg';
@@ -290,7 +290,7 @@ export class Nav extends React.Component {
           <span className="icon-bar" aria-hidden="true"></span>
           <span className="icon-bar" aria-hidden="true"></span>
         </button>
-        <OpenShiftLogo />
+        <LogoImage />
       </div>
       <div className="sidebar__body">
         <div className="navigation-container__section navigation-container__section--cluster-picker">

frontend/public/style.scss

@@ -67,6 +67,6 @@
 @import "components/cloud-services/cloud-services";
 @import "components/graphs/graphs";
 @import "components/modals/modals";
-@import "components/openshift-masthead";
+@import "components/masthead";
 @import "components/nav";
 @import "components/documentation";

frontend/public/style/_layout.scss

@@ -38,7 +38,7 @@ body {
   }
 }
 
-.os-masthead {
+.co-masthead {
   background-color: $color-pf-black;
   color: $color-os-nav-title;
   position: fixed;