From 114229de548f8ed60ebe5fc5329c2b5450901631 Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Mon, 22 Aug 2022 12:19:08 -0400
Subject: [PATCH 01/17] horizontal tabs

---
 .../horizontal-nav/HorizontalNav.stories.tsx  | 60 +++++++++++++++++++
 .../horizontal-nav/HorizontalNav.test.tsx     | 32 ++++++++++
 .../horizontal-nav/HorizontalNav.tsx          | 52 ++++++++++++++++
 .../src/components/horizontal-nav/index.ts    |  1 +
 4 files changed, 145 insertions(+)
 create mode 100644 packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
 create mode 100644 packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
 create mode 100644 packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
 create mode 100644 packages/lib-utils/src/components/horizontal-nav/index.ts

diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
new file mode 100644
index 00000000..e9a55a54
--- /dev/null
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import type { Tab } from './HorizontalNav';
+import HorizontalNav from './HorizontalNav';
+
+const meta: ComponentMeta<typeof HorizontalNav> = {
+  title: 'HorizontalNav',
+  component: HorizontalNav,
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: ComponentStory<typeof HorizontalNav> = (args) => {
+  return <HorizontalNav {...args} />;
+};
+
+export const Primary = Template.bind({});
+
+// Sample content components for tabs
+const BaseContent: React.FC<{ content: string }> = ({ content }) => {
+  return (
+    <Card style={{ minHeight: '20em' }}>
+      <CardTitle>{content}</CardTitle>
+      <CardBody>Sample content</CardBody>
+    </Card>
+  );
+};
+
+const UsersTabContent: React.FC = () => {
+  return <BaseContent content="Users Tab Content" />;
+};
+
+const ContainersTabContent: React.FC = () => {
+  return <BaseContent content="Containers Tab Content" />;
+};
+
+const DatabaseTabContent: React.FC = () => {
+  return <BaseContent content="Database Tab Content" />;
+};
+
+// Define tabs
+const tabs: Tab[] = [
+  { key: 'Users', title: 'Users', content: <UsersTabContent />, ariaLabel: 'Users' },
+  {
+    key: 'Containers',
+    title: 'Containers',
+    content: <ContainersTabContent />,
+    ariaLabel: 'Containers',
+  },
+  { key: 'Database', title: 'Database', content: <DatabaseTabContent />, ariaLabel: 'Database' },
+];
+const ariaLabel = 'Sample tabs';
+
+Primary.args = {
+  ariaLabel,
+  tabs,
+};
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
new file mode 100644
index 00000000..a6e80935
--- /dev/null
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import type { Tab } from './HorizontalNav';
+import HorizontalNav from './HorizontalNav';
+
+// Sample content components for tabs
+const UsersTabContent: React.FC = () => <div>Users Tab Content</div>;
+const DatabaseTabContent: React.FC = () => <div>Database Tab Content</div>;
+
+const mockTabs: Tab[] = [
+  { key: 'Users', title: 'Users', content: <UsersTabContent />, ariaLabel: 'Users' },
+  { key: 'Database', title: 'Database', content: <DatabaseTabContent />, ariaLabel: 'Database' },
+];
+
+describe('HorizontalNav', () => {
+  test('loads and displays tabs with default selection', () => {
+    render(<HorizontalNav tabs={mockTabs} />);
+
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
+    expect(screen.getByText('Users Tab Content')).toBeVisible();
+  });
+
+  test('switches tab on click', () => {
+    render(<HorizontalNav tabs={mockTabs} />);
+
+    fireEvent.click(screen.getByText('Database'));
+
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Database');
+    expect(screen.getByText('Database Tab Content')).toBeVisible();
+  });
+});
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
new file mode 100644
index 00000000..9c60dec6
--- /dev/null
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
@@ -0,0 +1,52 @@
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import React from 'react';
+
+export type Tab = {
+  /** Key for individual tab */
+  key: string | number;
+  /** Title for individual tab */
+  title: string;
+  /** Content for individual tab (provided as a React component) */
+  content: React.ReactElement;
+  /** aria-label for individual tab */
+  ariaLabel: string;
+};
+
+export type HorizontalNavProps = {
+  /** aria-label for all tabs */
+  ariaLabel?: string;
+  /** Properties for tabs */
+  tabs: Tab[];
+};
+
+const HorizontalNav: React.FC<HorizontalNavProps> = ({ ariaLabel, tabs }) => {
+  const activeTab = tabs && tabs[0] ? tabs[0].key : 0;
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(activeTab);
+
+  return (
+    <Tabs
+      mountOnEnter
+      activeKey={activeTabKey}
+      onSelect={(e, tabIndex) => {
+        setActiveTabKey(tabIndex);
+      }}
+      aria-label={ariaLabel}
+      role="region"
+    >
+      {tabs.map((tab: Tab) => {
+        return (
+          <Tab
+            key={tab.key}
+            eventKey={tab.key}
+            title={<TabTitleText>{tab.title}</TabTitleText>}
+            aria-label={tab.ariaLabel}
+          >
+            {tab.content}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default HorizontalNav;
diff --git a/packages/lib-utils/src/components/horizontal-nav/index.ts b/packages/lib-utils/src/components/horizontal-nav/index.ts
new file mode 100644
index 00000000..87b71a87
--- /dev/null
+++ b/packages/lib-utils/src/components/horizontal-nav/index.ts
@@ -0,0 +1 @@
+export { default as HorizontalNav, Tab, HorizontalNavProps } from './HorizontalNav';

From 70011049e27de072f527d84255978edd84c4eb75 Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Wed, 24 Aug 2022 10:39:23 -0400
Subject: [PATCH 02/17] Horizontal navigation with routing

---
 .../horizontal-nav/HorizontalNav.stories.tsx  | 14 ++++-
 .../horizontal-nav/HorizontalNav.test.tsx     | 60 +++++++++++++++----
 .../horizontal-nav/HorizontalNav.tsx          | 57 +++++++++++++++---
 .../src/components/horizontal-nav/index.ts    |  2 +-
 4 files changed, 111 insertions(+), 22 deletions(-)

diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
index e9a55a54..0bf7adf3 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
@@ -2,22 +2,30 @@
 import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
+import { withRouter } from 'storybook-addon-react-router-v6';
 import type { Tab } from './HorizontalNav';
-import HorizontalNav from './HorizontalNav';
+import { HorizontalNav } from './HorizontalNav';
 
 const meta: ComponentMeta<typeof HorizontalNav> = {
   title: 'HorizontalNav',
   component: HorizontalNav,
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: {
+      routePath: '/testNav/:selectedTab',
+      routeParams: { selectedTab: 'Containers' },
+    },
+  },
   argTypes: {},
 };
 
 export default meta;
 
-const Template: ComponentStory<typeof HorizontalNav> = (args) => {
+const TemplateWithRouter: ComponentStory<typeof HorizontalNav> = (args) => {
   return <HorizontalNav {...args} />;
 };
 
-export const Primary = Template.bind({});
+export const Primary = TemplateWithRouter.bind({});
 
 // Sample content components for tabs
 const BaseContent: React.FC<{ content: string }> = ({ content }) => {
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
index a6e80935..054bc4ec 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
@@ -1,8 +1,9 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
+import { BrowserRouter } from 'react-router-dom';
 import type { Tab } from './HorizontalNav';
-import HorizontalNav from './HorizontalNav';
+import { HorizontalNav, HorizontalNavTabs } from './HorizontalNav';
 
 // Sample content components for tabs
 const UsersTabContent: React.FC = () => <div>Users Tab Content</div>;
@@ -13,20 +14,59 @@ const mockTabs: Tab[] = [
   { key: 'Database', title: 'Database', content: <DatabaseTabContent />, ariaLabel: 'Database' },
 ];
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    selectedTab: 'Database',
+  }),
+  useLocation: () => ({
+    pathname: 'testNav/Database',
+  }),
+}));
+
 describe('HorizontalNav', () => {
-  test('loads and displays tabs with default selection', () => {
-    render(<HorizontalNav tabs={mockTabs} />);
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  describe('Horizontal tabs with routing', () => {
+    test('loads and displays tabs with initial selection based on route param', () => {
+      render(
+        <BrowserRouter>
+          <HorizontalNav tabs={mockTabs} />
+        </BrowserRouter>,
+      );
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Database');
+      expect(screen.getByText('Database Tab Content')).toBeVisible();
+    });
 
-    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
-    expect(screen.getByText('Users Tab Content')).toBeVisible();
+    test('switches tab on click', () => {
+      render(
+        <BrowserRouter>
+          <HorizontalNav tabs={mockTabs} />
+        </BrowserRouter>,
+      );
+
+      fireEvent.click(screen.getByText('Users'));
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
+    });
   });
+  describe('Standalone horizontal tabs without routing', () => {
+    test('loads and displays tabs with default selection', () => {
+      render(<HorizontalNavTabs tabs={mockTabs} />);
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
+      expect(screen.getByText('Users Tab Content')).toBeVisible();
+    });
 
-  test('switches tab on click', () => {
-    render(<HorizontalNav tabs={mockTabs} />);
+    test('switches tab on click', () => {
+      render(<HorizontalNavTabs tabs={mockTabs} />);
 
-    fireEvent.click(screen.getByText('Database'));
+      fireEvent.click(screen.getByText('Database'));
 
-    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Database');
-    expect(screen.getByText('Database Tab Content')).toBeVisible();
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Database');
+      expect(screen.getByText('Database Tab Content')).toBeVisible();
+    });
   });
 });
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
index 9c60dec6..777b8fa1 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
@@ -1,7 +1,8 @@
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 import React from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 
-export type Tab = {
+type Tab = {
   /** Key for individual tab */
   key: string | number;
   /** Title for individual tab */
@@ -12,23 +13,50 @@ export type Tab = {
   ariaLabel: string;
 };
 
-export type HorizontalNavProps = {
+type WithRouterProps = {
+  /** URL parameters */
+  params?: Record<string, string>;
+  /** Navigate function */
+  navigate?: ReturnType<typeof useNavigate>;
+  /** Current location */
+  location?: ReturnType<typeof useLocation>;
+};
+
+type HorizontalNavProps = {
   /** aria-label for all tabs */
   ariaLabel?: string;
   /** Properties for tabs */
   tabs: Tab[];
-};
+} & WithRouterProps;
+
+const HorizontalNavTabs: React.FC<HorizontalNavProps> = ({
+  ariaLabel,
+  tabs,
+  params,
+  navigate,
+  location,
+}) => {
+  const defaultActiveTab = tabs && tabs[0] ? tabs[0].key : 0; // Set first tab as the default active tab
+
+  const activeTabFromUrlParam = params?.selectedTab;
+  const isValidTabFromUrl =
+    activeTabFromUrlParam && tabs?.some((tab) => tab.key === activeTabFromUrlParam);
+  const activeTab = isValidTabFromUrl ? activeTabFromUrlParam : defaultActiveTab;
 
-const HorizontalNav: React.FC<HorizontalNavProps> = ({ ariaLabel, tabs }) => {
-  const activeTab = tabs && tabs[0] ? tabs[0].key : 0;
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(activeTab);
 
   return (
     <Tabs
       mountOnEnter
       activeKey={activeTabKey}
-      onSelect={(e, tabIndex) => {
-        setActiveTabKey(tabIndex);
+      onSelect={(e, eventKey) => {
+        setActiveTabKey(eventKey);
+        if (params?.selectedTab && location?.pathname && navigate) {
+          const currentPathName = location.pathname;
+          navigate(currentPathName.replace(params.selectedTab, eventKey as string), {
+            replace: true,
+          });
+        }
       }}
       aria-label={ariaLabel}
       role="region"
@@ -49,4 +77,17 @@ const HorizontalNav: React.FC<HorizontalNavProps> = ({ ariaLabel, tabs }) => {
   );
 };
 
-export default HorizontalNav;
+const withRouter = <T extends WithRouterProps>(Component: React.ComponentType<T>) => {
+  return (props: Omit<T, keyof WithRouterProps>) => {
+    const params = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Component {...(props as T)} params={params} navigate={navigate} location={location} />;
+  };
+};
+
+const HorizontalNav = withRouter(HorizontalNavTabs as React.ComponentType<HorizontalNavProps>);
+
+export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps };
diff --git a/packages/lib-utils/src/components/horizontal-nav/index.ts b/packages/lib-utils/src/components/horizontal-nav/index.ts
index 87b71a87..757c033f 100644
--- a/packages/lib-utils/src/components/horizontal-nav/index.ts
+++ b/packages/lib-utils/src/components/horizontal-nav/index.ts
@@ -1 +1 @@
-export { default as HorizontalNav, Tab, HorizontalNavProps } from './HorizontalNav';
+export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps } from './HorizontalNav';

From f1876f95c00e85acca79a162868abbc9a689d8c4 Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Tue, 13 Sep 2022 08:49:40 -0400
Subject: [PATCH 03/17] Page header

action menu

working actions menu

page header

update

tests

updated index.ts
---
 .../DetailsPageHeader.stories.tsx             | 109 ++++++++++++
 .../DetailsPageHeader.test.tsx                |  89 ++++++++++
 .../details-page-header/DetailsPageHeader.tsx | 108 +++++++++++
 .../components/details-page-header/index.ts   |   1 +
 .../utils/ActionButtons.stories.tsx           |  38 ++++
 .../utils/ActionButtons.test.tsx              |  35 ++++
 .../utils/ActionButtons.tsx                   |  49 +++++
 .../utils/ActionMenu.stories.tsx              | 110 ++++++++++++
 .../utils/ActionMenu.test.tsx                 | 108 +++++++++++
 .../details-page-header/utils/ActionMenu.tsx  | 168 ++++++++++++++++++
 .../utils/Breadcrumbs.stories.tsx             |  47 +++++
 .../utils/Breadcrumbs.test.tsx                |  39 ++++
 .../details-page-header/utils/Breadcrumbs.tsx |  51 ++++++
 .../details-page-header/utils/index.ts        |   9 +
 14 files changed, 961 insertions(+)
 create mode 100644 packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/index.ts
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/index.ts

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
new file mode 100644
index 00000000..41ed323d
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
@@ -0,0 +1,109 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { CheckCircleIcon } from '@patternfly/react-icons';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
+import type { K8sResourceCommon } from '../../types/k8s';
+import { DetailsPageHeader } from './DetailsPageHeader';
+
+const meta: ComponentMeta<typeof DetailsPageHeader> = {
+  title: 'DetailsPageHeader',
+  component: DetailsPageHeader,
+  argTypes: {},
+};
+
+export default meta;
+
+const DetailsPageHeaderTemplate: ComponentStory<typeof DetailsPageHeader> = (args) => {
+  return (
+    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+      <Routes>
+        <Route element={<DetailsPageHeader {...args} />} path="/workspaces/demo-workspace" />
+        <Route
+          element={
+            <div>
+              <p>Workspaces List Page</p>
+              <button type="button">
+                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
+              </button>
+            </div>
+          }
+          path="/workspaces"
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+export const Primary = DetailsPageHeaderTemplate.bind({});
+
+const mockWorkspace: K8sResourceCommon = {
+  apiVersion: 'v1beta1',
+  apiGroup: 'tenancy.kcp.dev',
+  kind: 'Workspace',
+  metadata: {
+    name: 'demo-workspace',
+    labels: {
+      label1: 'value1',
+      label2: 'value2',
+    },
+  },
+};
+
+Primary.args = {
+  breadcrumbs: [
+    { name: 'Workspaces', path: '/workspaces' },
+    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+  ],
+  obj: mockWorkspace,
+  pageHeadingLabel: {
+    name: 'Ready',
+    icon: <CheckCircleIcon color="#3E8635" />,
+  },
+  actionButtons: [
+    {
+      label: 'Test',
+      callback: (event: React.MouseEvent) => {
+        // eslint-disable-next-line no-console
+        console.log('Test Action', event);
+      },
+    },
+  ],
+  actionMenu: {
+    actions: [
+      {
+        id: '1',
+        label: 'Edit Action',
+        cta: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+            // eslint-disable-next-line no-console
+            console.log('Edit Action', event);
+          },
+        },
+        tooltip: 'Sample tooltip',
+      },
+      {
+        id: '2',
+        label: 'Delete Action',
+        cta: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+            // eslint-disable-next-line no-console
+            console.log('Delete Action', event);
+          },
+        },
+        isDisabled: true,
+      },
+      {
+        id: 'Link1',
+        label: 'External Link',
+        cta: {
+          href: 'https://github.com/',
+          external: true,
+        },
+      },
+    ],
+    isDisabled: false,
+  },
+};
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
new file mode 100644
index 00000000..92620fe5
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import '@testing-library/jest-dom';
+import type { DetailsPageHeaderProps } from './DetailsPageHeader';
+import { DetailsPageHeader } from './DetailsPageHeader';
+
+const mockCallback = jest.fn();
+
+const mockProps: DetailsPageHeaderProps = {
+  breadcrumbs: [
+    { name: 'Workspaces', path: '/workspaces' },
+    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+  ],
+  pageHeading: 'demo-workspace',
+  actionButtons: [
+    {
+      label: 'Test Button',
+      callback: mockCallback,
+    },
+  ],
+  actionMenu: {
+    actions: [
+      {
+        id: '2',
+        label: 'Delete Action',
+        cta: {
+          callback: jest.fn(),
+        },
+        isDisabled: true,
+      },
+      {
+        id: 'Link1',
+        label: 'Link1',
+        cta: {
+          href: '#',
+        },
+      },
+    ],
+    isDisabled: false,
+  },
+};
+
+const detailsPageHeaderJSX = (args: DetailsPageHeaderProps) => (
+  <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+    <Routes>
+      <Route element={<DetailsPageHeader {...args} />} path="/workspaces/demo-workspace" />
+      <Route element={<div>Workspaces List Page</div>} path="/workspaces" />
+    </Routes>
+  </MemoryRouter>
+);
+
+describe('DetailsPageHeader', () => {
+  test('DetailsPageHeader is rendered with breadcrumbs, heading, action buttons and action menu', () => {
+    render(detailsPageHeaderJSX(mockProps));
+
+    // Breadcrumbs
+    expect(screen.getByText('Workspaces')).toBeVisible();
+    expect(screen.getByText('Workspace details')).toBeVisible();
+    // Page heading
+    expect(screen.getByText('demo-workspace')).toBeVisible();
+    // Action buttons
+    expect(screen.getByText('Test Button')).toBeVisible();
+    // Action menu
+    expect(screen.getByText('Actions')).toBeVisible();
+  });
+  test('Clicking on breadcrumb triggers specified path', () => {
+    render(detailsPageHeaderJSX(mockProps));
+
+    // Click Workspaces link
+    fireEvent.click(screen.getByTestId('breadcrumb-link-0'));
+    expect(screen.getByText('Workspaces List Page')).toBeVisible();
+  });
+  test('Clicking on actions menu reveals menu options', () => {
+    render(detailsPageHeaderJSX(mockProps));
+
+    fireEvent.click(screen.getByText('Actions'));
+    expect(screen.getByText('Link1')).toBeVisible();
+    expect(screen.getByText('Delete Action')).toBeVisible();
+    expect(screen.getByText('Delete Action').closest('a')).toHaveAttribute('aria-disabled');
+  });
+  test('Action button triggers callback', () => {
+    render(detailsPageHeaderJSX(mockProps));
+
+    fireEvent.click(screen.getByText('Test Button'));
+    expect(mockCallback).toHaveBeenCalled();
+  });
+});
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
new file mode 100644
index 00000000..25fcbdbe
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
@@ -0,0 +1,108 @@
+import {
+  Split,
+  SplitItem,
+  TextContent,
+  Text,
+  TextVariants,
+  Label,
+  DropdownPosition,
+} from '@patternfly/react-core';
+import * as _ from 'lodash';
+import React from 'react';
+import type { K8sResourceCommon } from '../../types/k8s';
+import type { BreadcrumbProp, ActionButtonProp, ActionMenuProps } from './utils';
+import { Breadcrumbs, ActionButtons, ActionMenu } from './utils';
+import '@patternfly/react-styles/css/utilities/Spacing/spacing.css';
+
+export type DetailsPageHeaderProps = {
+  breadcrumbs: BreadcrumbProp[];
+  actionButtons?: ActionButtonProp[];
+  pageHeading?: string;
+  obj?: K8sResourceCommon;
+  pageHeadingLabel?: {
+    name: string;
+    key?: string;
+    icon?: React.ReactNode;
+    href?: string;
+    color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  };
+  actionMenu?: ActionMenuProps;
+};
+
+export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
+  breadcrumbs,
+  actionButtons,
+  actionMenu,
+  pageHeading,
+  obj,
+  pageHeadingLabel,
+}) => {
+  const heading = pageHeading ?? obj?.metadata?.name;
+  return (
+    <>
+      <Split hasGutter className="pf-u-mb-sm">
+        {/* Breadcrumbs */}
+        <SplitItem>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </SplitItem>
+        <SplitItem isFilled />
+      </Split>
+      <Split hasGutter className="pf-u-mb-sm pf-u-mr-sm">
+        {/* Details page heading */}
+        {heading && (
+          <SplitItem>
+            <TextContent>
+              <Text component={TextVariants.h1}>{heading}</Text>
+            </TextContent>
+          </SplitItem>
+        )}
+        {/* Optional details page heading label */}
+        {!_.isEmpty(pageHeadingLabel) && (
+          <SplitItem>
+            <Label
+              href={pageHeadingLabel?.href}
+              icon={pageHeadingLabel?.icon}
+              color={pageHeadingLabel?.color}
+              key={pageHeadingLabel?.key ?? pageHeadingLabel?.name}
+            >
+              {pageHeadingLabel?.name}
+            </Label>
+          </SplitItem>
+        )}
+        <SplitItem isFilled />
+        {/* Optional action buttons */}
+        {!_.isEmpty(actionButtons) && Array.isArray(actionButtons) && (
+          <SplitItem>
+            <ActionButtons actionButtons={actionButtons} />
+          </SplitItem>
+        )}
+        {/* Optional action menu - ungrouped actions */}
+        {actionMenu && Array.isArray(actionMenu?.actions) && (
+          <SplitItem>
+            <ActionMenu
+              actions={actionMenu?.actions}
+              isDisabled={actionMenu?.isDisabled}
+              variant={actionMenu?.variant}
+              label={actionMenu?.label}
+              position={DropdownPosition.right}
+            />
+          </SplitItem>
+        )}
+        {/* Optional action menu - Grouped actions */}
+        {actionMenu && Array.isArray(actionMenu?.groupedActions) && (
+          <SplitItem>
+            <ActionMenu
+              groupedActions={actionMenu?.groupedActions}
+              isDisabled={actionMenu?.isDisabled}
+              variant={actionMenu?.variant}
+              label={actionMenu?.label}
+              position={DropdownPosition.right}
+            />
+          </SplitItem>
+        )}
+      </Split>
+    </>
+  );
+};
+
+export default DetailsPageHeader;
diff --git a/packages/lib-utils/src/components/details-page-header/index.ts b/packages/lib-utils/src/components/details-page-header/index.ts
new file mode 100644
index 00000000..c318aa51
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/index.ts
@@ -0,0 +1 @@
+export { DetailsPageHeader, DetailsPageHeaderProps } from './DetailsPageHeader';
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
new file mode 100644
index 00000000..3e1ad6c1
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { ActionButtons } from './ActionButtons';
+
+const meta: ComponentMeta<typeof ActionButtons> = {
+  title: 'ActionButtons',
+  component: ActionButtons,
+  argTypes: {},
+};
+
+export default meta;
+
+const ActionButtonsTemplate: ComponentStory<typeof ActionButtons> = (args) => {
+  return <ActionButtons {...args} />;
+};
+
+export const Actions = ActionButtonsTemplate.bind({});
+
+Actions.args = {
+  actionButtons: [
+    {
+      label: 'Edit Workspace',
+      callback: (event: React.MouseEvent) => {
+        // eslint-disable-next-line no-console
+        console.log('Edit Workspace', event);
+      },
+    },
+    {
+      label: 'Delete Workspace',
+      callback: (event: React.MouseEvent) => {
+        // eslint-disable-next-line no-console
+        console.log('Delete Workspace', event);
+      },
+      isDisabled: true,
+    },
+  ],
+};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
new file mode 100644
index 00000000..44f4c01f
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { ActionButtons } from './ActionButtons';
+
+const mockCallback = jest.fn();
+
+const mockActionButtons = [
+  {
+    label: 'Edit Workspace',
+    callback: mockCallback,
+  },
+  {
+    label: 'Delete Workspace',
+    callback: jest.fn(),
+    isDisabled: true,
+    tooltip: 'Deletion is currently unavailable',
+  },
+];
+
+describe('ActionButtons', () => {
+  test('Buttons are rendered', () => {
+    render(<ActionButtons actionButtons={mockActionButtons} />);
+
+    expect(screen.getByText('Edit Workspace')).toBeVisible();
+    expect(screen.getByText('Delete Workspace')).toBeVisible();
+    expect(screen.getByText('Delete Workspace').closest('button')).toHaveAttribute('aria-disabled');
+  });
+  test('Button clicks trigger callback', () => {
+    render(<ActionButtons actionButtons={mockActionButtons} />);
+
+    fireEvent.click(screen.getByText('Edit Workspace'));
+    expect(mockCallback).toHaveBeenCalled();
+  });
+});
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
new file mode 100644
index 00000000..7dbb86f3
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
@@ -0,0 +1,49 @@
+import { Button, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
+import * as _ from 'lodash-es';
+import React from 'react';
+
+export type ActionButtonProp = {
+  label: string;
+  callback: (event: React.MouseEvent) => void;
+  isDisabled?: boolean;
+  tooltip?: string;
+};
+
+export type ActionButtonsProps = {
+  actionButtons: ActionButtonProp[];
+};
+
+export const ActionButtons: React.SFC<ActionButtonsProps> = ({ actionButtons }) => (
+  <Flex>
+    {_.map(actionButtons, (actionButton, i) => {
+      if (!_.isEmpty(actionButton)) {
+        return (
+          <FlexItem key={i}>
+            {actionButton.tooltip ? (
+              <Tooltip content={actionButton.tooltip}>
+                <Button
+                  variant="primary"
+                  onClick={actionButton.callback}
+                  isAriaDisabled={actionButton.isDisabled}
+                >
+                  {actionButton.label}
+                </Button>
+              </Tooltip>
+            ) : (
+              <Button
+                variant="primary"
+                onClick={actionButton.callback}
+                isAriaDisabled={actionButton.isDisabled}
+              >
+                {actionButton.label}
+              </Button>
+            )}
+          </FlexItem>
+        );
+      }
+      return null;
+    })}
+  </Flex>
+);
+
+export default ActionButtons;
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
new file mode 100644
index 00000000..b2feeb83
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
@@ -0,0 +1,110 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { DropdownPosition } from '@patternfly/react-core';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { ActionMenu } from './ActionMenu';
+
+const meta: ComponentMeta<typeof ActionMenu> = {
+  title: 'ActionMenu',
+  component: ActionMenu,
+  argTypes: {},
+};
+
+export default meta;
+
+const ActionMenuTemplate: ComponentStory<typeof ActionMenu> = (args) => {
+  return <ActionMenu {...args} />;
+};
+
+export const Actions = ActionMenuTemplate.bind({});
+
+Actions.args = {
+  actions: [
+    {
+      id: '1',
+      label: 'Edit Action',
+      cta: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+          // eslint-disable-next-line no-console
+          console.log('Edit Action', event);
+        },
+      },
+      tooltip: 'Sample tooltip',
+    },
+    {
+      id: '2',
+      label: 'Delete Action',
+      cta: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+          // eslint-disable-next-line no-console
+          console.log('Delete Action', event);
+        },
+      },
+      isDisabled: true,
+    },
+  ],
+  isDisabled: false,
+  position: DropdownPosition.left,
+};
+
+export const GroupedActions = ActionMenuTemplate.bind({});
+
+GroupedActions.args = {
+  groupedActions: [
+    {
+      groupId: 'group1',
+      groupActions: [
+        {
+          id: '1',
+          label: 'Edit Action',
+          cta: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+              // eslint-disable-next-line no-console
+              console.log('Edit Action', event);
+            },
+          },
+          tooltip: 'Sample tooltip',
+        },
+        {
+          id: '2',
+          label: 'Delete Action',
+          cta: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+              // eslint-disable-next-line no-console
+              console.log('Delete Action', event);
+            },
+          },
+          isDisabled: true,
+        },
+      ],
+    },
+    {
+      groupId: 'group2',
+      groupLabel: 'Group2',
+      groupActions: [
+        {
+          id: 'Link1',
+          label: 'External Link',
+          cta: {
+            href: 'https://github.com/',
+            external: true,
+          },
+        },
+        {
+          id: 'Link2',
+          label: 'Link',
+          cta: {
+            href: '/#',
+            external: false,
+          },
+          tooltip: 'Link',
+        },
+      ],
+    },
+  ],
+  position: DropdownPosition.left,
+};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
new file mode 100644
index 00000000..874d48ba
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
@@ -0,0 +1,108 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { ActionMenu } from './ActionMenu';
+
+const mockCallback = jest.fn();
+
+const mockActions = [
+  {
+    id: '1',
+    label: 'Edit Action',
+    cta: {
+      callback: mockCallback,
+    },
+  },
+  {
+    id: '2',
+    label: 'Delete Action',
+    cta: {
+      callback: jest.fn(),
+    },
+    isDisabled: true,
+  },
+];
+
+const mockGroupedActions = [
+  {
+    groupId: 'group1',
+    groupActions: [
+      {
+        id: '1',
+        label: 'Edit Action',
+        cta: {
+          callback: jest.fn(),
+        },
+        tooltip: 'Sample tooltip',
+      },
+      {
+        id: '2',
+        label: 'Delete Action',
+        cta: {
+          callback: jest.fn(),
+        },
+        isDisabled: true,
+      },
+    ],
+  },
+  {
+    groupId: 'group2',
+    groupLabel: 'Group2',
+    groupActions: [
+      {
+        id: 'Link1',
+        label: 'External Link',
+        cta: {
+          href: 'https://github.com/',
+          external: true,
+        },
+      },
+      {
+        id: 'Link2',
+        label: 'Link',
+        cta: {
+          href: '/#',
+          external: false,
+        },
+        tooltip: 'Link',
+      },
+    ],
+  },
+];
+
+describe('ActionMenu', () => {
+  test('ActionMenu is rendered', () => {
+    render(<ActionMenu actions={mockActions} />);
+
+    expect(screen.getByText('Actions')).toBeVisible();
+  });
+  test('ActionMenu dropdown is expanded', () => {
+    render(<ActionMenu actions={mockActions} label="Test Actions" />);
+
+    fireEvent.click(screen.getByText('Test Actions'));
+    expect(screen.getByText('Edit Action')).toBeVisible();
+    expect(screen.getByText('Delete Action')).toBeVisible();
+    expect(screen.getByText('Delete Action').closest('a')).toHaveAttribute('aria-disabled');
+  });
+  test('ActionMenu is disabled', () => {
+    render(<ActionMenu actions={mockActions} isDisabled />);
+
+    expect(screen.getByText('Actions').closest('button')).toHaveAttribute('disabled');
+  });
+  test('Menu actions trigger callback', () => {
+    render(<ActionMenu actions={mockActions} />);
+
+    fireEvent.click(screen.getByText('Actions'));
+    expect(screen.getByText('Edit Action')).toBeVisible();
+    fireEvent.click(screen.getByText('Edit Action'));
+    expect(mockCallback).toHaveBeenCalled();
+  });
+  test('Menu actions are rendered in groups', () => {
+    render(<ActionMenu groupedActions={mockGroupedActions} />);
+
+    fireEvent.click(screen.getByText('Actions'));
+    expect(screen.getByText('Edit Action')).toBeVisible();
+    expect(screen.getByText('Group2')).toBeVisible();
+    expect(screen.getByText('External Link')).toBeVisible();
+  });
+});
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
new file mode 100644
index 00000000..8df190c6
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -0,0 +1,168 @@
+import type { EitherNotBoth } from '@monorepo/common';
+import {
+  Dropdown,
+  DropdownPosition,
+  DropdownGroup,
+  DropdownToggle,
+  KebabToggle,
+  DropdownItem,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import * as _ from 'lodash-es';
+import React from 'react';
+
+export type ActionCTA =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | { callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void }
+  | { href: string; external?: boolean };
+
+export type Action = {
+  /** A unique identifier for this action. */
+  id: string;
+  /** The label to display in the UI. */
+  label: React.ReactNode;
+  /** Subtext for the menu item */
+  description?: string;
+  /** Executable callback or href.
+   * External links should automatically provide an external link icon on action.
+   * */
+  cta: ActionCTA;
+  /** Whether the action is disabled. */
+  isDisabled?: boolean;
+  /** The tooltip for this action. */
+  tooltip?: string;
+  /** The icon for this action. */
+  icon?: React.ReactNode;
+};
+
+export type GroupedActions = {
+  /** A unique identifier for this group. */
+  groupId: string;
+  /** Optional label to display as group heading */
+  groupLabel?: string;
+  /** Actions under this group. */
+  groupActions: Action[];
+};
+
+export enum ActionMenuVariant {
+  KEBAB = 'plain',
+  DROPDOWN = 'default',
+}
+
+export type ActionMenuProps = EitherNotBoth<
+  { actions: Action[] },
+  { groupedActions: GroupedActions[] }
+> & {
+  /** Optional flag to indicate whether action menu should be disabled */
+  isDisabled?: boolean;
+  /** Optional variant for action menu: DROPDOWN vs KEBAB (defaults to dropdown) */
+  variant?: ActionMenuVariant;
+  /** Optional label for action menu (defaults to 'Actions') */
+  label?: string;
+  /** Optional position (left/right) at which the action menu appears (defaults to right) */
+  position?: DropdownPosition;
+};
+
+export const ActionMenu: React.FC<ActionMenuProps> = ({
+  actions = [],
+  groupedActions = [],
+  isDisabled,
+  variant = ActionMenuVariant.DROPDOWN,
+  label = 'Actions',
+  position = DropdownPosition.right,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isGrouped, setIsGrouped] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [dropdownActionItems, setDropdownActionItems] = React.useState<any[]>([]);
+
+  React.useEffect(() => {
+    if (!_.isEmpty(groupedActions)) {
+      setIsGrouped(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onToggle = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById(`toggle-menu-${label}`);
+    if (element) {
+      element.focus();
+    }
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  /** Returns a DropDownItem element corresponding to an action */
+  const dropdownActionItem = React.useCallback((action: Action) => {
+    const externalIcon =
+      'href' in action.cta && 'external' in action.cta && action.cta.href && action.cta.external ? (
+        <ExternalLinkAltIcon />
+      ) : null;
+    const icon = action.icon ?? externalIcon;
+    const href = 'href' in action.cta ? action.cta.href : undefined;
+    const onClick =
+      'callback' in action.cta && action.cta.callback ? action.cta.callback : undefined;
+    return (
+      <DropdownItem
+        key={action.id}
+        tooltip={action.tooltip}
+        icon={icon}
+        href={href}
+        isDisabled={action.isDisabled}
+        onClick={onClick}
+      >
+        {action.label}
+      </DropdownItem>
+    );
+  }, []);
+
+  React.useEffect(() => {
+    let ddActionItems: JSX.Element[] = [];
+    if (!_.isEmpty(actions)) {
+      ddActionItems = actions.map((action: Action) => {
+        return dropdownActionItem(action as Action);
+      });
+    }
+    if (!_.isEmpty(groupedActions)) {
+      ddActionItems = groupedActions.map((action: GroupedActions) => {
+        // Grouped Actions
+        return (
+          <DropdownGroup label={action.groupLabel} key={action.groupId}>
+            {action.groupActions.map((groupAction: Action) => dropdownActionItem(groupAction))}
+          </DropdownGroup>
+        );
+      });
+    }
+    setDropdownActionItems(ddActionItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Build dropdown
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      position={position}
+      toggle={
+        variant === ActionMenuVariant.DROPDOWN ? (
+          <DropdownToggle id={`toggle-menu-${label}`} onToggle={onToggle} isDisabled={isDisabled}>
+            {label}
+          </DropdownToggle>
+        ) : (
+          <KebabToggle id={`toggle-menu-${label}`} onToggle={onToggle} isDisabled={isDisabled} />
+        )
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownActionItems}
+      isGrouped={isGrouped}
+    />
+  );
+};
+
+export default ActionMenu;
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
new file mode 100644
index 00000000..5f9ab4a5
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
+import type { BreadcrumbProp } from './Breadcrumbs';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const meta: ComponentMeta<typeof Breadcrumbs> = {
+  title: 'Breadcrumbs',
+  component: Breadcrumbs,
+  argTypes: {},
+};
+
+export default meta;
+
+const BreadcrumbsTemplate: ComponentStory<typeof Breadcrumbs> = (args) => {
+  return (
+    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+      <Routes>
+        <Route element={<Breadcrumbs {...args} />} path="/workspaces/demo-workspace" />
+        <Route
+          element={
+            <div>
+              <p>Workspaces List Page</p>
+              <button type="button">
+                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
+              </button>
+            </div>
+          }
+          path="/workspaces"
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+export const Primary = BreadcrumbsTemplate.bind({});
+
+// Define tabs
+const breadcrumbs: BreadcrumbProp[] = [
+  { name: 'Workspaces', path: '/workspaces' },
+  { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+];
+
+Primary.args = {
+  breadcrumbs,
+};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
new file mode 100644
index 00000000..a13246a3
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import '@testing-library/jest-dom';
+import type { BreadcrumbsProps } from './Breadcrumbs';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const mockProps: BreadcrumbsProps = {
+  breadcrumbs: [
+    { name: 'Workspaces', path: '/workspaces' },
+    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+  ],
+};
+
+const breadcrumbsJSX = (args: BreadcrumbsProps) => (
+  <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+    <Routes>
+      <Route element={<Breadcrumbs {...args} />} path="/workspaces/demo-workspace" />
+      <Route element={<div>Workspaces List Page</div>} path="/workspaces" />
+    </Routes>
+  </MemoryRouter>
+);
+
+describe('Breadcrumbs', () => {
+  test('Breadcrumbs are rendered', () => {
+    render(breadcrumbsJSX(mockProps));
+
+    expect(screen.getByText('Workspaces')).toBeVisible();
+    expect(screen.getByText('Workspace details')).toBeVisible();
+  });
+  test('Clicking on breadcrumb triggers specified path', () => {
+    render(breadcrumbsJSX(mockProps));
+
+    // Click Workspaces link
+    fireEvent.click(screen.getByTestId('breadcrumb-link-0'));
+    expect(screen.getByText('Workspaces List Page')).toBeVisible();
+  });
+});
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx
new file mode 100644
index 00000000..1702dc2a
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx
@@ -0,0 +1,51 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export type BreadcrumbProp = { name: string; path: string; uuid?: string; id?: string };
+
+export type BreadcrumbsProps = {
+  breadcrumbs: BreadcrumbProp[];
+};
+
+export const Breadcrumbs: React.SFC<BreadcrumbsProps> = ({ breadcrumbs }) => {
+  const [crumbs, setCrumbs] = React.useState<BreadcrumbProp[]>([]);
+
+  const addUUID = (allData: BreadcrumbProp[]) => {
+    return allData.map((item: BreadcrumbProp) => ({
+      ...item,
+      uuid: item.uuid || item.id || uuidv4(),
+    }));
+  };
+
+  React.useEffect(() => {
+    setCrumbs(addUUID(breadcrumbs));
+  }, [breadcrumbs]);
+
+  return (
+    <Breadcrumb>
+      {crumbs.map((crumb, i, { length }) => {
+        const isLast = i === length - 1;
+
+        return (
+          <BreadcrumbItem key={crumb.uuid} isActive={isLast}>
+            {isLast ? (
+              crumb.name
+            ) : (
+              <Link
+                className="pf-c-breadcrumb__link"
+                to={crumb.path}
+                data-testid={`breadcrumb-link-${i}`}
+              >
+                {crumb.name}
+              </Link>
+            )}
+          </BreadcrumbItem>
+        );
+      })}
+    </Breadcrumb>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/packages/lib-utils/src/components/details-page-header/utils/index.ts b/packages/lib-utils/src/components/details-page-header/utils/index.ts
new file mode 100644
index 00000000..d6266f94
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/index.ts
@@ -0,0 +1,9 @@
+export { Breadcrumbs, BreadcrumbProp, BreadcrumbsProps } from './Breadcrumbs';
+export { ActionButtons, ActionButtonProp, ActionButtonsProps } from './ActionButtons';
+export {
+  ActionMenu,
+  Action,
+  GroupedActions,
+  ActionMenuVariant,
+  ActionMenuProps,
+} from './ActionMenu';

From a09d43af1352b2e8fd27097631c6f71eebb01395 Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Wed, 21 Sep 2022 10:26:50 -0400
Subject: [PATCH 04/17] Option to have action menu icon after text

Option to have action menu icon after text
---
 .../details-page-header/utils/ActionMenu.css  | 12 +++
 .../utils/ActionMenu.stories.tsx              |  8 +-
 .../details-page-header/utils/ActionMenu.tsx  | 75 +++++++++++--------
 3 files changed, 63 insertions(+), 32 deletions(-)
 create mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css

diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css
new file mode 100644
index 00000000..d7b7d3ec
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css
@@ -0,0 +1,12 @@
+.menu-item-with-label-before-icon .pf-c-dropdown__menu-item-icon {
+  margin-left: var(--pf-c-dropdown__menu-item-icon--MarginRight);
+}
+
+.menu-item-with-label-before-icon.pf-c-dropdown__menu-item {
+  flex-direction: row-reverse;
+  justify-content: left;
+}
+
+.menu-item-with-label-before-icon .pf-c-dropdown__menu-item-main {
+  flex-direction: row-reverse;
+}
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
index b2feeb83..10d0039c 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
@@ -2,12 +2,12 @@
 import { DropdownPosition } from '@patternfly/react-core';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
-import { ActionMenu } from './ActionMenu';
+import { ActionMenu, ActionMenuVariant } from './ActionMenu';
 
 const meta: ComponentMeta<typeof ActionMenu> = {
   title: 'ActionMenu',
   component: ActionMenu,
-  argTypes: {},
+  argTypes: { groupedActions: { control: 'object' } },
 };
 
 export default meta;
@@ -102,9 +102,13 @@ GroupedActions.args = {
             external: false,
           },
           tooltip: 'Link',
+          description: 'Sample description',
         },
       ],
     },
   ],
+  variant: ActionMenuVariant.DROPDOWN,
+  label: 'Grouped Actions',
   position: DropdownPosition.left,
+  displayLabelBeforeIcon: true,
 };
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
index 8df190c6..01d405c3 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -10,6 +10,7 @@ import {
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import * as _ from 'lodash-es';
 import React from 'react';
+import './ActionMenu.css';
 
 export type ActionCTA =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -21,17 +22,17 @@ export type Action = {
   id: string;
   /** The label to display in the UI. */
   label: React.ReactNode;
-  /** Subtext for the menu item */
+  /** Optional subtext for the menu item */
   description?: string;
   /** Executable callback or href.
    * External links should automatically provide an external link icon on action.
    * */
   cta: ActionCTA;
-  /** Whether the action is disabled. */
+  /** Optional flag to indicate whether the action is disabled. */
   isDisabled?: boolean;
-  /** The tooltip for this action. */
+  /** Optional tooltip for this action. */
   tooltip?: string;
-  /** The icon for this action. */
+  /** Optional icon for this action. */
   icon?: React.ReactNode;
 };
 
@@ -49,10 +50,7 @@ export enum ActionMenuVariant {
   DROPDOWN = 'default',
 }
 
-export type ActionMenuProps = EitherNotBoth<
-  { actions: Action[] },
-  { groupedActions: GroupedActions[] }
-> & {
+export type ActionMenuOptions = {
   /** Optional flag to indicate whether action menu should be disabled */
   isDisabled?: boolean;
   /** Optional variant for action menu: DROPDOWN vs KEBAB (defaults to dropdown) */
@@ -61,8 +59,16 @@ export type ActionMenuProps = EitherNotBoth<
   label?: string;
   /** Optional position (left/right) at which the action menu appears (defaults to right) */
   position?: DropdownPosition;
+  /** Optional flag to indicate whether labels should appear to the left of icons for the action menu items (icon appears after the label by default) */
+  displayLabelBeforeIcon?: boolean;
 };
 
+export type ActionMenuProps = EitherNotBoth<
+  { actions: Action[] },
+  { groupedActions: GroupedActions[] }
+> &
+  ActionMenuOptions;
+
 export const ActionMenu: React.FC<ActionMenuProps> = ({
   actions = [],
   groupedActions = [],
@@ -70,6 +76,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   variant = ActionMenuVariant.DROPDOWN,
   label = 'Actions',
   position = DropdownPosition.right,
+  displayLabelBeforeIcon,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isGrouped, setIsGrouped] = React.useState(false);
@@ -100,28 +107,36 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   };
 
   /** Returns a DropDownItem element corresponding to an action */
-  const dropdownActionItem = React.useCallback((action: Action) => {
-    const externalIcon =
-      'href' in action.cta && 'external' in action.cta && action.cta.href && action.cta.external ? (
-        <ExternalLinkAltIcon />
-      ) : null;
-    const icon = action.icon ?? externalIcon;
-    const href = 'href' in action.cta ? action.cta.href : undefined;
-    const onClick =
-      'callback' in action.cta && action.cta.callback ? action.cta.callback : undefined;
-    return (
-      <DropdownItem
-        key={action.id}
-        tooltip={action.tooltip}
-        icon={icon}
-        href={href}
-        isDisabled={action.isDisabled}
-        onClick={onClick}
-      >
-        {action.label}
-      </DropdownItem>
-    );
-  }, []);
+  const dropdownActionItem = React.useCallback(
+    (action: Action) => {
+      const externalIcon =
+        'href' in action.cta &&
+        'external' in action.cta &&
+        action.cta.href &&
+        action.cta.external ? (
+          <ExternalLinkAltIcon />
+        ) : null;
+      const icon = action.icon ?? externalIcon;
+      const href = 'href' in action.cta ? action.cta.href : undefined;
+      const onClick =
+        'callback' in action.cta && action.cta.callback ? action.cta.callback : undefined;
+      return (
+        <DropdownItem
+          className={displayLabelBeforeIcon ? 'menu-item-with-label-before-icon' : ''}
+          key={action.id}
+          tooltip={action.tooltip}
+          description={action.description}
+          icon={icon}
+          href={href}
+          isDisabled={action.isDisabled}
+          onClick={onClick}
+        >
+          {action.label}
+        </DropdownItem>
+      );
+    },
+    [displayLabelBeforeIcon],
+  );
 
   React.useEffect(() => {
     let ddActionItems: JSX.Element[] = [];

From cbd1a4963ba55ad0c05366a2c52ed2c220385e8a Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Thu, 22 Sep 2022 13:53:19 -0400
Subject: [PATCH 05/17] Option to add icon before of after page heading title

---
 .../DetailsPageHeader.stories.tsx             | 11 +++--
 .../DetailsPageHeader.test.tsx                |  4 +-
 .../details-page-header/DetailsPageHeader.tsx | 48 +++++++++++++------
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
index 41ed323d..6a7babd1 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { CheckCircleIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon, GithubIcon } from '@patternfly/react-icons';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
@@ -56,9 +56,12 @@ Primary.args = {
     { name: 'Workspace details', path: '/workspaces/demo-workspace' },
   ],
   obj: mockWorkspace,
-  pageHeadingLabel: {
-    name: 'Ready',
-    icon: <CheckCircleIcon color="#3E8635" />,
+  pageHeading: {
+    label: {
+      name: 'Ready',
+      icon: <CheckCircleIcon color="#3E8635" />,
+    },
+    iconAfterTitle: <GithubIcon color="#0066CC" />,
   },
   actionButtons: [
     {
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
index 92620fe5..0cad064c 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
@@ -13,7 +13,9 @@ const mockProps: DetailsPageHeaderProps = {
     { name: 'Workspaces', path: '/workspaces' },
     { name: 'Workspace details', path: '/workspaces/demo-workspace' },
   ],
-  pageHeading: 'demo-workspace',
+  pageHeading: {
+    title: 'demo-workspace',
+  },
   actionButtons: [
     {
       label: 'Test Button',
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
index 25fcbdbe..70e7ffd6 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
@@ -14,18 +14,29 @@ import type { BreadcrumbProp, ActionButtonProp, ActionMenuProps } from './utils'
 import { Breadcrumbs, ActionButtons, ActionMenu } from './utils';
 import '@patternfly/react-styles/css/utilities/Spacing/spacing.css';
 
-export type DetailsPageHeaderProps = {
-  breadcrumbs: BreadcrumbProp[];
-  actionButtons?: ActionButtonProp[];
-  pageHeading?: string;
-  obj?: K8sResourceCommon;
-  pageHeadingLabel?: {
+export type PageHeading = {
+  /** Optional title for page heading */
+  title?: string;
+  /** Optional label for page heading */
+  label?: {
     name: string;
     key?: string;
     icon?: React.ReactNode;
     href?: string;
     color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
   };
+  /** Optional icon for page heading (appears to the left of the page heading's title) */
+  iconBeforeTitle?: React.ReactNode;
+  /** Optional icon for page heading (appears to the right of the page heading's title) */
+  iconAfterTitle?: React.ReactNode;
+};
+
+export type DetailsPageHeaderProps = {
+  breadcrumbs: BreadcrumbProp[];
+  actionButtons?: ActionButtonProp[];
+  pageHeading?: PageHeading;
+  /** Optional resource object (if no title for the page heading is provided, the title can be taken from the resource's name) */
+  obj?: K8sResourceCommon;
   actionMenu?: ActionMenuProps;
 };
 
@@ -35,9 +46,8 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
   actionMenu,
   pageHeading,
   obj,
-  pageHeadingLabel,
 }) => {
-  const heading = pageHeading ?? obj?.metadata?.name;
+  const heading = pageHeading?.title ?? obj?.metadata?.name;
   return (
     <>
       <Split hasGutter className="pf-u-mb-sm">
@@ -48,6 +58,12 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
         <SplitItem isFilled />
       </Split>
       <Split hasGutter className="pf-u-mb-sm pf-u-mr-sm">
+        {/** Icon for details page heading (before title) */}
+        {pageHeading && !_.isEmpty(pageHeading?.iconBeforeTitle) && (
+          <SplitItem className="pf-u-mt-auto pf-u-mb-auto">
+            {pageHeading?.iconBeforeTitle}
+          </SplitItem>
+        )}
         {/* Details page heading */}
         {heading && (
           <SplitItem>
@@ -56,16 +72,20 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
             </TextContent>
           </SplitItem>
         )}
+        {/** Icon for details page heading (after title) */}
+        {pageHeading && !_.isEmpty(pageHeading?.iconAfterTitle) && (
+          <SplitItem className="pf-u-mt-auto pf-u-mb-auto">{pageHeading?.iconAfterTitle}</SplitItem>
+        )}
         {/* Optional details page heading label */}
-        {!_.isEmpty(pageHeadingLabel) && (
+        {!_.isEmpty(pageHeading) && !_.isEmpty(pageHeading?.label) && (
           <SplitItem>
             <Label
-              href={pageHeadingLabel?.href}
-              icon={pageHeadingLabel?.icon}
-              color={pageHeadingLabel?.color}
-              key={pageHeadingLabel?.key ?? pageHeadingLabel?.name}
+              href={pageHeading?.label?.href}
+              icon={pageHeading?.label?.icon}
+              color={pageHeading?.label?.color}
+              key={pageHeading?.label?.key ?? pageHeading?.label?.name}
             >
-              {pageHeadingLabel?.name}
+              {pageHeading?.label?.name}
             </Label>
           </SplitItem>
         )}

From 31098b58666567bdc6cc3424198bb971449ee9de Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Wed, 21 Sep 2022 07:57:03 -0400
Subject: [PATCH 06/17] detailspage & storybook

update
---
 .../details-page/DetailsPage.stories.tsx      | 183 ++++++++++++++++++
 .../components/details-page/DetailsPage.tsx   |  34 ++++
 .../horizontal-nav/HorizontalNav.tsx          |  17 +-
 .../src/components/horizontal-nav/index.ts    |   8 +-
 4 files changed, 235 insertions(+), 7 deletions(-)
 create mode 100644 packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
 create mode 100644 packages/lib-utils/src/components/details-page/DetailsPage.tsx

diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
new file mode 100644
index 00000000..44dce81c
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
@@ -0,0 +1,183 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+  TextContent,
+  Text,
+  TextVariants,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Label,
+} from '@patternfly/react-core';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
+import type { K8sResourceCommon } from '../../types/k8s';
+import { DetailsPage } from './DetailsPage';
+
+const meta: ComponentMeta<typeof DetailsPage> = {
+  title: 'DetailsPage',
+  component: DetailsPage,
+  argTypes: {},
+};
+
+export default meta;
+
+const DetailsPageTemplate: ComponentStory<typeof DetailsPage> = (args) => {
+  return (
+    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+      <Routes>
+        <Route element={<DetailsPage {...args} />} path="/workspaces/demo-workspace" />
+        <Route element={<DetailsPage {...args} />} path="/workspaces/demo-workspace/:selectedTab" />
+        <Route
+          element={
+            <div>
+              <p>Workspaces List Page</p>
+              <a href="/workspaces" type="button">
+                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
+              </a>
+            </div>
+          }
+          path="/workspaces"
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+export const Primary = DetailsPageTemplate.bind({});
+
+const mockWorkspace: K8sResourceCommon = {
+  apiVersion: 'v1beta1',
+  apiGroup: 'tenancy.kcp.dev',
+  kind: 'Workspace',
+  metadata: {
+    name: 'demo-workspace',
+    labels: {
+      label1: 'value1',
+      label2: 'value2',
+    },
+  },
+};
+
+export const SampleOverview: React.FC = () => (
+  <DescriptionList
+    columnModifier={{
+      default: '2Col',
+    }}
+  >
+    <DescriptionListGroup>
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>demo-workspace</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Members</DescriptionListTerm>
+      <DescriptionListDescription>Alex and 3 others</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Services</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Label>App Studio</Label>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>APIs</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="/apis">21 kinds</a>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Label>internal.kcp.dev/phase=Ready</Label>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Applications</DescriptionListTerm>
+      <DescriptionListDescription>
+        <span>
+          <a href="/">Demo app</a>,<a href="/">Billing app</a>
+        </span>
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);
+
+export const PlaceholderComponent: React.FC<{ value: string }> = ({ value }) => (
+  <TextContent>
+    <Text component={TextVariants.h3}>{value}</Text>
+  </TextContent>
+);
+
+Primary.args = {
+  ariaLabel: 'Workspace details',
+  tabs: [
+    { key: 'overview', title: 'Overview', content: <SampleOverview />, ariaLabel: 'Overview' },
+    {
+      key: 'applications',
+      title: 'Applications',
+      content: <PlaceholderComponent value="Applications" />,
+      ariaLabel: 'applications',
+    },
+    {
+      key: 'environments',
+      title: 'Environments',
+      content: <PlaceholderComponent value="Environments" />,
+      ariaLabel: 'Environments',
+    },
+    {
+      key: 'apis',
+      title: 'APIs',
+      content: <PlaceholderComponent value="APIs" />,
+      ariaLabel: 'APIs',
+    },
+  ],
+  breadcrumbs: [
+    { name: 'Workspaces', path: '/workspaces' },
+    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+  ],
+  obj: mockWorkspace,
+  pageHeadingLabel: {
+    name: 'Ready',
+    icon: <CheckCircleIcon color="#3E8635" />,
+  },
+  actionButtons: [
+    {
+      label: 'Download kubeconfig',
+      callback: (event: React.MouseEvent) => {
+        // eslint-disable-next-line no-console
+        console.log('Test Action', event);
+      },
+    },
+  ],
+  actionMenu: {
+    actions: [
+      {
+        id: '1',
+        label: 'Edit workspace',
+        cta: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+            // eslint-disable-next-line no-console
+            console.log('Edit workspace', event);
+          },
+        },
+      },
+      {
+        id: '2',
+        label: 'Delete workspace',
+        cta: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+            // eslint-disable-next-line no-console
+            console.log('Delete workspace', event);
+          },
+        },
+        isDisabled: true,
+        tooltip: 'Sample tooltip',
+      },
+    ],
+    isDisabled: false,
+  },
+};
diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.tsx
new file mode 100644
index 00000000..5abdaf96
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page/DetailsPage.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import type { DetailsPageHeaderProps } from '../details-page-header';
+import { DetailsPageHeader } from '../details-page-header';
+import type { HorizontalNavProps } from '../horizontal-nav';
+import { withRouter, HorizontalNav } from '../horizontal-nav';
+
+export type DetailsPageProps = HorizontalNavProps & DetailsPageHeaderProps;
+
+export const DetailsPage = withRouter<DetailsPageProps>(
+  ({
+    ariaLabel,
+    tabs,
+    breadcrumbs,
+    actionButtons,
+    actionMenu,
+    pageHeading,
+    obj,
+    pageHeadingLabel,
+  }) => {
+    return (
+      <>
+        <DetailsPageHeader
+          breadcrumbs={breadcrumbs}
+          actionButtons={actionButtons}
+          actionMenu={actionMenu}
+          pageHeading={pageHeading}
+          obj={obj}
+          pageHeadingLabel={pageHeadingLabel}
+        />
+        <HorizontalNav ariaLabel={ariaLabel} tabs={tabs} />
+      </>
+    );
+  },
+);
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
index 777b8fa1..ac4760ab 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
@@ -1,6 +1,7 @@
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 import React from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import '@patternfly/react-styles/css/utilities/Spacing/spacing.css';
 
 type Tab = {
   /** Key for individual tab */
@@ -51,11 +52,15 @@ const HorizontalNavTabs: React.FC<HorizontalNavProps> = ({
       activeKey={activeTabKey}
       onSelect={(e, eventKey) => {
         setActiveTabKey(eventKey);
-        if (params?.selectedTab && location?.pathname && navigate) {
+        if (location?.pathname && navigate) {
           const currentPathName = location.pathname;
-          navigate(currentPathName.replace(params.selectedTab, eventKey as string), {
-            replace: true,
-          });
+          if (params?.selectedTab) {
+            navigate(currentPathName.replace(params.selectedTab, eventKey as string), {
+              replace: true,
+            });
+          } else {
+            navigate(`${currentPathName}/${eventKey as string}`);
+          }
         }
       }}
       aria-label={ariaLabel}
@@ -69,7 +74,7 @@ const HorizontalNavTabs: React.FC<HorizontalNavProps> = ({
             title={<TabTitleText>{tab.title}</TabTitleText>}
             aria-label={tab.ariaLabel}
           >
-            {tab.content}
+            <div className="pf-u-m-md">{tab.content}</div>
           </Tab>
         );
       })}
@@ -90,4 +95,4 @@ const withRouter = <T extends WithRouterProps>(Component: React.ComponentType<T>
 
 const HorizontalNav = withRouter(HorizontalNavTabs as React.ComponentType<HorizontalNavProps>);
 
-export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps };
+export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps, withRouter };
diff --git a/packages/lib-utils/src/components/horizontal-nav/index.ts b/packages/lib-utils/src/components/horizontal-nav/index.ts
index 757c033f..e9568029 100644
--- a/packages/lib-utils/src/components/horizontal-nav/index.ts
+++ b/packages/lib-utils/src/components/horizontal-nav/index.ts
@@ -1 +1,7 @@
-export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps } from './HorizontalNav';
+export {
+  HorizontalNav,
+  HorizontalNavTabs,
+  Tab,
+  HorizontalNavProps,
+  withRouter,
+} from './HorizontalNav';

From 71aa44b4aeea13a7bcf6aff2167f1b66aa4c22aa Mon Sep 17 00:00:00 2001
From: Vidya Nambiar <vnambiar@redhat.com>
Date: Fri, 30 Sep 2022 12:41:36 -0400
Subject: [PATCH 07/17] update stories based on changes to header component

---
 .../components/details-page/DetailsPage.stories.tsx  |  8 +++++---
 .../src/components/details-page/DetailsPage.tsx      | 12 +-----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
index 44dce81c..71bbfc0a 100644
--- a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
+++ b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
@@ -138,9 +138,11 @@ Primary.args = {
     { name: 'Workspace details', path: '/workspaces/demo-workspace' },
   ],
   obj: mockWorkspace,
-  pageHeadingLabel: {
-    name: 'Ready',
-    icon: <CheckCircleIcon color="#3E8635" />,
+  pageHeading: {
+    label: {
+      name: 'Ready',
+      icon: <CheckCircleIcon color="#3E8635" />,
+    },
   },
   actionButtons: [
     {
diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.tsx
index 5abdaf96..68e68975 100644
--- a/packages/lib-utils/src/components/details-page/DetailsPage.tsx
+++ b/packages/lib-utils/src/components/details-page/DetailsPage.tsx
@@ -7,16 +7,7 @@ import { withRouter, HorizontalNav } from '../horizontal-nav';
 export type DetailsPageProps = HorizontalNavProps & DetailsPageHeaderProps;
 
 export const DetailsPage = withRouter<DetailsPageProps>(
-  ({
-    ariaLabel,
-    tabs,
-    breadcrumbs,
-    actionButtons,
-    actionMenu,
-    pageHeading,
-    obj,
-    pageHeadingLabel,
-  }) => {
+  ({ ariaLabel, tabs, breadcrumbs, actionButtons, actionMenu, pageHeading, obj }) => {
     return (
       <>
         <DetailsPageHeader
@@ -25,7 +16,6 @@ export const DetailsPage = withRouter<DetailsPageProps>(
           actionMenu={actionMenu}
           pageHeading={pageHeading}
           obj={obj}
-          pageHeadingLabel={pageHeadingLabel}
         />
         <HorizontalNav ariaLabel={ariaLabel} tabs={tabs} />
       </>

From 9339af9c579998e1f155ddf77b5bd03a9e5880a6 Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Wed, 12 Oct 2022 20:29:01 +0200
Subject: [PATCH 08/17] Fix test performance

---
 .../components/details-page-header/DetailsPageHeader.test.tsx    | 1 -
 .../components/details-page-header/utils/ActionButtons.test.tsx  | 1 -
 .../src/components/details-page-header/utils/ActionMenu.test.tsx | 1 -
 .../components/details-page-header/utils/Breadcrumbs.test.tsx    | 1 -
 .../src/components/horizontal-nav/HorizontalNav.test.tsx         | 1 -
 5 files changed, 5 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
index 0cad064c..2acd666d 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
@@ -2,7 +2,6 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import '@testing-library/jest-dom';
 import type { DetailsPageHeaderProps } from './DetailsPageHeader';
 import { DetailsPageHeader } from './DetailsPageHeader';
 
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
index 44f4c01f..146049d3 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import '@testing-library/jest-dom';
 import { ActionButtons } from './ActionButtons';
 
 const mockCallback = jest.fn();
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
index 874d48ba..458c2d4e 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import '@testing-library/jest-dom';
 import { ActionMenu } from './ActionMenu';
 
 const mockCallback = jest.fn();
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
index a13246a3..1da97780 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
@@ -2,7 +2,6 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import '@testing-library/jest-dom';
 import type { BreadcrumbsProps } from './Breadcrumbs';
 import { Breadcrumbs } from './Breadcrumbs';
 
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
index 054bc4ec..3a5b21d3 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import '@testing-library/jest-dom';
 import { BrowserRouter } from 'react-router-dom';
 import type { Tab } from './HorizontalNav';
 import { HorizontalNav, HorizontalNavTabs } from './HorizontalNav';

From 535f6e1bdb1c0753af1a9f9576056601a8ff5c4b Mon Sep 17 00:00:00 2001
From: Kim Doberstein <kdoberst@redhat.com>
Date: Mon, 10 Oct 2022 15:17:14 -0500
Subject: [PATCH 09/17] Add Resource Summary

---
 .../details-page/DetailsPage.stories.tsx      | 67 ++++---------------
 1 file changed, 13 insertions(+), 54 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
index 71bbfc0a..92422c29 100644
--- a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
+++ b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
@@ -1,19 +1,11 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  DescriptionList,
-  DescriptionListTerm,
-  DescriptionListGroup,
-  DescriptionListDescription,
-  Label,
-} from '@patternfly/react-core';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
 import type { K8sResourceCommon } from '../../types/k8s';
+import { OverviewPage } from '../resource-summary';
 import { DetailsPage } from './DetailsPage';
 
 const meta: ComponentMeta<typeof DetailsPage> = {
@@ -58,52 +50,10 @@ const mockWorkspace: K8sResourceCommon = {
       label1: 'value1',
       label2: 'value2',
     },
+    creationTimestamp: '2022-09-15T21:07:32Z',
   },
 };
 
-export const SampleOverview: React.FC = () => (
-  <DescriptionList
-    columnModifier={{
-      default: '2Col',
-    }}
-  >
-    <DescriptionListGroup>
-      <DescriptionListTerm>Name</DescriptionListTerm>
-      <DescriptionListDescription>demo-workspace</DescriptionListDescription>
-    </DescriptionListGroup>
-    <DescriptionListGroup>
-      <DescriptionListTerm>Members</DescriptionListTerm>
-      <DescriptionListDescription>Alex and 3 others</DescriptionListDescription>
-    </DescriptionListGroup>
-    <DescriptionListGroup>
-      <DescriptionListTerm>Services</DescriptionListTerm>
-      <DescriptionListDescription>
-        <Label>App Studio</Label>
-      </DescriptionListDescription>
-    </DescriptionListGroup>
-    <DescriptionListGroup>
-      <DescriptionListTerm>APIs</DescriptionListTerm>
-      <DescriptionListDescription>
-        <a href="/apis">21 kinds</a>
-      </DescriptionListDescription>
-    </DescriptionListGroup>
-    <DescriptionListGroup>
-      <DescriptionListTerm>Labels</DescriptionListTerm>
-      <DescriptionListDescription>
-        <Label>internal.kcp.dev/phase=Ready</Label>
-      </DescriptionListDescription>
-    </DescriptionListGroup>
-    <DescriptionListGroup>
-      <DescriptionListTerm>Applications</DescriptionListTerm>
-      <DescriptionListDescription>
-        <span>
-          <a href="/">Demo app</a>,<a href="/">Billing app</a>
-        </span>
-      </DescriptionListDescription>
-    </DescriptionListGroup>
-  </DescriptionList>
-);
-
 export const PlaceholderComponent: React.FC<{ value: string }> = ({ value }) => (
   <TextContent>
     <Text component={TextVariants.h3}>{value}</Text>
@@ -113,7 +63,16 @@ export const PlaceholderComponent: React.FC<{ value: string }> = ({ value }) =>
 Primary.args = {
   ariaLabel: 'Workspace details',
   tabs: [
-    { key: 'overview', title: 'Overview', content: <SampleOverview />, ariaLabel: 'Overview' },
+    {
+      key: 'overview',
+      title: 'Overview',
+      content: (
+        <OverviewPage resource={mockWorkspace} rightColumn={<>Right column content</>}>
+          <span>Additional content</span>
+        </OverviewPage>
+      ),
+      ariaLabel: 'Overview',
+    },
     {
       key: 'applications',
       title: 'Applications',

From 0c82ee9a63d28d508e238afdc823a3107ccf0535 Mon Sep 17 00:00:00 2001
From: Kim Doberstein <kdoberst@redhat.com>
Date: Mon, 24 Oct 2022 22:15:48 -0500
Subject: [PATCH 10/17] Add action buttons to list view

---
 .../utils/ActionButtons.tsx                   | 58 ++++++++++++-------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
index 7dbb86f3..3cf645c6 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
@@ -3,41 +3,57 @@ import * as _ from 'lodash-es';
 import React from 'react';
 
 export type ActionButtonProp = {
-  label: string;
+  id?: string;
+  label?: string;
   callback: (event: React.MouseEvent) => void;
   isDisabled?: boolean;
   tooltip?: string;
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
 };
 
 export type ActionButtonsProps = {
   actionButtons: ActionButtonProp[];
 };
 
+const ActionButton: React.FC<ActionButtonProp> = ({
+  id,
+  children,
+  callback,
+  isDisabled,
+  tooltip,
+  variant = 'primary',
+}) => {
+  const tooltipRef = React.useRef();
+  return (
+    <>
+      <Button
+        variant={variant}
+        onClick={callback}
+        isAriaDisabled={isDisabled}
+        aria-describedby={id}
+        innerRef={tooltipRef}
+      >
+        {children}
+      </Button>
+      {tooltip ? <Tooltip id={id} content={tooltip} reference={tooltipRef} /> : null}
+    </>
+  );
+};
+
 export const ActionButtons: React.SFC<ActionButtonsProps> = ({ actionButtons }) => (
   <Flex>
     {_.map(actionButtons, (actionButton, i) => {
       if (!_.isEmpty(actionButton)) {
         return (
-          <FlexItem key={i}>
-            {actionButton.tooltip ? (
-              <Tooltip content={actionButton.tooltip}>
-                <Button
-                  variant="primary"
-                  onClick={actionButton.callback}
-                  isAriaDisabled={actionButton.isDisabled}
-                >
-                  {actionButton.label}
-                </Button>
-              </Tooltip>
-            ) : (
-              <Button
-                variant="primary"
-                onClick={actionButton.callback}
-                isAriaDisabled={actionButton.isDisabled}
-              >
-                {actionButton.label}
-              </Button>
-            )}
+          <FlexItem key={actionButton.id || i}>
+            <ActionButton
+              variant={actionButton.variant}
+              callback={actionButton.callback}
+              isDisabled={actionButton.isDisabled}
+              tooltip={actionButton.tooltip}
+            >
+              {actionButton.label}
+            </ActionButton>
           </FlexItem>
         );
       }

From 0710c90a58ab42e8e6dbf7e4ba5b12c20b5a9fa5 Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Mon, 24 Oct 2022 19:25:35 +0200
Subject: [PATCH 11/17] Use API Extractor on distributable packages

---
 .../details-page-header/DetailsPageHeader.tsx        |  2 +-
 .../src/components/details-page-header/index.ts      | 12 +++++++++++-
 .../details-page-header/utils/ActionMenu.tsx         |  6 ++----
 .../components/details-page-header/utils/index.ts    |  8 +++++---
 .../lib-utils/src/components/details-page/index.ts   |  1 +
 .../src/components/horizontal-nav/HorizontalNav.tsx  |  2 +-
 .../lib-utils/src/components/horizontal-nav/index.ts |  1 +
 7 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 packages/lib-utils/src/components/details-page/index.ts

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
index 70e7ffd6..481ac59d 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
@@ -7,7 +7,7 @@ import {
   Label,
   DropdownPosition,
 } from '@patternfly/react-core';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import React from 'react';
 import type { K8sResourceCommon } from '../../types/k8s';
 import type { BreadcrumbProp, ActionButtonProp, ActionMenuProps } from './utils';
diff --git a/packages/lib-utils/src/components/details-page-header/index.ts b/packages/lib-utils/src/components/details-page-header/index.ts
index c318aa51..07be0844 100644
--- a/packages/lib-utils/src/components/details-page-header/index.ts
+++ b/packages/lib-utils/src/components/details-page-header/index.ts
@@ -1 +1,11 @@
-export { DetailsPageHeader, DetailsPageHeaderProps } from './DetailsPageHeader';
+export { DetailsPageHeader, DetailsPageHeaderProps, PageHeading } from './DetailsPageHeader';
+export {
+  Action,
+  ActionButtonProp,
+  ActionCTA,
+  ActionMenuOptions,
+  ActionMenuProps,
+  ActionMenuVariant,
+  GroupedActions,
+  BreadcrumbProp,
+} from './utils';
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
index 01d405c3..82e24c0d 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -1,4 +1,4 @@
-import type { EitherNotBoth } from '@monorepo/common';
+import type { EitherNotBoth } from '@openshift/dynamic-plugin-sdk';
 import {
   Dropdown,
   DropdownPosition,
@@ -24,9 +24,7 @@ export type Action = {
   label: React.ReactNode;
   /** Optional subtext for the menu item */
   description?: string;
-  /** Executable callback or href.
-   * External links should automatically provide an external link icon on action.
-   * */
+  /** Executable callback or href. External links should automatically provide an external link icon on action. */
   cta: ActionCTA;
   /** Optional flag to indicate whether the action is disabled. */
   isDisabled?: boolean;
diff --git a/packages/lib-utils/src/components/details-page-header/utils/index.ts b/packages/lib-utils/src/components/details-page-header/utils/index.ts
index d6266f94..20f0311f 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/index.ts
+++ b/packages/lib-utils/src/components/details-page-header/utils/index.ts
@@ -1,9 +1,11 @@
 export { Breadcrumbs, BreadcrumbProp, BreadcrumbsProps } from './Breadcrumbs';
 export { ActionButtons, ActionButtonProp, ActionButtonsProps } from './ActionButtons';
 export {
-  ActionMenu,
   Action,
-  GroupedActions,
-  ActionMenuVariant,
+  ActionCTA,
+  ActionMenu,
+  ActionMenuOptions,
   ActionMenuProps,
+  ActionMenuVariant,
+  GroupedActions,
 } from './ActionMenu';
diff --git a/packages/lib-utils/src/components/details-page/index.ts b/packages/lib-utils/src/components/details-page/index.ts
new file mode 100644
index 00000000..0f7d02b3
--- /dev/null
+++ b/packages/lib-utils/src/components/details-page/index.ts
@@ -0,0 +1 @@
+export { DetailsPage, DetailsPageProps } from './DetailsPage';
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
index ac4760ab..74623820 100644
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
+++ b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
@@ -14,7 +14,7 @@ type Tab = {
   ariaLabel: string;
 };
 
-type WithRouterProps = {
+export type WithRouterProps = {
   /** URL parameters */
   params?: Record<string, string>;
   /** Navigate function */
diff --git a/packages/lib-utils/src/components/horizontal-nav/index.ts b/packages/lib-utils/src/components/horizontal-nav/index.ts
index e9568029..bc315850 100644
--- a/packages/lib-utils/src/components/horizontal-nav/index.ts
+++ b/packages/lib-utils/src/components/horizontal-nav/index.ts
@@ -4,4 +4,5 @@ export {
   Tab,
   HorizontalNavProps,
   withRouter,
+  WithRouterProps,
 } from './HorizontalNav';

From cfb2f849a651c882dc001ee7f7cd99d959edf9ef Mon Sep 17 00:00:00 2001
From: Bryan Florkiewicz <bflorkie@redhat.com>
Date: Fri, 27 Jan 2023 12:12:00 -0500
Subject: [PATCH 12/17] Pull AnyObject and EitherNotBoth helpers from monorepo
 common

---
 .../src/components/details-page-header/utils/ActionMenu.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
index 82e24c0d..c7a05cec 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -1,4 +1,4 @@
-import type { EitherNotBoth } from '@openshift/dynamic-plugin-sdk';
+import type { EitherNotBoth } from '@monorepo/common';
 import {
   Dropdown,
   DropdownPosition,

From 59fd2c1ebaf991a782303cd88cb13c9269b25c9e Mon Sep 17 00:00:00 2001
From: Bryan Florkiewicz <bflorkie@redhat.com>
Date: Fri, 27 Jan 2023 15:17:50 -0500
Subject: [PATCH 13/17] Revert "Merge pull request #196 from
 florkbr/update-lib-utils-to-use-monorepo-common"

This reverts commit a406b8675ec8f3181848452985a1d4d66da903dd, reversing
changes made to 364a2d740a5daa1c5528af118e7fd3d4dff64ba7.
---
 .../src/components/details-page-header/utils/ActionMenu.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
index c7a05cec..82e24c0d 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -1,4 +1,4 @@
-import type { EitherNotBoth } from '@monorepo/common';
+import type { EitherNotBoth } from '@openshift/dynamic-plugin-sdk';
 import {
   Dropdown,
   DropdownPosition,

From 0b8b5f108a69e6ddf91c4f7b85e354217a21591b Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Wed, 5 Apr 2023 17:35:14 +0200
Subject: [PATCH 14/17] Support CommonJS build for all dist packages

---
 .../details-page-header/DetailsPageHeader.tsx          | 10 +++++-----
 .../details-page-header/utils/ActionButtons.tsx        |  6 +++---
 .../details-page-header/utils/ActionMenu.tsx           |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
index 481ac59d..84a80e3a 100644
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
+++ b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
@@ -7,7 +7,7 @@ import {
   Label,
   DropdownPosition,
 } from '@patternfly/react-core';
-import * as _ from 'lodash-es';
+import { isEmpty } from 'lodash';
 import React from 'react';
 import type { K8sResourceCommon } from '../../types/k8s';
 import type { BreadcrumbProp, ActionButtonProp, ActionMenuProps } from './utils';
@@ -59,7 +59,7 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
       </Split>
       <Split hasGutter className="pf-u-mb-sm pf-u-mr-sm">
         {/** Icon for details page heading (before title) */}
-        {pageHeading && !_.isEmpty(pageHeading?.iconBeforeTitle) && (
+        {pageHeading && !isEmpty(pageHeading?.iconBeforeTitle) && (
           <SplitItem className="pf-u-mt-auto pf-u-mb-auto">
             {pageHeading?.iconBeforeTitle}
           </SplitItem>
@@ -73,11 +73,11 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
           </SplitItem>
         )}
         {/** Icon for details page heading (after title) */}
-        {pageHeading && !_.isEmpty(pageHeading?.iconAfterTitle) && (
+        {pageHeading && !isEmpty(pageHeading?.iconAfterTitle) && (
           <SplitItem className="pf-u-mt-auto pf-u-mb-auto">{pageHeading?.iconAfterTitle}</SplitItem>
         )}
         {/* Optional details page heading label */}
-        {!_.isEmpty(pageHeading) && !_.isEmpty(pageHeading?.label) && (
+        {!isEmpty(pageHeading) && !isEmpty(pageHeading?.label) && (
           <SplitItem>
             <Label
               href={pageHeading?.label?.href}
@@ -91,7 +91,7 @@ export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
         )}
         <SplitItem isFilled />
         {/* Optional action buttons */}
-        {!_.isEmpty(actionButtons) && Array.isArray(actionButtons) && (
+        {!isEmpty(actionButtons) && Array.isArray(actionButtons) && (
           <SplitItem>
             <ActionButtons actionButtons={actionButtons} />
           </SplitItem>
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
index 3cf645c6..b84109f6 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
@@ -1,5 +1,5 @@
 import { Button, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
-import * as _ from 'lodash-es';
+import { isEmpty, map } from 'lodash';
 import React from 'react';
 
 export type ActionButtonProp = {
@@ -42,8 +42,8 @@ const ActionButton: React.FC<ActionButtonProp> = ({
 
 export const ActionButtons: React.SFC<ActionButtonsProps> = ({ actionButtons }) => (
   <Flex>
-    {_.map(actionButtons, (actionButton, i) => {
-      if (!_.isEmpty(actionButton)) {
+    {map(actionButtons, (actionButton, i) => {
+      if (!isEmpty(actionButton)) {
         return (
           <FlexItem key={actionButton.id || i}>
             <ActionButton
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
index 82e24c0d..14d30c93 100644
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
+++ b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
@@ -8,7 +8,7 @@ import {
   DropdownItem,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import * as _ from 'lodash-es';
+import { isEmpty } from 'lodash';
 import React from 'react';
 import './ActionMenu.css';
 
@@ -82,7 +82,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   const [dropdownActionItems, setDropdownActionItems] = React.useState<any[]>([]);
 
   React.useEffect(() => {
-    if (!_.isEmpty(groupedActions)) {
+    if (!isEmpty(groupedActions)) {
       setIsGrouped(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -138,12 +138,12 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
 
   React.useEffect(() => {
     let ddActionItems: JSX.Element[] = [];
-    if (!_.isEmpty(actions)) {
+    if (!isEmpty(actions)) {
       ddActionItems = actions.map((action: Action) => {
         return dropdownActionItem(action as Action);
       });
     }
-    if (!_.isEmpty(groupedActions)) {
+    if (!isEmpty(groupedActions)) {
       ddActionItems = groupedActions.map((action: GroupedActions) => {
         // Grouped Actions
         return (

From a4a701b7722a48e833086fe06ae987d3b976e669 Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Wed, 19 Apr 2023 12:22:18 -0400
Subject: [PATCH 15/17] Reorganize files to match new repo

---
 .../DetailsPageHeader.stories.tsx             | 112 --------------
 .../utils/ActionButtons.stories.tsx           |  38 -----
 .../utils/ActionMenu.stories.tsx              | 114 --------------
 .../utils/Breadcrumbs.stories.tsx             |  47 ------
 .../details-page/DetailsPage.stories.tsx      | 144 ------------------
 .../horizontal-nav/HorizontalNav.stories.tsx  |  68 ---------
 .../src/DetailsPage}/DetailsPage.tsx          |   0
 .../src/DetailsPage}/index.ts                 |   0
 .../DetailsPageHeader.test.tsx                |   0
 .../DetailsPageHeader}/DetailsPageHeader.tsx  |   0
 .../src/DetailsPageHeader}/index.ts           |   0
 .../utils/ActionButtons.test.tsx              |   0
 .../utils/ActionButtons.tsx                   |   0
 .../DetailsPageHeader}/utils/ActionMenu.css   |   0
 .../utils/ActionMenu.test.tsx                 |   0
 .../DetailsPageHeader}/utils/ActionMenu.tsx   |   0
 .../utils/Breadcrumbs.test.tsx                |   0
 .../DetailsPageHeader}/utils/Breadcrumbs.tsx  |   0
 .../src/DetailsPageHeader}/utils/index.ts     |   0
 .../src/HorizontalNav}/HorizontalNav.test.tsx |   0
 .../src/HorizontalNav}/HorizontalNav.tsx      |   0
 .../src/HorizontalNav}/index.ts               |   0
 22 files changed, 523 deletions(-)
 delete mode 100644 packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
 delete mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
 delete mode 100644 packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
 delete mode 100644 packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
 delete mode 100644 packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
 delete mode 100644 packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
 rename packages/{lib-utils/src/components/details-page => module/src/DetailsPage}/DetailsPage.tsx (100%)
 rename packages/{lib-utils/src/components/details-page => module/src/DetailsPage}/index.ts (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/DetailsPageHeader.test.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/DetailsPageHeader.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/index.ts (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/ActionButtons.test.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/ActionButtons.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/ActionMenu.css (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/ActionMenu.test.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/ActionMenu.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/Breadcrumbs.test.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/Breadcrumbs.tsx (100%)
 rename packages/{lib-utils/src/components/details-page-header => module/src/DetailsPageHeader}/utils/index.ts (100%)
 rename packages/{lib-utils/src/components/horizontal-nav => module/src/HorizontalNav}/HorizontalNav.test.tsx (100%)
 rename packages/{lib-utils/src/components/horizontal-nav => module/src/HorizontalNav}/HorizontalNav.tsx (100%)
 rename packages/{lib-utils/src/components/horizontal-nav => module/src/HorizontalNav}/index.ts (100%)

diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx b/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
deleted file mode 100644
index 6a7babd1..00000000
--- a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.stories.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { CheckCircleIcon, GithubIcon } from '@patternfly/react-icons';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
-import type { K8sResourceCommon } from '../../types/k8s';
-import { DetailsPageHeader } from './DetailsPageHeader';
-
-const meta: ComponentMeta<typeof DetailsPageHeader> = {
-  title: 'DetailsPageHeader',
-  component: DetailsPageHeader,
-  argTypes: {},
-};
-
-export default meta;
-
-const DetailsPageHeaderTemplate: ComponentStory<typeof DetailsPageHeader> = (args) => {
-  return (
-    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
-      <Routes>
-        <Route element={<DetailsPageHeader {...args} />} path="/workspaces/demo-workspace" />
-        <Route
-          element={
-            <div>
-              <p>Workspaces List Page</p>
-              <button type="button">
-                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
-              </button>
-            </div>
-          }
-          path="/workspaces"
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-export const Primary = DetailsPageHeaderTemplate.bind({});
-
-const mockWorkspace: K8sResourceCommon = {
-  apiVersion: 'v1beta1',
-  apiGroup: 'tenancy.kcp.dev',
-  kind: 'Workspace',
-  metadata: {
-    name: 'demo-workspace',
-    labels: {
-      label1: 'value1',
-      label2: 'value2',
-    },
-  },
-};
-
-Primary.args = {
-  breadcrumbs: [
-    { name: 'Workspaces', path: '/workspaces' },
-    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
-  ],
-  obj: mockWorkspace,
-  pageHeading: {
-    label: {
-      name: 'Ready',
-      icon: <CheckCircleIcon color="#3E8635" />,
-    },
-    iconAfterTitle: <GithubIcon color="#0066CC" />,
-  },
-  actionButtons: [
-    {
-      label: 'Test',
-      callback: (event: React.MouseEvent) => {
-        // eslint-disable-next-line no-console
-        console.log('Test Action', event);
-      },
-    },
-  ],
-  actionMenu: {
-    actions: [
-      {
-        id: '1',
-        label: 'Edit Action',
-        cta: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-            // eslint-disable-next-line no-console
-            console.log('Edit Action', event);
-          },
-        },
-        tooltip: 'Sample tooltip',
-      },
-      {
-        id: '2',
-        label: 'Delete Action',
-        cta: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-            // eslint-disable-next-line no-console
-            console.log('Delete Action', event);
-          },
-        },
-        isDisabled: true,
-      },
-      {
-        id: 'Link1',
-        label: 'External Link',
-        cta: {
-          href: 'https://github.com/',
-          external: true,
-        },
-      },
-    ],
-    isDisabled: false,
-  },
-};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
deleted file mode 100644
index 3e1ad6c1..00000000
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { ActionButtons } from './ActionButtons';
-
-const meta: ComponentMeta<typeof ActionButtons> = {
-  title: 'ActionButtons',
-  component: ActionButtons,
-  argTypes: {},
-};
-
-export default meta;
-
-const ActionButtonsTemplate: ComponentStory<typeof ActionButtons> = (args) => {
-  return <ActionButtons {...args} />;
-};
-
-export const Actions = ActionButtonsTemplate.bind({});
-
-Actions.args = {
-  actionButtons: [
-    {
-      label: 'Edit Workspace',
-      callback: (event: React.MouseEvent) => {
-        // eslint-disable-next-line no-console
-        console.log('Edit Workspace', event);
-      },
-    },
-    {
-      label: 'Delete Workspace',
-      callback: (event: React.MouseEvent) => {
-        // eslint-disable-next-line no-console
-        console.log('Delete Workspace', event);
-      },
-      isDisabled: true,
-    },
-  ],
-};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
deleted file mode 100644
index 10d0039c..00000000
--- a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { DropdownPosition } from '@patternfly/react-core';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { ActionMenu, ActionMenuVariant } from './ActionMenu';
-
-const meta: ComponentMeta<typeof ActionMenu> = {
-  title: 'ActionMenu',
-  component: ActionMenu,
-  argTypes: { groupedActions: { control: 'object' } },
-};
-
-export default meta;
-
-const ActionMenuTemplate: ComponentStory<typeof ActionMenu> = (args) => {
-  return <ActionMenu {...args} />;
-};
-
-export const Actions = ActionMenuTemplate.bind({});
-
-Actions.args = {
-  actions: [
-    {
-      id: '1',
-      label: 'Edit Action',
-      cta: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-          // eslint-disable-next-line no-console
-          console.log('Edit Action', event);
-        },
-      },
-      tooltip: 'Sample tooltip',
-    },
-    {
-      id: '2',
-      label: 'Delete Action',
-      cta: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-          // eslint-disable-next-line no-console
-          console.log('Delete Action', event);
-        },
-      },
-      isDisabled: true,
-    },
-  ],
-  isDisabled: false,
-  position: DropdownPosition.left,
-};
-
-export const GroupedActions = ActionMenuTemplate.bind({});
-
-GroupedActions.args = {
-  groupedActions: [
-    {
-      groupId: 'group1',
-      groupActions: [
-        {
-          id: '1',
-          label: 'Edit Action',
-          cta: {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-              // eslint-disable-next-line no-console
-              console.log('Edit Action', event);
-            },
-          },
-          tooltip: 'Sample tooltip',
-        },
-        {
-          id: '2',
-          label: 'Delete Action',
-          cta: {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-              // eslint-disable-next-line no-console
-              console.log('Delete Action', event);
-            },
-          },
-          isDisabled: true,
-        },
-      ],
-    },
-    {
-      groupId: 'group2',
-      groupLabel: 'Group2',
-      groupActions: [
-        {
-          id: 'Link1',
-          label: 'External Link',
-          cta: {
-            href: 'https://github.com/',
-            external: true,
-          },
-        },
-        {
-          id: 'Link2',
-          label: 'Link',
-          cta: {
-            href: '/#',
-            external: false,
-          },
-          tooltip: 'Link',
-          description: 'Sample description',
-        },
-      ],
-    },
-  ],
-  variant: ActionMenuVariant.DROPDOWN,
-  label: 'Grouped Actions',
-  position: DropdownPosition.left,
-  displayLabelBeforeIcon: true,
-};
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx b/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
deleted file mode 100644
index 5f9ab4a5..00000000
--- a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
-import type { BreadcrumbProp } from './Breadcrumbs';
-import { Breadcrumbs } from './Breadcrumbs';
-
-const meta: ComponentMeta<typeof Breadcrumbs> = {
-  title: 'Breadcrumbs',
-  component: Breadcrumbs,
-  argTypes: {},
-};
-
-export default meta;
-
-const BreadcrumbsTemplate: ComponentStory<typeof Breadcrumbs> = (args) => {
-  return (
-    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
-      <Routes>
-        <Route element={<Breadcrumbs {...args} />} path="/workspaces/demo-workspace" />
-        <Route
-          element={
-            <div>
-              <p>Workspaces List Page</p>
-              <button type="button">
-                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
-              </button>
-            </div>
-          }
-          path="/workspaces"
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-export const Primary = BreadcrumbsTemplate.bind({});
-
-// Define tabs
-const breadcrumbs: BreadcrumbProp[] = [
-  { name: 'Workspaces', path: '/workspaces' },
-  { name: 'Workspace details', path: '/workspaces/demo-workspace' },
-];
-
-Primary.args = {
-  breadcrumbs,
-};
diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx b/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
deleted file mode 100644
index 92422c29..00000000
--- a/packages/lib-utils/src/components/details-page/DetailsPage.stories.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
-import { CheckCircleIcon } from '@patternfly/react-icons';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
-import type { K8sResourceCommon } from '../../types/k8s';
-import { OverviewPage } from '../resource-summary';
-import { DetailsPage } from './DetailsPage';
-
-const meta: ComponentMeta<typeof DetailsPage> = {
-  title: 'DetailsPage',
-  component: DetailsPage,
-  argTypes: {},
-};
-
-export default meta;
-
-const DetailsPageTemplate: ComponentStory<typeof DetailsPage> = (args) => {
-  return (
-    <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
-      <Routes>
-        <Route element={<DetailsPage {...args} />} path="/workspaces/demo-workspace" />
-        <Route element={<DetailsPage {...args} />} path="/workspaces/demo-workspace/:selectedTab" />
-        <Route
-          element={
-            <div>
-              <p>Workspaces List Page</p>
-              <a href="/workspaces" type="button">
-                <Link to="/workspaces/demo-workspace">Demo Workspace</Link>
-              </a>
-            </div>
-          }
-          path="/workspaces"
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-export const Primary = DetailsPageTemplate.bind({});
-
-const mockWorkspace: K8sResourceCommon = {
-  apiVersion: 'v1beta1',
-  apiGroup: 'tenancy.kcp.dev',
-  kind: 'Workspace',
-  metadata: {
-    name: 'demo-workspace',
-    labels: {
-      label1: 'value1',
-      label2: 'value2',
-    },
-    creationTimestamp: '2022-09-15T21:07:32Z',
-  },
-};
-
-export const PlaceholderComponent: React.FC<{ value: string }> = ({ value }) => (
-  <TextContent>
-    <Text component={TextVariants.h3}>{value}</Text>
-  </TextContent>
-);
-
-Primary.args = {
-  ariaLabel: 'Workspace details',
-  tabs: [
-    {
-      key: 'overview',
-      title: 'Overview',
-      content: (
-        <OverviewPage resource={mockWorkspace} rightColumn={<>Right column content</>}>
-          <span>Additional content</span>
-        </OverviewPage>
-      ),
-      ariaLabel: 'Overview',
-    },
-    {
-      key: 'applications',
-      title: 'Applications',
-      content: <PlaceholderComponent value="Applications" />,
-      ariaLabel: 'applications',
-    },
-    {
-      key: 'environments',
-      title: 'Environments',
-      content: <PlaceholderComponent value="Environments" />,
-      ariaLabel: 'Environments',
-    },
-    {
-      key: 'apis',
-      title: 'APIs',
-      content: <PlaceholderComponent value="APIs" />,
-      ariaLabel: 'APIs',
-    },
-  ],
-  breadcrumbs: [
-    { name: 'Workspaces', path: '/workspaces' },
-    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
-  ],
-  obj: mockWorkspace,
-  pageHeading: {
-    label: {
-      name: 'Ready',
-      icon: <CheckCircleIcon color="#3E8635" />,
-    },
-  },
-  actionButtons: [
-    {
-      label: 'Download kubeconfig',
-      callback: (event: React.MouseEvent) => {
-        // eslint-disable-next-line no-console
-        console.log('Test Action', event);
-      },
-    },
-  ],
-  actionMenu: {
-    actions: [
-      {
-        id: '1',
-        label: 'Edit workspace',
-        cta: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-            // eslint-disable-next-line no-console
-            console.log('Edit workspace', event);
-          },
-        },
-      },
-      {
-        id: '2',
-        label: 'Delete workspace',
-        cta: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
-            // eslint-disable-next-line no-console
-            console.log('Delete workspace', event);
-          },
-        },
-        isDisabled: true,
-        tooltip: 'Sample tooltip',
-      },
-    ],
-    isDisabled: false,
-  },
-};
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx b/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
deleted file mode 100644
index 0bf7adf3..00000000
--- a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { withRouter } from 'storybook-addon-react-router-v6';
-import type { Tab } from './HorizontalNav';
-import { HorizontalNav } from './HorizontalNav';
-
-const meta: ComponentMeta<typeof HorizontalNav> = {
-  title: 'HorizontalNav',
-  component: HorizontalNav,
-  decorators: [withRouter],
-  parameters: {
-    reactRouter: {
-      routePath: '/testNav/:selectedTab',
-      routeParams: { selectedTab: 'Containers' },
-    },
-  },
-  argTypes: {},
-};
-
-export default meta;
-
-const TemplateWithRouter: ComponentStory<typeof HorizontalNav> = (args) => {
-  return <HorizontalNav {...args} />;
-};
-
-export const Primary = TemplateWithRouter.bind({});
-
-// Sample content components for tabs
-const BaseContent: React.FC<{ content: string }> = ({ content }) => {
-  return (
-    <Card style={{ minHeight: '20em' }}>
-      <CardTitle>{content}</CardTitle>
-      <CardBody>Sample content</CardBody>
-    </Card>
-  );
-};
-
-const UsersTabContent: React.FC = () => {
-  return <BaseContent content="Users Tab Content" />;
-};
-
-const ContainersTabContent: React.FC = () => {
-  return <BaseContent content="Containers Tab Content" />;
-};
-
-const DatabaseTabContent: React.FC = () => {
-  return <BaseContent content="Database Tab Content" />;
-};
-
-// Define tabs
-const tabs: Tab[] = [
-  { key: 'Users', title: 'Users', content: <UsersTabContent />, ariaLabel: 'Users' },
-  {
-    key: 'Containers',
-    title: 'Containers',
-    content: <ContainersTabContent />,
-    ariaLabel: 'Containers',
-  },
-  { key: 'Database', title: 'Database', content: <DatabaseTabContent />, ariaLabel: 'Database' },
-];
-const ariaLabel = 'Sample tabs';
-
-Primary.args = {
-  ariaLabel,
-  tabs,
-};
diff --git a/packages/lib-utils/src/components/details-page/DetailsPage.tsx b/packages/module/src/DetailsPage/DetailsPage.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page/DetailsPage.tsx
rename to packages/module/src/DetailsPage/DetailsPage.tsx
diff --git a/packages/lib-utils/src/components/details-page/index.ts b/packages/module/src/DetailsPage/index.ts
similarity index 100%
rename from packages/lib-utils/src/components/details-page/index.ts
rename to packages/module/src/DetailsPage/index.ts
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/DetailsPageHeader.test.tsx
rename to packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/DetailsPageHeader.tsx
rename to packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/index.ts b/packages/module/src/DetailsPageHeader/index.ts
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/index.ts
rename to packages/module/src/DetailsPageHeader/index.ts
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx b/packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/ActionButtons.test.tsx
rename to packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx b/packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/ActionButtons.tsx
rename to packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css b/packages/module/src/DetailsPageHeader/utils/ActionMenu.css
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/ActionMenu.css
rename to packages/module/src/DetailsPageHeader/utils/ActionMenu.css
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/ActionMenu.test.tsx
rename to packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/ActionMenu.tsx
rename to packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.test.tsx
rename to packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/Breadcrumbs.tsx
rename to packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx
diff --git a/packages/lib-utils/src/components/details-page-header/utils/index.ts b/packages/module/src/DetailsPageHeader/utils/index.ts
similarity index 100%
rename from packages/lib-utils/src/components/details-page-header/utils/index.ts
rename to packages/module/src/DetailsPageHeader/utils/index.ts
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx b/packages/module/src/HorizontalNav/HorizontalNav.test.tsx
similarity index 100%
rename from packages/lib-utils/src/components/horizontal-nav/HorizontalNav.test.tsx
rename to packages/module/src/HorizontalNav/HorizontalNav.test.tsx
diff --git a/packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx b/packages/module/src/HorizontalNav/HorizontalNav.tsx
similarity index 100%
rename from packages/lib-utils/src/components/horizontal-nav/HorizontalNav.tsx
rename to packages/module/src/HorizontalNav/HorizontalNav.tsx
diff --git a/packages/lib-utils/src/components/horizontal-nav/index.ts b/packages/module/src/HorizontalNav/index.ts
similarity index 100%
rename from packages/lib-utils/src/components/horizontal-nav/index.ts
rename to packages/module/src/HorizontalNav/index.ts

From 2afcb155abcae498318bbba753f219009766f3f7 Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Wed, 19 Apr 2023 13:46:41 -0400
Subject: [PATCH 16/17] Refactor for docs

---
 package-lock.json                             |  83 +++++--
 packages/module/package.json                  |   8 +-
 packages/module/patternfly-a11y.config.js     |   2 +-
 .../examples/ActionButtonsExample.tsx         |  21 ++
 .../examples/ActionMenuExample.tsx            |  27 +++
 .../examples/ActionMenuGroupedExample.tsx     |  55 +++++
 .../examples/BreadcrumbsExample.tsx           |  14 ++
 .../examples/DetailsPage.md                   |  82 +++++++
 .../examples/DetailsPageExample.tsx           |  59 +++++
 .../examples/DetailsPageHeaderExample.tsx     |  55 +++++
 .../examples/HorizontalNavExample.tsx         |  11 +
 .../module/src/DetailsPage/DetailsPage.tsx    |  43 ++--
 packages/module/src/DetailsPage/index.ts      |   2 +-
 .../DetailsPageHeader.test.tsx                |  52 ++---
 .../DetailsPageHeader/DetailsPageHeader.tsx   | 215 ++++++++++--------
 .../module/src/DetailsPageHeader/index.ts     |  13 +-
 .../DetailsPageHeader/utils/ActionButton.tsx  |  36 +++
 .../utils/ActionButtons.test.tsx              |  18 +-
 .../DetailsPageHeader/utils/ActionButtons.tsx |  77 ++-----
 .../DetailsPageHeader/utils/ActionMenu.css    |  12 -
 .../utils/ActionMenu.test.tsx                 |  37 ++-
 .../DetailsPageHeader/utils/ActionMenu.tsx    | 161 ++++++-------
 .../utils/Breadcrumbs.test.tsx                |  21 +-
 .../DetailsPageHeader/utils/Breadcrumbs.tsx   |  72 +++---
 .../src/DetailsPageHeader/utils/index.ts      |  15 +-
 .../src/HorizontalNav/HorizontalNav.test.tsx  |  52 +----
 .../src/HorizontalNav/HorizontalNav.tsx       |  84 +++----
 packages/module/src/HorizontalNav/index.ts    |   9 +-
 packages/module/src/index.ts                  |   3 +
 29 files changed, 826 insertions(+), 513 deletions(-)
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionButtonsExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuGroupedExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/BreadcrumbsExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageHeaderExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/extended-components/examples/HorizontalNavExample.tsx
 create mode 100644 packages/module/src/DetailsPageHeader/utils/ActionButton.tsx
 delete mode 100644 packages/module/src/DetailsPageHeader/utils/ActionMenu.css

diff --git a/package-lock.json b/package-lock.json
index a49d3324..5db571e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3740,10 +3740,9 @@
       }
     },
     "node_modules/@patternfly/react-icons": {
-      "version": "4.92.6",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.92.6.tgz",
-      "integrity": "sha512-UdMSDqJ7fCxi/E6vlsFHuDZ3L0+kqBZ4ujRi4mjokrsvzOR4WFdaMhC+7iRy4aPNjT0DpHVjVUUUoWwKID9VqA==",
-      "license": "MIT",
+      "version": "4.93.6",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.6.tgz",
+      "integrity": "sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==",
       "peerDependencies": {
         "react": "^16.8 || ^17 || ^18",
         "react-dom": "^16.8 || ^17 || ^18"
@@ -3863,7 +3862,6 @@
       "version": "1.2.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -4348,6 +4346,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "dev": true,
@@ -4531,6 +4535,27 @@
         "@types/react": "^17"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -22295,7 +22320,6 @@
       "version": "6.6.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@remix-run/router": "1.2.1"
       },
@@ -22310,7 +22334,6 @@
       "version": "6.6.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@remix-run/router": "1.2.1",
         "react-router": "6.6.1"
@@ -29946,6 +29969,7 @@
       "license": "MIT",
       "dependencies": {
         "@patternfly/react-core": "^4.250.1",
+        "@patternfly/react-icons": "^4.93.6",
         "react-jss": "^10.9.2"
       },
       "devDependencies": {
@@ -29958,10 +29982,13 @@
         "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
+        "@types/react-router-dom": "^5.3.3",
         "classnames": "^2.2.5",
         "copyfiles": "^2.4.1",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
+        "react-router": "^6.3.0",
+        "react-router-dom": "^6.3.0",
         "rimraf": "^2.6.2",
         "typescript": "^4.9.5"
       },
@@ -32506,16 +32533,20 @@
         "@patternfly/patternfly-a11y": "4.3.1",
         "@patternfly/react-code-editor": "^4.82.26",
         "@patternfly/react-core": "^4.250.1",
+        "@patternfly/react-icons": "^4.93.6",
         "@patternfly/react-table": "^4.111.4",
         "@reach/router": "1.3.4",
         "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
+        "@types/react-router-dom": "^5.3.3",
         "classnames": "^2.2.5",
         "copyfiles": "^2.4.1",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-jss": "^10.9.2",
+        "react-router": "^6.3.0",
+        "react-router-dom": "^6.3.0",
         "rimraf": "^2.6.2",
         "typescript": "^4.9.5"
       },
@@ -32546,9 +32577,9 @@
       }
     },
     "@patternfly/react-icons": {
-      "version": "4.92.6",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.92.6.tgz",
-      "integrity": "sha512-UdMSDqJ7fCxi/E6vlsFHuDZ3L0+kqBZ4ujRi4mjokrsvzOR4WFdaMhC+7iRy4aPNjT0DpHVjVUUUoWwKID9VqA==",
+      "version": "4.93.6",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.6.tgz",
+      "integrity": "sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==",
       "requires": {}
     },
     "@patternfly/react-styles": {
@@ -32638,8 +32669,7 @@
     },
     "@remix-run/router": {
       "version": "1.2.1",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@sentry/browser": {
       "version": "5.30.0",
@@ -33012,6 +33042,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "dev": true,
@@ -33168,6 +33204,27 @@
         "@types/react": "^17"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -46019,7 +46076,6 @@
     "react-router": {
       "version": "6.6.1",
       "dev": true,
-      "peer": true,
       "requires": {
         "@remix-run/router": "1.2.1"
       }
@@ -46027,7 +46083,6 @@
     "react-router-dom": {
       "version": "6.6.1",
       "dev": true,
-      "peer": true,
       "requires": {
         "@remix-run/router": "1.2.1",
         "react-router": "6.6.1"
diff --git a/packages/module/package.json b/packages/module/package.json
index df436a22..ed7cc22e 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -13,8 +13,8 @@
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
-    "docs:serve": "pf-docs-framework serve public --port 5000",
-    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "docs:serve": "pf-docs-framework serve public --port 5001",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
     "serve:a11y": "serve coverage"
   },
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@patternfly/react-core": "^4.250.1",
+    "@patternfly/react-icons": "^4.93.6",
     "react-jss": "^10.9.2"
   },
   "peerDependencies": {
@@ -47,10 +48,13 @@
     "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.2.5",
     "copyfiles": "^2.4.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "rimraf": "^2.6.2",
     "typescript": "^4.9.5"
   }
diff --git a/packages/module/patternfly-a11y.config.js b/packages/module/patternfly-a11y.config.js
index 6f274da3..9688ce62 100644
--- a/packages/module/patternfly-a11y.config.js
+++ b/packages/module/patternfly-a11y.config.js
@@ -14,7 +14,7 @@ const urls = Object.keys(fullscreenRoutes)
   .reduce((result, item) => (result.includes(item) ? result : [ ...result, item ]), []);
 
 module.exports = {
-  prefix: 'http://localhost:5000',
+  prefix: 'http://localhost:5001',
   waitFor,
   crawl: false,
   urls: [ ...urls ],
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionButtonsExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionButtonsExample.tsx
new file mode 100644
index 00000000..99aff855
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionButtonsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ActionButtons } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ActionButtons
+    actionButtons={[
+      {
+        children: 'Primary action',
+        // eslint-disable-next-line no-console
+        onClick: () => {console.log('Primary action clicked')},
+        tooltip: 'Click me!',
+      },
+      {
+        children: 'Secondary action',
+        // eslint-disable-next-line no-console
+        onClick:  () => {console.log('Secondary action clicked')},
+        variant: 'secondary',
+      },
+    ]}
+  />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuExample.tsx
new file mode 100644
index 00000000..b2ca1e4c
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ActionMenu } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FC = () => (
+  <ActionMenu
+    actions={[
+      {
+        children: 'Edit resource',
+        itemID: 'action-menu-example-1',
+        cta: {
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Edit resource clicked'),
+        },
+      },
+      {
+        children: 'Delete resource',
+        itemID: 'action-menu-example-2',
+        cta: {
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Delete resource clicked'),
+        },
+        isDisabled: true,
+      },
+    ]}
+    id='action-menu-example'
+  />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuGroupedExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuGroupedExample.tsx
new file mode 100644
index 00000000..f806c489
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/ActionMenuGroupedExample.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { ActionMenu } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ActionMenu
+    groupedActions={[
+      {
+        groupId: 'group1',
+        groupActions: [
+          {
+            children: 'Edit resource',
+            itemID: 'action-menu-grouped-group-1-example-1',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Edit resource clicked'),
+            },
+          },
+          {
+            children: 'Delete resource',
+            itemID: 'action-menu-grouped-group-1-example-2',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Delete resource clicked'),
+            },
+            isDisabled: true,
+          },
+        ],
+      },
+      {
+        groupId: 'group2',
+        label: 'Links',
+        groupActions: [
+          {
+            children: 'GitHub',
+            itemID: 'action-menu-grouped-group-2-example-1',
+            cta: {
+              href: 'https://github.com/',
+              external: true,
+            },
+          },
+          {
+            children: 'Link',
+            itemID: 'action-menu-grouped-group-2-example-2',
+            cta: {
+              href: '/#',
+            },
+            description: 'Description of link',
+          },
+        ],
+      },
+    ]}
+    displayLabelBeforeIcon
+    id='action-menu-grouped-example'
+  />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/BreadcrumbsExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/BreadcrumbsExample.tsx
new file mode 100644
index 00000000..034ece4f
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/BreadcrumbsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Breadcrumbs } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Router>
+    <Breadcrumbs
+      breadcrumbs={[
+        { children: 'Resources', to: '/resources' },
+        { children: 'Resource details', to: '/resources/example-resource' },
+      ]}
+    />
+  </Router>
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
new file mode 100644
index 00000000..76a80eea
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
@@ -0,0 +1,82 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: react-component-groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: DetailsPage
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: [
+  'DetailsPage', # No output --> see https://github.com/patternfly/patternfly-org/issues/3423
+  'DetailsPageHeader',
+  'PageHeading',
+  # 'PageHeadingLabel', # No output --> is a type and not an interface
+  'Breadcrumbs',
+  # 'Breadcrumb', # No output --> is a type and not an interface
+  'ActionButtons',
+  'ActionButton',  # Incomplete output --> see https://github.com/patternfly/patternfly-org/issues/3423
+  # 'ActionCTA', # No output --> is a type and not an interface
+  'ActionMenu',
+  'GroupedActionsProps', # Removing 'Props' breaks linking from ActionProps
+  'ActionProps',  # Removing 'Props' breaks output
+  'HorizontalNavProps', # Removing 'Props' breaks linking to TabProps
+  # 'Tab', # No output --> is a type and not an interface
+]
+---
+
+import { ActionButtons } from '@patternfly/react-component-groups';
+import { ActionMenu } from '@patternfly/react-component-groups';
+import { Breadcrumbs } from '@patternfly/react-component-groups';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+import { DetailsPage } from'@patternfly/react-component-groups';
+import { DetailsPageHeader } from'@patternfly/react-component-groups';
+import { HorizontalNav } from '@patternfly/react-component-groups';
+
+## Components Usage
+
+### DetailsPage Component
+
+```js file="./DetailsPageExample.tsx"
+
+```
+
+### DetailsPageHeader Component
+
+```js file="./DetailsPageHeaderExample.tsx"
+
+```
+
+### Breadcrumbs Component
+
+```js file="./BreadcrumbsExample.tsx"
+
+```
+
+### ActionButtons Component
+
+```js file="./ActionButtonsExample.tsx"
+
+```
+
+### ActionMenu Component
+
+```js file="./ActionMenuExample.tsx"
+
+```
+
+### ActionMenu with groupedActions Component
+
+```js file="./ActionMenuGroupedExample.tsx"
+
+```
+
+### HorizonalNav Component
+
+```js file="./HorizontalNavExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageExample.tsx
new file mode 100644
index 00000000..c25d927c
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageExample.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { DetailsPage } from '@patternfly/react-component-groups';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Router>
+    <DetailsPage
+      breadcrumbs={
+        [
+          { children: 'Resources', to: '/resources' },
+          { children: 'Resource details', to: '/resources/example-resource' },
+        ]
+      }
+      pageHeading={{
+        title: 'example-resource',
+        label: {
+          children: 'Ready',
+          icon: <CheckCircleIcon color="#3E8635" />,
+          isCompact: true,
+        },
+      }}
+      actionButtons={[
+        {
+          children: 'Primary action',
+          // eslint-disable-next-line no-console
+          onClick: () => console.log('Primary action clicked'),
+          tooltip: 'Click me!',
+        },
+      ]}
+      actionMenu={{
+        actions: [
+          {
+            children: 'Edit resource',
+            itemID: 'details-page-action-menu-example-1',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Edit resource clicked'),
+            },
+          },
+          {
+            children: 'Delete resource',
+            itemID: 'details-page-action-menu-example-2',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Delete resource clicked'),
+            },
+            isDisabled: true,
+          },
+        ],
+        id: 'details-page-action-menu-example'
+      }}
+      tabs={[
+        { eventKey: 'details', title: 'Details', children: <div>Details content</div> },
+        { eventKey: 'other', title: 'Other', children: <div>Other content</div> }
+      ]}
+    />
+  </Router>
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageHeaderExample.tsx
new file mode 100644
index 00000000..c24682c8
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPageHeaderExample.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { DetailsPageHeader } from '@patternfly/react-component-groups';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Router>
+    <DetailsPageHeader
+      breadcrumbs={
+        [
+          { children: 'Resources', to: '/resources' },
+          { children: 'Resource details', to: '/resources/example-resource' },
+        ]
+      }
+      pageHeading={{
+        title: 'example-resource',
+        label: {
+          children: 'Ready',
+          icon: <CheckCircleIcon color="#3E8635" />,
+          isCompact: true,
+        },
+      }}
+      actionButtons={[
+        {
+          children: 'Primary action',
+          // eslint-disable-next-line no-console
+          onClick: () => console.log('Primary action clicked'),
+          tooltip: 'Click me!',
+        },
+      ]}
+      actionMenu={{
+        actions: [
+          {
+            children: 'Edit resource',
+            itemID: 'details-page-header-action-menu-example-1',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Edit resource clicked'),
+            },
+          },
+          {
+            children: 'Delete resource',
+            itemID: 'details-page-header-action-menu-example-2',
+            cta: {
+              // eslint-disable-next-line no-console
+              callback: () => console.log('Delete resource clicked'),
+            },
+            isDisabled: true,
+          },
+        ],
+        id: 'details-page-header-action-menu-example',
+      }}
+    />
+  </Router>
+);
diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/HorizontalNavExample.tsx b/packages/module/patternfly-docs/content/extensions/extended-components/examples/HorizontalNavExample.tsx
new file mode 100644
index 00000000..01e32124
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/HorizontalNavExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { HorizontalNav } from '@patternfly/react-component-groups';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <HorizontalNav
+    tabs={[
+      { eventKey: 'details', title: 'Details', children: <div>Details children</div> },
+      { eventKey: 'other', title: 'Other', children: <div>Other content</div> }
+    ]}
+  />
+);
diff --git a/packages/module/src/DetailsPage/DetailsPage.tsx b/packages/module/src/DetailsPage/DetailsPage.tsx
index 68e68975..f901c1d6 100644
--- a/packages/module/src/DetailsPage/DetailsPage.tsx
+++ b/packages/module/src/DetailsPage/DetailsPage.tsx
@@ -1,24 +1,27 @@
 import React from 'react';
-import type { DetailsPageHeaderProps } from '../details-page-header';
-import { DetailsPageHeader } from '../details-page-header';
-import type { HorizontalNavProps } from '../horizontal-nav';
-import { withRouter, HorizontalNav } from '../horizontal-nav';
+import { DetailsPageHeader, DetailsPageHeaderProps } from '../DetailsPageHeader';
+import { HorizontalNav, HorizontalNavProps } from '../HorizontalNav';
 
-export type DetailsPageProps = HorizontalNavProps & DetailsPageHeaderProps;
+export interface DetailsPageProps extends DetailsPageHeaderProps, HorizontalNavProps {};
 
-export const DetailsPage = withRouter<DetailsPageProps>(
-  ({ ariaLabel, tabs, breadcrumbs, actionButtons, actionMenu, pageHeading, obj }) => {
-    return (
-      <>
-        <DetailsPageHeader
-          breadcrumbs={breadcrumbs}
-          actionButtons={actionButtons}
-          actionMenu={actionMenu}
-          pageHeading={pageHeading}
-          obj={obj}
-        />
-        <HorizontalNav ariaLabel={ariaLabel} tabs={tabs} />
-      </>
-    );
-  },
+export const DetailsPage: React.FunctionComponent<DetailsPageProps> = ({
+  breadcrumbs,
+  actionButtons,
+  actionMenu,
+  pageHeading,
+  ariaLabel,
+  tabs,
+  location,
+  params,
+  navigate
+}: DetailsPageProps ) => (
+  <>
+    <DetailsPageHeader
+      breadcrumbs={breadcrumbs}
+      actionButtons={actionButtons}
+      actionMenu={actionMenu}
+      pageHeading={pageHeading}
+    />
+    <HorizontalNav ariaLabel={ariaLabel} tabs={tabs} location={location} params={params} navigate={navigate} />
+  </>
 );
diff --git a/packages/module/src/DetailsPage/index.ts b/packages/module/src/DetailsPage/index.ts
index 0f7d02b3..6dccefa0 100644
--- a/packages/module/src/DetailsPage/index.ts
+++ b/packages/module/src/DetailsPage/index.ts
@@ -1 +1 @@
-export { DetailsPage, DetailsPageProps } from './DetailsPage';
+export * from './DetailsPage';
diff --git a/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx
index 2acd666d..afb86d83 100644
--- a/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx
+++ b/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx
@@ -2,41 +2,42 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import type { DetailsPageHeaderProps } from './DetailsPageHeader';
-import { DetailsPageHeader } from './DetailsPageHeader';
+import { DetailsPageHeader, DetailsPageHeaderProps } from './DetailsPageHeader';
 
 const mockCallback = jest.fn();
 
 const mockProps: DetailsPageHeaderProps = {
   breadcrumbs: [
-    { name: 'Workspaces', path: '/workspaces' },
-    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+    { children: 'Resources', to: '/resources' },
+    { children: 'Resource details', to: '/resources/example-resource' },
   ],
   pageHeading: {
-    title: 'demo-workspace',
+    title: 'example-resource',
   },
   actionButtons: [
     {
-      label: 'Test Button',
-      callback: mockCallback,
+      children: 'Primary action',
+      onClick: mockCallback,
     },
   ],
   actionMenu: {
     actions: [
       {
-        id: '2',
-        label: 'Delete Action',
+        children: 'Edit resource',
+        itemID: 'details-page-header-action-menu-example-1',
         cta: {
-          callback: jest.fn(),
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Edit resource clicked'),
         },
-        isDisabled: true,
       },
       {
-        id: 'Link1',
-        label: 'Link1',
+        children: 'Delete resource',
+        itemID: 'details-page-header-action-menu-example-2',
         cta: {
-          href: '#',
+          // eslint-disable-next-line no-console
+          callback: () => console.log('Delete resource clicked'),
         },
+        isDisabled: true,
       },
     ],
     isDisabled: false,
@@ -44,10 +45,10 @@ const mockProps: DetailsPageHeaderProps = {
 };
 
 const detailsPageHeaderJSX = (args: DetailsPageHeaderProps) => (
-  <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+  <MemoryRouter initialEntries={[ '/resources/example-resource' ]}>
     <Routes>
-      <Route element={<DetailsPageHeader {...args} />} path="/workspaces/demo-workspace" />
-      <Route element={<div>Workspaces List Page</div>} path="/workspaces" />
+      <Route element={<DetailsPageHeader {...args} />} path="/resources/example-resource" />
+      <Route element={<div>Resource list page</div>} path="/resources" />
     </Routes>
   </MemoryRouter>
 );
@@ -57,12 +58,12 @@ describe('DetailsPageHeader', () => {
     render(detailsPageHeaderJSX(mockProps));
 
     // Breadcrumbs
-    expect(screen.getByText('Workspaces')).toBeVisible();
-    expect(screen.getByText('Workspace details')).toBeVisible();
+    expect(screen.getByText('Resources')).toBeVisible();
+    expect(screen.getByText('Resource details')).toBeVisible();
     // Page heading
-    expect(screen.getByText('demo-workspace')).toBeVisible();
+    expect(screen.getByText('example-resource')).toBeVisible();
     // Action buttons
-    expect(screen.getByText('Test Button')).toBeVisible();
+    expect(screen.getByText('Primary action')).toBeVisible();
     // Action menu
     expect(screen.getByText('Actions')).toBeVisible();
   });
@@ -71,20 +72,19 @@ describe('DetailsPageHeader', () => {
 
     // Click Workspaces link
     fireEvent.click(screen.getByTestId('breadcrumb-link-0'));
-    expect(screen.getByText('Workspaces List Page')).toBeVisible();
+    expect(screen.getByText('Resource list page')).toBeVisible();
   });
   test('Clicking on actions menu reveals menu options', () => {
     render(detailsPageHeaderJSX(mockProps));
 
     fireEvent.click(screen.getByText('Actions'));
-    expect(screen.getByText('Link1')).toBeVisible();
-    expect(screen.getByText('Delete Action')).toBeVisible();
-    expect(screen.getByText('Delete Action').closest('a')).toHaveAttribute('aria-disabled');
+    expect(screen.getByText('Edit resource')).toBeVisible();
+    expect(screen.getByText('Delete resource')).toBeVisible();
   });
   test('Action button triggers callback', () => {
     render(detailsPageHeaderJSX(mockProps));
 
-    fireEvent.click(screen.getByText('Test Button'));
+    fireEvent.click(screen.getByText('Primary action'));
     expect(mockCallback).toHaveBeenCalled();
   });
 });
diff --git a/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx
index 84a80e3a..97e99295 100644
--- a/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx
+++ b/packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx
@@ -1,125 +1,148 @@
 import {
+  Label,
+  LabelProps,
   Split,
   SplitItem,
-  TextContent,
   Text,
+  TextContent,
   TextVariants,
-  Label,
-  DropdownPosition,
 } from '@patternfly/react-core';
-import { isEmpty } from 'lodash';
 import React from 'react';
-import type { K8sResourceCommon } from '../../types/k8s';
-import type { BreadcrumbProp, ActionButtonProp, ActionMenuProps } from './utils';
-import { Breadcrumbs, ActionButtons, ActionMenu } from './utils';
-import '@patternfly/react-styles/css/utilities/Spacing/spacing.css';
+import { createUseStyles } from 'react-jss'
+import {
+  ActionButtonProps,
+  ActionButtons,
+  ActionMenu,
+  ActionMenuProps,
+  Breadcrumbs,
+  BreadcrumbProps
+} from './utils';
 
-export type PageHeading = {
-  /** Optional title for page heading */
-  title?: string;
-  /** Optional label for page heading */
-  label?: {
-    name: string;
-    key?: string;
-    icon?: React.ReactNode;
-    href?: string;
-    color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
-  };
+type PageHeadingLabelProps = Omit<
+  LabelProps,
+  'isEditable'|'editableProps'|'onEditComplete'|'onEditCancel'|'onClose'|'closeBtn'|'closeBtnAriaLabel'|'closeBtnProps'|'isOverflowLabel'
+>;
+
+export interface PageHeading {
+  /** Title for page heading */
+  title: string;
   /** Optional icon for page heading (appears to the left of the page heading's title) */
   iconBeforeTitle?: React.ReactNode;
   /** Optional icon for page heading (appears to the right of the page heading's title) */
   iconAfterTitle?: React.ReactNode;
+  /** Optional label for page heading */
+  label?: PageHeadingLabelProps;
 };
 
-export type DetailsPageHeaderProps = {
-  breadcrumbs: BreadcrumbProp[];
-  actionButtons?: ActionButtonProp[];
-  pageHeading?: PageHeading;
-  /** Optional resource object (if no title for the page heading is provided, the title can be taken from the resource's name) */
-  obj?: K8sResourceCommon;
+export interface DetailsPageHeaderProps {
+  /** Top content area of details page */
+  pageHeading: PageHeading;
+   /** Navigational item that provides page context to help users navigate more efficiently and understand where they are in the application hierarchy */
+  breadcrumbs?: BreadcrumbProps[];
+   /** One or more action buttons that appear to the right of the title */
+  actionButtons?: ActionButtonProps[];
+   /** Menu that appears to the right of the title */
   actionMenu?: ActionMenuProps;
 };
 
-export const DetailsPageHeader: React.SFC<DetailsPageHeaderProps> = ({
+const useStyles = createUseStyles({
+  detailsPageHeaderSplit: {
+    alignItems: 'center',
+  }
+});
+
+export const DetailsPageHeader: React.FunctionComponent<DetailsPageHeaderProps> = ({
   breadcrumbs,
   actionButtons,
   actionMenu,
   pageHeading,
-  obj,
-}) => {
-  const heading = pageHeading?.title ?? obj?.metadata?.name;
+}: DetailsPageHeaderProps) => {
+  const classes = useStyles();
   return (
     <>
-      <Split hasGutter className="pf-u-mb-sm">
-        {/* Breadcrumbs */}
-        <SplitItem>
+      {/* Optional breadcrumbs */}
+      {breadcrumbs && (
+        <div className="pf-u-mb-sm">
           <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </div>
+      )}
+      <Split hasGutter isWrappable className={classes.detailsPageHeaderSplit}>
+        <SplitItem>
+          <Split hasGutter isWrappable className={`pf-u-mb-sm ${classes.detailsPageHeaderSplit}`}>
+            {/* Optional icon for details page heading (before title) */}
+            {pageHeading?.iconBeforeTitle && (
+              <SplitItem>
+                {pageHeading.iconBeforeTitle}
+              </SplitItem>
+            )}
+            {/* Page heading title */}
+            <SplitItem>
+              <TextContent>
+                <Text component={TextVariants.h1}>{pageHeading.title}</Text>
+              </TextContent>
+            </SplitItem>
+            {/* Icon for details page heading (after title) */}
+            {pageHeading?.iconAfterTitle && (
+              <SplitItem>
+                {pageHeading.iconAfterTitle}
+              </SplitItem>
+            )}
+            {/* Optional details page label */}
+            {pageHeading?.label && (
+              <SplitItem>
+                <Label
+                  className={pageHeading.label?.className}
+                  color={pageHeading.label?.color}
+                  variant={pageHeading.label?.variant}
+                  isCompact={pageHeading.label?.isCompact}
+                  isTruncated={pageHeading.label?.isTruncated}
+                  tooltipPosition={pageHeading.label?.tooltipPosition}
+                  icon={pageHeading.label?.icon}
+                  href={pageHeading.label?.href}
+                  render={pageHeading.label?.render}
+                >
+                  {pageHeading.label.children}
+                </Label>
+              </SplitItem>
+            )}
+          </Split>
         </SplitItem>
         <SplitItem isFilled />
-      </Split>
-      <Split hasGutter className="pf-u-mb-sm pf-u-mr-sm">
-        {/** Icon for details page heading (before title) */}
-        {pageHeading && !isEmpty(pageHeading?.iconBeforeTitle) && (
-          <SplitItem className="pf-u-mt-auto pf-u-mb-auto">
-            {pageHeading?.iconBeforeTitle}
-          </SplitItem>
-        )}
-        {/* Details page heading */}
-        {heading && (
-          <SplitItem>
-            <TextContent>
-              <Text component={TextVariants.h1}>{heading}</Text>
-            </TextContent>
-          </SplitItem>
-        )}
-        {/** Icon for details page heading (after title) */}
-        {pageHeading && !isEmpty(pageHeading?.iconAfterTitle) && (
-          <SplitItem className="pf-u-mt-auto pf-u-mb-auto">{pageHeading?.iconAfterTitle}</SplitItem>
-        )}
-        {/* Optional details page heading label */}
-        {!isEmpty(pageHeading) && !isEmpty(pageHeading?.label) && (
-          <SplitItem>
-            <Label
-              href={pageHeading?.label?.href}
-              icon={pageHeading?.label?.icon}
-              color={pageHeading?.label?.color}
-              key={pageHeading?.label?.key ?? pageHeading?.label?.name}
-            >
-              {pageHeading?.label?.name}
-            </Label>
-          </SplitItem>
-        )}
-        <SplitItem isFilled />
-        {/* Optional action buttons */}
-        {!isEmpty(actionButtons) && Array.isArray(actionButtons) && (
-          <SplitItem>
-            <ActionButtons actionButtons={actionButtons} />
-          </SplitItem>
-        )}
-        {/* Optional action menu - ungrouped actions */}
-        {actionMenu && Array.isArray(actionMenu?.actions) && (
-          <SplitItem>
-            <ActionMenu
-              actions={actionMenu?.actions}
-              isDisabled={actionMenu?.isDisabled}
-              variant={actionMenu?.variant}
-              label={actionMenu?.label}
-              position={DropdownPosition.right}
-            />
-          </SplitItem>
-        )}
-        {/* Optional action menu - Grouped actions */}
-        {actionMenu && Array.isArray(actionMenu?.groupedActions) && (
-          <SplitItem>
-            <ActionMenu
-              groupedActions={actionMenu?.groupedActions}
-              isDisabled={actionMenu?.isDisabled}
-              variant={actionMenu?.variant}
-              label={actionMenu?.label}
-              position={DropdownPosition.right}
-            />
-          </SplitItem>
-        )}
+        <SplitItem>
+          <Split hasGutter isWrappable className={classes.detailsPageHeaderSplit}>
+            {/* Optional action buttons */}
+            {Array.isArray(actionButtons) && actionButtons.length > 0 && (
+              <SplitItem>
+                <ActionButtons actionButtons={actionButtons} />
+              </SplitItem>
+            )}
+            {/* Optional action menu - ungrouped actions */}
+            {actionMenu?.actions && (
+              <SplitItem className="pf-u-mb-sm">
+                <ActionMenu
+                  actions={actionMenu.actions}
+                  isDisabled={actionMenu?.isDisabled}
+                  variant={actionMenu?.variant}
+                  label={actionMenu?.label}
+                  position={actionMenu?.position}
+                  id={actionMenu?.id}
+                />
+              </SplitItem>
+            )}
+            {/* Optional action menu - Grouped actions */}
+            {actionMenu?.groupedActions && (
+              <SplitItem className="pf-u-mb-sm">
+                <ActionMenu
+                  groupedActions={actionMenu.groupedActions}
+                  isDisabled={actionMenu?.isDisabled}
+                  variant={actionMenu?.variant}
+                  label={actionMenu?.label}
+                  position={actionMenu?.position}
+                />
+              </SplitItem>
+            )}
+          </Split>
+        </SplitItem>
       </Split>
     </>
   );
diff --git a/packages/module/src/DetailsPageHeader/index.ts b/packages/module/src/DetailsPageHeader/index.ts
index 07be0844..f01c9943 100644
--- a/packages/module/src/DetailsPageHeader/index.ts
+++ b/packages/module/src/DetailsPageHeader/index.ts
@@ -1,11 +1,2 @@
-export { DetailsPageHeader, DetailsPageHeaderProps, PageHeading } from './DetailsPageHeader';
-export {
-  Action,
-  ActionButtonProp,
-  ActionCTA,
-  ActionMenuOptions,
-  ActionMenuProps,
-  ActionMenuVariant,
-  GroupedActions,
-  BreadcrumbProp,
-} from './utils';
+export * from './DetailsPageHeader';
+export * from './utils';
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionButton.tsx b/packages/module/src/DetailsPageHeader/utils/ActionButton.tsx
new file mode 100644
index 00000000..7de9020f
--- /dev/null
+++ b/packages/module/src/DetailsPageHeader/utils/ActionButton.tsx
@@ -0,0 +1,36 @@
+import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
+import React from 'react';
+
+interface ActionButtonTooltipProps {
+  /** Content for the action button tooltip */
+  tooltip?: React.ReactNode;
+  /** ID for the action button tooltip */
+  tooltipId?: TooltipProps['id'];
+  /** Position of the action button tooltip */
+  tooltipPosition?: TooltipProps['position'];
+}
+
+export interface ActionButtonProps extends ButtonProps, ActionButtonTooltipProps {};
+
+export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
+  tooltip,
+  tooltipId,
+  tooltipPosition,
+  ...buttonProps
+}: ActionButtonProps) => {
+  const tooltipRef = React.useRef();
+  return (
+    <>
+      <Button
+        {...buttonProps}
+        innerRef={tooltipRef}
+        aria-describedby={tooltipId}
+      >
+        {buttonProps.children}
+      </Button>
+      {tooltip ? <Tooltip content={tooltip} reference={tooltipRef} id={tooltipId} position={tooltipPosition} /> : null}
+    </>
+  );
+};
+
+export default ActionButton;
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx b/packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx
index 146049d3..18d836c1 100644
--- a/packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/ActionButtons.test.tsx
@@ -6,14 +6,14 @@ const mockCallback = jest.fn();
 
 const mockActionButtons = [
   {
-    label: 'Edit Workspace',
-    callback: mockCallback,
+    children: 'Primary action',
+    onClick: mockCallback,
+    tooltip: 'Click me!',
   },
   {
-    label: 'Delete Workspace',
-    callback: jest.fn(),
+    children: 'Secondary action',
+    onClick: jest.fn(),
     isDisabled: true,
-    tooltip: 'Deletion is currently unavailable',
   },
 ];
 
@@ -21,14 +21,14 @@ describe('ActionButtons', () => {
   test('Buttons are rendered', () => {
     render(<ActionButtons actionButtons={mockActionButtons} />);
 
-    expect(screen.getByText('Edit Workspace')).toBeVisible();
-    expect(screen.getByText('Delete Workspace')).toBeVisible();
-    expect(screen.getByText('Delete Workspace').closest('button')).toHaveAttribute('aria-disabled');
+    expect(screen.getByText('Primary action')).toBeVisible();
+    expect(screen.getByText('Secondary action')).toBeVisible();
+    expect(screen.getByText('Secondary action').closest('button')).toHaveAttribute('aria-disabled');
   });
   test('Button clicks trigger callback', () => {
     render(<ActionButtons actionButtons={mockActionButtons} />);
 
-    fireEvent.click(screen.getByText('Edit Workspace'));
+    fireEvent.click(screen.getByText('Primary action'));
     expect(mockCallback).toHaveBeenCalled();
   });
 });
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx b/packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx
index b84109f6..55d20153 100644
--- a/packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/ActionButtons.tsx
@@ -1,64 +1,29 @@
-import { Button, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
-import { isEmpty, map } from 'lodash';
+import { Flex, FlexItem } from '@patternfly/react-core';
 import React from 'react';
+import ActionButton, { ActionButtonProps } from './ActionButton';
 
-export type ActionButtonProp = {
-  id?: string;
-  label?: string;
-  callback: (event: React.MouseEvent) => void;
-  isDisabled?: boolean;
-  tooltip?: string;
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
+export interface ActionButtonsProps {
+  /** Array of action buttons */
+  actionButtons: ActionButtonProps[];
 };
 
-export type ActionButtonsProps = {
-  actionButtons: ActionButtonProp[];
-};
-
-const ActionButton: React.FC<ActionButtonProp> = ({
-  id,
-  children,
-  callback,
-  isDisabled,
-  tooltip,
-  variant = 'primary',
-}) => {
-  const tooltipRef = React.useRef();
-  return (
-    <>
-      <Button
-        variant={variant}
-        onClick={callback}
-        isAriaDisabled={isDisabled}
-        aria-describedby={id}
-        innerRef={tooltipRef}
-      >
-        {children}
-      </Button>
-      {tooltip ? <Tooltip id={id} content={tooltip} reference={tooltipRef} /> : null}
-    </>
-  );
-};
-
-export const ActionButtons: React.SFC<ActionButtonsProps> = ({ actionButtons }) => (
+export const ActionButtons: React.FunctionComponent<ActionButtonsProps> = ({
+  actionButtons
+}: ActionButtonsProps) => (
   <Flex>
-    {map(actionButtons, (actionButton, i) => {
-      if (!isEmpty(actionButton)) {
-        return (
-          <FlexItem key={actionButton.id || i}>
-            <ActionButton
-              variant={actionButton.variant}
-              callback={actionButton.callback}
-              isDisabled={actionButton.isDisabled}
-              tooltip={actionButton.tooltip}
-            >
-              {actionButton.label}
-            </ActionButton>
-          </FlexItem>
-        );
-      }
-      return null;
-    })}
+    {actionButtons.map((actionButton, i) => (
+      <FlexItem key={actionButton?.id ?? i}>
+        <ActionButton
+          onClick={actionButton.onClick}
+          variant={actionButton?.variant}
+          isDisabled={actionButton?.isDisabled}
+          tooltip={actionButton?.tooltip}
+          className="pf-u-mb-sm"
+        >
+          {actionButton.children}
+        </ActionButton>
+      </FlexItem>
+    ))}
   </Flex>
 );
 
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionMenu.css b/packages/module/src/DetailsPageHeader/utils/ActionMenu.css
deleted file mode 100644
index d7b7d3ec..00000000
--- a/packages/module/src/DetailsPageHeader/utils/ActionMenu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.menu-item-with-label-before-icon .pf-c-dropdown__menu-item-icon {
-  margin-left: var(--pf-c-dropdown__menu-item-icon--MarginRight);
-}
-
-.menu-item-with-label-before-icon.pf-c-dropdown__menu-item {
-  flex-direction: row-reverse;
-  justify-content: left;
-}
-
-.menu-item-with-label-before-icon .pf-c-dropdown__menu-item-main {
-  flex-direction: row-reverse;
-}
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx
index 458c2d4e..4ea9bfd1 100644
--- a/packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/ActionMenu.test.tsx
@@ -6,15 +6,15 @@ const mockCallback = jest.fn();
 
 const mockActions = [
   {
-    id: '1',
-    label: 'Edit Action',
+    children: 'Edit resource',
+    itemID: 'action-menu-example-1',
     cta: {
       callback: mockCallback,
     },
   },
   {
-    id: '2',
-    label: 'Delete Action',
+    children: 'Delete resource',
+    itemID: 'action-menu-example-2',
     cta: {
       callback: jest.fn(),
     },
@@ -27,16 +27,16 @@ const mockGroupedActions = [
     groupId: 'group1',
     groupActions: [
       {
-        id: '1',
-        label: 'Edit Action',
+        children: 'Edit resource',
+        itemID: 'action-menu-grouped-group-1-example-1',
         cta: {
           callback: jest.fn(),
         },
         tooltip: 'Sample tooltip',
       },
       {
-        id: '2',
-        label: 'Delete Action',
+        children: 'Delete resource',
+        itemID: 'action-menu-grouped-group-1-example-2',
         cta: {
           callback: jest.fn(),
         },
@@ -46,22 +46,21 @@ const mockGroupedActions = [
   },
   {
     groupId: 'group2',
-    groupLabel: 'Group2',
+    label: 'Group2',
     groupActions: [
       {
-        id: 'Link1',
-        label: 'External Link',
+        children: 'External Link',
+        itemID: 'action-menu-grouped-group-2-example-1',
         cta: {
           href: 'https://github.com/',
           external: true,
         },
       },
       {
-        id: 'Link2',
+        itemID: 'action-menu-grouped-group-2-example-2',
         label: 'Link',
         cta: {
           href: '/#',
-          external: false,
         },
         tooltip: 'Link',
       },
@@ -79,9 +78,9 @@ describe('ActionMenu', () => {
     render(<ActionMenu actions={mockActions} label="Test Actions" />);
 
     fireEvent.click(screen.getByText('Test Actions'));
-    expect(screen.getByText('Edit Action')).toBeVisible();
-    expect(screen.getByText('Delete Action')).toBeVisible();
-    expect(screen.getByText('Delete Action').closest('a')).toHaveAttribute('aria-disabled');
+    expect(screen.getByText('Edit resource')).toBeVisible();
+    expect(screen.getByText('Delete resource')).toBeVisible();
+    expect(screen.getByText('Delete resource').closest('a')).toHaveAttribute('aria-disabled');
   });
   test('ActionMenu is disabled', () => {
     render(<ActionMenu actions={mockActions} isDisabled />);
@@ -92,15 +91,15 @@ describe('ActionMenu', () => {
     render(<ActionMenu actions={mockActions} />);
 
     fireEvent.click(screen.getByText('Actions'));
-    expect(screen.getByText('Edit Action')).toBeVisible();
-    fireEvent.click(screen.getByText('Edit Action'));
+    expect(screen.getByText('Edit resource')).toBeVisible();
+    fireEvent.click(screen.getByText('Edit resource'));
     expect(mockCallback).toHaveBeenCalled();
   });
   test('Menu actions are rendered in groups', () => {
     render(<ActionMenu groupedActions={mockGroupedActions} />);
 
     fireEvent.click(screen.getByText('Actions'));
-    expect(screen.getByText('Edit Action')).toBeVisible();
+    expect(screen.getByText('Edit resource')).toBeVisible();
     expect(screen.getByText('Group2')).toBeVisible();
     expect(screen.getByText('External Link')).toBeVisible();
   });
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
index 14d30c93..97225323 100644
--- a/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
@@ -1,54 +1,52 @@
-import type { EitherNotBoth } from '@openshift/dynamic-plugin-sdk';
 import {
   Dropdown,
-  DropdownPosition,
   DropdownGroup,
+  DropdownGroupProps,
+  DropdownItem,
+  DropdownItemProps,
+  DropdownPosition,
   DropdownToggle,
   KebabToggle,
-  DropdownItem,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { isEmpty } from 'lodash';
 import React from 'react';
-import './ActionMenu.css';
+import { createUseStyles } from 'react-jss'
+
+// Duplicated from @openshift/dynamic-plugin-sdk
+type Never<T> = {
+  [K in keyof T]?: never;
+};
+
+// Duplicated from @openshift/dynamic-plugin-sdk
+type EitherNotBoth<TypeA, TypeB> = (TypeA & Never<TypeB>) | (TypeB & Never<TypeA>);
 
 export type ActionCTA =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | { callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void }
   | { href: string; external?: boolean };
 
-export type Action = {
-  /** A unique identifier for this action. */
-  id: string;
-  /** The label to display in the UI. */
-  label: React.ReactNode;
-  /** Optional subtext for the menu item */
-  description?: string;
+export interface ActionProps extends Omit<DropdownItemProps, 'onClick'|'innerRef'> {
   /** Executable callback or href. External links should automatically provide an external link icon on action. */
   cta: ActionCTA;
-  /** Optional flag to indicate whether the action is disabled. */
-  isDisabled?: boolean;
   /** Optional tooltip for this action. */
   tooltip?: string;
   /** Optional icon for this action. */
   icon?: React.ReactNode;
 };
 
-export type GroupedActions = {
+export interface GroupedActionsProps extends Omit<DropdownGroupProps, 'children'> {
   /** A unique identifier for this group. */
   groupId: string;
-  /** Optional label to display as group heading */
-  groupLabel?: string;
   /** Actions under this group. */
-  groupActions: Action[];
-};
+  groupActions: ActionProps[];
+}
 
 export enum ActionMenuVariant {
   KEBAB = 'plain',
   DROPDOWN = 'default',
 }
 
-export type ActionMenuOptions = {
+export interface ActionMenuOptions {
   /** Optional flag to indicate whether action menu should be disabled */
   isDisabled?: boolean;
   /** Optional variant for action menu: DROPDOWN vs KEBAB (defaults to dropdown) */
@@ -59,15 +57,32 @@ export type ActionMenuOptions = {
   position?: DropdownPosition;
   /** Optional flag to indicate whether labels should appear to the left of icons for the action menu items (icon appears after the label by default) */
   displayLabelBeforeIcon?: boolean;
+  /** Optional id for action menu (defaults to 'actions') */
+  id?: string;
 };
 
 export type ActionMenuProps = EitherNotBoth<
-  { actions: Action[] },
-  { groupedActions: GroupedActions[] }
+  { actions: ActionProps[] },
+  { groupedActions: GroupedActionsProps[] }
 > &
   ActionMenuOptions;
 
-export const ActionMenu: React.FC<ActionMenuProps> = ({
+const useStyles = createUseStyles({
+  menuItemWithLabelBeforeIcon: {
+    '&.pf-c-dropdown__menu-item': {
+      flexDirection: 'row-reverse',
+      justifyContent: 'left'
+    },
+    '.pf-c-dropdown__menu-item-icon': {
+      marginLeft: 'var(--pf-c-dropdown__menu-item-icon--MarginRight)'
+    },
+    '.pf-c-dropdown__menu-item-main': {
+      flexDirection: 'row-reverse',
+    }
+  }
+});
+
+export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
   actions = [],
   groupedActions = [],
   isDisabled,
@@ -75,87 +90,77 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   label = 'Actions',
   position = DropdownPosition.right,
   displayLabelBeforeIcon,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [isGrouped, setIsGrouped] = React.useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [dropdownActionItems, setDropdownActionItems] = React.useState<any[]>([]);
+  id = 'actions',
+}: ActionMenuProps) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
 
-  React.useEffect(() => {
-    if (!isEmpty(groupedActions)) {
-      setIsGrouped(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const classes = useStyles();
 
-  const onToggle = (open: boolean) => {
-    setIsOpen(open);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById(`toggle-menu-${label}`);
-    if (element) {
-      element.focus();
-    }
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
+  const isGrouped = groupedActions.length > 0;
 
   /** Returns a DropDownItem element corresponding to an action */
   const dropdownActionItem = React.useCallback(
-    (action: Action) => {
+    (action: ActionProps) => {
       const externalIcon =
         'href' in action.cta &&
         'external' in action.cta &&
         action.cta.href &&
         action.cta.external ? (
-          <ExternalLinkAltIcon />
-        ) : null;
+            <ExternalLinkAltIcon />
+          ) : null;
       const icon = action.icon ?? externalIcon;
       const href = 'href' in action.cta ? action.cta.href : undefined;
       const onClick =
         'callback' in action.cta && action.cta.callback ? action.cta.callback : undefined;
       return (
         <DropdownItem
-          className={displayLabelBeforeIcon ? 'menu-item-with-label-before-icon' : ''}
-          key={action.id}
-          tooltip={action.tooltip}
+          className={displayLabelBeforeIcon ? classes.menuItemWithLabelBeforeIcon : ''}
           description={action.description}
-          icon={icon}
-          href={href}
           isDisabled={action.isDisabled}
+          itemID={action.itemID}
           onClick={onClick}
+          href={href}
+          tooltip={action.tooltip}
+          icon={icon}
+          key={action.itemID}
         >
-          {action.label}
+          {action.children}
         </DropdownItem>
       );
     },
-    [displayLabelBeforeIcon],
+    [ classes.menuItemWithLabelBeforeIcon, displayLabelBeforeIcon ],
   );
 
-  React.useEffect(() => {
+  const dropdownActionItems = React.useMemo(() => {
     let ddActionItems: JSX.Element[] = [];
-    if (!isEmpty(actions)) {
-      ddActionItems = actions.map((action: Action) => {
-        return dropdownActionItem(action as Action);
-      });
+    if (actions.length > 0) {
+      ddActionItems = actions.map((action: ActionProps) => dropdownActionItem(action as ActionProps));
     }
-    if (!isEmpty(groupedActions)) {
-      ddActionItems = groupedActions.map((action: GroupedActions) => {
-        // Grouped Actions
-        return (
-          <DropdownGroup label={action.groupLabel} key={action.groupId}>
-            {action.groupActions.map((groupAction: Action) => dropdownActionItem(groupAction))}
-          </DropdownGroup>
-        );
-      });
+    if (isGrouped) {
+      ddActionItems = groupedActions.map((action: GroupedActionsProps) => (
+        <DropdownGroup label={action?.label} key={action.groupId}>
+          {action.groupActions.map((groupAction: ActionProps) => dropdownActionItem(groupAction))}
+        </DropdownGroup>
+      ))
     }
-    setDropdownActionItems(ddActionItems);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    return ddActionItems;
+  }, [ actions, dropdownActionItem, isGrouped, groupedActions ]);
+
+  const onToggle = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById(`toggle-menu-${id}`);
+    if (element) {
+      element.focus();
+    }
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
 
   // Build dropdown
   return (
@@ -164,11 +169,11 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       position={position}
       toggle={
         variant === ActionMenuVariant.DROPDOWN ? (
-          <DropdownToggle id={`toggle-menu-${label}`} onToggle={onToggle} isDisabled={isDisabled}>
+          <DropdownToggle id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled}>
             {label}
           </DropdownToggle>
         ) : (
-          <KebabToggle id={`toggle-menu-${label}`} onToggle={onToggle} isDisabled={isDisabled} />
+          <KebabToggle id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled} />
         )
       }
       isOpen={isOpen}
diff --git a/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx
index 1da97780..3073ec7c 100644
--- a/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.test.tsx
@@ -2,21 +2,20 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import type { BreadcrumbsProps } from './Breadcrumbs';
-import { Breadcrumbs } from './Breadcrumbs';
+import { Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
 
 const mockProps: BreadcrumbsProps = {
   breadcrumbs: [
-    { name: 'Workspaces', path: '/workspaces' },
-    { name: 'Workspace details', path: '/workspaces/demo-workspace' },
+    { children: 'Resources', to: '/resources' },
+    { children: 'Resource details', to: '/resources/example-resource' },
   ],
 };
 
 const breadcrumbsJSX = (args: BreadcrumbsProps) => (
-  <MemoryRouter initialEntries={['/workspaces/demo-workspace']}>
+  <MemoryRouter initialEntries={[ '/resources/example-resource' ]}>
     <Routes>
-      <Route element={<Breadcrumbs {...args} />} path="/workspaces/demo-workspace" />
-      <Route element={<div>Workspaces List Page</div>} path="/workspaces" />
+      <Route element={<Breadcrumbs {...args} />} path="/resources/example-resource" />
+      <Route element={<div>Resource list page</div>} path="/resources" />
     </Routes>
   </MemoryRouter>
 );
@@ -25,14 +24,14 @@ describe('Breadcrumbs', () => {
   test('Breadcrumbs are rendered', () => {
     render(breadcrumbsJSX(mockProps));
 
-    expect(screen.getByText('Workspaces')).toBeVisible();
-    expect(screen.getByText('Workspace details')).toBeVisible();
+    expect(screen.getByText('Resources')).toBeVisible();
+    expect(screen.getByText('Resource details')).toBeVisible();
   });
   test('Clicking on breadcrumb triggers specified path', () => {
     render(breadcrumbsJSX(mockProps));
 
-    // Click Workspaces link
+    // Click Resources link
     fireEvent.click(screen.getByTestId('breadcrumb-link-0'));
-    expect(screen.getByText('Workspaces List Page')).toBeVisible();
+    expect(screen.getByText('Resource list page')).toBeVisible();
   });
 });
diff --git a/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx
index 1702dc2a..3bea5b09 100644
--- a/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx
+++ b/packages/module/src/DetailsPageHeader/utils/Breadcrumbs.tsx
@@ -1,51 +1,39 @@
-import { v4 as uuidv4 } from 'uuid';
-import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps } from '@patternfly/react-core';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export type BreadcrumbProp = { name: string; path: string; uuid?: string; id?: string };
+export type BreadcrumbProps = Omit<BreadcrumbItemProps, 'isDropdown'|'component'>;
 
-export type BreadcrumbsProps = {
-  breadcrumbs: BreadcrumbProp[];
+export interface BreadcrumbsProps {
+  /** Array of breadcrumbs */
+  breadcrumbs: BreadcrumbProps[];
 };
 
-export const Breadcrumbs: React.SFC<BreadcrumbsProps> = ({ breadcrumbs }) => {
-  const [crumbs, setCrumbs] = React.useState<BreadcrumbProp[]>([]);
+export const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps> = ({
+  breadcrumbs
+}: BreadcrumbsProps) => (
+  <Breadcrumb>
+    {breadcrumbs.map((crumb, i, { length }) => {
+      const id = `breadcrumb-link-${i}`;
+      const isLast = i === length - 1;
+
+      return (
+        <BreadcrumbItem
+          className={crumb?.className}
+          to={crumb?.to}
+          isActive={crumb?.isActive || isLast}
+          showDivider={crumb?.showDivider}
+          target={crumb?.target}
+          component={(props) => <Link {...props} to={crumb.to} data-testid={id} />}
+          render={crumb?.render}
+          key={id}
+        >
+          {crumb?.children}
+        </BreadcrumbItem>
+      );
+    })}
+  </Breadcrumb>
+);
 
-  const addUUID = (allData: BreadcrumbProp[]) => {
-    return allData.map((item: BreadcrumbProp) => ({
-      ...item,
-      uuid: item.uuid || item.id || uuidv4(),
-    }));
-  };
-
-  React.useEffect(() => {
-    setCrumbs(addUUID(breadcrumbs));
-  }, [breadcrumbs]);
-
-  return (
-    <Breadcrumb>
-      {crumbs.map((crumb, i, { length }) => {
-        const isLast = i === length - 1;
-
-        return (
-          <BreadcrumbItem key={crumb.uuid} isActive={isLast}>
-            {isLast ? (
-              crumb.name
-            ) : (
-              <Link
-                className="pf-c-breadcrumb__link"
-                to={crumb.path}
-                data-testid={`breadcrumb-link-${i}`}
-              >
-                {crumb.name}
-              </Link>
-            )}
-          </BreadcrumbItem>
-        );
-      })}
-    </Breadcrumb>
-  );
-};
 
 export default Breadcrumbs;
diff --git a/packages/module/src/DetailsPageHeader/utils/index.ts b/packages/module/src/DetailsPageHeader/utils/index.ts
index 20f0311f..3cd8921e 100644
--- a/packages/module/src/DetailsPageHeader/utils/index.ts
+++ b/packages/module/src/DetailsPageHeader/utils/index.ts
@@ -1,11 +1,4 @@
-export { Breadcrumbs, BreadcrumbProp, BreadcrumbsProps } from './Breadcrumbs';
-export { ActionButtons, ActionButtonProp, ActionButtonsProps } from './ActionButtons';
-export {
-  Action,
-  ActionCTA,
-  ActionMenu,
-  ActionMenuOptions,
-  ActionMenuProps,
-  ActionMenuVariant,
-  GroupedActions,
-} from './ActionMenu';
+export * from './ActionButton';
+export * from './ActionButtons';
+export * from './ActionMenu';
+export * from './Breadcrumbs';
diff --git a/packages/module/src/HorizontalNav/HorizontalNav.test.tsx b/packages/module/src/HorizontalNav/HorizontalNav.test.tsx
index 3a5b21d3..7273bea6 100644
--- a/packages/module/src/HorizontalNav/HorizontalNav.test.tsx
+++ b/packages/module/src/HorizontalNav/HorizontalNav.test.tsx
@@ -1,66 +1,30 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import type { Tab } from './HorizontalNav';
-import { HorizontalNav, HorizontalNavTabs } from './HorizontalNav';
+import { HorizontalNav, TabProps } from './HorizontalNav';
 
 // Sample content components for tabs
-const UsersTabContent: React.FC = () => <div>Users Tab Content</div>;
-const DatabaseTabContent: React.FC = () => <div>Database Tab Content</div>;
+const UsersTabContent: React.FunctionComponent = () => <div>Users Tab Content</div>;
+const DatabaseTabContent: React.FunctionComponent = () => <div>Database Tab Content</div>;
 
-const mockTabs: Tab[] = [
-  { key: 'Users', title: 'Users', content: <UsersTabContent />, ariaLabel: 'Users' },
-  { key: 'Database', title: 'Database', content: <DatabaseTabContent />, ariaLabel: 'Database' },
+const mockTabs: TabProps[] = [
+  { eventKey: 'Users', title: 'Users', children: <UsersTabContent /> },
+  { eventKey: 'Database', title: 'Database', children: <DatabaseTabContent /> },
 ];
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    selectedTab: 'Database',
-  }),
-  useLocation: () => ({
-    pathname: 'testNav/Database',
-  }),
-}));
-
 describe('HorizontalNav', () => {
   afterAll(() => {
     jest.restoreAllMocks();
   });
-  describe('Horizontal tabs with routing', () => {
-    test('loads and displays tabs with initial selection based on route param', () => {
-      render(
-        <BrowserRouter>
-          <HorizontalNav tabs={mockTabs} />
-        </BrowserRouter>,
-      );
-
-      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Database');
-      expect(screen.getByText('Database Tab Content')).toBeVisible();
-    });
-
-    test('switches tab on click', () => {
-      render(
-        <BrowserRouter>
-          <HorizontalNav tabs={mockTabs} />
-        </BrowserRouter>,
-      );
-
-      fireEvent.click(screen.getByText('Users'));
-
-      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
-    });
-  });
   describe('Standalone horizontal tabs without routing', () => {
     test('loads and displays tabs with default selection', () => {
-      render(<HorizontalNavTabs tabs={mockTabs} />);
+      render(<HorizontalNav tabs={mockTabs} />);
 
       expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Users');
       expect(screen.getByText('Users Tab Content')).toBeVisible();
     });
 
     test('switches tab on click', () => {
-      render(<HorizontalNavTabs tabs={mockTabs} />);
+      render(<HorizontalNav tabs={mockTabs} />);
 
       fireEvent.click(screen.getByText('Database'));
 
diff --git a/packages/module/src/HorizontalNav/HorizontalNav.tsx b/packages/module/src/HorizontalNav/HorizontalNav.tsx
index 74623820..44fe1139 100644
--- a/packages/module/src/HorizontalNav/HorizontalNav.tsx
+++ b/packages/module/src/HorizontalNav/HorizontalNav.tsx
@@ -1,20 +1,18 @@
-import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import { Tabs, Tab, TabProps as PfTabProps, TabTitleText } from '@patternfly/react-core';
 import React from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import '@patternfly/react-styles/css/utilities/Spacing/spacing.css';
 
-type Tab = {
-  /** Key for individual tab */
-  key: string | number;
-  /** Title for individual tab */
-  title: string;
-  /** Content for individual tab (provided as a React component) */
-  content: React.ReactElement;
-  /** aria-label for individual tab */
-  ariaLabel: string;
-};
+export type TabProps = Omit<
+  PfTabProps,
+  'tabContentId'|'tabContentRef'|'isHidden'|'innerRef'|'closeButtonAriaLabel'|'isCloseDisabled'|'actions'
+>
 
-export type WithRouterProps = {
+export interface HorizontalNavProps {
+  /** aria-label for all tabs */
+  ariaLabel?: string;
+  /** Properties for tabs */
+  tabs: TabProps[];
   /** URL parameters */
   params?: Record<string, string>;
   /** Navigate function */
@@ -23,28 +21,21 @@ export type WithRouterProps = {
   location?: ReturnType<typeof useLocation>;
 };
 
-type HorizontalNavProps = {
-  /** aria-label for all tabs */
-  ariaLabel?: string;
-  /** Properties for tabs */
-  tabs: Tab[];
-} & WithRouterProps;
-
-const HorizontalNavTabs: React.FC<HorizontalNavProps> = ({
+export const HorizontalNav: React.FunctionComponent<HorizontalNavProps> = ({
   ariaLabel,
   tabs,
   params,
   navigate,
   location,
-}) => {
-  const defaultActiveTab = tabs && tabs[0] ? tabs[0].key : 0; // Set first tab as the default active tab
+}: HorizontalNavProps) => {
+  const defaultActiveTab = tabs && tabs[0] ? tabs[0].eventKey : 0; // Set first tab as the default active tab
 
   const activeTabFromUrlParam = params?.selectedTab;
   const isValidTabFromUrl =
-    activeTabFromUrlParam && tabs?.some((tab) => tab.key === activeTabFromUrlParam);
+    activeTabFromUrlParam && tabs?.some((tab) => tab.eventKey === activeTabFromUrlParam);
   const activeTab = isValidTabFromUrl ? activeTabFromUrlParam : defaultActiveTab;
 
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(activeTab);
+  const [ activeTabKey, setActiveTabKey ] = React.useState<string | number>(activeTab);
 
   return (
     <Tabs
@@ -66,33 +57,22 @@ const HorizontalNavTabs: React.FC<HorizontalNavProps> = ({
       aria-label={ariaLabel}
       role="region"
     >
-      {tabs.map((tab: Tab) => {
-        return (
-          <Tab
-            key={tab.key}
-            eventKey={tab.key}
-            title={<TabTitleText>{tab.title}</TabTitleText>}
-            aria-label={tab.ariaLabel}
-          >
-            <div className="pf-u-m-md">{tab.content}</div>
-          </Tab>
-        );
-      })}
+      {tabs.map((tab: TabProps) => (
+        <Tab
+          className={tab?.className}
+          href={tab?.href}
+          title={<TabTitleText>{tab.title}</TabTitleText>}
+          eventKey={tab.eventKey}
+          isDisabled={tab?.isDisabled}
+          isAriaDisabled={tab?.isAriaDisabled}
+          inoperableEvents={tab?.inoperableEvents}
+          tooltip={tab?.tooltip}
+          ouiaId={tab?.ouiaId}
+          key={tab.eventKey}
+        >
+          <div className="pf-u-m-md">{tab.children}</div>
+        </Tab>
+      ))}
     </Tabs>
   );
 };
-
-const withRouter = <T extends WithRouterProps>(Component: React.ComponentType<T>) => {
-  return (props: Omit<T, keyof WithRouterProps>) => {
-    const params = useParams();
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Component {...(props as T)} params={params} navigate={navigate} location={location} />;
-  };
-};
-
-const HorizontalNav = withRouter(HorizontalNavTabs as React.ComponentType<HorizontalNavProps>);
-
-export { HorizontalNav, HorizontalNavTabs, Tab, HorizontalNavProps, withRouter };
diff --git a/packages/module/src/HorizontalNav/index.ts b/packages/module/src/HorizontalNav/index.ts
index bc315850..9ba382c3 100644
--- a/packages/module/src/HorizontalNav/index.ts
+++ b/packages/module/src/HorizontalNav/index.ts
@@ -1,8 +1 @@
-export {
-  HorizontalNav,
-  HorizontalNavTabs,
-  Tab,
-  HorizontalNavProps,
-  withRouter,
-  WithRouterProps,
-} from './HorizontalNav';
+export * from './HorizontalNav';
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index a7a9138d..58d3e38f 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -1,2 +1,5 @@
+export * from './DetailsPage';
+export * from './DetailsPageHeader';
 export * from './ErrorBoundary';
 export * from './ErrorState';
+export * from './HorizontalNav';

From 8b53cf24ddfc94c0fc0db27b4a7729b80267437d Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Fri, 9 Jun 2023 08:12:09 -0400
Subject: [PATCH 17/17] Add beta to DetailsPage.md

---
 .../extensions/extended-components/examples/DetailsPage.md       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
index 76a80eea..cacb85bb 100644
--- a/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
+++ b/packages/module/patternfly-docs/content/extensions/extended-components/examples/DetailsPage.md
@@ -26,6 +26,7 @@ propComponents: [
   'HorizontalNavProps', # Removing 'Props' breaks linking to TabProps
   # 'Tab', # No output --> is a type and not an interface
 ]
+beta: true
 ---
 
 import { ActionButtons } from '@patternfly/react-component-groups';