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 - - + )}