diff --git a/src/extensionConsole/pages/mods/hooks/useActivateAction.ts b/src/extensionConsole/pages/mods/hooks/useActivateAction.ts
index 64d4906f33..6e3feb3dcc 100644
--- a/src/extensionConsole/pages/mods/hooks/useActivateAction.ts
+++ b/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,
diff --git a/src/extensionConsole/shared/routeHelpers.ts b/src/extensionConsole/shared/routeHelpers.ts
new file mode 100644
index 0000000000..efe9e7214e
--- /dev/null
+++ b/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 .
+ */
+
+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)}`;
+}
diff --git a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx
index f332ce4b98..3fe8aafbe6 100644
--- a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx
+++ b/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 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;
+}) => (
+
+ You are editing version {installedModVersion} of this mod, the latest
+ version is {latestModVersion}. To get the latest version,{" "}
+
+ re-activate the mod
+
+
+);
+
const ModMetadataEditor: React.VoidFunctionComponent = () => {
const modId = useSelector(selectActiveModId);
@@ -126,17 +155,11 @@ const ModMetadataEditor: React.VoidFunctionComponent = () => {
Mod Metadata
{showOldModVersionWarning && (
-
- You are editing version {installedModVersion} of this mod, the
- latest version is {latestModVersion}. To get the latest version,{" "}
-
- re-activate the mod
-
-
+
)}