Skip to content

Commit 485b7bc

Browse files
msivasubramaniaanmsivasubramaniaan
committed
added back button on cluster view
Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
1 parent cb693cd commit 485b7bc

File tree

2 files changed

+83
-45
lines changed

2 files changed

+83
-45
lines changed

‎src/webview/cluster/app/cluster.style.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,26 @@ export default (theme: Theme) =>
1515
fontSize: '1.25em'
1616
},
1717
iconContainer: {
18+
display: 'flex',
19+
justifyContent: 'center',
20+
alignItems: 'center',
21+
textAlign: 'center',
1822
height: 60,
1923
marginBottom: '3em',
2024
marginTop: '2em'
2125
},
26+
backButton: {
27+
marginBottom: '3em',
28+
marginTop: '2em',
29+
width: '1.2em',
30+
color: 'var(--vscode-button-foreground)',
31+
backgroundColor: '#EE0000',
32+
'&:hover': {
33+
backgroundColor: '#BE0000',
34+
cursor: 'pointer'
35+
},
36+
textTransform: 'none'
37+
},
2238
textWhite: {
2339
marginBottom: '20px!important',
2440
textAlign: 'left'
@@ -93,6 +109,15 @@ export default (theme: Theme) =>
93109
},
94110
textTransform: 'none'
95111
},
112+
sandboxButton: {
113+
color: 'var(--vscode-button-foreground)',
114+
backgroundColor: '#EE0000',
115+
'&:hover': {
116+
color: 'var(--vscode-button-foreground)',
117+
backgroundColor: '#BE0000',
118+
},
119+
textTransform: 'none'
120+
},
96121
cardContent: {
97122
background: 'var(--vscode-settings-focusedRowBackground)',
98123
border: '1px solid var(--vscode-settings-focusedRowBorder)',

‎src/webview/cluster/app/cluster.tsx‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -21,40 +21,41 @@ import AddClusterView from './clusterView';
2121
import AddSandboxView from './sandboxView';
2222
import clusterStyle from './cluster.style';
2323
import './images/logo.png';
24+
import { ArrowBack } from '@material-ui/icons';
2425

2526
const useStyles = makeStyles(clusterStyle);
2627

2728
const clusterTypes = [
28-
{
29-
heading: 'Deploy it locally on your laptop',
30-
description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)',
31-
smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
32-
imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
33-
urlAlt: 'crc',
34-
redirectLink: '',
35-
buttonText: 'Create/Refresh cluster',
36-
tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow'
37-
},
38-
{
39-
heading: 'Launch Developer Sandbox',
40-
description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
41-
smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.',
42-
imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
43-
urlAlt: 'dev sandbox',
44-
redirectLink: '',
45-
buttonText: 'Start your OpenShift experience',
46-
tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
47-
},
48-
{
49-
heading: 'Deploy it in your public cloud',
50-
description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
51-
smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
52-
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'],
53-
urlAlt: 'public cloud',
54-
redirectLink: 'https://console.redhat.com/openshift/create',
55-
buttonText: 'Try it in your cloud',
56-
tooltip: 'For complete installation, follow the official documentation.'
57-
}
29+
{
30+
heading: 'Deploy it locally on your laptop',
31+
description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)',
32+
smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
33+
imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
34+
urlAlt: 'crc',
35+
redirectLink: '',
36+
buttonText: 'Create/Refresh cluster',
37+
tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow'
38+
},
39+
{
40+
heading: 'Launch Developer Sandbox',
41+
description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
42+
smallInfo: 'If you are exploring how to run your code as containers in OpenShift, our free Developer Sandbox instantly gives you a way to try it out.',
43+
imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
44+
urlAlt: 'dev sandbox',
45+
redirectLink: '',
46+
buttonText: 'Start your OpenShift experience',
47+
tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
48+
},
49+
{
50+
heading: 'Deploy it in your public cloud',
51+
description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
52+
smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
53+
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'],
54+
urlAlt: 'public cloud',
55+
redirectLink: 'https://console.redhat.com/openshift/create',
56+
buttonText: 'Try it in your cloud',
57+
tooltip: 'For complete installation, follow the official documentation.'
58+
}
5859
];
5960

