@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,367 @@
+/* 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.tsx

@@ -0,0 +1,194 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { Button, ButtonTypes } from '@/components/Button';
+import { Hint } from '@/components/Tooltip';
+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}</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>`}
+          <${Button}
+            label=${getButtonLabel()}
+            type=${ButtonTypes.PRIMARY}
+            onClick=${() => handleFlowSelect()}
+            disabled=${!accountVerified}
+          />
+        <//>
+      `}
+      ${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);