feat(github-pull-requests-board): add composable home page component for pull request board

workspaces/github-pull-requests-board/.changeset/plenty-apes-sin.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-github-pull-requests-board': minor
+---
+
+Adds a composable home page component to view pull requests for a team's repositories

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/package.json

@@ -62,6 +62,8 @@
     "@backstage/frontend-plugin-api": "^0.10.0",
     "@backstage/integration": "^1.16.2",
     "@backstage/plugin-catalog-react": "^1.16.0",
+    "@backstage/plugin-home": "^0.8.7",
+    "@backstage/plugin-home-react": "^0.1.25",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/report-alpha.api.md

@@ -121,9 +121,11 @@ const _default: FrontendPlugin<
         defaultTitle: string;
         defaultGroup?:
           | (string & {})
+          | 'overview'
           | 'documentation'
           | 'development'
           | 'deployment'
+          | 'operation'
           | 'observability'
           | undefined;
         routeRef?: RouteRef<AnyRouteRefParams> | undefined;

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/report.api.md

@@ -5,7 +5,9 @@
 ```ts
 /// <reference types="react" />
 
+import { CardExtensionProps } from '@backstage/plugin-home-react';
 import { JSX as JSX_2 } from 'react';
+import { JSX as JSX_3 } from 'react/jsx-runtime';
 
 // @public (undocumented)
 export const EntityTeamPullRequestsCard: (
@@ -29,5 +31,10 @@ export interface EntityTeamPullRequestsContentProps {
   pullRequestLimit?: number;
 }
 
+// @public (undocumented)
+export const HomePageTeamPullRequestsCard: (
+  props: CardExtensionProps<unknown>,
+) => JSX_3.Element;
+
 // (No @packageDocumentation comment for this package)
 ```

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/components/HomePageTeamPullRequestsCard/Content.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useTeamPullRequestsContext } from './Context';
+import { EntityTeamPullRequestsCard } from '../EntityTeamPullRequestsCard';
+import Typography from '@material-ui/core/Typography';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+
+export const Content = () => {
+  const { entity } = useTeamPullRequestsContext();
+
+  if (!entity) {
+    return (
+      <Typography variant="body1">
+        Please select a team to view pull requests for
+      </Typography>
+    );
+  }
+
+  return (
+    <EntityProvider entity={entity}>
+      <EntityTeamPullRequestsCard />
+    </EntityProvider>
+  );
+};

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/components/HomePageTeamPullRequestsCard/Context.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { GroupEntity } from '@backstage/catalog-model';
+import { useApi } from '@backstage/frontend-plugin-api';
+import {
+  catalogApiRef,
+  CATALOG_FILTER_EXISTS,
+} from '@backstage/plugin-catalog-react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+type TeamPullRequestsContextValue = {
+  loading: boolean;
+  handleChangeType: Function;
+  entity: GroupEntity | null;
+  teams: GroupEntity[];
+};
+
+const TEAM_PULL_REQUEST_STORAGE_KEY = '/home/team-pull-requests-card';
+
+const Context = createContext<TeamPullRequestsContextValue | undefined>(
+  undefined,
+);
+
+export const ContextProvider = (props: { children: JSX.Element }) => {
+  const { children } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [entity, setEntity] = useState<GroupEntity | null>(() => {
+    const stored = localStorage.getItem(TEAM_PULL_REQUEST_STORAGE_KEY);
+    return stored ? JSON.parse(stored) : null;
+  });
+  const [teams, setTeams] = useState<GroupEntity[]>([]);
+
+  const catalogApi = useApi(catalogApiRef);
+
+  const handleChangeType = (group: GroupEntity | null) => {
+    setEntity(group);
+  };
+
+  const fetchTeams = useCallback(async () => {
+    const { items: githubTeams } = await catalogApi.getEntities({
+      filter: {
+        kind: 'Group',
+        'metadata.annotations.github.com/team-slug': CATALOG_FILTER_EXISTS,
+      },
+    });
+    setTeams(githubTeams as GroupEntity[]);
+  }, [catalogApi]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetchTeams();
+    setLoading(false);
+  }, [fetchTeams]);
+
+  // Persist entity to localStorage whenever it changes
+  useEffect(() => {
+    if (entity) {
+      localStorage.setItem(
+        TEAM_PULL_REQUEST_STORAGE_KEY,
+        JSON.stringify(entity),
+      );
+    } else {
+      localStorage.removeItem(TEAM_PULL_REQUEST_STORAGE_KEY);
+    }
+  }, [entity]);
+
+  return (
+    <Context.Provider
+      value={{
+        handleChangeType,
+        loading,
+        entity,
+        teams,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useTeamPullRequestsContext = () => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error(
+      'useTeamPullRequestsContext must be used within a ContextProvider',
+    );
+  }
+  return context;
+};
+
+export default ContextProvider;

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/components/HomePageTeamPullRequestsCard/Settings.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useTeamPullRequestsContext } from './Context';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import type { GroupEntity } from '@backstage/catalog-model';
+import TextField from '@material-ui/core/TextField';
+
+export const Settings = () => {
+  const { handleChangeType, teams, entity } = useTeamPullRequestsContext();
+
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">
+        Select Team to view pull requests for
+      </FormLabel>
+      <Autocomplete
+        options={teams || []}
+        getOptionLabel={option =>
+          `${option.metadata?.annotations?.['github.com/team-slug']}`
+        }
+        onChange={(_event, value) => {
+          handleChangeType(value as GroupEntity);
+        }}
+        value={entity}
+        renderInput={params => <TextField {...params} />}
+      />
+    </FormControl>
+  );
+};

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/components/HomePageTeamPullRequestsCard/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './Content';
+export * from './Context';
+export * from './Settings';

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/index.ts

@@ -16,6 +16,7 @@
 export {
   EntityTeamPullRequestsCard,
   EntityTeamPullRequestsContent,
+  HomePageTeamPullRequestsCard,
 } from './plugin';
 export type { EntityTeamPullRequestsCardProps } from './components/EntityTeamPullRequestsCard';
 export type { EntityTeamPullRequestsContentProps } from './components/EntityTeamPullRequestsContent';

workspaces/github-pull-requests-board/plugins/github-pull-requests-board/src/plugin.ts

@@ -19,6 +19,8 @@ import {
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
 import { rootRouteRef } from './routes';
+import { createCardExtension } from '@backstage/plugin-home-react';
+import { homePlugin } from '@backstage/plugin-home';
 
 const githubPullRequestsBoardPlugin = createPlugin({
   id: 'github-pull-requests-board',
@@ -52,3 +54,17 @@ export const EntityTeamPullRequestsContent =
       mountPoint: rootRouteRef,
     }),
   );
+
+/** @public */
+export const HomePageTeamPullRequestsCard = homePlugin.provide(
+  createCardExtension({
+    name: 'HomePageTeamPullRequestsCard',
+    title: 'GitHub Team Pull Requests',
+    components: () => import('./components/HomePageTeamPullRequestsCard'),
+    description: 'Display GitHub pull requests for a team',
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 12 },
+    },
+  }),
+);