🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@cloudquery/plugin-config-ui-lib

Package Overview
Dependencies
Maintainers
3
Versions
500
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudquery/plugin-config-ui-lib

Plugin configuration UI library for CloudQuery Cloud App

10.1.1
latest
Source
npm
Version published
Maintainers
3
Created
Source

@cloudquery/plugin-config-ui-lib

A comprehensive library for building CloudQuery plugin configuration UIs with minimal effort.

Quick Start

The fastest way to create a new plugin UI is to use the CLI generator:

npx --legacy-peer-deps @cloudquery/plugin-config-ui-lib

This command runs the interactive generator that creates a complete plugin UI project with all necessary files and dependencies.

Generator Features

The generator will prompt you for:

  • Plugin Label: The human-readable name (e.g., "AWS", "GitHub")
  • Plugin Name: The machine-readable name (e.g., "aws", "github")
  • Plugin Kind: Source or destination
  • Plugin Team: Typically "cloudquery" or your organization
  • Plugin Version: The semantic version (e.g., "v1.0.0")
  • Plugin Logo: Path to your logo image (optional but recommended)
  • Table Selection: For source plugins, whether it supports table selection
  • Service Selection: For source plugins, whether it supports service selection
  • Authentication Type: OAuth, token-based, or both
  • Authentication Properties: For token-based auth, what fields are needed
  • Advanced Options: Additional configuration options

After answering these questions, the generator creates a complete UI project in a cloud-config-ui directory with:

  • All necessary configuration files
  • Basic UI components
  • Proper authentication flows
  • Unit test setup
  • Development environment

Core Components

useFormInit hook

Initializes the form with values from CloudQuery:

const { initialValues, initialized, teamName, context, isDisabled } = 
  useFormInit(pluginUiMessageHandler);

PluginContextProvider

The main wrapper component that provides context to all child components:

<PluginContextProvider
  config={config}
  teamName={teamName}
  getTablesData={getTablesData}
  hideStepper={context === 'wizard'} 
  pluginUiMessageHandler={pluginUiMessageHandler}
  initialValues={initialValues}
  isDisabled={isDisabled}
>
  {/* Your plugin UI components */}
</PluginContextProvider>

ConfigUIForm

The main form component that handles the entire UI:

<ConfigUIForm 
  container={container} 
  prepareSubmitValues={prepareSubmitValues} 
/>

Should be rendered only when initialized is true.

useConfig hook

Defines your plugin's configuration structure, including authentication methods, steps, and form fields:

export const useConfig = ({ initialValues }) => ({
  name: 'my-plugin',
  type: 'source',
  label: 'My Plugin',
  docsLink: 'https://hub.cloudquery.io/plugins/source/myteam/my-plugin/latest/docs',
  iconLink: 'images/logo.png',
  auth: [AuthType.OAUTH, AuthType.OTHER],
  steps: [
    {
      title: 'Connect',
      children: [
        // Form sections and components
      ]
    }
  ],
  // Optional guide configuration
  guide: { /* guide configuration */ }
});

UI Components

Form Components

  • ControlTextField: Text input with validation
  • ControlNumberField: Number input with validation
  • ControlSelect: Dropdown selection
  • ControlSwitch: Toggle switch
  • ControlPassword: Password input with visibility toggle
  • ControlCheckbox: Checkbox input

Input Components

  • TableSelector: UI for selecting tables (for source plugins)
  • ServiceSelector: UI for selecting services
  • SecretInput: Secure input for credentials
  • UploadJSON: Component for uploading JSON files
  • MultiAutocomplete: Multiple selection with autocomplete

Customization

Form Structure

You can customize the form by defining sections and components in the useConfig hook:

{
  component: 'section',
  title: 'Authentication',
  children: [
    {
      component: 'control-text-field',
      name: 'api_key',
      label: 'API Key',
      required: true
    }
  ]
}

Conditional Rendering

You can conditionally show sections or fields:

{
  component: 'section',
  title: 'Advanced Settings',
  shouldRender: (values) => values.show_advanced === true,
  children: [/* components */]
}

Custom Validation

Use Yup schemas for validation:

{
  component: 'control-text-field',
  name: 'api_key',
  label: 'API Key',
  schema: yup.string().when('_step', {
    // Only validate on step 1
    is: 1,
    then: (schema) => schema.required('API Key is required')
  })
}

Development

After generating your UI:

cd cloud-config-ui
npm start

This starts a development server where you can test your plugin UI locally.

Testing

The generator includes unit tests:

npm run test

or in watch mode

npm run test:watch

Building for Production

npm run build

This creates optimized production files in the dist directory that can be deployed to CloudQuery.

Keywords

javascript

FAQs

Package last updated on 02 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts