From 4a4ece9d5238535ac7690a0c08bbc4fdba7d4f3e Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Mon, 4 Mar 2024 18:27:43 +0530 Subject: [PATCH] :art: Added fillers for the onboarding and app creation page --- .../console/assets/app/filler-compute.tsx | 298 +++++++++++++ .../console/assets/app/filler-details.tsx | 151 +++++++ src/apps/console/assets/app/filler-env.tsx | 218 ++++++++++ .../console/assets/app/filler-network.tsx | 147 +++++++ src/apps/console/assets/app/filler-review.tsx | 114 +++++ .../console/assets/filler-cloud-provider.tsx | 345 +++++++++++++++ src/apps/console/assets/filler-cluster.tsx | 397 ++++++++++++++++++ .../console/assets/filler-create-team.tsx | 157 +++++++ src/apps/console/assets/filler-project.tsx | 88 ++++ src/apps/console/assets/filler-team.tsx | 130 ++++++ src/apps/console/assets/project-banner.svg | 22 + .../multi-step-progress-wrapper.tsx | 7 +- src/apps/console/components/split-wrapper.tsx | 24 ++ .../console/page-components/new-cluster.tsx | 3 +- .../console/page-components/new-project.tsx | 2 + src/apps/console/routes/_a+/new-team.tsx | 2 + .../$a+/$cloudprovider+/new-cluster.tsx | 1 - .../onboarding+/$a+/new-cloud-provider.tsx | 2 + src/apps/console/routes/_a+/teams.tsx | 7 +- .../$environment+/new-app/app-compute.tsx | 1 + .../$environment+/new-app/app-detail.tsx | 2 - .../$environment+/new-app/app-network.tsx | 2 +- .../$project+/$environment+/new-app/route.tsx | 25 +- src/design-system/tailwind-base.js | 8 + src/generated/gql/sdl.graphql | 4 + src/generated/gql/server.ts | 2 + 26 files changed, 2148 insertions(+), 11 deletions(-) create mode 100644 src/apps/console/assets/app/filler-compute.tsx create mode 100644 src/apps/console/assets/app/filler-details.tsx create mode 100644 src/apps/console/assets/app/filler-env.tsx create mode 100644 src/apps/console/assets/app/filler-network.tsx create mode 100644 src/apps/console/assets/app/filler-review.tsx create mode 100644 src/apps/console/assets/filler-cloud-provider.tsx create mode 100644 src/apps/console/assets/filler-cluster.tsx create mode 100644 src/apps/console/assets/filler-create-team.tsx create mode 100644 src/apps/console/assets/filler-project.tsx create mode 100644 src/apps/console/assets/filler-team.tsx create mode 100644 src/apps/console/assets/project-banner.svg create mode 100644 src/apps/console/components/split-wrapper.tsx diff --git a/src/apps/console/assets/app/filler-compute.tsx b/src/apps/console/assets/app/filler-compute.tsx new file mode 100644 index 000000000..2d7c59173 --- /dev/null +++ b/src/apps/console/assets/app/filler-compute.tsx @@ -0,0 +1,298 @@ +import React from 'react'; + +function FillerAppCompute() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerAppCompute; diff --git a/src/apps/console/assets/app/filler-details.tsx b/src/apps/console/assets/app/filler-details.tsx new file mode 100644 index 000000000..e5db39299 --- /dev/null +++ b/src/apps/console/assets/app/filler-details.tsx @@ -0,0 +1,151 @@ +import React from 'react'; + +function FillerAppDetail() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerAppDetail; diff --git a/src/apps/console/assets/app/filler-env.tsx b/src/apps/console/assets/app/filler-env.tsx new file mode 100644 index 000000000..81ca944a0 --- /dev/null +++ b/src/apps/console/assets/app/filler-env.tsx @@ -0,0 +1,218 @@ +import React from 'react'; + +function FillerAppEnv() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerAppEnv; diff --git a/src/apps/console/assets/app/filler-network.tsx b/src/apps/console/assets/app/filler-network.tsx new file mode 100644 index 000000000..c0297ee6b --- /dev/null +++ b/src/apps/console/assets/app/filler-network.tsx @@ -0,0 +1,147 @@ +import React from 'react'; + +function FillerAppNetwork() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerAppNetwork; diff --git a/src/apps/console/assets/app/filler-review.tsx b/src/apps/console/assets/app/filler-review.tsx new file mode 100644 index 000000000..e548bdaa0 --- /dev/null +++ b/src/apps/console/assets/app/filler-review.tsx @@ -0,0 +1,114 @@ +import React from 'react'; + +function FillerAppReview() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerAppReview; diff --git a/src/apps/console/assets/filler-cloud-provider.tsx b/src/apps/console/assets/filler-cloud-provider.tsx new file mode 100644 index 000000000..5970e54fc --- /dev/null +++ b/src/apps/console/assets/filler-cloud-provider.tsx @@ -0,0 +1,345 @@ +function FillerCloudProvider() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerCloudProvider; diff --git a/src/apps/console/assets/filler-cluster.tsx b/src/apps/console/assets/filler-cluster.tsx new file mode 100644 index 000000000..a43230488 --- /dev/null +++ b/src/apps/console/assets/filler-cluster.tsx @@ -0,0 +1,397 @@ +import React from 'react'; + +function FillerCluster() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerCluster; diff --git a/src/apps/console/assets/filler-create-team.tsx b/src/apps/console/assets/filler-create-team.tsx new file mode 100644 index 000000000..493a0aa41 --- /dev/null +++ b/src/apps/console/assets/filler-create-team.tsx @@ -0,0 +1,157 @@ +function FillerCreateTeam() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerCreateTeam; diff --git a/src/apps/console/assets/filler-project.tsx b/src/apps/console/assets/filler-project.tsx new file mode 100644 index 000000000..57f41c55a --- /dev/null +++ b/src/apps/console/assets/filler-project.tsx @@ -0,0 +1,88 @@ +function FillerProject() { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerProject; diff --git a/src/apps/console/assets/filler-team.tsx b/src/apps/console/assets/filler-team.tsx new file mode 100644 index 000000000..f0c12b6e2 --- /dev/null +++ b/src/apps/console/assets/filler-team.tsx @@ -0,0 +1,130 @@ +function FillerTeam() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FillerTeam; diff --git a/src/apps/console/assets/project-banner.svg b/src/apps/console/assets/project-banner.svg new file mode 100644 index 000000000..5fe6a4e19 --- /dev/null +++ b/src/apps/console/assets/project-banner.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/apps/console/components/multi-step-progress-wrapper.tsx b/src/apps/console/components/multi-step-progress-wrapper.tsx index 0fb60fe0b..60674d30a 100644 --- a/src/apps/console/components/multi-step-progress-wrapper.tsx +++ b/src/apps/console/components/multi-step-progress-wrapper.tsx @@ -2,6 +2,7 @@ import { Link } from '@remix-run/react'; import { ReactNode } from 'react'; import { Button } from '~/components/atoms/button'; import { ArrowLeft } from '~/console/components/icons'; +import SplitWrapper from './split-wrapper'; type ITitleSection = { title: ReactNode; @@ -23,15 +24,17 @@ interface IProgressWrapper extends ITitleSection { to: string; content: string; }; + fillerImage?: ReactNode; } const MultiStepProgressWrapper = ({ subTitle, title, children, backButton, + fillerImage, }: IProgressWrapper) => { return ( -
+
{backButton && ( @@ -48,7 +51,7 @@ const MultiStepProgressWrapper = ({
{children}
-
+ ); }; diff --git a/src/apps/console/components/split-wrapper.tsx b/src/apps/console/components/split-wrapper.tsx new file mode 100644 index 000000000..345b15c6d --- /dev/null +++ b/src/apps/console/components/split-wrapper.tsx @@ -0,0 +1,24 @@ +import { ReactNode } from 'react'; +import { ChildrenProps } from '~/components/types'; + +const SplitWrapper = ({ + children, + fillerImage, +}: ChildrenProps & { + fillerImage?: ReactNode; +}) => { + return ( +
+
+ {children} +
+ {fillerImage ? ( +
{fillerImage}
+ ) : ( +
+ )} +
+ ); +}; + +export default SplitWrapper; diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx index 360ef99f4..6417bb714 100644 --- a/src/apps/console/page-components/new-cluster.tsx +++ b/src/apps/console/page-components/new-cluster.tsx @@ -27,7 +27,7 @@ import MultiStepProgress, { import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper'; import { TitleBox } from '../components/raw-wrapper'; import { BottomNavigation, ReviewComponent } from '../components/commons'; -import { ArrowRight } from '../components/icons'; +import FillerCluster from '../assets/filler-cluster'; type props = | { @@ -259,6 +259,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => { }} > } title={ isOnboarding ? 'Setup your account!' : 'Let’s create new cluster.' } diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx index 1f2ff4788..6a95dee33 100644 --- a/src/apps/console/page-components/new-project.tsx +++ b/src/apps/console/page-components/new-project.tsx @@ -22,6 +22,7 @@ import MultiStepProgress, { import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper'; import { TitleBox } from '../components/raw-wrapper'; import { BottomNavigation, ReviewComponent } from '../components/commons'; +import FillerProject from '../assets/filler-project'; const statusRender = (item: ExtractNodeType) => { return listStatus({ @@ -111,6 +112,7 @@ const NewProject = () => { }} > } title="Let’s create new project." subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams" backButton={{ diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx index 1188ae7be..e849a3b34 100644 --- a/src/apps/console/routes/_a+/new-team.tsx +++ b/src/apps/console/routes/_a+/new-team.tsx @@ -12,6 +12,7 @@ import MultiStepProgress, { useMultiStepProgress, } from '~/console/components/multi-step-progress'; import { BottomNavigation } from '~/console/components/commons'; +import FillerCreateTeam from '~/console/assets/filler-create-team'; const NewAccount = () => { const api = useConsoleApi(); @@ -55,6 +56,7 @@ const NewAccount = () => { return (
} title="Setup your account!" subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams" diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/new-cluster.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/new-cluster.tsx index 5ef2580b3..4a0e140fa 100644 --- a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/new-cluster.tsx +++ b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/new-cluster.tsx @@ -6,7 +6,6 @@ import { ensureAccountSet } from '~/console/server/utils/auth-utils'; import { GQLServerHandler } from '~/console/server/gql/saved-queries'; import { NewCluster } from '~/console/page-components/new-cluster'; - export const loader = async (ctx: IRemixCtx) => { const promise = pWrapper(async () => { ensureAccountSet(ctx); diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx index 51025f653..ec7842c19 100644 --- a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx +++ b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx @@ -14,6 +14,7 @@ import MultiStepProgress, { useMultiStepProgress, } from '~/console/components/multi-step-progress'; import { BottomNavigation } from '~/console/components/commons'; +import FillerCloudProvider from '~/console/assets/filler-cloud-provider'; const NewCloudProvider = () => { const { a: accountName } = useParams(); @@ -87,6 +88,7 @@ const NewCloudProvider = () => { return ( } title="Setup your account!" subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams" diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx index f329263da..2c7d29c04 100644 --- a/src/apps/console/routes/_a+/teams.tsx +++ b/src/apps/console/routes/_a+/teams.tsx @@ -24,6 +24,8 @@ import List from '~/console/components/list'; import { parseName } from '~/console/server/r-utils/common'; import ConsoleAvatar from '~/console/components/console-avatar'; import { ArrowRight, Users } from '~/console/components/icons'; +import SplitWrapper from '~/console/components/split-wrapper'; +import FillerTeam from '~/console/assets/filler-team'; export const loader = async (ctx: IRemixCtx) => { let accounts; @@ -176,9 +178,8 @@ const Accounts = () => { }); }; - console.log('accounts', accounts, page); return ( -
+ }>
@@ -322,7 +323,7 @@ const Accounts = () => {
-
+ ); }; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx index 9522a84c1..d0f17c73a 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx @@ -241,6 +241,7 @@ const AppCompute = () => { } error={!!errors.repoImageTag || !!digestError} message={ + // eslint-disable-next-line no-nested-ternary errors.repoImageTag ? errors.repoImageTag : digestError diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx index b69790386..fe635b14f 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx @@ -1,5 +1,3 @@ -import { ArrowRight } from '@jengaicons/react'; -import { Button } from '~/components/atoms/button'; import { TextInput } from '~/components/atoms/input'; import { useAppState } from '~/console/page-components/app-states'; import { keyconstants } from '~/console/server/r-utils/key-constants'; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx index f51f51505..91606eb07 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx @@ -230,7 +230,7 @@ export const ExposedPorts = () => { const AppNetwork = () => { const { setPage, markPageAsCompleted } = useAppState(); return ( - +
Expose service ports that need to be exposed from container
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx index 2bcf367d0..691f2656f 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx @@ -6,7 +6,12 @@ import MultiStepProgress, { useMultiStepProgress, } from '~/console/components/multi-step-progress'; import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper'; -import { useEffect } from 'react'; +import { ReactNode, useCallback, useEffect } from 'react'; +import FillerAppDetail from '~/console/assets/app/filler-details'; +import FillerAppCompute from '~/console/assets/app/filler-compute'; +import FillerAppEnv from '~/console/assets/app/filler-env'; +import FillerAppNetwork from '~/console/assets/app/filler-network'; +import FillerAppReview from '~/console/assets/app/filler-review'; import AppCompute from './app-compute'; import AppDetail from './app-detail'; import AppEnvironment from './app-environment'; @@ -25,8 +30,26 @@ const AppComp = () => { jumpStep(page); }, [page]); + const getFiller = useCallback((): ReactNode => { + switch (currentStep) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + default: + return null; + } + }, [currentStep]); + return ( ; serviceTemplate: Github__Com___Kloudlite___Operator___Apis___Crds___V1__ServiceTemplateIn; + tolerations?: InputMaybe>; }; export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__ServiceTemplateIn =