feat(ESSNTL-4196): group detail info + tests

src/components/InventoryGroupDetail/GroupDetailInfo.cy.js

@@ -0,0 +1,40 @@
+import { mount } from '@cypress/react';
+import React from 'react';
+import GroupDetailInfo from './GroupDetailInfo';
+
+const mountPage = () =>
+    mount(
+        <GroupDetailInfo />
+    );
+
+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();
+        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');
+    });
+    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.');
+    });
+});

src/components/InventoryGroupDetail/GroupDetailInfo.js

@@ -1,19 +1,34 @@
-import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
-import { InvalidObject } from '@redhat-cloud-services/frontend-components';
+import {
+    Button,
+    Card,
+    CardTitle,
+    CardBody,
+    CardHeader,
+    CardActions } from '@patternfly/react-core';
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 const GroupDetailInfo = () => {
-    const { uninitialized, loading } = useSelector((state) => state.groupDetail);
-
-    // TODO: implement according to mocks
+    const address =  window.location.href.includes('beta') ? '/beta/iam/user-access' : '/iam/user-access';
 
     return (
-        <EmptyState>
-            <EmptyStateBody>
-                {uninitialized || loading ? <Spinner /> : <InvalidObject />}
-            </EmptyStateBody>
-        </EmptyState>
+        <Card>
+            <CardHeader>
+                <CardActions>
+                    <Button variant="secondary" >
+                        <a
+                            href={`${window.location.origin}/iam/user-access`}
+                        >Manage access</a>
+                    </Button>
+                </CardActions>
+                <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>
+            </CardBody>
+        </Card>
     );
 };