@integry/sdk 4.5.4 → 4.5.6

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

@@ -29,6 +29,7 @@ import NewMappingUI from '@/features/common/NewMappingUI';
 import { ObjectField } from '@/components/form';
 import { areParentValuesValid, getFieldLabelTags } from '@/utils/stepUtils';
 import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
+import { notEmpty } from '@/types/utils';
 import {
   JSONToActivityOutputData,
   JSONToDynamicFieldData,
@@ -44,11 +45,14 @@ interface ActionFormPropsType extends StoreType {
   eventEmitter: EventEmitter<IntegrySDKEvents>;
   isReadOnly?: boolean;
   accountConnected: boolean;
+  selectedAuthId: string;
+  tagsTree: any;
 }
 
 interface ActionFormStateType {
   loading: boolean;
   dynamicFieldDataState: any;
+  tagsTree: any;
 }
 
 interface StepDataMapping {
@@ -61,6 +65,10 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
     this.state = {
       loading: false,
       dynamicFieldDataState: {},
+      tagsTree:
+        this.props.tagsTree && Object.keys(this.props.tagsTree).length > 0
+          ? JSONToActivityOutputData(this.props.tagsTree)
+          : {},
     };
   }
 
@@ -711,6 +719,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
   };
 
   private shouldShowStep = (field: TemplateField) => {
+    if (!this.props.showStepValidation) {
+      return true;
+    }
     const stepId = this.props.step.id;
     const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
 
@@ -756,13 +767,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
 
   private stepIsOfType = (fields: string[]) => {
     const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
-    return fields.indexOf(stepObject.step.activity.type) > -1;
+    const stepObject = (this.props.stepMapping &&
+      this.props.stepMapping[stepId]) || { step: this.props.step };
+    return fields.indexOf(stepObject.step.activity?.type) > -1;
   };
 
   private textFieldParentHasValues = (currentField: any) => {
     const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
+    const stepObject = (this.props.stepMapping &&
+      this.props.stepMapping[stepId]) || { step: this.props.step };
 
     const anyVisibleFields = stepObject.step.template_fields.filter(
       (el) => el.is_visible,
@@ -1123,8 +1136,10 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
       isReadOnly,
       accountConnected,
     } = this.props;
-    const selectedStep = stepMapping[step.id] && stepMapping[step.id].step;
-    const selectedStepData = stepDataMapping && stepDataMapping[step.id];
+    const selectedStep =
+      (stepMapping[step.id] && stepMapping[step.id].step) || step;
+    const selectedStepData =
+      (stepDataMapping && stepDataMapping[step.id]) || {};
     const actionConfigPayload = {};
     // userConfig?.objects && genericData.directActionPayloadName
     //     ? embedConfig?.objects[genericData.directActionPayloadName]
@@ -1134,9 +1149,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
     const activityOutputData =
       actionConfigPayload || this.props.activityOutputData || {};
     const noStepFields =
-      selectedStep.template_fields.length === 0 ||
+      selectedStep.template_fields?.length === 0 ||
       (!(this.props.userConfig && this.props.userConfig.viewAsIU) &&
-        selectedStep.template_fields.filter((field) => field.is_visible)
+        selectedStep.template_fields?.filter((field) => field.is_visible)
           .length === 0);
     return html`
       ${this.state.loading
@@ -1144,12 +1159,18 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
         : html`
             ${selectedStep
               ? html`
-                  <div class=${styles.actionFormWrap}>
+                  <div
+                    class=${`${styles.actionFormWrap} ${
+                      this.props.selectedAuthId && this.props.accountConnected
+                        ? `${styles.actionFormWrapAutoWidth}`
+                        : ``
+                    }`}
+                  >
                     ${noStepFields
                       ? html`<span class=${styles.noStepFields}
                           >There’s nothing to configure, please proceed.</span
                         >`
-                      : selectedStep.template_fields.map((el) => {
+                      : selectedStep.template_fields?.map((el) => {
                           if (
                             this.shouldShowStep(el) &&
                             (el.activity_field || el.type === 'SECTION')
@@ -1239,11 +1260,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   type=${el.activity_field?.type}
                                   selectedAuthId=${`${
                                     this.props.stepMapping[this.props.step.id]
-                                      ?.selectedAuthId || ''
+                                      ?.selectedAuthId ||
+                                    this.props.selectedAuthId ||
+                                    ''
                                   }`}
-                                  disabled=${!this.props.stepMapping[
-                                    this.props.step.id
-                                  ]?.isAuthVerified}
+                                  disabled=${
+                                    !this.props.stepMapping[this.props.step.id]
+                                      ?.isAuthVerified &&
+                                    !this.props.accountConnected
+                                  }
                                   sourceFlowData=${this.sourceFlowData(el)}
                                   sourceFlowIntegrataionInvocationUrl=${
                                     el.source_flow_integration_invocation_url
@@ -1316,13 +1341,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.title || el.activity_field?.title
                                     }
                                     activityOutputData=${this.arrayToNestedJSONWithFirstValue(
-                                      this.props.activityOutputData,
+                                      this.props.activityOutputData ||
+                                        this.state.tagsTree,
                                       this.props.dynamicFieldData ||
                                         this.state.dynamicFieldDataState ||
                                         {},
                                     )}
                                     activityOutputDataRaw=${
-                                      this.props.activityOutputData
+                                      this.props.activityOutputData ||
+                                      this.state.tagsTree
                                     }
                                     description=${elDescription}
                                     value=${
@@ -1337,9 +1364,16 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                     }
                                     placeholder=${this.getPlaceholder(el)}
                                     showStepValidation=${showStepValidation}
-                                    regex=${selectedStepData[el.id].regex}
+                                    regex=${
+                                      selectedStepData[el.id]
+                                        ? selectedStepData[el.id].regex
+                                        : ''
+                                    }
                                     regexErrorMessage=${
-                                      selectedStepData[el.id].regexErrorMessage
+                                      selectedStepData[el.id]
+                                        ? selectedStepData[el.id]
+                                            .regexErrorMessage
+                                        : ''
                                     }
                                     isRequired=${el.is_required}
                                     isHidden=${el.is_hidden}
@@ -1449,10 +1483,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       placeholder=${el.placeholder ||
                                       'Please enter a URL'}
                                       showStepValidation=${showStepValidation}
-                                      regex=${selectedStepData[el.id].regex}
+                                      regex=${selectedStepData[el.id]
+                                        ? selectedStepData[el.id].regex
+                                        : ''}
                                       regexErrorMessage=${selectedStepData[
                                         el.id
-                                      ].regexErrorMessage}
+                                      ]
+                                        ? selectedStepData[el.id]
+                                            .regexErrorMessage
+                                        : ''}
                                       isRequired=${el.is_required}
                                       onChange=${(
                                         val: string,
@@ -1586,10 +1625,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       placeholder=${el.placeholder ||
                                       el.activity_field?.placeholder ||
                                       'Please enter a value'}
-                                      regex=${selectedStepData[el.id].regex}
+                                      regex=${selectedStepData[el.id]
+                                        ? selectedStepData[el.id].regex
+                                        : ''}
                                       regexErrorMessage=${selectedStepData[
                                         el.id
-                                      ].regexErrorMessage}
+                                      ]
+                                        ? selectedStepData[el.id]
+                                            .regexErrorMessage
+                                        : ''}
                                       showStepValidation=${showStepValidation}
                                       isRequired=${el.is_required}
                                       onChange=${(val: string) => {
@@ -1631,9 +1675,16 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                     ''
                                   }
                                   placeholder=${this.getPlaceholder(el)}
-                                  regex=${selectedStepData[el.id].regex}
+                                  regex=${
+                                    selectedStepData[el.id].regex
+                                      ? selectedStepData[el.id].regex
+                                      : ''
+                                  }
                                   regexErrorMessage=${
-                                    selectedStepData[el.id].regexErrorMessage
+                                    selectedStepData[el.id]
+                                      ? selectedStepData[el.id]
+                                          .regexErrorMessage
+                                      : ''
                                   }
                                   showStepValidation=${showStepValidation}
                                   isRequired=${el.is_required}

package/src/features/common/ActionForm/styles.module.scss

@@ -12,6 +12,11 @@
 .actionStepFieldWrap {
   // margin-bottom: 16px;
 }
+.actionFormWrapAutoWidth {
+  margin-left: 24px;
+  margin-right: 24px;
+  width: auto;
+}
 
 .unsupported {
   font-size: 12px;

package/src/index.ts

@@ -41,6 +41,7 @@ import FlowSetupContainer from '@/features/containers/FlowSetupContainer';
 import MarketplaceContainer from '@/features/containers/MarketplaceContainer';
 import AppFlowContainer from '@/features/containers/AppFlowContainer';
 import MarketplaceAppsContainer from '@/features/containers/MarketplaceAppsContainer';
+import ActionForm from '@/features/common/ActionForm';
 
 import FunctionForm from '@/features/common/FunctionForm';
 import { openPopupWindow } from '@/utils/popup';
@@ -1980,6 +1981,49 @@ export class IntegryJS {
     }
   };
 
+  public renderFlowStep = (
+    containerId: string,
+    step: any,
+    connectedAccountId: string,
+    tagsTree = {},
+  ) => {
+    const target = document.getElementById(containerId);
+
+    if (target) {
+      const store = createSDKStore();
+      render(
+        html`<div>
+          <${AppContext.Provider}
+            value=${{
+              apiHandler: this.apiHandler,
+              eventEmitter: this.eventEmitter,
+              isPreviewMode: false,
+            }}
+          >
+            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
+              <${ActionForm}
+                step=${step}
+                stepType=${'CONFIGURE'}
+                showStepValidation=${false}
+                apiHandler=${this.apiHandler}
+                eventEmitter=${this.eventEmitter}
+                isReadOnly="${false}"
+                selectedAuthId="${connectedAccountId}"
+                accountConnected=${true}
+                tagsTree=${tagsTree}
+              />
+            <//>
+          <//>
+        </div>`,
+        target,
+      );
+    } else {
+      console.warn(
+        `Integry SDK render target with id ${containerId} was not found`,
+      );
+    }
+  };
+
   public verifyAuthConfig = () =>
     this.apiHandler.verifyAuthConfig({
       deploymentId: this.config.deploymentId,

package/src/store/actionFunctions.ts

@@ -517,10 +517,15 @@ export const actionFunctions = (storeSnapshot: Store<State>) => ({
     const { stepDataMapping, conditionalFieldMapping } = state;
     const element = stepDataMapping[stepId];
 
-    const fieldsData = Object.keys(element).map((fieldId) => {
-      const ele = element[Number(fieldId)];
-      return ele;
-    });
+    let fieldsData: any[] = [];
+    if (element) {
+      fieldsData = Object.keys(element).map((fieldId) => {
+        const ele = element[Number(fieldId)];
+        return ele;
+      });
+    } else {
+      fieldsData = [];
+    }
 
     const visibleFields = fieldsData.filter((el) => {
       // filter out hidden conditional fields

package/vitest.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vitest/config';
+import path from 'path';
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
   test: {
     globals: true,
     environment: 'jsdom',