Track dialogs

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) {
-        const id = oid ?? Math.random().toString(36).slice(2);
+      show({ id, ...props }: DialogEntry) {
+        trackEvent('Dialog', 'Show', { id });
         setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
       },
-      toggle({ id: oid, ...props }: DialogEntryOptionalId) {
-        const id = oid ?? Math.random().toString(36).slice(2);
+      toggle({ id, ...props }: DialogEntry) {
         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',