Style error page, fix global search

packages/core/src/components/ErrorBoundary.tsx

@@ -147,31 +147,72 @@ class ErrorBoundary extends Component<TranslatedProps<ErrorBoundaryProps>, Error
       return this.props.children;
     }
     return (
-      <div key="error-boundary-container">
+      <div
-        <h1>{t('ui.errorBoundary.title')}</h1>
+        key="error-boundary-container"
-        <p>
+        className="
-          <span>{t('ui.errorBoundary.details')}</span>
+          flex
-          <a
+          flex-col
-            href={buildIssueUrl(errorTitle, this.props.config)}
+          bg-slate-50
-            target="_blank"
+          dark:bg-slate-900
-            rel="noopener noreferrer"
+          min-h-screen
-            data-testid="issue-url"
+          gap-2
-          >
+        "
-            {t('ui.errorBoundary.reportIt')}
+      >
-          </a>
+        <div
-        </p>
+          className="
-        <p>
+            flex
-          {t('ui.errorBoundary.privacyWarning')
+            flex-col
-            .split('\n')
+            py-2
-            .map((item, index) => [
+            px-4
-              <span key={`private-warning-${index}`}>{item}</span>,
+            gap-2
-              <br key={`break-${index}`} />,
+          "
-            ])}
+        >
-        </p>
+          <h1 className="text-2xl bold">{t('ui.errorBoundary.title')}</h1>
+          <p>
+            <span>{t('ui.errorBoundary.details')}</span>
+            <a
+              href={buildIssueUrl(errorTitle, this.props.config)}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-testid="issue-url"
+              className="
+                text-blue-500
+                hover:underline
+              "
+            >
+              {t('ui.errorBoundary.reportIt')}
+            </a>
+          </p>
+          <p>
+            {t('ui.errorBoundary.privacyWarning')
+              .split('\n')
+              .map((item, index) => [
+                <span key={`private-warning-${index}`}>{item}</span>,
+                <br key={`break-${index}`} />,
+              ])}
+          </p>
+        </div>
         <hr />
-        <h2>{t('ui.errorBoundary.detailsHeading')}</h2>
+        <div
-        <p>{errorMessage}</p>
+          className="
-        {backup && showBackup && <RecoveredEntry key="backup" entry={backup} t={t} />}
+            flex
+            flex-col
+            py-2
+            px-4
+            gap-2
+          "
+        >
+          <h2 className="text-xl bold">{t('ui.errorBoundary.detailsHeading')}</h2>
+          <p>
+            {errorMessage.split('\n').map((item, index) => [
+              <span key={`error-line-${index}`} className="whitespace-pre">
+                {item}
+              </span>,
+              <br key={`error-break-${index}`} />,
+            ])}
+          </p>
+          {backup && showBackup && <RecoveredEntry key="backup" entry={backup} t={t} />}
+        </div>
       </div>
     );
   }

packages/core/src/components/collections/CollectionPage.tsx

@@ -8,13 +8,30 @@ import CollectionView from './CollectionView';
 import type { Collection } from '@staticcms/core/interface';
 import type { FC } from 'react';
 
-interface CollectionViewProps {
+const MultiSearchCollectionPage: FC = () => {
+  const { name, searchTerm, ...params } = useParams();
+  const filterTerm = params['*'];
+
+  return (
+    <MainView breadcrumbs={[{ name: 'Search' }]} showQuickCreate showLeftNav>
+      <CollectionView
+        name={name}
+        searchTerm={searchTerm}
+        filterTerm={filterTerm}
+        isSearchResults
+        isSingleSearchResult={false}
+      />
+    </MainView>
+  );
+};
+
+interface SingleCollectionPageProps {
   collection: Collection;
   isSearchResults?: boolean;
   isSingleSearchResult?: boolean;
 }
 
-const CollectionPage: FC<CollectionViewProps> = ({
+const SingleCollectionPage: FC<SingleCollectionPageProps> = ({
   collection,
   isSearchResults,
   isSingleSearchResult,
@@ -37,4 +54,28 @@ const CollectionPage: FC<CollectionViewProps> = ({
   );
 };
 
+interface CollectionPageProps {
+  collection?: Collection;
+  isSearchResults?: boolean;
+  isSingleSearchResult?: boolean;
+}
+
+const CollectionPage: FC<CollectionPageProps> = ({
+  collection,
+  isSearchResults,
+  isSingleSearchResult,
+}) => {
+  if (!collection) {
+    return <MultiSearchCollectionPage />;
+  }
+
+  return (
+    <SingleCollectionPage
+      collection={collection}
+      isSearchResults={isSearchResults}
+      isSingleSearchResult={isSingleSearchResult}
+    />
+  );
+};
+
 export default CollectionPage;

packages/core/src/components/collections/CollectionRoute.tsx

@@ -9,8 +9,6 @@ import { useAppSelector } from '@staticcms/core/store/hooks';
 import { getDefaultPath } from '../../lib/util/collection.util';
 import CollectionPage from './CollectionPage';
 
-import type { Collection } from '@staticcms/core/interface';
-
 interface CollectionRouteProps {
   isSearchResults?: boolean;
   isSingleSearchResult?: boolean;
@@ -35,7 +33,7 @@ const CollectionRoute = ({ isSearchResults, isSingleSearchResult }: CollectionRo
 
   return (
     <CollectionPage
-      collection={collection as unknown as Collection}
+      collection={collection}
       isSearchResults={isSearchResults}
       isSingleSearchResult={isSingleSearchResult}
     />

packages/core/webpack.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const pkg = require('./package.json');
 
 const isProduction = process.env.NODE_ENV === 'production';
 const devServerPort = parseInt(process.env.STATIC_CMS_DEV_SERVER_PORT || `${8080}`);
@@ -102,6 +103,9 @@ module.exports = {
       process: 'process/browser',
       Buffer: ['buffer', 'Buffer'],
     }),
+    new webpack.DefinePlugin({
+      STATIC_CMS_CORE_VERSION: JSON.stringify(`${pkg.version}${isProduction ? '' : '-dev'}`),
+    }),
   ].filter(Boolean),
   output: {
     publicPath: '',