[UI] #4581 - Migrate error, loading and logout pages (#4582)

* #4581 Done Signed-off-by: StanZGenchev <stan.z.genchev@gmail.com> * Fixed tests Signed-off-by: StanZGenchev <stan.z.genchev@gmail.com> --------- Signed-off-by: StanZGenchev <stan.z.genchev@gmail.com>
eclipse-dirigible · Jan 23, 2025 · cefbf64 · cefbf64
1 parent 9a3ef24
commit cefbf64
Show file tree

Hide file tree

Showing 26 changed files with 636 additions and 740 deletions.
diff --git a/...form/platform-core/src/main/resources/META-INF/dirigible/platform-core/services/loader.js b/...form/platform-core/src/main/resources/META-INF/dirigible/platform-core/services/loader.js
@@ -125,6 +125,7 @@ function getLocations(scriptId) {
         '/platform-core/ui/blimpkit/input.js',
         '/platform-core/ui/blimpkit/link.js',
         '/platform-core/ui/blimpkit/list.js',
+        '/platform-core/ui/blimpkit/loader.js',
         '/platform-core/ui/blimpkit/menu.js',
         '/platform-core/ui/blimpkit/message-box.js',
         '/platform-core/ui/blimpkit/message-page.js',
@@ -144,6 +145,7 @@ function getLocations(scriptId) {
         '/platform-core/ui/blimpkit/table.js',
         '/platform-core/ui/blimpkit/textarea.js',
         '/platform-core/ui/blimpkit/tile.js',
+        '/platform-core/ui/blimpkit/title.js',
         '/platform-core/ui/blimpkit/token.js',
         '/platform-core/ui/blimpkit/tokenizer.js',
         '/platform-core/ui/blimpkit/tool-header.js',

diff --git a/...platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/blimpkit.js b/...platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/blimpkit.js
@@ -10,7 +10,7 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 const blimpkit = angular.module('blimpKit', ['ngAria'])
-    .info({ version: '1.0.9' })
+    .info({ version: '1.1.0' })
     .constant('ScreenEdgeMargin', {
         FULL: 16,
         DOUBLE: 32,

diff --git a/...m/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/loader.js b/...m/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/loader.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2024 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors
+ * SPDX-License-Identifier: EPL-2.0
+ */
+blimpkit.directive('bkLoader', (classNames) => ({
+    restrict: 'E',
+    transclude: false,
+    replace: true,
+    scope: {
+        size: '@?',
+        contrast: '<?'
+    },
+    link: (scope) => {
+        scope.getClasses = () => classNames('bk-loader', {
+            'bk-loader--l': scope.size === 'l',
+            'bk-loader--contrast': scope.contrast === true,
+        });
+    },
+    template: '<div ng-class="getClasses()"></div>'
+}));
diff --git a/...rm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/title.js b/...rm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/blimpkit/title.js
@@ -9,33 +9,25 @@
  * SPDX-FileCopyrightText: Eclipse Dirigible contributors
  * SPDX-License-Identifier: EPL-2.0
  */
-blimpkit.directive('bkTitle', function () {
-    /**
-     * headerSize: Number - If specified overrides the size of the heading element. Must be a number between 1 and 6 inclusive
-     * wrap: Boolean - Whether or not the title should wrap
-     */
-    return {
-        restrict: 'A',
-        scope: {
-            headerSize: '<',
-            wrap: '<?'
-        },
-        link: function (scope, element) {
-            element.addClass('fd-title');
-            if (scope.wrap) element.addClass(`fd-title--wrap`);
+blimpkit.directive('bkTitle', () => ({
+    restrict: 'A',
+    scope: {
+        headerSize: '<',
+        wrap: '<?'
+    },
+    link: (scope, element) => {
+        element.addClass('fd-title');
+        if (scope.wrap) element.addClass(`fd-title--wrap`);
 
-            function setHeaderSize(_newSize, oldSize) {
-                if (scope.headerSize) {
-                    if (scope.headerSize >= 1 && scope.headerSize <= 6) {
-                        if (oldSize) element.removeClass(`fd-title--h${oldSize}`);
-                        element.addClass(`fd-title--h${scope.headerSize}`);
-                    } else console.error(`bk-title error: 'header-size' must be a number between 1 and 6 inclusive`);
-                }
+        function setHeaderSize(_newSize, oldSize) {
+            if (scope.headerSize) {
+                if (scope.headerSize >= 1 && scope.headerSize <= 6) {
+                    if (oldSize) element.removeClass(`fd-title--h${oldSize}`);
+                    element.addClass(`fd-title--h${scope.headerSize}`);
+                } else console.error(`bk-title error: invalid 'header-size' value`);
             }
-            const headerSizeWatcher = scope.$watch('headerSize', setHeaderSize);
-            scope.$on('$destroy', function () {
-                headerSizeWatcher();
-            });
         }
+        const headerSizeWatcher = scope.$watch('headerSize', setHeaderSize);
+        scope.$on('$destroy', () => { headerSizeWatcher() });
     }
-});
+}));
diff --git a/...rm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/platform/shell.js b/...rm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/platform/shell.js
@@ -427,7 +427,7 @@ angular.module('platformShell', ['ngCookies', 'platformUser', 'platformExtension
         },
         template: `<div class="statusbar">
             <div class="statusbar-busy" ng-if="busy">
-                <bk-busy-indicator size="m"></bk-busy-indicator>
+                <bk-loader contrast="true"></bk-loader>
                 <span class="statusbar--text">{{ busy }}</span>
             </div>
             <div class="statusbar-message" ng-style="{'visibility': message ? 'visible':'hidden'}">

diff --git a/.../platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/styles/blimpkit.css b/.../platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/styles/blimpkit.css
@@ -196,6 +196,60 @@ ng-transclude:empty {
   color: var(--sapSelectedColor, #fecc04);
 }
 
+/* Loader */
+
+.bk-loader {
+  --bkLoader_Size: 1rem;
+  --bkLoader_BorderWidth: 0.125rem;
+  --bkLoader_Color: var(--fdBusy_Indicator_Dot_Color);
+  display: block;
+  border: var(--bkLoader_BorderWidth) solid transparent;
+  border-radius: 50%;
+  border-top: var(--bkLoader_BorderWidth) solid var(--bkLoader_Color);
+  border-bottom: var(--bkLoader_BorderWidth) solid var(--bkLoader_Color);
+  box-sizing: border-box;
+  width: var(--bkLoader_Size);
+  height: var(--bkLoader_Size);
+  -webkit-animation: loader 1.6s linear infinite;
+  animation: loader 1.6s linear infinite;
+}
+
+.bk-loader--l {
+  --bkLoader_Size: 2rem;
+  --bkLoader_BorderWidth: 0.25rem;
+}
+
+.bk-loader--contrast {
+  --bkLoader_Color: var(--fdBusy_Indicator_Dot_Contrast_Color);
+}
+
+.fd-list__item>.bk-loader:first-child {
+  -webkit-margin-start: -0.125rem;
+  margin-inline-start: -0.125rem;
+  -webkit-margin-end: 0.875rem;
+  margin-inline-end: 0.875rem;
+}
+
+@-webkit-keyframes loader {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* General helper classes */
 .bk-padding--tiny {
   padding: 0.5rem;

diff --git a/...orm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/styles/shell.css b/...orm/platform-core/src/main/resources/META-INF/dirigible/platform-core/ui/styles/shell.css
@@ -95,6 +95,11 @@ body {
     box-sizing: border-box;
 }
 
+.statusbar-busy {
+    padding-inline: 0.5rem;
+    gap: 0.5rem;
+}
+
 .statusbar-busy,
 .statusbar-message,
 .statusbar-error {

diff --git a/components/security/security-basic/src/main/resources/public/error.html b/components/security/security-basic/src/main/resources/public/error.html
@@ -15,57 +15,42 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="errorPage" ng-controller="ErrorPageController">
 
     <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="icon" href="/services/web/resources/images/favicon.ico" />
-        <title>Unexpected Error Occurred</title>
-        <theme></theme>
-        <script type="text/javascript" src="/services/js/resources-core/services/loader.js?id=application-view-js">
-        </script>
-        <link type="text/css" rel="stylesheet"
-            href="/services/js/resources-core/services/loader.js?id=application-view-css" />
+        <link rel="icon" href="data:;base64,iVBORw0KGgo=" brand-icon />
+        <title config-title></title>
+        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=view-js"></script>
+        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
     </head>
 
-    <body class="fd-scrollbar" dg-contextmenu="contextMenuContent">
-
-        <div style="height: 600px; width: 100%;">
-            <fd-message-page glyph="sap-icon--error">
-                <fd-message-page-title>Unexpected Error Occurred</fd-message-page-title>
-                <fd-message-page-subtitle>
-                    <b>There was a problem serving the requested page</b>.
-                    <br>
-                    Usually this means that an enexpected error
-                    happened while processing your request. Here's what you can try next:
-                    <br>
-                    <br>
-                    <i><b>Reload the page</b>, the problem may be temporary. If the problem persists, <b>contact us</b>
-                        and we'll
-                        help get you on your way.</i>
-                </fd-message-page-subtitle>
-                <fd-message-page-actions>
-                    <fd-button compact="true" dg-label="Reload Page" dg-type="emphasized" style="margin: 0 0.25rem;"
-                        ng-click="reloadPage()">
-                    </fd-button>
-                    <fd-button compact="true" dg-label="Contact Support" ng-click="contactSupport()"></fd-button>
-                </fd-message-page-actions>
-            </fd-message-page>
-        </div>
+    <body class="bk-center" bk-scrollbar>
+        <bk-message-page glyph="sap-icon--error">
+            <bk-message-page-title>Unexpected Error Occurred</bk-message-page-title>
+            <bk-message-page-subtitle class="bk-vbox bk-box--gap-m">
+                <b>There was a problem serving the requested page.</b>
+                Usually this means that an enexpected error happened while processing your request.
+                Here's what you can try next:
+                <i><b>Reload the page</b>, the problem may be temporary.
+                    If the problem persists, <b>contact us</b>and we'll help get you on your way.</i>
+            </bk-message-page-subtitle>
+            <bk-message-page-actions class="bk-box--gap">
+                <bk-button compact="true" label="Reload Page" state="emphasized" ng-click="reloadPage()"></bk-button>
+                <bk-button compact="true" label="Contact Support" ng-click="contactSupport()"></bk-button>
+            </bk-message-page-actions>
+        </bk-message-page>
 
         <script>
-            let errorPage = angular.module('errorPage', ['ideUI', 'ideView']);
-
-			errorPage.controller('ErrorPageController', ['$scope', 'theming', function ($scope, theming) {
-
-				$scope.reloadPage = function() {
-					location.reload();
-				};
-
-				$scope.contactSupport = function() {
-					window.open("https://bugs.dirigible.io", "_blank");
-				};
-			}]);
+            const viewData = {
+                label: 'Unexpected Error Occurred',
+                autoFocusTab: false
+            };
+            const errorPage = angular.module('errorPage', ['blimpKit', 'platformView']);
+            errorPage.controller('ErrorPageController', ($scope) => {
+                $scope.reloadPage = () => location.reload();
+                $scope.contactSupport = () => window.open("https://bugs.dirigible.io", "_blank");
+            });
         </script>
+        <theme></theme>
     </body>
 
 </html>
diff --git a/components/security/security-basic/src/main/resources/public/error/403.html b/components/security/security-basic/src/main/resources/public/error/403.html
@@ -15,38 +15,33 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="errorPage" ng-controller="ErrorPageController">
 
     <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="icon" href="/services8/web/resources/images/favicon.ico" />
-        <title>Access Denied</title>
-        <theme></theme>
-        <script type="text/javascript" src="/services/js/resources-core/services/loader.js?id=application-view-js">
-        </script>
-        <link type="text/css" rel="stylesheet"
-            href="/services/js/resources-core/services/loader.js?id=application-view-css" />
-    </head>
+        <link rel="icon" href="data:;base64,iVBORw0KGgo=" brand-icon />
+        <title config-title></title>
+        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=view-js"></script>
+        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
 
-    <body class="fd-scrollbar" dg-contextmenu="contextMenuContent">
+        <title></title>
+    </head>
 
-        <div style="height: 600px; width: 100%;">
-            <fd-message-page glyph="sap-icon--alert">
-                <fd-message-page-title>Access Denied</fd-message-page-title>
-                <fd-message-page-subtitle>
-                    <b>The page you're trying to access has resctricted access</b>.
-                    <br>
-                    Contact your system administrator for more details.
-                </fd-message-page-subtitle>
-            </fd-message-page>
-        </div>
+    <body class="bk-center" bk-scrollbar>
+        <bk-message-page glyph="sap-icon--alert">
+            <bk-message-page-title>Access Denied</bk-message-page-title>
+            <bk-message-page-subtitle class="bk-vbox bk-box--gap-m">
+                <b>The page you're trying to access has resctricted access.</b>
+                <span>Contact your system administrator for more details.</span>
+            </bk-message-page-subtitle>
+        </bk-message-page>
 
         <script>
-            let errorPage = angular.module('errorPage', ['ideUI', 'ideView']);
-
-			errorPage.controller('ErrorPageController', ['$scope', 'theming', function ($scope, theming) {
-
-			}]);
+            const viewData = {
+                label: 'Access Denied',
+                autoFocusTab: false
+            };
+            angular.module('errorPage', ['blimpKit', 'platformView']).controller('ErrorPageController', () => { });
         </script>
+        <theme></theme>
     </body>
 
 </html>