Refactor visualization page to remove jQuery logic

uyuni-project · Oct 23, 2023 · 2defae3 · 2defae3
1 parent c313992
commit 2defae3
Show file tree

Hide file tree

Showing 5 changed files with 403 additions and 203 deletions.
diff --git a/web/html/src/branding/css/base/visualization.less b/web/html/src/branding/css/base/visualization.less
@@ -7,10 +7,6 @@
   display: inline-block;
 }
 
-.no-bold {
-  font-weight: normal!important;
-}
-
 .inline-icon {
   i {
     width: 1em;
@@ -49,7 +45,6 @@
 
 #visualization-filter-wrapper {
   display: none;
-  overflow-y: auto;
   background: lighten(@gray-light, 8%);
   font-size: 0.9em;
   border: 1px solid #ddd;
@@ -83,10 +78,9 @@
     vertical-align: top;
     padding: 3px 10px;
     > .filter-title {
-      max-width: 250px;
       font-weight: bold;
-      padding: 4px 2px;
       margin-right: 4px;
+      margin-bottom: 4px;
     }
     label {
       font-weight: normal;
@@ -124,6 +118,32 @@
     .grpCriterion {
       margin-top: 1px;
     }
+
+    .btn-group {
+      margin-top: 8px;
+      display: block;
+    }
+
+    .combobox {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 250px;
+      margin-top: 4px;
+
+      > form {
+        flex: 1;
+        display: block;
+
+        .form-group {
+          margin: 0 !important;
+        }
+
+        .help-block {
+          display: none !important;
+        }
+      }
+    }
   }
   select {
     width: 100%;

diff --git a/web/html/src/components/combobox.tsx b/web/html/src/components/combobox.tsx
@@ -23,6 +23,7 @@ type ComboboxProps = {
   onFocus?: () => void;
   onSelect: (value: ComboboxItem) => void;
   getNewOptionData?: (userInput: string, label: string) => { id: string; value: string; label: string };
+  placeholder?: string;
 
   /** Id for testing purposes */
   "data-testid"?: string;
@@ -94,6 +95,7 @@ export class Combobox extends React.Component<ComboboxProps, ComboboxState> {
         menuPortalTarget={document.body}
         formatCreateLabel={(label: string) => t("Create {label}", { label })}
         getNewOptionData={this.props.getNewOptionData}
+        placeholder={this.props.placeholder}
         {...testAttributes}
       />
     );

diff --git a/web/html/src/manager/visualization/data-tree.ts b/web/html/src/manager/visualization/data-tree.ts
@@ -63,19 +63,19 @@ function dataTree(data, container) {
 
   function instance() {}
 
-  instance.data = function (d) {
+  instance.data = function (d?: any) {
     return arguments.length ? ((data = d), instance) : data;
   };
 
-  instance.preprocessor = function (p) {
+  instance.preprocessor = function (p?: any): any {
     return arguments.length ? ((preprocessor = p), instance) : preprocessor;
   };
 
-  instance.filters = function (f) {
+  instance.filters = function (f?: any) {
     return arguments.length ? ((filters = f), instance) : filters;
   };
 
-  instance.partitioning = function (p) {
+  instance.partitioning = function (p?: any) {
     return arguments.length ? ((partitioning = p), instance) : partitioning;
   };