Better recent work/env/req logic

src-web/components/AppRouter.tsx

@@ -1,13 +1,10 @@
 import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
-import { useHttpRequests } from '../hooks/useHttpRequests';
-import { useRecentRequests } from '../hooks/useRecentRequests';
 import { DialogProvider } from './DialogContext';
 import { GlobalHooks } from './GlobalHooks';
 import RouteError from './RouteError';
 import Workspace from './Workspace';
-import Workspaces from './Workspaces';
+import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 
 const router = createBrowserRouter([
   {
@@ -17,17 +14,17 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <Navigate to={routePaths.workspaces()} replace={true} />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspaces(),
-        element: <Workspaces />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
         }),
-        element: <WorkspaceOrRedirect />,
+        element: <Workspace />,
       },
       {
         path: routePaths.request({
@@ -48,32 +45,6 @@ export function AppRouter() {
   return <RouterProvider router={router} />;
 }
 
-function WorkspaceOrRedirect() {
-  const recentRequests = useRecentRequests();
-  const requests = useHttpRequests();
-  const request = requests.find((r) => r.id === recentRequests[0]);
-  const routes = useAppRoutes();
-
-  // Keep environment if it's in the query params
-  const environmentId = useActiveEnvironmentId() ?? undefined;
-
-  if (request === undefined) {
-    return <Workspace />;
-  }
-
-  const { id: requestId, workspaceId } = request;
-
-  return (
-    <Navigate
-      to={routes.paths.request({
-        workspaceId,
-        environmentId,
-        requestId,
-      })}
-    />
-  );
-}
-
 function RedirectLegacyEnvironmentURLs() {
   const routes = useAppRoutes();
   const {

src-web/components/GraphQLEditor.tsx

@@ -38,7 +38,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
       const operationName = p.operationName;
       return { query, variables, operationName };
     } catch (err) {
-      return { query: 'failed to parse' };
+      return { query: '' };
     }
   }, [defaultValue]);
 

src-web/components/RecentRequestsDropdown.tsx

@@ -54,7 +54,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
   const items = useMemo<DropdownItem[]>(() => {
     if (activeWorkspaceId === null) return [];
 
-    const recentRequestItems: DropdownItem[] = [{ type: 'separator', label: 'Recent Requests' }];
+    const recentRequestItems: DropdownItem[] = [];
     for (const id of recentRequestIds) {
       const request = requests.find((r) => r.id === id);
       if (request === undefined) continue;

src-web/components/RedirectToLatestWorkspace.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { getRecentRequests } from '../hooks/useRecentRequests';
+import { getRecentWorkspaces } from '../hooks/useRecentWorkspaces';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+
+export function RedirectToLatestWorkspace() {
+  const navigate = useNavigate();
+  const routes = useAppRoutes();
+  const workspaces = useWorkspaces();
+
+  useEffect(() => {
+    (async function () {
+      const workspaceId = (await getRecentWorkspaces())[0] ?? workspaces[0]?.id ?? 'n/a';
+      const environmentId = (await getRecentEnvironments(workspaceId))[0];
+      const requestId = (await getRecentRequests(workspaceId))[0];
+
+      if (workspaceId != null && requestId != null) {
+        navigate(routes.paths.request({ workspaceId, environmentId, requestId }));
+      } else {
+        navigate(routes.paths.workspace({ workspaceId, environmentId }));
+      }
+    })();
+  }, [navigate, routes.paths, workspaces, workspaces.length]);
+
+  return <></>;
+}

src-web/components/SidebarActions.tsx

@@ -4,6 +4,7 @@ import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
 import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { trackEvent } from '../lib/analytics';
+import { BODY_TYPE_GRAPHQL } from '../lib/models';
 import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
@@ -44,6 +45,12 @@ export const SidebarActions = memo(function SidebarActions() {
             label: 'GRPC Request',
             onSelect: () => createGrpcRequest.mutate({}),
           },
+          {
+            key: 'create-graphql-request',
+            label: 'GraphQL Request',
+            onSelect: () =>
+              createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
+          },
           {
             key: 'create-folder',
             label: 'Folder',

src-web/components/WorkspaceActionsDropdown.tsx

@@ -7,6 +7,7 @@ import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { getRecentRequests } from '../hooks/useRecentRequests';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import type { ButtonProps } from './core/Button';
@@ -63,7 +64,12 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
-                    routes.navigate('workspace', { workspaceId: w.id, environmentId });
+                    const requestId = (await getRecentRequests(w.id))[0];
+                    if (requestId != null) {
+                      routes.navigate('request', { workspaceId: w.id, environmentId, requestId });
+                    } else {
+                      routes.navigate('workspace', { workspaceId: w.id, environmentId });
+                    }
                   }}
                 >
                   This Window
@@ -75,9 +81,16 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
-                    await invoke('cmd_new_window', {
-                      url: routes.paths.workspace({ workspaceId: w.id, environmentId }),
-                    });
+                    const requestId = (await getRecentRequests(w.id))[0];
+                    const path =
+                      requestId != null
+                        ? routes.paths.request({
+                            workspaceId: w.id,
+                            environmentId,
+                            requestId,
+                          })
+                        : routes.paths.workspace({ workspaceId: w.id, environmentId });
+                    await invoke('cmd_new_window', { url: path });
                   }}
                 >
                   New Window

src-web/components/Workspaces.tsx

@@ -1,25 +0,0 @@
-import { Navigate } from 'react-router-dom';
-import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useWorkspaces } from '../hooks/useWorkspaces';
-import { Heading } from './core/Heading';
-import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
-
-export default function Workspaces() {
-  const routes = useAppRoutes();
-  const recentWorkspaceIds = useRecentWorkspaces();
-  const workspaces = useWorkspaces();
-
-  const loading = workspaces.length === 0 && recentWorkspaceIds.length === 0;
-  if (loading) {
-    return null;
-  }
-
-  const workspaceId = recentWorkspaceIds[0] ?? workspaces[0]?.id ?? null;
-
-  if (workspaceId === null) {
-    return <Heading>There are no workspaces</Heading>;
-  }
-
-  // TODO: Somehow get recent environmentId for the workspace in here too
-  return <Navigate to={routes.paths.workspace({ workspaceId })} />;
-}