scaffolder: use CatalogFilterLayout

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -27,13 +27,13 @@ import { Entity } from '@backstage/catalog-model';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import {
+  CatalogFilterLayout,
   EntityKindPicker,
   EntityListProvider,
   EntitySearchBar,
   EntityTagPicker,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { makeStyles } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 import { registerComponentRouteRef } from '../../routes';
 import { TemplateList } from '../TemplateList';
@@ -41,15 +41,6 @@ import { TemplateTypePicker } from '../TemplateTypePicker';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-const useStyles = makeStyles(theme => ({
-  contentWrapper: {
-    display: 'grid',
-    gridTemplateAreas: "'filters' 'grid'",
-    gridTemplateColumns: '250px 1fr',
-    gridColumnGap: theme.spacing(2),
-  },
-}));
-
 export type ScaffolderPageProps = {
   TemplateCardComponent?:
     | ComponentType<{ template: TemplateEntityV1beta3 }>
@@ -66,7 +57,6 @@ export const ScaffolderPageContents = ({
   TemplateCardComponent,
   groups,
 }: ScaffolderPageProps) => {
-  const styles = useStyles();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
     title: groups ? 'Other Templates' : 'Templates',
@@ -104,8 +94,8 @@ export const ScaffolderPageContents = ({
           </SupportButton>
         </ContentHeader>
 
-        <div className={styles.contentWrapper}>
-          <div>
+        <CatalogFilterLayout>
+          <CatalogFilterLayout.Filters>
             <EntitySearchBar />
             <EntityKindPicker initialFilter="template" hidden />
             <UserListPicker
@@ -114,8 +104,8 @@ export const ScaffolderPageContents = ({
             />
             <TemplateTypePicker />
             <EntityTagPicker />
-          </div>
-          <div>
+          </CatalogFilterLayout.Filters>
+          <CatalogFilterLayout.Content>
             {groups &&
               groups.map((group, index) => (
                 <TemplateList
@@ -129,8 +119,8 @@ export const ScaffolderPageContents = ({
               TemplateCardComponent={TemplateCardComponent}
               group={otherTemplatesGroup}
             />
-          </div>
-        </div>
+          </CatalogFilterLayout.Content>
+        </CatalogFilterLayout>
       </Content>
     </Page>
   );