Hide components in whitelabel tenants

There is no /api/tenant/$tenant/components URL, so hide the
"Components" link in the page header when the web ui is accessing
a whitelabel tenant.

Change-Id: I707bf03489016264ce6a37b4eb005e9680de90a2

2 files changed, 30 insertions, 20 deletions

diff --git a/web/src/App.jsx b/web/src/App.jsx
index bd640f772..5dd3b09d9 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -331,27 +331,35 @@ class App extends React.Component {
 
   render() {
     const { isKebabDropdownOpen } = this.state
-    const { notifications, configErrors, tenant } = this.props
+    const { notifications, configErrors, tenant, info } = this.props
 
     const nav = this.renderMenu()
 
-    const kebabDropdownItems = [
-      <DropdownItem
-        key="components"
-        onClick={event => this.handleComponentsLink(event)}
-      >
-        <ServiceIcon /> Components
-      </DropdownItem>,
+    const kebabDropdownItems = []
+    if (!info.tenant) {
+      kebabDropdownItems.push(
+        <DropdownItem
+          key="components"
+          onClick={event => this.handleComponentsLink(event)}
+        >
+          <ServiceIcon /> Components
+        </DropdownItem>
+      )
+    }
+
+    kebabDropdownItems.push(
       <DropdownItem key="api" onClick={event => this.handleApiLink(event)}>
         <CodeIcon /> API
-      </DropdownItem>,
+      </DropdownItem>
+    )
+    kebabDropdownItems.push(
       <DropdownItem
         key="documentation"
         onClick={event => this.handleDocumentationLink(event)}
       >
         <BookIcon /> Documentation
-      </DropdownItem>,
-    ]
+      </DropdownItem>
+    )
 
     if (tenant.name) {
       kebabDropdownItems.push(
@@ -371,13 +379,15 @@ class App extends React.Component {
         <PageHeaderToolsGroup
           visibility={{ default: 'hidden', lg: 'visible' }}
         >
-          <PageHeaderToolsItem>
-            <Link to='/components'>
-              <Button variant={ButtonVariant.plain}>
-                <ServiceIcon /> Components
-              </Button>
-            </Link>
-          </PageHeaderToolsItem>
+          { (!info.tenant) &&
+            <PageHeaderToolsItem>
+              <Link to='/components'>
+                <Button variant={ButtonVariant.plain}>
+                  <ServiceIcon /> Components
+                </Button>
+              </Link>
+            </PageHeaderToolsItem>
+          }
           <PageHeaderToolsItem>
             <Link to='/openapi'>
               <Button variant={ButtonVariant.plain}>
diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx
index 5c9cb3454..9ef61e6d7 100644
--- a/web/src/App.test.jsx
+++ b/web/src/App.test.jsx
@@ -122,8 +122,8 @@ it('renders single tenant', async () => {
   // Link should be white-label scoped
   const topMenuLinks = application.root.findAllByType(Link)
   expect(topMenuLinks[0].props.to).toEqual('/status')
-  expect(topMenuLinks[4].props.to.pathname).toEqual('/status')
-  expect(topMenuLinks[5].props.to.pathname).toEqual('/projects')
+  expect(topMenuLinks[3].props.to.pathname).toEqual('/status')
+  expect(topMenuLinks[4].props.to.pathname).toEqual('/projects')
   // Location should be /status
   expect(location.pathname).toEqual('/status')
   // Info should tell white label tenant openstack