fix double border issue with the widgets

Author: debsmita1

workspaces/homepage/.changeset/mui-v5-homepage.md

@@ -3,3 +3,4 @@
 ---
 
 Replace Material UI v4 with MUI v5 and scope JSS class names to prevent style collisions.
+Fix double border issue in the widgets

workspaces/homepage/plugins/dynamic-home-page/report-alpha.api.md

@@ -48,12 +48,12 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'onboarding.learn.ariaLabel': string;
     readonly 'entities.title': string;
     readonly 'entities.error': string;
-    readonly 'entities.description': string;
     readonly 'entities.close': string;
     readonly 'entities.empty': string;
     readonly 'entities.fetchError': string;
     readonly 'entities.emptyDescription': string;
     readonly 'entities.register': string;
+    readonly 'entities.description': string;
     readonly 'entities.browseTheCatalog': string;
   }
 >;

workspaces/homepage/plugins/dynamic-home-page/report.api.md

@@ -260,4 +260,6 @@ export interface WorldClockProps {
   // (undocumented)
   worldClocks: ClockConfig[];
 }
+
+// (No @packageDocumentation comment for this package)
 ```

workspaces/homepage/plugins/dynamic-home-page/src/alpha/components/CustomizableGridLayout.tsx

@@ -28,6 +28,8 @@ import {
 } from '@backstage/plugin-home';
 import { useTheme } from '@mui/material/styles';
 import GlobalStyles from '@mui/material/GlobalStyles';
+
+import { cardWrapperSx } from '../../styles/cardWrapperSx';
 import { HomePageCardConfig } from '../../types';
 import { useContainerQuery } from '../../hooks/useContainerQuery';
 
@@ -91,6 +93,7 @@ export const CustomizableGridLayout = ({
                 ? 'rgba(20, 20, 20, 0.95) !important'
                 : 'rgba(40, 40, 40, 0.93) !important',
           },
+          '[class*="widgetWrapper"]': cardWrapperSx,
         }}
       />
       <div

workspaces/homepage/plugins/dynamic-home-page/src/alpha/components/ReadOnlyGirdLayout.tsx

@@ -79,16 +79,7 @@ const defaultProps: ResponsiveProps = {
   compactType: null,
 };
 
-const cardWrapperSx = {
-  '& > div[class*="MuiCard-root"]': {
-    width: '100%',
-    height: '100%',
-  },
-  '& div[class*="MuiCardContent-root"]': {
-    overflow: 'auto',
-  },
-};
-
+import { cardWrapperSx } from '../../styles/cardWrapperSx';
 /**
  * Props for the read-only grid layout.
  * @alpha

workspaces/homepage/plugins/dynamic-home-page/src/alpha/extensions/homePageCards.tsx

@@ -17,6 +17,7 @@
 import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
 import homePlugin from '@backstage/plugin-home/alpha';
 import { compatWrapper } from '@backstage/core-compat-api';
+import { homepageMessages } from '../../translations/ref';
 
 const defaultCardLayout = {
   width: {
@@ -41,9 +42,11 @@ export const onboardingSectionWidget = HomePageWidgetBlueprint.make({
     name: 'Red Hat Developer Hub - Onboarding',
     layout: defaultCardLayout,
     components: () =>
-      import('../../components/OnboardingSection').then(m => ({
-        Content: m.OnboardingSection,
-      })),
+      import('../../components/OnboardingSection/OnboardingSection').then(
+        m => ({
+          Content: m.OnboardingSectionContent,
+        }),
+      ),
   },
 });
 
@@ -55,10 +58,11 @@ export const entitySectionWidget = HomePageWidgetBlueprint.make({
   name: 'rhdh-entity-section',
   params: {
     name: 'Red Hat Developer Hub - Software Catalog',
+    title: homepageMessages.entities.title,
     layout: defaultCardLayout,
     components: () =>
-      import('../../components/EntitySection').then(m => ({
-        Content: () => compatWrapper(<m.EntitySection />),
+      import('../../components/EntitySection/EntitySection').then(m => ({
+        Content: m.EntitySectionContent,
       })),
   },
 });
@@ -71,10 +75,11 @@ export const templateSectionWidget = HomePageWidgetBlueprint.make({
   name: 'rhdh-template-section',
   params: {
     name: 'Red Hat Developer Hub - Explore templates',
+    title: homepageMessages.templates.title,
     layout: defaultCardLayout,
     components: () =>
-      import('../../components/TemplateSection').then(m => ({
-        Content: m.TemplateSection,
+      import('../../components/TemplateSection/TemplateSection').then(m => ({
+        Content: m.TemplateSectionContent,
       })),
   },
 });
@@ -87,10 +92,11 @@ export const quickAccessCardWidget = HomePageWidgetBlueprint.make({
   name: 'quick-access-card',
   params: {
     name: 'Quick Access Card',
+    title: homepageMessages.quickAccess.title,
     layout: defaultCardLayout,
     components: () =>
       import('../../components/QuickAccessCard').then(m => ({
-        Content: () => compatWrapper(<m.QuickAccessCard />),
+        Content: m.QuickAccessCardContent,
       })),
   },
 });
@@ -121,6 +127,17 @@ export const searchBarWidget = HomePageWidgetBlueprint.make({
   },
 });
 
+/**
+ * Renders a legacy plugin-home CardExtension directly, skipping the NFS
+ * CardExtension InfoCard shell. Used when upstream only exports full cards
+ * (not Content) from the public API.
+ */
+const legacyHomeCardRenderer = ({
+  Content,
+}: {
+  Content: React.ComponentType;
+}) => compatWrapper(<Content />);
+
 /**
  * NFS widget: FeaturedDocsCard (migrated from mountPoint home.page/cards).
  * @alpha
@@ -133,6 +150,7 @@ export const featuredDocsCardWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('../../components/FeaturedDocsCard').then(m => ({
         Content: m.FeaturedDocsCard,
+        Renderer: legacyHomeCardRenderer,
       })),
   },
 });
@@ -172,6 +190,7 @@ export const RecentlyVisitedWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('@backstage/plugin-home').then(m => ({
         Content: m.HomePageRecentlyVisited,
+        Renderer: legacyHomeCardRenderer,
       })),
   },
 });
@@ -187,7 +206,8 @@ export const TopVisitedWidget = HomePageWidgetBlueprint.make({
     name: 'Top visited',
     components: () =>
       import('@backstage/plugin-home').then(m => ({
-        Content: () => <m.HomePageTopVisited />,
+        Content: m.HomePageTopVisited,
+        Renderer: legacyHomeCardRenderer,
       })),
   },
 });

workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.test.tsx

@@ -19,7 +19,7 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-import { EntitySection } from './EntitySection';
+import { EntitySection } from '../legacy/HomePageLegacyCards';
 import { useEntities } from '../../hooks/useEntities';
 
 // jsdom does not provide ResizeObserver; required by useContainerQuery in EntitySection

workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx

@@ -49,6 +49,7 @@ import {
   useContainerQuery,
   type ContainerSize,
 } from '../../hooks/useContainerQuery';
+import { sectionContentContainerSx } from '../../styles/sectionCardSx';
 
 const StyledLink = styled(BackstageLink)(({ theme }) => ({
   textDecoration: 'none',
@@ -59,7 +60,7 @@ const StyledLink = styled(BackstageLink)(({ theme }) => ({
   borderRadius: 4,
 }));
 
-export const EntitySection = () => {
+export const EntitySectionContent = () => {
   const theme = useTheme();
   const { t } = useTranslation();
   const { displayName, loading: profileLoading } = useUserProfile();
@@ -285,46 +286,15 @@ export const EntitySection = () => {
   }
 
   return (
-    <Card
-      elevation={0}
-      sx={{
-        padding: '24px',
-        border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,
-        containerType: 'inline-size',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Typography
-        variant="h3"
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: '500',
-          fontSize: '1.5rem',
-          flexShrink: 0,
-        }}
-      >
-        {t('entities.title')}
-      </Typography>
-      <Box
-        ref={containerRef}
-        sx={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: 'auto',
-          mt: 1,
-        }}
-      >
-        {content}
-        {entities?.length > 0 && (
-          <Box sx={{ pt: 2 }}>
-            <ViewMoreLink to="/catalog">
-              {t('entities.browseTheCatalog')}
-            </ViewMoreLink>
-          </Box>
-        )}
-      </Box>
-    </Card>
+    <Box ref={containerRef} sx={sectionContentContainerSx}>
+      {content}
+      {entities?.length > 0 && (
+        <Box sx={{ pt: 2 }}>
+          <ViewMoreLink to="/catalog">
+            {t('entities.browseTheCatalog')}
+          </ViewMoreLink>
+        </Box>
+      )}
+    </Box>
   );
 };

workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/index.ts

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { EntitySection } from './EntitySection';
-export { EntitySection as default } from './EntitySection';
+export { EntitySectionContent } from './EntitySection';
+export { EntitySection } from '../legacy/HomePageLegacyCards';
+export { EntitySection as default } from '../legacy/HomePageLegacyCards';

workspaces/homepage/plugins/dynamic-home-page/src/components/FeaturedDocsCard.tsx

@@ -27,6 +27,8 @@ import { useTranslation } from '../hooks/useTranslation';
  *
  * 1. To fix the all uppercase that is used in home plugin
  * 2. To add a small missing gap between the title and the button
+ *
+ * @public
  */
 export const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {
   const { t } = useTranslation();