Merge "Changes for populating ReactJS component library"

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;