Jira Dashboard - Props propagation for JiraUserIssuesViewCard (#248)

* Issue 239 - customization of JiraUserIssuesCard via propogation of properties to JiraUserIssuesTable * changeset generation --------- Co-authored-by: Backstage <devops@evgo.com>
AxisCommunications · Jan 17, 2025 · 66bac1a · 66bac1a
1 parent ae01dea
commit 66bac1a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 deletions.
diff --git a/.changeset/angry-hounds-grow.md b/.changeset/angry-hounds-grow.md
@@ -0,0 +1,5 @@
+---
+'@axis-backstage/plugin-jira-dashboard': patch
+---
+
+Added tableOptions and tableStyle props to JiraUserIssuesCard for customization ability
diff --git a/plugins/jira-dashboard/README.md b/plugins/jira-dashboard/README.md
@@ -83,6 +83,36 @@ import { JiraUserIssuesViewCard } from '@axis-backstage/plugin-jira-dashboard';
 // ...
 ```
 
+Optionally, you can provide the `maxResults`, `tableOptions`, and `tableStyle` properties to the JiraUserIssuesViewCard for further customization. Example:
+
+```tsx
+import { JiraUserIssuesViewCard } from '@axis-backstage/plugin-jira-dashboard';
+// ...
+
+<Grid item xs={12} md={6}>
+  <JiraUserIssuesViewCard
+    bottomLinkProps={{
+      link: 'https://our-jira-server/issues',
+      title: 'Open in Jira',
+    }}
+    maxResults={30} // default is 15
+    tableOptions={{
+      toolbar: true, // default is false
+      search: true, // default is false
+      paging: true, // default is true
+      pageSize: 15, // default is 10
+    }}
+    tableStyle={{
+      padding: '5px', // default is 0px
+      overflowY: 'auto', // default is auto
+      width: '95%', // default is 100%
+    }}
+  />
+</Grid>;
+
+// ...
+```
+
 Note that the list of user issues is limited by permissions defined for the [JIRA_TOKEN](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/jira-dashboard-backend/README.md#configuration-details) used by backend.
 The username is being extracted from the user's email or created as a combination of user entity `metadata.name` and [JIRA_EMAIL_SUFFIX](https://github.com/AxisCommunications/backstage-plugins/blob/main/plugins/jira-dashboard-backend/README.md#configuration-details) ([see function `getAssigneUser`](/plugins/jira-dashboard-backend/src/filters.ts) for more information).
 

diff --git a/plugins/jira-dashboard/api-report.md b/plugins/jira-dashboard/api-report.md
@@ -68,6 +68,8 @@ export type JiraUserIssuesCardProps = {
   title?: string;
   maxResults?: number;
   bottomLinkProps?: BottomLinkProps;
+  tableOptions?: TableOptions<Issue>;
+  tableStyle?: TableComponentProps['style'];
 };
 
 // @public
@@ -93,6 +95,8 @@ export const JiraUserIssuesViewCard: ({
   title,
   maxResults,
   bottomLinkProps,
+  tableOptions,
+  tableStyle,
 }: JiraUserIssuesCardProps) => JSX_2.Element;
 
 // @public

diff --git a/plugins/jira-dashboard/src/components/JiraUserIssuesCard/JiraUserIssuesCard.tsx b/plugins/jira-dashboard/src/components/JiraUserIssuesCard/JiraUserIssuesCard.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 
-import { BottomLinkProps, InfoCard } from '@backstage/core-components';
+import {
+  BottomLinkProps,
+  InfoCard,
+  TableOptions,
+} from '@backstage/core-components';
 
-import { JiraUserIssuesTable } from '../JiraUserIssuesTable';
+import {
+  JiraUserIssuesTable,
+  TableComponentProps,
+} from '../JiraUserIssuesTable';
+
+import { Issue } from '@axis-backstage/plugin-jira-dashboard-common';
 
 /**
  * Jira user issues list card properties
@@ -11,6 +20,8 @@ export type JiraUserIssuesCardProps = {
   title?: string;
   maxResults?: number;
   bottomLinkProps?: BottomLinkProps;
+  tableOptions?: TableOptions<Issue>;
+  tableStyle?: TableComponentProps['style'];
 };
 
 /**
@@ -20,17 +31,24 @@ export const JiraUserIssuesCard = ({
   title,
   maxResults,
   bottomLinkProps,
+  tableOptions = {
+    toolbar: false,
+    search: false,
+    paging: true,
+    pageSize: 10,
+  },
+  tableStyle = {
+    padding: '0px',
+    overflowY: 'auto',
+    width: '100%',
+  },
 }: JiraUserIssuesCardProps) => {
   return (
     <InfoCard title={title} variant="fullHeight" deepLink={bottomLinkProps}>
       <JiraUserIssuesTable
         maxResults={maxResults}
-        tableOptions={{
-          toolbar: false,
-          search: false,
-          paging: true,
-          pageSize: 10,
-        }}
+        tableOptions={tableOptions}
+        tableStyle={tableStyle}
       />
     </InfoCard>
   );