Merge pull request #219 from OpenWebhook/hide-store-url

Hide store url

Author: Samox

src/NavBar/WebhookStoreUrl/WebhookStoreUrl.component.tsx

@@ -2,11 +2,12 @@ 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 NavItem from "@pluralsight/ps-design-system-navitem";
 
 export function WebhookStoreUrlInput() {
   const { value, setValue } = useContext(WebhookStoreUrlContext);
   return (
-    <>
+    <NavItem key={"WebhookStoreUrlInput"}>
       <Label
         size={Label.sizes.xSmall}
         style={{ marginRight: "8px", marginLeft: "8px" }}
@@ -22,6 +23,6 @@ export function WebhookStoreUrlInput() {
           setValue(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 { ENVIRONMENT_KEY } from "./local-storage";
 
 function SkillsLogo() {
   return (
@@ -66,13 +67,12 @@ function SkillsBranding(props: any) {
 }
 
 export default function TopNav() {
+  const isDevEnv = localStorage.getItem(ENVIRONMENT_KEY) === "development";
   return (
     <NavBar
       brand={<SkillsBranding />}
       items={[
-        <NavItem key={"WebhookStoreUrlInput"}>
-          <WebhookStoreUrlInput />
-        </NavItem>,
+        isDevEnv ? <WebhookStoreUrlInput key={"WebhookStoreUrlInput"} /> : null,
         <ProxyStatus key={"ProxyStatus"} />,
         <StoreConfigNavItem key={"StoreConfig"} />,
       ]}

src/local-storage.ts

@@ -1,2 +1,3 @@
 export const IDENTITY_TOKEN_KEY = "identityToken";
 export const ACCESS_TOKEN_KEY = "accessToken";
+export const ENVIRONMENT_KEY = "environment";

src/main.tsx

@@ -5,6 +5,7 @@ import App from "./App";
 import Honeybadger from "@honeybadger-io/js";
 import { HoneybadgerErrorBoundary } from "@honeybadger-io/react";
 import posthog from "posthog-js";
+import { ENVIRONMENT_KEY } from "./local-storage";
 
 const autoRedirectOnGithubAuth =
   window.location.hostname === "github.webhook.store";
@@ -21,7 +22,18 @@ posthog.init(import.meta.env.VITE_POSTHOG_API_KEY as string, {
   api_host: "https://app.posthog.com",
 });
 
-posthog.capture("my event", { property: "value" });
+const initEnvInLocalStorage = () => {
+  const env = localStorage.getItem(ENVIRONMENT_KEY);
+  if (!env) {
+    if (window.location.origin.startsWith("http://localhost:")) {
+      localStorage.setItem(ENVIRONMENT_KEY, "development");
+    } else {
+      localStorage.setItem(ENVIRONMENT_KEY, "production");
+    }
+  }
+};
+
+initEnvInLocalStorage();
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement