WIP: Fix async validators

java/buildconf/manager-developer-build.properties.example

@@ -10,3 +10,15 @@ deploy.host = d52.suse.de
 # Uncomment to get javascript sourcemaps in Reactjs pages
 #javascript.devel = true
 
+# Define the way to deploy. Possible values:
+#
+# local             : deploy to local instance of uyuni
+# remote (default)  : deploy to remote instance of uyuni defined in deploy.host through ssh connection.
+# container         : use mgrctl to deploy to a containerized server. The deploy.host will be ignored.
+# remote-container  : use SSH to connect to deploy.host, then run mgrctl on the remote system and deploy to
+#                     a containerized server
+#deploy.mode = remote
+
+# Backend to be used by mgrctl when deploying in container and remote-container mode. By default, mgrctl tries to
+# autodetect the correct backend. Possible values can be looked up by checking mgrctl documentation.
+#container.backend = podman

testsuite/podman_runner/09_build_server_code.sh

@@ -30,7 +30,7 @@ sudo -i podman exec server bash -c "[ -d /usr/share/susemanager/www/tomcat/webap
 # to try again and hope it succeeds.
 
 sudo -i podman exec server bash -c "cd /java && ant -f manager-build.xml ivy || ant -f manager-build.xml ivy || ant -f manager-build.xml ivy"
-sudo -i podman exec server bash -c "cd /java && ant -f manager-build.xml refresh-branding-jar deploy-local"
+sudo -i podman exec server bash -c "cd /java && ant -f manager-build.xml -Ddeploy.mode=local refresh-branding-jar deploy"
 sudo -i podman exec server bash -c "set -xe;cd /web/html/src;[ -d dist ] || mkdir dist;yarn install --force --ignore-optional --production=true --frozen-lockfile;yarn autoclean --force;yarn build:novalidate; rsync -a dist/ /usr/share/susemanager/www/htdocs/"
 sudo -i podman exec server bash -c "rctomcat restart"
 sudo -i podman exec server bash -c "rctaskomatic restart"

web/README.md

