@integry/sdk 4.7.16 → 4.7.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.7.16",
+  "version": "4.7.18",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

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

@@ -40,6 +40,8 @@ export type DynamicFieldsProps = {
   dependsOn?: string[];
   isArray?: boolean;
   allowWorkspaceConnectedAccounts?: boolean;
+  tagsTree?: any;
+  showMenuOnLeft?: boolean;
 } & StoreType;
 
 interface DynamicDataItem {
@@ -72,6 +74,8 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     dependsOn = [],
     isArray = false,
     allowWorkspaceConnectedAccounts = false,
+    tagsTree = null,
+    showMenuOnLeft = false,
   } = props;
 
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
@@ -374,6 +378,8 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
                                 ).length > 0}
                                 allowTagsInText=${true}
                                 isDisabled=${isDisabled}
+                                tagsTree=${tagsTree}
+                                showMenuOnLeft=${showMenuOnLeft}
                               ><//>
                             </div>
                           `,
@@ -421,6 +427,8 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
                             .length > 0}
                           allowTagsInText=${true}
                           isDisabled=${isDisabled}
+                          tagsTree=${tagsTree}
+                          showMenuOnLeft=${showMenuOnLeft}
                         ><//>
                       </div>
                     `,

package/src/features/containers/AppFlowContainer/AppFlowListing/compactStyles.module.scss

@@ -369,6 +369,14 @@
     margin-top: 16px;
     align-items: center;
     gap: 24px;
