fix api demo panel follow-up review feedback

src/theme/ApiDemoPanel/Execute/index.tsx

@@ -59,9 +59,20 @@ function Execute({ postman, proxy }: Props) {
 
   const delay = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));
+  const handleActionClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (isValidRequest) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  };
 
   return (
-    <div className={sharedStyles.actionStack}>
+    <div
+      className={sharedStyles.actionStack}
+      onClickCapture={handleActionClickCapture}
+    >
       <button
         className={`button button--primary button--sm ${sharedStyles.actionButton}`}
         disabled={!isValidRequest}

src/theme/ApiDemoPanel/Server/index.tsx

@@ -18,11 +18,15 @@ function Server() {
   const value = useTypedSelector((state: any) => state.server.value);
   const options = useTypedSelector((state: any) => state.server.options);
   const dispatch = useTypedDispatch();
+  const serverOptions = Array.isArray(options) ? options : [];
+  const fallbackServer =
+    serverOptions.find((option: any) => option.url === value?.url) ||
+    serverOptions[0];
 
   const currentServer =
-    Array.isArray(options) && options.length > 0
-      ? options.find((option: any) => option.url === value?.url) || options[0]
-      : undefined;
+    value && fallbackServer && value.url === fallbackServer.url
+      ? value
+      : fallbackServer;
   const handleVariableChange =
     (key: string) =>
     (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
@@ -32,21 +36,21 @@ function Server() {
     };
 
   useEffect(() => {
-    if (!currentServer) {
+    if (!fallbackServer) {
       return;
     }
 
-    if (!value || value.url !== currentServer.url) {
-      dispatch(setServer(JSON.stringify(currentServer)));
+    if (!value || value.url !== fallbackServer.url) {
+      dispatch(setServer(JSON.stringify(fallbackServer)));
     }
-  }, [currentServer, dispatch, value]);
+  }, [dispatch, fallbackServer, value]);
 
-  if (!currentServer || !Array.isArray(options) || options.length === 0) {
+  if (!currentServer || serverOptions.length === 0) {
     return null;
   }
 
   const optionList = normalizeSelectOptions(
-    options.map((option: any, index: number) => ({
+    serverOptions.map((option: any, index: number) => ({
       label: resolveServerLabel(option, index),
       value: option.url,
     }))
@@ -62,16 +66,18 @@ function Server() {
 
       <FormItem
         description={
-          options.length > 1
+          serverOptions.length > 1
             ? "Switch between the published environments for this endpoint."
             : "This endpoint is served from a single environment."
         }
         label="Environment"
       >
-        {options.length > 1 ? (
+        {serverOptions.length > 1 ? (
           <FormSelect
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              const nextServer = options.find((option: any) => option.url === event.target.value);
+              const nextServer = serverOptions.find(
+                (option: any) => option.url === event.target.value
+              );
 
               if (nextServer) {
                 dispatch(setServer(JSON.stringify(nextServer)));

src/theme/ApiDemoPanel/shared.module.css

@@ -196,6 +196,7 @@
 .actionButton:disabled {
   box-shadow: none;
   cursor: not-allowed;
+  pointer-events: auto;
 }
 
 .actionHint {

tests/api-demo-panel-ui.test.cjs

@@ -43,6 +43,7 @@ const formSelectComponent = read(
   "FormSelect",
   "index.tsx"
 );
+const sharedStyles = read("src", "theme", "ApiDemoPanel", "shared.module.css");
 const utilsModule = read("src", "theme", "ApiDemoPanel", "utils.ts");
 
 test("shared demo-panel overrides exist", () => {
@@ -80,3 +81,17 @@ test("array params sync from item changes without depending on param identity",
   assert.match(paramOptionsComponent, /const paramRef = useRef\(param\)/);
   assert.match(paramOptionsComponent, /\}, \[dispatch, items\]\);/);
 });
+
+test("server panel renders variables from the selected server state", () => {
+  assert.match(serverComponent, /const fallbackServer =/);
+  assert.match(
+    serverComponent,
+    /value && fallbackServer && value\.url === fallbackServer\.url/
+  );
+});
+
+test("disabled send action does not fall through to the request summary", () => {
+  assert.match(executeComponent, /onClickCapture=\{handleActionClickCapture\}/);
+  assert.match(executeComponent, /event\.stopPropagation\(\)/);
+  assert.match(sharedStyles, /\.actionButton:disabled[\s\S]*pointer-events: auto;/);
+});