@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,389 @@
+/* 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 { 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}
+            </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}
+          </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}
+          </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}
+          </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}
+          </div>
+          ${getFlowDescription()
+            ? html`<div class="${styles.flowDescription}">
+                ${getFlowDescription()}
+              </div>`
+            : ''}`;
+      default:
+        return html` <div
+            data-hint=${dataHintForTooltip}
+            class="${styles.flowName}"
+          >
+            ${flow.name}
+          </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>`}
+          <${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)
+            : '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);