feat(ui): add delete static IP side panel (#5410)

Co-authored-by: Nick De Villiers <[email protected]>

.env

@@ -7,3 +7,4 @@ VITE_APP_BASENAME=${BASENAME}
 VITE_APP_VITE_BASENAME=${VITE_BASENAME}
 VITE_APP_WEBSOCKET_DEBUG=false
 VITE_APP_USABILLA_ID=fd6cf482fbbb
+VITE_APP_STATIC_IPS_ENABLED=false

src/app/subnets/views/SubnetDetails/SubnetActionForms/SubnetActionForms.tsx

@@ -1,6 +1,7 @@
 import AddStaticRouteForm from "../StaticRoutes/AddStaticRouteForm";
 import DeleteStaticRouteForm from "../StaticRoutes/DeleteStaticRouteform";
 import EditStaticRouteForm from "../StaticRoutes/EditStaticRouteForm";
+import DeleteStaticIP from "../SubnetStaticIPs/DeleteStaticIP";
 
 import DeleteSubnet from "./components/DeleteSubnet";
 import EditBootArchitectures from "./components/EditBootArchitectures";
@@ -26,19 +27,24 @@ const FormComponents: Record<
   [SubnetActionTypes.DeleteStaticRoute]: DeleteStaticRouteForm,
   [SubnetActionTypes.ReserveRange]: ReservedRangeForm,
   [SubnetActionTypes.DeleteReservedRange]: ReservedRangeDeleteForm,
+  [SubnetActionTypes.ReserveStaticIP]: () => null,
+  [SubnetActionTypes.EditStaticIP]: () => null,
+  [SubnetActionTypes.DeleteStaticIP]: DeleteStaticIP,
 };
 
 const SubnetActionForms = ({
   subnetId,
   activeForm,
   setSidePanelContent,
   staticRouteId,
+  macAddress,
 }: SubnetActionProps): JSX.Element => {
   const FormComponent = activeForm ? FormComponents[activeForm] : () => null;
 
   return (
     <FormComponent
       activeForm={activeForm}
+      macAddress={macAddress}
       setSidePanelContent={setSidePanelContent}
       staticRouteId={staticRouteId}
       subnetId={subnetId}

src/app/subnets/views/SubnetDetails/SubnetDetails.tsx

@@ -5,6 +5,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 
 import StaticRoutes from "./StaticRoutes";
 import SubnetDetailsHeader from "./SubnetDetailsHeader";
+import SubnetStaticIPs from "./SubnetStaticIPs";
 import SubnetSummary from "./SubnetSummary";
 import SubnetUsedIPs from "./SubnetUsedIPs";
 import Utilisation from "./Utilisation";
@@ -120,7 +121,14 @@ const SubnetDetails = (): JSX.Element => {
           path={getRelativeRoute(urls.subnets.subnet.staticRoutes(null), base)}
         />
         <Route
-          element={<ReservedRanges subnetId={id} />}
+          element={
+            <>
+              {import.meta.env.VITE_APP_STATIC_IPS_ENABLED === "true" && (
+                <SubnetStaticIPs />
+              )}
+              <ReservedRanges subnetId={id} />
+            </>
+          }
           path={getRelativeRoute(
             urls.subnets.subnet.reservedIpAddresses(null),
             base

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/DeleteStaticIP/DeleteStaticIP.test.tsx

@@ -0,0 +1,20 @@
+import DeleteStaticIPs from "./DeleteStaticIP";
+
+import { renderWithBrowserRouter, screen } from "@/testing/utils";
+
+it("renders a delete confirmation form", () => {
+  renderWithBrowserRouter(
+    <DeleteStaticIPs
+      macAddress="91:2a:95:aa:2e:50"
+      setSidePanelContent={vi.fn()}
+    />
+  );
+  expect(
+    screen.getByRole("form", { name: "Delete static IP" })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText(
+      "Are you sure you want to delete this static IP? This action is permanent and can not be undone."
+    )
+  ).toBeInTheDocument();
+});

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/DeleteStaticIP/DeleteStaticIP.tsx

@@ -0,0 +1,22 @@
+import type { SubnetActionProps } from "../../types";
+
+import ModelActionForm from "@/app/base/components/ModelActionForm";
+
+type Props = Pick<SubnetActionProps, "setSidePanelContent" | "macAddress">;
+const DeleteStaticIP = ({ setSidePanelContent, macAddress }: Props) => {
+  if (!macAddress) return null;
+  const handleClose = () => setSidePanelContent(null);
+  // TODO: Implement onSubmit function and passing IDs when API supports it.
+  // https://warthogs.atlassian.net/browse/MAASENG-2983
+  return (
+    <ModelActionForm
+      aria-label="Delete static IP"
+      initialValues={{}}
+      modelType="static IP"
+      onCancel={handleClose}
+      onSubmit={() => {}}
+    />
+  );
+};
+
+export default DeleteStaticIP;

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/DeleteStaticIP/index.ts

@@ -0,0 +1 @@
+export { default } from "./DeleteStaticIP";

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/SubnetStaticIPs.test.tsx

@@ -0,0 +1,13 @@
+import SubnetStaticIPs from "./SubnetStaticIPs";
+
+import { renderWithBrowserRouter, screen } from "@/testing/utils";
+
+it("renders", () => {
+  renderWithBrowserRouter(<SubnetStaticIPs />);
+  expect(
+    screen.getByRole("heading", { name: "Static IPs" })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("button", { name: "Reserve static IP" })
+  ).toBeInTheDocument();
+});

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/SubnetStaticIPs.tsx

@@ -0,0 +1,34 @@
+import { MainToolbar } from "@canonical/maas-react-components";
+import { Button } from "@canonical/react-components";
+
+import { SubnetActionTypes, SubnetDetailsSidePanelViews } from "../constants";
+
+import { useSidePanel } from "@/app/base/side-panel-context";
+
+const SubnetStaticIPs = () => {
+  const { setSidePanelContent } = useSidePanel();
+
+  return (
+    <>
+      <MainToolbar>
+        <MainToolbar.Title>Static IPs</MainToolbar.Title>
+        <MainToolbar.Controls>
+          <Button
+            appearance="positive"
+            onClick={() =>
+              setSidePanelContent({
+                view: SubnetDetailsSidePanelViews[
+                  SubnetActionTypes.ReserveStaticIP
+                ],
+              })
+            }
+          >
+            Reserve static IP
+          </Button>
+        </MainToolbar.Controls>
+      </MainToolbar>
+    </>
+  );
+};
+
+export default SubnetStaticIPs;

src/app/subnets/views/SubnetDetails/SubnetStaticIPs/index.ts

@@ -0,0 +1 @@
+export { default } from "./SubnetStaticIPs";

src/app/subnets/views/SubnetDetails/constants.ts

@@ -12,6 +12,9 @@ export const SubnetActionTypes = {
   DeleteStaticRoute: "DeleteStaticRoute",
   ReserveRange: "ReserveRange",
   DeleteReservedRange: "DeleteReservedRange",
+  ReserveStaticIP: "ReserveStaticIP",
+  EditStaticIP: "EditStaticIP",
+  DeleteStaticIP: "DeleteStaticIP",
 } as const;
 export type SubnetActionType = ValueOf<typeof SubnetActionTypes>;
 
@@ -24,6 +27,9 @@ export const subnetActionLabels = {
   [SubnetActionTypes.DeleteStaticRoute]: "Delete static route",
   [SubnetActionTypes.ReserveRange]: "Reserve range",
   [SubnetActionTypes.DeleteReservedRange]: "Delete Reserved Range",
+  [SubnetActionTypes.ReserveStaticIP]: "Reserve static IP",
+  [SubnetActionTypes.EditStaticIP]: "Edit static IP",
+  [SubnetActionTypes.DeleteStaticIP]: "Delete static IP",
 } as const;
 
 export const SubnetDetailsSidePanelViews = {
@@ -44,6 +50,9 @@ export const SubnetDetailsSidePanelViews = {
     "",
     SubnetActionTypes.DeleteReservedRange,
   ],
+  [SubnetActionTypes.ReserveStaticIP]: ["", SubnetActionTypes.ReserveStaticIP],
+  [SubnetActionTypes.EditStaticIP]: ["", SubnetActionTypes.EditStaticIP],
+  [SubnetActionTypes.DeleteStaticIP]: ["", SubnetActionTypes.DeleteStaticIP],
 } as const;
 
 export type SubnetDetailsSidePanelContent = SidePanelContent<

src/app/subnets/views/SubnetDetails/types.ts

@@ -14,4 +14,5 @@ export interface SubnetActionProps {
   staticRouteId?: StaticRoute[StaticRouteMeta.PK];
   activeForm: SubnetAction;
   setSidePanelContent: SetSidePanelContent;
+  macAddress?: string;
 }