@integry/sdk 4.5.2 → 4.5.4

package/src/features/integrations/IntegrationRow/index.ts

@@ -0,0 +1,129 @@
+import { html } from 'htm/preact';
+import { timeAgo } from '@/utils/datetime';
+import { Toggle } from '@/components/Toggle';
+
+import { Hint } from '@/components/Tooltip';
+import { CollapsedMenu } from '@/components/CollapsedMenu';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+import { EditableText } from '@/components/EditableText';
+import { Success, Fail } from './Icons';
+
+import styles from './styles.module.scss';
+
+interface IntegrationRowProps {
+  id: number;
+  name: string;
+  appName: string;
+  iconUrl: string;
+  activityStatus: string;
+  executionStatus: 'success' | 'fail';
+  runs: number;
+  lastExecutionAt: string;
+  executionTimezone: string;
+  loading?: boolean;
+  onEdit(): void;
+  onEditName?(newName: string): void;
+  onDelete(): void;
+  onToggle(integrationId: number, activate: boolean): void;
+}
+
+const IntegrationRow = (props: IntegrationRowProps) => {
+  const {
+    id,
+    name,
+    appName,
+    iconUrl,
+    executionStatus,
+    activityStatus,
+    runs,
+    lastExecutionAt,
+    loading = false,
+    onEdit,
+    onDelete,
+    onToggle,
+    onEditName,
+  } = props;
+
+  const handleOptionSelect = (option: { id: string; label: string }) => {
+    switch (option.id) {
+      case 'edit':
+        onEdit();
+        break;
+      case 'delete':
+        onDelete();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return html`
+    <div class="${styles.integrationRow} integry-container__integration-row">
+      <div class=${styles.left}>
+        <div class=${styles.executionStatus}>
+          ${executionStatus === 'fail'
+            ? html`<${Fail} />`
+            : html`<${Success} />`}
+        </div>
+        <${Hint} dismissOnClick=${false} position="bottom" deltaY=${4}>
+          <div class=${styles.logoContainer}>
+            <img
+              src=${iconUrl}
+              alt="logo"
+              data-hint=${appName}
+              class=${styles.logo}
+            />
+          </div>
+        <//>
+        <div class=${styles.name}>
+          <${EditableText} value=${name} handleChange=${onEditName} //>
+        </div>
+      </div>
+      <div class=${styles.right}>
+        <div class=${styles.runs}>${runs > 0 ? runs : 0}</div>
+        <div class=${styles.date}>
+          <div
+            data-hint=${lastExecutionAt
+              ? new Date(`${lastExecutionAt}+00:00`).toLocaleString()
+              : null}
+          >
+            ${lastExecutionAt
+              ? timeAgo(new Date(`${lastExecutionAt}+00:00`))
+              : 'Never run'}
+          </div>
+        </div>
+        ${loading
+          ? html`<div class=${styles.loader}>
+              <${ThreeDotLoader} color="#999" />
+            </div>`
+          : html`
+                <div class=${styles.controls}>
+                  <${Toggle} id=${id} value=${activityStatus === 'ACTIVE'}
+                    onChange=${(val: boolean) => onToggle(id, val)}
+                  <//>
+                  <div>
+                    <${CollapsedMenu}
+                      options=${[
+                        {
+                          id: 'edit',
+                          label: 'Edit',
+                        },
+                        {
+                          id: 'delete',
+                          label: 'Delete',
+                        },
+                      ]}
+                      onOptionSelect=${(option: {
+                        id: string;
+                        label: string;
+                      }) => handleOptionSelect(option)}
+                    />
+                  </div>
+                </div>
+              `}
+      </div>
+    </div>
+  `;
+};
+
+export { IntegrationRow };

package/src/features/integrations/IntegrationRow/styles.module.scss

@@ -0,0 +1,62 @@
+.integrationRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 0;
+  font-size: 14px;
+  &:hover {
+    background-color: #f9f9f9;
+  }
+  .left,
+  .right,
+  .controls {
+    display: flex;
+    align-items: center;
+  }
+  .left {
+    width: 60%;
+    .executionStatus {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+    }
+    .logoContainer {
+      display: flex;
+    }
+    .name {
+      display: flex;
+      align-items: center;
+      flex: 1 0;
+      line-height: 22px;
+      margin: 0 8px;
+      color: #333;
+      font-weight: 500;
+    }
+    .logo {
+      padding: 8px;
+      width: 38px;
+      height: 38px;
+      object-fit: contain;
+    }
+  }
+  .right {
+    width: 40%;
+    color: #666;
+    .runs {
+      flex: 1;
+      text-align: start;
+    }
+    .date {
+      width: 45%;
+      & > div {
+        display: inline-block;
+        cursor: default;
+      }
+    }
+    .controls,
+    .loader {
+      justify-content: end;
+      width: 80px;
+    }
+  }
+}

package/src/features/integrations/IntegrationsHeader/index.ts

@@ -0,0 +1,34 @@
+import { html } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+const IntegrationsHeader = (props: { onRefetch: () => void }) => {
+  const { onRefetch } = props;
+  return html`
+    <div
+      class="${styles.integrationsHeader} integry-container__integrations-view__header"
+    >
+      <div class=${styles.left}>
+        <div>Status</div>
+      </div>
+      <div class=${styles.right}>
+        <div>Runs</div>
+        <div>Last execution at</div>
+        <div class=${styles.refresh} onclick=${onRefetch}>
+          <svg class=${styles.refreshIcon} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_4202_23387)">
+            <path d="M4.07367 13.4671L4.45305 12.5511C5.93583 13.1653 7.56903 13.1653 9.05181 12.5511C10.5346 11.937 11.6894 10.7821 12.3036 9.29935C13.5715 6.23832 12.1127 2.71663 9.05181 1.44879C6.22912 0.279561 3.01452 1.42913 1.53697 4.01563L4.01521 4.01563V5.00703L0.248047 5.00703L0.248047 1.23987L1.23945 1.23987L1.23945 2.68583C3.12854 0.273414 6.46543 -0.695616 9.43125 0.532831C12.1242 1.64829 13.7527 4.26071 13.7525 7.00907C13.7524 7.90001 13.5812 8.80573 13.2196 9.67872C11.7425 13.2447 7.63965 14.9442 4.07367 13.4671Z" fill="black"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_4202_23387">
+            <rect width="14" height="14" fill="white" transform="matrix(0 1 1 0 0 0)"/>
+            </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+export { IntegrationsHeader };

package/src/features/integrations/IntegrationsHeader/styles.module.scss

@@ -0,0 +1,47 @@
+.integrationsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #333;
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  .left {
+    width: 60%;
+    & div:first-child {
+      width: 50px;
+      padding-left: 14px;
+      text-align: center;
+    }
+    & div:nth-child(2) {
+      width: 80px;
+    }
+  }
+  .right {
+    width: 40%;
+    & div:first-child {
+      flex: 1;
+      text-align: start;
+    }
+    & div:nth-child(2) {
+      width: 45%;
+    }
+    & div:nth-child(3) {
+      width: 80px;
+      padding-right: 14px;
+    }
+  }
+  .refresh {
+    cursor: pointer;
+  }
+  .refreshIcon {
+    // right: 18px;
+    position: relative;
+    float: right;
+  }
+}

package/src/features/integrations/IntegrationsList/index.ts

@@ -0,0 +1,252 @@
+import { html, Component } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import fuzzysort from 'fuzzysort';
+
+import { BundleResponse, Integration } from '@/interfaces';
+import { IntegryAPI } from '@/modules/api';
+import { StoreType } from '@/types/store';
+import { Loader } from '@/components/Loader';
+import { Search } from '@/components/Search';
+import { actionFunctions } from '@/store';
+import { TemplateFormRenderModes } from '@/types';
+import AppContext from '@/contexts/AppContext';
+
+import { IntegrationRow } from '../IntegrationRow';
+import { IntegrationsHeader } from '../IntegrationsHeader';
+
+import style from './styles.module.scss';
+
+type Props = {
+  integrations: Integration[];
+  apiHandler: IntegryAPI;
+  renderMode: TemplateFormRenderModes;
+} & StoreType;
+
+type State = {
+  query: string;
+  filteredIntegrations: Integration[];
+};
+
+class IntegrationsList extends Component<Props, State> {
+  static contextType = AppContext;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      query: '',
+      filteredIntegrations: props.integrations,
+    };
+  }
+
+  componentDidUpdate(previousProps: Readonly<Props>): void {
+    if (previousProps.integrations !== this.props.integrations) {
+      this.setState({ filteredIntegrations: this.props.integrations });
+      if (this.state.query) {
+        // user search query is still active, so we need to re-filter
+        this.filterIntegrations(this.state.query);
+      }
+    }
+  }
+
+  private toggleIntegration = (integrationId: number, activate: boolean) => {
+    this.props.setIntegrationLoadingState({
+      integrationId,
+      isLoading: true,
+      op: 'edit',
+    });
+    this.props.apiHandler
+      .toggleIntegration(integrationId, activate)
+      .then(() => {
+        this.props.setIntegrationLoadingState({
+          integrationId,
+          isLoading: false,
+          nextVal: activate,
+          op: 'edit',
+        });
+      })
+      .catch((err) => console.error(err))
+      .finally(() => {
+        this.props.setIntegrationLoadingState({
+          integrationId,
+          isLoading: false,
+          op: 'edit',
+        });
+      });
+  };
+
+  private refetchIntegrations = () => {
+    if (this.props.genericData.deploymentId) {
+      this.props.setStoreState({
+        fetchingIntegrations: true,
+      });
+      this.context.apiHandler
+        .getTemplateListing(this.props.genericData.deploymentId)
+        .then((res: BundleResponse) => {
+          this.props.setStoreState({
+            integrations: res?.integrations,
+            fetchingIntegrations: false,
+          });
+        });
+    }
+  };
+
+  private onIntegrationDelete = (integration: Integration) => {
+    const {
+      id: integrationId,
+      name: integrationName,
+      template_detail,
+    } = integration;
+    this.props.setIntegrationLoadingState({
+      integrationId,
+      isLoading: true,
+      op: 'edit',
+    });
+    this.props.apiHandler
+      .deleteIntegration(integrationId)
+      .then((res) => {
+        console.info(res);
+        this.props.setIntegrationLoadingState({
+          integrationId,
+          isLoading: false,
+          op: 'delete',
+        });
+        this.context.eventEmitter.emit('did-delete-integration', {
+          flowId: template_detail.id,
+          flowName: template_detail.name,
+          flowDescription: template_detail.description,
+          integrationId,
+          integrationName,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  private onUpdateName = (integration: Integration, name: string) => {
+    this.props.setIntegrationLoadingState({
+      integrationId: integration.id,
+      isLoading: true,
+      op: 'edit-name',
+      updatedName: name,
+    });
+    this.props.apiHandler
+      .renameIntegration(`${integration.id}`, name)
+      .then((integrationData) => {
+        if (integrationData) {
+          this.props.setIntegrationLoadingState({
+            integrationId: integration.id,
+            isLoading: false,
+            op: 'edit',
+          });
+        } else {
+          throw new Error('Could not update integration name');
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  private onIntegrationEdit = (integration: Integration) => {
+    const { renderMode } = this.props;
+    this.props.setStoreState({
+      ...{
+        integrationIdToEdit: integration.id,
+        genericData: {
+          ...this.props.genericData,
+          brandingApp: null,
+          templateId: integration.template,
+        },
+      },
+      ...(renderMode === TemplateFormRenderModes.MODAL && {
+        showSetupModal: true,
+      }),
+      ...(renderMode === TemplateFormRenderModes.INLINE && {
+        showSetupInline: true,
+      }),
+    });
+  };
+
+  private filterIntegrations = (query: string) => {
+    if (query) {
+      this.setState({
+        query,
+        filteredIntegrations: fuzzysort
+          .go(query, this.props.integrations, {
+            keys: ['name', 'branding_app.tags'],
+            scoreFn: (keysResult) => {
+              const nameResult = keysResult[0];
+              const tagsResult = keysResult[1];
+              // assign higher score to name result
+              const score = Math.max(
+                nameResult ? nameResult.score + 100 : -Infinity,
+                tagsResult ? tagsResult.score : -Infinity,
+              );
+              return score;
+            },
+          })
+          .map((el) => el.obj),
+      });
+    } else {
+      this.setState({
+        filteredIntegrations: this.props.integrations,
+        query: '',
+      });
+    }
+  };
+
+  render() {
+    return html`
+      ${this.props.fetchingIntegrations
+        ? html`<div class=${style.loader}><${Loader}/ ></div>`
+        : html`
+            <div class="integry-container__integrations-view">
+              ${this.props.integrations.length > 0 &&
+              html`
+                <div class=${style.search}>
+                  <${Search}
+                    resultCount=${this.state.filteredIntegrations.length}
+                    onChange=${(val: string) => this.filterIntegrations(val)}
+                  >
+                  <//>
+                </div>
+                <${IntegrationsHeader} onRefetch=${this.refetchIntegrations} />
+              `}
+              <div class=${style.integrations}>
+                ${this.state.filteredIntegrations.map(
+                  (el) => html`
+                    <${IntegrationRow}
+                      id=${el.id}
+                      name=${el.name}
+                      iconUrl=${el.icon_url}
+                      appName=${el.branding_app.name}
+                      executionStatus=${el.task_execution.status}
+                      activityStatus=${el.status}
+                      runs=${el.runs_count}
+                      lastExecutionAt=${el.task_execution.last_execution_at
+                        ?.date}
+                      executionTimezone=${el.task_execution.last_execution_at
+                        ?.timezone}
+                      loading=${el.loading}
+                      onEdit=${() => this.onIntegrationEdit(el)}
+                      onDelete=${() => this.onIntegrationDelete(el)}
+                      onEditName=${(name: string) =>
+                        this.onUpdateName(el, name)}
+                      onToggle=${this.toggleIntegration}
+                    />
+                  `,
+                )}
+                ${this.state.filteredIntegrations.length < 1 &&
+                html`<div class=${style.noIntegrations}>
+                  ${this.state.query
+                    ? 'No integrations found for this search query'
+                    : 'No integrations'}
+                </div>`}
+              </div>
+            </div>
+          `}
+    `;
+  }
+}
+
+export default connect<Props, unknown, StoreType, unknown>(
+  ['fetchingIntegrations', 'genericData'],
+  actionFunctions,
+)(IntegrationsList);

package/src/features/integrations/IntegrationsList/styles.module.scss

@@ -0,0 +1,67 @@
+.integrations {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  .integration {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    img {
+      height: 3rem;
+      width: 3rem;
+    }
+  }
+
+  .noIntegrations {
+    text-align: center;
+    padding: 50px;
+    font-size: 16px;
+    color: #999;
+    font-weight: 500;
+  }
+}
+
+.search {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  padding: 50px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+  transition: border-color 0.2s;
+  &:hover {
+    border-color: #a8a8a8;
+  }
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+}