fix(ESSNTL-4196): Tie URLs to chrome isBeta (#1817)

Fixes https://issues.redhat.com/browse/ESSNTL-4196.

src/Utilities/ChromeLoader.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+
+const ChromeLoader = ({ children }) => {
+    const chrome = useChrome();
+
+    return <>
+        {React.Children.map(children, child => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, { chrome });
+            }
+
+            return child;
+        })}
+    </>;
+};
+
+ChromeLoader.propTypes = {
+    children: PropTypes.any
+};
+
+export default ChromeLoader;

src/components/InventoryGroupDetail/GroupDetailInfo.cy.js

@@ -1,40 +1,39 @@
 import { mount } from '@cypress/react';
 import React from 'react';
-import GroupDetailInfo from './GroupDetailInfo';
+import { GroupDetailInfo } from './GroupDetailInfo';
 
-const mountPage = () =>
+const mountPage = (params) =>
     mount(
-        <GroupDetailInfo />
+        <GroupDetailInfo {...params}/>
     );
 
-before(() => {
-    cy.window().then(
-        (window) =>
-            (window.insights = {
-                chrome: {
-                    isProd: false,
-                    auth: {
-                        getUser: () => {
-                            return Promise.resolve({});
-                        }
-                    }
-                }
-            })
-    );
-});
-
 describe('group detail information page', () => {
-    it('Title is rendered', () => {
-        mountPage();
+    beforeEach(() => {
+        mountPage({ chrome: { isBeta: () => false } });
+    });
+
+    it('title is rendered', () => {
         cy.get('div[class="pf-c-card__title pf-c-title pf-m-lg card-title"]').should('have.text', 'User access configuration');
     });
+
     it('button is present', () => {
-        mountPage();
-        cy.get('button[class="pf-c-button pf-m-secondary"]').should('have.text', 'Manage access');
+        cy.get('a[class="pf-c-button pf-m-secondary"]').should('have.text', 'Manage access');
     });
+
     it('card text is present', () => {
-        mountPage();
         cy.get('div[class="pf-c-card__body"]').should
         ('have.text', 'Manage your inventory group user access configuration under Identity & Access Management > User Access.');
     });
+
+    describe('links', () => {
+        it('in stable environment', () => {
+            mountPage({ chrome: { isBeta: () => false } });
+            cy.get('a').should('have.attr', 'href', '/iam/user-access');
+        });
+
+        it('in beta environment', () => {
+            mountPage({ chrome: { isBeta: () => true } });
+            cy.get('a').should('have.attr', 'href', '/beta/iam/user-access');
+        });
+    });
 });

src/components/InventoryGroupDetail/GroupDetailInfo.js

@@ -6,30 +6,41 @@ import {
     CardHeader,
     CardActions } from '@patternfly/react-core';
 import React from 'react';
+import PropTypes from 'prop-types';
+import ChromeLoader from '../../Utilities/ChromeLoader';
 
-const GroupDetailInfo = () => {
-    const address =  window.location.href.includes('beta') ? '/beta/iam/user-access' : '/iam/user-access';
+const GroupDetailInfo = ({ chrome }) => {
+    const path = `${chrome.isBeta() ? '/beta' : ''}/iam/user-access`;
 
     return (
         <Card>
             <CardHeader>
                 <CardActions>
-                    <Button variant="secondary" >
-                        <a
-                            href={`${window.location.origin}/iam/user-access`}
-                        >Manage access</a>
+                    <Button component="a" href={path} variant="secondary">
+                        Manage access
                     </Button>
                 </CardActions>
-                <CardTitle className="pf-c-title pf-m-lg card-title">User access configuration</CardTitle>
+                <CardTitle className="pf-c-title pf-m-lg card-title">
+                    User access configuration
+                </CardTitle>
             </CardHeader>
             <CardBody>
-                    Manage your inventory group user access configuration under
-                <a
-                    href={`${window.location.origin}${address}`}
-                > Identity & Access Management {'>'} User Access.</a>
+                Manage your inventory group user access configuration under
+                <a href={path}> Identity & Access Management {'>'} User Access.</a>
             </CardBody>
         </Card>
     );
 };
 
-export default GroupDetailInfo;
+GroupDetailInfo.propTypes = {
+    chrome: PropTypes.object
+};
+
+const GroupDetailInfoWithChrome = () => (
+    <ChromeLoader>
+        <GroupDetailInfo />
+    </ChromeLoader>
+);
+
+export { GroupDetailInfo };
+export default GroupDetailInfoWithChrome;