feat: move RefreshIndicator to component kit

Author: samuelreichert

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -429,86 +429,6 @@ $root: ".widget-datagrid";
         display: contents;
     }
 
-    &-refresh-container {
-        grid-column: 1 / -1;
-        padding: 0;
-        position: relative;
-    }
-
-    &-refresh-indicator {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: var(--border-color-default, #ced0d3);
-        border: none;
-        border-radius: 2px;
-        color: var(--brand-primary, $dg-brand-primary);
-        height: 4px;
-        width: 100%;
-        position: absolute;
-        left: 0;
-        right: 0;
-
-        &::-webkit-progress-bar {
-            background-color: transparent;
-        }
-
-        &::-webkit-progress-value {
-            background-color: currentColor;
-            transition: all 0.2s;
-        }
-
-        &::-moz-progress-bar {
-            background-color: currentColor;
-            transition: all 0.2s;
-        }
-
-        &::-ms-fill {
-            border: none;
-            background-color: currentColor;
-            transition: all 0.2s;
-        }
-
-        &:indeterminate {
-            background-size: 200% 100%;
-            background-image: linear-gradient(
-                to right,
-                transparent 50%,
-                currentColor 50%,
-                currentColor 60%,
-                transparent 60%,
-                transparent 71.5%,
-                currentColor 71.5%,
-                currentColor 84%,
-                transparent 84%
-            );
-            animation: progress-linear 3s infinite linear;
-        }
-
-        &:indeterminate::-moz-progress-bar {
-            background-color: transparent;
-        }
-
-        &:indeterminate::-ms-fill {
-            animation-name: none;
-        }
-
-        @keyframes progress-linear {
-            0% {
-                background-size: 200% 100%;
-                background-position: left -31.25% top 0%;
-            }
-            50% {
-                background-size: 800% 100%;
-                background-position: left -49% top 0%;
-            }
-            100% {
-                background-size: 400% 100%;
-                background-position: left -102% top 0%;
-            }
-        }
-    }
-
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $dg-grid-selected-row-background;

packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss

@@ -0,0 +1,79 @@
+.mx-refresh-container {
+    grid-column: 1 / -1;
+    padding: 0;
+    position: relative;
+}
+
+.mx-refresh-indicator {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--border-color-default, #ced0d3);
+    border: none;
+    border-radius: 2px;
+    color: var(--brand-primary, $dg-brand-primary);
+    height: 4px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    &::-webkit-progress-bar {
+        background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &::-moz-progress-bar {
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &::-ms-fill {
+        border: none;
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &:indeterminate {
+        background-size: 200% 100%;
+        background-image: linear-gradient(
+            to right,
+            transparent 50%,
+            currentColor 50%,
+            currentColor 60%,
+            transparent 60%,
+            transparent 71.5%,
+            currentColor 71.5%,
+            currentColor 84%,
+            transparent 84%
+        );
+        animation: progress-linear 3s infinite linear;
+    }
+
+    &:indeterminate::-moz-progress-bar {
+        background-color: transparent;
+    }
+
+    &:indeterminate::-ms-fill {
+        animation-name: none;
+    }
+
+    @keyframes progress-linear {
+        0% {
+            background-size: 200% 100%;
+            background-position: left -31.25% top 0%;
+        }
+        50% {
+            background-size: 800% 100%;
+            background-position: left -49% top 0%;
+        }
+        100% {
+            background-size: 400% 100%;
+            background-position: left -102% top 0%;
+        }
+    }
+}

packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss

@@ -6,6 +6,7 @@
 @import "drop-down-sort";
 @import "gallery";
 @import "gallery-design-properties";
+@import "refresh-indicator";
 @import "three-state-checkbox";
 @import "tree-node";
 @import "tree-node-design-properties";

packages/pluggableWidgets/datagrid-web/src/components/RefreshIndicator.tsx renamed to packages/shared/widget-plugin-component-kit/src/RefreshIndicator.tsx

@@ -3,8 +3,8 @@ import { createElement, ReactElement } from "react";
 export function RefreshIndicator(): ReactElement {
     return (
         <div className="tr" role="row">
-            <div className="th widget-datagrid-refresh-container">
-                <progress className="widget-datagrid-refresh-indicator" />
+            <div className="th mx-refresh-container">
+                <progress className="mx-refresh-indicator" />
             </div>
         </div>
     );