GH-876 updated header tabs

app/panel/components/Header.jsx

@@ -99,6 +99,7 @@ class Header extends React.Component {
 	*/
 	render() {
 		const { pathname } = this.props.location;
+		const showTabs = pathname === '/' || pathname.startsWith('/detail');
 		const headerLogoClasses = ClassNames('header-logo', {
 			'show-back-arrow': (pathname !== '/' && !pathname.startsWith('/detail')),
 		});
@@ -111,18 +112,20 @@ class Header extends React.Component {
 
 		return (
 			<header id="ghostery-header">
-				<div className="header-tab-group flex-container align-bottom">
-					<div className={tabSimpleClassNames} onClick={this.clickSimpleTab}>
-						<span className="header-tab-text">
-							{t('panel_header_simple_view')}
-						</span>
-					</div>
-					<div className={tabDetailedClassNames} onClick={this.clickDetailedTab}>
-						<span className="header-tab-text">
-							{t('panel_header_detailed_view')}
-						</span>
+				{ showTabs && (
+					<div className="header-tab-group flex-container align-bottom">
+						<div className={tabSimpleClassNames} onClick={this.clickSimpleTab}>
+							<span className="header-tab-text">
+								{t('panel_header_simple_view')}
+							</span>
+						</div>
+						<div className={tabDetailedClassNames} onClick={this.clickDetailedTab}>
+							<span className="header-tab-text">
+								{t('panel_header_detailed_view')}
+							</span>
+						</div>
 					</div>
-				</div>
+				)}
 				<div className="top-bar">
 					<div className="top-bar-left">
 						<Link to={(this.props.is_expert ? '/detail/blocking' : '/')} className={headerLogoClasses} >

app/panel/components/Panel.jsx

@@ -104,20 +104,16 @@ class Panel extends React.Component {
 
 		this.closeNotification();
 	}
+
 	/**
-	 * Render all child views from router.
-	 * @return {ReactComponent}   ReactComponent instance
+	 * Helper render function for the notification callout
+	 * @return {JSX} JSX for the notification callout
 	 */
-	render() {
-		// this prevents double rendering when waiting for getPanelData() to finish
-		if (!this.props.initialized) {
-			return null;
-		}
+	renderNotification() {
 		const needsReload = !!Object.keys(this.props.needsReload.changes).length;
-		let calloutText;
 
 		if (this.props.notificationText) {
-			calloutText = (
+			return (
 				<span>
 					<span key="0" dangerouslySetInnerHTML={{ __html: this.props.notificationText || t('panel_needs_reload') }} />
 					{needsReload && (
@@ -126,30 +122,41 @@ class Panel extends React.Component {
 				</span>
 			);
 		} else if (needsReload) {
-			calloutText = (
+			return (
 				<span>
 					<span key="0">{t('panel_needs_reload')}</span>
 					<span key="1" className="needs-reload-link" onClick={this.clickReloadBanner}>{ t('alert_reload') }</span>
 				</span>
 			);
 		} else if (this.props.notificationFilter === 'slow') {
-			calloutText = (
+			return (
 				<span>
 					<span key="0" className="filter-link slow-insecure" onClick={this.filterTrackers} dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
 					<span key="1">{ t('panel_tracker_slow_non_secure_end') }</span>
 				</span>
 			);
 		} else if (this.props.notificationFilter === 'compatibility') {
-			calloutText = (
+			return (
 				<span>
 					<span key="0" className="filter-link compatibility" onClick={this.filterTrackers} dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
 					<span key="1">{ t('panel_tracker_breaking_page_end') }</span>
 				</span>
 			);
-		} else {
-			calloutText = (
-				<span dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
-			);
+		}
+
+		return (
+			<span dangerouslySetInnerHTML={{ __html: this.props.notificationText }} />
+		);
+	}
+
+	/**
+	 * React's required render function. Returns JSX
+	 * @return {JSX} JSX for rendering the Panel
+	 */
+	render() {
+		// this prevents double rendering when waiting for getPanelData() to finish
+		if (!this.props.initialized) {
+			return null;
 		}
 
 		return (
@@ -162,7 +169,7 @@ class Panel extends React.Component {
 							</g>
 						</svg>
 						<span className="callout-text" >
-							{calloutText}
+							{this.renderNotification()}
 						</span>
 					</div>
 				</div>