@truedat/dq 8.11.3 → 8.11.6

package/src/components/__tests__/__snapshots__/RuleImplementation.spec.js.snap

@@ -46,84 +46,92 @@ exports[`<RuleImplementation /> matches the latest snapshot 1`] = `
     <div
       class="right aligned eight wide column"
     >
-      <button
-        class="ui basic icon button button icon group-actions"
-        data-tooltip="quality.actions.subcribe.tooltip"
-      >
-        <i
-          aria-hidden="true"
-          class="eye icon"
-        />
-      </button>
-      <button
-        class="ui secondary button"
-      >
-        implementations.actions.do_execution
-      </button>
       <div
-        aria-expanded="false"
-        class="ui floating dropdown button icon group-actions"
-        role="listbox"
-        tabindex="0"
+        class="rule-implementation-actions"
       >
-        <i
-          aria-hidden="true"
-          class="ellipsis vertical icon"
-        />
-        <i
-          aria-hidden="true"
-          class="dropdown icon"
-        />
+        <button
+          class="ui basic icon button button icon group-actions subscription-action-button"
+          data-tooltip="quality.actions.subcribe.tooltip"
+        >
+          <i
+            aria-hidden="true"
+            class="eye icon"
+          />
+        </button>
         <div
-          class="left menu transition"
+          class="execution-popup-wrapper"
         >
-          <a
-            aria-checked="false"
-            aria-selected="true"
-            class="selected item td-icon-text-control"
-            data-discover="true"
-            href="/implementations/1/clone"
-            role="option"
-            style="pointer-events: all;"
+          <button
+            class="ui primary button"
           >
-            <i
-              aria-hidden="true"
-              class="copy outline icon"
-            />
-            <span
-              class="text"
-            >
-              ruleImplementation.actions.clone
-            </span>
-          </a>
-          <a
-            aria-checked="false"
-            aria-selected="false"
-            class="item td-icon-text-control"
-            data-discover="true"
-            href="/implementations/1/move"
-            role="option"
-            style="pointer-events: all;"
+            implementation.actions.do_execution
+          </button>
+        </div>
+        <div
+          aria-expanded="false"
+          class="ui floating dropdown button icon group-actions"
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="ellipsis vertical icon"
+          />
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="left menu transition"
           >
-            <i
-              aria-hidden="true"
-              class="share square icon"
-            />
-            <span
-              class="text"
+            <a
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item td-icon-text-control"
+              data-discover="true"
+              href="/implementations/1/clone"
+              role="option"
+              style="pointer-events: all;"
             >
-              ruleImplementation.actions.move
-            </span>
-          </a>
-          <a
-            class="item"
-          >
-            <i
-              aria-hidden="true"
-              class="red trash alternate outline icon"
-            />
-            ruleImplementation.actions.delete
-          </a>
+              <i
+                aria-hidden="true"
+                class="copy outline icon"
+              />
+              <span
+                class="text"
+              >
+                ruleImplementation.actions.clone
+              </span>
+            </a>
+            <a
+              aria-checked="false"
+              aria-selected="false"
+              class="item td-icon-text-control"
+              data-discover="true"
+              href="/implementations/1/move"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="share square icon"
+              />
+              <span
+                class="text"
+              >
+                ruleImplementation.actions.move
+              </span>
+            </a>
+            <a
+              class="item"
+            >
+              <i
+                aria-hidden="true"
+                class="red trash alternate outline icon"
+              />
+              ruleImplementation.actions.delete
+            </a>
+          </div>
         </div>
       </div>
     </div>

package/src/components/__tests__/__snapshots__/RuleImplementationsActions.spec.js.snap

@@ -20,13 +20,17 @@ exports[`<RuleImplementationsActions /> matches the latest snapshot 1`] = `
         for="execute_checkbox"
       />
     </div>
-    <button
-      class="ui secondary disabled button"
-      disabled=""
-      tabindex="-1"
+    <div
+      class="execution-popup-wrapper"
     >
-      implementations.actions.do_execution
-    </button>
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        implementations.actions.do_execution
+      </button>
+    </div>
     <a
       class="ui button"
       data-discover="true"

package/src/components/__tests__/__snapshots__/Subscription.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<Subscription /> matches the latest snapshot 1`] = `
 <div>
   <button
-    class="ui basic icon button button icon group-actions"
+    class="ui basic icon button button icon group-actions subscription-action-button"
     data-tooltip="quality.actions.unsubcribe.tooltip"
   >
     <i

package/src/styles/executionPopup.less

