#8605: link directly to mod re-activation from Page Editor version wa…

…rning (#8634)

src/extensionConsole/pages/mods/hooks/useActivateAction.ts

@@ -21,6 +21,7 @@ import { isModDefinition } from "@/utils/modUtils";
 import reportEvent from "@/telemetry/reportEvent";
 import { Events } from "@/telemetry/events";
 import { push } from "connected-react-router";
+import { getActivateModHashRoute } from "@/extensionConsole/shared/routeHelpers";
 
 function useActivateAction(modViewItem: ModViewItem): (() => void) | null {
   const dispatch = useDispatch();
@@ -33,9 +34,7 @@ function useActivateAction(modViewItem: ModViewItem): (() => void) | null {
         reinstall: false,
       });
 
-      dispatch(
-        push(`/marketplace/activate/${encodeURIComponent(mod.metadata.id)}`),
-      );
+      dispatch(push(getActivateModHashRoute(mod.metadata.id)));
     } else {
       reportEvent(Events.START_MOD_ACTIVATE, {
         blueprintId: null,

src/extensionConsole/shared/routeHelpers.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { type RegistryId } from "@/types/registryTypes";
+
+/**
+ * @file This file contains helper functions for generating routes in the Extension Console. Other contexts can
+ * also use these methods to generate deep links.
+ */
+
+/**
+ * Returns the Extension Console hash route to activate a mod in the Extension Console.
+ */
+export function getActivateModHashRoute(modId: RegistryId): string {
+  return `/marketplace/activate/${encodeURIComponent(modId)}`;
+}

src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx

@@ -42,6 +42,8 @@ import { FieldDescriptions } from "@/modDefinitions/modDefinitionConstants";
 import IntegrationsSliceModIntegrationsContextAdapter from "@/integrations/store/IntegrationsSliceModIntegrationsContextAdapter";
 import cx from "classnames";
 import { assertNotNullish } from "@/utils/nullishUtils";
+import { type RegistryId } from "@/types/registryTypes";
+import { getActivateModHashRoute } from "@/extensionConsole/shared/routeHelpers";
 
 // TODO: This should be yup.SchemaOf<RecipeMetadataFormState> but we can't set the `id` property to `RegistryId`
 // see: https://github.com/jquense/yup/issues/1183#issuecomment-749186432
@@ -65,6 +67,33 @@ const selectFirstModComponent = createSelector(
     modComponents.find((x) => x._recipe?.id === activeModId),
 );
 
+const OldModVersionAlert: React.FunctionComponent<{
+  modId: RegistryId;
+  installedModVersion: string;
+  latestModVersion: string;
+}> = ({
+  modId,
+  installedModVersion,
+  latestModVersion,
+}: {
+  modId: RegistryId;
+  installedModVersion: string;
+  latestModVersion: string;
+}) => (
+  <Alert variant="warning">
+    You are editing version {installedModVersion} of this mod, the latest
+    version is {latestModVersion}. To get the latest version,{" "}
+    <a
+      href={`/options.html#${getActivateModHashRoute(modId)}`}
+      target="_blank"
+      title="Re-activate the mod"
+      rel="noreferrer"
+    >
+      re-activate the mod
+    </a>
+  </Alert>
+);
+
 const ModMetadataEditor: React.VoidFunctionComponent = () => {
   const modId = useSelector(selectActiveModId);
 
@@ -126,17 +155,11 @@ const ModMetadataEditor: React.VoidFunctionComponent = () => {
         <Card.Header>Mod Metadata</Card.Header>
         <Card.Body>
           {showOldModVersionWarning && (
-            <Alert variant="warning">
-              You are editing version {installedModVersion} of this mod, the
-              latest version is {latestModVersion}. To get the latest version,{" "}
-              <a
-                href="/options.html#/mods"
-                target="_blank"
-                title="Re-activate the mod"
-              >
-                re-activate the mod
-              </a>
-            </Alert>
+            <OldModVersionAlert
+              modId={modId}
+              installedModVersion={installedModVersion}
+              latestModVersion={latestModVersion}
+            />
           )}
           <ConnectedFieldTemplate
             name="id"

src/tsconfig.strictNullChecks.json

@@ -920,6 +920,7 @@
     "./extensionConsole/pages/workshop/workshopTypes.ts",
     "./extensionConsole/pages/workshop/workshopUtils.test.ts",
     "./extensionConsole/pages/workshop/workshopUtils.ts",
+    "./extensionConsole/shared/routeHelpers.ts",
     "./extensionConsole/testHelpers.tsx",
     "./extensionConsole/toggleSidebar.tsx",
     "./extensionContext.ts",