Merge pull request #27144 from StateFarmIns/optional-support-button-fun

Hide SupportButton in Backstage plugins when no support configuration is specified

.changeset/perfect-goats-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+The SupportButton component will now be hidden if no support config is specified in app-config

packages/core-components/report.api.md

@@ -1331,7 +1331,9 @@ export type SubvalueCellClassKey = 'value' | 'subvalue';
 // Warning: (ae-missing-release-tag) "SupportButton" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function SupportButton(props: SupportButtonProps): React_2.JSX.Element;
+export function SupportButton(
+  props: SupportButtonProps,
+): React_2.JSX.Element | null;
 
 // Warning: (ae-missing-release-tag) "SupportButtonClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

packages/core-components/src/components/SupportButton/SupportButton.test.tsx

@@ -41,34 +41,50 @@ const configApi = mockApis.config({
   },
 });
 
+const noSupportConfigApi = mockApis.config({
+  data: {
+    app: {},
+  },
+});
+
 const SUPPORT_BUTTON_ID = 'support-button';
 const POPOVER_ID = 'support-button-popover';
 
 describe('<SupportButton />', () => {
   it('renders without exploding', async () => {
-    await renderInTestApp(<SupportButton />);
+    await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <SupportButton />
+      </TestApiProvider>,
+    );
     await expect(
       screen.findByTestId(SUPPORT_BUTTON_ID),
     ).resolves.toBeInTheDocument();
   });
 
   it('supports passing a title', async () => {
-    await renderInTestApp(<SupportButton title="Custom title" />);
+    await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <SupportButton title="Custom title" />
+      </TestApiProvider>,
+    );
     fireEvent.click(screen.getByTestId(SUPPORT_BUTTON_ID));
     expect(screen.getByText('Custom title')).toBeInTheDocument();
   });
 
   it('supports passing link items through props', async () => {
     await renderInTestApp(
-      <SupportButton
-        items={[
-          {
-            title: 'Documentation',
-            icon: 'description',
-            links: [{ title: 'Show docs', url: '/docs' }],
-          },
-        ]}
-      />,
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <SupportButton
+          items={[
+            {
+              title: 'Documentation',
+              icon: 'description',
+              links: [{ title: 'Show docs', url: '/docs' }],
+            },
+          ]}
+        />
+      </TestApiProvider>,
     );
 
     const supportButton = screen.getByTestId(SUPPORT_BUTTON_ID);
@@ -97,7 +113,11 @@ describe('<SupportButton />', () => {
   });
 
   it('shows popover on click', async () => {
-    await renderInTestApp(<SupportButton />);
+    await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <SupportButton />
+      </TestApiProvider>,
+    );
 
     await expect(
       screen.findByTestId(SUPPORT_BUTTON_ID),
@@ -108,4 +128,14 @@ describe('<SupportButton />', () => {
 
     await expect(screen.findByTestId(POPOVER_ID)).resolves.toBeInTheDocument();
   });
+
+  it('hides button if config is missing', async () => {
+    await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, noSupportConfigApi]]}>
+        <SupportButton />
+      </TestApiProvider>,
+    );
+
+    await expect(screen.findByTestId(SUPPORT_BUTTON_ID)).rejects.toThrow();
+  });
 });

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useApp } from '@backstage/core-plugin-api';
+import { configApiRef, useApi, useApp } from '@backstage/core-plugin-api';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -94,6 +94,7 @@ export function SupportButton(props: SupportButtonProps) {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const classes = useStyles();
+  const supportConfig = useApi(configApiRef).getOptionalConfig('app.support');
   const isSmallScreen = useMediaQuery<Theme>(theme =>
     theme.breakpoints.down('sm'),
   );
@@ -107,6 +108,10 @@ export function SupportButton(props: SupportButtonProps) {
     setPopoverOpen(false);
   };
 
+  if (!supportConfig) {
+    return null;
+  }
+
   return (
     <>
       <Box display="flex" ml={1}>