Changes for populating ReactJS component library

Modification of Maven pom.xml to segregate creation of component library
away from the basic CLAMP UI. New directory ui-react-lib is introduced
and populated with just a few files to support the library creation.
Introduction of OnapConstants.js provides single focus for defining
constants shared across multiple components, resolving circular
dependency between LoopUI.js and MenuBar.js around defaultLoopName.
Modified LoopSvg.js to import withRoute from react-router-dom instead
of react-router, which was causing problems in usage of completed
component library.

Issue-ID: CLAMP-586
Change-Id: I3054d5388b8aa7417fe7566c34279390d24fb80a
Signed-off-by: Ted Humphrey <Thomas.Humphrey@att.com>

10 files changed, 270 insertions, 44 deletions

diff --git a/pom.xml b/pom.xml
index a7498ed26..bb22596fb 100644
--- a/pom.xml
+++ b/pom.xml
@@ -39,7 +39,7 @@
 	<description>
 	       This is the MAVEN project that builds everything for ONAP CLAMP.
 	       Docker engine is normally requires to perfom all possible tasks (including integration tests)
-	       
+
            It can build:
            - The ONAP CLAMP JAR that contains CLAMP back-end code.
            - The DOCKER images for:
@@ -53,7 +53,7 @@
             - The CLAMP backend, JAVA unit testing
             - The CLAMP backend, JAVA integration tests (with Spring + docker mariadb database + docker policy/dcae emulator written in python)
             - The CLAMP frontend, Javascrip tests (NodeJS(NPM) + JEST + Enzyme fro React)
-           
+
            The test coverage for dev's can be found after a "clean install" build in:
             - Clamp backend: target/jacoco-dev.exec (unit tests + integration tests merged)
                 or separately target/coverage-reports/jacoco.exec and target/coverage-reports/jacoco-it.exec
@@ -104,6 +104,7 @@
 		<python.http.proxy.param />
 		<tomcat.version>9.0.27</tomcat.version>
 		<ui.react.src>ui-react</ui.react.src>
+		<ui.react.lib.src>ui-react-lib</ui.react.lib.src>
 		<npm.publish.url>https://nexus3.onap.org/repository/npm.release/</npm.publish.url>
 	</properties>
 
@@ -589,7 +590,7 @@
 			</testResource>
 		</testResources>
 		<resources>
-			<!-- For AAF folder maven should not try to filter Keystores/Truststores ... Otherwise 
+			<!-- For AAF folder maven should not try to filter Keystores/Truststores ... Otherwise
 				they will be broken and unreadable -->
 			<resource>
 				<directory>src/main/resources</directory>
@@ -607,6 +608,9 @@
 			</resource>
 			<resource>
 				<directory>${ui.react.src}</directory>
