Skip to content

Enhancement/hive lab lib#7697

Open
mskorokhodov wants to merge 3 commits intomainfrom
enhancement/hive-lab-lib
Open

Enhancement/hive lab lib#7697
mskorokhodov wants to merge 3 commits intomainfrom
enhancement/hive-lab-lib

Conversation

@mskorokhodov
Copy link
Collaborator

Background

Description

Checklist

  • Input validation
  • Output encoding
  • Authentication management
  • Session management
  • Access control
  • Cryptographic practices
  • Error handling and logging
  • Data protection
  • Communication security
  • System configuration
  • Database security
  • File management
  • Memory management
  • Testing

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @mskorokhodov, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the GraphQL Laboratory by extracting its core functionality into a dedicated, reusable library. This change improves code organization, enhances UI theming with semantic CSS variables, and introduces Shadow DOM encapsulation for better component isolation. It also includes updates to the Monaco Editor's theming and adds a new plugin for managing target-specific environment variables.

Highlights

  • New @hive/laboratory Package: The core GraphQL Laboratory components and utilities have been extracted into a new, standalone npm package named @hive/laboratory for better modularity and reusability.
  • UI/Theming Refactor: Numerous UI components within the laboratory (e.g., buttons, cards, dialogs, inputs, selects) have been refactored to use new styling conventions, replacing direct neutral- color classes with semantic CSS variables like text-muted-foreground, bg-card, and border-border for improved theming consistency.
  • Shadow DOM Encapsulation: The entire laboratory UI is now encapsulated within a Shadow DOM using a ShadowRootContainer component, enhancing isolation from external styles and scripts.
  • Monaco Editor Theming: The Monaco Editor now dynamically adjusts its theme (dark/light) based on the theme context provided to the laboratory, and includes new editor options like lineNumbers, cursorStyle, and cursorBlinking.
  • Preflight Prompt Simplification: The openPreflightPromptModal function has been simplified, removing the title and description props, and focusing solely on the placeholder for user input.
  • New TargetEnvPlugin: A new plugin, TargetEnvPlugin, has been introduced to manage environment variables specific to a target, including commands to open and edit these variables within the laboratory.
  • Dependency Updates: The root package.json now includes @hive/laboratory>tailwindcss and amqplib, while packages/web/app/package.json has been updated to depend on the newly created @hive/laboratory package.
