@devtron-labs/devtron-fe-common-lib 0.0.41-beta-3 → 0.0.41-beta-5

package/dist/Common/RJSF/common/FieldRow.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { FieldRowProps } from './types';
-export declare const FieldRowWithLabel: ({ showLabel, label, required, children, id, shouldAlignCenter, }: FieldRowProps) => JSX.Element;
+import { DO_NOT_SHOW_LABEL } from '../constants';
+export declare const FieldRowWithLabel: ({ showLabel, label, required, children, id, shouldAlignCenter, }: Omit<FieldRowProps, "label"> & {
+    label: FieldRowProps['label'] | typeof DO_NOT_SHOW_LABEL;
+}) => JSX.Element;

package/dist/Common/RJSF/constants.d.ts

@@ -3,3 +3,5 @@ export declare const PLACEHOLDERS: {
     INPUT: string;
     OBJECT_KEY: string;
 };
+export declare const DEFAULT_FIELD_TITLE = "Key not available";
+export declare const DO_NOT_SHOW_LABEL: unique symbol;

package/dist/index.js

@@ -23866,11 +23866,20 @@ function AppStatus(_a) {
     return hideStatusMessage ? (iconClass || isVirtualEnv ? (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "top", content: textContent }, { children: jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: renderIcon() })) }))) : (renderIcon())) : (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex mr-6" }, { children: renderIcon() })), jsxRuntime.jsx("p", __assign({ "data-testid": "".concat(status, "-app-status"), className: "dc__truncate-text dc__first-letter-capitalize cn-6 m-0" }, { children: textContent }))] })));
 }
 
