chore: update inventory detail docs, handle system not found more nic…

…ely (#1774) * chore: update inventory detail docs, handle system not found more nicely * fix the doc url
RedHatInsights · Mar 6, 2023 · 1718f97 · 1718f97
1 parent d48131d
commit 1718f97
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 16 deletions.
diff --git a/doc/inventory_detail.md b/doc/inventory_detail.md
@@ -0,0 +1,198 @@
+# Inventory detail 
+As of v1.3.1 you can render the inventory header and main section separately, rather than using obsolete AppInfo and InventoryDetailHead components to render the tab menu and main section separately (doc/inventory_detail.md). 
+
+# Detail wrapper
+This component serves as a wrapper for Inventory detail page components. It wrapps components with a drawer. 
+
+IMPORTANT: inventoryId is a required prop that will be used to fetch inventory detail data from the inventory API. This data can be used to populate the header and main section later by accessing it from the redux
+
+# InventoryDetail
+
+This is the main component that renders both header and main section. It adds deleteEntity action and an error handling. 
+
+Note: you can pass a custom appList prop as an array of tabs to render in the main section. To do this you need to pass showMainSection as true together with the appList prop.
+
+```JSX 
+
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useStore, useDispatch } from 'react-redux';
+import { useLocation, useParams, Link, useHistory } from 'react-router-dom';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import './inventory.scss';
+import * as actions from '../store/actions';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components';
+import { routes } from '../Routes';
+import InventoryDetail from '../components/InventoryDetail/InventoryDetail';
+import { AdvisorTab, GeneralInformationTab } from '../components/SystemDetails';
+
+const appList = [
+    { title: 'General information', name: 'general_information', component: eneralInformationTab },
+    { title: 'Advisor', name: 'advisor', component: AdvisorTab }
+];
+
+const BreadcrumbWrapper = () => (
+    <Breadcrumb ouiaId="systems-list">
+        <BreadcrumbItem>
+            <Link to={routes.table}>Inventory</Link>
+        </BreadcrumbItem>
+    </Breadcrumb>
+);
+
+const Inventory = () => {
+    const { inventoryId } = useParams();
+    const { search } = useLocation();
+    const searchParams = new URLSearchParams(search);
+    const [activeApp] = useState(searchParams.get('appName') || appList[0].name);
+    const store = useStore();
+    const history = useHistory();
+
+    const onTabSelect = useCallback((_, activeApp, appName) => {
+        searchParams.set('appName', appName);
+        const search = searchParams.toString();
+        history.push({
+            search
+        });
+    }, [searchParams]);
+
+    return (
+        <InventoryDetail
+            additionalClasses={additionalClasses}
+            hideInvDrawer
+            showDelete={writePermissions}
+            hideInvLink
+            hideBack
+            inventoryId={inventoryId}
+            showTags
+            showMainSection
+            fallback=""
+            store={store}
+            history={history}
+            isInventoryApp
+            shouldWrapAsPage
+            BreadcrumbWrapper={
+                <BreadcrumbWrapper/>
+            }
+            activeApp={activeApp}
+            appList={appList}
+            onTabSelect={onTabSelect}
+        />
+    );
+};
+
+
+```
+
+If you want to hide the main section, just pass showMainSection as false
+
+# Avaiable headers  
+
+## 1. DetailHeader
+You can import DetailHeader component if you have all the required data available in your application API. This component serves as a presentational component without any logic.
+
+
+## 2. InventoryDetailHeader
+If you do not have the data to populate the header in your application API, you can import the InventoryDetailHeader component that will request Inventory application API and populates the header with required information. 
+IMPORTANT: 
+1. As the data needs to be fetched on InventoryDetailHeader component, make sure to pass inventoryId to either DetailWrapper or InventoryDetailHeader itself
+2. shouldApplicationDetail = true prop needs to be passed so that main section is hidden.
+
+### Example
+
+```JSX 
+import React, { useEffect } from 'react';
+import { Main } from '@redhat-cloud-services/frontend-components/Main';
+import { DetailHeader, DetailWrapper } from '@redhat-cloud-services/frontend-components/Inventory';
+
+
+const BreadcrumbWrapper = () => (
+    <Breadcrumb ouiaId="systems-list">
+        <BreadcrumbItem>
+            <Link to={inventory-link}>Inventory</Link>
+        </BreadcrumbItem>
+    </Breadcrumb>
+);
+
+const InventoryDetail = () => {
+    const {  inventoryId } = useParams();
+     return (
+        <DetailWrapper
+            // You can extend the entityDetail reducer with your own reducer
+            onLoad={({ mergeWithDetail }) => {
+                store.replaceReducer(combineReducers({
+                    ...defaultReducers,
+                    ...mergeWithDetail(SystemDetailStore)
+                }));
+            }}
+            inventoryId={inventoryId}
+        >
+            <DetailHeader
+                hideBack
+                showTags
+                inventoryId={inventoryId}
+                actions={[]}
+                shouldWrapAsPage
+                {..apiDataAsProps}
+            >
+                {<YourCustomComponentsInsideHeader />}
+            </DetailHeader>
+            <Main>
+                <YouCustomMainSection inventoryId={inventoryId}/>
+            </Main>
+        </DetailWrapper>);
+};
+
+
+```
+
+### Wrawping with PageHeader and displaying breadcrumb
+If you would like to wrap the header with PageHeader component and breadcrumb, you would need to pass shouldWrapAsPage prop together with your BreadcrumbWrapper
+
+
+### Example
+```JSX 
+import React, { useEffect } from 'react';
+import { Main } from '@redhat-cloud-services/frontend-components/Main';
+import { DetailHeader, DetailWrapper } from '@redhat-cloud-services/frontend-components/Inventory';
+
+
+const BreadcrumbWrapper = () => (
+    <Breadcrumb ouiaId="systems-list">
+        <BreadcrumbItem>
+            <Link to={inventory-link}>Inventory</Link>
+        </BreadcrumbItem>
+    </Breadcrumb>
+);
+
+const InventoryDetail = () => {
+    const {  inventoryId } = useParams();
+     return (
+        <DetailWrapper
+            // You can extend the entityDetail reducer with your own reducer
+            onLoad={({ mergeWithDetail }) => {
+                store.replaceReducer(combineReducers({
+                    ...defaultReducers,
+                    ...mergeWithDetail(SystemDetailStore)
+                }));
+            }}
+            inventoryId={inventoryId}
+        >
+            <DetailHeader
+                hideBack
+                showTags
+                inventoryId={inventoryId}
+                actions={[]}
+                shouldWrapAsPage
+                {..apiDataAsProps}
+            >
+                {<YourCustomComponentsInsideHeader />}
+            </DetailHeader>
+            <Main>
+                <SystemDetail inventoryId={inventoryId}/>
+            </Main>
+        </DetailWrapper>);
+};
+
+
+```
diff --git a/doc/inventory_header.md b/doc/inventory_header.md
@@ -1,3 +1,7 @@
+::: warning Removed
+This feature has been removed. Inventory detail header and main section are independent as of v1.3.1. Please have a look (doc/inventory_detail.md)
+:::
+
 # Inventory detail
 If you want to learn how to comunicate with inventory check out [Inventory](inventory.md), this documentation is for showing how to include inventory information at top and app info in bottom screen of inventory detail.
 

diff --git a/src/components/InventoryDetail/InventoryDetail.js b/src/components/InventoryDetail/InventoryDetail.js
@@ -24,6 +24,7 @@ const InventoryDetail = ({
     additionalClasses,
     activeApp,
     appList,
+    showMainSection,
     ...headerProps
 }) => {
     const dispatch = useDispatch();
@@ -49,23 +50,28 @@ const InventoryDetail = ({
                 onBackToListClick={onBackToListClick}
                 inventoryId={inventoryId}
             />
-        ) : <DetailHeader
-            entity={entity}
-            loaded={ loaded }
-            onBackToListClick={ onBackToListClick }
-            deleteEntity={deleteEntity}
-            addNotification={addNotification}
-            {...headerProps}
-        />
+        ) : (
+            <>
+                <DetailHeader
+                    entity={entity}
+                    loaded={loaded}
+                    onBackToListClick={onBackToListClick}
+                    deleteEntity={deleteEntity}
+                    addNotification={addNotification}
+                    showTags={showTags}
+                    {...headerProps}
+                />
+                {showMainSection && (
+                    <ApplicationDetails
+                        onTabSelect={onTabSelect}
+                        activeApp={activeApp}
+                        appList={appList}
+                        inventoryId={inventoryId}
+                    />
+                )}
+            </>)
         }
-        {appList.length > 1 && (
-            <ApplicationDetails
-                onTabSelect={onTabSelect}
-                activeApp={activeApp}
-                appList={appList}
-                inventoryId={inventoryId}
-            />
-        )}
+
     </div>;
 };
 

diff --git a/src/routes/InventoryDetail.js b/src/routes/InventoryDetail.js
@@ -112,6 +112,7 @@ const Inventory = () => {
             hideBack
             inventoryId={inventoryId}
             showTags
+            showMainSection
             fallback=""
             store={store}
             history={history}