Fix editor stale callbacks and recent item deletion

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2023.1.5"
+    "version": "2023.1.6"
   },
   "tauri": {
     "windows": [],

src-web/components/EnvironmentActionsDropdown.tsx

@@ -28,7 +28,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
 
   const showEnvironmentDialog = useCallback(() => {
     dialog.show({
-      title: "Manage Environments",
+      title: 'Manage Environments',
       render: () => <EnvironmentEditDialog />,
     });
   }, [dialog]);

src-web/components/EnvironmentEditDialog.tsx

@@ -37,7 +37,7 @@ export const EnvironmentEditDialog = function () {
       )}
     >
       {showSidebar && (
-        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[200px] pr-4 border-r border-gray-100">
+        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-4 border-r border-gray-100">
           <div className="min-w-0 h-full w-full overflow-y-scroll">
             {environments.map((e) => (
               <Button
@@ -68,7 +68,13 @@ export const EnvironmentEditDialog = function () {
           </Button>
         </aside>
       )}
-      {activeEnvironment != null && <EnvironmentEditor environment={activeEnvironment} />}
+      {activeEnvironment != null ? (
+        <EnvironmentEditor environment={activeEnvironment} />
+      ) : (
+        <div className="flex w-full h-full items-center justify-center text-gray-400 italic">
+          select an environment
+        </div>
+      )}
     </div>
   );
 };

src-web/components/Workspaces.tsx

@@ -20,5 +20,6 @@ export default function Workspaces() {
     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 })} />;
 }

src-web/components/core/Dialog.tsx

@@ -57,9 +57,10 @@ export function Dialog({
               'relative bg-gray-50 pointer-events-auto',
               'p-5 rounded-lg overflow-auto',
               'dark:border border-highlight shadow shadow-black/10',
+              'max-w-[90vw] max-h-[calc(100vh-8em)]',
               size === 'sm' && 'w-[25rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
-              size === 'full' && 'w-[95vw] h-[calc(100vh-6em)]',
+              size === 'full' && 'w-[100vw] h-[100vh]',
               size === 'dynamic' && 'min-w-[30vw] max-w-[80vw]',
             )}
           >

src-web/components/core/Editor/Editor.tsx

@@ -267,10 +267,11 @@ function getExtensions({
       : []),
 
     // Handle onFocus
+    // NOTE: These *must* be anonymous functions so the references update properly
     EditorView.domEventHandlers({
-      focus: onFocus.current,
-      blur: onBlur.current,
-      keydown: onKeyDown.current,
+      focus: () => onFocus.current?.(),
+      blur: () => onBlur.current?.(),
+      keydown: e => onKeyDown.current?.(e),
     }),
 
     // Handle onChange

src-web/components/core/Input.tsx

@@ -102,14 +102,17 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   // Submit nearest form on Enter key press
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key !== 'Enter') return;
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== 'Enter') return;
 
-    const form = wrapperRef.current?.closest('form');
-    if (!isValid || form == null) return;
+      const form = wrapperRef.current?.closest('form');
+      if (!isValid || form == null) return;
 
-    form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
-  }, [isValid]);
+      form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+    },
+    [isValid],
+  );
 
   return (
     <VStack ref={wrapperRef} className="w-full">

src-web/hooks/useRecentEnvironments.ts

@@ -1,9 +1,10 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { createGlobalState, useEffectOnce } from 'react-use';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useKeyValue } from './useKeyValue';
 import { NAMESPACE_GLOBAL, getKeyValue } from '../lib/keyValueStore';
+import { useEnvironments } from './useEnvironments';
 
 const useHistoryState = createGlobalState<string[]>([]);
 
@@ -12,6 +13,7 @@ const namespace = NAMESPACE_GLOBAL;
 const defaultValue: string[] = [];
 
 export function useRecentEnvironments() {
+  const environments = useEnvironments();
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
   const [history, setHistory] = useHistoryState();
@@ -31,7 +33,7 @@ export function useRecentEnvironments() {
   // Update local storage state when history changes
   useEffect(() => {
     kv.set(history);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [history]);
 
   // Set history when active request changes
@@ -43,7 +45,12 @@ export function useRecentEnvironments() {
     });
   }, [activeEnvironmentId, setHistory]);
 
-  return history;
+  const onlyValidIds = useMemo(
+    () => history.filter((id) => environments.some((e) => e.id === id)),
+    [history, environments],
+  );
+
+  return onlyValidIds;
 }
 
 export async function getRecentEnvironments(workspaceId: string) {

src-web/hooks/useRecentWorkspaces.ts

@@ -1,11 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
-import { useActiveRequestId } from './useActiveRequestId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useWorkspaces } from './useWorkspaces';
 
 const useHistoryState = createGlobalState<string[]>([]);
 
 export function useRecentWorkspaces() {
+  const workspaces = useWorkspaces();
   const activeWorkspaceId = useActiveWorkspaceId();
   const [history, setHistory] = useHistoryState();
   const [lsState, setLSState] = useLocalStorage<string[]>('recent_workspaces', []);
@@ -31,5 +32,10 @@ export function useRecentWorkspaces() {
     });
   }, [activeWorkspaceId, setHistory]);
 
-  return history;
+  const onlyValidIds = useMemo(
+    () => history.filter((id) => workspaces.some((w) => w.id === id)),
+    [history, workspaces],
+  );
+
+  return onlyValidIds;
 }