@@ -24,6 +24,7 @@ The following scripts cover most day-to-day uses, see `web/html/src/package.json
 
  - Run lint with autofixer: `yarn lint`
  - Run unit tests: `yarn test`  
+ - Run a single set of tests: `yarn test path/to/file.test.ts`  
  - Run the Typescript checker: `yarn tsc`  
  - Build the web UI: `yarn build`  
  - Run lint, tests, Typescript checker, and build the application: `yarn all`  

web/html/src/branding/css/susemanager/components/alerts.less

@@ -75,7 +75,7 @@
 .alert-danger,
 .Toastify__toast--error {
   background-color: @eos-bc-red-100;
-  border-left: 5px solid @eos-bc-red-900;
+  border-left: 5px solid @eos-bc-red-600;
   color: @eos-bc-gray-1000;
 
   &:before {

web/html/src/branding/css/susemanager/components/alerts.scss

@@ -75,7 +75,7 @@
 .alert-danger,
 .Toastify__toast--error {
   background-color: $eos-bc-red-100;
-  border-left: 5px solid $eos-bc-red-900;
+  border-left: 5px solid $eos-bc-red-600;
   color: $eos-bc-gray-1000;
 
   &:before {

web/html/src/branding/css/susemanager/components/buttons.less

@@ -5,6 +5,8 @@
 .btn-success,
 .btn-warning,
 .btn-danger {
+  user-select: auto;
+
   i.fa::before {
     // No text-decoration for the icon text, see https://stackoverflow.com/a/19529256/1470607
     display: inline-block;

web/html/src/branding/css/susemanager/components/buttons.scss

@@ -5,6 +5,8 @@
 .btn-success,
 .btn-warning,
 .btn-danger {
+  user-select: auto;
+
   i.fa::before {
     // No text-decoration for the icon text, see https://stackoverflow.com/a/19529256/1470607
     display: inline-block;

web/html/src/branding/css/susemanager/components/buttons.suma.less

@@ -77,26 +77,15 @@
   }
 }
 
-.btn-link {
-  &,
-  &:active,
-  &:focus,
-  &:disabled,
-  &.disabled {
-    &,
-    &:hover {
-      color: @link-color;
-      font-weight: normal;
-    }
+.btn {
+  background: transparent;
 
-    &:not(:disabled):not(.disabled):not(.text-muted):hover {
-      text-decoration: underline;
-    }
+  &.disabled,
+  &:disabled {
+    border-color: transparent;
   }
 }
 
-// TODO: Add :active and :focus states for green etc
-// NB! Here and below, these are not nested because they're not used consistently along with .btn
 .btn-default {
   &,
   &:active,
@@ -116,6 +105,7 @@
   }
 }
 
+// TODO: Make this obsolete and move it into the search module instead
 .btn-default-inverse {
   &,
   &:active,
@@ -173,6 +163,24 @@
   }
 }
 
+.btn-info {
+  &,
+  &:active,
+  &:focus,
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      background: @eos-bc-cerulean-400;
+      border-color: @eos-bc-cerulean-400;
+
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+        background: @eos-bc-gray-900;
+      }
+    }
+  }
+}
+
 // Warning shouldn't currently be used anywhere, but cover it just in case
 .btn-warning,
 .btn-danger {
@@ -187,11 +195,6 @@
       border-color: @eos-bc-red-500;
       color: @eos-bc-white;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover {
-        background: @eos-bc-red-900;
-        border-color: @eos-bc-red-900;
-      }
-
       &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
         background: @eos-bc-gray-900;
       }

web/html/src/branding/css/susemanager/components/buttons.suma.scss

@@ -8,8 +8,7 @@
   font-weight: bold;
   padding: 8px 16px;
   position: relative;
-  border-style: solid;
-  border-width: 2px;
+  border: 2px solid transparent;
   filter: none;
   transition: none;
   text-decoration: none;
@@ -71,8 +70,15 @@
   }
 }
 
-// TODO: Add :active and :focus states for green etc
-// NB! Here and below, these are not nested because they're not used consistently along with .btn
+.btn {
+  background: transparent;
+
+  &.disabled,
+  &:disabled {
+    border-color: transparent;
+  }
+}
+
 .btn-default {
   &,
   &:active,
@@ -92,6 +98,7 @@
   }
 }
 
+// TODO: Make this obsolete and move it into the search module instead
 .btn-default-inverse {
   &,
   &:active,
@@ -157,10 +164,11 @@
   &.disabled {
     &,
     &:hover {
-      border-color: $eos-bc-cerulean-500;
+      background: $eos-bc-cerulean-400;
+      border-color: $eos-bc-cerulean-400;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover {
-        color: $white;
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+        background: $eos-bc-gray-900;
       }
     }
   }
@@ -180,11 +188,6 @@
       border-color: $eos-bc-red-500;
       color: $eos-bc-white;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover {
-        background: $eos-bc-red-900;
-        border-color: $eos-bc-red-900;
-      }
-
       &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
         background: $eos-bc-gray-900;
       }

web/html/src/branding/css/susemanager/components/buttons.uyuni.less

@@ -1,18 +1,92 @@
+.btn {
+  &, &:hover {
+    color: @body-color;
+    background: transparent;
+
+    &.disabled,
+    &:disabled {
+      border-color: transparent;
+    }
+  }
+}
+
+// These are grandfathered old styles so we're consistent between Bootstrap 3 and 5
 .btn-default {
-  background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
-  border-color: #ccc;;
-  color: #5F5F5F;
+  &, &:hover {
+    background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
+    border-color: #e6e6e6;
+    color: #5F5F5F;
+
+    &:hover {
+      border-color: #929292;
+    }
+
+    &, &:disabled, &.disabled {
+      border-color: #ccc;
+    }
+  }
 }
 
 .btn-primary,
 .btn-success {
-  background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%);
-  border-color: #00C081;
-  color: #fff;
+  &, &:hover {
+    background-image: linear-gradient(to bottom, #00da92 0%, #00C081 100%);
+    color: #fff;
+
+    &:hover {
+      border-color: #009060;
+    }
+
+    &, &:disabled, &.disabled {
+      border-color: #00C081;
+    }
+  }
 }
 
+.btn-warning {
+  &, &:hover {
+    background-image: linear-gradient(to bottom, #ffb638 0%, #e59409 100%);
+    color: #fff;
+
+    &:hover {
+      border-color: #b46c00;
+    }
+
+    &, &:disabled, &.disabled {
+      color: #fff;
+      border-color: #e59409;
+    }
+  }
+}
 
-.btn-warning,
 .btn-danger {
-  // Use the default Bootstrap styles
+  &, &:hover {
+    background-image: linear-gradient(to bottom, #f53933 0%, #c81b16 100%);
+    color: #fff;
+
+    &:hover {
+      border-color: #840703;
+    }
+
+    &, &:disabled, &.disabled {
+      color: #fff;
+      border-color: #c81b16;
+    }
+  }
+}
+
+.btn-info {
+  &, &:hover {
+    background-image: linear-gradient(to bottom, #59d4f9 0%, #23bdea 100%);
+    color: #fff;
+
+    &:hover {
+      border-color: #047fa4;
+    }
+
+    &, &:disabled, &.disabled {
+      color: #fff;
+      border-color: #23bdea;
+    }
+  }
 }