fix: restore selection plan edit route and page, remove popup

src/layouts/__tests__/selection-plan-id-layout.test.js

@@ -0,0 +1,183 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import { screen, act } from "@testing-library/react";
+import { Router, Route, Switch } from "react-router-dom";
+import { createMemoryHistory } from "history";
+import flushPromises from "flush-promises";
+import { renderWithRedux } from "../../utils/test-utils";
+import { getSelectionPlan } from "../../actions/selection-plan-actions";
+import { getMarketingSettingsBySelectionPlan } from "../../actions/marketing-actions";
+import SelectionPlanIdLayout from "../selection-plan-id-layout";
+
+jest.mock("i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (k) => k }
+}));
+
+// The page renders null until it's ready, so the breadcrumb's presence is our signal.
+jest.mock("react-breadcrumbs", () => ({
+  Breadcrumb: () => <div data-testid="breadcrumb" />
+}));
+
+jest.mock("../../actions/selection-plan-actions", () => ({
+  __esModule: true,
+  ...jest.requireActual("../../actions/selection-plan-actions"),
+  getSelectionPlan: jest.fn(),
+  resetSelectionPlanForm: jest.fn(() => ({ type: "RESET_SELECTION_PLAN_FORM" }))
+}));
+
+jest.mock("../../actions/marketing-actions", () => ({
+  __esModule: true,
+  ...jest.requireActual("../../actions/marketing-actions"),
+  getMarketingSettingsBySelectionPlan: jest.fn()
+}));
+
+// Stub the page: the real form needs a fuller marketing-settings shape than set up here.
+jest.mock("../../pages/selection-plans/edit-selection-plan-page", () => ({
+  __esModule: true,
+  default: () => <div data-testid="edit-selection-plan-page" />
+}));
+
+const renderAt = (path, currentSelectionPlan) => {
+  const history = createMemoryHistory({ initialEntries: [path] });
+  return renderWithRedux(
+    <Router history={history}>
+      <Route
+        path="/app/summits/:summit_id/selection-plans/:selection_plan_id"
+        component={SelectionPlanIdLayout}
+      />
+    </Router>,
+    {
+      initialState: {
+        currentSelectionPlanState: { entity: currentSelectionPlan },
+        currentSummitState: { currentSummit: { id: 1 } }
+      }
+    }
+  );
+};
+
+const settle = () => act(async () => flushPromises());
+
+const isPageRendered = () => screen.queryByTestId("breadcrumb") !== null;
+
+// Mirrors the sibling /new and /:id(\d+) routes in selection-plan-layout.js.
+const NewOrEditHarness = ({ history }) => (
+  <Router history={history}>
+    <Switch>
+      <Route
+        strict
+        exact
+        path="/app/summits/:summit_id/selection-plans/new"
+        component={SelectionPlanIdLayout}
+      />
+      <Route
+        path="/app/summits/:summit_id/selection-plans/:selection_plan_id(\d+)"
+        component={SelectionPlanIdLayout}
+      />
+    </Switch>
+  </Router>
+);
+
+describe("SelectionPlanIdLayout load guard", () => {
+  beforeEach(() => {
+    getSelectionPlan.mockReset();
+    getMarketingSettingsBySelectionPlan.mockReset();
+    getSelectionPlan.mockImplementation(() => () => Promise.resolve());
+    getMarketingSettingsBySelectionPlan.mockImplementation(
+      () => () => Promise.resolve()
+    );
+  });
+
+  it("does not render on direct load until the matching plan finishes fetching", async () => {
+    getSelectionPlan.mockImplementation(() => () => new Promise(() => {}));
+    renderAt("/app/summits/1/selection-plans/5", { id: 5 });
+    expect(isPageRendered()).toBe(false);
+  });
+
+  it("stops rendering when switching to a different plan id until the store catches up", async () => {
+    const history = createMemoryHistory({
+      initialEntries: ["/app/summits/1/selection-plans/5"]
+    });
+    renderWithRedux(
+      <Router history={history}>
+        <Route
+          path="/app/summits/:summit_id/selection-plans/:selection_plan_id"
+          component={SelectionPlanIdLayout}
+        />
+      </Router>,
+      {
+        initialState: {
+          currentSelectionPlanState: { entity: { id: 5 } },
+          currentSummitState: { currentSummit: { id: 1 } }
+        }
+      }
+    );
+    await settle();
+    expect(isPageRendered()).toBe(true);
+
+    act(() => {
+      history.push("/app/summits/1/selection-plans/8");
+    });
+    expect(isPageRendered()).toBe(false);
+    expect(getSelectionPlan).toHaveBeenCalledWith("8");
+
+    // Fetch settles, but the store's entity.id is still "5" — must stay unrendered.
+    await settle();
+    expect(isPageRendered()).toBe(false);
+  });
+
+  it("stops rendering when navigating from an existing plan to /new until the store reflects the reset", async () => {
+    const history = createMemoryHistory({
+      initialEntries: ["/app/summits/1/selection-plans/5"]
+    });
+    renderWithRedux(<NewOrEditHarness history={history} />, {
+      initialState: {
+        currentSelectionPlanState: { entity: { id: 5 } },
+        currentSummitState: { currentSummit: { id: 1 } }
+      }
+    });
+    await settle();
+    expect(isPageRendered()).toBe(true);
+
+    // Store still holds plan 5's entity (reset hasn't landed) — must not render.
+    act(() => {
+      history.push("/app/summits/1/selection-plans/new");
+    });
+    expect(isPageRendered()).toBe(false);
+  });
+
+  it("renders on /new once the store reflects the reset (default) entity", async () => {
+    const history = createMemoryHistory({
+      initialEntries: ["/app/summits/1/selection-plans/new"]
+    });
+    renderWithRedux(<NewOrEditHarness history={history} />, {
+      initialState: {
+        currentSelectionPlanState: { entity: { id: 0 } },
+        currentSummitState: { currentSummit: { id: 1 } }
+      }
+    });
+    await settle();
+    expect(isPageRendered()).toBe(true);
+  });
+
+  it("does not render or throw when the fetch rejects", async () => {
+    getSelectionPlan.mockImplementation(
+      () => () => Promise.reject(new Error("fail"))
+    );
+    renderAt("/app/summits/1/selection-plans/5", { id: 0 });
+    await expect(settle()).resolves.not.toThrow();
+    expect(isPageRendered()).toBe(false);
+  });
+});

