chore: working on writing some more components for all this stuff

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/Router/Router.tsx

@@ -29,13 +29,17 @@ import { useElementFilter } from '@backstage/core-plugin-api';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 
 export type RouterProps = {
-  TemplateCardComponent?: React.ComponentType<{
-    template: TemplateEntityV1beta3;
-  }>;
+  components: {
+    TemplateCardComponent?: React.ComponentType<{
+      template: TemplateEntityV1beta3;
+    }>;
+    TaskPageComponent?: React.ComponentType<{}>;
+  };
 };
 
 export const Router = (props: PropsWithChildren<RouterProps>) => {
-  const { TemplateCardComponent } = props;
+  const { components: { TaskPageComponent, TemplateCardComponent } = {} } =
+    props;
 
   const outlet = useOutlet() || props.children;
 

plugins/scaffolder/src/next/TemplateListPage/TemplateCard.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+
+export interface TemplateCardProps {
+  template: TemplateEntityV1beta3;
+  deprecated?: boolean;
+}
+
+export const TemplateCard = (props: TemplateCardProps) => {
+  return null;
+};

plugins/scaffolder/src/next/TemplateListPage/TemplateGroup.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import React from 'react';
+import {
+  Content,
+  ContentHeader,
+  ItemCardGrid,
+  Link,
+} from '@backstage/core-components';
+import { Typography } from '@material-ui/core';
+import { TemplateCard, TemplateCardProps } from './TemplateCard';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+
+export interface TemplateGroupProps {
+  templates: TemplateEntityV1beta3[];
+  title?: string;
+  components?: {
+    titleComponent?: React.ReactNode;
+    CardComponent?: React.ComponentType<TemplateCardProps>;
+  };
+}
+
+export const TemplateGroup = (props: TemplateGroupProps) => {
+  const {
+    templates,
+    title,
+    components: { titleComponent, CardComponent } = {},
+  } = props;
+
+  if (templates.length === 0) {
+    return (
+      <Typography variant="body2">
+        No templates found that match your filter. Learn more about{' '}
+        <Link to="https://backstage.io/docs/features/software-templates/adding-templates">
+          adding templates
+        </Link>
+        .
+      </Typography>
+    );
+  }
+
+  const titleFragment = titleComponent || <ContentHeader title={title} />;
+
+  const Card = CardComponent || TemplateCard;
+
+  return (
+    <Content>
+      {titleFragment}
+      <ItemCardGrid>
+        {templates.map(template => (
+          <Card key={stringifyEntityRef(template)} template={template} />
+        ))}
+      </ItemCardGrid>
+    </Content>
+  );
+};

plugins/scaffolder/src/next/TemplateListPage/TemplateGroups.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TemplateGroup } from './TemplateGroup';
+import { Entity } from '@backstage/catalog-model';
+import { useEntityList } from '@backstage/plugin-catalog-react';
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+
+export type TemplateGroupFilter = {
+  title?: string;
+  titleComponent?: React.ReactNode;
+  filter: (entity: Entity) => boolean;
+};
+
+export interface TemplateGroupsProps {
+  groups: TemplateGroupFilter[];
+  TemplateCardComponent?: React.ComponentType<{
+    template: TemplateEntityV1beta3;
+  }>;
+}
+
+export const TemplateGroups = (props: TemplateGroupsProps) => {
+  const { loading, error, entities } = useEntityList();
+  return null;
+};

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { Entity } from '@backstage/catalog-model';
+
 import { makeStyles } from '@material-ui/core';
 import {
   Content,
@@ -37,18 +37,13 @@ import { CategoryPicker } from './CategoryPicker';
 import { RegisterExistingButton } from './RegisterExistingButton';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { registerComponentRouteRef } from '../../routes';
-
-export type TemplateListGroup = {
-  title?: string;
-  titleComponent?: React.ReactNode;
-  filter: (entity: Entity) => boolean;
-};
+import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
 
 export type TemplateListPageProps = {
   TemplateCardComponent?: React.ComponentType<{
     template: TemplateEntityV1beta3;
   }>;
-  groups?: TemplateListGroup[];
+  groups?: TemplateGroupFilter[];
 };
 
 const useStyles = makeStyles(theme => ({
@@ -60,20 +55,22 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+const defaultGroup: TemplateGroupFilter = {
+  title: 'All Templates',
+  filter: () => true,
+};
+
 export const TemplateListPage = (props: TemplateListPageProps) => {
   const styles = useStyles();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const { TemplateCardComponent, groups = [defaultGroup] } = props;
 
   return (
     <EntityListProvider>
       <Page themeId="home">
         <Header
           pageTitleOverride="Create a New Component"
-          title={
-            <>
-              Create a New Component <Lifecycle shorthand />
-            </>
-          }
+          title="Create a New Component"
           subtitle="Create new software components using standard templates"
         />
         <Content>
@@ -101,19 +98,10 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
               <EntityTagPicker />
             </div>
             <div>
-              {/* {groups &&
-                groups.map((group, index) => (
-                  <TemplateList
-                    key={index}
-                    TemplateCardComponent={TemplateCardComponent}
-                    group={group}
-                  />
-                ))}
-              <TemplateList
-                key="other"
+              <TemplateGroups
+                groups={groups}
                 TemplateCardComponent={TemplateCardComponent}
-                group={otherTemplatesGroup} 
-              />*/}
+              />
             </div>
           </div>
         </Content>