From ff44b62aebc4b5d4e3ff321ad3ed59694d94330a Mon Sep 17 00:00:00 2001 From: Kamil Kisiela Date: Mon, 30 Dec 2024 15:33:30 +0100 Subject: [PATCH] Fix UI, documentation and the product update of Laboratory (#6232) --- .changeset/flat-cups-tie.md | 5 ++ .../web/app/src/components/v2/accordion.tsx | 4 +- .../use-operation-collections-plugin.tsx | 4 +- .../lib/preflight-sandbox/graphiql-plugin.tsx | 78 +++++++++++++----- .../web/app/src/pages/target-laboratory.tsx | 15 ++++ .../laboratory/active-preflight-script.png | Bin 0 -> 40392 bytes .../laboratory/command-line-icon.png | Bin 406292 -> 0 bytes .../docs/dashboard/laboratory/editing.png | Bin 0 -> 143286 bytes .../laboratory/get-and-set-env-vars.png | Bin 316438 -> 0 bytes .../docs/dashboard/laboratory/headers.png | Bin 0 -> 37415 bytes .../laboratory/preflight-script-plugin.png | Bin 487148 -> 0 bytes .../laboratory/preflight-scripts.mdx | 59 +++++-------- .../dashboard/laboratory/replace-syntax.png | Bin 341595 -> 0 bytes .../2024-12-27-preflight-script/index.mdx | 14 ++-- 14 files changed, 107 insertions(+), 72 deletions(-) create mode 100644 .changeset/flat-cups-tie.md create mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/active-preflight-script.png delete mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/command-line-icon.png create mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/editing.png delete mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/get-and-set-env-vars.png create mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/headers.png delete mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/preflight-script-plugin.png delete mode 100644 packages/web/docs/src/pages/docs/dashboard/laboratory/replace-syntax.png diff --git a/.changeset/flat-cups-tie.md b/.changeset/flat-cups-tie.md new file mode 100644 index 000000000..f22eccd66 --- /dev/null +++ b/.changeset/flat-cups-tie.md @@ -0,0 +1,5 @@ +--- +'hive': patch +--- + +Improvements to UI of Preflight Script (Laboratory) diff --git a/packages/web/app/src/components/v2/accordion.tsx b/packages/web/app/src/components/v2/accordion.tsx index 944c3ac12..f5c5f554c 100644 --- a/packages/web/app/src/components/v2/accordion.tsx +++ b/packages/web/app/src/components/v2/accordion.tsx @@ -68,7 +68,7 @@ function Header({ diff --git a/packages/web/app/src/lib/hooks/laboratory/use-operation-collections-plugin.tsx b/packages/web/app/src/lib/hooks/laboratory/use-operation-collections-plugin.tsx index 17ddbc6bb..bcdc7a5f9 100644 --- a/packages/web/app/src/lib/hooks/laboratory/use-operation-collections-plugin.tsx +++ b/packages/web/app/src/lib/hooks/laboratory/use-operation-collections-plugin.tsx @@ -307,8 +307,8 @@ export function Content() { - - + + {collection.name} {shouldShowMenu && ( diff --git a/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx b/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx index f369438aa..35699adbe 100644 --- a/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx +++ b/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx @@ -1,6 +1,7 @@ import { ComponentPropsWithoutRef, createContext, + ReactNode, useCallback, useContext, useEffect, @@ -8,6 +9,7 @@ import { useState, } from 'react'; import { clsx } from 'clsx'; +import { PowerIcon } from 'lucide-react'; import type { editor } from 'monaco-editor'; import { useMutation } from 'urql'; import { Badge } from '@/components/ui/badge'; @@ -20,8 +22,7 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog'; -import { Subtitle, Title } from '@/components/ui/page'; -import { Switch } from '@/components/ui/switch'; +import { Subtitle } from '@/components/ui/page'; import { useToast } from '@/components/ui/use-toast'; import { FragmentType, graphql, useFragment } from '@/gql'; import { useLocalStorage, useToggle } from '@/lib/hooks'; @@ -36,6 +37,7 @@ import { TriangleRightIcon, } from '@radix-ui/react-icons'; import { useParams } from '@tanstack/react-router'; +import { cn } from '../utils'; import type { LogMessage } from './preflight-script-worker'; export const preflightScriptPlugin: GraphiQLPlugin = { @@ -63,6 +65,14 @@ const classes = { icon: clsx('absolute -left-5 top-px'), }; +function EditorTitle(props: { children: ReactNode; className?: string }) { + return ( +
+ {props.children} +
+ ); +} + const sharedMonacoProps = { theme: 'vs-dark', className: classes.monaco, @@ -397,43 +407,69 @@ function PreflightScriptContent() { - This script is run before each operation submitted, e.g. for automated authentication. + Before each GraphQL request begins, this script is executed automatically - for example, to + handle authentication. -
- preflightScript.setIsPreflightScriptEnabled(v)} - className="my-4" +
+
- {preflightScript.isPreflightScriptEnabled && ( + + Script{' '} + + JavaScript + + + Read-only view of the script +
+ {preflightScript.isPreflightScriptEnabled ? null : ( +
+
+ Preflight Script is disabled and will not be executed +
+
+ )} - )} +
- + <EditorTitle className="mt-6 flex items-center gap-2"> Environment variables{' '} <Badge className="text-xs" variant="outline"> JSON </Badge> - - Define variables to use in your Headers + + + Declare variables that can be used by both the script and headers. +
- + <EditorTitle className="flex gap-2"> Script Editor <Badge className="text-xs" variant="outline"> JavaScript </Badge> - +