@integry/sdk 4.7.39 → 4.7.41

package/src/features/containers/AppFlowContainer/AppFlowListing/flow-instance.tsx

@@ -1,367 +0,0 @@
-/* eslint-disable import/no-cycle */
-/* eslint-disable @typescript-eslint/quotes */
-import { html } from 'htm/preact';
-import AppContext from '@/contexts/AppContext';
-import { useEffect, useContext, useState } from 'preact/hooks';
-import { Hint } from '@/components/Tooltip';
-import { Loader } from '@/components/Loader';
-
-import { Instance } from '@/interfaces';
-import { CollapsedMenu } from '@/components/CollapsedMenu';
-import { EditableText } from '@/components/EditableText';
-import { Toggle } from '@/components/Toggle-v2';
-import { Tag } from '@/components/Tag';
-
-import { convertDateToStandard } from '@/utils/datetime';
-
-import styles from './styles.module.scss';
-
-interface FlowInstanceRowProps {
-  instance: Instance;
-  onEditInstance: (instance: Instance) => void;
-  onDelete?: (instance: Instance) => void;
-  isSingleInstance?: boolean;
-}
-interface FlowInstanceProps {
-  instances: Instance[];
-  onEditInstance: FlowInstanceRowProps['onEditInstance'];
-  onDelete: FlowInstanceRowProps['onDelete'];
-  updateInstanceName: (instanceId: number, name: string) => void;
-}
-
-export const MenuIcon = () =>
-  html`<svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11Z"
-      fill="#999999"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M9.5 11C10.3284 11 11 10.3284 11 9.5C11 8.67157 10.3284 8 9.5 8C8.67157 8 8 8.67157 8 9.5C8 10.3284 8.67157 11 9.5 11Z"
-      fill="#999999"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z"
-      fill="#999999"
-    />
-  </svg>`;
-
-export const InstanceBlockedInfo = (props: { instance: Instance }) => {
-  const {
-    error_app_name,
-    first_error_received_at,
-    status,
-    usage_limit_reached_at,
-    error_code,
-  } = props.instance;
-
-  const convertedTime = first_error_received_at
-    ? convertDateToStandard(first_error_received_at)
-    : '';
-
-  const getBlockedReason = () => {
-    switch (status) {
-      case 'AUTH_MISSING':
-        // return `Authentication failed. Try to re-authenticate your account and enable the instance.`;
-        return `Integration has been blocked because\nof failed authentication. User needs to\nre-authenticate their account and enable\nthe integration.`;
-      case 'BLOCKED':
-        if (usage_limit_reached_at) {
-          return `Integration has been blocked because\nthe user limit has been reached`;
-          return `User limit is reached`;
-        }
-        if (error_code >= 500 && error_code <= 599) {
-          return `Integration has been blocked because\nof too many server errors`;
-          return error_app_name && convertedTime
-            ? `Too many server errors from ${error_app_name} since ${convertedTime}. \nYou can try enabling the instance.`
-            : `Too many server errors. You can try enabling the instance.`;
-        }
-        if (error_code >= 400 && error_code <= 499) {
-          return `Integration has been blocked because of too many data errors`;
-          return error_app_name && convertedTime
-            ? `Too many errors from ${error_app_name} since ${convertedTime} \ndue to a configuration issue. Try creating a new instance.`
-            : `Too many errors due to a configuration issue. Try create a new instance.`;
-        }
-        return '';
-      default:
-        return '';
-    }
-  };
-  const blockedReason = getBlockedReason();
-  return blockedReason
-    ? html`<${Hint}
-        dismissOnClick=${false}
-        deltaY=${12}
-        position="fixed"
-        style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;"
-      >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            data-hint="${blockedReason}"
-            d="M0 12C0 18.6268 5.37184 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37322 18.6282 3.05176e-05 12 3.05176e-05C5.37319 3.05176e-05 0 5.37187 0 12Z"
-            fill="#F05C42"
-          />
-          <path
-            d="M13.185 16.9089C13.185 15.3294 10.8164 15.3294 10.8164 16.9089C10.8164 18.4884 13.185 18.4884 13.185 16.9089Z"
-            fill="white"
-          />
-          <path
-            d="M11.1582 13.2688C11.1582 13.7326 11.5342 14.1087 11.9981 14.1087V14.1087C12.462 14.1087 12.838 13.7326 12.838 13.2688V6.74489C12.838 6.28101 12.462 5.90497 11.9981 5.90497V5.90497C11.5342 5.90497 11.1582 6.28102 11.1582 6.74489V13.2688Z"
-            fill="white"
-          />
-        </svg>
-      <//>`
-    : '';
-};
-
-export const InstanceStatusPill = (props: {
-  instance: Instance;
-  flowType: 'ON_DEMAND' | 'AUTOMATIC';
-  executionBehaviour: 'SAVE_ONLY' | 'SAVE_AND_EXECUTE';
-}) => {
-  const {
-    instance,
-    flowType = 'AUTOMATIC',
-    executionBehaviour = 'SAVE_AND_EXECUTE',
-  } = props;
-  const {
-    last_run_status = null,
-    last_run_start_time = null,
-    status,
-  } = instance;
-  const getTagData = () => {
-    if (!last_run_status && !last_run_start_time && status === 'ACTIVE') {
-      return {
-        type: 'grey',
-        label:
-          flowType === 'ON_DEMAND' && executionBehaviour === 'SAVE_AND_EXECUTE'
-            ? 'Queued'
-            : // : "Hasn't Run",
-              '',
-      };
-    }
-    switch (last_run_status) {
-      case 'failed':
-        return {
-          type: 'fail',
-          label: 'Aborted',
-        };
-      case 'running...':
-        return {
-          type: 'info',
-          label: 'Running...',
-        };
-      case 'running':
-        return {
-          type: 'info',
-          label: 'Running...',
-        };
-      case 'ok':
-        return {
-          type: 'success',
-          label: 'Completed',
-        };
-      default:
-        return null;
-    }
-  };
-
-  const tagData = getTagData();
-  if (tagData?.label === '') return html``;
-  return tagData
-    ? html`<${Tag}
-        type="${tagData.type}"
-        label="${tagData.label}"
-        className="flow-instance"
-      />`
-    : '';
-};
-
-export const FlowInstanceRow = (props: FlowInstanceRowProps) => {
-  const {
-    instance,
-    onEditInstance,
-    onDelete,
-    isSingleInstance = false,
-  } = props;
-  const context = useContext(AppContext);
-  const [instanceStatus, setInstanceStatus] = useState<Instance['status']>(
-    instance.status,
-  );
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  useEffect(() => {
-    setInstanceStatus(instance.status);
-  }, [instance.status]);
-
-  const toggleIntegration = (instanceId: number, value: boolean) => {
-    setInstanceStatus(value ? 'ACTIVE' : 'INACTIVE'); // optimistic update
-    context?.apiHandler
-      .toggleIntegration(instanceId, value)
-      .catch((err: unknown) => {
-        console.error(err);
-        setInstanceStatus(instance.status);
-      })
-      .finally(() => {
-        const eventName = value
-          ? 'did-enable-integration'
-          : 'did-disable-integration';
-        context.eventEmitter.emit(eventName, {
-          integrationId: instance.id,
-          name: instance.name,
-          status: value ? 'ACTIVE' : 'INACTIVE',
-        });
-      });
-  };
-  const handleOptionSelect = (
-    option: { id: string; label: string },
-    selectedInstance: Instance,
-  ) => {
-    switch (option.id) {
-      case 'edit':
-        onEditInstance(selectedInstance);
-        break;
-      case 'delete':
-        setIsDeleting(true);
-        if (onDelete) onDelete(selectedInstance);
-        break;
-      default:
-        break;
-    }
-  };
-
-  return html`
-    <div class="${styles.flowInstanceColumn} ${styles.instanceRunTime}">
-      ${instance.last_run_start_time
-        ? convertDateToStandard(instance.last_run_start_time)
-        : 'No runs as yet'}
-    </div>
-    <div class="${styles.flowInstanceColumn}">
-      ${html`<${InstanceStatusPill} instance=${instance} />`}
-    </div>
-    <div
-      class="${styles.flowInstanceColumn} ${styles.instanceStatus}"
-      style="${isSingleInstance ? 'margin-right: 0;' : ''}"
-    >
-      ${instanceStatus === 'BLOCKED'
-        ? html`<${InstanceBlockedInfo} instance=${instance} />`
-        : ''}
-      ${html`<${Toggle}
-        id=${instance.id}
-        value=${isDeleting ? false : instanceStatus === 'ACTIVE'}
-        disabled=${isDeleting}
-        onChange=${(value: boolean) => {
-          if (!isDeleting) {
-            toggleIntegration(instance.id, value);
-          }
-        }}
-      />`}
-    </div>
-    <div
-      class="${styles.flowInstanceColumn}"
-      style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;"
-    >
-      ${isDeleting
-        ? html`<${Loader} />`
-        : html` <${CollapsedMenu}
-            verticalIcon=${true}
-            icon=${MenuIcon}
-            className="instanceMenu"
-            options=${[
-              {
-                id: 'edit',
-                label: 'Edit',
-              },
-              ...(onDelete
-                ? [
-                    {
-                      id: 'delete',
-                      label: 'Delete',
-                    },
-                  ]
-                : []),
-            ]}
-            onOptionSelect=${(option: { id: string; label: string }) =>
-              handleOptionSelect(option, instance)}
-          />`}
-    </div>
-  `;
-};
-
-const FlowInstance = (props: FlowInstanceProps) => {
-  const { instances, onEditInstance, updateInstanceName, onDelete } = props;
-  const context = useContext(AppContext);
-
-  const onUpdateName = (instanceId: number, name: string) => {
-    const oldName =
-      instances.find((instance) => instance.id === instanceId)?.name || '';
-    updateInstanceName(instanceId, name);
-    context?.apiHandler
-      .renameIntegration(`${instanceId}`, name)
-      .then((integrationData) => {
-        if (!integrationData) {
-          updateInstanceName(instanceId, oldName);
-          throw new Error('Could not update integration name');
-        } else {
-          context.eventEmitter.emit('did-rename-integration', {
-            integrationId: instanceId,
-            name,
-            status: integrationData.status,
-          });
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-        updateInstanceName(instanceId, oldName);
-      });
-  };
-  return html`
-    <div class="${styles.flowInstanceContainer}">
-      <div class="${styles.flowInstanceTitleRow} ">
-        <div class="${styles.flowInstanceTitleColumn}">Integration</div>
-        <div class="${styles.flowInstanceTitleColumn}">Last run start</div>
-      </div>
-      ${instances.map(
-        (instance) => html`
-          <div
-            class="${styles.flowInstanceRow}"
-            key=${`instance-id-flow-row-${instance.id}`}
-          >
-            <${EditableText}
-              value=${instance.name}
-              handleChange=${(name: string) => onUpdateName(instance.id, name)}
-              wrapperClassName=${styles.editableTextWrapper}
-              customStyles=${{
-                wrapperClassName: styles.editableTextWrapper,
-                inputClassName: styles.inlineEditInput,
-              }}
-            />
-            <${FlowInstanceRow}
-              instance=${instance}
-              onEditInstance=${onEditInstance}
-              onDelete=${onDelete}
-            />
-          </div>
-        `,
-      )}
-    </div>
-  `;
-};
-
-export default FlowInstance;

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

@@ -1,58 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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';
-import { StoreType } from '@/types/store';
-import { UserConfig } from '@/interfaces';
-
-import styles from './styles.module.scss';
-import FlowInstance, {
-  FlowInstanceRow,
-  InstanceStatusPill,
-  InstanceBlockedInfo,
-} from './flow-instance';
-
-interface Props {
-  flow: Flow;
-  flowIcon?: string;
-  accountVerified: boolean;
-  userConfig?: UserConfig;
-  onFlowSelect: (flow: Flow, instance?: Instance) => void;
-  onDeleteInstance?: (instanceId: number) => void;
-  updateInstanceName: (
-    flowId: number,
-    instanceId: number,
-    name: string,
-  ) => void;
-}
-
-const FlowCard = ({
-  flow,
-  flowIcon,
-  accountVerified,
-  onFlowSelect,
-  updateInstanceName,
-  onDeleteInstance,
-  userConfig,
-}: Props) => {
-  const showFlowLastRunTime = () =>
-    flow.execution_type === 'ON_DEMAND' &&
-    !flow.allow_multiple_instances &&
-    flow.instances.length > 0;
-
-  const showFooter = () =>
-    flow.execution_type === 'ON_DEMAND' ||
-    (flow.execution_type === 'AUTOMATIC' && flow.allow_multiple_instances) ||
-    (flow.execution_type === 'AUTOMATIC' &&
-      !flow.allow_multiple_instances &&
-      flow.instances.length === 0);
-
-  const disabledButtonTooltip = () =>
-    flow.execution_type === 'ON_DEMAND'
-      ? 'Please connect your account to setup and run this flow'
-      : 'Please connect your account to setup and enable this flow';
-
-  const getButtonLabel = () => {
-    if (flow.button_text) {
-      return flow.button_text;
-    }
-    if (
-      flow.execution_type === 'ON_DEMAND' &&
-      flow.execution_behaviour === 'SAVE_AND_EXECUTE'
-    ) {
-      return 'Setup and run';
-    }
-    if (
-      flow.execution_type === 'ON_DEMAND' &&
-      flow.execution_behaviour === 'SAVE_ONLY'
-    ) {
-      return 'Setup';
-    }
-    if (flow.execution_type === 'AUTOMATIC' && flow.allow_multiple_instances) {
-      return flow.instances.length > 0 && !userConfig?.hideExistingIntegrations
-        ? 'Setup another'
-        : 'Setup and enable';
-    }
-    return 'Setup and enable';
-  };
-
-  const handleFlowSelect = () => {
-    const latestInstance =
-      flow?.instances.length > 0 ? flow?.instances[0] : undefined;
-    /*   if (flow.execution_type === 'ON_DEMAND') {
-      onFlowSelect(flow, latestInstance);
-    } else if (flow.execution_type === 'AUTOMATIC') { */
-    if (flow.allow_multiple_instances) {
-      onFlowSelect(flow);
-    } else {
-      onFlowSelect(flow, latestInstance);
-    }
-  };
-
-  return html`<div class="${styles.flowCard}">
-    <div class="${styles.flowInfo}">
-      ${flowIcon
-        ? html` <${Hint}
-            dismissOnClick=${false}
-            position="top"
-            deltaY=${0}
-            hideArrow=${true}
-          >
-            <div class="${styles.flowIcon}">
-              <img
-                data-hint="${flow.branding_app?.name}"
-                src=${flowIcon}
-                alt=${flow.name}
-              />
-            </div>
-          <//>`
-        : ''}
-      <div>
-        <div class="${styles.flowName}">
-          ${flow.name}
-          ${flow.version_number &&
-          html`<span class=${styles.flowVersion}
-            >v${flow.version_number}</span
-          >`}
-        </div>
-        ${flow.description
-          ? html`<div class="${styles.flowDescription}">
-              ${flow.description}
-            </div>`
-          : ''}
-      </div>
-    </div>
-    ${flow.execution_type === 'AUTOMATIC' &&
-    flow.allow_multiple_instances &&
-    flow.instances?.length > 0 &&
-    !userConfig?.hideExistingIntegrations &&
-    html`<${FlowInstance}
-      instances=${flow.instances}
-      updateInstanceName=${(instanceId: number, name: string) =>
-        updateInstanceName(flow.id, instanceId, name)}
-      onEditInstance=${(instance: Instance) => onFlowSelect(flow, instance)}
-      onDelete=${onDeleteInstance}
-    />`}
-    ${flow.execution_type === 'AUTOMATIC' &&
-    !flow.allow_multiple_instances &&
-    flow.instances?.length > 0 &&
-    html`<div class="${styles.singleFlowInstanceRow}">
-      <div class="${styles.flowInstanceColumn}">Last run:</div>
-      <${FlowInstanceRow}
-        isSingleInstance=${true}
-        instance=${flow.instances[0]}
-        onEditInstance=${(instance: Instance) => onFlowSelect(flow, instance)}
-        onDelete=${onDeleteInstance}
-      />
-    </div> `}
-    ${showFooter() &&
-    html`<div class="${styles.flowCardFooter}">
-      ${html`
-        <${Hint}
-          dismissOnClick=${false}
-          position="top"
-          deltaY=${0}
-          hideArrow=${true}
-          disabled=${accountVerified}
-        >
-          ${!accountVerified &&
-          html`<span
-            class=${styles.readonlyHint}
-            data-hint=${disabledButtonTooltip()}
-          ></span>`}
-          ${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() &&
-      html`<div class="${styles.flowStatus}">
-        <div>
-          Last run:${' '}
-          ${flow.instances[0]?.last_run_start_time
-            ? convertDateToStandard(flow.instances[0]?.last_run_start_time)
-            : // : 'Never'}
-              'No runs as yet'}
-        </div>
-        <${InstanceStatusPill}
-          instance=${{
-            ...flow.instances[0],
-          }}
-          flowType="ON_DEMAND"
-          executionBehaviour=${flow.execution_behaviour}
-        />
-        <div class=${styles.blockedInfo}>
-          <${InstanceBlockedInfo} instance=${flow.instances[0]} />
-        </div>
-      </div>`}
-    </div>`}
-  </div>`;
-};
-export default connect<Props, unknown, StoreType, unknown>(
-  ['userConfig'],
-  actionFunctions,
-)(FlowCard);

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

@@ -1,49 +0,0 @@
-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();
-  });
-});