feat: allow code fields without label (#106)

* feat: allow code fields without label

* bump minor version

---------

Co-authored-by: Stanislav <[email protected]>

Author: stanislavCQ

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
   "description": "Plugin configuration UI library for CloudQuery Cloud App",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -108,6 +108,11 @@ export const ControlCodeField = forwardRef<MonacoEditor, ControlCodeFieldProps>(
           paddingY: 1,
           paddingX: 1.5,
           bgcolor: '#15202E',
+          ...(!label && {
+            '& .monaco-editor': {
+              outline: 'none',
+            },
+          }),
         }}
       >
         {!!label && <FormLabel sx={{ mb: 1 }}>{label}</FormLabel>}

src/components/form/controls/controlCodeField.tsx

@@ -16,7 +16,9 @@ const isReservedLayoutComponent = (componentName: string) =>
   ['control-table-selector', 'control-oauth', 'control-services-selector'].includes(componentName);
 
 const componentRequiresLabel = (componentName: string) =>
-  !['control-exclusive-toggle', 'control-services-selector'].includes(componentName);
+  !['control-exclusive-toggle', 'control-services-selector', 'control-code-field'].includes(
+    componentName,
+  );
 
 function checkForDuplicateNames(names: string[]): string[] {
   return names.filter((e, i, a) => a.indexOf(e) !== i);

src/context/utils/validateConfig.ts

@@ -1,3 +1,5 @@
+import { Stack } from '@mui/material';
+
 import { ControlCodeField } from '../../components/form/controls/controlCodeField.js';
 import { LayoutCodeField } from '../../components/form/renderer/types.js';
 import { ComponentWrapper } from '../wrappers/component.js';
@@ -33,3 +35,18 @@ export const Primary = {
   ),
   args: {},
 };
+
+export const WithoutLabel = {
+  render: () => (
+    <Stack>
+      <ComponentWrapper
+        args={{
+          component: 'control-code-field',
+          name: 'option',
+        }}
+        yupBase="string().default(initialValues?.spec?.yaml  || '')"
+      />
+    </Stack>
+  ),
+  args: {},
+};