fix frontend alarm bugs (#1277)

* Log info level for cancelled page transition

* check for plugin.name when creating plugin links

* move fetch spdx license data to SSR

* add missing import

frontend/src/components/HomePage/PluginCard.tsx

@@ -73,6 +73,10 @@ export function PluginCard({
   const { t } = useTranslation(['pluginData']);
   const plausible = usePlausible();
 
+  if (!plugin.name) {
+    return null;
+  }
+
   return (
     <SkeletonLoader
       className="h-full min-h-[202px] screen-495:min-h-[224px]"

frontend/src/components/MetadataList/MetadataListMetadataItem.tsx

@@ -2,17 +2,12 @@ import clsx from 'clsx';
 import { isString } from 'lodash';
 import { useTranslation } from 'next-i18next';
 import { ReactNode, useMemo } from 'react';
-import { useQuery } from 'react-query';
 
 import { Link } from '@/components/Link';
-import { MetadataKeys } from '@/context/plugin';
+import { MetadataKeys, usePluginState } from '@/context/plugin';
 import { SUPPORTED_PYTHON_VERSIONS } from '@/store/search/filter.store';
-import { SpdxLicenseResponse } from '@/store/search/types';
 import { PARAM_KEY_MAP, PARAM_VALUE_MAP } from '@/store/search/utils';
 import { PluginType, PluginWriterSaveLayer } from '@/types';
-import { Logger } from '@/utils';
-import { getErrorMessage } from '@/utils/error';
-import { spdxLicenseDataAPI } from '@/utils/spdx';
 
 import styles from './MetadataList.module.scss';
 import { MetadataListTextItem } from './MetadataListTextItem';
@@ -102,8 +97,6 @@ const METADATA_FILTER_LINKS = new Set<MetadataLinkKeys>([
   'writerSaveLayers',
 ]);
 
-const logger = new Logger('MetadataListMetadataItem.ts');
-
 /**
  * Component for rendering a metadata value.
  */
@@ -112,27 +105,9 @@ export function MetadataListMetadataItem({
   className,
   metadataKey,
 }: Props) {
+  const { licenses } = usePluginState();
   const valueLabel = useMetadataValueLabel(metadataKey, value);
 
-  // Fetch SDPX license data to check if current license is OSI Approved.
-  const { data: licenses } = useQuery(
-    ['spdx'],
-    async () => {
-      const { data } = await spdxLicenseDataAPI.get<SpdxLicenseResponse>('');
-      return data.licenses;
-    },
-    {
-      enabled: metadataKey === 'license',
-      onError(err) {
-        logger.error({
-          message:
-            'Error fetching spdx license data for MetadataListMetadataItem',
-          error: getErrorMessage(err),
-        });
-      },
-    },
-  );
-
   const isOsiApproved = useMemo(
     () =>
       metadataKey === 'license' &&

frontend/src/components/SearchPage/PluginSearchResult.tsx

@@ -344,7 +344,7 @@ export function PluginSearchResult({
   );
 
   // Convert to link when loading so that user can't click on result.
-  if (isLoading) {
+  if (isLoading || !plugin.name) {
     return (
       <div className={resultClassName} style={style}>
         {renderResult()}

frontend/src/context/plugin.tsx

@@ -5,6 +5,7 @@ import { createContext, ReactNode, useContext } from 'react';
 import { DeepPartial } from 'utility-types';
 
 import { SUPPORTED_PYTHON_VERSIONS } from '@/store/search/filter.store';
+import { SpdxLicenseData } from '@/store/search/types';
 import {
   HubDimension,
   PluginData,
@@ -20,6 +21,7 @@ import { formatDate } from '@/utils';
  * Shared state for plugin data.
  */
 interface PluginState {
+  licenses?: SpdxLicenseData[];
   plugin?: DeepPartial<PluginData>;
   repo: PluginRepoData;
   repoFetchError?: PluginRepoFetchError;

frontend/src/hooks/usePageTransitions.ts

@@ -22,6 +22,10 @@ interface RouteEvent {
   shallow: boolean;
 }
 
+interface RouteError extends Error {
+  cancelled: boolean;
+}
+
 /**
  * Hook to manage page transitions effects and state.
  */
@@ -62,10 +66,13 @@ export function usePageTransitions() {
       pageTransitionsStore.loading = false;
     }
 
-    const onError = (error: Error, url: string, event: RouteEvent) => {
-      logger.error({
+    const onError = (error: RouteError, url: string, event: RouteEvent) => {
+      const level = error.cancelled ? 'info' : 'error';
+
+      logger[level]({
         message: 'Error loading route',
         error: getErrorMessage(error),
+        cancelled: error.cancelled,
       });
 
       onFinishLoading(url, event);

frontend/src/pages/plugins/[name].tsx

@@ -8,10 +8,12 @@ import { PluginPage } from '@/components/PluginPage';
 import { DEFAULT_REPO_DATA } from '@/constants/plugin';
 import { useLoadingState } from '@/context/loading';
 import { PluginStateProvider } from '@/context/plugin';
+import { SpdxLicenseData, SpdxLicenseResponse } from '@/store/search/types';
 import { PluginData } from '@/types';
 import { createUrl, fetchRepoData, FetchRepoDataResult, Logger } from '@/utils';
 import { getErrorMessage } from '@/utils/error';
 import { hubAPI } from '@/utils/HubAPIClient';
+import { spdxLicenseDataAPI } from '@/utils/spdx';
 import { getServerSidePropsHandler } from '@/utils/ssr';
 
 /**
@@ -24,6 +26,7 @@ interface Params extends ParsedUrlQuery {
 interface BaseProps {
   error?: string;
   plugin?: PluginData;
+  licenses?: SpdxLicenseData[];
 }
 
 type Props = FetchRepoDataResult & BaseProps;
@@ -69,6 +72,20 @@ export const getServerSideProps = getServerSidePropsHandler<Props, Params>({
       });
     }
 
+    try {
+      const {
+        data: { licenses },
+      } = await spdxLicenseDataAPI.get<SpdxLicenseResponse>('');
+      props.licenses = licenses;
+    } catch (err) {
+      props.error = getErrorMessage(err);
+
+      logger.error({
+        message: 'Failed to fetch spdx license data',
+        error: props.error,
+      });
+    }
+
     return { props };
   },
 });
@@ -77,7 +94,13 @@ export const getServerSideProps = getServerSidePropsHandler<Props, Params>({
  * This page fetches plugin data from the hub API and renders it in the
  * PluginDetails component.
  */
-export default function Plugin({ error, plugin, repo, repoFetchError }: Props) {
+export default function Plugin({
+  error,
+  licenses,
+  plugin,
+  repo,
+  repoFetchError,
+}: Props) {
   const isLoading = useLoadingState();
   const [t] = useTranslation(['pageTitles', 'pluginPage']);
 
@@ -127,6 +150,7 @@ export default function Plugin({ error, plugin, repo, repoFetchError }: Props) {
         <>
           {plugin ? (
             <PluginStateProvider
+              licenses={licenses}
               plugin={plugin}
               repo={repo}
               repoFetchError={repoFetchError}

frontend/src/utils/sitemap.server.ts

@@ -73,17 +73,19 @@ async function getPluginEntries(): Promise<SitemapEntry[]> {
   try {
     const data = await hubAPI.getPluginIndex();
 
-    return data.map((plugin) => {
-      const url = `/plugins/${plugin.name}`;
-      const lastmod = new Date(plugin.release_date).toISOString();
-
-      return {
-        url,
-        lastmod,
-        name: plugin.display_name ?? plugin.name,
-        type: SitemapCategory.Plugin,
-      };
-    });
+    return data
+      .filter((plugin) => !!plugin.name)
+      .map((plugin) => {
+        const url = `/plugins/${plugin.name}`;
+        const lastmod = new Date(plugin.release_date).toISOString();
+
+        return {
+          url,
+          lastmod,
+          name: plugin.display_name ?? plugin.name,
+          type: SitemapCategory.Plugin,
+        };
+      });
   } catch (err) {
     logger.error({
       message: 'Unable to fetch plugin list',