Fix migrations

src/pageEditor/store/editor/baseFormStateTypes.ts

@@ -28,7 +28,7 @@ import { type Permissions } from "webextension-polyfill";
 import { type ModComponentBase } from "@/types/modComponentTypes";
 import {
   type ModOptionsDefinition,
-  ModVariablesDefinition,
+  type ModVariablesDefinition,
 } from "@/types/modDefinitionTypes";
 import { type BrickPipeline } from "@/bricks/types";
 import { type Metadata, type RegistryId } from "@/types/registryTypes";
@@ -74,6 +74,7 @@ export type BaseModComponentState = BaseModComponentStateV2;
 
 /**
  * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
  */
 export interface BaseFormStateV1<
   TModComponent extends BaseModComponentStateV1 = BaseModComponentStateV1,
@@ -146,6 +147,7 @@ export interface BaseFormStateV1<
 
 /**
  * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
  */
 export type BaseFormStateV2<
   TModComponent extends BaseModComponentStateV1 = BaseModComponentStateV1,
@@ -162,6 +164,7 @@ export type BaseFormStateV2<
 
 /**
  * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
  */
 export type BaseFormStateV3<
   TModComponent extends BaseModComponentStateV2 = BaseModComponentStateV2,
@@ -197,6 +200,7 @@ export type BaseFormStateV3<
 
 /**
  * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
  */
 export type BaseFormStateV4<
   TModComponent extends BaseModComponentStateV2 = BaseModComponentStateV2,
@@ -210,27 +214,33 @@ export type BaseFormStateV4<
   "type"
 >;
 
+/**
+ * Base form state version that introduces a variablesDefinition section for declaring mod variables.
+ * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
+ * @since 2.1.2
+ */
 export type BaseFormStateV5<
   TModComponent extends BaseModComponentState = BaseModComponentState,
   TStarterBrick extends BaseStarterBrickState = BaseStarterBrickState,
