Jira table filters (#175)

* Feature - Filtering for Jira Tables * Feature - Filtering for Jira Tables * Adding filters to arguments * Jira Table styling and optional filters * Updating Api Report * Updated filter arguments and asignee field transformation on unasssigned tickets
AxisCommunications · Sep 13, 2024 · 89498d5 · 89498d5
1 parent 65ae7b3
commit 89498d5
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 11 deletions.
diff --git a/.changeset/pink-hornets-move.md b/.changeset/pink-hornets-move.md
@@ -0,0 +1,5 @@
+---
+'@axis-backstage/plugin-jira-dashboard': minor
+---
+
+Adding filters to the Jira Table
diff --git a/plugins/jira-dashboard/api-report.md b/plugins/jira-dashboard/api-report.md
@@ -12,12 +12,14 @@ import { Issue } from '@axis-backstage/plugin-jira-dashboard-common';
 import { JiraResponse } from '@axis-backstage/plugin-jira-dashboard-common';
 import { JSX as JSX_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { TableFilter } from '@backstage/core-components';
 
 // @public
 export const EntityJiraDashboardContent: (
   props?:
     | {
         annotationPrefix?: string | undefined;
+        showFilters?: boolean | TableFilter[] | undefined;
       }
     | undefined,
 ) => JSX_2.Element;

diff --git a/plugins/jira-dashboard/src/components/JiraDashboardContent/JiraDashboardContent.tsx b/plugins/jira-dashboard/src/components/JiraDashboardContent/JiraDashboardContent.tsx
@@ -4,6 +4,7 @@ import {
   Progress,
   ResponseErrorPanel,
   SupportButton,
+  TableFilter,
 } from '@backstage/core-components';
 import Grid from '@mui/material/Unstable_Grid2';
 import Box from '@mui/material/Box';
@@ -23,7 +24,10 @@ import { useJira } from '../../hooks/useJira';
 import { isJiraDashboardAvailable } from '../../plugin';
 import { JiraDataResponse } from '@axis-backstage/plugin-jira-dashboard-common';
 
-export const JiraDashboardContent = (props?: { annotationPrefix?: string }) => {
+export const JiraDashboardContent = (props?: {
+  annotationPrefix?: string;
+  showFilters?: TableFilter[] | boolean;
+}) => {
   const { entity } = useEntity();
   const api = useApi(jiraDashboardApiRef);
 
@@ -85,7 +89,10 @@ export const JiraDashboardContent = (props?: { annotationPrefix?: string }) => {
             </Grid>
             {jiraResponse.data.map((value: JiraDataResponse) => (
               <Grid data-testid="issue-table" key={value.name} md={6} xs={12}>
-                <JiraTable tableContent={value} />
+                <JiraTable
+                  tableContent={value}
+                  showFilters={props?.showFilters}
+                />
               </Grid>
             ))}
           </>

diff --git a/plugins/jira-dashboard/src/components/JiraTable/JiraTable.tsx b/plugins/jira-dashboard/src/components/JiraTable/JiraTable.tsx
@@ -4,9 +4,16 @@ import {
   Issue,
   JiraDataResponse,
 } from '@axis-backstage/plugin-jira-dashboard-common';
-import { ErrorPanel, Table, TableColumn } from '@backstage/core-components';
+import {
+  ErrorPanel,
+  InfoCard,
+  Table,
+  TableColumn,
+  TableFilter,
+} from '@backstage/core-components';
 import { capitalize } from 'lodash';
 import { columns } from './columns';
+import { transformAssignees } from '../../lib';
 
 // Infer the prop types from the Table component
 type TableComponentProps = React.ComponentProps<typeof Table>;
@@ -15,17 +22,20 @@ type Props = {
   tableContent: JiraDataResponse;
   tableColumns?: TableColumn<Issue>[];
   tableStyle?: TableComponentProps['style'];
+  showFilters?: TableFilter[] | boolean;
 };
 
 export const JiraTable = ({
   tableContent,
   tableColumns = columns,
   tableStyle = {
-    height: '500px',
+    height: 'max-content',
+    maxHeight: '500px',
     padding: '20px',
     overflowY: 'auto',
     width: '100%',
   },
+  showFilters,
 }: Props) => {
   if (!tableContent) {
     return (
@@ -35,20 +45,69 @@ export const JiraTable = ({
       />
     );
   }
+
+  transformAssignees(tableContent.issues);
+
   const nbrOfIssues = tableContent?.issues?.length ?? 0;
 
+  const defaultFilters: TableFilter[] = [
+    { column: 'Status', type: 'multiple-select' },
+    { column: 'P', type: 'multiple-select' },
+    { column: 'Assignee', type: 'multiple-select' },
+  ];
+
+  let filters: TableFilter[] = [];
+
+  if (showFilters) {
+    if (Array.isArray(showFilters)) {
+      filters = showFilters;
+    } else {
+      filters = defaultFilters;
+    }
+  }
+
+  const title = (
+    <Typography component="div" variant="h5" data-testid="table-header">
+      {`${capitalize(tableContent.name)} (${nbrOfIssues})`}
+    </Typography>
+  );
+
+  if (showFilters) {
+    return (
+      <InfoCard title={title}>
+        <Table<Issue>
+          options={{
+            paging: false,
+            padding: 'dense',
+            search: true,
+          }}
+          filters={filters}
+          emptyContent={
+            <Typography display="flex" justifyContent="center" pt={30}>
+              No issues found&nbsp;
+            </Typography>
+          }
+          data={tableContent.issues || []}
+          columns={tableColumns}
+          style={{
+            ...tableStyle,
+            padding: '0px',
+            boxShadow: 'none',
+          }}
+        />
+      </InfoCard>
+    );
+  }
+
   return (
     <Table<Issue>
-      title={
-        <Typography component="div" variant="h5" data-testid="table-header">
-          {`${capitalize(tableContent.name)} (${nbrOfIssues})`}
-        </Typography>
-      }
+      title={title}
       options={{
         paging: false,
         padding: 'dense',
         search: true,
       }}
+      filters={filters}
       emptyContent={
         <Typography display="flex" justifyContent="center" pt={30}>
           No issues found&nbsp;

diff --git a/plugins/jira-dashboard/src/components/JiraTable/columns.tsx b/plugins/jira-dashboard/src/components/JiraTable/columns.tsx
@@ -114,7 +114,7 @@ export const columnStatus: TableColumn<Issue> = {
 
 export const columnAssignee: TableColumn<Issue> = {
   title: 'Assignee',
-  field: 'fields.assignee.displayName',
+  field: 'fields.assignee.name',
   highlight: true,
   type: 'string',
   width: '20%',

diff --git a/plugins/jira-dashboard/src/lib.ts b/plugins/jira-dashboard/src/lib.ts
@@ -1,4 +1,4 @@
-import { Project } from '@axis-backstage/plugin-jira-dashboard-common';
+import { Issue, Project } from '@axis-backstage/plugin-jira-dashboard-common';
 
 export const getJiraBaseUrl = (a: string) => {
   const url = new URL(a);
@@ -19,3 +19,20 @@ export const getProjectUrl = (project: Project) => {
 export const getIssueUrl = (issueUrl: string, issueKey: string) => {
   return `${getJiraBaseUrl(issueUrl)}/browse/${issueKey}`;
 };
+
+export const transformAssignees = (issues: Issue[]): Issue[] => {
+  const unAssigned = {
+    name: 'unassigned',
+    self: '',
+    key: 'unassigned',
+    displayName: 'Unassigned',
+    avatarUrls: { '48x48': '' },
+  };
+
+  return issues.map(issue => {
+    if (!issue.fields.assignee) {
+      issue.fields.assignee = unAssigned;
+    }
+    return issue;
+  });
+};