+var PLACEHOLDERS = {
+    SELECT: 'Please select an option',
+    INPUT: 'Please enter an input',
+    OBJECT_KEY: 'Please enter a value for the key',
+};
+var DEFAULT_FIELD_TITLE = 'Key not available';
+// Using symbol to ensure uniqueness across the fields
+var DO_NOT_SHOW_LABEL = Symbol('Do not show label');
+
 var FieldRowWithLabel = function (_a) {
     var showLabel = _a.showLabel, label = _a.label, required = _a.required, children = _a.children, id = _a.id, _b = _a.shouldAlignCenter, shouldAlignCenter = _b === void 0 ? true : _b;
     return (jsxRuntime.jsxs("div", __assign({ className: showLabel
             ? "display-grid dc__gap-12 rjsf-form-template__field ".concat(shouldAlignCenter ? 'flex-align-center' : '')
-            : '' }, { children: [showLabel && (jsxRuntime.jsx("label", __assign({ className: "cn-7 fs-13 lh-32 fw-4 flexbox mb-0", htmlFor: id }, { children: !!label && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", __assign({ className: "dc__ellipsis-right" }, { children: label })), required && jsxRuntime.jsx("span", __assign({ className: "cr-5" }, { children: "\u00A0*" }))] })) }))), children] })));
+            : '' }, { children: [showLabel && (jsxRuntime.jsx("label", __assign({ className: "cn-7 fs-13 lh-32 fw-4 flexbox mb-0", htmlFor: id }, { children: label !== DO_NOT_SHOW_LABEL && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", __assign({ className: "dc__ellipsis-right" }, { children: label || DEFAULT_FIELD_TITLE })), required && jsxRuntime.jsx("span", __assign({ className: "cr-5" }, { children: "\u00A0*" }))] })) }))), children] })));
 };
 
 var ActionButton = function (_a) {
@@ -23886,7 +23895,7 @@ var ArrayFieldTemplate = function (_a) {
     return (jsxRuntime.jsx("fieldset", __assign({ className: className, id: idSchema.$id }, { children: items.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.map(function (_a, index) {
                     var key = _a.key, itemProps = __rest(_a, ["key"]);
                     // Show the title as the label for the first field
-                    var children = __assign(__assign({}, itemProps.children), { props: __assign(__assign({}, itemProps.children.props), { name: index === 0 ? label : '' }) });
+                    var children = __assign(__assign({}, itemProps.children), { props: __assign(__assign({}, itemProps.children.props), { name: index === 0 ? label : DO_NOT_SHOW_LABEL }) });
                     return (jsxRuntime.jsx(ArrayFieldItemTemplate, __assign({}, itemProps, { children: children }), key));
                 }), jsxRuntime.jsx(ActionButton, { canAdd: canAdd, onAddClick: onAddClick, disabled: disabled, readonly: readonly, uiSchema: uiSchema, registry: registry })] })) : (jsxRuntime.jsx(FieldRowWithLabel, __assign({ label: label, required: required, showLabel: true, id: idSchema.$id }, { children: jsxRuntime.jsx(ActionButton, { canAdd: canAdd, onAddClick: onAddClick, disabled: disabled, readonly: readonly, uiSchema: uiSchema, registry: registry }) }))) })));
 };
@@ -23897,12 +23906,6 @@ var ArrayFieldItemTemplate = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12" }, { children: [children, hasToolbar && hasRemove && (jsxRuntime.jsx(RemoveButton, { disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry }))] })));
 };
 
-var PLACEHOLDERS = {
-    SELECT: 'Please select an option',
-    INPUT: 'Please enter an input',
-    OBJECT_KEY: 'Please enter a value for the key',
-};
-
 var BaseInputTemplate = RJSF.getDefaultRegistry().templates.BaseInputTemplate;
 var BaseInput = function (_a) {
     var placeholder = _a.placeholder, props = __rest(_a, ["placeholder"]);
@@ -23973,7 +23976,9 @@ var ObjectFieldTemplate = function (props) {
     var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
     var hasAdditionalProperties = !!schema.additionalProperties;
     var showTitle = title && !hasAdditionalProperties;
-    return (jsxRuntime.jsxs("fieldset", __assign({ id: idSchema.$id }, { children: [showTitle && (jsxRuntime.jsx(TitleFieldTemplate, { id: utils.titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), jsxRuntime.jsx("div", __assign({ className: schema.properties && idSchema.$id !== 'root' ? 'dc__border-left pl-5' : '' }, { children: jsxRuntime.jsx(Field, __assign({}, props)) }))] })));
+    return (jsxRuntime.jsxs("fieldset", __assign({ id: idSchema.$id }, { children: [showTitle && (jsxRuntime.jsx(TitleFieldTemplate, { id: utils.titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), jsxRuntime.jsx("div", __assign({ className: schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
+                    ? 'dc__border-left pl-5'
+                    : '' }, { children: jsxRuntime.jsx(Field, __assign({}, props)) }))] })));
 };
 
 var TitleField = function (_a) {
@@ -26556,7 +26561,7 @@ var templates = {
     WrapIfAdditionalTemplate: WrapIfAdditionalTemplate,
 };
 
-var css_248z = ".rjsf-form-template__field {\n  grid-template-columns: 250px 1fr;\n}\n.rjsf-form-template__additional-fields {\n  grid-template-columns: 1fr 1fr minmax(20px, auto);\n}\n.rjsf-form-template__array-field-item {\n  grid-template-columns: 1fr auto;\n}\n.rjsf-form-template__array-field-item :first-child {\n  margin: 0;\n}";
+var css_248z = ".rjsf-form-template__field {\n  grid-template-columns: 250px 1fr;\n}\n.rjsf-form-template__additional-fields {\n  grid-template-columns: 1fr 1fr minmax(20px, auto);\n}\n.rjsf-form-template__array-field-item {\n  grid-template-columns: 1fr auto;\n}\n.rjsf-form-template__array-field-item > :first-child {\n  margin: 0;\n}";
 styleInject(css_248z);
 
 // Need to use this way because the default import was not working as expected

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.41-beta-3",
+    "version": "0.0.41-beta-5",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/RJSF/common/FieldRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { FieldRowProps } from './types'
+import { DEFAULT_FIELD_TITLE, DO_NOT_SHOW_LABEL } from '../constants'
 
 export const FieldRowWithLabel = ({
     showLabel,
@@ -8,7 +9,9 @@ export const FieldRowWithLabel = ({
     children,
     id,
     shouldAlignCenter = true,
-}: FieldRowProps) => (
+}: Omit<FieldRowProps, 'label'> & {
+    label: FieldRowProps['label'] | typeof DO_NOT_SHOW_LABEL
+}) => (
     <div
         className={
             showLabel
@@ -19,9 +22,9 @@ export const FieldRowWithLabel = ({
         {showLabel && (
             <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
                 {/* The check is added here intentionally for proper layout for array type field */}
-                {!!label && (
+                {label !== DO_NOT_SHOW_LABEL && (
                     <>
-                        <span className="dc__ellipsis-right">{label}</span>
+                        <span className="dc__ellipsis-right">{label || DEFAULT_FIELD_TITLE}</span>
                         {required && <span className="cr-5">&nbsp;*</span>}
                     </>
                 )}

package/src/Common/RJSF/constants.ts

@@ -3,3 +3,8 @@ export const PLACEHOLDERS = {
     INPUT: 'Please enter an input',
     OBJECT_KEY: 'Please enter a value for the key',
 }
+
+export const DEFAULT_FIELD_TITLE = 'Key not available'
+
+// Using symbol to ensure uniqueness across the fields
+export const DO_NOT_SHOW_LABEL = Symbol('Do not show label')

package/src/Common/RJSF/rjsfForm.scss

@@ -10,7 +10,8 @@
     &__array-field-item {
         grid-template-columns: 1fr auto;
 
-        & :first-child {
+        & > :first-child {
+            // This is added as the array field itself has a margin bottom
             margin: 0;
         }
     }

package/src/Common/RJSF/templates/ArrayFieldTemplate.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
+import { DO_NOT_SHOW_LABEL } from '../constants'
 
 const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
     const {
@@ -42,7 +43,7 @@ export const ArrayFieldTemplate = ({
                             ...itemProps.children,
                             props: {
                                 ...itemProps.children.props,
-                                name: index === 0 ? label : '',
+                                name: index === 0 ? label : DO_NOT_SHOW_LABEL,
                             },
                         }
                         return (

package/src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -91,7 +91,13 @@ export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
                 />
             )}
             {/* Not adding the border and padding for non-objects and root schema */}
-            <div className={schema.properties && idSchema.$id !== 'root' ? 'dc__border-left pl-5' : ''}>
+            <div
+                className={
+                    schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
+                        ? 'dc__border-left pl-5'
+                        : ''
+                }
+            >
                 <Field {...props} />
             </div>
         </fieldset>