feat(Key-Value Editor): Improve accessibility and make the items re-o…

…rderable (#7465) * remove unused components * make read-only editors display nunjucks * graphql toolbar css * re-orderable key value editor * move onChange to event handlers * remove unused test * fix delete all/add updates * clean up logs * remove callbacks
Kong · Jun 5, 2024 · 978fbcf · 978fbcf
1 parent eee7133
commit 978fbcf
Show file tree

Hide file tree

Showing 6 changed files with 491 additions and 273 deletions.
diff --git a/packages/insomnia/src/ui/components/base/__tests__/editable.test.ts b/packages/insomnia/src/ui/components/base/__tests__/editable.test.ts
diff --git a/packages/insomnia/src/ui/components/base/editable.tsx b/packages/insomnia/src/ui/components/base/editable.tsx
diff --git a/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx b/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx
@@ -186,7 +186,7 @@ export const OneLineEditor = forwardRef<OneLineEditorHandle, OneLineEditorProps>
     // Clear history so we can't undo the initial set
     codeMirror.current?.clearHistory();
     // Setup nunjucks listeners
-    if (!readOnly && handleRender && !settings.nunjucksPowerUserMode) {
+    if (handleRender && !settings.nunjucksPowerUserMode) {
       codeMirror.current?.enableNunjucksTags(
         handleRender,
         handleGetRenderContext,

diff --git a/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx b/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx
@@ -8,7 +8,7 @@ import { DefinitionNode, DocumentNode, GraphQLNonNull, GraphQLSchema, Kind, NonN
 import { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
 import { Maybe } from 'graphql-language-service';
 import React, { FC, useEffect, useRef, useState } from 'react';
-import { Button } from 'react-aria-components';
+import { Button, Toolbar } from 'react-aria-components';
 import ReactDOM from 'react-dom';
 import { useLocalStorage } from 'react-use';
 
@@ -28,7 +28,6 @@ import { CodeEditor, CodeEditorHandle } from '../../codemirror/code-editor';
 import { GraphQLExplorer } from '../../graph-ql-explorer/graph-ql-explorer';
 import { ActiveReference } from '../../graph-ql-explorer/graph-ql-types';
 import { HelpTooltip } from '../../help-tooltip';
-import { Toolbar } from '../../key-value-editor/key-value-editor';
 import { useDocBodyKeyboardShortcuts } from '../../keydown-binder';
 import { TimeFromNow } from '../../time-from-now';
 
@@ -470,7 +469,7 @@ export const GraphQLEditor: FC<Props> = ({
   const canShowSchema = schema && !schemaIsFetching && !schemaFetchError && schemaLastFetchTime > 0;
   return (
     <div className="graphql-editor">
-      <Toolbar>
+      <Toolbar className="content-box sticky top-0 z-10 bg-[var(--color-bg)] flex flex-row border-b border-[var(--hl-md)] h-[var(--line-height-sm)] text-[var(--font-size-sm)]">
         <Dropdown
           aria-label='Operations Dropdown'
           isDisabled={!state.operations.length}