first commit

Signed-off-by: Abhay-soni-developer <abhaysoni.developer@gmail.com>

Author: Abhay-soni-developer

README.md

@@ -1,3 +1,35 @@
 # GitHub Homepage Cards for Backstage Enterprise
 
-A plugin to showcase Recent Pull Requests and Actions pipeline relevant to the user at the homepage in Backstage Enterprise.
+This plugin is contributed by Statusneo.
+<img src="https://raw.githubusercontent.com/StatusNeo/backstage-plugin-github/main/src/assets/statusneo.png"/>
+To read more about this plugin please read this [blog](https://statusneo.com/23468-2).
+
+# Setup
+Before you can start using the GitHub cards, you must set up a GitHub provider.
+You can follow this page which will guide you through the process of setting up the GitHub provider for your backstage instance.
+[Setup GitHub Provider](https://backstage.io/docs/auth/github/provider/)
+
+Now in the below steps, I will assume you are already done with the provider.
+## Integration Steps
+1. First Install the Github cards plugin by running this command from the root of the package.
+```shell
+yarn add –cwd packages/app @statusneo/backstage-github-plugin
+```
+
+2. Import GithubPullRequestsCard, and GithubActionsCard from the installed package
+3. You can then use these components at the backstage frontend wherever you need.
+
+```javascript
+import { GithubPullRequestsCard, GithubActionsCard } from '@statusneo/backstage-plugin-github';
+
+// ...
+              <Grid item xs={12} md={6}>
+                <GithubActionsCard />
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <GithubPullRequestsCard />
+              </Grid>
+// ...
+```
+
+Now you are ready to use this backstage GitHub plugin to make your software management and development cycle a little more hassle-free.

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@statusneo/backstage-plugin-github",
+  "version": "0.1.3",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "author": {
+    "email": "reach@statusneo.com",
+    "url": "https://statusneo.com/",
+    "name": "statusneo"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.12.3",
+    "@backstage/core-plugin-api": "^1.3.0",
+    "@backstage/errors": "^1.1.4",
+    "@backstage/theme": "^0.2.16",
+    "@material-table/core": "v3.1.0",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@tanstack/react-query": "^4.22.0",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.22.1",
+    "@backstage/core-app-api": "^1.4.0",
+    "@backstage/dev-utils": "^1.0.11",
+    "@backstage/test-utils": "^1.2.4",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "*",
+    "cross-fetch": "^3.1.5",
+    "msw": "^0.49.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "contributors": [{
+    "email": "abhaysoni.developer@gmail.com",
+    "url": "https://github.com/Abhay-soni-developer",
+    "name": "abhaysoni"
+  }],
+  "maintainers": [{
+    "email": "abhaysoni.developer@gmail.com",
+    "url": "https://github.com/Abhay-soni-developer",
+    "name": "abhaysoni"
+  }],
+  "keywords": ["backstage", "statusneo", "github"]
+}

src/api/GithubApi.ts

@@ -0,0 +1,15 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+import { SearchApiResponse, UserProfile, UserRepositoryApiRequest, UserRepositoryApiResponse, WorkflowRunApiRequest, WorkflowRunApiResponse, WorkflowRunJobApiRequest, WorkflowRunJobApiResponse } from '../utils/types';
+
+export interface GithubApi {
+  getUserPullRequest: (params: any) => Promise<SearchApiResponse>;
+  getAuthenticatedUser: ()=>Promise<UserProfile>
+  getAuthenticatedUserToken: ()=>Promise<string>
+  getWorkflowRuns: (params: WorkflowRunApiRequest)=>Promise<WorkflowRunApiResponse>
+  getWorkflowJobsByWorkflowId: (params: WorkflowRunJobApiRequest)=>Promise<WorkflowRunJobApiResponse>
+  getAuthenticatedUserReposByType: (params: UserRepositoryApiRequest) => Promise<UserRepositoryApiResponse>
+}
+
+export const githubApiRef = createApiRef<GithubApi>({
+  id: 'plugin.github.service',
+});

src/api/GithubClient.ts

