chore: some more migrations

Signed-off-by: blam <ben@blam.sh>
2024-08-15 15:21:41 +02:00
parent 0f2a745ac3
commit 1a4df7277c
2 changed files with 185 additions and 169 deletions
@@ -38,11 +38,10 @@ import {

 import {
  createFrontendPlugin,
-  createApiExtension,
-  createPageExtension,
+  ApiBlueprint,
  createExtensionInput,
-  createNavItemExtension,
-  createSchemaFromZod,
+  PageBlueprint,
+  NavItemBlueprint,
 } from '@backstage/frontend-plugin-api';

 import {
@@ -62,7 +61,7 @@ import {
 } from '@backstage/plugin-search-react';
 import { SearchResult } from '@backstage/plugin-search-common';
 import { searchApiRef } from '@backstage/plugin-search-react';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha';
+import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';

 import { rootRouteRef } from './plugin';
 import { SearchClient } from './apis';
@@ -75,13 +74,15 @@ import {
 } from '@backstage/core-compat-api';

 /** @alpha */
-export const searchApi = createApiExtension({
-  factory: createApiFactory({
-    api: searchApiRef,
-    deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
-    factory: ({ discoveryApi, fetchApi }) =>
-      new SearchClient({ discoveryApi, fetchApi }),
-  }),
+export const searchApi = ApiBlueprint.make({
+  params: {
+    factory: createApiFactory({
+      api: searchApiRef,
+      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new SearchClient({ discoveryApi, fetchApi }),
+    }),
+  },
 });

 const useSearchPageStyles = makeStyles((theme: Theme) => ({
@@ -97,143 +98,152 @@ const useSearchPageStyles = makeStyles((theme: Theme) => ({
 }));

 /** @alpha */
-export const searchPage = createPageExtension({
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  configSchema: createSchemaFromZod(z =>
-    z.object({
-      path: z.string().default('/search'),
-      noTrack: z.boolean().default(false),
-    }),
-  ),
-  inputs: {
-    items: createExtensionInput({
-      item: createSearchResultListItemExtension.itemDataRef,
-    }),
+export const searchPage = PageBlueprint.makeWithOverrides({
+  config: {
+    schema: {
+      noTrack: z => z.boolean().default(false),
+    },
  },
-  loader: async ({ config, inputs }) => {
-    const getResultItemComponent = (result: SearchResult) => {
-      const value = inputs.items.find(item =>
-        item?.output.item.predicate?.(result),
-      );
-      return value?.output.item.component ?? DefaultResultListItem;
-    };
+  inputs: {
+    items: createExtensionInput([SearchResultListItemBlueprint.dataRefs.item]),
+  },
+  factory(originalFactory, { config, inputs }) {
+    return originalFactory({
+      defaultPath: '/search',
+      routeRef: convertLegacyRouteRef(rootRouteRef),
+      loader: async () => {
+        const getResultItemComponent = (result: SearchResult) => {
+          const value = inputs.items.find(item =>
+            item
+              ?.get(SearchResultListItemBlueprint.dataRefs.item)
+              .predicate?.(result),
+          );
+          return (
+            value?.get(SearchResultListItemBlueprint.dataRefs.item).component ??
+            DefaultResultListItem
+          );
+        };

-    const Component = () => {
-      const classes = useSearchPageStyles();
-      const { isMobile } = useSidebarPinState();
-      const { types } = useSearch();
-      const catalogApi = useApi(catalogApiRef);
+        const Component = () => {
+          const classes = useSearchPageStyles();
+          const { isMobile } = useSidebarPinState();
+          const { types } = useSearch();
+          const catalogApi = useApi(catalogApiRef);

-      return (
-        <Page themeId="home">
-          {!isMobile && <Header title="Search" />}
-          <Content>
-            <Grid container direction="row">
-              <Grid item xs={12}>
-                <SearchBar debounceTime={100} />
-              </Grid>
-              {!isMobile && (
-                <Grid item xs={3}>
-                  <SearchType.Accordion
-                    name="Result Type"
-                    defaultValue="software-catalog"
-                    showCounts
-                    types={[
-                      {
-                        value: 'software-catalog',
-                        name: 'Software Catalog',
-                        icon: <CatalogIcon />,
-                      },
-                      {
-                        value: 'techdocs',
-                        name: 'Documentation',
-                        icon: <DocsIcon />,
-                      },
-                    ]}
-                  />
-                  <Paper className={classes.filters}>
-                    {types.includes('techdocs') && (
-                      <SearchFilter.Select
-                        className={classes.filter}
-                        label="Entity"
-                        name="name"
-                        values={async () => {
-                          // Return a list of entities which are documented.
-                          const { items } = await catalogApi.getEntities({
-                            fields: ['metadata.name'],
-                            filter: {
-                              'metadata.annotations.backstage.io/techdocs-ref':
-                                CATALOG_FILTER_EXISTS,
-                            },
-                          });
-
-                          const names = items.map(
-                            entity => entity.metadata.name,
-                          );
-                          names.sort();
-                          return names;
-                        }}
+          return (
+            <Page themeId="home">
+              {!isMobile && <Header title="Search" />}
+              <Content>
+                <Grid container direction="row">
+                  <Grid item xs={12}>
+                    <SearchBar debounceTime={100} />
+                  </Grid>
+                  {!isMobile && (
+                    <Grid item xs={3}>
+                      <SearchType.Accordion
+                        name="Result Type"
+                        defaultValue="software-catalog"
+                        showCounts
+                        types={[
+                          {
+                            value: 'software-catalog',
+                            name: 'Software Catalog',
+                            icon: <CatalogIcon />,
+                          },
+                          {
+                            value: 'techdocs',
+                            name: 'Documentation',
+                            icon: <DocsIcon />,
+                          },
+                        ]}
                      />
-                    )}
-                    <SearchFilter.Select
-                      className={classes.filter}
-                      label="Kind"
-                      name="kind"
-                      values={['Component', 'Template']}
-                    />
-                    <SearchFilter.Checkbox
-                      className={classes.filter}
-                      label="Lifecycle"
-                      name="lifecycle"
-                      values={['experimental', 'production']}
-                    />
-                  </Paper>
-                </Grid>
-              )}
-              <Grid item xs>
-                <SearchPagination />
-                <SearchResults>
-                  {({ results }) => (
-                    <>
-                      {results.map((result, index) => {
-                        const { noTrack } = config;
-                        const { document, ...rest } = result;
-                        const SearchResultListItem =
-                          getResultItemComponent(result);
-                        return (
-                          <SearchResultListItem
-                            {...rest}
-                            key={index}
-                            result={document}
-                            noTrack={noTrack}
-                          />
-                        );
-                      })}
-                    </>
-                  )}
-                </SearchResults>
-                <SearchResultPager />
-              </Grid>
-            </Grid>
-          </Content>
-        </Page>
-      );
-    };
+                      <Paper className={classes.filters}>
+                        {types.includes('techdocs') && (
+                          <SearchFilter.Select
+                            className={classes.filter}
+                            label="Entity"
+                            name="name"
+                            values={async () => {
+                              // Return a list of entities which are documented.
+                              const { items } = await catalogApi.getEntities({
+                                fields: ['metadata.name'],
+                                filter: {
+                                  'metadata.annotations.backstage.io/techdocs-ref':
+                                    CATALOG_FILTER_EXISTS,
+                                },
+                              });

-    return compatWrapper(
-      <SearchContextProvider>
-        <UrlUpdater />
-        <Component />
-      </SearchContextProvider>,
-    );
+                              const names = items.map(
+                                entity => entity.metadata.name,
+                              );
+                              names.sort();
+                              return names;
+                            }}
+                          />
+                        )}
+                        <SearchFilter.Select
+                          className={classes.filter}
+                          label="Kind"
+                          name="kind"
+                          values={['Component', 'Template']}
+                        />
+                        <SearchFilter.Checkbox
+                          className={classes.filter}
+                          label="Lifecycle"
+                          name="lifecycle"
+                          values={['experimental', 'production']}
+                        />
+                      </Paper>
+                    </Grid>
+                  )}
+                  <Grid item xs>
+                    <SearchPagination />
+                    <SearchResults>
+                      {({ results }) => (
+                        <>
+                          {results.map((result, index) => {
+                            const { noTrack } = config;
+                            const { document, ...rest } = result;
+                            const SearchResultListItem =
+                              getResultItemComponent(result);
+                            return (
+                              <SearchResultListItem
+                                {...rest}
+                                key={index}
+                                result={document}
+                                noTrack={noTrack}
+                              />
+                            );
+                          })}
+                        </>
+                      )}
+                    </SearchResults>
+                    <SearchResultPager />
+                  </Grid>
+                </Grid>
+              </Content>
+            </Page>
+          );
+        };
+
+        return compatWrapper(
+          <SearchContextProvider>
+            <UrlUpdater />
+            <Component />
+          </SearchContextProvider>,
+        );
+      },
+    });
  },
 });

 /** @alpha */
-export const searchNavItem = createNavItemExtension({
-  routeRef: convertLegacyRouteRef(rootRouteRef),
-  title: 'Search',
-  icon: SearchIcon,
+export const searchNavItem = NavItemBlueprint.make({
+  params: {
+    routeRef: convertLegacyRouteRef(rootRouteRef),
+    title: 'Search',
+    icon: SearchIcon,
+  },
 });

 /** @alpha */