@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,295 @@
+/* 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

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