use MessageAlert to display a helpful message (#292)

* use MessageAlert to display a helpful message * removed MessageAlertHeader, reuse ErrorAlertHeader * fix use of t push origin children prop
vmware-tanzu · May 1, 2018 · 031cdb0 · 031cdb0
1 parent c35fba2
commit 031cdb0
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 112 deletions.
diff --git a/dashboard/src/components/AppList/AppList.tsx b/dashboard/src/components/AppList/AppList.tsx
@@ -53,7 +53,7 @@ class AppList extends React.Component<IAppListProps, { error?: boolean }> {
             </div>
             {items.length > 0 && (
               <div className="col-4 text-r align-center">
-                <Link to={`/charts`}>
+                <Link to="/charts">
                   <button className="button button-accent">Deploy App</button>
                 </Link>
               </div>
@@ -77,21 +77,18 @@ class AppList extends React.Component<IAppListProps, { error?: boolean }> {
   public appListItems(items: IAppState["items"]) {
     if (items.length === 0) {
       return (
-        <MessageAlert
-          header={"Supercharge your Kubernetes cluster"}
-          children={
-            <div>
-              <p className="margin-v-normal">
-                Deploy applications on your Kubernetes cluster with a single click.
-              </p>
-              <div className="padding-b-normal">
-                <Link className="button button-accent" to="/charts">
-                  Deploy App
-                </Link>
-              </div>
+        <MessageAlert header="Supercharge your Kubernetes cluster">
+          <div>
+            <p className="margin-v-normal">
+              Deploy applications on your Kubernetes cluster with a single click.
+            </p>
+            <div className="padding-b-normal">
+              <Link className="button button-accent" to="/charts">
+                Deploy App
+              </Link>
             </div>
-          }
-        />
+          </div>
+        </MessageAlert>
       );
     } else {
       return (

diff --git a/dashboard/src/components/ErrorAlert/ErrorAlertHeader.css b/dashboard/src/components/ErrorAlert/ErrorAlertHeader.css
@@ -10,7 +10,7 @@
 .error__icon > svg {
   position: relative;
   color: #ffffff;
-  top: 1px;
-  left: 2.5px;
+  top: 3px;
+  left: 3px;
   margin: auto;
 }
diff --git a/dashboard/src/components/ErrorAlert/MessageAlert.tsx b/dashboard/src/components/ErrorAlert/MessageAlert.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
+import { Info } from "react-feather";
 
-import MessageAlertHeader from "./MessageAlertHeader";
+import ErrorPageHeader from "./ErrorAlertHeader";
 
 interface IMessageAlertPageProps {
   header: string;
@@ -12,7 +13,7 @@ class MessageAlertPage extends React.Component<IMessageAlertPageProps> {
     const { children, header } = this.props;
     return (
       <div className="alert margin-c">
-        <MessageAlertHeader>{header}</MessageAlertHeader>
+        <ErrorPageHeader icon={Info}>{header}</ErrorPageHeader>
         {children && <div className="message__content margin-l-enormous">{children}</div>}
       </div>
     );

diff --git a/dashboard/src/components/ErrorAlert/MessageAlertHeader.css b/dashboard/src/components/ErrorAlert/MessageAlertHeader.css
diff --git a/dashboard/src/components/ErrorAlert/MessageAlertHeader.tsx b/dashboard/src/components/ErrorAlert/MessageAlertHeader.tsx
diff --git a/dashboard/src/components/FunctionList/FunctionList.tsx b/dashboard/src/components/FunctionList/FunctionList.tsx
@@ -75,27 +75,23 @@ class FunctionList extends React.Component<IFunctionListProps> {
         {this.props.error ? (
           this.renderError()
         ) : this.props.functions.length === 0 ? (
-          <MessageAlert
-            header={"Unleash the power of Kubeless"}
-            children={
-              <div>
-                <p className="margin-v-normal">
-                  Kubeless is a Kubernetes-native serverless framework that lets you deploy small
-                  bits of code (functions) without having to worry about the underlying
-                  infrastructure.
-                </p>
-                <div className="padding-t-normal padding-b-normal">
-                  <FunctionDeployButton
-                    error={this.props.createError}
-                    deployFunction={this.props.deployFunction}
-                    navigateToFunction={this.props.navigateToFunction}
-                    runtimes={this.props.runtimes}
-                    namespace={this.props.namespace}
-                  />
-                </div>
+          <MessageAlert header="Unleash the power of Kubeless">
+            <div>
+              <p className="margin-v-normal">
+                Kubeless is a Kubernetes-native serverless framework that lets you deploy small bits
+                of code (functions) without having to worry about the underlying infrastructure.
+              </p>
+              <div className="padding-t-normal padding-b-normal">
+                <FunctionDeployButton
+                  error={this.props.createError}
+                  deployFunction={this.props.deployFunction}
+                  navigateToFunction={this.props.navigateToFunction}
+                  runtimes={this.props.runtimes}
+                  namespace={this.props.namespace}
+                />
               </div>
-            }
-          />
+            </div>
+          </MessageAlert>
         ) : (
           <CardGrid>{chartItems}</CardGrid>
         )}

diff --git a/dashboard/src/components/InstanceListView/index.tsx b/dashboard/src/components/InstanceListView/index.tsx
@@ -6,6 +6,7 @@ import { IServiceBroker, IServicePlan } from "../../shared/ServiceCatalog";
 import { IServiceInstance } from "../../shared/ServiceInstance";
 import { ForbiddenError, IRBACRole } from "../../shared/types";
 import {
+  MessageAlert,
   PermissionsErrorAlert,
   ServiceBrokersNotFoundAlert,
   ServiceCatalogNotInstalledAlert,
@@ -75,39 +76,58 @@ export class InstanceListView extends React.PureComponent<InstanceListViewProps>
     const { error, isInstalled, brokers, instances, classes } = this.props;
 
     return (
-      <div className="InstanceList">
-        <h1 className="margin-b-reset">Service Instances</h1>
-        <hr />
-        {isInstalled ? (
-          <div>
-            {error ? (
-              this.renderError()
-            ) : brokers.length > 0 ? (
-              <div>
-                <div className="row align-center">
-                  <div className="col-8">
-                    <p>Service instances from your brokers:</p>
-                  </div>
-                  <div className="col-4 text-r">
-                    <Link to={`/services/classes`}>
-                      <button className="button button-accent">Provision New Service</button>
-                    </Link>
-                  </div>
-                </div>
-                {instances.length > 0 ? (
-                  <InstanceCardList instances={instances} classes={classes} />
-                ) : (
-                  <div>No service instances are found.</div>
-                )}
+      <section className="InstanceList">
+        <header className="InstanceList__header">
+          <div className="row padding-t-big collapse-b-phone-land">
+            <div className="col-8">
+              <h1 className="margin-v-reset">Service Instances</h1>
+            </div>
+            {instances.length > 0 && (
+              <div className="col-4 text-r align-center">
+                <Link to="/services/classes">
+                  <button className="button button-accent">Deploy Service Instance</button>
+                </Link>
               </div>
-            ) : (
-              <ServiceBrokersNotFoundAlert />
             )}
           </div>
-        ) : (
-          <ServiceCatalogNotInstalledAlert />
-        )}
-      </div>
+          <hr />
+        </header>
+        <main>
+          {isInstalled ? (
+            <div>
+              {error ? (
+                this.renderError()
+              ) : brokers.length > 0 ? (
+                <div>
+                  {instances.length > 0 ? (
+                    <InstanceCardList instances={instances} classes={classes} />
+                  ) : (
+                    <MessageAlert header="Provision External Services from the Kubernetes Service Catalog">
+                      <div>
+                        <p className="margin-v-normal">
+                          Kubeapps lets you browse, provision and manage external services provided
+                          by the Service Brokers configured in your cluster.
+                        </p>
+                        <div className="padding-t-normal padding-b-normal">
+                          <Link to="/services/classes">
+                            <button className="button button-accent">
+                              Deploy Service Instance
+                            </button>
+                          </Link>
+                        </div>
+                      </div>
+                    </MessageAlert>
+                  )}
+                </div>
+              ) : (
+                <ServiceBrokersNotFoundAlert />
+              )}
+            </div>
+          ) : (
+            <ServiceCatalogNotInstalledAlert />
+          )}
+        </main>
+      </section>
     );
   }