From a569208b9f2b14a59e8acdf52501fe7092eb8268 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Tue, 12 Mar 2024 16:04:27 +0530
Subject: [PATCH] Fix/repo name (#136)

* :bug: Fixed issue with repoName
---
 Taskfile.yaml                                 |  2 +-
 lib/client/helpers/log.ts                     |  2 +-
 src/apps/console/components/git.tsx           |  9 ++--
 .../_main+/$account+/repo+/$repo+/_layout.tsx | 53 +++++++++++--------
 .../$repo+/buildruns/buildruns-resources.tsx  |  2 +-
 .../repo+/$repo+/buildruns/route.tsx          |  2 +-
 .../$account+/repo+/$repo+/builds/_index.tsx  | 12 ++---
 .../repo+/$repo+/builds/handle-builds.tsx     |  5 +-
 .../$account+/repo+/$repo+/images/route.tsx   | 13 ++---
 .../repo+/$repo+/images/sha-dialog.tsx        | 11 +++-
 .../repo+/$repo+/images/tags-resources.tsx    |  2 +-
 .../$repo+/new-build/configure-git-repo.tsx   |  2 -
 .../repo+/$repo+/new-build/route.tsx          | 38 +++++++------
 .../$repo+/settings/buildcaches/route.tsx     |  2 -
 .../repo+/$repo+/settings/general/route.tsx   | 20 +++----
 15 files changed, 99 insertions(+), 76 deletions(-)

diff --git a/Taskfile.yaml b/Taskfile.yaml
index 41360ec3b..cc9bb95da 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -8,7 +8,7 @@ tasks:
     interactive: true
     cmds:
       - |
-        BASE_URL=dev.kloudlite.io
+        BASE_URL=gcp-production.kloudlite.io
         COOKIE_DOMAIN=".kloudlite.io"
         GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local"
         case {{.app}} in
diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index 0f9d8781e..0e18c6651 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -90,7 +90,7 @@ const logger = {
     }
 
     if (err) {
-      console.trace(err);
+      console.log(err);
       if (!isDev) {
         PostToHook(`\`\`\`${err}\`\`\``);
       }
diff --git a/src/apps/console/components/git.tsx b/src/apps/console/components/git.tsx
index 649e9332b..07591ddd2 100644
--- a/src/apps/console/components/git.tsx
+++ b/src/apps/console/components/git.tsx
@@ -63,7 +63,7 @@ const githubInstallUrl = `https://github.com/apps/${githubAppName}/installations
 
 const popupWindow = ({
   url = '',
-  onClose = () => { },
+  onClose = () => {},
   width = 800,
   height = 500,
   title = 'kloudlite',
@@ -71,7 +71,8 @@ const popupWindow = ({
   const frame = window.open(
     url,
     title,
-    `toolbar=no,scrollbars=yes,resizable=no,top=${window.screen.height / 2 - height / 2
+    `toolbar=no,scrollbars=yes,resizable=no,top=${
+      window.screen.height / 2 - height / 2
     },left=${window.screen.width / 2 - width / 2},width=800,height=600`
   );
   const interval = setInterval(() => {
@@ -90,8 +91,8 @@ interface IBranch {
 
 interface IListRenderer {
   data:
-  | { name: string; updatedAt: any; private: true; url: string }[]
-  | undefined;
+    | { name: string; updatedAt: any; private: true; url: string }[]
+    | undefined;
   onChange: (value: string) => void;
   value: string;
   isLoading?: boolean;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
index 3d19bb7b3..caf263886 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -15,19 +15,13 @@ import {
 import Breadcrum from '~/console/components/breadcrum';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx, LoaderResult } from '~/root/lib/types/common';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import logger from '~/root/lib/client/helpers/log';
-import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import { IPackageContext } from '~/console/routes/_main+/$account+/packages+/_layout';
 
-export interface IRepoContext extends IPackageContext {
-  logins: ILogins;
-  loginUrls: ILoginUrls;
-}
 const LocalBreadcrum = () => {
-  const { repo, account } = useParams();
-  const repoName = atob(repo || '');
+  const { account, repo } = useParams();
   return (
     <div className="flex flex-row items-center">
       <Breadcrum.Button
@@ -44,16 +38,18 @@ const LocalBreadcrum = () => {
         }
       />
       <Breadcrum.Button
-        to={`/${account}/repo/${repoName}`}
+        to={`/${account}/repo/${repo}`}
         LinkComponent={Link}
-        content={<span>{repoName}</span>}
+        content={<span>{atob(repo || '')}</span>}
       />
     </div>
   );
 };
 
 const Tabs = () => {
-  const { repo, account } = useParams();
+  const { account } = useParams();
+
+  const { repo } = useParams();
   const iconSize = 16;
   return (
     <CommonTabs
@@ -103,14 +99,12 @@ const Tabs = () => {
     />
   );
 };
-export const handle = () => {
-  return {
-    navbar: <Tabs />,
-    breadcrum: () => <LocalBreadcrum />,
-  };
-};
 
 export const loader = async (ctx: IRemixCtx) => {
+  const { repo } = ctx.params;
+
+  const repoName = atob(repo || '');
+
   try {
     const { data, errors } = await GQLServerHandler(ctx.request).getLogins({});
 
@@ -129,21 +123,38 @@ export const loader = async (ctx: IRemixCtx) => {
     return {
       loginUrls: e,
       logins: data,
+      repoName,
     };
   } catch (err) {
     logger.error(err);
   }
 
+  const k: any = {};
+
+  return {
+    logins: k,
+    loginUrls: k,
+    repoName,
+  };
+};
+
+export const handle = () => {
   return {
-    logins: {},
-    loginUrls: {},
+    navbar: <Tabs />,
+    breadcrum: () => <LocalBreadcrum />,
   };
 };
 
+export interface IRepoContext extends IPackageContext {
+  logins: LoaderResult<typeof loader>['logins'];
+  loginUrls: LoaderResult<typeof loader>['loginUrls'];
+  repoName: LoaderResult<typeof loader>['repoName'];
+}
+
 const Repo = () => {
   const rootContext = useOutletContext<IPackageContext>();
-  const { logins, loginUrls } = useLoaderData<typeof loader>();
-  return <Outlet context={{ ...rootContext, logins, loginUrls }} />;
+  const ctx = useLoaderData<typeof loader>();
+  return <Outlet context={{ ...rootContext, ...ctx }} />;
 };
 
 export default Repo;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index ea949e042..392cfde55 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -25,8 +25,8 @@ import {
   XCircleFill,
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
-import { IAccountContext } from '../../../_layout';
 import LogComp from '~/root/lib/client/components/logger';
+import { IAccountContext } from '../../../_layout';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
index c66b84aa8..3f153897d 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
@@ -16,7 +16,7 @@ export const loader = async (ctx: IRemixCtx) => {
 
   const promise = pWrapper(async () => {
     const { data, errors } = await GQLServerHandler(ctx.request).listBuildRuns({
-      repoName: repo,
+      repoName: atob(repo),
       pq: getPagination(ctx),
       search: getSearch(ctx),
     });
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
index c544f5407..579eb8370 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
@@ -10,17 +10,17 @@ import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 import { Plus } from '@jengaicons/react';
 import { Button } from '~/components/atoms/button';
+import fake from '~/root/fake-data-generator/fake';
 import BuildResources from './build-resources';
 import HandleBuild from './handle-builds';
 import Tools from './tools';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = async (ctx: IRemixCtx) => {
   const { repo } = ctx.params;
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
     const { data, errors } = await GQLServerHandler(ctx.request).listBuilds({
-      repoName: repo,
+      repoName: atob(repo),
       pagination: getPagination(ctx),
       search: getSearch(ctx),
     });
@@ -44,10 +44,10 @@ const Builds = () => {
   return (
     <>
       <LoadingComp
-          data={promise}
-          skeletonData={{
-            buildData: fake.ConsoleListBuildsQuery.cr_listBuilds as any,
-          }}
+        data={promise}
+        skeletonData={{
+          buildData: fake.ConsoleListBuildsQuery.cr_listBuilds as any,
+        }}
       >
         {({ buildData }) => {
           const builds = buildData.edges?.map(({ node }) => node);
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
index 53d6abf67..1fd57ab56 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import { IDialogBase } from '~/console/components/types.d';
-import { useOutletContext, useParams } from '@remix-run/react';
+import { useOutletContext } from '@remix-run/react';
 import { Checkbox } from '~/components/atoms/checkbox';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
@@ -119,8 +119,6 @@ const Root = (props: IDialog) => {
     totalSteps: 2,
   });
 
-  const { repo } = useParams();
-
   const isAdvanceOptions = (data: any) => {
     if (!data) {
       return false;
@@ -306,6 +304,7 @@ const Root = (props: IDialog) => {
                     }}
                     error={!!errors.buildClusterName || !!errorCluster}
                     message={
+                      // eslint-disable-next-line no-nested-ternary
                       errors.buildClusterName
                         ? errors.buildClusterName
                         : errorCluster
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
index 485930746..0ed934e27 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
@@ -7,13 +7,13 @@ import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
-import SecondarySubHeader from '~/console/components/secondary-sub-header';
+import fake from '~/root/fake-data-generator/fake';
 import TagsResources from './tags-resources';
 import Tools from './tools';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = async (ctx: IRemixCtx) => {
   const { repo } = ctx.params;
+
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
     const { data, errors } = await GQLServerHandler(ctx.request).listDigest({
@@ -21,6 +21,7 @@ export const loader = async (ctx: IRemixCtx) => {
       pagination: getPagination(ctx),
       search: getSearch(ctx),
     });
+
     if (errors) {
       logger.error(errors[0]);
       throw errors[0];
@@ -38,10 +39,10 @@ const Images = () => {
   const { promise } = useLoaderData<typeof loader>();
   return (
     <LoadingComp
-        data={promise}
-        skeletonData={{
-          tagsData: fake.ConsoleListDigestQuery.cr_listDigests as any,
-        }}
+      data={promise}
+      skeletonData={{
+        tagsData: fake.ConsoleListDigestQuery.cr_listDigests as any,
+      }}
     >
       {({ tagsData }) => {
         const tags = tagsData.edges?.map(({ node }) => node);
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
index 6e8af2dec..04e878537 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
@@ -4,11 +4,18 @@ import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
 import { IDialog } from '~/console/components/types.d';
 import { registryHost } from '~/root/lib/configs/base-url.cjs';
+import { useOutletContext } from 'react-router-dom';
 import { ISHADialogData } from './tags-resources';
+import { IRepoContext } from '../_layout';
 
 const SHADialog = ({ show, setShow }: IDialog<ISHADialogData>) => {
-  const { account, repo } = useParams();
-  const url = `${registryHost}/${account}/${repo}:${
+  const { account } = useParams();
+
+  const { repoName } = useOutletContext<IRepoContext>();
+
+  return null;
+
+  const url = `${registryHost}/${account}/${repoName}:${
     show?.data?.tag ? show?.data?.tag : `@${show?.data?.sha}`
   }`;
   return (
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
index 48193e5c7..f6a3137a0 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
@@ -244,7 +244,7 @@ const TagsResources = ({ items = [] }: { items: BaseType[] }) => {
           }
         }}
       />
-      <SHADialog show={showSHADialog} setShow={setShowSHADialog} />
+      {/* <SHADialog show={showSHADialog} setShow={setShowSHADialog} /> */}
     </>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
index b1c6e42ac..4e224ef29 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
@@ -3,8 +3,6 @@ import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FadeIn } from '~/console/page-components/util';
 
-
-
 const ConfigureRepo = () => {
   const [setting, setSetting] = useState('general');
   return (
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
index 82b74fe0d..cd18a3b20 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
@@ -10,12 +10,13 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import Git from '~/console/components/git';
 import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
 import { BottomNavigation } from '~/console/components/commons';
+import { toast } from '~/components/molecule/toast';
 import ReviewBuild from './review-build';
 import BuildDetails from './build-details';
 import { IRepoContext } from '../_layout';
 
 const NewBuild = () => {
-  const { loginUrls, logins } = useOutletContext<IRepoContext>();
+  const { loginUrls, logins, repoName } = useOutletContext<IRepoContext>();
 
   const navigate = useNavigate();
 
@@ -27,7 +28,6 @@ const NewBuild = () => {
   });
 
   const api = useConsoleApi();
-  const { repo } = useParams();
 
   const { values, errors, handleSubmit, handleChange, isLoading } = useForm({
     initialValues: {
@@ -40,7 +40,7 @@ const NewBuild = () => {
       tags: [],
       buildClusterName: '',
       advanceOptions: false,
-      repository: repo || '',
+      repository: repoName || '',
       buildArgs: {},
       buildContexts: {},
       contextDir: '',
@@ -69,8 +69,9 @@ const NewBuild = () => {
       }),
     }),
     onSubmit: async (val) => {
-      if (!repo) {
-        throw new Error('Repository is required!.');
+      if (!repoName) {
+        toast.error('Repository is required!.');
+        return;
       }
       const submit = async () => {
         try {
@@ -115,21 +116,26 @@ const NewBuild = () => {
           if (e) {
             throw e[0];
           }
-          navigate(`/${account}/repo/${repo}/builds`);
+          navigate(`/${account}/repo/${repoName}/builds`);
         } catch (err) {
           handleError(err);
         }
       };
-      switch (currentStep) {
-        case 1:
-          nextStep();
-          break;
-        case 2:
-          nextStep();
-          break;
-        default:
-          await submit();
-          break;
+
+      try {
+        switch (currentStep) {
+          case 1:
+            nextStep();
+            break;
+          case 2:
+            nextStep();
+            break;
+          default:
+            await submit();
+            break;
+        }
+      } catch (err) {
+        handleError(err);
       }
     },
   });
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
index 08cda8462..678b11fd0 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
@@ -2,9 +2,7 @@ import { defer } from '@remix-run/node';
 import { Link, useLoaderData, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
-import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
-import SubNavAction from '~/console/components/sub-nav-action';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
index 7cc4ed6a2..c2060a8cd 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
@@ -1,5 +1,5 @@
 import { CopySimple } from '@jengaicons/react';
-import { useNavigate, useParams } from '@remix-run/react';
+import { useNavigate, useOutletContext, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { TextInput } from '~/components/atoms/input';
 import { toast } from '~/components/molecule/toast';
@@ -12,9 +12,11 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { consoleBaseUrl } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
+import { IRepoContext } from '../../_layout';
 
 const ProjectSettingGeneral = () => {
-  const { repo = '', account } = useParams();
+  const { account } = useParams();
+  const { repoName } = useOutletContext<IRepoContext>();
   const api = useConsoleApi();
   const navigate = useNavigate();
   const [deleteRepo, setDeleteRepo] = useState(false);
@@ -30,14 +32,14 @@ const ProjectSettingGeneral = () => {
       <Box title="General">
         <TextInput
           label="Repo name"
-          value={repo}
+          value={repoName}
           // onChange={handleChange('displayName')}
         />
         <div className="flex flex-row items-center gap-3xl">
           <div className="flex-1">
             <TextInput
               label="Repo URL"
-              value={`${consoleBaseUrl}/${account}/repo/${repo}`}
+              value={`${consoleBaseUrl}/${account}/repo/${repoName}`}
               message="This is your URL namespace within Kloudlite"
               disabled
               suffix={
@@ -45,7 +47,7 @@ const ProjectSettingGeneral = () => {
                   <button
                     aria-label="copy"
                     onClick={() =>
-                      copy(`${consoleBaseUrl}/${account}/repo/${repo}}`)
+                      copy(`${consoleBaseUrl}/${account}/repo/${repoName}}`)
                     }
                     className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
                     tabIndex={-1}
@@ -58,14 +60,14 @@ const ProjectSettingGeneral = () => {
           </div>
           <div className="flex-1">
             <TextInput
-              value={repo}
+              value={repoName}
               label="Repo ID"
               message="Used when interacting with the Kloudlite API"
               suffix={
                 <div className="flex justify-center items-center" title="Copy">
                   <button
                     aria-label="copy"
-                    onClick={() => copy(repo)}
+                    onClick={() => copy(repoName)}
                     className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
                     tabIndex={-1}
                   >
@@ -88,14 +90,14 @@ const ProjectSettingGeneral = () => {
         platform. This action is not reversible — please continue with caution.
       </DeleteContainer>
       <DeleteDialog
-        resourceName={repo}
+        resourceName={repoName}
         resourceType="repo"
         show={deleteRepo}
         setShow={setDeleteRepo}
         onSubmit={async () => {
           try {
             const { errors } = await api.deleteRepo({
-              name: repo,
+              name: repoName,
             });
 
             if (errors) {