WIP app build integration

kloudlite · Mar 21, 2024 · eace51e · eace51e
1 parent 1eaac16
commit eace51e
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 33 deletions.
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -299,41 +299,65 @@ export const ReviewComponent = ({
   );
 };
 
-export const GitDetail = ({
+export const GitDetailRaw = ({
   provider,
   repository,
   branch,
-  onEdit,
 }: {
   provider: IGIT_PROVIDERS;
   repository: string;
   branch: string;
-  onEdit?: (step?: number) => void;
 }) => {
   const gitIconSize = 16;
   return (
-    <ReviewComponent title="Source details" onEdit={() => onEdit?.(1)}>
-      <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
-        <div className="flex flex-col gap-md">
-          <div className="bodyMd-medium text-text-default">Source</div>
-          <div className="flex flex-row items-center gap-3xl bodySm">
-            <div className="flex flex-row items-center gap-xl">
-              {provider === 'github' ? (
-                <GithubLogoFill size={gitIconSize} />
-              ) : (
-                <GitlabLogoFill size={gitIconSize} />
-              )}
-              <span>
-                {repository.replace('https://', '').replace('.git', '')}
-              </span>
-            </div>
-            <div className="flex flex-row items-center gap-xl">
-              <GitBranchFill size={gitIconSize} />
-              <span>{branch}</span>
-            </div>
+    <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
+      <div className="flex flex-col gap-md">
+        <div className="bodyMd-medium text-text-default">Source</div>
+        <div className="flex flex-row items-center gap-3xl bodySm">
+          <div className="flex flex-row items-center gap-xl">
+            {provider === 'github' ? (
+              <GithubLogoFill size={gitIconSize} />
+            ) : (
+              <GitlabLogoFill size={gitIconSize} />
+            )}
+            <span>
+              {repository.replace('https://', '').replace('.git', '')}
+            </span>
+          </div>
+          <div className="flex flex-row items-center gap-xl">
+            <GitBranchFill size={gitIconSize} />
+            <span>{branch}</span>
           </div>
         </div>
       </div>
+    </div>
+  );
+};
+
+export const GitDetail = ({
+  provider,
+  repository,
+  branch,
+  onEdit,
+  canEdit,
+}: {
+  provider: IGIT_PROVIDERS;
+  repository: string;
+  branch: string;
+  onEdit?: (step?: number) => void;
+  canEdit?: boolean;
+}) => {
+  return (
+    <ReviewComponent
+      title="Source details"
+      onEdit={() => onEdit?.(1)}
+      canEdit={canEdit}
+    >
+      <GitDetailRaw
+        branch={branch}
+        repository={repository}
+        provider={provider}
+      />
     </ReviewComponent>
   );
 };
diff --git a/src/apps/console/page-components/app/app-build-integration.tsx b/src/apps/console/page-components/app/app-build-integration.tsx
@@ -1,11 +1,10 @@
 import { useOutletContext } from '@remix-run/react';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { TextArea, TextInput } from '~/components/atoms/input';
-import Select from '~/components/atoms/select';
 import Git from '~/console/components/git';
 import KeyValuePair from '~/console/components/key-value-pair';
 import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
-import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout';
+import { IAppContext } from '~/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_layout';
 import { dummyEvent } from '~/root/lib/client/hooks/use-form';
 
 const AppBuildIntegration = ({

diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from '@remix-run/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, 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';
@@ -11,13 +11,17 @@ import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
 import {
   BottomNavigation,
+  GitDetail,
+  GitDetailRaw,
   ReviewComponent,
 } from '~/console/components/commons';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 
 const AppReview = () => {
   const { app, buildData, setPage, resetState } = useAppState();
 
+  const gitMode =
+    app.metadata?.annotations?.[keyconstants.appImageMode] === 'git';
   const api = useConsoleApi();
   const navigate = useNavigate();
   const { project, environment } = useParams();
@@ -30,11 +34,14 @@ const AppReview = () => {
         throw new Error('Project and Environment is required!.');
       }
 
+      // create build first if git image is selected
       let buildId = '';
-      const gitMode =
-        app.metadata?.annotations?.[keyconstants.appImageMode] === 'git';
 
       if (buildData && gitMode) {
+        toast.info('Creating build', {
+          toastId: 'app',
+        });
+
         try {
           const { errors, data } = await api.createBuild({
             build: buildData,
@@ -46,13 +53,21 @@ const AppReview = () => {
 
           buildId = data.id;
 
-          toast.success('build created successfully');
+          toast.update('app', {
+            type: 'success',
+            render: 'Build created successfully',
+          });
         } catch (err) {
           handleError(err);
+          return;
         }
       }
 
       try {
+        toast.update('app', {
+          type: 'info',
+          render: 'Creating app',
+        });
         const { errors } = await api.createApp({
           envName: environment,
           projectName: project,
@@ -79,7 +94,10 @@ const AppReview = () => {
         if (errors) {
           throw errors[0];
         }
-        toast.success('created successfully');
+        toast.update('app', {
+          type: 'success',
+          render: 'App created successfully',
+        });
         resetState();
         navigate('../apps');
       } catch (err) {
@@ -107,12 +125,21 @@ const AppReview = () => {
             setPage(1);
           }}
         >
-          <div className="flex flex-col p-xl gap-md rounded border border-border-default">
-            <div className="bodyMd-semibold text-text-default">
-              {app.displayName}
+          <div className="flex flex-col rounded border border-border-default">
+            <div className="flex flex-col p-xl gap-md">
+              <div className="bodyMd-semibold text-text-default">
+                {app.displayName}
+              </div>
+              <div className="bodySm text-text-soft">{parseName(app)}</div>
             </div>
-            <div className="bodySm text-text-soft">{parseName(app)}</div>
           </div>
+          {gitMode && buildData && (
+            <GitDetailRaw
+              branch={buildData?.source.branch}
+              provider={buildData?.source.provider}
+              repository={buildData?.source.repository}
+            />
+          )}
         </ReviewComponent>
 
         <ReviewComponent

diff --git a/src/design-system/components/molecule/toast.tsx b/src/design-system/components/molecule/toast.tsx
@@ -16,6 +16,8 @@ export const toast = {
   success: t.success,
   error: t.error,
   warn: t.warn,
+  isActive: t.isActive,
+  update: t.update,
 };
 
 const classes = {