Track dialogs

src-tauri/src/analytics.rs

@@ -12,28 +12,30 @@ use crate::{is_dev, models};
 #[derive(Serialize, Deserialize)]
 pub enum AnalyticsResource {
     App,
-    Sidebar,
-    Workspace,
     CookieJar,
+    Dialog,
     Environment,
     Folder,
     HttpRequest,
     HttpResponse,
     KeyValue,
+    Sidebar,
+    Workspace,
 }
 
 impl AnalyticsResource {
     pub fn from_str(s: &str) -> Option<AnalyticsResource> {
         match s {
             "App" => Some(AnalyticsResource::App),
-            "Sidebar" => Some(AnalyticsResource::Sidebar),
+            "Dialog" => Some(AnalyticsResource::Dialog),
-            "Workspace" => Some(AnalyticsResource::Workspace),
-            "Environment" => Some(AnalyticsResource::Environment),
             "CookieJar" => Some(AnalyticsResource::CookieJar),
+            "Environment" => Some(AnalyticsResource::Environment),
             "Folder" => Some(AnalyticsResource::Folder),
             "HttpRequest" => Some(AnalyticsResource::HttpRequest),
             "HttpResponse" => Some(AnalyticsResource::HttpResponse),
             "KeyValue" => Some(AnalyticsResource::KeyValue),
+            "Sidebar" => Some(AnalyticsResource::Sidebar),
+            "Workspace" => Some(AnalyticsResource::Workspace),
             _ => None,
         }
     }
@@ -41,37 +43,41 @@ impl AnalyticsResource {
 
 #[derive(Serialize, Deserialize)]
 pub enum AnalyticsAction {
+    Create,
+    Delete,
+    DeleteMany,
+    Duplicate,
+    Export,
+    Hide,
+    Import,
     Launch,
     LaunchFirst,
     LaunchUpdate,
-    Create,
+    Send,
+    Show,
+    Toggle,
     Update,
     Upsert,
-    Delete,
-    DeleteMany,
-    Send,
-    Toggle,
-    Duplicate,
-    Import,
-    Export,
 }
 
 impl AnalyticsAction {
     pub fn from_str(s: &str) -> Option<AnalyticsAction> {
         match s {
+            "Create" => Some(AnalyticsAction::Create),
+            "Delete" => Some(AnalyticsAction::Delete),
+            "DeleteMany" => Some(AnalyticsAction::DeleteMany),
+            "Duplicate" => Some(AnalyticsAction::Duplicate),
+            "Export" => Some(AnalyticsAction::Export),
+            "Hide" => Some(AnalyticsAction::Hide),
+            "Import" => Some(AnalyticsAction::Import),
             "Launch" => Some(AnalyticsAction::Launch),
             "LaunchFirst" => Some(AnalyticsAction::LaunchFirst),
             "LaunchUpdate" => Some(AnalyticsAction::LaunchUpdate),
-            "Create" => Some(AnalyticsAction::Create),
+            "Send" => Some(AnalyticsAction::Send),
+            "Show" => Some(AnalyticsAction::Show),
+            "Toggle" => Some(AnalyticsAction::Toggle),
             "Update" => Some(AnalyticsAction::Update),
             "Upsert" => Some(AnalyticsAction::Upsert),
-            "Delete" => Some(AnalyticsAction::Delete),
-            "DeleteMany" => Some(AnalyticsAction::DeleteMany),
-            "Send" => Some(AnalyticsAction::Send),
-            "Duplicate" => Some(AnalyticsAction::Duplicate),
-            "Toggle" => Some(AnalyticsAction::Toggle),
-            "Import" => Some(AnalyticsAction::Import),
-            "Export" => Some(AnalyticsAction::Export),
             _ => None,
         }
     }
@@ -80,32 +86,35 @@ impl AnalyticsAction {
 fn resource_name(resource: AnalyticsResource) -> &'static str {
     match resource {
         AnalyticsResource::App => "app",
-        AnalyticsResource::Sidebar => "sidebar",
-        AnalyticsResource::Workspace => "workspace",
-        AnalyticsResource::Environment => "environment",
         AnalyticsResource::CookieJar => "cookie_jar",
+        AnalyticsResource::Dialog => "dialog",
+        AnalyticsResource::Environment => "environment",
         AnalyticsResource::Folder => "folder",
         AnalyticsResource::HttpRequest => "http_request",
         AnalyticsResource::HttpResponse => "http_response",
         AnalyticsResource::KeyValue => "key_value",
+        AnalyticsResource::Sidebar => "sidebar",
+        AnalyticsResource::Workspace => "workspace",
     }
 }
 
 fn action_name(action: AnalyticsAction) -> &'static str {
     match action {
+        AnalyticsAction::Create => "create",
+        AnalyticsAction::Delete => "delete",
+        AnalyticsAction::DeleteMany => "delete_many",
+        AnalyticsAction::Duplicate => "duplicate",
+        AnalyticsAction::Export => "export",
+        AnalyticsAction::Hide => "hide",
+        AnalyticsAction::Import => "import",
         AnalyticsAction::Launch => "launch",
         AnalyticsAction::LaunchFirst => "launch_first",
         AnalyticsAction::LaunchUpdate => "launch_update",
-        AnalyticsAction::Create => "create",
+        AnalyticsAction::Send => "send",
+        AnalyticsAction::Show => "show",
+        AnalyticsAction::Toggle => "toggle",
         AnalyticsAction::Update => "update",
         AnalyticsAction::Upsert => "upsert",
-        AnalyticsAction::Delete => "delete",
-        AnalyticsAction::DeleteMany => "delete_many",
-        AnalyticsAction::Send => "send",
-        AnalyticsAction::Duplicate => "duplicate",
-        AnalyticsAction::Toggle => "toggle",
-        AnalyticsAction::Import => "import",
-        AnalyticsAction::Export => "export",
     }
 }
 

src-web/components/CookieDropdown.tsx

@@ -52,6 +52,7 @@ export function CookieDropdown() {
                 leftSlot: <Icon icon="pencil" />,
                 onSelect: async () => {
                   const name = await prompt({
+                    id: 'rename-cookie-jar',
                     title: 'Rename Cookie Jar',
                     description: (
                       <>

src-web/components/DialogContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
+import { trackEvent } from '../lib/analytics';
 import type { DialogProps } from './core/Dialog';
 import { Dialog } from './core/Dialog';
 
@@ -7,15 +8,13 @@ type DialogEntry = {
   render: ({ hide }: { hide: () => void }) => React.ReactNode;
 } & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className' | 'size'>;
 
-type DialogEntryOptionalId = Omit<DialogEntry, 'id'> & { id?: string };
-
 interface State {
   dialogs: DialogEntry[];
   actions: Actions;
 }
 
 interface Actions {
-  show: (d: DialogEntryOptionalId) => void;
+  show: (d: DialogEntry) => void;
   toggle: (d: DialogEntry) => void;
   hide: (id: string) => void;
 }
@@ -27,12 +26,11 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
   const [dialogs, setDialogs] = useState<State['dialogs']>([]);
   const actions = useMemo<Actions>(
     () => ({
-      show({ id: oid, ...props }: DialogEntryOptionalId) {
+      show({ id, ...props }: DialogEntry) {
-        const id = oid ?? Math.random().toString(36).slice(2);
+        trackEvent('Dialog', 'Show', { id });
         setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
       },
-      toggle({ id: oid, ...props }: DialogEntryOptionalId) {
+      toggle({ id, ...props }: DialogEntry) {
-        const id = oid ?? Math.random().toString(36).slice(2);
         if (dialogs.some((d) => d.id === id)) this.hide(id);
         else this.show({ id, ...props });
       },

src-web/components/EnvironmentEditDialog.tsx

@@ -152,6 +152,7 @@ const EnvironmentEditor = function ({
               leftSlot: <Icon icon="pencil" size="sm" />,
               onSelect: async () => {
                 const name = await prompt({
+                  id: 'rename-environment',
                   title: 'Rename Environment',
                   description: (
                     <>

src-web/components/RequestMethodDropdown.tsx

@@ -40,6 +40,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
         leftSlot: <Icon icon="sparkles" />,
         onSelect: async () => {
           const newMethod = await prompt({
+            id: 'custom-method',
             label: 'Http Method',
             name: 'httpMethod',
             defaultValue: '',

src-web/components/RequestPane.tsx

@@ -4,9 +4,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { useSettings } from '../hooks/useSettings';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
-import { useUpdateSettings } from '../hooks/useUpdateSettings';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpHeader, HttpRequest, HttpUrlParameter } from '../lib/models';
 import {
@@ -22,13 +20,10 @@ import {
 } from '../lib/models';
 import { BasicAuth } from './BasicAuth';
 import { BearerAuth } from './BearerAuth';
-import { Checkbox } from './core/Checkbox';
 import { CountBadge } from './core/CountBadge';
 import { Editor } from './core/Editor';
-import { Input } from './core/Input';
-import { VStack } from './core/Stacks';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
 import type { TabItem } from './core/Tabs/Tabs';
+import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
 import { FormMultipartEditor } from './FormMultipartEditor';
 import { FormUrlencodedEditor } from './FormUrlencodedEditor';

src-web/components/ResponseHeaders.tsx

@@ -1,4 +1,4 @@
-import { invoke, shell } from '@tauri-apps/api';
+import { shell } from '@tauri-apps/api';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import type { HttpResponse } from '../lib/models';

src-web/components/SettingsDropdown.tsx

@@ -54,7 +54,7 @@ export function SettingsDropdown() {
           leftSlot: <Icon icon="keyboard" />,
           onSelect: () => {
             dialog.show({
-              id: 'hotkey-help',
+              id: 'hotkey',
               title: 'Keyboard Shortcuts',
               size: 'sm',
               render: () => <KeyboardShortcutsDialog />,
@@ -67,6 +67,7 @@ export function SettingsDropdown() {
           leftSlot: <Icon icon="folderInput" />,
           onSelect: () => {
             dialog.show({
+              id: 'import',
               title: 'Import Data',
               size: 'sm',
               render: ({ hide }) => {
@@ -104,6 +105,7 @@ export function SettingsDropdown() {
             const hasUpdate: boolean = await invoke('check_for_updates');
             if (!hasUpdate) {
               alert({
+                id: 'no-updates',
                 title: 'No Updates',
                 body: 'You are currently up to date',
               });

src-web/components/Sidebar.tsx

@@ -613,6 +613,7 @@ const SidebarItem = forwardRef(function SidebarItem(
                     leftSlot: <Icon icon="pencil" />,
                     onSelect: async () => {
                       const name = await prompt({
+                        id: 'rename-folder',
                         title: 'Rename Folder',
                         description: (
                           <>

src-web/components/UrlBar.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { FormEvent } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';

src-web/components/WorkspaceActionsDropdown.tsx

@@ -104,6 +104,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         leftSlot: <Icon icon="pencil" />,
         onSelect: async () => {
           const name = await prompt({
+            id: 'rename-workspace',
             title: 'Rename Workspace',
             description: (
               <>
@@ -131,6 +132,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         leftSlot: <Icon icon="plus" />,
         onSelect: async () => {
           const name = await prompt({
+            id: 'new-workspace',
             name: 'name',
             label: 'Name',
             defaultValue: 'My Workspace',

src-web/hooks/useAlert.ts

@@ -5,8 +5,17 @@ import { Alert } from './Alert';
 
 export function useAlert() {
   const dialog = useDialog();
-  return ({ title, body }: { title: DialogProps['title']; body: AlertProps['body'] }) =>
+  return ({
+    id,
+    title,
+    body,
+  }: {
+    id: string;
+    title: DialogProps['title'];
+    body: AlertProps['body'];
+  }) =>
     dialog.show({
+      id,
       title,
       hideX: true,
       size: 'sm',

src-web/hooks/useConfirm.ts

@@ -6,16 +6,19 @@ import { Confirm } from './Confirm';
 export function useConfirm() {
   const dialog = useDialog();
   return ({
+    id,
     title,
     description,
     variant,
   }: {
+    id: string;
     title: DialogProps['title'];
     description?: DialogProps['description'];
     variant: ConfirmProps['variant'];
   }) =>
     new Promise((onResult: ConfirmProps['onResult']) => {
       dialog.show({
+        id,
         title,
         description,
         hideX: true,

src-web/hooks/useCreateCookieJar.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { trackEvent } from '../lib/analytics';
-import type { CookieJar, HttpRequest } from '../lib/models';
+import type { HttpRequest } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { usePrompt } from './usePrompt';
 import { requestsQueryKey } from './useRequests';
@@ -17,6 +17,7 @@ export function useCreateCookieJar() {
         throw new Error("Cannot create cookie jar when there's no active workspace");
       }
       const name = await prompt({
+        id: 'new-cookie-jar',
         name: 'name',
         title: 'New CookieJar',
         label: 'Name',

src-web/hooks/useCreateEnvironment.ts

@@ -4,9 +4,8 @@ import { trackEvent } from '../lib/analytics';
 import type { Environment } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAppRoutes } from './useAppRoutes';
-import { environmentsQueryKey, useEnvironments } from './useEnvironments';
+import { environmentsQueryKey } from './useEnvironments';
 import { usePrompt } from './usePrompt';
-import { useWorkspaces } from './useWorkspaces';
 
 export function useCreateEnvironment() {
   const routes = useAppRoutes();
@@ -17,6 +16,7 @@ export function useCreateEnvironment() {
   return useMutation<Environment, unknown, void>({
     mutationFn: async () => {
       const name = await prompt({
+        id: 'new-environment',
         name: 'name',
         title: 'New Environment',
         label: 'Name',

src-web/hooks/useDeleteAnyRequest.tsx

@@ -17,6 +17,7 @@ export function useDeleteAnyRequest() {
     mutationFn: async (id) => {
       const request = await getRequest(id);
       const confirmed = await confirm({
+        id: 'delete-request',
         title: 'Delete Request',
         variant: 'delete',
         description: (

src-web/hooks/useDeleteCookieJar.tsx

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
-import type { CookieJar, Workspace } from '../lib/models';
+import type { CookieJar } from '../lib/models';
 import { useConfirm } from './useConfirm';
 import { cookieJarsQueryKey } from './useCookieJars';
 
@@ -13,6 +13,7 @@ export function useDeleteCookieJar(cookieJar: CookieJar | null) {
   return useMutation<CookieJar | null, string>({
     mutationFn: async () => {
       const confirmed = await confirm({
+        id: 'delete-cookie-jar',
         title: 'Delete CookieJar',
         variant: 'delete',
         description: (

src-web/hooks/useDeleteEnvironment.tsx

@@ -13,6 +13,7 @@ export function useDeleteEnvironment(environment: Environment | null) {
   return useMutation<Environment | null, string>({
     mutationFn: async () => {
       const confirmed = await confirm({
+        id: 'delete-environment',
         title: 'Delete Environment',
         variant: 'delete',
         description: (

src-web/hooks/useDeleteFolder.tsx

@@ -16,6 +16,7 @@ export function useDeleteFolder(id: string | null) {
     mutationFn: async () => {
       const folder = await getFolder(id);
       const confirmed = await confirm({
+        id: 'delete-folder',
         title: 'Delete Folder',
         variant: 'delete',
         description: (

src-web/hooks/useDeleteWorkspace.tsx

@@ -18,6 +18,7 @@ export function useDeleteWorkspace(workspace: Workspace | null) {
   return useMutation<Workspace | null, string>({
     mutationFn: async () => {
       const confirmed = await confirm({
+        id: 'delete-workspace',
         title: 'Delete Workspace',
         variant: 'delete',
         description: (

src-web/hooks/useExportData.tsx

@@ -11,7 +11,7 @@ export function useExportData() {
 
   return useMutation({
     onError: (err: string) => {
-      alert({ title: 'Export Failed', body: err });
+      alert({ id: 'export-failed', title: 'Export Failed', body: err });
     },
     mutationFn: async () => {
       if (workspace == null) return;

src-web/hooks/useImportData.tsx

@@ -22,7 +22,7 @@ export function useImportData() {
 
   return useMutation({
     onError: (err: string) => {
-      alert({ title: 'Import Failed', body: err });
+      alert({ id: 'import-failed', title: 'Import Failed', body: err });
     },
     mutationFn: async () => {
       const selected = await open(openArgs);
@@ -41,6 +41,7 @@ export function useImportData() {
       const importedWorkspace = imported.workspaces[0];
 
       dialog.show({
+        id: 'import-complete',
         title: 'Import Complete',
         size: 'sm',
         hideX: true,

src-web/hooks/usePrompt.ts

@@ -6,6 +6,7 @@ import { Prompt } from './Prompt';
 export function usePrompt() {
   const dialog = useDialog();
   return ({
+    id,
     title,
     description,
     name,
@@ -13,9 +14,11 @@ export function usePrompt() {
     defaultValue,
     placeholder,
     confirmLabel,
-  }: Pick<DialogProps, 'title' | 'description'> & Omit<PromptProps, 'onResult' | 'onHide'>) =>
+  }: Pick<DialogProps, 'title' | 'description'> &
+    Omit<PromptProps, 'onResult' | 'onHide'> & { id: string }) =>
     new Promise((onResult: PromptProps['onResult']) => {
       dialog.show({
+        id,
         title,
         description,
         hideX: true,

src-web/hooks/useSendAnyRequest.ts

@@ -39,6 +39,6 @@ export function useSendAnyRequest(options: { download?: boolean } = {}) {
       });
     },
     onSettled: () => trackEvent('HttpRequest', 'Send'),
-    onError: (err) => alert({ title: 'Export Failed', body: err }),
+    onError: (err) => alert({ id: 'send-failed', title: 'Send Failed', body: err }),
   });
 }

src-web/hooks/useSendFolder.ts

@@ -1,5 +1,4 @@
 import { useMutation } from '@tanstack/react-query';
-import { trackEvent } from '../lib/analytics';
 import { useSendAnyRequest } from './useSendAnyRequest';
 
 export function useSendManyRequests() {

src-web/hooks/useSyncWindowTitle.ts

@@ -1,23 +1,23 @@
-import { useEffect } from 'react';
+// import { useEffect } from 'react';
-import { fallbackRequestName } from '../lib/fallbackRequestName';
+// import { fallbackRequestName } from '../lib/fallbackRequestName';
-import { useActiveEnvironment } from './useActiveEnvironment';
+// import { useActiveEnvironment } from './useActiveEnvironment';
-import { useActiveRequest } from './useActiveRequest';
+// import { useActiveRequest } from './useActiveRequest';
-import { useActiveWorkspace } from './useActiveWorkspace';
+// import { useActiveWorkspace } from './useActiveWorkspace';
 
 export function useSyncWindowTitle() {
-  const activeRequest = useActiveRequest();
+  // const activeRequest = useActiveRequest();
-  const activeWorkspace = useActiveWorkspace();
+  // const activeWorkspace = useActiveWorkspace();
-  const activeEnvironment = useActiveEnvironment();
+  // const activeEnvironment = useActiveEnvironment();
-  useEffect(() => {
+  // useEffect(() => {
-    let newTitle = activeWorkspace ? activeWorkspace.name : 'Yaak';
+  //   let newTitle = activeWorkspace ? activeWorkspace.name : 'Yaak';
-    if (activeEnvironment) {
+  //   if (activeEnvironment) {
-      newTitle += ` [${activeEnvironment.name}]`;
+  //     newTitle += ` [${activeEnvironment.name}]`;
-    }
+  //   }
-    if (activeRequest) {
+  //   if (activeRequest) {
-      newTitle += ` – ${fallbackRequestName(activeRequest)}`;
+  //     newTitle += ` – ${fallbackRequestName(activeRequest)}`;
-    }
+  //   }
-
+  //
-    // TODO: This resets the stoplight position so we can't use it yet
+  //   // TODO: This resets the stoplight position so we can't use it yet
-    // appWindow.setTitle(newTitle).catch(console.error);
+  //   // appWindow.setTitle(newTitle).catch(console.error);
-  }, [activeEnvironment, activeRequest, activeWorkspace]);
+  // }, [activeEnvironment, activeRequest, activeWorkspace]);
 }

src-web/hooks/useUpdateSettings.ts

@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { HttpRequest, Settings } from '../lib/models';
+import type { Settings } from '../lib/models';
-import { requestsQueryKey } from './useRequests';
 import { settingsQueryKey } from './useSettings';
 
 export function useUpdateSettings() {

src-web/lib/analytics.ts

@@ -3,6 +3,7 @@ import { invoke } from '@tauri-apps/api';
 export function trackEvent(
   resource:
     | 'App'
+    | 'Dialog'
     | 'CookieJar'
     | 'Sidebar'
     | 'Workspace'

src-web/lib/store.ts

@@ -1,13 +1,5 @@
 import { invoke } from '@tauri-apps/api';
-import type {
+import type { CookieJar, Environment, Folder, HttpRequest, Settings, Workspace } from './models';
-  Cookie,
-  CookieJar,
-  Environment,
-  Folder,
-  HttpRequest,
-  Settings,
-  Workspace,
-} from './models';
 
 export async function getSettings(): Promise<Settings> {
   return invoke('get_settings', {});