Navigation/Breadcrumbs in filerunner, pull Nav into a component

apps/cli/cli-core/src/open-file.ts

@@ -0,0 +1,59 @@
+import childProcess from "child_process";
+import { promisify } from "util";
+import os from "os";
+import fs from "fs/promises";
+import path from "path";
+
+import logger from "@captain/logger";
+
+const promisifiedExecFile = promisify(childProcess.execFile);
+
+const getCommand = () => {
+  const plat = os
+    .platform()
+    .toLowerCase()
+    .replace(/[0-9]/g, ``)
+    .replace(`darwin`, `macos`);
+
+  if (plat === "win") return "start";
+  if (plat === "linux") return "xdg-open";
+  if (plat === "macos") return "open";
+
+  throw new Error("Idk what os this is");
+};
+
+const pathExists = async (path: string) => {
+  try {
+    await fs.access(path);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const writeFile = async (filePath: string, data: string) => {
+  try {
+    const dirname = path.dirname(filePath);
+    const exist = await pathExists(dirname);
+    if (!exist) {
+      await fs.mkdir(dirname, { recursive: true });
+    }
+
+    await fs.writeFile(filePath, data, "utf8");
+  } catch (err) {
+    throw err;
+  }
+};
+
+export async function openFile(path: string) {
+  const exists = await pathExists(path);
+  const maybeFileName = path.split("/").pop();
+
+  // create file if it doesn't exist
+  if (!exists) {
+    logger.warn(`${maybeFileName ?? "file"} does not exist, creating it now!`);
+    await writeFile(path, "{}");
+  }
+
+  return await promisifiedExecFile(getCommand(), [path]);
+}

apps/cli/cli-core/src/open-folder.ts

@@ -21,6 +21,7 @@ const getCommand = () => {
   throw new Error("Idk what os this is");
 };
 
+// TODO: IGOR add openFile, or a flag to create file instead of dir if it doesn't exist. Trying to "Open .config file" in fileRunner brought me here 💀
 // Ripped from https://www.npmjs.com/package/open-file-explorer
 export async function openInExplorer(path: string) {
   // Create the directory if it doesn't exist
@@ -31,3 +32,4 @@ export async function openInExplorer(path: string) {
 
   return await promisifiedExecFile(getCommand(), [path]);
 }
+

apps/cli/cli-core/src/trpc.ts

@@ -1,28 +1,29 @@
-import { ConfigValidatorType } from "./update-config";
 import { initTRPC } from "@trpc/server";
 import superjson from "superjson";
 import { z } from "zod";
 import fetch from "node-fetch";
 import fsPromises from "fs/promises";
 import fs from "fs";
 import path from "path";
+import { observable } from "@trpc/server/observable";
 
 import { openInExplorer } from "./open-folder";
+import { openFile } from "./open-file";
 import { getSampleHooks } from "./get-sample-hooks";
 import { HOOK_PATH } from "./constants";
 import { configValidator, updateConfig } from "./update-config";
 import { substituteTemplate } from "./templateSubstitution";
+import { getFullPath, getRoute } from "./utils/get-full-path";
 
 export type { ConfigValidatorType } from "./update-config";
 type ExtendedConfigValidatorType = ConfigValidatorType & {
   method: "POST" | "GET" | "PUT" | "DELETE" | "PATCH";
 };
 
 import logger from "@captain/logger";
-import { observable } from "@trpc/server/observable";
 
 import type { LogLevels } from "@captain/logger";
-import { getFullPath, getRoute } from "./utils/get-full-path";
+import type { ConfigValidatorType } from "./update-config";
 
 export const t = initTRPC.create({
   transformer: superjson,
@@ -164,6 +165,40 @@ export const cliApiRouter = t.router({
       }
     }),
 
+  openFile: t.procedure
+    .input(z.object({ path: z.string() }))
+    .mutation(async ({ input }) => {
+      // if running in codespace, early return
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      if (process.env.CODESPACES) {
+        throw new Error(
+          "Sorry, opening files in codespaces is not supported yet."
+        );
+      }
+      // if running over ssh, early return
+      if (
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_CONNECTION ||
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_CLIENT ||
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_TTY
+      ) {
+        throw new Error(
+          "Sorry, opening files on remote connections is not supported yet."
+        );
+      }
+
+      try {
+        await openFile(path.join(HOOK_PATH, input.path));
+      } catch (e) {
+        logger.error(
+          "Failed to open file (unless you're on Windows, then this just happens)",
+          e
+        );
+      }
+    }),
+
   getSampleHooks: t.procedure.mutation(async () => {
     await getSampleHooks();
   }),

apps/cli/cli-web/src/App.tsx

@@ -17,6 +17,7 @@ import { classNames } from "./utils/classnames";
 import { useFileRoute } from "./utils/useRoute";
 import { FileRunner } from "./components/filerunner";
 import { cliApi } from "./utils/api";
+import { ButtonDropdown } from "./components/common/button";
 
 const SubscriptionsHelper = () => {
   useConnectionStateToasts();
@@ -121,70 +122,31 @@ export default function AppCore() {
 
 const NavMenu = () => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="flex items-center rounded-sm  text-gray-50 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-          <span className="sr-only">{`Open options`}</span>
-          <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://discord.gg/4wD3CNdsf6"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <QuestionMarkCircleIcon className="h-4" aria-hidden="true" />
-                  {`Support`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://github.com/pingdotgg/sample_hooks/issues/new"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <ArchiveBoxIcon className="h-4" aria-hidden="true" />
-                  {`File an Issue`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://docs.webhookthing.com"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <BookOpenIcon className="h-4" aria-hidden="true" />
-                  {`Documentation`}
-                </a>
-              )}
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <ButtonDropdown
+      label={`Open options`}
+      srlabel={true}
+      variant="text"
+      icon={<EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />}
+      items={[
+        {
+          name: "Support",
+          href: "https://discord.gg/4wD3CNdsf6",
+          icon: <QuestionMarkCircleIcon />,
+          type: "link",
+        },
+        {
+          name: "File an issue",
+          href: "https://github.com/pingdotgg/sample_hooks/issues/new",
+          icon: <ArchiveBoxIcon />,
+          type: "link",
+        },
+        {
+          name: "Documentation",
+          href: "https://docs.webhookthing.com",
+          icon: <BookOpenIcon className="h-5 w-5 flex-shrink-0" />,
+          type: "link",
+        },
+      ]}
+    />
   );
 };