Propagate title, subtitle and ScoreCardTableProps to ScoreBoardPage (#…

…160) * new ScoreBoardPageProps * more props for page * cypress test fix * use of title etc. props in page * changeset
Oriflame · Jan 23, 2023 · bbcae3e · bbcae3e
1 parent 0795ea3
commit bbcae3e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/.changeset/great-garlics-hang.md b/.changeset/great-garlics-hang.md
@@ -0,0 +1,5 @@
+---
+'@oriflame/backstage-plugin-score-card': patch
+---
+
+Propagate title, subtitle and ScoreCardTableProps to ScoreBoardPage
diff --git a/packages/app/cypress/integration/scoreboard.ts b/packages/app/cypress/integration/scoreboard.ts
@@ -25,7 +25,9 @@ describe('score-card', () => {
       cy.visit('/score-board');
       cy.screenshot({ capture: 'viewport' });
 
-      cy.contains('Entities scores overview').should('be.visible');
+      cy.contains('Custom page title').should('be.visible');
+      cy.contains('Custom sub title').should('be.visible');
+      cy.contains('Custom table title').should('be.visible');
       cy.checkForErrors();
       cy.get('span:contains("1-4 of 4")').should('be.visible'); // beware, there is also a hidden <P/> element
       cy.contains('audio-playback').should('be.visible');

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -57,7 +57,7 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
 
-    <Route path="/score-board" element={<ScoreBoardPage />} />
+    <Route path="/score-board" element={<ScoreBoardPage title='Custom page title' subTitle='Custom sub title' tableTitle='Custom table title' />} />
   </FlatRoutes>
 );
 

diff --git a/plugins/score-card/src/components/ScoreBoardPage/ScoreBoardPage.tsx b/plugins/score-card/src/components/ScoreBoardPage/ScoreBoardPage.tsx
@@ -25,9 +25,24 @@ import {
 } from '@backstage/core-components';
 import { ScoreCardTable } from '../ScoreCardTable';
 
-export const ScoreBoardPage = () => (
+type ScoreBoardPageProps = {
+  title?: string;
+  subTitle?: string;
+  tableTitle?: string;
+  entityKindFilter?: string[];
+};
+
+export const ScoreBoardPage = ({
+  title,
+  subTitle,
+  tableTitle,
+  entityKindFilter,
+}: ScoreBoardPageProps) => (
   <Page themeId="tool">
-    <Header title="Score board" subtitle="Overview of entity scores">
+    <Header
+      title={title ?? 'Score board'}
+      subtitle={subTitle ?? 'Overview of entity scores'}
+    >
       <HeaderLabel label="Maintainer" value="Oriflame" />
       <HeaderLabel label="Status" value="Alpha" />
     </Header>
@@ -39,7 +54,10 @@ export const ScoreBoardPage = () => (
       </ContentHeader>
       <Grid container spacing={3} direction="column">
         <Grid item>
-          <ScoreCardTable />
+          <ScoreCardTable
+            title={tableTitle}
+            entityKindFilter={entityKindFilter}
+          />
         </Grid>
       </Grid>
     </Content>