feat(home): add composable home page widget grid

.changeset/ready-taxis-prove.md

@@ -0,0 +1,5 @@
+---
+'@openchoreo/backstage-portal-app': patch
+---
+
+Add composable home page widget grid (Recently Visited, My Projects, Quick Actions, Recent Deployments) with Edit/Add Widget/Save controls; default view matches the existing home page layout

packages/portal-app/package.json

@@ -52,6 +52,7 @@
     "@backstage/plugin-catalog-import": "^0.13.13",
     "@backstage/plugin-catalog-react": "^3.0.0",
     "@backstage/plugin-home": "^0.9.6",
+    "@backstage/plugin-home-react": "^0.1.38",
     "@backstage/plugin-kubernetes": "^0.12.19",
     "@backstage/plugin-org": "^0.7.4",
     "@backstage/plugin-permission-common": "^0.9.9",

packages/portal-app/src/components/Home/HomePage.tsx

@@ -1,17 +1,31 @@
 import { Content, Page, Header } from '@backstage/core-components';
-import { HomePageStarredEntities } from '@backstage/plugin-home';
-import { RecentlyVisitedCard } from './RecentlyVisitedCard';
+import {
+  HomePageStarredEntities,
+  CustomHomepageGrid,
+  type LayoutConfiguration,
+} from '@backstage/plugin-home';
 import { HomePageSearchBar } from '@backstage/plugin-search';
 import { SearchContextProvider } from '@backstage/plugin-search-react';
 import { Grid, Typography, Box } from '@material-ui/core';
 import { useStyles } from './styles';
 import { useUserInfo } from '../../hooks';
 import { useNamespacePermission } from '@openchoreo/backstage-plugin-react';
 import { HomePagePlatformDetailsCard } from '@openchoreo/backstage-plugin-platform-engineer-core';
+import {
+  RecentlyVisitedHomeWidget,
+  MyProjectsHomeWidget,
+  QuickActionsHomeWidget,
+  RecentDeploymentsHomeWidget,
+} from './homeWidgets';
 
 /**
  * Custom HomePage that shows content based on user permissions
  */
+const defaultLayout: LayoutConfiguration[] = [
+  { component: 'HomePageStarredEntities', x: 0, y: 0, width: 6, height: 4 },
+  { component: 'RecentlyVisited', x: 6, y: 0, width: 6, height: 4 },
+];
+
 export const HomePage = () => {
   const classes = useStyles();
   const { userName, loading } = useUserInfo();
@@ -33,45 +47,38 @@ export const HomePage = () => {
       <Page themeId="home">
         <Header title={`Welcome, ${userName}!`} />
         <Content>
-          <Grid container spacing={3}>
-            {/* Search Bar */}
-            <Grid item xs={12}>
-              <HomePageSearchBar
-                InputProps={{
-                  classes: {
-                    root: classes.searchBarInput,
-                    notchedOutline: classes.searchBarOutline,
-                  },
-                }}
-                placeholder="Search"
-              />
-            </Grid>
+          {/* Search Bar */}
+          <Box mb={3}>
+            <HomePageSearchBar
+              InputProps={{
+                classes: {
+                  root: classes.searchBarInput,
+                  notchedOutline: classes.searchBarOutline,
+                },
+              }}
+              placeholder="Search"
+            />
+          </Box>
 
-            {/* Starred Entities and Recently Visited */}
-            <Grid item xs={12}>
-              <Grid container spacing={3} alignItems="stretch">
-                <Grid item xs={12} md={6} style={{ display: 'flex' }}>
-                  <Box className={classes.starredEntitiesWrapper}>
-                    <HomePageStarredEntities />
-                  </Box>
-                </Grid>
-                <Grid item xs={12} md={6} style={{ display: 'flex' }}>
-                  <Box className={classes.starredEntitiesWrapper}>
-                    <RecentlyVisitedCard />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
+          {/* Customizable widget grid. */}
+          <CustomHomepageGrid config={defaultLayout}>
+            <HomePageStarredEntities />
+            <RecentlyVisitedHomeWidget />
+            <MyProjectsHomeWidget />
+            <QuickActionsHomeWidget />
+            <RecentDeploymentsHomeWidget />
+          </CustomHomepageGrid>
 
-            {/* Platform Details - visible only with namespace read permission */}
-            {canViewPlatformDetails && (
+          {/* Platform Details stays outside the grid on purpose. */}
+          {canViewPlatformDetails && (
+            <Grid container spacing={3} style={{ marginTop: 24 }}>
               <Grid item xs={12}>
                 <Box className={classes.platformDetailsSection}>
                   <HomePagePlatformDetailsCard />
                 </Box>
               </Grid>
-            )}
-          </Grid>
+            </Grid>
+          )}
         </Content>
       </Page>
     </SearchContextProvider>

packages/portal-app/src/components/Home/homeWidgets.tsx

@@ -0,0 +1,53 @@
+import { homePlugin } from '@backstage/plugin-home';
+import { createCardExtension } from '@backstage/plugin-home-react';
+import { RecentlyVisitedCard } from './RecentlyVisitedCard';
+import { RecentDeploymentsCard } from './RecentDeploymentsCard';
+import {
+  MyProjectsWidget,
+  QuickActionsSection,
+} from '@openchoreo/backstage-plugin';
+
+export const RecentlyVisitedHomeWidget = homePlugin.provide(
+  createCardExtension({
+    name: 'RecentlyVisited',
+    components: async () => ({ Content: RecentlyVisitedCard }),
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 4 },
+    },
+  }),
+);
+
+export const MyProjectsHomeWidget = homePlugin.provide(
+  createCardExtension({
+    name: 'MyProjects',
+    components: async () => ({ Content: MyProjectsWidget }),
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 4 },
+    },
+  }),
+);
+
+export const QuickActionsHomeWidget = homePlugin.provide(
+  createCardExtension({
+    name: 'QuickActions',
+    title: 'Quick Actions',
+    components: async () => ({ Content: QuickActionsSection }),
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 4 },
+    },
+  }),
+);
+
+export const RecentDeploymentsHomeWidget = homePlugin.provide(
+  createCardExtension({
+    name: 'RecentDeployments',
+    components: async () => ({ Content: RecentDeploymentsCard }),
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 4 },
+    },
+  }),
+);

plugins/openchoreo/src/components/HomePage/QuickActionsSection/QuickActions.tsx

@@ -12,7 +12,7 @@ import { Link } from 'react-router-dom';
 import { useComponentCreatePermission } from '@openchoreo/backstage-plugin-react';
 import { useStyles } from './styles';
 
-export const QuickActionsSection: React.FC = () => {
+export const QuickActionsSection = () => {
   const classes = useStyles();
   const { canCreate, loading: createPermLoading } =
     useComponentCreatePermission();