fix: make change in SupportButton & revert previous commits

Signed-off-by: vabf59 <thomas.triplett.vabf59@statefarm.com>

.changeset/perfect-goats-mate.md

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

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}>

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -58,7 +58,6 @@ export function BaseCatalogPage(props: BaseCatalogPageProps) {
   const { allowed } = usePermission({
     permission: catalogEntityCreatePermission,
   });
-  const supportConfig = useApi(configApiRef).getOptionalConfig('app.support');
 
   return (
     <PageWithHeader title={t('indexPage.title', { orgName })} themeId="home">
@@ -70,9 +69,7 @@ export function BaseCatalogPage(props: BaseCatalogPageProps) {
               to={createComponentLink && createComponentLink()}
             />
           )}
-          {supportConfig && (
-            <SupportButton>{t('indexPage.supportButtonContent')}</SupportButton>
-          )}
+          <SupportButton>{t('indexPage.supportButtonContent')}</SupportButton>
         </ContentHeader>
         <EntityListProvider pagination={pagination}>
           <CatalogFilterLayout>

plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.tsx

@@ -17,12 +17,7 @@
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import {
-  configApiRef,
-  useApi,
-  useApp,
-  useRouteRef,
-} from '@backstage/core-plugin-api';
+import { useApp, useRouteRef } from '@backstage/core-plugin-api';
 
 import {
   Content,
@@ -115,7 +110,6 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const app = useApp();
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  const supportConfig = useApi(configApiRef).getOptionalConfig('app.support');
 
   const groups = givenGroups.length
     ? createGroupsWithOther(givenGroups, t)
@@ -190,11 +184,9 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
               )}
               to={registerComponentLink && registerComponentLink()}
             />
-            {supportConfig && (
-              <SupportButton>
-                {t('templateListPage.contentHeader.supportButtonTitle')}
-              </SupportButton>
-            )}
+            <SupportButton>
+              {t('templateListPage.contentHeader.supportButtonTitle')}
+            </SupportButton>
           </ContentHeader>
 
           <CatalogFilterLayout>

plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx

@@ -31,7 +31,6 @@ import { TechDocsPageWrapper } from './TechDocsPageWrapper';
 import { TechDocsPicker } from './TechDocsPicker';
 import { EntityListDocsTable } from './Tables';
 import { TechDocsIndexPageProps } from './TechDocsIndexPage';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 /**
  * Props for {@link DefaultTechDocsHome}
@@ -48,16 +47,13 @@ export type DefaultTechDocsHomeProps = TechDocsIndexPageProps;
  */
 export const DefaultTechDocsHome = (props: TechDocsIndexPageProps) => {
   const { initialFilter = 'owned', columns, actions, ownerPickerMode } = props;
-  const supportConfig = useApi(configApiRef).getOptionalConfig('app.support');
   return (
     <TechDocsPageWrapper>
       <Content>
         <ContentHeader title="">
-          {supportConfig && (
-            <SupportButton>
-              Discover documentation in your ecosystem.
-            </SupportButton>
-          )}
+          <SupportButton>
+            Discover documentation in your ecosystem.
+          </SupportButton>
         </ContentHeader>
         <EntityListProvider>
           <CatalogFilterLayout>