feat(connections): use the new wizard for setting up table groups

When in the connection screen and no table groups exists, users will be presented with a two-step wizard to create the table group and (optionally) run the profiling.
DataKitchen · Nov 5, 2024 · 493d4c3 · 493d4c3
1 parent 36da100
commit 493d4c3
Show file tree

Hide file tree

Showing 20 changed files with 1,344 additions and 512 deletions.
diff --git a/testgen/ui/components/frontend/css/shared.css b/testgen/ui/components/frontend/css/shared.css
@@ -24,8 +24,9 @@ body {
     --primary-text-color: #000000de;
     --secondary-text-color: #0000008a;
     --disabled-text-color: #00000042;
-    --caption-text-color: rgba(49, 51, 63, 0.6);
-    /* Match Streamlit's caption color */
+    --caption-text-color: rgba(49, 51, 63, 0.6); /* Match Streamlit's caption color */
+    --border-color: rgba(0, 0, 0, .12);
+    --dk-card-background: #fff;
 
     --sidebar-background-color: white;
     --sidebar-item-hover-color: #f5f5f5;
@@ -34,45 +35,56 @@ body {
 
     --field-underline-color: #9e9e9e;
 
-    --button-text-color: var(--primary-text-color);
-
-    --button-hover-state-background: var(--primary-color);
     --button-hover-state-opacity: 0.12;
 
-    --button-basic-text-color: var(--primary-color);
     --button-basic-background: transparent;
+    --button-basic-text-color: rgba(0, 0, 0, .54);
+    --button-basic-hover-state-background: rgba(0, 0, 0, .54);
 
-    --button-flat-text-color: rgba(255, 255, 255);
-    --button-flat-background: rgba(0, 0, 0, .54);
+    --button-basic-flat-text-color: rgba(0, 0, 0);
+    --button-basic-flat-background: rgba(0, 0, 0, .54);
 
-    --button-stroked-text-color: var(--primary-color);
-    --button-stroked-background: transparent;
-    --button-stroked-border: 1px solid rgba(0, 0, 0, .12);
+    --button-basic-stroked-text-color: rgba(0, 0, 0, .54);
+    --button-basic-stroked-background: transparent;
 
-    --dk-card-background: #fff;
+    --button-primary-background: transparent;
+    --button-primary-text-color: var(--primary-color);
+    --button-primary-hover-state-background: var(--primary-color);
+
+    --button-primary-flat-text-color: rgba(255, 255, 255);
+    --button-primary-flat-background: var(--primary-color);
+
+    --button-primary-stroked-text-color: var(--primary-color);
+    --button-primary-stroked-background: transparent;
+    --button-stroked-border: 1px solid var(--border-color);
 }
 
 @media (prefers-color-scheme: dark) {
     body {
         --primary-text-color: rgba(255, 255, 255);
         --secondary-text-color: rgba(255, 255, 255, .7);
         --disabled-text-color: rgba(255, 255, 255, .5);
-        --caption-text-color: rgba(250, 250, 250, .6);
-        /* Match Streamlit's caption color */
+        --caption-text-color: rgba(250, 250, 250, .6); /* Match Streamlit's caption color */
+        --border-color: rgba(255, 255, 255, .25);
+        --dk-card-background: #14181f;
 
         --sidebar-background-color: #14181f;
         --sidebar-item-hover-color: #10141b;
         --sidebar-active-item-color: #10141b;
         --sidebar-active-item-border-color: #b4e3c9;
         --dk-text-value-background: unset;
 
-        --button-text-color: var(--primary-text-color);
-
-        --button-flat-background: rgba(255, 255, 255, .54);
-
-        --button-stroked-border: 1px solid rgba(255, 255, 255, .12);
-
-        --dk-card-background: #14181f;
+        --button-basic-background: transparent;
+        --button-basic-text-color: rgba(255, 255, 255);
+        --button-basic-hover-state-background: rgba(255, 255, 255, .54);
+
+        --button-basic-flat-text-color: rgba(255, 255, 255);
+        --button-basic-flat-background: rgba(255, 255, 255, .54);
+
+        --button-basic-stroked-text-color: rgba(255, 255, 255, .85);
+        --button-basic-stroked-background: transparent;
+
+        --button-stroked-border: 1px solid var(--border-color);
     }
 }
 
@@ -441,4 +453,4 @@ body {
 .pl-7 {
     padding-left: 40px;
 }
-/*  */
+/*  */
diff --git a/testgen/ui/components/frontend/js/components/button.js b/testgen/ui/components/frontend/js/components/button.js
@@ -2,6 +2,7 @@
  * @typedef Properties
  * @type {object}
  * @property {(string)} type
+ * @property {(string|null)} color
  * @property {(string|null)} label
  * @property {(string|null)} icon
  * @property {(string|null)} tooltip
@@ -21,6 +22,11 @@ const BUTTON_TYPE = {
     ICON: 'icon',
     STROKED: 'stroked',
 };
+const BUTTON_COLOR = {
+    BASIC: 'basic',
+    PRIMARY: 'primary',
+};
+
 
 const Button = (/** @type Properties */ props) => {
     loadStylesheet('button', stylesheet);
@@ -32,6 +38,10 @@ const Button = (/** @type Properties */ props) => {
         if (isIconOnly) { // Force a 40px width for the parent iframe & handle window resizing
             enforceElementWidth(window.frameElement, 40);
         }
+
+        if (props.width?.val) {
+            enforceElementWidth(window.frameElement, props.width?.val);
+        }
     }
 
     if (props.tooltip) {
@@ -42,10 +52,10 @@ const Button = (/** @type Properties */ props) => {
     const onClickHandler = props.onclick || (() => emitEvent('ButtonClicked'));
     return button(
         {
-            class: `tg-button tg-${props.type.val}-button ${props.type.val !== 'icon' && isIconOnly ? 'tg-icon-button' : ''}`,
-            style: props.style?.val,
+            class: `tg-button tg-${props.type.val}-button tg-${props.color?.val ?? 'basic'}-button ${props.type.val !== 'icon' && isIconOnly ? 'tg-icon-button' : ''}`,
+            style: () => `width: ${props.width?.val ?? '100%'}; ${props.style?.val}`,
             onclick: onClickHandler,
-            disabled: !!props.disabled?.val,
+            disabled: props.disabled,
         },
         span({class: 'tg-button-focus-state-indicator'}, ''),
         props.icon ? i({class: 'material-symbols-rounded'}, props.icon) : undefined,
@@ -56,7 +66,6 @@ const Button = (/** @type Properties */ props) => {
 const stylesheet = new CSSStyleSheet();
 stylesheet.replace(`
 button.tg-button {
-    width: 100%;
     height: 40px;
 
     position: relative;
@@ -75,8 +84,6 @@ button.tg-button {
     cursor: pointer;
 
     font-size: 14px;
-    color: var(--button-text-color);
-    background: var(--button-basic-background);
 }
 
 button.tg-button .tg-button-focus-state-indicator::before {
@@ -89,21 +96,9 @@ button.tg-button .tg-button-focus-state-indicator::before {
     position: absolute;
     pointer-events: none;
     border-radius: inherit;
-    background: var(--button-hover-state-background);
-}
-
-button.tg-button.tg-basic-button {
-    color: var(--button-basic-text-color);
-}
-
-button.tg-button.tg-flat-button {
-    color: var(--button-flat-text-color);
-    background: var(--button-flat-background);
 }
 
 button.tg-button.tg-stroked-button {
-    color: var(--button-stroked-text-color);
-    background: var(--button-stroked-background);
     border: var(--button-stroked-border);
 }
 
@@ -135,6 +130,49 @@ button.tg-button > i:has(+ span) {
 button.tg-button:hover:not([disabled]) .tg-button-focus-state-indicator::before {
     opacity: var(--button-hover-state-opacity);
 }
+
+
+/* Basic button colors */
+button.tg-button.tg-basic-button {
+    color: var(--button-basic-text-color);
+    background: var(--button-basic-background);
+}
+
+button.tg-button.tg-basic-button .tg-button-focus-state-indicator::before {
+    background: var(--button-basic-hover-state-background);
+}
+
+button.tg-button.tg-basic-button.tg-flat-button {
+    color: var(--button-basic-flat-text-color);
+    background: var(--button-basic-flat-background);
+}
+
+button.tg-button.tg-basic-button.tg-stroked-button {
+    color: var(--button-basic-stroked-text-color);
+    background: var(--button-basic-stroked-background);
+}
+/* ... */
+
+/* Primary button colors */
+button.tg-button.tg-primary-button {
+    color: var(--button-primary-text-color);
+    background: var(--button-primary-background);
+}
+
+button.tg-button.tg-primary-button .tg-button-focus-state-indicator::before {
+    background: var(--button-primary-hover-state-background);
+}
+
+button.tg-button.tg-primary-button.tg-flat-button {
+    color: var(--button-primary-flat-text-color);
+    background: var(--button-primary-flat-background);
+}
+
+button.tg-button.tg-primary-button.tg-stroked-button {
+    color: var(--button-primary-stroked-text-color);
+    background: var(--button-primary-stroked-background);
+}
+/* ... */
 `);
 
 export { Button };
diff --git a/testgen/ui/components/widgets/__init__.py b/testgen/ui/components/widgets/__init__.py
@@ -1,5 +1,6 @@
 # ruff: noqa: F401
 
+from testgen.ui.components.utils.component import component
 from testgen.ui.components.widgets.breadcrumbs import breadcrumbs
 from testgen.ui.components.widgets.button import button
 from testgen.ui.components.widgets.card import card
@@ -23,3 +24,4 @@
 from testgen.ui.components.widgets.sorting_selector import sorting_selector
 from testgen.ui.components.widgets.summary_bar import summary_bar
 from testgen.ui.components.widgets.testgen_component import testgen_component
+from testgen.ui.components.widgets.wizard import wizard, WizardStep
diff --git a/testgen/ui/components/widgets/button.py b/testgen/ui/components/widgets/button.py
@@ -3,17 +3,20 @@
 from testgen.ui.components.utils.component import component
 
 ButtonType = typing.Literal["basic", "flat", "icon", "stroked"]
+ButtonColor = typing.Literal["basic", "primary"]
 TooltipPosition = typing.Literal["left", "right"]
 
 
 def button(
     type_: ButtonType = "basic",
+    color: ButtonColor = "primary",
     label: str | None = None,
     icon: str | None = None,
     tooltip: str | None = None,
     tooltip_position: TooltipPosition = "left",
     on_click: typing.Callable[..., None] | None = None,
     disabled: bool = False,
+    width: str | int | float | None = None,
     style: str | None = None,
     key: str | None = None,
 ) -> typing.Any:
@@ -26,7 +29,7 @@ def button(
     :param on_click: click handler for this button
     """
 
-    props = {"type": type_, "disabled": disabled}
+    props = {"type": type_, "disabled": disabled, "color": color}
     if type_ != "icon":
         if not label:
             raise ValueError(f"A label is required for {type_} buttons")
@@ -38,6 +41,11 @@ def button(
     if tooltip:
         props.update({"tooltip": tooltip, "tooltipPosition": tooltip_position})
 
+    if width:
+        props.update({"width": width})
+        if isinstance(width, (int, float,)):
+            props.update({"width": f"{width}px"})
+
     if style:
         props.update({"style": style})
 

diff --git a/testgen/ui/components/widgets/testgen_component.py b/testgen/ui/components/widgets/testgen_component.py
@@ -6,7 +6,7 @@
 
 
 def testgen_component(
-    component_id: typing.Literal["profiling_runs", "test_runs"],
+    component_id: typing.Literal["profiling_runs", "test_runs", "database_flavor_selector"],
     props: dict,
     event_handlers: dict | None,
 ) -> dict | None: