@integry/sdk 4.5.2 → 4.5.4

package/src/features/common/Steps/styles.module.scss

@@ -0,0 +1,314 @@
+.stepsWrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  // overflow-y: scroll;
+  overflow-x: hidden;
+  .stepInfo {
+    border-top: 1px solid #d7d7d7;
+    padding-top: 24px;
+    padding-bottom: 24px;
+    // padding-bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    .header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      .name {
+        display: flex;
+        align-items: center;
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 17px;
+        line-height: 21px;
+        color: #333333;
+        .textDiv {
+          display: flex;
+          span {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .description {
+        color: #6d6f7b;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
+        margin-top: 16px;
+      }
+      .steps {
+        font-size: 12px;
+        font-weight: 400;
+        color: #8c8c8c;
+      }
+    }
+    img,
+    svg {
+      margin-right: 10px;
+      height: 25px;
+      width: 25px;
+      border-radius: 9999px;
+      object-fit: contain;
+    }
+  }
+
+  .stepInfoCompact {
+    border-top: 1px solid #d7d7d7;
+    display: block;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 24px;
+    padding-bottom: 16px;
+    width: 390px;
+    margin-left: -24px;
+
+    .header {
+      .description {
+        color: #6d6f7b;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
+        margin-top: 16px;
+      }
+    }
+
+    .header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      .name {
+        display: flex;
+        align-items: center;
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 17px;
+        line-height: 21px;
+        color: #333333;
+        .textDiv {
+          display: flex;
+          span {
+            margin-left: 10px;
+          }
+        }
+      }
+      .steps {
+        font-size: 12px;
+        font-weight: 400;
+        color: #8c8c8c;
+      }
+    }
+    img,
+    svg {
+      margin-right: 10px;
+      height: 25px;
+      width: 25px;
+      border-radius: 9999px;
+      object-fit: contain;
+    }
+  }
+
+  .appFlowStepInfo {
+    border-top: 0px;
+  }
+  .stepContainer {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-left: 24px;
+    margin-right: 24px;
+    height: 100%;
+    min-height: 410px;
+    .top {
+      display: flex;
+      flex: 1 1 0%;
+      padding-left: 35px;
+      padding-right: 35px;
+      width: 100%;
+      box-sizing: border-box;
+      // max-width: 50vw;
+      // max-width: 390px;
+      min-width: 330px;
+    }
+
+    .topCompact {
+      display: flex;
+      flex: 1 1 0%;
+      padding-left: 35px;
+      padding-right: 35px;
+      width: 100%;
+      box-sizing: border-box;
+      // max-width: 50vw;
+      max-width: 390px;
+      min-width: 330px;
+    }
+    .bottom {
+      display: flex;
+      height: 2rem;
+      align-items: center;
+      justify-content: flex-end;
+      box-sizing: initial;
+      border-width: 0px;
+      border-top-width: 1px;
+      border-style: solid;
+      border-color: #d7d7d7;
+      margin-top: 55px;
+      padding-top: 20px;
+      .buttons {
+        display: flex;
+        div:not(:last-child) {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .bottomCompact {
+      width: calc(100% + 16px);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: 24px;
+      padding-bottom: 16px;
+      margin-left: -8px;
+
+      .buttonsCompact {
+        display: flex;
+        width: 100%;
+
+        div {
+          width: 100%;
+        }
+
+        button {
+          width: 100%;
+          height: 40px;
+          padding: 10px 15px;
+          color: #fff;
+          font-family: Inter;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+        }
+      }
+    }
+    .save {
+      font-style: normal;
+      font-weight: normal;
+      // margin-top: -30px;
+      line-height: 22px;
+      font-size: 14px;
+      color: #8c8c8c;
+      padding-bottom: 30px;
+      min-height: 350px;
+    }
+    .postSave {
+      width: 100%;
+      .webhookFieldWrap {
+        margin-bottom: 20px;
+      }
+      textarea {
+        font-family: monospace;
+        line-height: 18px;
+      }
+    }
+  }
+}
+
+.authWrap {
+  margin-bottom: 30px;
+  width: 100%;
+  max-width: 100%;
+}
+
+.integryScrollbar {
+  width: calc(100% + 10px);
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  /* 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: #999999;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+  }
+}
+div[id='flows-comfortable-view'] {
+  .stepInfo {
+    border-top: 0px;
+  }
+  .stepsWrap {
+    border-top: 1px solid #d7d7d7;
+  }
+}
+div[id='appPageContainer-COMFORTABLE--INLINE'] {
+  .stepsWrap {
+    height: calc(100% - 80px);
+  }
+  [class^='styles-module_actionFormWrap_'] {
+    min-height: 410px;
+  }
+  [class^='styles-module_save_'] {
+    min-height: 410px !important;
+  }
+}
+div[id='appPageContainer-COMPACT--INLINE'] {
+  .bottomCompact {
+    padding-bottom: 0px;
+  }
+  [class^='styles-module_save_'] {
+    min-height: 410px !important;
+  }
+  [class^='styles-module_accountFieldDropdown_'] {
+    min-width: 329px;
+  }
+  [class^='styles-module_authWrapDropdown_'] {
+    min-width: 334px;
+  }
+  [class^='styles-module_actionFormWrap_'] {
+    min-height: 410px;
+  }
+}
+div[id='appPageContainer-COMPACT--MODAL'] {
+  [class^='styles-module_accountFieldDropdown_'] {
+    min-width: 329px;
+  }
+  [class^='styles-module_authWrapDropdown_'] {
+    min-width: 334px;
+  }
+  [class^='styles-module_actionFormWrap_'] {
+    min-height: 350px;
+  }
+}

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

@@ -0,0 +1,383 @@
+.flowCardContainer {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.flowInstanceContainer {
+  color: #333;
+  font-size: 12px;
+  font-weight: 400;
+  // border-top: 1px solid #ededed;
+  margin-top: 0px;
+  .flowInstanceTitleRow {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) 110px 72px 95px 40px;
+    padding: 12px 16px;
+    margin-top: 4px;
+  }
+  .flowInstancesContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    gap: 4px;
+    border-radius: 4px;
+    border-radius: 4px;
+    // margin: 0 8px;
+    margin: 0;
+    margin-right: 0;
+    // padding: 0 8px;
+    padding-right: 7px;
+    padding-left: 16px;
+
+    &:hover {
+      background: #f5f6fe;
+    }
+  }
+  .flowInstanceRow {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) 110px 72px 95px 40px;
+    // min-height: 40px;
+    flex-shrink: 0;
+    // border-radius: 4px;
+    // border: 1px solid #e0e0e0;
+    // border-top: 1px solid var(--neutral-n-300, #EBEBEB);
+    // background: #fff;
+    padding: 0px 16px;
+    align-items: center;
+    margin-top: 0px;
+    max-width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    padding: 8px;
+    // padding-bottom: 6px;
+    gap: 1px;
+    border-radius: 0 0 4px 4px;
+
+    .flowInstanceColumn {
+      color: #333;
+      font-size: 12px;
+      font-weight: 400;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      &.flowInstanceName {
+        margin-right: 20px;
+        max-width: 100%;
+      }
+      &.instanceRunTime {
+        font-family: Inter;
+        white-space: nowrap;
+        margin-right: 5px;
+        color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+        font-size: 10px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: normal;
+      }
+      &.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);
+      // max-width: 100%;
+      max-width: 220px;
+      width: max-content;
+      .inlineEditInput {
+        min-width: 220px;
+        height: inherit !important;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+
+      div {
+        color: var(--black-and-grey-title-and-desc, #333);
+        text-overflow: ellipsis;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    &:hover {
+      // border: 1px solid var(--neutral-n-300, #EBEBEB);
+      // background: var(--primary-p-200, #ECEDFD);;
+      // cursor: pointer;
+    }
+  }
+  .flowInstanceMultipleRow {
+    display: flex;
+    flex: 1;
+    padding-right: 0;
+    max-height: 48px;
+  }
+}
+
+.flowInstanceRowMeta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% + 7px);
+  min-height: 16px;
+  max-height: 16px;
+  // gap: 8px;
+  // margin-top: 4px;
+}
+
+.instanceRunTime {
+  font-family: Inter;
+  white-space: nowrap;
+  margin-right: 5px;
+  color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+  font-size: 10px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: normal;
+}
+
+.inlineFlowContainer {
+  // overflow: visible;
+}
+
+.singleFlowInstanceRow {
+  display: grid;
+  grid-template-columns: max-content max-content 1fr 95px 40px 0px;
+  gap: 8px;
+  color: #333;
+  font-size: 12px;
+  font-weight: 400;
+  border-top: 1px solid #ededed;
+  padding-top: 16px;
+  margin-top: 14px;
+  align-items: center;
+  .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;
+    }
+  }
+
+  &:hover {
+    // border: 1px solid var(--neutral-n-300, #EBEBEB);
+    background: var(--primary-p-200, #ecedfd);
+    cursor: pointer;
+  }
+}
+
+.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 {
+  // padding: 8px;
+  border-radius: 4px;
+  background: #fff;
+  // box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  // border: 1px solid var(--neutral-n-300, #EBEBEB);
+  min-width: 338px;
+  width: calc(100% - 10px);
+  height: max-content;
+
+  .flowInfo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 4px;
+    padding: 0 8px;
+    min-height: 33px;
+    .flowIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+      }
+    }
+    .flowName {
+      color: var(--black-and-grey-title-and-desc, #333);
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      min-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      // max-width: 265px;
+      max-width: 220px;
+    }
+    .flowDescription {
+      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+      font-size: 10px;
+      font-weight: 400;
+      font-style: normal;
+      line-height: normal;
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 265px;
+    }
+
+    .flowNameContainer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: 16px;
+
+      .flowActions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+    }
+
+    &:hover {
+      // border: 1px solid var(--neutral-n-300, #EBEBEB);
+      background: var(--primary-p-100, #f6f6fe);
+      cursor: pointer;
+    }
+  }
+
+  .flowInfoTooltip {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .flowNameTooltip {
+      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: 500;
+      line-height: normal;
+    }
+
+    .flowDescriptionTooltip {
+      color: var(--black-and-grey-secondary-info, #6d6f7b);
+      font-feature-settings: 'clig' off, 'liga' off;
+      font-family: Inter;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 400;
+      // line-height: 24px; /* 171.429% */
+      line-height: 14px;
+      overflow-wrap: normal;
+      overflow-wrap: anywhere;
+      overflow-wrap: break-word;
+      margin: 0;
+    }
+  }
+
+  .flowCardFooter {
+    display: flex;
+    margin-top: 16px;
+    align-items: center;
+    gap: 24px;
+    .flowStatus {
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      color: #999;
+      font-size: 12px;
+      font-weight: 400;
+      .blockedInfo {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:hover {
+    // border: 1px solid var(--neutral-n-300, #EBEBEB);
+    // background: var(--primary-p-200, #ECEDFD);;
+    // cursor: pointer;
+  }
+}
+
+.forceNoHover {
+  &:hover {
+    background: #fff !important;
+  }
+}