@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,421 +0,0 @@
-/* eslint-disable no-nested-ternary */
-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 './compactStyles.module.scss';
-import FlowInstance, {
-  FlowInstanceRow,
-  InstanceStatusCompactPill,
-  InstanceBlockedInfo,
-} from './flowInstanceCompact';
-
-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;
-  customStyle?: string;
-}
-
-const FlowCardCompact = ({
-  flow,
-  flowIcon,
-  accountVerified,
-  onFlowSelect,
-  updateInstanceName,
-  onDeleteInstance,
-  customStyle = '',
-  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.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';
-  };
-
-  enum FLOW_TYPE {
-    ON_DEMAND_NOW = 'ON_DEMAND_NOW',
-    ON_DEMAND_LATER = 'ON_DEMAND_LATER',
-    AUTOMATIC_SINGLE = 'AUTOMATIC_SINGLE',
-    AUTOMATIC_MULTIPLE = 'AUTOMATIC_MULTIPLE',
-  }
-
-  const getFlowType = (): string => {
-    if (
-      flow.execution_type === 'ON_DEMAND' &&
-      flow.execution_behaviour === 'SAVE_AND_EXECUTE'
-    ) {
-      return FLOW_TYPE.ON_DEMAND_NOW;
-    }
-    if (
-      flow.execution_type === 'ON_DEMAND' &&
-      flow.execution_behaviour === 'SAVE_ONLY'
-    ) {
-      return FLOW_TYPE.ON_DEMAND_LATER;
-    }
-    if (flow.execution_type === 'AUTOMATIC' && flow.allow_multiple_instances) {
-      return FLOW_TYPE.AUTOMATIC_MULTIPLE;
-    }
-    return FLOW_TYPE.AUTOMATIC_SINGLE;
-  };
-
-  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);
-    }
-  };
-
-  const getFlowDescription = (): string => {
-    let description = '';
-    switch (flow.execution_type) {
-      case 'AUTOMATIC':
-        if (flow.instances?.length > 0) {
-          if (!flow.allow_multiple_instances) {
-            const instance = flow.instances[0];
-            description = `${
-              instance.last_run_start_time
-                ? convertDateToStandard(instance.last_run_start_time)
-                : `No runs as yet`
-            }`;
-          } else {
-            description = `${flow.instances.length} integrations`;
-          }
-        } else {
-          description = flow.description ? flow.description : '';
-        }
-        break;
-      default:
-        description = flow.description ? flow.description : '';
-        break;
-    }
-    if (description === '') {
-      return ``;
-    }
-    return description;
-  };
-
-  const renderFlowName = () => {
-    const flowType = getFlowType();
-
-    const dataHintForTooltip = `${flow.name}|${
-      flow.description ? flow.description : ''
-    }`;
-    switch (flowType) {
-      case FLOW_TYPE.ON_DEMAND_NOW:
-        if (showFlowLastRunTime()) {
-          return html` <div
-              data-hint=${dataHintForTooltip}
-              class="${styles.flowName}"
-            >
-              ${flow.name}
-              ${flow.version_number &&
-              html`<span class=${styles.flowVersion}
-                >v${flow.version_number}</span
-              >`}
-            </div>
-            <div
-              class=${styles.flowInstanceRowMeta}
-              style="margin-bottom: -1px;"
-            >
-              <${FlowInstanceRow}
-                isCompact=${true}
-                instance=${flow.instances[0]}
-                hideContextMenu=${true}
-                hideIntegrationToggle=${true}
-                hideInfoIcon=${true}
-              />
-            </div>`;
-        }
-        return html` <div
-            data-hint=${dataHintForTooltip}
-            class="${styles.flowName}"
-          >
-            ${flow.name}
-            ${flow.version_number &&
-            html`<span class=${styles.flowVersion}
-              >v${flow.version_number}</span
-            >`}
-          </div>
-          ${getFlowDescription()
-            ? html`<div class="${styles.flowDescription}">
-                ${getFlowDescription()}
-              </div>`
-            : ''}`;
-      case FLOW_TYPE.ON_DEMAND_LATER:
-        return html` <div
-            data-hint=${dataHintForTooltip}
-            class="${styles.flowName}"
-          >
-            ${flow.name}
-            ${flow.version_number &&
-            html`<span class=${styles.flowVersion}
-              >v${flow.version_number}</span
-            >`}
-          </div>
-          ${getFlowDescription()
-            ? html`<div class="${styles.flowDescription}">
-                ${getFlowDescription()}
-              </div>`
-            : ''}`;
-      case FLOW_TYPE.AUTOMATIC_SINGLE:
-        return html` <div
-            data-hint=${dataHintForTooltip}
-            class="${styles.flowName}"
-            style="${flow.instances?.length > 0 ? '' : ''}"
-          >
-            ${flow.name}
-            ${flow.version_number &&
-            html`<span class=${styles.flowVersion}
-              >v${flow.version_number}</span
-            >`}
-          </div>
-          ${flow.instances?.length > 0
-            ? html`
-                <div
-                  class=${styles.flowInstanceRowMeta}
-                  style="margin-bottom: -1px;"
-                >
-                  <${FlowInstanceRow}
-                    isCompact=${true}
-                    instance=${flow.instances[0]}
-                    onEditInstance=${(instance: Instance) =>
-                      onFlowSelect(flow, instance)}
-                    onDelete=${onDeleteInstance}
-                  />
-                </div>
-              `
-            : getFlowDescription()
-            ? html`<div class="${styles.flowDescription}">
-                ${getFlowDescription()}
-              </div>`
-            : ''}`;
-      case FLOW_TYPE.AUTOMATIC_MULTIPLE:
-        return html` <div
-            data-hint=${dataHintForTooltip}
-            class="${styles.flowName}"
-          >
-            ${flow.name}
-            ${flow.version_number &&
-            html`<span class=${styles.flowVersion}
-              >v${flow.version_number}</span
-            >`}
-          </div>
-          ${getFlowDescription()
-            ? html`<div class="${styles.flowDescription}">
-                ${getFlowDescription()}
-              </div>`
-            : ''}`;
-      default:
-        return html` <div
-            data-hint=${dataHintForTooltip}
-            class="${styles.flowName}"
-          >
-            ${flow.name}
-            ${flow.version_number &&
-            html`<span class=${styles.flowVersion}
-              >v${flow.version_number}</span
-            >`}
-          </div>
-          ${getFlowDescription()
-            ? html`<div class="${styles.flowDescription}">
-                ${getFlowDescription()}
-              </div>`
-            : ''}`;
-    }
-  };
-
-  return html` <div class="${styles.flowCard}" style="${customStyle}">
-    <div
-      class="${styles.flowInfo} ${flow.execution_type === 'AUTOMATIC' &&
-      flow.allow_multiple_instances &&
-      flow.instances?.length > 0
-        ? styles.forceNoHover
-        : ''}"
-      onClick=${() => {
-        handleFlowSelect();
-      }}
-    >
-      ${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>
-          <//>`
-        : ''}
-      <!--<${Hint}
-          dismissOnClick=${false}
-          position="fixed"
-          deltaY=${0}
-          style=${`width: 100%;`}
-          template=${(content: string) => {
-        const splitContent = content.split('|');
-        const name = splitContent[0] || '';
-        // const description = splitContent[1] || '';
-        const words = (splitContent[1] || '').split(' ');
-        const chunks = [];
-        const chunkSize = 10;
-        for (let i = 0; i < words.length; i += chunkSize) {
-          const chunk = words.slice(i, i + chunkSize).join(' ');
-          chunks.push(chunk);
-        }
-        return html`<div class="${styles.flowInfoTooltip}">
-          <div class="${styles.flowNameTooltip}">${name}</div>
-          ${chunks.map(
-            (chunk) => html`<p class="${styles.flowDescriptionTooltip}">
-              ${chunk}
-            </p>`,
-          )}
-        </div>`;
-      }}
-        >
-        ${renderFlowName()}
-      <//>-->
-      <div style="flex: 1;">${renderFlowName()}</div>
-    </div>
-    ${flow.execution_type === 'AUTOMATIC' &&
-    flow.allow_multiple_instances &&
-    flow.instances?.length > 0 &&
-    !userConfig?.hideExistingIntegrations &&
-    html`<${FlowInstance}
-      isCompact=${true}
-      instances=${flow.instances}
-      updateInstanceName=${(instanceId: number, name: string) =>
-        updateInstanceName(flow.id, instanceId, name)}
-      onEditInstance=${(instance: Instance) => onFlowSelect(flow, instance)}
-      onDelete=${onDeleteInstance}
-    />`}
-    ${false &&
-    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}
-        instance=${flow.instances[0]}
-        onEditInstance=${(instance: Instance) => onFlowSelect(flow, instance)}
-        onDelete=${onDeleteInstance}
-        isCompact=${true}
-      />
-    </div> `}
-    ${false &&
-    showFooter() &&
-    html`<div class="${styles.flowCardFooter}">
-      ${false &&
-      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)
-            : 'No runs as yet'}
-        </div>
-        <${InstanceStatusCompactPill}
-          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,
-)(FlowCardCompact);