ENG-233 amended debug page

config/env.js

@@ -81,6 +81,7 @@ function getClientEnvironment(publicUrl) {
         DIGITAL_EXCHANGE_UI_ENABLED: process.env.DIGITAL_EXCHANGE_UI_ENABLED === 'true',
         KEYCLOAK_ENABLED: process.env.KEYCLOAK_ENABLED === 'true',
         KEYCLOAK_JSON: process.env.KEYCLOAK_JSON || `${(process.env.DOMAIN || '')}/keycloak.json`,
+        APP_BUILDER_VERSION: process.env.npm_package_version,
       },
     );
 

sass/entblue-viewpage/EntBlueViewPage.scss

@@ -0,0 +1,56 @@
+.EntBlueViewPage {
+  display: grid;
+  width: 100vw;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  grid-template-columns: 1fr minmax(auto, 653px) 1fr;
+  grid-template-rows: minmax(auto, 233px) 534px 1fr;
+
+  &__center-box {
+    display: grid;
+    max-width: 1140px;
+    background-color: $color-white;
+    font-family: "Roboto";
+    grid-row: 2/3;
+    grid-column: 2/3;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
+  }
+
+  &__brand {
+    display: grid;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 60px;
+  }
+
+  &__logo {
+    align-self: flex-start;
+    width: 223px;
+    height: 58px;
+    margin-top: 50px;
+    background-repeat: no-repeat;
+  }
+
+  &__description {
+    align-self: flex-start;
+    margin-top: 16px;
+    color: $e6-blue;
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: -.17px;
+    line-height: 30px;
+    text-align: center;
+    opacity: 90%;
+  }
+
+  &__values {
+    padding: 30px 50px;
+    font-size: 14px;
+  }
+}

sass/index.scss

@@ -99,3 +99,4 @@
 @import "digital-exchange/components/ComponentListViewModeSwitcher";
 @import "digital-exchange/settings/SettingsList";
 @import "ddtable/DDTable";
+@import "entblue-viewpage/EntBlueViewPage";

sass/patternfly.scss

@@ -30,6 +30,7 @@ $color-de-component-failed-button: #c45500;
 $color-de-list-icon-active: #363636;
 $color-de-list-icon: #BBBBBB;
 $color-de-component-border: #C3C3C3;
+$e6-blue: #002F87;
 
 //FontAwesome icons
 $fa-check: "\f00c";

src/app-init/router.js

@@ -99,3 +99,4 @@ export const ROUTE_ATTRIBUTE_MONOLIST_ADD = '/datatype/attribute/:entityCode/Mon
 export const ROUTE_ATTRIBUTE_MONOLIST_PROFILE_ADD = '/profiletype/attribute/:entityCode/MonolistAdd/:attributeCode';
 export const ROUTE_RELOAD_CONFIG = '/reloadConfiguration';
 export const ROUTE_RELOAD_CONFIRM = '/reloadConfiguration/confirm';
+export const ROUTE_DEBUG_INFO = '/debug';

src/auth/default/DefaultAuthProvider.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DefaultAuthContext from 'auth/default/DefaultAuthContext';
-import { history, ROUTE_HOME, ROUTE_DASHBOARD } from 'app-init/router';
+import { history, ROUTE_HOME, ROUTE_DASHBOARD, ROUTE_DEBUG_INFO } from 'app-init/router';
 
 const DefaultAuthProvider = ({ children }) => {
   const auth = {
     enabled: false,
     authenticated: false,
     logout: (status) => {
+      const publicRoutes = [ROUTE_DEBUG_INFO];
+      if (publicRoutes.indexOf(status.pathname) !== -1) {
+        return;
+      }
+
       const redirException = [ROUTE_HOME, ROUTE_DASHBOARD];
 
       const addredirect = status &&

src/ui/app/App.js

@@ -88,6 +88,7 @@ import {
   ROUTE_DE_CONFIG_EDIT,
   ROUTE_DE_CONFIG_ADD,
   ROUTE_PLUGINS,
+  ROUTE_DEBUG_INFO,
 } from 'app-init/router';
 
 import LoginFormContainer from 'ui/login/LoginFormContainer';
@@ -147,6 +148,7 @@ import EditDataTypesPage from 'ui/data-types/edit/EditDataTypesPage';
 import AddDataTypeAttributePage from 'ui/data-types/attributes/AddDataTypeAttributePage';
 import EditDataTypeAttributePage from 'ui/data-types/attributes/EditDataTypeAttributePage';
 import MonolistPageContainer from 'ui/data-types/attributes/monolist/MonolistPageContainer';
+import DebugInfo from 'ui/debug-info/DebugInfo';
 // component repository
 import ComponentListPage from 'ui/digital-exchange/components/list/ComponentListPage';
 import ComponentListPageDisabled from 'ui/digital-exchange/components/list/ComponentListPageDisabled';
@@ -318,6 +320,7 @@ const getRouteComponent = () => (
     <Route path={ROUTE_ATTRIBUTE_MONOLIST_PROFILE_ADD} component={MonolistProfilePageContainer} />
     <Route exact path={ROUTE_RELOAD_CONFIG} component={ReloadConfigPage} />
     <Route path={ROUTE_RELOAD_CONFIRM} component={ReloadConfirmPage} />
+    <Route exact path={ROUTE_DEBUG_INFO} component={DebugInfo} />
     { /* app routes */ }
     {appsRoutes}
     {/* 404 */}
@@ -337,11 +340,11 @@ class App extends Component {
       isReady,
       username,
     } = this.props;
-    if (!username && currentRoute !== ROUTE_HOME) {
+    if (!username && [ROUTE_HOME, ROUTE_DEBUG_INFO].indexOf(currentRoute) === -1) {
       return <Redirect to={ROUTE_HOME} />;
     }
 
-    const readyDisplay = !auth.enabled || auth.authenticated
+    const readyDisplay = !auth.enabled || auth.authenticated || currentRoute === ROUTE_DEBUG_INFO
       ? getRouteComponent()
       : <LoginPage />;
 

src/ui/debug-info/DebugInfo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const DebugInfo = () => (
+  <div className="EntBlueViewPage" style={{ backgroundImage: 'url(images/login-bg.png)' }}>
+    <div className="EntBlueViewPage__center-box">
+      <div className="EntBlueViewPage__brand">
+        <div className="EntBlueViewPage__logo" style={{ backgroundImage: 'url(images/login-logo.svg)' }} />
+        <div className="EntBlueViewPage__description">Debug Information</div>
+      </div>
+      <div className="EntBlueViewPage__values">
+        <p>App Builder version: <strong>{process.env.APP_BUILDER_VERSION}</strong></p>
+        <p>Browser Info: <strong>{window.navigator.userAgent}</strong></p>
+        <p>OS Info: <strong>{window.navigator.platform}</strong></p>
+      </div>
+    </div>
+  </div>
+);
+
+export default DebugInfo;