Configurable debugUrl

src/App.tsx

@@ -12,7 +12,7 @@ const WebhookList = React.lazy(
   () => import("./WebhookDisplay/WebhookList.component")
 );
 import { ApolloProvider } from "@apollo/client";
-import { WebhookStoreUrlContext } from "./NavBar/WebhookStoreUrl/WebhookStoreUrl.context";
+import { WebhookContext } from "./NavBar/WebhookContext/WebhookContext";
 import { createApolloClient } from "./apollo.client";
 import { useStateInLocalStorage } from "./use-state-with-local-storage.hook";
 import { isValidHttpUrl } from "./utils/is-valid-url";
@@ -31,11 +31,19 @@ export default function App() {
     isValidHttpUrl
   );
 
+  const [debugUrl, setDebugUrl] = useStateInLocalStorage(
+    "debugUrl",
+    "http://localhost:8010/proxy",
+    isValidHttpUrl
+  );
+
   return (
-    <WebhookStoreUrlContext.Provider
+    <WebhookContext.Provider
       value={{
-        value: webhookStoreUrl,
-        setValue: setWebhooksStoreUrl,
+        webhookStoreUrl,
+        setWebhooksStoreUrl,
+        debugUrl,
+        setDebugUrl,
       }}
     >
       <ApolloProvider client={createApolloClient(webhookStoreUrl)}>
@@ -47,6 +55,6 @@ export default function App() {
           </Suspense>
         </Theme>
       </ApolloProvider>
-    </WebhookStoreUrlContext.Provider>
+    </WebhookContext.Provider>
   );
 }

src/NavBar/DebugUrl/DebugUrl.component.tsx

@@ -0,0 +1,28 @@
+import { Label } from "@pluralsight/ps-design-system-text";
+import TextInput from "@pluralsight/ps-design-system-textinput";
+import React, { useContext } from "react";
+import { WebhookContext } from "../WebhookContext/WebhookContext";
+import NavItem from "@pluralsight/ps-design-system-navitem";
+
+export function DebugUrlInput() {
+    const { debugUrl, setDebugUrl } = useContext(WebhookContext);
+  return (
+    <NavItem key={"DebugUrlInput"}>
+      <Label
+        size={Label.sizes.xSmall}
+        style={{ marginRight: "8px", marginLeft: "8px" }}
+      >
+        Debug Destination URL:
+      </Label>
+      <TextInput
+        appearance={TextInput.appearances.subtle}
+        placeholder="http://localhost:8010/proxy"
+        size={TextInput.sizes.small}
+        defaultValue={debugUrl}
+        onBlur={(event) => {
+          setDebugUrl(event.target.value);
+        }}
+      ></TextInput>
+    </NavItem>
+  );
+}

src/NavBar/StoreConfig/StoreConfigNavItem.tsx

@@ -6,7 +6,7 @@ import Button from "@pluralsight/ps-design-system-button";
 import { StoreConfigInnerDialog } from "./StoreConfigDialog";
 import Dialog from "@pluralsight/ps-design-system-dialog";
 import useFetch from "use-http";
-import { WebhookStoreUrlContext } from "../WebhookStoreUrl/WebhookStoreUrl.context";
+import { WebhookContext } from "../WebhookContext/WebhookContext";
 import { ACCESS_TOKEN_KEY, IDENTITY_TOKEN_KEY } from "../../local-storage";
 import { decodeJWT } from "../../utils/decode-jwt";
 
@@ -27,7 +27,7 @@ export const StoreConfigNavItem = () => {
     userHasAccessToStore: boolean;
   }>({ userHasAccessToStore: false });
 