Changelog
  • package.json
    • Added @hive/laboratory>tailwindcss dependency.
    • Added amqplib dependency.
  • packages/libraries/laboratory/components.json
    • Added shadcn/ui configuration for the new library.
  • packages/libraries/laboratory/index.html
    • Added a basic HTML structure for the new laboratory library.
  • packages/libraries/laboratory/package.json
    • Added new package definition for @hive/laboratory including dependencies, build scripts, and export configurations.
  • packages/libraries/laboratory/src/components/graphql-type.tsx
    • Updated text color classes from text-neutral-10 to text-muted-foreground.
  • packages/libraries/laboratory/src/components/laboratory/builder.tsx
    • Updated text and background color classes for various elements.
    • Simplified path and argument handling logic.
  • packages/libraries/laboratory/src/components/laboratory/collections.tsx
    • Updated background and text color classes for collection items and search results.
    • Simplified permission checks and updated button styling.
  • packages/libraries/laboratory/src/components/laboratory/command.tsx
    • Updated import paths for internal components.
    • Simplified keydown event listener logic.
    • Updated tab creation logic for operations, environment, and preflight tabs.
  • packages/libraries/laboratory/src/components/laboratory/context.tsx
    • Removed title and description from openPreflightPromptModal props.
    • Added theme property to LaboratoryApi and LaboratoryContextState.
  • packages/libraries/laboratory/src/components/laboratory/editor.tsx
    • Added color import.
    • Updated Monaco Editor theme to dynamically switch between hive-laboratory-dark and hive-laboratory-light based on context.
    • Added default editor options for lineNumbers, cursorStyle, and cursorBlinking.
  • packages/libraries/laboratory/src/components/laboratory/env.tsx
    • Updated background color class from bg-neutral-2 to bg-card.
  • packages/libraries/laboratory/src/components/laboratory/history-item.tsx
    • Added new component HistoryItem to display individual history entries.
  • packages/libraries/laboratory/src/components/laboratory/history.tsx
    • Updated background and text color classes for history items and groups.
    • Simplified history deletion logic and updated button styling.
  • packages/libraries/laboratory/src/components/laboratory/laboratory.tsx
    • Introduced ShadowRootContainer to encapsulate the laboratory UI within a shadow DOM.
    • Removed title and description props from PreflightPromptModal.
    • Updated background and text color classes for various elements.
    • Added theme prop to the Laboratory component.
  • packages/libraries/laboratory/src/components/laboratory/operation.tsx
    • Updated color classes for badges and preflight toggle.
    • Simplified saveToCollectionForm default values.
    • Updated share function to use window.location.origin and window.location.pathname.
    • Updated preflight toggle styling.
  • packages/libraries/laboratory/src/components/laboratory/preflight.tsx
    • Updated background color classes.
    • Simplified the prompt function signature in runIsolatedLabScript.
  • packages/libraries/laboratory/src/components/laboratory/settings.tsx
    • Updated background color class from bg-neutral-2 to bg-card.
  • packages/libraries/laboratory/src/components/laboratory/tabs.tsx
    • Updated color classes for tabs and tab content.
    • Simplified tab handling logic and updated button styling.
  • packages/libraries/laboratory/src/components/tabs.tsx
    • Updated color classes for tabs and tab content.
  • packages/libraries/laboratory/src/components/ui/alert-dialog.tsx
    • Updated background and text color classes for alert dialog components.
  • packages/libraries/laboratory/src/components/ui/badge.tsx
    • Added new Badge component with updated styling and variants.
  • packages/libraries/laboratory/src/components/ui/button-group.tsx
    • Updated background and border color classes for button group components.
  • packages/libraries/laboratory/src/components/ui/button.tsx
    • Updated color classes for button variants (default, destructive, outline, secondary, ghost, link).
  • packages/libraries/laboratory/src/components/ui/card.tsx
    • Updated background and text color classes for card components.
  • packages/libraries/laboratory/src/components/ui/checkbox.tsx
    • Added new Checkbox component with updated styling.
  • packages/libraries/laboratory/src/components/ui/command.tsx
    • Added new Command component with updated styling and functionality.
  • packages/libraries/laboratory/src/components/ui/context-menu.tsx
    • Added new ContextMenu component with updated styling and functionality.
  • packages/libraries/laboratory/src/components/ui/dialog.tsx
    • Updated background and text color classes for dialog components.
    • Added useState for managing the dialog portal container.
  • packages/libraries/laboratory/src/components/ui/dropdown-menu.tsx
    • Updated background and text color classes for dropdown menu components.
  • packages/libraries/laboratory/src/components/ui/empty.tsx
    • Added new Empty component with updated styling and variants.
  • packages/libraries/laboratory/src/components/ui/field.tsx
    • Added new Field component with updated styling and sub-components (FieldSet, FieldLegend, FieldGroup, FieldContent, FieldLabel, FieldTitle, FieldDescription, FieldSeparator, FieldError).
  • packages/libraries/laboratory/src/components/ui/input-group.tsx
    • Added new InputGroup component with updated styling and sub-components (InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea).
  • packages/libraries/laboratory/src/components/ui/input.tsx
    • Added new Input component with updated styling.
  • packages/libraries/laboratory/src/components/ui/label.tsx
    • Added new Label component with updated styling.
  • packages/libraries/laboratory/src/components/ui/resizable.tsx
    • Added new Resizable component with updated styling and sub-components (ResizablePanelGroup, ResizablePanel, ResizableHandle).
  • packages/libraries/laboratory/src/components/ui/scroll-area.tsx
    • Updated scrollbar color class from bg-neutral-5 to bg-border.
  • packages/libraries/laboratory/src/components/ui/select.tsx
    • Added new Select component with updated styling and sub-components (SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton).
  • packages/libraries/laboratory/src/components/ui/separator.tsx
    • Added new Separator component with updated styling.
  • packages/libraries/laboratory/src/components/ui/spinner.tsx
    • Added new Spinner component.
  • packages/libraries/laboratory/src/components/ui/switch.tsx
    • Added new Switch component with updated styling.
  • packages/libraries/laboratory/src/components/ui/tabs.tsx
    • Added new Tabs component with updated styling and sub-components (TabsList, TabsTrigger, TabsContent).
  • packages/libraries/laboratory/src/components/ui/textarea.tsx
    • Added new Textarea component with updated styling.
  • packages/libraries/laboratory/src/components/ui/toggle.tsx
    • Added new Toggle component with updated styling and variants.
  • packages/libraries/laboratory/src/components/ui/tooltip.tsx
    • Added new Tooltip component with updated styling and sub-components (TooltipProvider, TooltipTrigger, TooltipContent).
  • packages/libraries/laboratory/src/index.css
    • Added new Tailwind CSS theme variables for the laboratory, defining semantic colors like --hive-laboratory-background, --hive-laboratory-foreground, etc.
  • packages/libraries/laboratory/src/index.ts
    • Exported new components and utilities from the @hive/laboratory package.
  • packages/libraries/laboratory/src/lib/collections.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for addCollection, addOperationToCollection, updateCollection, and updateOperationInCollection to use Omit correctly.
  • packages/libraries/laboratory/src/lib/compose-refs.ts
    • Moved from packages/web/app/src/laboratory/lib/compose-refs.ts to packages/libraries/laboratory/src/lib/compose-refs.ts.
  • packages/libraries/laboratory/src/lib/constants.ts
    • Moved from packages/web/app/src/laboratory/lib/constants.ts to packages/libraries/laboratory/src/lib/constants.ts.
  • packages/libraries/laboratory/src/lib/endpoint.ts
    • Moved from packages/web/app/src/laboratory/lib/endpoint.ts to packages/libraries/laboratory/src/lib/endpoint.ts.
  • packages/libraries/laboratory/src/lib/env.ts
    • Moved from packages/web/app/src/laboratory/lib/env.ts to packages/libraries/laboratory/src/lib/env.ts.
  • packages/libraries/laboratory/src/lib/history.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for addHistory.
    • Updated logic for addResponseToHistory, deleteHistory, and deleteHistoryByDay to use find and filter with type guards.
  • packages/libraries/laboratory/src/lib/operations.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for addOperation and updateActiveOperation.
    • Updated logic for setActiveOperation, addOperation, updateActiveOperation, deleteOperation, addPathToActiveOperation, deletePathFromActiveOperation, addArgToActiveOperation, deleteArgFromActiveOperation, runActiveOperation, and isOperationSubscription to use new type definitions and simplified logic.
    • Updated useEffect hook to handle URL share parameters.
  • packages/libraries/laboratory/src/lib/operations.utils.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted function signatures and logic for isPathInQuery, addPathToQuery, deletePathFromQuery, getOperationHash, getOperationName, getOperationType, isArgInQuery, extractOfType, findFieldInSchema, addArgToField, removeArgFromField, extractPaths, and getOpenPaths to use new type definitions and simplified string/array manipulations.
  • packages/libraries/laboratory/src/lib/plugins.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for LaboratoryPluginTab and LaboratoryPlugin.
  • packages/libraries/laboratory/src/lib/preflight.ts
    • Updated import paths to reflect the new library structure.
    • Removed LaboratoryPreflightPromptField interface.
    • Simplified the prompt function signature in runIsolatedLabScript and its usage.
  • packages/libraries/laboratory/src/lib/settings.ts
    • Moved from packages/web/app/src/laboratory/lib/settings.ts to packages/libraries/laboratory/src/lib/settings.ts.
  • packages/libraries/laboratory/src/lib/tabs.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for LaboratoryTabOperation, LaboratoryTabHistory, LaboratoryTabPreflight, LaboratoryTabEnv, LaboratoryTabTest, LaboratoryTabSettings, and addTab.
  • packages/libraries/laboratory/src/lib/tests.ts
    • Updated import paths to reflect the new library structure.
    • Adjusted type definitions for LaboratoryTestTaskOperation, LaboratoryTestTaskUtlity, LaboratoryTestTask, addTest, and addTaskToTest.
  • packages/libraries/laboratory/src/lib/utils.ts
    • Moved from packages/web/app/src/laboratory/lib/utils.ts to packages/libraries/laboratory/src/lib/utils.ts.
  • packages/libraries/laboratory/src/main.tsx
    • Added new entry point for the @hive/laboratory package, rendering the Laboratory component with local storage integration.
  • packages/libraries/laboratory/src/plugins/target-env.tsx
    • Added new TargetEnvPlugin for managing target-specific environment variables.
  • packages/libraries/laboratory/tsconfig.app.json
    • Added TypeScript configuration for the new library's application build.
  • packages/libraries/laboratory/tsconfig.json
    • Added base TypeScript configuration for the new library.
  • packages/libraries/laboratory/tsconfig.node.json
    • Added TypeScript configuration for the new library's Node.js build.
  • packages/libraries/laboratory/vite.config.ts
    • Added Vite configuration for the new library's development server, including React and Tailwind CSS plugins, and Monaco Editor setup.
  • packages/libraries/laboratory/vite.lib.config.ts
    • Added Vite configuration for building the new library, specifying externals, formats, and DTS generation.
  • packages/web/app/package.json
    • Added @hive/laboratory as a workspace dependency.
  • packages/web/app/src/index.css
    • Defined CSS variables for the new laboratory theme, mapping them to existing application theme variables.
  • packages/web/app/src/laboratory/plugins/target-env.tsx
    • Updated import path for Editor and LaboratoryPlugin to use the new @hive/laboratory package.
  • packages/web/app/src/pages/target-laboratory-new.tsx
    • Updated imports to use components from the new @hive/laboratory package.
    • Added useTheme hook to retrieve the current theme.
    • Removed unused LaboratoryApi import.
    • Passed the theme prop to the Laboratory component.
  • packages/web/app/vite.config.ts
    • Added resolve.dedupe and resolve.alias configurations for React dependencies to prevent issues with multiple React instances.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request is a significant refactoring that extracts the 'laboratory' feature into its own reusable package, @hive/laboratory. This includes moving all related components, hooks, and utilities. A new design system based on shadcn/ui and Tailwind CSS has been adopted, resulting in widespread styling changes. The new package is also made embeddable by using a Shadow Root to isolate styles. Overall, this is a great enhancement for modularity and reusability. I've found a few issues related to configuration, dependencies, and theming that should be addressed.

