Merge pull request #18412 from OscarDHdz/master

Add props to StackstormHome for Header Customization

.changeset/dull-onions-remember.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-stackstorm': patch
+---
+
+Add props to StackstormHome for Header Customization

plugins/stackstorm/api-report.md

@@ -6,10 +6,18 @@
 /// <reference types="react" />
 
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 
+// @public (undocumented)
+export type StackstormHomeProps = {
+  title?: string;
+  subtitle?: string;
+  headerButtons?: React_2.ReactNode[];
+};
+
 // @public
-export const StackstormPage: () => JSX.Element;
+export const StackstormPage: (props: StackstormHomeProps) => JSX.Element;
 
 // @public
 export const stackstormPlugin: BackstagePlugin<

plugins/stackstorm/package.json

@@ -40,6 +40,7 @@
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@types/react": "^16.13.1 || ^17.0.0",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
@@ -57,7 +58,6 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0",
     "@types/node": "*",
-    "@types/react": "^16.13.1 || ^17.0.0",
     "msw": "^1.0.0"
   },
   "files": [

plugins/stackstorm/src/components/StackstormHome/StackstormHome.test.tsx

@@ -35,4 +35,19 @@ describe('StackstormHome', () => {
     );
     expect(screen.getByText('Welcome to StackStorm!')).toBeInTheDocument();
   });
+
+  it('should render props', async () => {
+    await renderInTestApp(
+      <TestApiProvider apis={[[stackstormApiRef, mockApi]]}>
+        <StackstormHome
+          title="Test Title"
+          subtitle="Test Subtitle"
+          headerButtons={[<h1>Test Header Button</h1>]}
+        />
+      </TestApiProvider>,
+    );
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Test Header Button')).toBeInTheDocument();
+  });
 });

plugins/stackstorm/src/components/StackstormHome/StackstormHome.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { IconButton } from '@material-ui/core';
 import {
   Header,
@@ -27,12 +27,30 @@ import { ExecutionsTable } from '../ExecutionsTable';
 import { PacksTable } from '../PacksTable/PacksTable';
 import { ActionsList } from '../ActionsList';
 
-export const StackstormHome = () => (
+/**
+ * @public
+ */
+export type StackstormHomeProps = {
+  title?: string;
+  subtitle?: string;
+  headerButtons?: React.ReactNode[];
+};
+
+export const StackstormHome = (props: StackstormHomeProps) => (
   <Page themeId="tool">
-    <Header title="Welcome to StackStorm!" subtitle="Event-driven automation">
-      <IconButton aria-label="Docs" href="https://docs.stackstorm.com/">
-        <LibraryBooks htmlColor="white" />
-      </IconButton>
+    <Header
+      title={props.title || 'Welcome to StackStorm!'}
+      subtitle={props.subtitle || 'Event-driven automation'}
+    >
+      {props.headerButtons ? (
+        props.headerButtons.map((headerButton, idx) => (
+          <Fragment key={idx}>{headerButton}</Fragment>
+        ))
+      ) : (
+        <IconButton aria-label="Docs" href="https://docs.stackstorm.com/">
+          <LibraryBooks htmlColor="white" />
+        </IconButton>
+      )}
       <HeaderLabel label="Lifecycle" value="Alpha" />
     </Header>
     <TabbedLayout>

plugins/stackstorm/src/components/StackstormHome/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { StackstormHome } from './StackstormHome';
+export { StackstormHome, type StackstormHomeProps } from './StackstormHome';

plugins/stackstorm/src/index.ts

@@ -21,3 +21,4 @@
  */
 
 export { stackstormPlugin, StackstormPage } from './plugin';
+export { type StackstormHomeProps } from './components/StackstormHome';