add devsandbox card

Signed-off-by: Mohit Suman <[email protected]>

Author: mohitsuman

README.md

@@ -19,6 +19,12 @@ OpenShift Connector extension provides an end-to-end developer experience for Re
 
 ### Supported OpenShift Clusters
 
+#### Developer Sandbox
+
+The extension allows the users to Get free access to the Developer Sandbox for Red Hat OpenShift. From `Add Cluster View`, users will be redirected to the dev sandbox instance. The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools.
+
+#### Local instance of OpenShift
+
 This extension can work with local or remote OpenShift clusters.
 
 To provision local instance of OpenShift cluster, developers can use the following options:
@@ -28,6 +34,8 @@ To provision local instance of OpenShift cluster, developers can use the followi
 
 For detail analysis of how to setup and run local OpenShift Cluster using minishift, please follow this [wiki](http://bit.ly/3be4jUv).
 
+#### Public cloud providers
+
 If developers can't run OpenShift cluster locally, the extension can work with remote one provisioned with one of Red Hat products:
 
 * [Red Hat OpenShift Container Platform](http://red.ht/3rUUzoe) - build, deploy and manage your applications across cloud- and on-premise infrastructure
@@ -141,13 +149,13 @@ future releases.
 
 #### Running OpenShift Locally
 
-The extension provides a view to run local instance of OpenShift. To open the view use `Add OpenShift Cluster` button 
+The extension provides a view to run local instance of OpenShift. To open the view use `Add OpenShift Cluster` button
 ![ addclusterbutton ](https://raw.githubusercontent.com/redhat-developer/vscode-openshift-tools/master/images/add-cluster-button.gif)
 from `OpenShift: Application Explorer` view title.
 
 ![ addcluster ](https://raw.githubusercontent.com/redhat-developer/vscode-openshift-tools/master/images/add-cluster.gif)
 
-The view guides you through the steps required to create and start OpenShift 4 single node cluster on your workstation 
+The view guides you through the steps required to create and start OpenShift 4 single node cluster on your workstation
 using Red Hat CodeReady Containers:
 
    * Download Red Hat CodeReady Containers

package-lock.json

@@ -1313,6 +1313,5 @@
       }
     }
   },
-  "extensionDependencies": [
-  ]
+  "extensionDependencies": []
 }

package.json

@@ -15,7 +15,7 @@ import {
   ListItemText,
   Tooltip,
   Typography} from '@material-ui/core';
-  
+
 import AddClusterView from './clusterView';
 import clusterStyle from './cluster.style';
 
@@ -25,20 +25,30 @@ const clusterTypes = [
   {
     heading: "Deploy it locally on your laptop",
     description: "Install on Laptop: Red Hat CodeReady Containers.",
-    smallInfo: "A minimal, preconfigured Red Hat OpenShift 4 cluster on your laptop or desktop for development and testing.",
+    smallInfo: "Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.",
     imageUrl: ["https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg"],
-    urlAlt: "Red Hat OpenShift",
+    urlAlt: "crc",
     redirectLink: "",
     buttonText: "Create/Refresh Cluster",
     tooltip: "You can create OpenShift cluster using this wizard."
   },
+  {
+    heading: "Launch Developer Sandbox",
+    description: "Free access to the Developer Sandbox for Red Hat OpenShift",
+    smallInfo: "The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools.",
+    imageUrl: ["https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg"],
+    urlAlt: "dev sandbox",
+    redirectLink: "https://developers.redhat.com/developer-sandbox",
+    buttonText: "Start your OpenShift experience",
+    tooltip: "Launch your Developer Sandbox for Red Hat OpenShift"
+  },
   {
     heading: "Deploy it in your public cloud",
-    description: "Install Red Hat OpenShift 4 in your account with a supported public cloud providers.",
+    description: "Install Red Hat OpenShift 4 in your account with supported public cloud providers.",
     smallInfo: "This includes Amazon Web Services (AWS), Microsoft Azure, and Google Cloud.",
     imageUrl: ["https://www.openshift.com/hubfs/images/logos/logo_aws.svg", "https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg", "https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg"],
-    urlAlt: "Red Hat OpenShift 4",
-    redirectLink: "https://cloud.redhat.com/openshift/install#public-cloud",
+    urlAlt: "public cloud",
+    redirectLink: "https://cloud.redhat.com/openshift/create",
     buttonText: "Try it in your cloud",
     tooltip: "For complete installation, follow the official documentation."
   }
@@ -65,7 +75,7 @@ export default function Header() {
             </Typography>
           </div>
           <CardContent style= {{ height: 240 }}>
-            <Typography style={{ padding: '10px' }}>
+            <Typography style={{ padding: '10px', height: '50px' }}>
               {list.imageUrl.map((url: string, index: string | number) => (
                 <img src={url} key={index} style={{ marginLeft: '.625rem', marginRight: '.625rem' }}></img>
               ))}
@@ -107,7 +117,7 @@ export default function Header() {
       {showWizard && (<div className={classes.rowBody}>
         <Card className={classes.cardContent}>
           <Typography variant="body2" component="p" style={{ padding: 20 }}>
-            Red Hat CodeReady Containers brings a minimal OpenShift 4.0 or newer cluster to your local laptop or desktop computer.<br></br>You can use this wizard to create OpenShift clusters locally. Clusters take approximately 15 minutes to provision.
+            Red Hat CodeReady Containers brings a minimal OpenShift 4 cluster on your laptop or desktop computer.<br></br>You can use this wizard to create OpenShift cluster locally. Cluster take approximately 15 minutes to provision.
           </Typography>
           <AddClusterView />
         </Card>