@@ -0,0 +1,92 @@
+import { GithubApi } from './GithubApi';
+import { OAuthApi, FetchApi } from '@backstage/core-plugin-api';
+import { ResponseError } from '@backstage/errors';
+import {
+  SearchApiFetchRequest,
+  SearchApiResponse,
+  UserProfile,
+  UserRepositoryApiRequest,
+  UserRepositoryApiResponse,
+  WorkflowRunApiRequest,
+  WorkflowRunApiResponse,
+  WorkflowRunJobApiRequest,
+  WorkflowRunJobApiResponse,
+} from '../utils/types';
+
+/** @public */
+export class GithubClient implements GithubApi {
+  private readonly authApi: OAuthApi;
+  private readonly fetchApi: FetchApi;
+
+  constructor(options: { authApi: OAuthApi; fetchApi: FetchApi }) {
+    this.authApi = options.authApi;
+    this.fetchApi = options.fetchApi;
+  }
+
+  private async get<T>(
+    path: string,
+    params: { [key in string]: any } = {},
+  ): Promise<T> {
+    const query = new URLSearchParams(params);
+    const url = new URL(
+      `${path}?${query.toString().replaceAll('%2B', '+')}`,
+      'https://api.github.com/',
+    );
+
+    const token = await this.authApi.getAccessToken();
+
+    const response = await this.fetchApi.fetch(url.toString(), {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+
+    return response.json() as Promise<T>;
+  }
+
+  public getUserPullRequest(
+    params: SearchApiFetchRequest,
+  ): Promise<SearchApiResponse> {
+    return this.get<SearchApiResponse>(`search/issues`, params);
+  }
+
+  public getAuthenticatedUser(): Promise<UserProfile> {
+    return this.get<UserProfile>('user', {});
+  }
+
+  public getAuthenticatedUserToken(): Promise<string> {
+    return this.authApi.getAccessToken();
+  }
+
+  public getWorkflowRuns(
+    params: WorkflowRunApiRequest,
+  ): Promise<WorkflowRunApiResponse> {
+    const { repoPath, ...queryParams } = params;
+    return this.get<WorkflowRunApiResponse>(
+      `repos/${repoPath}/actions/runs`,
+      queryParams,
+    );
+  }
+
+  public getWorkflowJobsByWorkflowId(
+    params: WorkflowRunJobApiRequest,
+  ): Promise<WorkflowRunJobApiResponse> {
+    const { repoPath, run_id } = params;
+    return this.get<WorkflowRunJobApiResponse>(
+      `repos/${repoPath}/actions/runs/${run_id}/jobs`,
+      {},
+    );
+  }
+
+  public getAuthenticatedUserReposByType (params: UserRepositoryApiRequest): Promise<UserRepositoryApiResponse> {
+    return this.get<UserRepositoryApiResponse>(
+      `/user/repos`,
+      params,
+    );  
+  }
+
+}

src/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./GithubApi";
+export * from "./GithubClient";

src/assets/github.svg

@@ -0,0 +1,157 @@
+import {
+  Table,
+  TableColumn
+} from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
+import { MTablePagination, MTableHeader } from '@material-table/core';
+import { withStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { UserProfile } from '../../utils/types';
+import { SignInContent } from '../SignInContent';
+
+export type CustomTableProps<T extends object> = {
+  title: string | JSX.Element;
+  subtitle: string;
+  columns: TableColumn<T>[];
+  data: T[];
+  isLoading: boolean;
+  signIn: (instantPopup: boolean) => void;
+  isSignedIn: boolean;
+  isInitialized: boolean;
+  isError: boolean;
+  error?: any;
+  user: UserProfile | null; // github user profile
+  detailPanel?: ({ rowData }: { rowData: T }) => React.ReactNode;
+  columnsButton?: boolean;
+} & PaginationProps &
+  SearchProps;
+
+type PaginationProps =
+  | {
+      paging?: never;
+      totalCount?: never;
+      page?: never;
+      setPage?: never;
+      pageSize?: never;
+      setPageSize?: never;
+    }
+  | {
+      paging: boolean;
+      totalCount: number;
+      page: number;
+      setPage: (newPage: number) => void;
+      pageSize: number;
+      setPageSize: (newPageSize: number) => void;
+    };
+
+type SearchProps =
+  | {
+      isSearchAvailable?: never;
+      setSearchText?: never;
+      searchPlaceholder?: never;
+      searchTooltip?: never;
+    }
+  | {
+      isSearchAvailable: boolean;
+      setSearchText: (searchText: string) => void;
+      searchPlaceholder?: string;
+      searchTooltip?: string;
+    };
+
+CustomTable.defaultProps = {
+  title: '',
+  subtitle: '',
+  columns: [],
+  data: [],
+  isLoading: false,
+  paging: false,
+  isSearchAvailable: false,
+  totalCount: 0,
+  searchPlaceholder: 'search',
+  searchTooltip: 'search',
+  pageSize: 0,
+  page: 1,
+  select: false,
+  columnsButton: false
+};
+
+const StyledMTableHeader = withStyles(
+  theme => ({
+    header: {
+      padding: theme.spacing(1, 2, 1, 2.5),
+      borderTop: `1px solid ${theme.palette.grey.A100}`,
+      borderBottom: `1px solid ${theme.palette.grey.A100}`,
+      // withStyles hasn't a generic overload for theme
+      color: (theme as BackstageTheme).palette.textSubtle,
+      fontWeight: 'bold',
+      position: 'static',
+      wordBreak: 'normal',
+    },
+  }),
+  { name: 'BackstageTableHeader' },
+)(MTableHeader);
+
+export function CustomTable<T extends object = {}>(props: CustomTableProps<T>) {
+  return (
+    <Table<T>
+      title={props.title}
+      subtitle={props.subtitle}
+      columns={props.columns}
+      isLoading={props.isLoading}
+      options={{
+        search: props.isSearchAvailable,
+        paging: props.paging,
+        padding: 'dense',
+        toolbar: true,
+        filtering: false,
+        showFirstLastPageButtons: true,
+        paginationType: 'stepped',
+        loadingType: 'linear',
+        emptyRowsWhenPaging: true,
+        tableLayout: 'auto',
+        debounceInterval: 350,
+        sorting: false,
+        columnsButton: props.columnsButton,
+      }}
+      localization={{
+        toolbar: {
+          searchPlaceholder: props.searchPlaceholder,
+          searchTooltip: props.searchTooltip,
+        },
+      }}
+      data={props.data}
+      onSearchChange={(searchText: string) => {
+        if (props.isSearchAvailable) {
+          props.setSearchText(searchText);
+        }
+      }}
+      emptyContent={
+        <>
+          {!props.isSignedIn && (
+            <SignInContent handleAuthClick={() => props.signIn(false)} />
+          )}
+        </>
+      }
+      components={{
+        Pagination: paginationProps => {
+          const { classes, ...remainingProps } = paginationProps;
+          return (
+            <MTablePagination
+              {...remainingProps}
+              page={props.page}
+              count={props.totalCount}
+              // @ts-ignore
+              onPageChange={(e: any, newPage: number) => {
+                if (props.paging) {
+                  props.setPage(newPage);
+                }
+              }}
+            />
+          );
+        },
+        Header: headerProps => <StyledMTableHeader {...headerProps} />,
+      }}
+      detailPanel={props.detailPanel}
+    />
+  );
+}

src/assets/statusneo.png

@@ -0,0 +1 @@
+export * from "./CustomTable"