From 485b7bc65087fb77981e6425328446784e5485b1 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Mon, 8 Aug 2022 17:27:42 +0530 Subject: [PATCH 1/2] added back button on cluster view Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.style.tsx | 25 ++++++ src/webview/cluster/app/cluster.tsx | 103 ++++++++++++---------- 2 files changed, 83 insertions(+), 45 deletions(-) diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index 0758c1535..09401f489 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -15,10 +15,26 @@ export default (theme: Theme) => fontSize: '1.25em' }, iconContainer: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', height: 60, marginBottom: '3em', marginTop: '2em' }, + backButton: { + marginBottom: '3em', + marginTop: '2em', + width: '1.2em', + color: 'var(--vscode-button-foreground)', + backgroundColor: '#EE0000', + '&:hover': { + backgroundColor: '#BE0000', + cursor: 'pointer' + }, + textTransform: 'none' + }, textWhite: { marginBottom: '20px!important', textAlign: 'left' @@ -93,6 +109,15 @@ export default (theme: Theme) => }, textTransform: 'none' }, + sandboxButton: { + color: 'var(--vscode-button-foreground)', + backgroundColor: '#EE0000', + '&:hover': { + color: 'var(--vscode-button-foreground)', + backgroundColor: '#BE0000', + }, + textTransform: 'none' + }, cardContent: { background: 'var(--vscode-settings-focusedRowBackground)', border: '1px solid var(--vscode-settings-focusedRowBorder)', diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index cb7569023..7483118d9 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -21,40 +21,41 @@ import AddClusterView from './clusterView'; import AddSandboxView from './sandboxView'; import clusterStyle from './cluster.style'; import './images/logo.png'; +import { ArrowBack } from '@material-ui/icons'; const useStyles = makeStyles(clusterStyle); const clusterTypes = [ - { - heading: 'Deploy it locally on your laptop', - description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)', - 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: 'crc', - redirectLink: '', - buttonText: 'Create/Refresh cluster', - tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow' - }, - { - heading: 'Launch Developer Sandbox', - description: 'Free access to the Developer Sandbox for Red Hat OpenShift', - 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.', - imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'], - urlAlt: 'dev sandbox', - redirectLink: '', - buttonText: 'Start your OpenShift experience', - tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift' - }, - { - heading: 'Deploy it in your public cloud', - description: 'Run OpenShift clusters on your own by installing from another cloud provider.', - 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.', - 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: 'public cloud', - redirectLink: 'https://console.redhat.com/openshift/create', - buttonText: 'Try it in your cloud', - tooltip: 'For complete installation, follow the official documentation.' - } + { + heading: 'Deploy it locally on your laptop', + description: 'Install on Laptop: Red Hat OpenShift Local (formerly Red Hat CodeReady Containers)', + 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: 'crc', + redirectLink: '', + buttonText: 'Create/Refresh cluster', + tooltip: 'Create/Run local OpenShift 4 cluster using the guided workflow' + }, + { + heading: 'Launch Developer Sandbox', + description: 'Free access to the Developer Sandbox for Red Hat OpenShift', + 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.', + imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'], + urlAlt: 'dev sandbox', + redirectLink: '', + buttonText: 'Start your OpenShift experience', + tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift' + }, + { + heading: 'Deploy it in your public cloud', + description: 'Run OpenShift clusters on your own by installing from another cloud provider.', + 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.', + 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: 'public cloud', + redirectLink: 'https://console.redhat.com/openshift/create', + buttonText: 'Try it in your cloud', + tooltip: 'For complete installation, follow the official documentation.' + } ]; const vscodeApi = window.vscodeApi; @@ -98,12 +99,16 @@ export default function Header() { } }; + const moveBack = () => { + setShowWizard(''); + } + const InfrastructureLayout = ({ clusterTypes }) => ( <> {clusterTypes.map((list, index) => (
- + {list.heading}
@@ -125,13 +130,13 @@ export default function Header() {
- +
handleView(index)} style={{ textDecoration: 'none' }} href={clusterTypes[index].redirectLink || '#'}> - - - + + + +
)} - { !showWizard && ( + {!showWizard && (
From 682f6af583475bae239784fd1d62a04e5a275561 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Mon, 22 Aug 2022 17:01:33 +0530 Subject: [PATCH 2/2] changed button name as back Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.style.tsx | 16 ---------------- src/webview/cluster/app/cluster.tsx | 14 +++++++------- 2 files changed, 7 insertions(+), 23 deletions(-) diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index 09401f489..2dbac7cae 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -15,26 +15,10 @@ export default (theme: Theme) => fontSize: '1.25em' }, iconContainer: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - textAlign: 'center', height: 60, marginBottom: '3em', marginTop: '2em' }, - backButton: { - marginBottom: '3em', - marginTop: '2em', - width: '1.2em', - color: 'var(--vscode-button-foreground)', - backgroundColor: '#EE0000', - '&:hover': { - backgroundColor: '#BE0000', - cursor: 'pointer' - }, - textTransform: 'none' - }, textWhite: { marginBottom: '20px!important', textAlign: 'left' diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index 7483118d9..4fda8058e 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -21,7 +21,6 @@ import AddClusterView from './clusterView'; import AddSandboxView from './sandboxView'; import clusterStyle from './cluster.style'; import './images/logo.png'; -import { ArrowBack } from '@material-ui/icons'; const useStyles = makeStyles(clusterStyle); @@ -113,7 +112,7 @@ export default function Header() {
- + {list.imageUrl.map((url: string, index: string | number) => ( ))} @@ -153,12 +152,13 @@ export default function Header() { return (
-
+