konstructio · CristhianF7 · Apr 29, 2023 · Apr 29, 2023 · Apr 29, 2023 · Apr 29, 2023
diff --git a/.env b/.env
@@ -1,3 +1,4 @@
+API_URL=
 ARGO_CD_URL=
 ARGO_WORKFLOWS_URL=
 ATLANTIS_URL=

diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
+API_URL=http://localhost:8081/api/v1
 ARGO_CD_URL=https://argocd.your-company.io
 ARGO_WORKFLOWS_URL=https://argo.your-company.io
 ATLANTIS_URL=https://atlantis.your-company.io

diff --git a/.github/workflows/storybook.yaml b/.github/workflows/storybook.yaml
diff --git a/components/ClusterRunningMessage/index.tsx b/components/ClusterRunningMessage/index.tsx
@@ -10,9 +10,9 @@ import { Container, Description, Link, Title } from './clusterRunningMessage.sty
 const boxImageSrc = process.env.STORYBOOK_MODE ? boxImgSrc : '/static/box.svg';
 
 export interface ClusterRunningMessageProps {
-  clusterName: string;
-  domainName: string;
-  onDeleteCluster: () => void;
+  clusterName?: string;
+  domainName?: string;
+  onDeleteCluster?: () => void;
 }
 
 const ClusterRunningMessage: FunctionComponent<ClusterRunningMessageProps> = ({

diff --git a/components/InstallationButtons/index.tsx b/components/InstallationButtons/index.tsx
@@ -5,14 +5,16 @@ import Button from '../button';
 import { Container } from './installationButtons.styled';
 
 export interface InstallationButtonsProps {
+  activeStep: number;
   showBackButton?: boolean;
   onBackButtonClick?: () => void;
-  onNextButtonClick?: () => void;
+  onNextButtonClick: () => void;
   nextButtonText?: string;
   nextButtonDisabled?: boolean;
 }
 
 const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
+  activeStep,
   showBackButton,
   onBackButtonClick,
   onNextButtonClick,
@@ -28,10 +30,11 @@ const InstallationButtons: FunctionComponent<InstallationButtonsProps> = ({
     )}
 
     <Button
+      type="submit"
       variant="contained"
       color="primary"
-      onClick={onNextButtonClick}
       id="next"
+      onClick={() => activeStep === 0 && onNextButtonClick()}
       disabled={nextButtonDisabled}
     >
       {nextButtonText}

diff --git a/components/InstallationStepContainer/index.tsx b/components/InstallationStepContainer/index.tsx
@@ -18,12 +18,14 @@ interface InstallationStepContainerProps
   extends PropsWithChildren,
     ProgressProps,
     InstallationButtonsProps {
+  hasInfo?: boolean;
   installationTitle: string;
 }
 
 const InstallationStepContainer: FunctionComponent<InstallationStepContainerProps> = ({
   activeStep,
   steps,
+  hasInfo,
   installationTitle,
   showBackButton,
   onNextButtonClick,
@@ -36,14 +38,15 @@ const InstallationStepContainer: FunctionComponent<InstallationStepContainerProp
   <Container {...rest}>
     <Progress activeStep={activeStep} steps={steps} />
     <InstallTitle variant="subtitle2">{installationTitle}</InstallTitle>
-    <Content>
+    <Content hasInfo={hasInfo}>
       {children}
       {/* <Divider />
       <LearnMore variant="labelLarge">
         Learn more about <NextLink href="docs.kubefirst.io">configuring your cluster</NextLink>
       </LearnMore> */}
     </Content>
     <InstallationButtons
+      activeStep={activeStep}
       onNextButtonClick={onNextButtonClick}
       onBackButtonClick={onBackButtonClick}
       showBackButton={showBackButton}

diff --git a/components/InstallationStepContainer/installationStepContainer.styled.ts b/components/InstallationStepContainer/installationStepContainer.styled.ts
@@ -4,6 +4,7 @@ import Column from '../column';
 import InstallationButtonsComp from '../installationButtons';
 import Row from '../row';
 import Typography from '../typography';
+import { media } from '../../utils/media';
 
 export const Container = styled(Column)`
   background-color: ${({ theme }) => theme.colors.washMe};
@@ -18,14 +19,27 @@ export const InstallationButtons = styled(InstallationButtonsComp)`
   z-index: 1;
 `;
 
-export const Content = styled(Row)`
+export const Content = styled(Row)<{ hasInfo: boolean }>`
+  gap: 24px;
   height: 100%;
-  margin-bottom: 70px;
+  margin: 0 auto;
   overflow-y: auto;
+
+  ${({ hasInfo }) =>
+    hasInfo &&
+    `
+      display: flex;
+      flex-direction: column;
+  `}
+
+  ${media.greaterThan('lg')`
+    flex-direction: ${({ hasInfo }) => hasInfo && 'row'};
+  `};
 `;
 
 export const InstallTitle = styled(Typography)`
-  margin: 40px auto 24px auto;
+  margin: 40px 0 24px 0 !important;
+  text-align: center;
 `;
 
 export const Title = styled.div`

diff --git a/components/flappyKray/flappyKray.styled.ts b/components/flappyKray/flappyKray.styled.ts
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import CloseIcon from '@mui/icons-material/Close';
+
+export const Close = styled(CloseIcon)`
+  cursor: pointer;
+  position: fixed;
+  top: 10px;
+  right: 10px;
+`;
+
+export const ShareInTwitter = styled(TwitterIcon)`
+  cursor: pointer;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+`;
diff --git a/components/flappyKray/game/index.ts b/components/flappyKray/game/index.ts
@@ -0,0 +1,49 @@
+export const html = `<!DOCTYPE HTML>
+<html lang="en">
+    <head>
+        <title>Flappy K-Ray</title>
+        <link rel="apple-touch-icon-precomposed" href="data/img/touch-icon-iphone.png"/>
+        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="data/img/touch-icon-iphone-retina.png"/>
+        <link rel="shortcut icon" href="data/img/favicon.ico">
+        <link rel="stylesheet" type="text/css" media="screen" href="https://kray.kubefirst.com/index.css">
+        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="apple-mobile-web-app-title" content="Clumsy Bird">
+        <meta charset="UTF-8" />
+        <meta name="description" content="Flappy K-Ray"/>
+        <meta name="keywords" content="feedkray kubefirst flappy bird clumsy bird"/>
+        <meta name="robots" content="index, follow">
+        <!-- <meta name="google-site-verification" content="RDZI9SqVaffd48uHfZMv67-YdvviOMe2HuULEYqVgd4" />
+        <meta property="og:image" content="http://ellisonleao.github.io/clumsy-bird/data/img/bg.png" />
+        <meta property="og:title" content="Clumsy Bird - A Flappy Bird clone using MelonJS"/>
+        <meta property="og:url" content="http://ellisonleao.github.io/clumsy-bird/"/>
+        <meta property="og:site_name" content="Clumsy Bird - MelonJS"/> -->
+
+        <!-- Twitter Card -->
+        <meta name="twitter:hashtag" content="flappykray" />
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:site" content="@kubefirst" />
+        <meta name="twitter:creator" content="@kubefirst" />
+        <meta name="twitter:title" content="Flappy K-Ray" />
+        <meta name="twitter:description" content="#feedkray" />
+    </head>
+
+    <body>
+        <!-- Canvas placeholder -->
+        <div id="screen"></div>
+
+        <!-- melonJS Library -->
+        <script type="text/javascript" src="https://kray.kubefirst.com/js/melonJS-min.js" ></script>
+        <script type="text/javascript" src="https://kray.kubefirst.com/build/clumsy-min.js" ></script>
+        <script type="text/javascript">
+            window.onReady(function onReady() {
+                game.onload();
+            });
+        </script>
+
+    </body>
+</html>
+`;
+
+export default html;
diff --git a/components/flappyKray/index.tsx b/components/flappyKray/index.tsx
@@ -0,0 +1,56 @@
+import React, { FunctionComponent, useRef } from 'react';
+
+import Modal from '../../components/modal';
+
+import { Close, ShareInTwitter } from './flappyKray.styled';
+
+export interface FlappyKrayProps {
+  closeModal: () => void;
+  isOpen: boolean;
+}
+
+const FlappyKray: FunctionComponent<FlappyKrayProps> = ({ closeModal, isOpen }) => {
+  const flappyKRayRef = useRef<HTMLIFrameElement>(null);
+
+  // const handleOnKeyPress = ({ keyCode }: KeyboardEvent) => {
+  //   console.log(flappyKRayRef.current?.contentWindow)
+  //   flappyKRayRef.current?.contentWindow?.fly(keyCode, '*');
+  // };
+
+  // useEffect(() => {
+  //   window.addEventListener('keydown', handleOnKeyPress);
+  //   return () => window.removeEventListener('keydown', handleOnKeyPress);
+  // }, []);
+
+  flappyKRayRef.current?.contentWindow?.postMessage('');
+  return (
+    <Modal isModalVisible={isOpen}>
+      <>
+        <iframe
+          id="flappy-kray"
+          title="Flappy KRay"
+          src="http://kray.kubefirst.com"
+          ref={flappyKRayRef}
+          style={{
+            border: 0,
+            height: '700px',
+            width: '1050px',
+          }}
+        />
+        <ShareInTwitter
+          color="secondary"
+          fontSize="large"
+          onClick={() =>
+            window.open(
+              `https://twitter.com/intent/tweet?url=I'm trying @kubefirst \n&hashtags=kubefirst,gitops,kubernetes`,
+              '_blank',
+            )
+          }
+        />
+        <Close onClick={closeModal} color="secondary" fontSize="large" />
+      </>
+    </Modal>
+  );
+};
+
+export default FlappyKray;
diff --git a/components/installationInfoCard/installationInfoCard.styled.ts b/components/installationInfoCard/installationInfoCard.styled.ts
@@ -8,7 +8,8 @@ export const Card = styled.div`
   border: 1px solid ${PASTEL_LIGHT_BLUE};
   border-radius: 12px;
   box-sizing: border-box;
-  height: 228px;
+  height: fit-content;
+  min-height: 228px;
   padding: 24px;
   width: 360px;
 `;