+    .integrationProgress {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      color: #999;
+      font-size: 12px;
+      font-weight: 400;
+    }
     .flowStatus {
       display: flex;
       gap: 9px;

package/src/features/containers/AppFlowContainer/AppFlowListing/flowCard.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/preact';
+import { html } from 'htm/preact';
+import { Provider } from 'unistore/preact';
+import createStore from 'unistore';
+import { describe, it, expect, vi } from 'vitest';
+import FlowCard from './flowCard';
+
+const baseFlow = {
+  id: 1,
+  name: 'Test Flow',
+  description: null,
+  execution_type: 'ON_DEMAND',
+  allow_multiple_instances: false,
+  instances: [],
+  execution_behaviour: 'SAVE_ONLY',
+  button_text: '',
+};
+
+const renderWithStore = (flow: any) => {
+  const store = createStore({ userConfig: {} });
+  return render(
+    html`<${Provider} store=${store}>
+      <${FlowCard}
+        flow=${flow}
+        accountVerified=${true}
+        onFlowSelect=${vi.fn()}
+        updateInstanceName=${vi.fn()}
+      />
+    <//>`,
+  );
+};
+
+describe('FlowCard', () => {
+  it('shows setup button when integration creation not in progress', () => {
+    const flow = { ...baseFlow, integration_creation_in_progress: false };
+    renderWithStore(flow);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('shows setup button when creation is in progress but multiple instances allowed', () => {
+    const flow = {
+      ...baseFlow,
+      allow_multiple_instances: true,
+      integration_creation_in_progress: true,
+    };
+    renderWithStore(flow);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('shows progress message when integration creation is in progress and single instance', () => {
+    const flow = { ...baseFlow, integration_creation_in_progress: true };
+    renderWithStore(flow);
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(
+      screen.getByText('Integration creation in progress')
+    ).toBeInTheDocument();
+  });
+});

package/src/features/containers/AppFlowContainer/AppFlowListing/flowCard.tsx

@@ -2,6 +2,7 @@ import { html } from 'htm/preact';
 import { connect } from 'unistore/preact';
 import { Button, ButtonTypes } from '@/components/Button';
 import { Hint } from '@/components/Tooltip';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
 import { convertDateToStandard } from '@/utils/datetime';
 import { Flow, Instance } from '@/interfaces';
 import { actionFunctions } from '@/store';
@@ -163,13 +164,19 @@ const FlowCard = ({
             class=${styles.readonlyHint}
             data-hint=${disabledButtonTooltip()}
           ></span>`}
-          <${Button}
-            label=${getButtonLabel()}
-            type=${ButtonTypes.PRIMARY}
-            onClick=${() => handleFlowSelect()}
-            disabled=${!accountVerified}
-            id=${`setup-integration-btn-${flow?.id}`}
-          />
+          ${flow?.integration_creation_in_progress &&
+          !flow?.allow_multiple_instances
+            ? html`<div class=${styles.integrationProgress}>
+                Integration creation in progress
+                <${ThreeDotLoader} color="#999" />
+              </div>`
+            : html`<${Button}
+                label=${getButtonLabel()}
+                type=${ButtonTypes.PRIMARY}
+                onClick=${() => handleFlowSelect()}
+                disabled=${!accountVerified}
+                id=${`setup-integration-btn-${flow?.id}`}
+              />`}
         <//>
       `}
       ${showFlowLastRunTime() &&

package/src/features/containers/AppFlowContainer/AppFlowListing/flowCardCompact.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/preact';
+import { html } from 'htm/preact';
+import { Provider } from 'unistore/preact';
+import createStore from 'unistore';
+import { describe, it, expect, vi } from 'vitest';
+import FlowCardCompact from './flowCardCompact';
+
+const baseFlow = {
+  id: 1,
+  name: 'Test Flow',
+  description: null,
+  execution_type: 'ON_DEMAND',
+  allow_multiple_instances: false,
+  instances: [],
+  execution_behaviour: 'SAVE_ONLY',
+  button_text: '',
+};
+
+const renderWithStore = (flow: any) => {
+  const store = createStore({ userConfig: {} });
+  return render(
+    html`<${Provider} store=${store}>
+      <${FlowCardCompact}
+        flow=${flow}
+        accountVerified=${true}
+        onFlowSelect=${vi.fn()}
+        updateInstanceName=${vi.fn()}
+      />
+    <//>`,
+  );
+};
+
+describe('FlowCardCompact', () => {
+  it('shows setup button when integration creation not in progress', () => {
+    const flow = { ...baseFlow, integration_creation_in_progress: false };
+    renderWithStore(flow);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Integration creation in progress'),
+    ).toBeNull();
+  });
+
+  it('shows progress message when integration creation is in progress', () => {
+    const flow = { ...baseFlow, integration_creation_in_progress: true };
+    renderWithStore(flow);
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(screen.getByText('Integration creation in progress')).toBeInTheDocument();
+  });
+});

package/src/features/containers/AppFlowContainer/AppFlowListing/flowCardCompact.tsx

@@ -3,6 +3,7 @@ import { html } from 'htm/preact';
 import { connect } from 'unistore/preact';
 import { Button, ButtonTypes } from '@/components/Button';
 import { Hint } from '@/components/Tooltip';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
 import { convertDateToStandard } from '@/utils/datetime';
 import { Flow, Instance } from '@/interfaces';
 import { actionFunctions } from '@/store';
@@ -376,13 +377,19 @@ const FlowCardCompact = ({
             class=${styles.readonlyHint}
             data-hint=${disabledButtonTooltip()}
           ></span>`}
-          <${Button}
-            label=${getButtonLabel()}
-            type=${ButtonTypes.PRIMARY}
-            onClick=${() => handleFlowSelect()}
-            disabled=${!accountVerified}
-            id=${`setup-integration-btn-${flow?.id}`}
-          />
+          ${flow?.integration_creation_in_progress &&
+          !flow?.allow_multiple_instances
+            ? html`<div class=${styles.integrationProgress}>
+                Integration creation in progress
+                <${ThreeDotLoader} color="#999" />
+              </div>`
+            : html`<${Button}
+                label=${getButtonLabel()}
+                type=${ButtonTypes.PRIMARY}
+                onClick=${() => handleFlowSelect()}
+                disabled=${!accountVerified}
+                id=${`setup-integration-btn-${flow?.id}`}
+              />`}
         <//>
       `}
       ${showFlowLastRunTime() &&

package/src/features/containers/AppFlowContainer/AppFlowListing/styles.module.scss

@@ -210,6 +210,14 @@
     padding-top: 0px;
     align-items: center;
     gap: 24px;
+    .integrationProgress {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      color: #999;
+      font-size: 12px;
+      font-weight: 400;
+    }
     .flowStatus {
       display: flex;
       gap: 9px;

package/src/interfaces/index.ts

@@ -858,6 +858,7 @@ export interface Flow {
   button_text: string;
   branding_app?: BrandingApp;
   version_number?: number | null;
+  integration_creation_in_progress?: boolean;
 }
 
 export interface AppFlowsResponse {