@integry/sdk 4.7.39 → 4.7.41

package/src/features/templates/Template/index.ts

@@ -1,295 +0,0 @@
-/* eslint-disable import/no-cycle */
-/* eslint-disable no-nested-ternary */
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import {
-  useEffect,
-  useState,
-} from 'preact/hooks';
-import { InstanceStatusPill, MenuIcon } from '@/features/containers/AppFlowContainer/AppFlowListing/flow-instance';
-import { Toggle } from '@/components/Toggle-v2';
-import { CollapsedMenu } from '@/components/CollapsedMenu';
-import { EditableText } from '@/components/EditableText';
-
-import { StoreType } from '@/types/store';
-import { actionFunctions } from '@/store';
-import { TemplateListingRenderModes } from '@/types';
-import { convertDateToStandard } from '@/utils/datetime';
-import { Instance, Integration, Template as TemplateType } from '@/interfaces';
-
-import style from './styles.module.scss';
-
-export type FlowCardProps = {
-  id: number | string;
-  imgUrl: string;
-  name: string;
-  description: string;
-  tags: string;
-  layout: TemplateListingRenderModes;
-  handleClick: () => void;
-  apiHandler?: any;
-  app?: {
-    id: number;
-  }
-  onEdit?: (instance: Instance) => void;
-  onDelete?: (instance: Instance) => void;
-  onEditName?: ({
-    instance,
-    newName
-  }: {
-    instance: Instance;
-    newName: string;
-  }) => void;
-  dFlag?: string;
-  templateObj?: TemplateType | any;
-};
-
-type State = {
-  loading: boolean;
-  filteredTemplates: TemplateType[];
-  error: string | null;
-  query: string;
-};
-
-const Template = (props: FlowCardProps) => {
-    
-    const { apiHandler, app, id, onEdit, onDelete, dFlag } = props;
-    const [maxInstanceNameSize, setMaxInstanceNameSize] = useState(150);
-    // const [spliceName, setSpliceName] = useState(0);
-    const [template, setTemplateMeta] = useState({
-      id,
-      name: props.name,
-      description: props.description,
-      execution_type: 'AUTOMATIC',
-      instances: [],
-    });
-
-    const getTextWidth = (text: string, font: string): number => {
-      const canvas = document.createElement('canvas');
-      const canvasContext = canvas.getContext('2d');
-      if (!canvasContext) {
-        return 150;
-      }
-      canvasContext.font = font;
-      const metrics = canvasContext.measureText(text);
-      return Math.round(metrics.width) + 8;
-    }
-    
-    const handleInstanceGridWidth = (templateMeta: any) => {
-      // get maximum name size from integrations and convet to px
-      let maxNameSize = maxInstanceNameSize;
-
-      templateMeta.instances.forEach((instance: any) => {
-        const nameLengthInPX = getTextWidth(instance.name, '12px Inter');
-        if (nameLengthInPX > maxNameSize) {
-          maxNameSize = nameLengthInPX;
-        }
-      });
-      
-      if (maxNameSize > maxInstanceNameSize) {
-        // if (maxNameSize < 290) {
-        //   setMaxInstanceNameSize(maxNameSize + 10)
-        // } else {
-        //   setSpliceName(maxNameSize - 310);
-        //   setMaxInstanceNameSize(300);
-        // }
-        setMaxInstanceNameSize(maxNameSize + 10)
-      }
-    };
-
-    const getAppFlows = () => {
-      if (app) {
-        apiHandler.getAppFlows(app.id).then((data: any) => {
-          const { results = []} = data;
-          results.forEach((flow: any) => {
-            if (flow.id === id) {
-              const { instances = [] } = flow;
-              let tempInstances = [];
-              if (instances.length > 0) {
-                tempInstances = instances.map((instance: any) => ({
-                    ...instance,
-                    id: instance.id,
-                    name: `${instance.name}`,
-                    status: instance.status,
-                    last_run_start_time: instance.last_run_start_time,
-                  }))
-              }
-              setTemplateMeta({
-                id,
-                ...flow,
-                instances: tempInstances,
-              })
-              handleInstanceGridWidth(
-                {
-                  id,
-                  ...flow,
-                  instances: tempInstances,
-                }
-              );
-            }
-          });
-        });
-      }
-    };
-
-
-    const pollGetAppFlows= (frequency: number, pollInstances = 1, currentPolInstace = 0) => {
-      if (currentPolInstace < pollInstances) {
-        getAppFlows();
-        setTimeout(() => {
-          pollGetAppFlows(frequency, pollInstances, currentPolInstace + 1);
-        }, frequency);
-      }
-    }
-
-    const toggleIntegration = (instanceId: number, value: boolean) => {
-      apiHandler
-        .toggleIntegration(instanceId, value)
-        .catch((err: unknown) => {
-          console.error(err);
-        })
-        .finally(() => {
-          getAppFlows();
-        });
-    };
-
-    const handleOptionSelect = (option: { id: string; label: string }, instance: Instance) => {
-      switch (option.id) {
-        case 'edit':
-          if(onEdit) onEdit(instance);
-          break;
-        case 'delete':
-          if(onDelete) onDelete(instance);
-          break;
-        default:
-          break;
-      }
-    };
-
-    const onUpdateName = (integration: Integration, name: string) => {
-      apiHandler
-        .renameIntegration(`${integration.id}`, name)
-        .then((integrationData: any) => {
-          if (!integrationData) {
-            throw new Error('Could not update integration name');
-          }
-        })
-        .catch((err: any) => console.error(err));
-    };
-
-    const handleOnEditName = (newName: string, instance: Integration) => {
-      const tempInstances: any = template.instances.map((el: Instance) => {
-        if (el.id === instance.id) {
-          return {
-            ...el,
-            name: newName,
-          }
-        }
-        return el;
-      })
-      setTemplateMeta({
-        ...template,
-        instances: tempInstances,
-      });
-      handleInstanceGridWidth(
-        {
-          ...template,
-        instances: tempInstances,
-        }
-      );
-      onUpdateName(instance, newName);
-    }
-
-    useEffect(() => {
-      // pollGetAppFlows(1000, 5, 0);
-      const { templateObj } = props;
-      setTemplateMeta(templateObj);
-    }, [dFlag, props.templateObj, props.templateObj.instances.length]);
-    const getLastRunStart = (dateTimeString: string): string => {
-      if (!dateTimeString) {
-        // return 'Never';
-        return 'No runs as yet';
-      }
-      
-      return convertDateToStandard(dateTimeString);
-    }
-    
-    const integrations = template.instances || [];
-    return html`
-      <div class="${props.layout === TemplateListingRenderModes.LIST
-          ? style.template_list_view
-          : style.template_grid_view} ${'integry-container__flow-card'}"
-      >
-        <div class=${style.titleContainer}>
-          <img src=${props.imgUrl} />
-          <div class=${style.title}>
-            <p class=${style.name}>${props.name}</p>
-            <p class=${style.description}>${props.description}</p>
-          </div>
-        </div>
-        ${false && props.tags.length > 0 &&
-        html`
-          <div class=${style.tags}>
-            ${props.tags
-              .split(',')
-              .map((el) => html` <div class=${style.tag}>${el}</div> `)}
-          </div>
-        `}
-        ${integrations.length > 0 && html`<div class=${style.divider}></div>`}
-        ${integrations.length > 0 ? html`
-          <div class=${style.integrations}>
-            <div class=${style.integrationsHeader} style="grid-template-columns: ${maxInstanceNameSize}px 1fr;">
-              <span style="flex: 1;" class=${style.th}>Instance</span>
-              <span style="width: 309px;" class=${style.th}>Last run start</span>
-            </div>
-            ${integrations.map((instance: any) => html`
-              <div key=${`instance-${template.id}-${instance.id}`} class=${style.integration}>
-                <span>
-                  <${EditableText} value=${instance.name} handleChange=${(newNameValue: string) => {
-                    handleOnEditName(newNameValue, instance);
-                  }} //>
-                </span>
-                <span>${getLastRunStart(instance.last_run_start_time)} ${html`<${InstanceStatusPill} instance=${instance} />`}</span>
-                <div>
-                  ${html`<${Toggle}
-                    id=${instance.id}
-                    value=${instance.status === 'ACTIVE'}
-                    onChange=${(value: boolean) => toggleIntegration(instance.id, value)}
-                  />`}
-                </div>
-                <div>
-                  <${CollapsedMenu}
-                    icon=${MenuIcon}
-                    options=${[
-                      {
-                        id: 'edit',
-                        label: 'Edit',
-                      },
-                      {
-                        id: 'delete',
-                        label: 'Delete',
-                      },
-                    ]}
-                    onOptionSelect=${(option: { id: string; label: string }) =>
-                    handleOptionSelect(option, instance)}
-                  />
-                </div>
-              </div>
-            `)}
-          </div>
-        ` : html`<div class=${style.noIntegrations}></div>`}
-        <div class=${style.actions}>
-          <button class=${style.button} onclick=${props.handleClick}>${template.execution_type === 'AUTOMATIC' ? (integrations.length > 0 ? 'Setup another' : 'Setup and enable') : 'Setup and run'}</button>
-        </div>
-      </div>
-    `;
-}
-
-// export { Template };
-
-const connectedTemplate =  connect<FlowCardProps, State, StoreType, unknown>(
-  [],
-  actionFunctions,
-)(Template);
-
-export { connectedTemplate as Template };

