
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
@cloudquery/plugin-config-ui-lib
Advanced tools
Plugin configuration UI library for CloudQuery Cloud App
A comprehensive library for building CloudQuery plugin configuration UIs with minimal effort.
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.
The generator will prompt you for:
After answering these questions, the generator creates a complete UI project in a cloud-config-ui
directory with:
Initializes the form with values from CloudQuery:
const { initialValues, initialized, teamName, context, isDisabled } =
useFormInit(pluginUiMessageHandler);
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>
The main form component that handles the entire UI:
<ConfigUIForm
container={container}
prepareSubmitValues={prepareSubmitValues}
/>
Should be rendered only when initialized
is true
.
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 */ }
});
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
}
]
}
You can conditionally show sections or fields:
{
component: 'section',
title: 'Advanced Settings',
shouldRender: (values) => values.show_advanced === true,
children: [/* components */]
}
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')
})
}
After generating your UI:
cd cloud-config-ui
npm start
This starts a development server where you can test your plugin UI locally.
The generator includes unit tests:
npm run test
or in watch mode
npm run test:watch
npm run build
This creates optimized production files in the dist
directory that can be deployed to CloudQuery.
FAQs
Plugin configuration UI library for CloudQuery Cloud App
We found that @cloudquery/plugin-config-ui-lib demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.