From bf67dce73174e7c5087af7ed5d67b145ad75b105 Mon Sep 17 00:00:00 2001
From: ivgo <ivgo@spreadgroup.com>
Date: Tue, 18 Jul 2023 08:51:16 +0200
Subject: [PATCH] Make title a more optional parameter

Signed-off-by: ivgo <ivgo@spreadgroup.com>
---
 .changeset/mean-squids-relax.md                          | 5 +++++
 plugins/home-react/api-report.md                         | 6 +++---
 plugins/home-react/src/components/SettingsModal.tsx      | 6 ++++--
 plugins/home-react/src/extensions.tsx                    | 9 ++++-----
 plugins/home/README.md                                   | 2 ++
 plugins/home/api-report.md                               | 4 ++--
 .../home/src/componentRenderers/ComponentAccordion.tsx   | 2 +-
 7 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/mean-squids-relax.md

diff --git a/.changeset/mean-squids-relax.md b/.changeset/mean-squids-relax.md
new file mode 100644
index 0000000000..558b42fcfc
--- /dev/null
+++ b/.changeset/mean-squids-relax.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home-react': patch
+---
+
+Make `title` optional when defining the `createCardExtension`
diff --git a/plugins/home-react/api-report.md b/plugins/home-react/api-report.md
index d6a2f92589..4806cf7be0 100644
--- a/plugins/home-react/api-report.md
+++ b/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;
 ```
diff --git a/plugins/home-react/src/components/SettingsModal.tsx b/plugins/home-react/src/components/SettingsModal.tsx
index ace9944f28..43cb16bb40 100644
--- a/plugins/home-react/src/components/SettingsModal.tsx
+++ b/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">
diff --git a/plugins/home-react/src/extensions.tsx b/plugins/home-react/src/extensions.tsx
index 5bf9d153ef..399857bb94 100644
--- a/plugins/home-react/src/extensions.tsx
+++ b/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: (
diff --git a/plugins/home/README.md b/plugins/home/README.md
index 926acdf993..57c2a4d243 100644
--- a/plugins/home/README.md
+++ b/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';
 
diff --git a/plugins/home/api-report.md b/plugins/home/api-report.md
index 1001f27b51..d0312d8a5e 100644
--- a/plugins/home/api-report.md
+++ b/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;
 
diff --git a/plugins/home/src/componentRenderers/ComponentAccordion.tsx b/plugins/home/src/componentRenderers/ComponentAccordion.tsx
index 77e7561e55..2a6f74b2dd 100644
--- a/plugins/home/src/componentRenderers/ComponentAccordion.tsx
+++ b/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;