package/src/features/templates/Template/styles.module.scss

@@ -1,226 +0,0 @@
-.name {
-  margin-bottom: 0.5rem;
-  --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
-}
-
-.description {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
-}
-
-.tags {
-  margin-top: 0.5rem;
-  margin-bottom: -0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  .tag {
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
-    padding: 0.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    --tw-text-opacity: 1;
-    color: rgba(107, 114, 128, var(--tw-text-opacity));
-  }
-}
-
-.template_list_view {
-  display: flex;
-  // cursor: pointer;
-  flex-direction: column;
-  // justify-content: space-between;
-  justify-content: flex-start;
-  align-items: flex-start;
-  border-radius: 0.25rem;
-  border-width: 1px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-  transition: border-color 0.2s;
-
-  border-radius: 4px;
-  border: 1px solid var(--gray-5, #E0E0E0);
-  background: #FFF;
-  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
-  padding: 0;
-  
-  img {
-    margin-bottom: 0.75rem;
-    height: 2.5rem;
-    width: 2.5rem;
-  }
-  &:hover {
-    // border-color: #a8a8a8;
-  }
-
-  .titleContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-    padding: 16px;
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      object-fit: contain;
-      margin: 0;
-    }
-
-    .title {
-      p {
-        margin: 0;
-      }
-
-      .name {
-        color: var(--black-and-grey-title-and-desc, #333);
-        font-family: Inter;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 18px; /* 128.571% */
-      }
-
-      .description {
-        color: var(--black-and-grey-draft-and-tooltip-desc, #999);
-        font-family: Inter;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-  }
-
-  .actions {
-    padding: 0 24px;
-    padding-bottom: 16px;
-
-    button {
-      border-radius: 5px;
-      border: 1px solid var(--theme-accent-blue-1, #4250F0);
-      background: var(--theme-accent-blue-1, #4250F0);
-      color: #FFF;
-      font-family: Inter;
-      font-size: 13px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      padding: 4.5px 10px;
-      cursor: pointer;
-
-      &:hover {
-        background: var(--theme-accent-blue-2, #3A46D5);
-        border: 1px solid var(--theme-accent-blue-2, #3A46D5);
-      }
-    }
-  }
-}
-
-.template_grid_view {
-  display: flex;
-  cursor: pointer;
-  flex-direction: column;
-  justify-content: space-between;
-  border-radius: 0.25rem;
-  border-width: 1px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-  transition: border-color 0.2s;
-  img {
-    margin-bottom: 0.75rem;
-    height: 2.5rem;
-    width: 2.5rem;
-  }
-  &:hover {
-    border-color: #a8a8a8;
-  }
-}
-
-.noIntegrations {
-  padding: 3px;
-}
-
-.integrations {
-  padding: 16px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 8px;
-  // width: calc(100% - 48px);
-  width: calc(100%);
-  box-sizing: border-box;
-
-  p, span {
-    color: var(--black-and-grey-title-and-desc, #333);
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    margin: 0;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 6px;
-  }
-
-  .integrationsHeader {
-    display: grid;
-    grid-template-columns: 150px 1fr;
-    padding: 0 16px;
-    gap: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    box-sizing: border-box;
-
-    * {
-      user-select: none;
-    }
-  }
-
-  .integration {
-    display: grid;
-    grid-template-columns: 1fr 207px 50px 20px;
-    gap: 16px;
-    border-radius: 4px;
-    border: 1px solid var(--gray-5, #E0E0E0);
-    background: #FFF;
-    padding: 12px 16px;
-    // width: calc(100% - 32px);
-    width: calc(100%);
-    box-sizing: border-box;
-  }
-}
-
-.divider {
-  background: #EDEDED;
-  width: 100%;
-  height: 1px;
-}