Fix some glaring performance issues in history view as we prepare to release it (#1545)

* Update `history` view to be more performant
 - Stop fetching all of history on load of page
 - Fetch each spec individually when a users selects publication
 - Break out the diff viewer into a stand alone component

Typing
 - Some types were off for the history page so updated those

* Updating to latest `@monaco-editor/react`

* I think showing progress while keeping editor is way less shocking UX

* Updating how we handle if there is only one pubId
Minor tweaks to the UX for loading and comparing
Trying to make it more clear the selected item is on the right of the diff

* Updating data fetching
 - We can just use the `published_at` from the main list
 - Make the function safer so it only calls when there is
    at least _one_ pub id

Editor UX
 - Keep the viewState while changing the model so the scroll stays
     while changing publications

* Noting down an issue with the underlying lib

* Getting the back button working

* Some renaming and refactoring
 - moved stuff into a shared hook to keep things consistent
 - rename the query params to be specific to this page
 -

* Breaking the hook into two

* removing cursor when the item is selected

* Add support to ensure selected publication is visible

* Scrolling with auto works a bit better for now. Smooth is nice because
 it brings attention to the list for users.

Author: travjenkins

package-lock.json

@@ -45,7 +45,7 @@
         "@jsonforms/material-renderers": "3.2.1",
         "@jsonforms/react": "3.2.1",
         "@microlink/react-json-view": "^1.23.0",
-        "@monaco-editor/react": "^4.6.0",
+        "@monaco-editor/react": "^4.7.0",
         "@mui/icons-material": "^5.15.10",
         "@mui/lab": "^5.0.0-alpha.165",
         "@mui/material": "^5.15.10",

package.json

@@ -9,7 +9,6 @@ export interface PublicationSpecsExt_PublicationHistory {
     pub_id: string;
     detail: null;
     published_at: string; //timestamptz
-    spec: Schema;
     spec_type: string;
     user_id: string;
     catalog_name: string;
@@ -19,15 +18,50 @@ export interface PublicationSpecsExt_PublicationHistory {
     user_avatar_url: null;
 }
 
+export type PublicationSpecsExt_PubIds = Pick<
+    PublicationSpecsExt_PublicationHistory,
+    'pub_id' | 'published_at' | 'detail' | 'user_email'
+>;
+
+export interface PublicationSpecsExt_Spec {
+    pub_id: string;
+    spec: Schema;
+}
+
 export const getPublicationHistoryByCatalogName = (catalogName: string) => {
     return supabaseClient
         .from(TABLES.PUBLICATION_SPECS_EXT)
-        .select(`pub_id, published_at, detail, user_email, spec`)
+        .select(`pub_id, published_at, detail, user_email, published_at`)
         .eq('catalog_name', catalogName)
         .order('published_at', {
             ascending: false,
         })
-        .returns<PublicationSpecsExt_PublicationHistory[]>();
+        .returns<PublicationSpecsExt_PubIds[]>();
+};
+
+export const getPublicationSpecByPublication = (
+    catalogName: string,
+    pubIds: [string | null, string | null]
+) => {
+    let query = supabaseClient
+        .from(TABLES.PUBLICATION_SPECS_EXT)
+        .select(`pub_id, spec`)
+        .eq('catalog_name', catalogName);
+
+    // If we have both look for both
+    //  Otherwise we're probably looking up a NEW entity and only
+    //  have a single pubId.
+    if (pubIds[0] && pubIds[1]) {
+        query = query.in('pub_id', pubIds);
+    } else {
+        if (pubIds[0]) {
+            query = query.eq('pub_id', pubIds[0]);
+        } else if (pubIds[1]) {
+            query = query.eq('pub_id', pubIds[1]);
+        }
+    }
+
+    return query.returns<PublicationSpecsExt_Spec[]>();
 };
 
 export const getLiveSpecIdByPublication = (