Fix opening panels in production. (#1466)

canonical · May 3, 2023 · 2d1b212 · 2d1b212
1 parent d7297fc
commit 2d1b212
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/src/components/ModelTableList/shared.tsx b/src/components/ModelTableList/shared.tsx
@@ -278,7 +278,8 @@ export function generateAccessButton(
 ) {
   return (
     <button
-      onClick={() => {
+      onClick={(event) => {
+        event.stopPropagation();
         setPanelQs(
           {
             model: modelName,

diff --git a/src/pages/ControllersIndex/ControllersIndex.tsx b/src/pages/ControllersIndex/ControllersIndex.tsx
@@ -190,9 +190,10 @@ function Details() {
         <div className="controllers--register">
           <button
             className="p-button--positive"
-            onClick={() =>
-              setPanelQs({ panel: "register-controller" }, { replace: true })
-            }
+            onClick={(event) => {
+              event.stopPropagation();
+              setPanelQs({ panel: "register-controller" }, { replace: true });
+            }}
           >
             Register a controller
           </button>

diff --git a/src/pages/EntityDetails/App/App.tsx b/src/pages/EntityDetails/App/App.tsx
@@ -1,5 +1,6 @@
 import { Button, MainTable, Icon } from "@canonical/react-components";
 import { Field, Formik } from "formik";
+import type { MouseEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
@@ -173,7 +174,8 @@ export default function App(): JSX.Element {
   });
 
   const application = entity ? applications?.[entity] : null;
-  const showConfig = () => {
+  const showConfig = (event: MouseEvent) => {
+    event.stopPropagation();
     setQuery(
       { panel: "config", entity, charm: application?.["charm-url"], modelUUID },
       { replace: true }
@@ -310,7 +312,10 @@ export default function App(): JSX.Element {
                   appearance="base"
                   className="entity-details__action-button"
                   hasIcon={true}
-                  onClick={showActions}
+                  onClick={(event: MouseEvent) => {
+                    event.stopPropagation();
+                    showActions();
+                  }}
                   disabled={!enableActionButtonRow}
                   data-testid={TestId.RUN_ACTION_BUTTON}
                 >

diff --git a/src/pages/EntityDetails/Model/ApplicationsTab/ApplicationsTab.tsx b/src/pages/EntityDetails/Model/ApplicationsTab/ApplicationsTab.tsx
@@ -1,13 +1,14 @@
-import { Button, MainTable, Icon } from "@canonical/react-components";
+import { Button, Icon, MainTable } from "@canonical/react-components";
 import type { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
 import classnames from "classnames";
 import Fuse from "fuse.js";
+import type { MouseEvent } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 
-import ChipGroup from "components/ChipGroup/ChipGroup";
 import type { Chip } from "components/ChipGroup/ChipGroup";
+import ChipGroup from "components/ChipGroup/ChipGroup";
 import ContentReveal from "components/ContentReveal/ContentReveal";
 import type { EntityDetailsRoute } from "components/Routes/Routes";
 import useAnalytics from "hooks/useAnalytics";
@@ -72,7 +73,8 @@ function SearchResultsActionsRow() {
     panel: null,
   });
 
-  const handleRunAction = async () => {
+  const handleRunAction = async (event: MouseEvent) => {
+    event.stopPropagation();
     sendAnalytics({
       category: "ApplicationSearch",
       action: "Run action (button)",

diff --git a/src/pages/EntityDetails/Model/Model.tsx b/src/pages/EntityDetails/Model/Model.tsx
@@ -144,9 +144,10 @@ const Model = () => {
             ) && (
               <button
                 className="entity-details__action-button"
-                onClick={() =>
-                  setQuery({ panel: "share-model" }, { replace: true })
-                }
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setQuery({ panel: "share-model" }, { replace: true });
+                }}
               >
                 <i className="p-icon--share"></i>
                 {Label.ACCESS_BUTTON}

diff --git a/src/panels/ActionsPanel/CharmActionsPanel.tsx b/src/panels/ActionsPanel/CharmActionsPanel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Button } from "@canonical/react-components";
-import type { MutableRefObject } from "react";
+import type { MouseEvent, MutableRefObject } from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import reactHotToast from "react-hot-toast";
 import { useSelector } from "react-redux";
@@ -165,7 +165,8 @@ export default function CharmActionsPanel(): JSX.Element {
         return SubmitConfirmation(
           selectedAction,
           selectedApplications,
-          () => {
+          (event) => {
+            event.stopPropagation();
             setConfirmType("");
             executeAction();
             setQueryParams({ panel: null }, { replace: true });
@@ -243,7 +244,7 @@ function onValuesChange(
 function SubmitConfirmation(
   actionName: string,
   applications: ApplicationInfo[],
-  confirmFunction: () => void,
+  confirmFunction: (event: MouseEvent) => void,
   cancelFunction: () => void
 ): JSX.Element {
   const applicationCount = applications.length;