@integry/sdk 4.6.39 → 4.6.41

package/src/components/form/FunctionField/styles.module.scss

@@ -0,0 +1,455 @@
+.functionFieldContainer {
+  margin-bottom: 1rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.functionFieldLabel {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 13px;
+}
+
+.functionFieldAddBtn {
+  padding: 5px 10px;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+.functionFieldSummary {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  background-color: #f9fafb;
+}
+
+.functionFieldSelected {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.functionFieldName {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.functionFieldEditBtn {
+  background-color: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: #e5e7eb;
+    color: #1f2937;
+  }
+}
+
+.functionFieldOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.functionFieldModal {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.functionFieldModalHeader {
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  position: relative;
+}
+
+.functionFieldModalTitle {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.functionFieldModalDescription {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.functionFieldCloseBtn {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.functionFieldModalBody {
+  padding: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.functionFieldFormGroup {
+  margin-bottom: 1.25rem;
+}
+
+.functionFieldInlineGroup {
+  display: block;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+
+.functionFieldInlineLabel {
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+  margin-right: 1rem;
+}
+
+.functionFieldInlineSelect {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #1f2937;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+
+  &:focus {
+    outline: none;
+    border-color: #4250f0;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.functionFieldFormLabel {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.functionFieldRequired {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.functionFieldInput {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #1f2937;
+
+  &:focus {
+    outline: none;
+    border-color: #4250f0;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.functionFieldTextarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.functionFieldSelect {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+.functionFieldCheckbox {
+  width: auto;
+  margin-right: 0.5rem;
+}
+
+.functionFieldConfig {
+  min-height: 358px;
+}
+
+.functionFieldConfigTitle {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.functionFieldConfigDescription {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.functionFieldDescription {
+  color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
+
+.functionFieldModalFooter {
+  display: flex;
+  justify-content: flex-end;
+  padding: 1.25rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  gap: 0.75rem;
+}
+
+.functionFieldCancelBtn {
+  padding: 0.5rem 1rem;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+.functionFieldSaveBtn {
+  padding: 0.5rem 1rem;
+  background-color: #4250f0;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #2563eb;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.functionFieldTabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1rem;
+  .disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.functionFieldTab {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    color: #1f2937;
+  }
+}
+
+.functionFieldTabActive {
+  color: #4250f0;
+  border-bottom: 2px solid #4250f0;
+}
+
+.functionFieldTabContent {
+  padding: 1rem 0;
+  padding-bottom: 0px;
+  .loader {
+    display: flex;
+    justify-content: center;
+    min-height: 100px;
+  }
+}
+
+.functionFieldAuthPlaceholder {
+  padding: 1.5rem;
+  background-color: #f9fafb;
+  border: 1px dashed #d1d5db;
+  border-radius: 0.375rem;
+  text-align: center;
+  color: #6b7280;
+}
+
+.functionFieldTabFooter {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.functionFieldNextBtn,
+.functionFieldBackBtn {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.functionFieldNextBtn {
+  background-color: #4250f0;
+  color: white;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #2563eb;
+  }
+}
+
+.functionFieldBackBtn {
+  background-color: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  margin-right: 0.75rem;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+[class^='styles-module_functionFieldModalBody_'] {
+  [class^='styles-module_tagMenu_'] {
+    padding: 12px 0 !important;
+  }
+  [class^='styles-module_functionFormWrap_'] {
+    padding: 0px;
+    [class^='styles-module_functionFormContainer_'] {
+      min-height: auto;
+    }
+    [class^='styles-module_btnSubmit_'] {
+      display: none;
+    }
+  }
+  [class^='styles-module_functionHeader_'] {
+    display: none;
+  }
+}
+
+.functionFieldSelected {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.functionFieldInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.functionFieldAppIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
+.functionFieldNameContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.functionFieldName {
+  font-weight: 500;
+  color: #1f2937;
+  font-size: 0.875rem;
+}
+
+.functionFieldAppName {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.functionFieldActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.functionFieldDeleteBtn {
+  background-color: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #fee2e2;
+    color: #ef4444;
+  }
+}
+
+.functionFieldEditBtn {
+  background-color: #4250f0;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 0.25rem;
+  font-weight: 500;
+
+  &:hover {
+    background-color: #2563eb;
+    color: white;
+  }
+}

package/src/components/form/index.ts

@@ -1,3 +1,4 @@
 import { ObjectField, ObjectFieldProps } from './ObjectField';
+import { FunctionField, FunctionFieldProps } from './FunctionField';
 
-export { ObjectField, ObjectFieldProps };
+export { ObjectField, ObjectFieldProps, FunctionField, FunctionFieldProps };

package/src/features/common/ActionForm/index.ts

@@ -27,10 +27,9 @@ import DynamicField from '@/features/common/DynamicField';
 import SectionField from '@/features/common/SectionField';
 import { TimeInput } from '@/components/TimeInput';
 import NewMappingUI from '@/features/common/NewMappingUI';
-import { ObjectField } from '@/components/form';
+import { ObjectField, FunctionField } from '@/components/form';
 import { areParentValuesValid, getFieldLabelTags } from '@/utils/stepUtils';
 import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import { notEmpty } from '@/types/utils';
 import {
   JSONToActivityOutputData,
   JSONToDynamicFieldData,
@@ -1369,9 +1368,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                             const uiField = el.ui_field;
                             const uiFieldSourceURL =
                               uiField?.data_source?.url || '';
-                            if (el.data_type === 'OBJECT') {
+                            if (
+                              el.data_type === 'OBJECT' &&
+                              el.type !== 'FUNCTION_FIELD'
+                            ) {
                               fieldType = 'OBJECT';
-                            } else if (el.data_type === 'OBJECT[]') {
+                            } else if (
+                              el.data_type === 'OBJECT[]' &&
+                              el.type !== 'FUNCTION_FIELD'
+                            ) {
                               fieldType = 'OBJECT[]';
                             }
 
@@ -2119,6 +2124,43 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   textContent=${el.default_value}
                                 />`;
 
+                              case 'FUNCTION_FIELD':
+                                return html`
+                                  <${FunctionField}
+                                    field=${el}
+                                    name="${el.activity_field?.machine_name ||
+                                    'function_field'}"
+                                    description=${elDescription}
+                                    label="${el.title}"
+                                    value=${el.default_value}
+                                    apiHandler=${this.props.apiHandler}
+                                    isArray=${!!(el.data_type === 'OBJECT[]')}
+                                    onChange=${(
+                                      val: string,
+                                      passesRegexTest?: boolean,
+                                    ) => {
+                                      if (this.props.onFieldChangeCallback) {
+                                        this.props.onFieldChangeCallback(
+                                          el.activity_field?.machine_name || '',
+                                          val,
+                                        );
+                                      } else {
+                                        setStepFieldData({
+                                          stepId: `${step.id}`,
+                                          fieldId: `${el.id}`,
+                                          value: this.getFieldValFromActivityOutputRaw(
+                                            this.props.activityOutputData,
+                                            val,
+                                          ),
+                                          isRequired: el.is_required,
+                                          passesRegexTest,
+                                        });
+                                        this.props.verifyStepValidity(step.id);
+                                      }
+                                    }}
+                                  />
+                                `;
+
                               default:
                                 // return html``;
                                 return html` <div