minor ui changes in app creation flow

kloudlite · Aug 29, 2024 · 1631b51 · 1631b51
1 parent 88bd72f
commit 1631b51
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 58 deletions.
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx
@@ -1,24 +1,24 @@
+import { useOutletContext } from '@remix-run/react';
+import { useState } from 'react';
+import { Button } from '~/components/atoms/button';
+import { Checkbox } from '~/components/atoms/checkbox';
 import { NumberInput } from '~/components/atoms/input';
+import Select from '~/components/atoms/select';
 import Slider from '~/components/atoms/slider';
+import { useMapper } from '~/components/utils';
+import { BottomNavigation } from '~/console/components/commons';
+import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { useAppState } from '~/console/page-components/app-states';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
 import { FadeIn, parseValue } from '~/console/page-components/util';
-import Select from '~/components/atoms/select';
-import ExtendedFilledTab from '~/console/components/extended-filled-tab';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useMapper } from '~/components/utils';
-import { BottomNavigation } from '~/console/components/commons';
-import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/lib/client/hooks/use-log';
-import { Checkbox } from '~/components/atoms/checkbox';
-import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
-import { plans } from './datas';
-import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import Yup from '~/root/lib/server/helpers/yup';
 import { IEnvironmentContext } from '../_layout';
+import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
+import { plans } from './datas';
 
 const valueRender = ({
   label,

diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-review.tsx
@@ -1,29 +1,29 @@
 import { useNavigate, useOutletContext } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import { toast } from '~/components/molecule/toast';
-import { useAppState } from '~/console/page-components/app-states';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import useForm from '~/lib/client/hooks/use-form';
-import Yup from '~/lib/server/helpers/yup';
-import { handleError, sleep } from '~/lib/utils/common';
-import { validateType } from '~/root/src/generated/gql/validator';
-import { parseName } from '~/console/server/r-utils/common';
-import { FadeIn, parseValue } from '~/console/page-components/util';
 import {
   BottomNavigation,
   GitDetailRaw,
   ReviewComponent,
 } from '~/console/components/commons';
-import { keyconstants } from '~/console/server/r-utils/key-constants';
 import {
   CheckCircleFill,
   CircleFill,
   CircleNotch,
 } from '~/console/components/icons';
+import { useAppState } from '~/console/page-components/app-states';
+import { FadeIn, parseValue } from '~/console/page-components/util';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { parseName } from '~/console/server/r-utils/common';
+import { keyconstants } from '~/console/server/r-utils/key-constants';
 import { constants } from '~/console/server/utils/constants';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError, sleep } from '~/lib/utils/common';
 import { registryHost } from '~/root/lib/configs/base-url.cjs';
-import appFun from './app-pre-submit';
+import { validateType } from '~/root/src/generated/gql/validator';
 import { IEnvironmentContext } from '../_layout';
+import appFun from './app-pre-submit';
 import { getImageTag } from './app-utils';
 
 const AppState = ({ message, state }: { message: string; state: string }) => {
@@ -334,7 +334,7 @@ const AppReview = () => {
         )}
 
         <ReviewComponent
-          title="Environment"
+          title="Config"
           onEdit={() => {
             setPage(3);
           }}

diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/route.tsx
@@ -1,19 +1,19 @@
-import {
-  AppContextProvider,
-  useAppState,
-} from '~/console/page-components/app-states';
-import MultiStepProgress, {
-  useMultiStepProgress,
-} from '~/console/components/multi-step-progress';
-import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
 import { ReactNode, useCallback, useEffect } from 'react';
-import FillerAppDetail from '~/console/assets/app/filler-details';
+import { cn } from '~/components/utils';
 import FillerAppCompute from '~/console/assets/app/filler-compute';
+import FillerAppDetail from '~/console/assets/app/filler-details';
 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 MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/console/components/multi-step-progress';
+import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
+import {
+  AppContextProvider,
+  useAppState,
+} from '~/console/page-components/app-states';
 import AppCompute from '~/console/page-components/app/compute';
-import { cn } from '~/components/utils';
 import AppDetail from './app-detail';
 import AppEnvironment from './app-environment';
 import AppNetwork from './app-network';
@@ -70,7 +70,7 @@ const AppComp = () => {
         <MultiStepProgress.Step step={2} label="Compute">
           <AppCompute mode="new" />
         </MultiStepProgress.Step>
-        <MultiStepProgress.Step step={3} label="Environment">
+        <MultiStepProgress.Step step={3} label="Config">
           <AppEnvironment />
         </MultiStepProgress.Step>
         <MultiStepProgress.Step step={4} label="Network">

diff --git a/...utes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/new-app/app-review.tsx b/...utes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/new-app/app-review.tsx
@@ -1,29 +1,28 @@
 import { useNavigate, useOutletContext } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import { toast } from '~/components/molecule/toast';
+import {
+  BottomNavigation,
+  ReviewComponent,
+} from '~/iotconsole/components/commons';
 import { useAppState } from '~/iotconsole/page-components/app-states';
+import { FadeIn } from '~/iotconsole/page-components/util';
 import { useIotConsoleApi } from '~/iotconsole/server/gql/api-provider';
+import { parseName } from '~/iotconsole/server/r-utils/common';
+import { keyconstants } from '~/iotconsole/server/r-utils/key-constants';
 import useForm from '~/lib/client/hooks/use-form';
 import Yup from '~/lib/server/helpers/yup';
 import { handleError } from '~/lib/utils/common';
 import { validateType } from '~/root/src/generated/gql/validator';
-import { parseName } from '~/iotconsole/server/r-utils/common';
-import { FadeIn } from '~/iotconsole/page-components/util';
-import {
-  BottomNavigation,
-  ReviewComponent,
-} from '~/iotconsole/components/commons';
-import { keyconstants } from '~/iotconsole/server/r-utils/key-constants';
 import { IDeviceBlueprintContext } from '../_layout';
 
 const AppReview = () => {
   const { app, setPage, resetState } = useAppState();
 
   const api = useIotConsoleApi();
   const navigate = useNavigate();
-  const {  deviceblueprint } =
-    useOutletContext<IDeviceBlueprintContext>();
-  const [ deviceblueprintName] = [
+  const { deviceblueprint } = useOutletContext<IDeviceBlueprintContext>();
+  const [deviceblueprintName] = [
     project.name,
     deviceblueprint.name,
     // parseName(account),
@@ -33,13 +32,12 @@ const AppReview = () => {
     initialValues: app,
     validationSchema: Yup.object({}),
     onSubmit: async () => {
-      if ( !deviceblueprint) {
+      if (!deviceblueprint) {
         throw new Error('Project and deviceblueprint is required!.');
       }
 
       try {
         const { errors } = await api.createIotApp({
-
           deviceBlueprintName: deviceblueprintName,
           app: {
             ...app,
@@ -143,7 +141,7 @@ const AppReview = () => {
         )}
 
         <ReviewComponent
-          title="Environment"
+          title="Config"
           onEdit={() => {
             setPage(3);
           }}

diff --git a/...le/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/new-app/route.tsx b/...le/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/new-app/route.tsx
@@ -1,19 +1,19 @@
-import {
-  AppContextProvider,
-  useAppState,
-} from '~/iotconsole/page-components/app-states';
-import MultiStepProgress, {
-  useMultiStepProgress,
-} from '~/iotconsole/components/multi-step-progress';
-import MultiStepProgressWrapper from '~/iotconsole/components/multi-step-progress-wrapper';
 import { ReactNode, useCallback, useEffect } from 'react';
-import FillerAppDetail from '~/iotconsole/assets/app/filler-details';
+import { cn } from '~/components/utils';
 import FillerAppCompute from '~/iotconsole/assets/app/filler-compute';
+import FillerAppDetail from '~/iotconsole/assets/app/filler-details';
 import FillerAppEnv from '~/iotconsole/assets/app/filler-env';
 import FillerAppNetwork from '~/iotconsole/assets/app/filler-network';
 import FillerAppReview from '~/iotconsole/assets/app/filler-review';
+import MultiStepProgress, {
+  useMultiStepProgress,
+} from '~/iotconsole/components/multi-step-progress';
+import MultiStepProgressWrapper from '~/iotconsole/components/multi-step-progress-wrapper';
+import {
+  AppContextProvider,
+  useAppState,
+} from '~/iotconsole/page-components/app-states';
 import AppCompute from '~/iotconsole/page-components/app/compute';
-import { cn } from '~/components/utils';
 import AppDetail from './app-detail';
 import AppEnvironment from './app-environment';
 import AppNetwork from './app-network';