-> = Except<
-  BaseFormStateV4<TModComponent, TStarterBrick>,
-  "integrationDependencies"
-> & {
+> = BaseFormStateV4<TModComponent, TStarterBrick> & {
   /**
-   * Using the un-versioned type
+   * The mod variable definitions/declarations
+   * @see ModDefinition.variables
+   * @since 2.1.2
    */
-  integrationDependencies: IntegrationDependency[];
+  variablesDefinition: ModVariablesDefinition;
 };
 
 export type BaseFormState<
   TModComponent extends BaseModComponentState = BaseModComponentState,
   TStarterBrick extends BaseStarterBrickState = BaseStarterBrickState,
-> = BaseFormStateV5<TModComponent, TStarterBrick> & {
-  /**
-   * The mod variable definitions/declarations
-   * @see ModDefinition.variables
-   * @since 2.1.2
-   */
-  variablesDefinition: ModVariablesDefinition;
+> = Except<
+  // On migration, re-point this type to the most recent BaseFormStateV<N> type name
+  BaseFormStateV5<TModComponent, TStarterBrick>,
+  // NOTE: this is not changing the type shape/structure. It's just cleaning up the type name/reference which makes
+  // types easier to work with for testing migrations.
+  "integrationDependencies"
+> & {
+  integrationDependencies: IntegrationDependency[];
 };

src/pageEditor/store/editor/pageEditorTypes.ts

@@ -382,20 +382,44 @@ export type EditorStateV5 = Except<
  */
 export type EditorStateV6 = Except<EditorStateV5, "insertingStarterBrickType">;
 
-// Instead of maintaining old enums, just clearing data panel state on migration, see migrateEditorStateV5
+/**
+ * Version bump to account for changes in DataPanelTabKeys.
+ *
+ * Same type as EditorStateV6, but bumped because there's an associated migration to clear out the Data Panel UI state.
+ *
+ * @deprecated - Do not use versioned state types directly, exported for testing
+ * @see migrateEditorStateV6
+ * @see DataPanelTabKey
+ */
 export type EditorStateV7 = EditorStateV6;
 
+/**
+ * Version bump to account for variableDefinition property added in BaseFormState
+ *
+ * @deprecated - Do not use versioned state types directly, exported for testing
+ * @see migrateEditorStateV7
+ */
 export type EditorStateV8 = Except<
   EditorStateV7,
   "modComponentFormStates" | "deletedModComponentFormStatesByModId"
 > & {
   modComponentFormStates: BaseFormStateV5[];
-  deletedModComponentFormStatesByModId: Record<string, ModComponentFormState[]>;
+  deletedModComponentFormStatesByModId: Record<string, BaseFormStateV5[]>;
 };
 
-export type EditorState = Except<EditorStateV8, "modComponentFormStates"> & {
-  // `variablesDefinition` added to BaseFormState on ModComponentFormState
+/**
+ * The current Edis
+ */
+export type EditorState = Except<
+  // On migration, re-point this type to the most recent EditorStateV<N> type name
+  EditorStateV8,
+  // Swap out any properties with versioned types for type references to the latest version.
+  // NOTE: this is not changing the type shape/structure. It's just cleaning up the type name/reference which makes
+  // types easier to work with for testing migrations.
+  "modComponentFormStates" | "deletedModComponentFormStatesByModId"
+> & {
   modComponentFormStates: ModComponentFormState[];
+  deletedModComponentFormStatesByModId: Record<string, ModComponentFormState[]>;
 };
 
 export type EditorRootState = {

src/store/editorMigrations.test.ts

@@ -23,6 +23,7 @@ import {
   type EditorStateV5,
   type EditorStateV6,
   type EditorStateV7,
+  type EditorStateV8,
 } from "@/pageEditor/store/editor/pageEditorTypes";
 import { cloneDeep, mapValues, omit } from "lodash";
 import {
@@ -56,6 +57,7 @@ import {
   migrateEditorStateV4,
   migrateEditorStateV5,
   migrateEditorStateV6,
+  migrateEditorStateV7,
 } from "@/store/editorMigrations";
 import { type FactoryConfig } from "cooky-cutter/dist/define";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
@@ -249,6 +251,40 @@ const initialStateV6: EditorStateV6 & PersistedState = {
 const initialStateV7: EditorStateV7 & PersistedState =
   cloneDeep(initialStateV6);
 
+const initialStateV8: EditorStateV8 & PersistedState = {
+  selectionSeq: 0,
+  activeModComponentId: null,
+  activeModId: null,
+  expandedModId: null,
+  error: null,
+  beta: false,
+  modComponentFormStates: [],
+  knownEditableBrickIds: [],
+  dirty: {},
+  isBetaUI: false,
+  copiedBrick: undefined,
+  brickPipelineUIStateById: {},
+  dirtyModOptionsById: {},
+  dirtyModMetadataById: {},
+  visibleModalKey: null,
+  addBrickLocation: undefined,
+  keepLocalCopyOnCreateMod: false,
+  deletedModComponentFormStatesByModId: {},
+  availableActivatedModComponentIds: [],
+  isPendingAvailableActivatedModComponents: false,
+  availableDraftModComponentIds: [],
+  isPendingDraftModComponents: false,
+  isModListExpanded: true,
+  isDataPanelExpanded: true,
+  isDimensionsWarningDismissed: false,
+  isVariablePopoverVisible: false,
+  // Function under test does not handle updating the persistence, this is handled by redux-persist
+  _persist: {
+    version: 1,
+    rehydrated: false,
+  },
+};
+
 function unmigrateServices(
   integrationDependencies: IntegrationDependencyV2[] = [],
 ): IntegrationDependencyV1[] {
@@ -615,4 +651,16 @@ describe("editor state migrations", () => {
       );
     });
   });
+
+  describe("migrateEditorState V7 to V8", () => {
+    it("migrates empty state", () => {
+      expect(migrateEditorStateV7(initialStateV7)).toStrictEqual(
+        initialStateV8,
+      );
+    });
+
+    it("resets data panel shape", () => {
+      expect.fail("Not implemented");
+    });
+  });
 });

src/store/editorMigrations.ts

@@ -22,6 +22,7 @@ import {
   type BaseFormStateV2,
   type BaseFormStateV3,
   type BaseFormStateV4,
+  type BaseFormStateV5,
   type BaseModComponentStateV1,
   type BaseModComponentStateV2,
 } from "@/pageEditor/store/editor/baseFormStateTypes";
@@ -58,7 +59,7 @@ export const migrations: MigrationManifest = {
   5: (state: EditorStateV4 & PersistedState) => migrateEditorStateV4(state),
   6: (state: EditorStateV5 & PersistedState) => migrateEditorStateV5(state),
   7: (state: EditorStateV6 & PersistedState) => migrateEditorStateV6(state),
-  8: (state: EditorStateV8 & PersistedState) => migrateEditorStateV9(state),
+  9: (state: EditorStateV7 & PersistedState) => migrateEditorStateV7(state),
 };
 
 export function migrateIntegrationDependenciesV1toV2(
@@ -228,14 +229,23 @@ export function migrateEditorStateV6(
   });
 }
 
-export function migrateEditorStateV9(
-  state: EditorStateV8 & PersistedState,
-): EditorState & PersistedState {
+export function migrateEditorStateV7(
+  state: EditorStateV7 & PersistedState,
+): EditorStateV8 & PersistedState {
   // Reset the Data Panel state using the current set of DataPanelTabKeys
   return produce(state, (draft) => {
     for (const formState of draft.modComponentFormStates) {
-      (formState as ModComponentFormState).variablesDefinition =
+      (formState as BaseFormStateV5).variablesDefinition =
         emptyModVariablesDefinitionFactory();
     }
+
+    for (const formStates of Object.values(
+      draft.deletedModComponentFormStatesByModId,
+    )) {
+      for (const formState of formStates) {
+        (formState as BaseFormStateV5).variablesDefinition =
+          emptyModVariablesDefinitionFactory();
+      }
+    }
   }) as EditorState & PersistedState;
 }

src/types/modDefinitionTypes.ts

@@ -50,6 +50,12 @@ export type ModOptionsDefinition = {
 export type ModVariablesDefinition = {
   // Nest schema to make evolution easier in the future. Mod Variables shouldn't ever need a uiSchema because the values
   // are not user-facing/configurable.
+  /**
+   * JSON Schema for the mod variables. The top-level schema must be an object schema.
+   *
+   * Note that object schemas allow additional properties by default, so an empty object schema is backward compatible
+   * with existing mod definitions.
+   */
   schema: Schema;
 };
 

src/utils/modUtils.ts

@@ -18,7 +18,7 @@
 import {
   type ModDefinition,
   type ModOptionsDefinition,
-  ModVariablesDefinition,
+  type ModVariablesDefinition,
   type UnsavedModDefinition,
 } from "@/types/modDefinitionTypes";
 import { type Mod, type UnavailableMod } from "@/types/modTypes";