Comment on lines +15 to +19
"components": "@/labaratory/components",
"utils": "@/labaratory/lib/utils",
"ui": "@/labaratory/components/ui",
"lib": "@/labaratory/lib",
"hooks": "@/labaratory/hooks"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

There's a typo in the path aliases. "labaratory" should be "laboratory". This will likely cause issues with path resolution.

Suggested change
"components": "@/labaratory/components",
"utils": "@/labaratory/lib/utils",
"ui": "@/labaratory/components/ui",
"lib": "@/labaratory/lib",
"hooks": "@/labaratory/hooks"
"components": "@/laboratory/components",
"utils": "@/laboratory/lib/utils",
"ui": "@/laboratory/components/ui",
"lib": "@/laboratory/lib",
"hooks": "@/laboratory/hooks"

Comment on lines +26 to +36
"peerDependencies": {
"@tanstack/react-form": "^1.23.8",
"date-fns": "^4.1.0",
"graphql-ws": "^6.0.6",
"lucide-react": "^0.548.0",
"lz-string": "^1.5.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tslib": "^2.8.1",
"zod": "^4.1.12"
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There are version mismatches between peerDependencies and devDependencies for @tanstack/react-form and zod. While this might be intentional, it's generally better to keep these versions aligned to prevent potential compatibility issues for consumers of this library.

  • @tanstack/react-form: ^1.23.8 in peerDependencies vs ^1.27.7 in devDependencies.
  • zod: ^4.1.12 in peerDependencies vs ^4.3.6 in devDependencies.

Please consider aligning these versions or ensuring that the specified ranges are compatible and intended.

Comment on lines 99 to 105
const PreflightPromptModal = (props: {
open: boolean;
onOpenChange: (open: boolean) => void;
title?: string;
description?: string;
placeholder?: string;
placeholder: string;
defaultValue?: string;
onSubmit?: (value: string | null) => void;
}) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The PreflightPromptModal component's props have been simplified, removing title and description. This reduces its flexibility as it can no longer show contextual information to the user when prompting for a value. This might be an oversight during refactoring. If this was not intentional, please consider re-adding these props to improve the user experience.

Comment on lines 10 to 14
const Toaster = ({ ...props }: ToasterProps) => {
const { theme } = useTheme();

return (
<Sonner
theme={theme as ToasterProps['theme']}
theme="dark"
className="group"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The Toaster component has a hardcoded theme="dark". The parent Laboratory component receives a theme prop that should be passed down to the Toaster to allow for dynamic theming (light/dark modes).

Suggested change
const Toaster = ({ ...props }: ToasterProps) => {
const { theme } = useTheme();
return (
<Sonner
theme={theme as ToasterProps['theme']}
theme="dark"
className="group"
const Toaster = ({ theme = 'dark', ...props }: ToasterProps & { theme?: string }) => {
return (
<Sonner
theme={theme as ToasterProps['theme']}
className="group"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant