@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/AppFlowContainer/AppFlowListing/styles.module.scss

@@ -0,0 +1,212 @@
+.flowCardContainer {
+  // padding: 24px;
+  padding: 12px;
+  // padding-right: 24px;
+  padding-right: 12px;
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  overflow: auto;
+}
+
+.flowInstanceContainer {
+  color: #333;
+  font-size: 12px;
+  font-weight: 400;
+  border-top: 1px solid #ededed;
+  padding: 0 16px;
+  margin-bottom: 16px;
+  .flowInstanceTitleRow {
+    display: grid;
+    // grid-template-columns: minmax(200px, 1fr) 110px 72px 95px 40px;
+    grid-template-columns: minmax(200px, 1fr) 105px 72px 95px 20px;
+    // padding: 12px 16px;
+    padding: 12px 8px;
+    margin-top: 4px;
+    margin-bottom: -8px;
+  }
+  .flowInstanceRow {
+    display: grid;
+    // grid-template-columns: minmax(200px, 1fr) 110px 72px 95px 40px;
+    grid-template-columns: minmax(200px, 1fr) 110px 72px 95px 20px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    background: #fff;
+    padding: 0px 8px;
+    padding-right: 1px;
+    align-items: center;
+    margin-top: 8px;
+    max-width: 100%;
+    .flowInstanceColumn {
+      color: #333;
+      font-size: 12px;
+      font-weight: 400;
+      &.flowInstanceName {
+        margin-right: 20px;
+        max-width: 100%;
+      }
+      &.instanceRunTime {
+        white-space: nowrap;
+        margin-right: 5px;
+      }
+      &.instanceStatus {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: end;
+        // margin-right: 14px;
+        svg {
+          cursor: pointer;
+        }
+      }
+    }
+    .editableTextWrapper {
+      display: grid;
+      grid-template-columns: minmax(20px, 1fr) 30px;
+      max-width: 100%;
+      flex: 1;
+      width: max-content;
+      .inlineEditInput {
+        min-width: 230px;
+      }
+    }
+  }
+}
+
+.inlineFlowContainer {
+  // overflow: visible;
+}
+
+.singleFlowInstanceRow {
+  display: grid;
+  // grid-template-columns: max-content max-content 100px 1fr 95px 40px;
+  grid-template-columns: max-content max-content 100px 1fr 95px 20px;
+  color: #333;
+  font-size: 12px;
+  font-weight: 400;
+  border-top: 1px solid #ededed;
+  // padding-top: 16px;
+  // margin-top: 14px;
+  align-items: center;
+  padding: 10px 16px;
+  padding-right: 8px;
+  .flowInstanceColumn {
+    &:nth-child(1) {
+      color: #999999;
+      // place on 2nd column
+      margin-right: 2px;
+    }
+    &:nth-child(2) {
+      color: #999999;
+      margin-right: 9px;
+    }
+    &.instanceStatus {
+      grid-column-start: 5;
+      display: flex;
+      gap: 8px;
+      justify-content: end;
+      align-items: center;
+      margin-right: 14px;
+    }
+  }
+}
+
+.integryScrollbar {
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    // background: #f1f1f1;
+    background: transparent;
+    border-radius: 10px;
+    margin-right: 5px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #ededed;
+    border: 1px solid #e7e7e7;
+    border-radius: 10px;
+    background: #d3d2d2;
+    margin-right: 5px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: #cccccc;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: #cccccc;
+  }
+}
+
+.readonlyHint {
+  position: absolute;
+  width: 100%;
+  height: -webkit-fill-available;
+  z-index: 99;
+}
+
+.flowCard {
+  width: 100%;
+  // padding: 16px;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
+  .flowInfo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    .flowIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        width: 34px;
+        height: 34px;
+      }
+    }
+    .flowName {
+      color: #333;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      min-height: 17px;
+      min-width: 100px;
+    }
+    .flowDescription {
+      color: #999;
+      font-size: 12px;
+      font-weight: 400;
+      margin-top: 8px;
+    }
+  }
+
+  .flowCardFooter {
+    display: flex;
+    padding: 16px;
+    padding-top: 0px;
+    align-items: center;
+    gap: 24px;
+    .flowStatus {
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      color: #999;
+      font-size: 12px;
+      font-weight: 400;
+      .blockedInfo {
+        cursor: pointer;
+      }
+    }
+  }
+}

package/src/features/containers/AppFlowContainer/AppFlowWrap/app-page-loader.tsx

@@ -0,0 +1,45 @@
+import { html } from 'htm/preact';
+import { MarketplaceRenderModes } from '@/types';
+
+import styles from './styles.module.scss';
+import flowCardStyles from '../AppFlowListing/styles.module.scss';
+
+interface AppPageLoaderProps {
+  renderMode: string;
+}
+
+const AppPageLoader = ({ renderMode }: AppPageLoaderProps) => html`
+  <div class="${styles.appPageContainer} ${styles.appPageLoader}">
+    <div class=${styles.header}>
+      <div class=${styles.appInfo}>
+        <div class="${styles.appIcon} ${styles.animatedBackground}"></div>
+        <div class="${styles.appName} ${styles.animatedBackground}"></div>
+      </div>
+      <div class="${styles.accountName} ${styles.animatedBackground}"></div>
+    </div>
+    <div
+      class="${renderMode === MarketplaceRenderModes.MODAL
+        ? styles.modalContentWrap
+        : styles.inlineContentWrap} ${'integry-apps-flow-container'}"
+    >
+      <div
+        class="${flowCardStyles.flowCardContainer} ${flowCardStyles.integryScrollbar}"
+      >
+        ${[1, 2, 3].map(
+          (item) => html`<div class="${flowCardStyles.flowCard}" key=${item} style="padding: 16px;">
+            <div class="${styles.flowName}  ${styles.animatedBackground}"></div>
+            <div
+              class="${styles.flowDescription}  ${styles.animatedBackground}"
+            ></div>
+            <div class="${flowCardStyles.flowCardFooter}" style="padding: 0; margin-top: 16px;">
+              <div
+                class="${styles.footerButton}  ${styles.animatedBackground}"
+              ></div>
+            </div>
+          </div>`,
+        )}
+      </div>
+    </div>
+  </div>
+`;
+export default AppPageLoader;