Merge pull request backstage#18682 from ivangonzalezacuna/feat/homepa…

…ge-allow-hide-card-title

(feat): Allow hiding card title in custom homepage cards

.changeset/mean-squids-relax.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home-react': patch
+---
+
+Make `title` optional when defining the `createCardExtension`

.changeset/stupid-berries-run.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Make sure the widget name is never empty in the `AddWidgetDialog`. If the title was set to "", the entry would contain an empty string. Use the name as a fallback

plugins/home-react/api-report.md

@@ -55,7 +55,7 @@ export type ComponentRenderer = {
 
 // @public
 export function createCardExtension<T>(options: {
-  title: string;
+  title?: string;
   components: () => Promise<ComponentParts>;
   name?: string;
   description?: string;
@@ -65,14 +65,14 @@ export function createCardExtension<T>(options: {
 
 // @public (undocumented)
 export type RendererProps = {
-  title: string;
+  title?: string;
 } & ComponentParts;
 
 // @public (undocumented)
 export const SettingsModal: (props: {
   open: boolean;
   close: Function;
-  componentName: string;
+  componentName?: string;
   children: JSX.Element;
 }) => JSX.Element;
 ```

plugins/home-react/src/components/SettingsModal.tsx

@@ -27,14 +27,16 @@ import {
 export const SettingsModal = (props: {
   open: boolean;
   close: Function;
-  componentName: string;
+  componentName?: string;
   children: JSX.Element;
 }) => {
   const { open, close, componentName, children } = props;
 
   return (
     <Dialog open={open} onClose={() => close()}>
-      <DialogTitle>Settings - {componentName}</DialogTitle>
+      <DialogTitle>
+        {componentName ? `Settings - ${componentName}` : 'Settings'}
+      </DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions>
         <Button onClick={() => close()} color="primary" variant="contained">

plugins/home-react/src/extensions.tsx

@@ -42,7 +42,7 @@ export type ComponentParts = {
 /**
  * @public
  */
-export type RendererProps = { title: string } & ComponentParts;
+export type RendererProps = { title?: string } & ComponentParts;
 
 /**
  * @public
@@ -79,7 +79,7 @@ export type CardConfig = {
  * @public
  */
 export function createCardExtension<T>(options: {
-  title: string;
+  title?: string;
   components: () => Promise<ComponentParts>;
   name?: string;
   description?: string;
@@ -113,7 +113,6 @@ export function createCardExtension<T>(options: {
 
 type CardExtensionComponentProps<T> = CardExtensionProps<T> &
   ComponentParts & {
-    title: string;
     isCustomizable?: boolean;
     overrideTitle?: string;
   };
@@ -137,7 +136,7 @@ function CardExtension<T>(props: CardExtensionComponentProps<T>) {
     return (
       <Suspense fallback={<Progress />}>
         <Renderer
-          title={title}
+          {...(title && { title })}
           {...{
             Content,
             ...(Actions ? { Actions } : {}),
@@ -151,7 +150,7 @@ function CardExtension<T>(props: CardExtensionComponentProps<T>) {
   }
 
   const cardProps = {
-    title: title,
+    ...(title && { title }),
     ...(Settings && !isCustomizable
       ? {
           action: (

plugins/home/README.md

@@ -176,6 +176,8 @@ properties. The `settings.schema` object should follow
 must be `object`. As well, the `uiSchema` can be defined if a certain UI style needs to be applied fo any of the defined
 properties. More documentation [here](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema).
 
+If you want to hide the card title, you can do it by setting a `name` and leaving the `title` empty.
+
 ```tsx
 import { createCardExtension } from '@backstage/plugin-home-react';
 

plugins/home/api-report.md

@@ -42,7 +42,7 @@ export type ClockConfig = {
 
 // @public (undocumented)
 export const ComponentAccordion: (props: {
-  title: string;
+  title?: string | undefined;
   expanded?: boolean | undefined;
   Content: () => JSX.Element;
   Actions?: (() => JSX.Element) | undefined;
@@ -156,7 +156,7 @@ export type RendererProps = RendererProps_2;
 export const SettingsModal: (props: {
   open: boolean;
   close: Function;
-  componentName: string;
+  componentName?: string | undefined;
   children: JSX.Element;
 }) => JSX.Element;
 

plugins/home/src/componentRenderers/ComponentAccordion.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export const ComponentAccordion = (props: {
-  title: string;
+  title?: string;
   expanded?: boolean;
   Content: () => JSX.Element;
   Actions?: () => JSX.Element;

plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx

@@ -29,7 +29,7 @@ interface AddWidgetDialogProps {
 }
 
 const getTitle = (widget: Widget) => {
-  return widget.title ?? widget.name;
+  return widget.title || widget.name;
 };
 
 export const AddWidgetDialog = (props: AddWidgetDialogProps) => {