replace MessagePage (#2577)

* replaced MessagePage and adjusted css * replaced KymaModules-MessagePage
kyma-project · Sep 20, 2023 · 50ef510 · 50ef510
1 parent ab727d5
commit 50ef510
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 43 deletions.
diff --git a/resources/backend/deployment.yaml b/resources/backend/deployment.yaml
@@ -20,7 +20,7 @@ spec:
     spec:
       containers:
         - name: backend
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2578
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2577
           imagePullPolicy: Always
           resources:
             limits:

diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml
@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2578
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2577
           imagePullPolicy: Always
           resources:
             requests:

diff --git a/src/components/Clusters/views/ClusterList.js b/src/components/Clusters/views/ClusterList.js
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import jsyaml from 'js-yaml';
 import { saveAs } from 'file-saver';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@ui5/webcomponents-react';
-import { MessagePage } from 'fundamental-react';
+import { Button, IllustratedMessage } from '@ui5/webcomponents-react';
+import '@ui5/webcomponents-fiori/dist/illustrations/NoEntries';
 import { Link } from 'react-router-dom';
 
 import { useClustersInfo } from 'state/utils/getClustersInfo';
@@ -200,32 +200,26 @@ function ClusterList() {
   );
 
   if (!entries.length) {
-    const subtitle = t('clusters.empty.subtitle');
     return (
       <>
         {addDialog}
-        <MessagePage
+        <IllustratedMessage
+          name="NoEntries"
+          size="Scene"
           className="empty-cluster-list"
-          image={
-            <svg role="presentation" className="fd-message-page__icon">
-              <use xlinkHref="#sapIllus-Dialog-NoData"></use>
-            </svg>
-          }
-          title={t('clusters.empty.title')}
-          subtitle={subtitle}
-          actions={
-            <>
-              <Button
-                onClick={() => setShowAdd(true)}
-                className="fd-margin-end--tiny fd-margin-begin--tiny"
-              >
-                {t('clusters.add.title')}
-              </Button>
-              {gardenerLoginButton}
-              {loadDefaultClusterButton}
-            </>
-          }
-        />
+          titleText={t('clusters.empty.title')}
+          subtitleText={t('clusters.empty.subtitle')}
+        >
+          <Button
+            onClick={() => setShowAdd(true)}
+            className="fd-margin-end--tiny fd-margin-begin--tiny"
+            design="Emphasized"
+          >
+            {t('clusters.add.title')}
+          </Button>
+          {gardenerLoginButton}
+          {loadDefaultClusterButton}
+        </IllustratedMessage>
       </>
     );
   }

diff --git a/src/components/Clusters/views/ClusterList.scss b/src/components/Clusters/views/ClusterList.scss
@@ -4,13 +4,11 @@
   margin-left: 10px;
 }
 
-.fd-message-page.empty-cluster-list {
+.empty-cluster-list {
   height: 100vh;
-
-  .fd-message-page__icon {
-    width: 160px;
-    height: 160px;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .cluster-disabled-subtitle a {

diff --git a/src/components/Extensibility/components/MessagePage.js b/src/components/Extensibility/components/MessagePage.js
@@ -1,4 +1,5 @@
-import { MessagePage } from 'fundamental-react';
+import { IllustratedMessage } from '@ui5/webcomponents-react';
+import '@ui5/webcomponents-fiori/dist/illustrations/NoData';
 
 import { Widget, InlineWidget } from './Widget';
 import { useGetTranslation } from '../helpers';
@@ -13,15 +14,13 @@ export function MessagePanel({
   const { t: tExt } = useGetTranslation();
 
   return (
-    <MessagePage
-      image={
-        <svg role="img" className="fd-message-page__icon">
-          <use xlinkHref="#sapIllus-Scene-NoData" />
-        </svg>
-      }
-      title={tExt(structure?.title)}
-      subtitle={tExt(structure?.subtitle)}
-      actions={structure.children.map((def, idx) => (
+    <IllustratedMessage
+      name="NoData"
+      size="Scene"
+      titleText={tExt(structure?.title)}
+      subtitleText={tExt(structure?.subtitle)}
+    >
+      {structure.children.map((def, idx) => (
         <Widget
           key={idx}
           value={value}
@@ -32,6 +31,6 @@ export function MessagePanel({
           {...props}
         />
       ))}
-    />
+    </IllustratedMessage>
   );
 }