src/layouts/selection-plan-id-layout.js

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { Breadcrumb } from "react-breadcrumbs";
@@ -11,6 +11,9 @@ import {
 import { getMarketingSettingsBySelectionPlan } from "../actions/marketing-actions";
 import { MAX_PER_PAGE } from "../utils/constants";
 
+const EditSelectionPlanPage = React.lazy(() =>
+  import("../pages/selection-plans/edit-selection-plan-page")
+);
 const SelectionPlanExtraQuestionsLayout = React.lazy(() =>
   import("./selection-plan-extra-questions-layout")
 );
@@ -26,31 +29,47 @@ const SelectionPlanIdLayout = ({
   resetSelectionPlanForm,
   getMarketingSettingsBySelectionPlan
 }) => {
+  const [hasLoaded, setHasLoaded] = useState(false);
   const selectionPlanId = match.params.selection_plan_id;
   const breadcrumb = selectionPlanId
     ? currentSelectionPlan.name
     : T.translate("general.new");
 
   useEffect(() => {
+    setHasLoaded(false);
     if (!selectionPlanId) {
       resetSelectionPlanForm();
+      setHasLoaded(true);
     } else {
-      getSelectionPlan(selectionPlanId).then(() =>
-        getMarketingSettingsBySelectionPlan(
-          selectionPlanId,
-          null,
-          1,
-          MAX_PER_PAGE
+      getSelectionPlan(selectionPlanId)
+        .then(() =>
+          getMarketingSettingsBySelectionPlan(
+            selectionPlanId,
+            null,
+            1,
+            MAX_PER_PAGE
+          )
         )
-      );
+        .then(() => setHasLoaded(true))
+        .catch(() => {});
     }
   }, [selectionPlanId]);
 
+  if (!hasLoaded || currentSelectionPlan.id !== Number(selectionPlanId || 0)) {
+    return null;
+  }
+
   return (
     <div>
       <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
       <Suspense fallback={<AjaxLoader show relative size={120} />}>
         <Switch>
+          <Route
+            strict
+            exact
+            path={`${match.url}`}
+            component={EditSelectionPlanPage}
+          />
           <Route
             path={`${match.url}/extra-questions`}
             component={SelectionPlanExtraQuestionsLayout}
@@ -59,7 +78,9 @@ const SelectionPlanIdLayout = ({
             path={`${match.url}/rating-types`}
             component={SelectionPlanRatingTypesLayout}
           />
-          <Redirect to={`/app/summits/${currentSummit.id}/selection-plans`} />
+          <Redirect
+            to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
+          />
         </Switch>
       </Suspense>
     </div>

src/layouts/selection-plan-layout.js

@@ -38,7 +38,7 @@ const SelectionPlanLayout = ({ match, currentSummit }) => (
         strict
         exact
         path={`${match.url}/new`}
-        render={() => <Redirect to={`${match.url}`} />}
+        component={SelectionPlanIdLayout}
       />
       <Route
         path={`${match.url}/:selection_plan_id(\\d+)`}

src/pages/selection-plans/__tests__/selection-plan-list-page.test.js

@@ -7,25 +7,12 @@ import { renderWithRedux } from "../../../utils/test-utils";
 import SelectionPlanListPage from "../selection-plan-list-page";
 import {
   getSelectionPlans,
-  getSelectionPlan,
-  deleteSelectionPlan,
-  resetSelectionPlanForm,
-  saveSelectionPlan,
-  saveSelectionPlanSettings
+  deleteSelectionPlan
 } from "../../../actions/selection-plan-actions";
-import { getMarketingSettingsBySelectionPlan } from "../../../actions/marketing-actions";
 
 jest.mock("../../../actions/selection-plan-actions", () => ({
   getSelectionPlans: jest.fn(),
-  getSelectionPlan: jest.fn(),
-  deleteSelectionPlan: jest.fn(),
-  resetSelectionPlanForm: jest.fn(),
-  saveSelectionPlan: jest.fn(),
-  saveSelectionPlanSettings: jest.fn()
-}));
-
-jest.mock("../../../actions/marketing-actions", () => ({
-  getMarketingSettingsBySelectionPlan: jest.fn()
+  deleteSelectionPlan: jest.fn()
 }));
 
 jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
@@ -50,23 +37,12 @@ jest.mock(
   })
 );
 
-jest.mock("../edit-selection-plan-page", () => ({
-  __esModule: true,
-  default: ({ onSave }) => (
-    <div data-testid="edit-selection-plan">
-      <button type="button" onClick={() => onSave({ marketing_settings: {} })}>
-        popup-save
-      </button>
-    </div>
-  )
-}));
-
 jest.mock("i18n-react/dist/i18n-react", () => ({
   __esModule: true,
   default: { translate: (key) => key }
 }));
 
-const mockHistory = { replace: jest.fn() };
+const mockHistory = { push: jest.fn(), replace: jest.fn() };
 const mockMatch = { params: {} };
 
 const initialState = {
@@ -83,50 +59,44 @@ const initialState = {
     term: "",
     order: "id",
     orderDir: 1
-  },
-  currentSelectionPlanState: {
-    entity: { id: 0, name: "" },
-    errors: {}
   }
 };
 
 describe("SelectionPlanListPage", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     getSelectionPlans.mockReturnValue(() => Promise.resolve());
-    getSelectionPlan.mockReturnValue(() => Promise.resolve());
     deleteSelectionPlan.mockReturnValue(() => Promise.resolve());
-    resetSelectionPlanForm.mockReturnValue({
-      type: "RESET_SELECTION_PLAN_FORM"
-    });
-    getMarketingSettingsBySelectionPlan.mockReturnValue(() =>
-      Promise.resolve()
-    );
-    saveSelectionPlan.mockReturnValue(() => Promise.resolve({ id: 1 }));
-    saveSelectionPlanSettings.mockReturnValue(() => Promise.resolve());
   });
 
-  it("reloads the list after a successful save", async () => {
+  it("navigates to the new selection plan route", async () => {
     renderWithRedux(
       <SelectionPlanListPage history={mockHistory} match={mockMatch} />,
       { initialState }
     );
 
-    // Open dialog
     await userEvent.click(
       screen.getByRole("button", {
         name: "selection_plan_list.add_selection_plan"
       })
     );
-    expect(screen.getByTestId("edit-selection-plan")).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole("button", { name: "popup-save" }));
-      await flushPromises();
-    });
+    expect(mockHistory.push).toHaveBeenCalledWith(
+      "/app/summits/1/selection-plans/new"
+    );
+  });
 
-    // Call 1: useEffect on mount; call 2: handleSave → refreshSelectionPlans
-    expect(getSelectionPlans).toHaveBeenCalledTimes(2);
+  it("navigates to the selection plan edit route", async () => {
+    renderWithRedux(
+      <SelectionPlanListPage history={mockHistory} match={mockMatch} />,
+      { initialState }
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "edit-row" }));
+
+    expect(mockHistory.push).toHaveBeenCalledWith(
+      "/app/summits/1/selection-plans/1"
+    );
   });
 
   it("reloads the list after a successful delete", async () => {