6061
const vscodeApi = window.vscodeApi;
@@ -98,12 +99,16 @@ export default function Header() {
9899
}
99100
};
100101

102+
const moveBack = () => {
103+
setShowWizard('');
104+
}
105+
101106
const InfrastructureLayout = ({ clusterTypes }) => (
102107
<>
103108
{clusterTypes.map((list, index) => (
104109
<Card className={classes.cardTransform} key={index}>
105110
<div className={classes.cardHeader}>
106-
<Typography variant="caption" display="block" style={{ fontSize: '1.25em', color: 'white' }}>
111+
<Typography variant='caption' display='block' style={{ fontSize: '1.25em', color: 'white' }}>
107112
{list.heading}
108113
</Typography>
109114
</div>
@@ -125,13 +130,13 @@ export default function Header() {
125130
</CardContent>
126131
<div>
127132
<CardActions className={classes.cardButton}>
128-
<Tooltip title={list.tooltip} placement="top">
133+
<Tooltip title={list.tooltip} placement='top'>
129134
<div>
130135
<a onClick={() => handleView(index)} style={{ textDecoration: 'none' }} href={clusterTypes[index].redirectLink || '#'}>
131136
<Button
132-
variant="contained"
133-
color="default"
134-
component="span"
137+
variant='contained'
138+
color='default'
139+
component='span'
135140
className={classes.button}
136141
>
137142
{list.buttonText}
@@ -148,13 +153,21 @@ export default function Header() {
148153

149154
return (
150155
<div className={classes.App}>
151-
<div className={classes.iconContainer}>
152-
<img className={classes.image} src='assets/logo.png' alt="redhat-openshift"></img>
156+
<div style={{ display: 'grid',gridTemplateColumns: 'repeat(3,1fr)',margin:'0 auto' }}>
157+
<div>
158+
{ showWizard?.length > 0 &&
159+
(<Tooltip title='Back' placement='top'>
160+
<ArrowBack className={classes.backButton} onClick={() => moveBack()}/>
161+
</Tooltip>)}
162+
</div>
163+
<div className={classes.iconContainer}>
164+
<img className={classes.image} src='assets/logo.png' alt='redhat-openshift'></img>
165+
</div>
153166
</div>
154167
{ showWizard === 'crc' && (
155168
<div className={classes.rowBody}>
156169
<Card className={classes.cardContent}>
157-
<Typography variant="body2" component="p" style={{ padding: 20 }}>
170+
<Typography variant='body2' component='p' style={{ padding: 20 }}>
158171
Red Hat OpenShift Local brings a minimal OpenShift 4 cluster to your local computer.<br></br>You can use this guided workflow to create OpenShift cluster locally. Cluster take approximately 15 minutes to provision.
159172
</Typography>
160173
<AddClusterView vscode={vscodeApi} />
@@ -164,17 +177,17 @@ export default function Header() {
164177
{ showWizard === 'sandbox' && (
165178
<div className={classes.rowBody}>
166179
<Card className={classes.cardContent}>
167-
<Typography variant="body2" component="p" style={{ padding: 20 }}>
168-
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. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
180+
<Typography variant='body2' component='p' style={{ padding: 20 }}>
181+
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. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
169182
</Typography>
170-
<Button variant="outlined" href='https://developers.redhat.com/developer-sandbox' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Learn More</Button>
171-
<Button variant="outlined" href='mailto:devsandbox@redhat.com' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Contact Us</Button>
172-
<Button variant="outlined" href='https://dn.dev/DevNationSlack'className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
173-
<AddSandboxView/>
183+
<Button variant='outlined' href='https://developers.redhat.com/developer-sandbox' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Learn More</Button>
184+
<Button variant='outlined' href='mailto:devsandbox@redhat.com' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Contact Us</Button>
185+
<Button variant='outlined' href='https://dn.dev/DevNationSlack' className={classes.sandboxButton} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
186+
<AddSandboxView />
174187
</Card>
175188
</div>
176189
)}
177-
{ !showWizard && (
190+
{!showWizard && (
178191
<div className={classes.cardContainer}>
179192
<InfrastructureLayout clusterTypes={clusterTypes}></InfrastructureLayout>
180193
</div>

0 commit comments

Comments
 (0)
⚡