-  const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext);
+  const { webhookStoreUrl } = useContext(WebhookContext);
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
   const { get, response } = useFetch(new URL(webhookStoreUrl).origin, {
     headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},

src/NavBar/WebhookContext/WebhookContext.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const WebhookContext = React.createContext({
+  webhookStoreUrl: "https://webhook-store.herokuapp.com",
+  setWebhooksStoreUrl: (_newValue: string) => {},
+  debugUrl: "http://localhost:8010/proxy",
+  setDebugUrl: (_newValue: string) => {},
+});

src/NavBar/WebhookStoreUrl/WebhookStoreUrl.component.tsx

@@ -1,11 +1,11 @@
 import { Label } from "@pluralsight/ps-design-system-text";
 import TextInput from "@pluralsight/ps-design-system-textinput";
 import React, { useContext } from "react";
-import { WebhookStoreUrlContext } from "./WebhookStoreUrl.context";
+import { WebhookContext } from "../WebhookContext/WebhookContext";
 import NavItem from "@pluralsight/ps-design-system-navitem";
 
 export function WebhookStoreUrlInput() {
-  const { value, setValue } = useContext(WebhookStoreUrlContext);
+  const { webhookStoreUrl, setWebhooksStoreUrl } = useContext(WebhookContext);
   return (
     <NavItem key={"WebhookStoreUrlInput"}>
       <Label
@@ -18,9 +18,9 @@ export function WebhookStoreUrlInput() {
         appearance={TextInput.appearances.subtle}
         placeholder="https://webhook-store.herokuapp.com"
         size={TextInput.sizes.small}
-        defaultValue={value}
+        defaultValue={webhookStoreUrl}
         onBlur={(event) => {
-          setValue(new URL(event.target.value).origin);
+          setWebhooksStoreUrl(new URL(event.target.value).origin);
         }}
       ></TextInput>
     </NavItem>

src/TopNav.tsx

@@ -7,6 +7,7 @@ import NavItem from "@pluralsight/ps-design-system-navitem";
 import { ProxyStatus } from "./NavBar/ProxyStatus/ProxyStatus.component";
 import { LoginOrDisplayUser } from "./NavBar/User/LoginOrDisplayUser";
 import { StoreConfigNavItem } from "./NavBar/StoreConfig/StoreConfigNavItem";
+import { DebugUrlInput } from "./NavBar/DebugUrl/DebugUrl.component";
 import { ENVIRONMENT_KEY } from "./local-storage";
 
 function SkillsLogo() {
@@ -73,6 +74,7 @@ export default function TopNav() {
       brand={<SkillsBranding />}
       items={[
         isDevEnv ? <WebhookStoreUrlInput key={"WebhookStoreUrlInput"} /> : null,
+        <DebugUrlInput key={"DebugUrlInput"} />,
         <ProxyStatus key={"ProxyStatus"} />,
         <StoreConfigNavItem key={"StoreConfig"} />,
       ]}

src/WebhookDisplay/WebhookList.component.tsx

@@ -11,7 +11,7 @@ import {
 } from "react-table";
 import { forwardWebhookToLocalhost } from "../forward-to-localhost";
 import posthog from "posthog-js";
-import { WebhookStoreUrlContext } from "../NavBar/WebhookStoreUrl/WebhookStoreUrl.context";
+import { WebhookContext } from "../NavBar/WebhookContext/WebhookContext";
 import { UpdateQueryFn } from "@apollo/client/core/watchQueryOptions";
 
 const largePayloadCellStyle: React.CSSProperties = {
@@ -153,7 +153,7 @@ const WebhookList: React.FC = () => {
   const { data, subscribeToMore } = useQuery<QueryWebhook>(QUERY_WEBHOOKS, {
     variables: { first: 100, path },
   });
-  const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext);
+  const { webhookStoreUrl } = useContext(WebhookContext);
   useEffect(() => {
     const unsuscribe = subscribeToMore<SubscriptionWebhook>({
       document: COMMENTS_SUBSCRIPTION,

src/WebhookDisplay/WebhookPanel.component.tsx

@@ -6,15 +6,16 @@ import {
 } from "@pluralsight/ps-design-system-layout";
 import Link from "@pluralsight/ps-design-system-link";
 import { Heading, P } from "@pluralsight/ps-design-system-text";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Code } from "../Code";
 import { forwardWebhookToLocalhost } from "../forward-to-localhost";
 import { Webhook } from "./WebhookList.component";
+import { WebhookContext } from "../NavBar/WebhookContext/WebhookContext";
 
 export const WebhookPanel: React.FC<{
   webhook: Webhook;
 }> = ({ webhook }) => {
-  const baseUrl = "http://localhost:8010/proxy";
+  const { debugUrl } = useContext(WebhookContext);
 
   const [webhookResponse, setWebhookResponse] = useState<{
     code?: number;
@@ -47,7 +48,7 @@ export const WebhookPanel: React.FC<{
           <Button
             key="forwardWebhookToLocalhost"
             onClick={() => {
-              forwardWebhookToLocalhost(baseUrl, webhook, setWebhookResponse);
+              forwardWebhookToLocalhost(debugUrl, webhook, setWebhookResponse);
             }}
           >
             Send