Simplify profile publishing flow.

Redux allows us to cleanly separate asynchronous work from synchronous state:
Anything that happens asynchronously should happen in the action creators.
The Redux state, and the selectors, should always synchronously reflect the
"current truth" about the world.

Our profile publishing code was calling the asynchronous "compress" function
from within a selector. This change moves this into an action creator.

Author: mstange

src/actions/publish.ts

@@ -9,9 +9,9 @@ import type { SanitizeProfileResult } from 'firefox-profiler/profile-logic/sanit
 import {
   getUploadGeneration,
   getSanitizedProfile,
-  getSanitizedProfileData,
   getRemoveProfileInformation,
   getPrePublishedState,
+  getSanitizedProfileEncodingState,
 } from 'firefox-profiler/selectors/publish';
 import {
   getDataSource,
@@ -36,7 +36,10 @@ import type {
   StartEndRange,
   ThreadIndex,
   State,
+  Profile,
 } from 'firefox-profiler/types';
+import { compress } from 'firefox-profiler/utils/gz';
+import { serializeProfile } from 'firefox-profiler/profile-logic/process-profile';
 
 export function updateSharingOption(
   slug: keyof CheckedSharingOptions,
@@ -49,6 +52,37 @@ export function updateSharingOption(
   };
 }
 
+export function sanitizedProfileEncodingStarted(
+  sanitizedProfile: Profile
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_STARTED',
+    sanitizedProfile,
+  };
+}
+
+export function sanitizedProfileEncodingCompleted(
+  sanitizedProfile: Profile,
+  profileData: Blob
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_COMPLETED',
+    sanitizedProfile,
+    profileData,
+  };
+}
+
+export function sanitizedProfileEncodingFailed(
+  sanitizedProfile: Profile,
+  error: Error
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_FAILED',
+    sanitizedProfile,
+    error,
+  };
+}
+
 export function uploadCompressionStarted(abortFunction: () => void): Action {
   return {
     type: 'UPLOAD_COMPRESSION_STARTED',
@@ -198,6 +232,90 @@ async function persistJustUploadedProfileInformationToDb(
   }
 }
 
+export type ProfileEncodingResult =
+  | {
+      type: 'SUCCESS';
+      profileData: Blob;
+    }
+  | { type: 'ERROR'; error: Error };
+
+function unwrapEncodedProfile(encodingResult: ProfileEncodingResult): Blob {
+  if (encodingResult.type === 'ERROR') {
+    throw encodingResult.error;
+  }
+  return encodingResult.profileData;
+}
+
+export type InflightProfileEncoding = {
+  sanitizedProfile: Profile;
+  encodingPromise: Promise<ProfileEncodingResult>;
+};
+
+/**
+ * Kick off "encoding" of the sanitized profile. Specifically this means:
+ * - Compute the sanitized profile
+ * - Serialize the profile to a buffer
+ * - Kick off the asynchronous compression of the buffer
+ *
+ * The asynchronous compression can take a few seconds, so we want to kick
+ * it off immediately when the profile publishing panel is opened. We also
+ * want to be able to make use of the current in-flight compression if the
+ * user clicks the upload button before compression is done. This is why
+ * we return an `InflightProfileEncoding` object from this action; it contains
+ * a promise which lets other parts of the publishing pipeline wait on the
+ * compressed results.
+ *
+ * This thunk action is synchronous.
+ */
+export function encodeSanitizedProfile(
+  previousInflightEncoding?: InflightProfileEncoding
+): ThunkAction<InflightProfileEncoding> {
+  return (dispatch, getState): InflightProfileEncoding => {
+    const state = getState();
+    const sanitizedProfile = getSanitizedProfile(state).profile;
+
+    if (previousInflightEncoding?.sanitizedProfile === sanitizedProfile) {
+      // No need to kick of another compression. The current encoding may still
+      // be in-flight, and returning the original promise allows the caller to
+      // await it.
+      return previousInflightEncoding;
+    }
+
+    const encodingState = getSanitizedProfileEncodingState(state);
+    if (
+      encodingState.phase === 'DONE' &&
+      encodingState.sanitizedProfile === sanitizedProfile
+    ) {
+      // We already have an encoded version of this profile in our state! Use it.
+      return {
+        sanitizedProfile,
+        encodingPromise: Promise.resolve({
+          type: 'SUCCESS',
+          profileData: encodingState.profileData,
+        }),
+      };
+    }
+
+    // Kick off a new encoding for this profile. Don't await the promise,
+    // just return it as part of the InflightProfileEncoding.
+    const encodingPromise: Promise<ProfileEncodingResult> = (async function () {
+      try {
+        dispatch(sanitizedProfileEncodingStarted(sanitizedProfile));
+        const gzipData = await compress(serializeProfile(sanitizedProfile));
+        const blob = new Blob([gzipData], { type: 'application/octet-binary' });
+        dispatch(sanitizedProfileEncodingCompleted(sanitizedProfile, blob));
+        return { type: 'SUCCESS', profileData: blob };
+      } catch (error) {
+        dispatch(sanitizedProfileEncodingFailed(sanitizedProfile, error));
+        console.error('Error while compressing the profile data', error);
+        return { type: 'ERROR', error };
+      }
+    })();
+
+    return { sanitizedProfile, encodingPromise };
+  };
+}
+
 /**
  * This function starts the profile sharing process. Takes an optional argument that
  * indicates if the share attempt is being made for the second time. We have two share
@@ -210,7 +328,9 @@ async function persistJustUploadedProfileInformationToDb(
  * The return value is used for tests to determine if the request went all the way
  * through (true) or was quit early due to the generation value being invalidated (false).
  */
-export function attemptToPublish(): ThunkAction<Promise<boolean>> {
+export function attemptToPublish(
+  previousInflightEncoding?: InflightProfileEncoding
+): ThunkAction<Promise<boolean>> {
   return async (dispatch, getState) => {
     try {
       sendAnalytics({
@@ -244,21 +364,29 @@ export function attemptToPublish(): ThunkAction<Promise<boolean>> {
       dispatch(uploadCompressionStarted(abortfunction));
 
       const sanitizedInformation = getSanitizedProfile(prePublishedState);
-      const gzipData = await getSanitizedProfileData(prePublishedState);
+      const profileEncoding = dispatch(
+        encodeSanitizedProfile(previousInflightEncoding)
+      );
+      const encodingResult = await profileEncoding.encodingPromise;
 
       // The previous line was async, check to make sure that this request is still valid.
       // The upload could have been aborted while we were compressing the data.
       if (uploadGeneration !== getUploadGeneration(getState())) {
         return false;
       }
 
+      const encodedProfile = unwrapEncodedProfile(encodingResult);
+
       dispatch(uploadStarted());
 
       // Upload the profile, and notify it with the amount of data that has been
       // uploaded.
-      const hashOrToken = await startUpload(gzipData, (uploadProgress) => {
-        dispatch(updateUploadProgress(uploadProgress));
-      });
+      const hashOrToken = await startUpload(
+        encodedProfile,
+        (uploadProgress) => {
+          dispatch(updateUploadProgress(uploadProgress));
+        }
+      );
 
       const hash = extractProfileTokenFromJwt(hashOrToken);