diff --git a/components/modal/index.tsx b/components/modal/index.tsx
@@ -19,14 +19,12 @@ export const Fragment: FunctionComponent<IFragmentProps> = ({ children }) => (
 const BaseModal: FunctionComponent<IModalProps> = ({ children, isModalVisible, onCloseModal }) => (
   <>
     <Backdrop isModalVisible={isModalVisible} />
-    {isModalVisible && (
-      <Container>
-        <Content>
-          {children}
-          {onCloseModal && <Close onClick={onCloseModal} />}
-        </Content>
-      </Container>
-    )}
+    <Container isModalVisible={isModalVisible}>
+      <Content>
+        {children}
+        {onCloseModal && <Close onClick={onCloseModal} />}
+      </Content>
+    </Container>
   </>
 );
 

diff --git a/components/modal/modal.styled.ts b/components/modal/modal.styled.ts
@@ -45,14 +45,14 @@ export const Backdrop = styled.div<{ isModalVisible: boolean }>`
   overscroll-behavior: none;
 `;
 
-export const Container = styled.div`
+export const Container = styled.div<{ isModalVisible: boolean }>`
   position: fixed;
   z-index: 1300;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
-  display: flex;
+  display: ${({ isModalVisible }) => (isModalVisible ? 'flex' : 'none')};
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;

diff --git a/components/navigation/index.tsx b/components/navigation/index.tsx
@@ -30,7 +30,7 @@ const ROUTES = [
   // },
   {
     icon: <ScatterPlotIcon />,
-    path: '/installations',
+    path: '/provision',
     title: 'Cluster Management',
   },
   {

diff --git a/components/progress/Progress.styled.tsx b/components/progress/Progress.styled.tsx
@@ -86,6 +86,6 @@ export const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.childOfLight};
   display: flex;
   justify-content: center;
-  width: 100%;
   padding: 25px 0;
+  width: 100%;
 `;
diff --git a/components/progress/index.tsx b/components/progress/index.tsx
@@ -34,13 +34,14 @@ function ColorlibStepIcon(props: StepIconProps) {
 const Progress: FunctionComponent<ProgressProps> = ({ activeStep, steps, ...rest }) => (
   <Container {...rest}>
     <Stepper activeStep={activeStep} alternativeLabel connector={<ColorlibConnector />}>
-      {steps.map((label) => (
-        <Step key={label} sx={{ width: 130 }}>
-          <Label StepIconComponent={ColorlibStepIcon}>
-            <Typography variant="subtitle2">{label}</Typography>
-          </Label>
-        </Step>
-      ))}
+      {steps &&
+        steps.map((label) => (
+          <Step key={label} sx={{ width: 130 }}>
+            <Label StepIconComponent={ColorlibStepIcon}>
+              <Typography variant="subtitle2">{label}</Typography>
+            </Label>
+          </Step>
+        ))}
     </Stepper>
   </Container>
 );