+				<excludes>
+					<exclude>node_modules</exclude>
+				</excludes>
 				<includes>
 					<include>src/**</include>
 					<include>public/**</include>
@@ -616,6 +620,30 @@
 				<filtering>true</filtering>
 				<targetPath>${project.build.directory}/${ui.react.src}</targetPath>
 			</resource>
+			<resource>
+				<directory>${ui.react.src}</directory>
+				<includes>
+					<include>src/**</include>
+				</includes>
+				<excludes>
+					<exclude>**/__snapshots__/**</exclude>
+					<exclude>**/**.test.js</exclude>
+				</excludes>
+				<filtering>true</filtering>
+				<targetPath>${project.build.directory}/${ui.react.lib.src}</targetPath>
+			</resource>
+			<resource>
+				<directory>${ui.react.lib.src}</directory>
+				<includes>
+					<include>**</include>
+				</includes>
+				<excludes>
+					<exclude>node_modules/**</exclude>
+					<exclude>package-lock.json</exclude>
+				</excludes>
+				<filtering>true</filtering>
+				<targetPath>${project.build.directory}/${ui.react.lib.src}</targetPath>
+			</resource>
 		</resources>
 
 		<plugins>
@@ -652,7 +680,7 @@
 				</executions>
 
 			</plugin>
-			<!-- Read the swagger.json file and the definition from SwaggerConfig.java; generate 
+			<!-- Read the swagger.json file and the definition from SwaggerConfig.java; generate
 				a list of .adoc files containing the APIs info in more structured way -->
 			<plugin>
 				<groupId>io.github.swagger2markup</groupId>
@@ -687,7 +715,7 @@
 				</executions>
 			</plugin>
 
-			<!-- Run the generated asciidoc through Asciidoctor to generate other documentation 
+			<!-- Run the generated asciidoc through Asciidoctor to generate other documentation
 				types, such as PDFs or HTML5 -->
 			<plugin>
 				<groupId>org.asciidoctor</groupId>
@@ -975,7 +1003,7 @@
 									<tag>${project.docker.latesttagtimestamp.version}</tag>
 									<tag>${project.docker.latesttag.version}</tag>
 								</tags>
-								<!-- A relative path is looked up in ${project.basedir}/src/main/docker by 
+								<!-- A relative path is looked up in ${project.basedir}/src/main/docker by
 									default -->
 								<dockerFile>backend/Dockerfile</dockerFile>
 								<assembly>
@@ -997,7 +1025,7 @@
 									<tag>${project.docker.latesttagtimestamp.version}</tag>
 									<tag>${project.docker.latesttag.version}</tag>
 								</tags>
-								<!-- A relative path is looked up in ${project.basedir}/src/main/docker by 
+								<!-- A relative path is looked up in ${project.basedir}/src/main/docker by
 									default -->
 								<dockerFile>frontend/Dockerfile</dockerFile>
 								<assembly>
@@ -1153,7 +1181,6 @@
 				<version>1.8.0</version>
 				<configuration>
 					<installDirectory>${project.build.directory}/${ui.react.src}</installDirectory>
-					<workingDirectory>${project.build.directory}/${ui.react.src}</workingDirectory>
 				</configuration>
 				<executions>
 					<execution>
@@ -1163,8 +1190,8 @@
 						</goals>
 						<phase>generate-sources</phase>
 						<configuration>
-						<nodeVersion>v12.13.0</nodeVersion>
-						<npmVersion>6.13.0</npmVersion>
+							<nodeVersion>v12.13.0</nodeVersion>
+							<npmVersion>6.13.0</npmVersion>
 						</configuration>
 					</execution>
 					<execution>
@@ -1174,6 +1201,7 @@
 						</goals>
 						<phase>compile</phase>
 						<configuration>
+							<workingDirectory>${project.build.directory}/${ui.react.src}</workingDirectory>
 							<arguments>install</arguments>
 						</configuration>
 					</execution>
@@ -1185,6 +1213,29 @@
 						<phase>test</phase>
 						<configuration>
 							<arguments>run-script test:coverage</arguments>
+							<workingDirectory>${project.build.directory}/${ui.react.src}</workingDirectory>
+						</configuration>
+					</execution>
+					<execution>
+						<id>npm_install_lib</id>
+						<goals>
+							<goal>npm</goal>
+						</goals>
+						<phase>deploy</phase>
+						<configuration>
+							<workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
+							<arguments>install</arguments>
+						</configuration>
+					</execution>
+					<execution>
+						<id>npm_build_lib</id>
+						<goals>
+							<goal>npm</goal>
+						</goals>
+						<phase>deploy</phase>
+						<configuration>
+							<workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
+							<arguments>run build</arguments>
 						</configuration>
 					</execution>
 					<execution>
@@ -1194,6 +1245,7 @@
 						</goals>
 						<phase>deploy</phase>
 						<configuration>
+							<workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
 							<arguments>publish</arguments>
 						</configuration>
 					</execution>
diff --git a/ui-react-lib/libIndex.js b/ui-react-lib/libIndex.js
new file mode 100755
index 000000000..89bf831d9
--- /dev/null
+++ b/ui-react-lib/libIndex.js
@@ -0,0 +1,45 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ *                             reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+export { default as ConfigurationPolicyModal } from './src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
+export { default as DeployLoopModal } from './src/components/dialogs/Loop/DeployLoopModal';
+export { default as LoopActionService } from './src/api/LoopActionService';
+export { default as LoopCache }  from './src/api/LoopCache';
+export { default as LoopComponentConverter } from './src/components/loop_viewer/svg/LoopComponentConverter';
+export { default as LoopLogs } from './src/components/loop_viewer/logs/LoopLogs';
+export { default as LoopPropertiesModal } from './src/components/dialogs/Loop/LoopPropertiesModal';
+export { default as LoopService } from './src/api/LoopService';
+export { default as LoopStatus } from './src/components/loop_viewer/status/LoopStatus';
+export { default as LoopSvg } from './src/components/loop_viewer/svg/LoopSvg';
+export { default as LoopUI } from './src/LoopUI';
+export { default as MenuBar } from './src/components/menu/MenuBar';
+export { default as NotFound } from './src/NotFound';
+export { default as OpenLoopModal } from './src/components/dialogs/Loop/OpenLoopModal';
+export { default as OperationalPolicyModal } from './src/components/dialogs/OperationalPolicy/OperationalPolicyModal';
+export { default as PerformActions } from './src/components/dialogs/PerformActions';
+export { default as RefreshStatus } from './src/components/dialogs/RefreshStatus';
+export { default as TemplateMenuService } from './src/api/TemplateMenuService';
+export { default as UserInfoModal } from './src/components/dialogs/UserInfoModal';
+export { default as UserService } from './src/api/UserService';
+export { default as ViewBlueprintMicroServiceTemplatesModal } from './src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal';
+export { default as ViewToscaPolicyModal } from './src/components/dialogs/Tosca/ViewToscaPolicyModal';
diff --git a/ui-react-lib/package.json b/ui-react-lib/package.json
new file mode 100755
index 000000000..3698484d7
--- /dev/null
+++ b/ui-react-lib/package.json
@@ -0,0 +1,51 @@
+{
+	"name": "onap-clamp-ui-lib",
+	"version": "${project.version}",
+	"description": "ONAP CLAMP UI Reactjs Component Library",
+	"author": "ONAP Clamp Team",
+	"license": "Apache-2.0",
+	"main": "dist/index.js",
+	"module": "dist/esindex.js",
+	"scripts": {
+		"build": "rollup -c"
+	},
+	"files": [
+		"dist"
+	],
+	"peerDependencies": {
+		"@json-editor/json-editor": "1.4.0-beta.0",
+		"@material-ui/core": "4.6.0",
+		"@material-ui/icons": "4.5.1",
+		"bootstrap-css-only": "4.3.1",
+		"material-table": "1.53.0",
+		"react": "16.9.0",
+		"react-bootstrap": "1.0.0-beta.14",
+		"react-dom": "16.9.0",
+		"react-router-dom": "5.0.1",
+		"react-scripts": "3.1.1",
+		"react-select": "3.0.8",
+		"rollup": "^1.29.1",
+		"styled-components": "4.3.2"
+	},
+	"devDependencies": {
+		"@babel/cli": "7.7.5",
+		"@babel/core": "7.7.5",
+		"@babel/helper-plugin-utils": "7.0.0",
+		"@babel/plugin-external-helpers": "^7.7.4",
+		"@babel/plugin-proposal-class-properties": "7.5.5",
+		"@babel/plugin-transform-runtime": "7.7.6",
+		"@babel/preset-env": "7.5.5",
+		"@babel/preset-react": "7.0.0",
+		"rollup": "1.29.1",
+		"@rollup/plugin-commonjs": "^11.0.1",
+		"@rollup/plugin-image": "2.0.0",
+		"@rollup/plugin-node-resolve": "7.0.0",
+		"@rollup/plugin-replace": "2.2.1",
+		"@rollup/plugin-url": "4.0.0",
+		"@svgr/rollup": "5.1.0",
+		"babel-plugin-external-helpers": "6.22.0",
+		"rollup-plugin-babel": "4.3.3",
+		"rollup-plugin-peer-deps-external": "2.2.0",
+		"rollup-plugin-postcss": "2.0.3"
+	}
+}
diff --git a/ui-react-lib/rollup.config.js b/ui-react-lib/rollup.config.js
new file mode 100755
index 000000000..c671779c0
--- /dev/null
+++ b/ui-react-lib/rollup.config.js
@@ -0,0 +1,48 @@
+import babel from 'rollup-plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+import resolve from '@rollup/plugin-node-resolve'
+import external from 'rollup-plugin-peer-deps-external'
+import img from '@rollup/plugin-image'
+
+import pkg from './package.json'
+
+export default {
+	input: './libIndex.js',
+	output: [
+		{
+			file: pkg.main,
+			format: 'cjs',
+			sourcemap: true
+		},
+		{
+			file: pkg.module,
+			format: 'es',
+			sourcemap: true
+		}
+	],
+	plugins: [
+		img(),
+		external(),
+		postcss({
+			modules: true
+		}),
+		babel({
+			exclude: 'node_modules/**',
+			presets: [
+	
+				"@babel/preset-env", {},
+				"@babel/preset-react", {}
+			],
+			plugins: [
+					[
+						"@babel/plugin-proposal-class-properties",
+						{
+							"loose": true
+						}
+					]
+			]
+		}),
+		resolve({ preferBuiltins: true, mainFields: ['browser'] })
+	]
+}
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index eb4ff6a50..9eea0be95 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -27,6 +27,7 @@ import MenuBar from './components/menu/MenuBar';
 import Navbar from 'react-bootstrap/Navbar';
 import logo from './logo.png';
 import { GlobalClampStyle } from './theme/globalStyle.js';
+import OnapConstants from './utils/OnapConstants';
 
 import LoopSvg from './components/loop_viewer/svg/LoopSvg';
 import LoopLogs from './components/loop_viewer/logs/LoopLogs';
@@ -99,11 +100,9 @@ const LoopViewBodyDivStyled = styled.div`
 
 export default class LoopUI extends React.Component {
 
-	static defaultLoopName="Empty (NO loop loaded yet)";
-
 	state = {
 		userName: null,
-		loopName: LoopUI.defaultLoopName,
+		loopName: OnapConstants.defaultLoopName,
 		loopCache: new LoopCache({}),
 		showAlert: false
 	};
@@ -242,7 +241,7 @@ export default class LoopUI extends React.Component {
 	}
 
 	closeLoop() {
-		this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName });
+		this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
 		this.props.history.push('/');
 	}
 
diff --git a/ui-react/src/LoopUI.test.js b/ui-react/src/LoopUI.test.js
index e28096bd4..d1b76aa9a 100644
--- a/ui-react/src/LoopUI.test.js
+++ b/ui-react/src/LoopUI.test.js
@@ -23,6 +23,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import LoopUI from './LoopUI';
+import OnapConstants from './utils/OnapConstants';
 
 import LoopCache from './api/LoopCache';
 import LoopActionService from './api/LoopActionService';
@@ -77,7 +78,7 @@ describe('Verify LoopUI', () => {
 		const instance = component.instance();
 		instance.closeLoop();
 			
-		expect(component.state('loopName')).toEqual("Empty (NO loop loaded yet)");
+		expect(component.state('loopName')).toEqual(OnapConstants.defaultLoopName);
 		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
 	})
 
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 06cfd238f..4bbf608df 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -23,7 +23,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import LoopCache from '../../../api/LoopCache';
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import LoopService from '../../../api/LoopService';
 import LoopComponentConverter from './LoopComponentConverter';
 
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index e211b0eaf..41a105488 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -24,7 +24,7 @@ import React from 'react';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
-import LoopUI from '../../LoopUI';
+import OnapConstants from '../../utils/OnapConstants';
 import 'bootstrap-css-only/css/bootstrap.min.css';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
@@ -76,7 +76,7 @@ export default class MenuBar extends React.Component {
 	};
 
 	componentWillReceiveProps(newProps) {
-		if (newProps.loopName !== LoopUI.defaultLoopName) {
+		if (newProps.loopName !== OnapConstants.defaultLoopName) {
 			this.setState({ disabled: false });
 		} else {
 			this.setState({ disabled: true });
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 1670124cc..c17214aad 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -11,7 +11,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -44,7 +44,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -62,7 +62,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -95,7 +95,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -117,7 +117,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -150,7 +150,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -168,7 +168,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -201,7 +201,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -219,7 +219,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -252,7 +252,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -274,7 +274,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -307,7 +307,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -325,7 +325,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -358,7 +358,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -376,7 +376,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -409,7 +409,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -427,7 +427,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -460,7 +460,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -478,7 +478,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -511,7 +511,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -529,7 +529,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -562,7 +562,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -584,7 +584,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -617,7 +617,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -650,7 +650,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "sc-eNQAEJ",
+            "componentId": "sc-bdVaJa",
             "isStatic": false,
             "rules": Array [
               "
@@ -683,7 +683,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
           "displayName": "Styled(Link)",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "sc-eNQAEJ",
+          "styledComponentId": "sc-bdVaJa",
           "target": [Function],
           "toString": [Function],
           "warnTooManyClasses": [Function],
diff --git a/ui-react/src/utils/OnapConstants.js b/ui-react/src/utils/OnapConstants.js
new file mode 100644
index 000000000..22460c3d1
--- /dev/null
+++ b/ui-react/src/utils/OnapConstants.js
@@ -0,0 +1,30 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ *                             reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+// Maintain a list of ONAP CLAMP UI "constants" that can be used by any componenet within CLAMP
+
+const OnapConstants = {
+	defaultLoopName: "Empty (NO loop loaded yet)"
+};
+
+export default OnapConstants;