Rearrange the UI menu

Rearrange the UI menu to improve the usability

Issue-ID: POLICY-2925
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Icb56655b8b9300fa78d004a8fe88d64e54f42279
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

2 files changed, 37 insertions, 29 deletions

diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 40a3890a5..ae1387912 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -86,16 +86,18 @@ export default class MenuBar extends React.Component {
     render () {
         return (
                 <Navbar.Collapse>
-                    <StyledNavDropdown title="Loop Templates">
-                            <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item>
-                    </StyledNavDropdown>
-                    <StyledNavDropdown title="Policy Models">
-                            <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+                    <StyledNavDropdown title="POLICY Framework">
                             <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+                            <NavDropdown.Divider />
                             <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
+                    </StyledNavDropdown>
+                    <StyledNavDropdown title="LOOP Templates">
+                            <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item>
                     </StyledNavDropdown>
-                    <StyledNavDropdown title="Loop Instance">
+                    <StyledNavDropdown title="LOOP Instance">
                             <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
                             <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
                             <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
@@ -104,10 +106,10 @@ export default class MenuBar extends React.Component {
                             <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
                             <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
                     </StyledNavDropdown>
-                    <StyledNavDropdown title="Loop Operations">
-                            <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
+                    <StyledNavDropdown title="LOOP Operations">
+                            <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Framework (SUBMIT)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Framework (STOP)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Framework (RESTART)</NavDropdown.Item>
                             <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
                             <NavDropdown.Divider />
                             <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
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 69a0e85db..fd9956ed2 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Verify MenuBar Test the render method 1`] = `
 <NavbarCollapse>
   <Styled(NavDropdown)
-    title="Loop Templates"
+    title="POLICY Framework"
   >
     <DropdownItem
       as={
@@ -52,14 +52,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewLoopTemplatesModal"
+      to="/manageDictionaries"
     >
-      View All Templates
+      Manage Metadata Dictionaries
     </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="Policy Models"
-  >
+    <DropdownDivider
+      role="separator"
+    />
     <DropdownItem
       as={
         Object {
@@ -107,9 +106,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/uploadToscaPolicyModal"
+      to="/viewAllPolicies"
     >
-      Upload Tosca Model
+      View All Policies
     </DropdownItem>
     <DropdownItem
       as={
@@ -162,6 +161,9 @@ exports[`Verify MenuBar Test the render method 1`] = `
     >
       View Tosca Models
     </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
     <DropdownItem
       as={
         Object {
@@ -209,10 +211,14 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/manageDictionaries"
+      to="/uploadToscaPolicyModal"
     >
-      Manage Metadata Dictionaries
+      Upload Tosca Model
     </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="LOOP Templates"
+  >
     <DropdownItem
       as={
         Object {
@@ -260,13 +266,13 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewAllPolicies"
+      to="/viewLoopTemplatesModal"
     >
-      View All Policies
+      View All Templates
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)
-    title="Loop Instance"
+    title="LOOP Instance"
   >
     <DropdownItem
       as={
@@ -579,7 +585,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)
-    title="Loop Operations"
+    title="LOOP Operations"
   >
     <DropdownItem
       as={
@@ -630,7 +636,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={true}
       to="/submit"
     >
-      Create and deploy to Policy Engine(SUBMIT)
+      Create and deploy to Policy Framework (SUBMIT)
     </DropdownItem>
     <DropdownItem
       as={
@@ -681,7 +687,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={true}
       to="/stop"
     >
-      Undeploy from Policy Engine (STOP)
+      Undeploy from Policy Framework (STOP)
     </DropdownItem>
     <DropdownItem
       as={
@@ -732,7 +738,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
       disabled={true}
       to="/restart"
     >
-      ReDeploy to Policy Engine (RESTART)
+      ReDeploy to Policy Framework (RESTART)
     </DropdownItem>
     <DropdownItem
       as={