From 49d20b71e3d1448f9523b55db41da015bc5be02e Mon Sep 17 00:00:00 2001
From: Quinn James <qjames@redhat.com>
Date: Thu, 16 Nov 2023 14:34:30 +0000
Subject: [PATCH] Fixes #36924 - Added breadcrumb bar to the header of
 subscription details pages

---
 .../Details/SubscriptionDetails.js            | 129 +++++++++---------
 1 file changed, 64 insertions(+), 65 deletions(-)

diff --git a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
index fd9ad41cdf2..760da23517e 100644
--- a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
+++ b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
@@ -58,75 +58,74 @@ class SubscriptionDetails extends Component {
     }
 
     return (
-      <div id="subscription-details">
-        {!subscriptionDetails.loading &&
-          <BreadcrumbsBar
+      <div style={{ margin: '24px' }}>
+        <div id="subscription-details">
+          {!subscriptionDetails.loading && <BreadcrumbsBar
+            isLoadingResources={subscriptionDetails.loading}
             onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
-            data={{
-              isSwitchable: true,
-              breadcrumbItems: [
-                {
-                  caption: __('Subscriptions'),
-                  onClick: () =>
-                    this.props.history.push('/subscriptions'),
-                },
-                {
-                  caption: String(subscriptionDetails.name || __('Subscription Details')),
-                },
-              ],
-              resource,
-            }}
+            isSwitchable
+            breadcrumbItems={[
+              {
+                caption: __('Subscriptions'),
+                url: '/subscriptions/',
+              },
+              {
+                caption: String(subscriptionDetails.name || __('Subscription Details')),
+              },
+            ]}
+            resource={resource}
           />}
 
-        <TabContainer id="subscription-tabs-container" defaultActiveKey={1}>
-          <div>
-            <LoadingState loading={subscriptionDetails.loading} loadingText={__('Loading')}>
-              <Nav bsClass="nav nav-tabs" ouiaId="subscription-details-nav">
-                <NavItem eventKey={1} ouiaId="details-nav-item">
-                  <div>{__('Details')}</div>
-                </NavItem>
-                <NavItem eventKey={2} ouiaId="product-content-nav-item">
-                  <div>{__('Product Content')}</div>
-                </NavItem>
-              </Nav>
-              <Grid bsClass="container-fluid">
-                <TabContent ouiaId="subscription-details-tab-content" animation={false}>
-                  <TabPane eventKey={1}>
-                    <div>
-                      <Row>
-                        <Col sm={6}>
-                          <SubscriptionDetailInfo
-                            subscriptionDetails={subscriptionDetails}
-                          />
-                        </Col>
-                        <Col sm={6}>
-                          <SubscriptionDetailAssociations
-                            subscriptionDetails={subscriptionDetails}
-                          />
-                          <SubscriptionDetailProducts
-                            subscriptionDetails={subscriptionDetails}
-                          />
-                        </Col>
-                      </Row>
-                    </div>
-                  </TabPane>
+          <TabContainer id="subscription-tabs-container" defaultActiveKey={1}>
+            <div>
+              <LoadingState loading={subscriptionDetails.loading} loadingText={__('Loading')}>
+                <Nav bsClass="nav nav-tabs" ouiaId="subscription-details-nav">
+                  <NavItem eventKey={1} ouiaId="details-nav-item">
+                    <div>{__('Details')}</div>
+                  </NavItem>
+                  <NavItem eventKey={2} ouiaId="product-content-nav-item">
+                    <div>{__('Product Content')}</div>
+                  </NavItem>
+                </Nav>
+                <Grid bsClass="container-fluid">
+                  <TabContent ouiaId="subscription-details-tab-content" animation={false}>
+                    <TabPane eventKey={1}>
+                      <div>
+                        <Row>
+                          <Col sm={6}>
+                            <SubscriptionDetailInfo
+                              subscriptionDetails={subscriptionDetails}
+                            />
+                          </Col>
+                          <Col sm={6}>
+                            <SubscriptionDetailAssociations
+                              subscriptionDetails={subscriptionDetails}
+                            />
+                            <SubscriptionDetailProducts
+                              subscriptionDetails={subscriptionDetails}
+                            />
+                          </Col>
+                        </Row>
+                      </div>
+                    </TabPane>
 
-                  <TabPane eventKey={2}>
-                    <div>
-                      <Row>
-                        <Col sm={12}>
-                          <SubscriptionDetailProductContent
-                            productContent={subscriptionDetails.productContent}
-                          />
-                        </Col>
-                      </Row>
-                    </div>
-                  </TabPane>
-                </TabContent>
-              </Grid>
-            </LoadingState>
-          </div>
-        </TabContainer>
+                    <TabPane eventKey={2}>
+                      <div>
+                        <Row>
+                          <Col sm={12}>
+                            <SubscriptionDetailProductContent
+                              productContent={subscriptionDetails.productContent}
+                            />
+                          </Col>
+                        </Row>
+                      </div>
+                    </TabPane>
+                  </TabContent>
+                </Grid>
+              </LoadingState>
+            </div>
+          </TabContainer>
+        </div>
       </div>
     );
   }