Merge pull request #134 from kubenav/add-description-to-clusters-page

Add description to cluster page
kubenav · Jul 11, 2020 · 20d1e06 · 20d1e06
2 parents e84140f + ab16bf5
commit 20d1e06
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/components/settings/ClustersPage.tsx b/src/components/settings/ClustersPage.tsx
@@ -28,15 +28,27 @@ const ClustersPage: React.FunctionComponent = () => {
             <IonMenuButton />
           </IonButtons>
           <IonTitle>Clusters</IonTitle>
-          {isPlatform('hybrid') ? <AddCluster /> : null}
+          {isPlatform('hybrid') ? <AddCluster activator="button" /> : null}
         </IonToolbar>
       </IonHeader>
       <IonContent>
         {context.clusters ? (
           Object.keys(context.clusters).map((key) => {
             return context.clusters ? <ClusterItem key={key} cluster={context.clusters[key]} /> : null;
           })
-        ) : !isPlatform('hybrid') ? (
+        ) : isPlatform('hybrid') ? (
+          <IonCard>
+            <IonCardContent>
+              <p className="paragraph-margin-bottom">
+                It looks like you have not add a cluster yet. Click the button below to add your first cluster. You can
+                choose between different options when adding a cluster. You can import your cluster directly from one of
+                your cloud providers like Google, AWS or Azure. You can also import your clusters from an existing
+                Kubeconfig or you can choose the OIDC option.
+              </p>
+              <AddCluster activator="block-button" />
+            </IonCardContent>
+          </IonCard>
+        ) : (
           <IonCard>
             <IonCardContent>
               <p className="paragraph-margin-bottom">
@@ -52,7 +64,7 @@ const ClustersPage: React.FunctionComponent = () => {
               </p>
             </IonCardContent>
           </IonCard>
-        ) : null}
+        )}
       </IonContent>
     </IonPage>
   );

diff --git a/src/components/settings/clusters/AddCluster.tsx b/src/components/settings/clusters/AddCluster.tsx
@@ -2,18 +2,23 @@ import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonTit
 import { add, close } from 'ionicons/icons';
 import React, { useState } from 'react';
 
+import { TActivator } from '../../../declarations';
 import AWS from './aws/AWS';
 import Azure from './azure/Azure';
 import Google from './google/Google';
 import Kubeconfig from './kubeconfig/Kubeconfig';
 import Manual from './manual/Manual';
 import OIDC from './oidc/OIDC';
 
-const AddCluster: React.FunctionComponent = () => {
+interface IAddCluster {
+  activator: TActivator;
+}
+
+const AddCluster: React.FunctionComponent<IAddCluster> = ({ activator }: IAddCluster) => {
   const [showModal, setShowModal] = useState<boolean>(false);
 
   return (
-    <IonButtons slot="primary">
+    <React.Fragment>
       <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
         <IonHeader>
           <IonToolbar>
@@ -34,10 +39,19 @@ const AddCluster: React.FunctionComponent = () => {
           <Manual />
         </IonContent>
       </IonModal>
-      <IonButton onClick={() => setShowModal(true)}>
-        <IonIcon slot="icon-only" icon={add} />
-      </IonButton>
-    </IonButtons>
+
+      {activator === 'button' ? (
+        <IonButtons slot="primary">
+          <IonButton onClick={() => setShowModal(true)}>
+            <IonIcon slot="icon-only" icon={add} />
+          </IonButton>
+        </IonButtons>
+      ) : (
+        <IonButton expand="block" onClick={() => setShowModal(true)}>
+          Add a Cluster
+        </IonButton>
+      )}
+    </React.Fragment>
   );
 };
 

diff --git a/src/declarations.ts b/src/declarations.ts
@@ -271,7 +271,7 @@ export interface ITerminalResponse {
   id: string;
 }
 
-export type TActivator = 'button' | 'item' | 'item-option';
+export type TActivator = 'block-button' | 'button' | 'item' | 'item-option';
 
 export type TCondition =
   | V1DeploymentCondition