Merge pull request #108 from kloudlite/console/design

Console/design

gql-queries-generator/doc/queries.graphql

@@ -773,6 +773,11 @@ query consoleGetEnvironment($projectName: String!, $name: String!) {
     projectName
     spec {
       projectName
+      routing {
+        mode
+        privateIngressClass
+        publicIngressClass
+      }
       targetNamespace
     }
     status {

src/apps/console/components/commons.tsx

@@ -10,11 +10,21 @@ import {
 } from '~/root/src/generated/gql/server';
 import Tooltip from '~/components/atoms/tooltip';
 import { Link } from '@remix-run/react';
+import { Button, IButton } from '~/components/atoms/button';
 import { ListItem } from './console-list-components';
 import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '../server/r-utils/common';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Pencil,
+  GitBranchFill,
+  GitlabLogoFill,
+  GithubLogoFill,
+} from './icons';
+import { IGIT_PROVIDERS } from '../hooks/use-git';
 
 export const BlackProdLogo = ({ size = 16 }) => {
   return <ProdLogo color="currentColor" size={size} />;
@@ -232,3 +242,107 @@ export const SubHeaderTitle = ({
     </div>
   );
 };
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export const BottomNavigation = ({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: Optional<IButton, 'content'>;
+  secondaryButton?: Optional<IButton, 'content'>;
+}) => {
+  return (
+    <div className="flex flex-row gap-3xl items-center">
+      {secondaryButton && (
+        <Button
+          prefix={<ArrowLeft />}
+          variant="outline"
+          content="Back"
+          size="lg"
+          {...{ ...secondaryButton }}
+        />
+      )}
+      {primaryButton && (
+        <Button
+          suffix={<ArrowRight />}
+          variant="primary"
+          content="Next"
+          size="lg"
+          {...primaryButton}
+        />
+      )}
+    </div>
+  );
+};
+
+interface IReviewComponent {
+  title: string;
+  children: ReactNode;
+  onEdit: () => void;
+  canEdit?: boolean;
+}
+export const ReviewComponent = ({
+  title = '',
+  children,
+  onEdit,
+  canEdit = true,
+}: IReviewComponent) => {
+  return (
+    <div className="flex flex-col gap-2xl pb-3xl">
+      <div className="flex flex-row items-center">
+        <span className="text-text-soft bodyMd flex-1">{title}</span>
+        {canEdit && (
+          <button
+            type="button"
+            aria-label="edit"
+            className="text-icon-soft"
+            onClick={onEdit}
+          >
+            <Pencil size={16} />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export const GitDetail = ({
+  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>
+        </div>
+      </div>
+    </ReviewComponent>
+  );
+};

src/apps/console/components/icons.tsx

@@ -0,0 +1,21 @@
+import {
+  ArrowLeftFill,
+  ArrowRightFill,
+  Plus,
+  Trash,
+  PencilLine,
+  GithubLogoFill,
+  GitBranchFill,
+  GitlabLogoFill,
+} from '@jengaicons/react';
+
+export {
+  ArrowLeftFill as ArrowLeft,
+  ArrowRightFill as ArrowRight,
+  Plus,
+  Trash,
+  PencilLine as Pencil,
+  GithubLogoFill,
+  GitlabLogoFill,
+  GitBranchFill,
+};

src/apps/console/components/multi-step-progress-wrapper.tsx

@@ -1,7 +1,7 @@
-import { ArrowLeft } from '@jengaicons/react';
 import { Link } from '@remix-run/react';
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
+import { ArrowLeft } from '~/console/components/icons';
 
 type ITitleSection = {
   title: ReactNode;

src/apps/console/page-components/new-cluster.tsx

@@ -23,22 +23,22 @@ import {
 } from '../server/r-utils/common';
 import { ensureAccountClientSide } from '../server/utils/auth-utils';
 import { NameIdView } from '../components/name-id-view';
-import { ReviewComponent } from '../routes/_main+/$account+/$project+/$environment+/new-app/app-review';
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
+import { ReviewComponent } from '../components/commons';
 
 type props =
   | {
-    providerSecrets: IProviderSecrets;
-    cloudProvider?: IProviderSecret;
-  }
+      providerSecrets: IProviderSecrets;
+      cloudProvider?: IProviderSecret;
+    }
   | {
-    providerSecrets?: IProviderSecrets;
-    cloudProvider: IProviderSecret;
-  };
+      providerSecrets?: IProviderSecrets;
+      cloudProvider: IProviderSecret;
+    };
 
 export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
   const { cloudprovider: cp } = useParams();
@@ -75,11 +75,11 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
 
   const [selectedProvider, setSelectedProvider] = useState<
     | {
-      label: string;
-      value: string;
-      provider: ExtractNodeType<IProviderSecrets>;
-      render: () => JSX.Element;
-    }
+        label: string;
+        value: string;
+        provider: ExtractNodeType<IProviderSecrets>;
+        render: () => JSX.Element;
+      }
     | undefined
   >(options.length === 1 ? options[0] : undefined);
 
@@ -283,11 +283,11 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
         {...(isOnboarding
           ? {}
           : {
-            backButton: {
-              content: 'Back to clusters',
-              to: rootUrl,
-            },
-          })}
+              backButton: {
+                content: 'Back to clusters',
+                to: rootUrl,
+              },
+            })}
       >
         <MultiStepProgress.Root
           noJump={(step) => isOnboarding || !(step < currentStep)}

src/apps/console/page-components/new-project.tsx

@@ -18,12 +18,12 @@ import { ensureAccountClientSide } from '../server/utils/auth-utils';
 import { INewProjectFromAccountLoader } from '../routes/_a+/$a+/new-project';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { NameIdView } from '../components/name-id-view';
-import { ReviewComponent } from '../routes/_main+/$account+/$project+/$environment+/new-app/app-review';
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
+import { ReviewComponent } from '../components/commons';
 
 const statusRender = (item: ExtractNodeType<IClusters>) => {
   return listStatus({

src/apps/console/page-components/new-scope.tsx

@@ -2,25 +2,24 @@ import { useParams } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
-import { parseName, parseTargetNs } from '~/console/server/r-utils/common';
+import { parseName } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import { Switch } from '~/components/atoms/switch';
+import { Checkbox } from '~/components/atoms/checkbox';
 import { IDialog } from '../components/types.d';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { DIALOG_TYPE } from '../utils/commons';
 import { IEnvironment } from '../server/gql/queries/environment-queries';
 import { NameIdView } from '../components/name-id-view';
 
-const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null> & {}) => {
+const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null>) => {
   const api = useConsoleApi();
   const reloadPage = useReload();
 
   const { project: projectName } = useParams();
-  const project = useDataFromMatches('project', {});
 
   const [validationSchema, setValidationSchema] = useState<any>(
     Yup.object({
@@ -149,7 +148,7 @@ const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null> & {}) => {
               nameErrorLabel="isNameError"
               isUpdate={show?.type !== DIALOG_TYPE.ADD}
             />
-            <Switch
+            <Checkbox
               label="Public"
               checked={values.environmentRoutingMode}
               onChange={(val) => {

src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx

@@ -1,6 +1,6 @@
-import { ArrowLeft, ArrowRight, PencilLine } from '@jengaicons/react';
+import { ArrowLeft, ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
-import { ReactNode, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { useAppState } from '~/console/page-components/app-states';
@@ -11,38 +11,8 @@ import { handleError } from '~/root/lib/utils/common';
 import { validateType } from '~/root/src/generated/gql/validator';
 import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
+import { ReviewComponent } from '~/console/components/commons';
 
-interface IReviewComponent {
-  title: string;
-  children: ReactNode;
-  onEdit: () => void;
-  canEdit?: boolean;
-}
-export const ReviewComponent = ({
-  title = '',
-  children,
-  onEdit,
-  canEdit = true,
-}: IReviewComponent) => {
-  return (
-    <div className="flex flex-col gap-2xl pb-3xl">
-      <div className="flex flex-row items-center">
-        <span className="text-text-soft bodyMd flex-1">{title}</span>
-        {canEdit && (
-          <button
-            type="button"
-            aria-label="edit"
-            className="text-icon-soft"
-            onClick={onEdit}
-          >
-            <PencilLine size={16} />
-          </button>
-        )}
-      </div>
-      {children}
-    </div>
-  );
-};
 const AppReview = () => {
   const { app, setPage, resetState } = useAppState();
 
@@ -87,7 +57,7 @@ const AppReview = () => {
     <FadeIn onSubmit={handleSubmit} className="py-3xl">
       <div>An assessment of the work, product, or performance.</div>
       <div className="flex flex-col gap-3xl">
-        <ReviewComponent title="Application detail" onEdit={() => { }}>
+        <ReviewComponent title="Application detail" onEdit={() => {}}>
           <div className="flex flex-col p-xl gap-md rounded border border-border-default">
             <div className="bodyMd-semibold text-text-default">
               {app.displayName}
@@ -96,7 +66,7 @@ const AppReview = () => {
           </div>
         </ReviewComponent>
 
-        <ReviewComponent title="Compute" onEdit={() => { }}>
+        <ReviewComponent title="Compute" onEdit={() => {}}>
           <div className="flex flex-row gap-3xl">
             <div className="flex flex-col rounded border border-border-default flex-1 overflow-hidden">
               <div className="px-xl py-lg bg-surface-basic-subdued">
@@ -131,7 +101,7 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Environment" onEdit={() => { }}>
+        <ReviewComponent title="Environment" onEdit={() => {}}>
           <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
             <div className="flex flex-row items-center gap-lg pb-xl border-b border-border-default">
               <div className="flex-1 bodyMd-medium text-text-default">
@@ -151,7 +121,7 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Network" onEdit={() => { }}>
+        <ReviewComponent title="Network" onEdit={() => {}}>
           <div className="flex flex-row gap-xl p-xl rounded border border-border-default">
             <div className="text-text-default bodyMd flex-1">
               Ports exposed from the app

src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx

@@ -34,7 +34,7 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
-import { ReviewComponent } from '../new-app/app-review';
+import { ReviewComponent } from '~/console/components/commons';
 import { IProjectContext } from '../../_layout';
 
 export const loader = (ctx: IRemixCtx) => {