@@ -0,0 +1,261 @@
+@execution-popup-border-radius: 0.375rem;
+@execution-popup-padding: 0.75rem;
+@execution-popup-gap: 0.625rem;
+@execution-popup-border: #e2e8f0;
+@execution-popup-text-secondary: #475569;
+@execution-popup-text-light: #64748b;
+@execution-popup-bg-light: #f8fafc;
+@execution-popup-warning-bg: #fffbeb;
+@execution-popup-warning-border: #fde68a;
+@execution-popup-warning-text: #78350f;
+@execution-popup-badge-optional-bg: #f1f5f9;
+@execution-popup-badge-mandatory-pending-bg: #fee2e2;
+@execution-popup-badge-mandatory-pending-text: #881337;
+@execution-popup-badge-mandatory-complete-bg: #dcfce7;
+@execution-popup-badge-mandatory-complete-text: #166534;
+
+.ui.modal.execution-popup-modal {
+  width: min(48rem, calc(100vw - 2rem));
+  min-height: 24rem;
+  max-height: calc(100vh - 2rem);
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 1rem !important;
+  overflow: visible;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.2),
+    0 8px 10px -6px rgba(0, 0, 0, 0.15);
+
+  > .header {
+    padding: 1.5rem 1.5rem 1rem;
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: 0 !important;
+    background: @primaryColor;
+    color: #f8fafc;
+
+    .execution-popup-header {
+      color: #f8fafc;
+
+      .subtitle {
+        color: #cbd5e1;
+      }
+
+      .close-button {
+        color: #e2e8f0;
+
+        &:hover {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  > .content {
+    display: flex;
+    flex-direction: column;
+    min-height: 16rem;
+    max-height: calc(100vh - 16rem);
+    overflow: visible;
+    padding: 1.625rem 1.5rem 2rem;
+
+    &.has-template {
+      padding-bottom: 1.25rem;
+    }
+  }
+
+  > .actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
+    border-top: 1px solid @execution-popup-border;
+    background: @execution-popup-bg-light;
+
+    .button {
+      margin-left: 0;
+    }
+  }
+}
+
+.execution-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .subtitle {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: #94a3b8;
+    margin: 0.15rem 0 0;
+  }
+
+  .close-button {
+    flex-shrink: 0;
+    padding: 6px;
+    border: none;
+    border-radius: 0.5rem;
+    background: none;
+    color: #94a3b8;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
+
+    &:hover {
+      color: #334155;
+    }
+
+    &:focus-visible {
+      outline: 2px solid @primaryColor;
+      outline-offset: 2px;
+    }
+  }
+}
+
+.execution-popup-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.execution-popup-selector-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: @execution-popup-text-secondary;
+
+  .optional-badge,
+  .mandatory-badge {
+    padding: 0.2rem 0.45rem;
+    border-radius: 0.25rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+
+  .optional-badge {
+    background: @execution-popup-badge-optional-bg;
+    color: @execution-popup-text-light;
+  }
+
+  .mandatory-badge {
+    &.pending {
+      background: @execution-popup-badge-mandatory-pending-bg;
+      color: @execution-popup-badge-mandatory-pending-text;
+    }
+
+    &.complete {
+      background: @execution-popup-badge-mandatory-complete-bg;
+      color: @execution-popup-badge-mandatory-complete-text;
+    }
+  }
+}
+
+.execution-popup-single-template-label {
+  margin-bottom: 0.75rem;
+  color: @execution-popup-text-secondary;
+  font-size: 0.75rem;
+}
+
+.execution-popup-template-area {
+  margin-bottom: 1.5rem;
+
+  .execution-popup-template-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: @execution-popup-text-secondary;
+    margin-bottom: 0.25rem;
+
+    .required {
+      color: @red;
+      margin-left: 0.125rem;
+    }
+  }
+
+  .ui.dropdown {
+    width: 100%;
+
+    .menu {
+      z-index: 1001;
+      max-height: min(18rem, calc(100vh - 12rem));
+      overflow-y: auto;
+    }
+  }
+}
+
+.execution-popup-template-fields {
+  margin-top: 0.75rem;
+  background: @execution-popup-bg-light;
+  border: 1px solid @execution-popup-border;
+  border-radius: @execution-popup-border-radius;
+  padding: @execution-popup-padding;
+
+  h4 {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    color: @execution-popup-text-light;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0 0 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .execution-popup-template-scroll {
+    max-height: calc(100vh - 24rem);
+    overflow-y: auto;
+  }
+}
+
+.execution-popup-warning {
+  margin-top: auto;
+  padding: @execution-popup-padding;
+  background: @execution-popup-warning-bg;
+  border: 1px solid @execution-popup-warning-border;
+  border-radius: @execution-popup-border-radius;
+  display: flex;
+  align-items: center;
+  gap: @execution-popup-gap;
+
+  > .icon {
+    margin: 0;
+  }
+
+  p {
+    font-size: 0.875rem;
+    color: @execution-popup-warning-text;
+    line-height: 1.625;
+    margin: 0;
+
+    .count {
+      font-weight: 700;
+      font-size: 1rem;
+    }
+  }
+}
+
+.rule-implementation-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25em;
+  flex-wrap: wrap;
+  min-height: 40px;
+}
+
+.ui.button.subscription-action-button {
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}