@integry/sdk 4.7.39 → 4.7.41

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

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

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

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

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

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

@@ -1,67 +0,0 @@
-.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;
-}