Merge pull request #61 from kloudlite/features/design

Features/design
kloudlite · Jan 1, 2024 · eb73630 · eb73630
2 parents c4cc817 + b7f8f4a
commit eb73630
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 76 deletions.
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -39,7 +39,7 @@ tasks:
             ;;
 
           "vision")
-            URL_SUFFIX=""
+            URL_SUFFIX="-vision"
             ;;
 
           *)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
@@ -30,6 +30,7 @@ import styleZenerSelect from '@oshq/react-select/index.css';
 import stylesUrl from '~/design-system/index.css';
 import rcss from 'react-highlightjs-logs/dist/index.css';
 import { isDev } from '../client/helpers/log';
+import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 
 export const links = () => [
   { rel: 'stylesheet', href: stylesUrl },
@@ -156,7 +157,7 @@ const Root = ({
 }: {
   Wrapper: (prop: { children: ReactNode }) => JSX.Element;
 }) => {
-  const { NODE_ENV, DEVELOPER, URL_SUFFIX, BASE_URL } = useLoaderData();
+  const env = useLoaderData();
 
   return (
     <html lang="en" className="bg-surface-basic-subdued text-text-default">
@@ -184,15 +185,7 @@ const Root = ({
         <script
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
-            __html: `
-${BASE_URL ? `window.BASE_URL = ${`'${BASE_URL}'`}` : ''}
-${
-  NODE_ENV === 'development'
-    ? `window.DEVELOPER = ${`'${DEVELOPER}'`}`
-    : `window.NODE_ENV = ${`'${NODE_ENV}'`}`
-}
-${URL_SUFFIX ? `window.URL_SUFFIX = ${`'${URL_SUFFIX}'`}` : ''}
-               `,
+            __html: getClientEnv(env),
           }}
         />
         <LiveReload port={443} />
@@ -212,23 +205,7 @@ ${URL_SUFFIX ? `window.URL_SUFFIX = ${`'${URL_SUFFIX}'`}` : ''}
 };
 
 export const loader = () => {
-  // if (ctx?.request?.headers?.get('referer')) {
-  //   return redirect(ctx.request.url);
-  // }
-
-  const nodeEnv = process.env.NODE_ENV;
-  return {
-    NODE_ENV: nodeEnv,
-    ...(nodeEnv === 'development'
-      ? { PORT: Number(process.env.PORT), DEVELOPER: process.env.DEVELOPER }
-      : {}),
-
-    ...(process.env.URL_SUFFIX ? { URL_SUFFIX: process.env.URL_SUFFIX } : {}),
-    ...(process.env.BASE_URL ? { BASE_URL: process.env.BASE_URL } : {}),
-    ...(process.env.GATEWAY_URL
-      ? { GATEWAY_URL: process.env.GATEWAY_URL }
-      : {}),
-  };
+  return getServerEnv();
 };
 
 export const headers: HeadersFunction = ({
@@ -244,20 +221,6 @@ export const headers: HeadersFunction = ({
   };
 };
 
-// params of shouldRevalidate
-//   {
-//   actionResult,
-//   currentParams,
-//   currentUrl,
-//   defaultShouldRevalidate,
-//   formAction,
-//   formData,
-//   formEncType,
-//   formMethod,
-//   nextParams,
-//   nextUrl,
-// }
-
 export const shouldRevalidate = () => false;
 
 export default Root;
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
@@ -1,3 +1,37 @@
+// @ts-ignore
+const getClientEnv = (env) => {
+  const { BASE_URL, NODE_ENV, URL_SUFFIX, DEVELOPER, REGISTRY_URL } = env;
+  return `
+${BASE_URL ? `window.BASE_URL = ${`'${BASE_URL}'`}` : ''}
+${
+  NODE_ENV === 'development'
+    ? `window.DEVELOPER = ${`'${DEVELOPER}'`}`
+    : `window.NODE_ENV = ${`'${NODE_ENV}'`}`
+}
+${URL_SUFFIX ? `window.URL_SUFFIX = ${`'${URL_SUFFIX}'`}` : ''}
+${REGISTRY_URL ? `window.REGISTRY_URL = ${`'${REGISTRY_URL}'`}` : ''}
+`;
+};
+
+const getServerEnv = () => {
+  const nodeEnv = process.env.NODE_ENV;
+  return {
+    NODE_ENV: nodeEnv,
+    ...(nodeEnv === 'development'
+      ? { PORT: Number(process.env.PORT), DEVELOPER: process.env.DEVELOPER }
+      : {}),
+
+    ...(process.env.URL_SUFFIX ? { URL_SUFFIX: process.env.URL_SUFFIX } : {}),
+    ...(process.env.BASE_URL ? { BASE_URL: process.env.BASE_URL } : {}),
+    ...(process.env.GATEWAY_URL
+      ? { GATEWAY_URL: process.env.GATEWAY_URL }
+      : {}),
+    ...(process.env.REGISTRY_URL
+      ? { REGISTRY_URL: process.env.REGISTRY_URL }
+      : {}),
+  };
+};
+
 const baseUrls = () => {
   const bUrl =
     (() => {
@@ -35,10 +69,20 @@ const baseUrls = () => {
       return process.env.GATEWAY_URL;
     })() || 'http://gateway-api.kl-core.svc.cluster.local';
 
+  const registryHost =
+    (() => {
+      if (typeof window !== 'undefined') {
+        // @ts-ignore
+        return window.REGISTRY_URL;
+      }
+      return process.env.REGISTRY_URL;
+    })() || `registry.${bUrl}`;
+
   return {
     gatewayUrl,
     authBaseUrl: `https://auth${postFix}.${bUrl}`,
     consoleBaseUrl: `https://console${postFix}.${bUrl}`,
+    registryHost,
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
@@ -54,6 +98,9 @@ const defaultConfig = {
   baseUrl: baseUrls().baseUrl,
   githubAppName: baseUrls().githubAppName,
   socketUrl: baseUrls().socketUrl,
+  registryHost: baseUrls().registryHost,
+  getServerEnv,
+  getClientEnv,
 };
 
 module.exports = defaultConfig;
diff --git a/lib/configs/env.ts b/lib/configs/env.ts
@@ -1,2 +1 @@
 export const ENV_NAMESPACE = 'kloudlite';
-export const REGISTRY_HOST = 'cr.khost.dev';
diff --git a/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx
@@ -25,7 +25,7 @@ import {
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { REGISTRY_HOST } from '~/root/lib/configs/env';
+import { registryHost } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
 
 const RESOURCE_NAME = 'credential';
@@ -88,10 +88,10 @@ const RegistryUrlView = () => {
         <div
           className="cursor-pointer flex flex-row items-center gap-lg truncate"
           onClick={() => {
-            copy(REGISTRY_HOST);
+            copy(registryHost);
           }}
         >
-          <span className="truncate">{REGISTRY_HOST}</span>
+          <span className="truncate">{registryHost}</span>
           <span>
             <Copy size={16} />
           </span>

diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -22,7 +22,7 @@ import {
 } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
-import { REGISTRY_HOST } from '~/root/lib/configs/env';
+import { gatewayUrl } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
 
 type BaseType = ExtractNodeType<IRepos>;
@@ -63,7 +63,7 @@ const RepoUrlView = ({ name }: { name: string }) => {
       toast.success('Registry url copied successfully.');
     },
   });
-  const url = `${REGISTRY_HOST}/${account}/${name}`;
+  const url = `${gatewayUrl}/${account}/${name}`;
   return (
     <ListBody
       data={

diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -1,9 +1,9 @@
 import { Link, Outlet, useOutletContext, useParams } from '@remix-run/react';
 import { ChevronRight } from '@jengaicons/react';
 import Breadcrum from '~/console/components/breadcrum';
-import { constants } from '~/console/server/utils/constants';
 import SidebarLayout from '~/console/components/sidebar-layout';
 import { useHandleFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
+import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { IProjectContext } from '../../$cluster+/$project+/_layout';
 
 const NetworkBreadcrum = () => {
@@ -28,9 +28,21 @@ const NetworkBreadcrum = () => {
   );
 };
 
+const Tabs = () => {
+  const { account } = useParams();
+  return (
+    <CommonTabs
+      backButton={{
+        to: `/${account}/container-registry/repos`,
+        label: 'Repos',
+      }}
+    />
+  );
+};
+
 export const handle = () => {
   return {
-    navbar: constants.nan,
+    navbar: <Tabs />,
     breadcrum: () => <NetworkBreadcrum />,
   };
 };
@@ -48,7 +60,7 @@ const Repo = () => {
       navItems={[
         { label: 'Images', value: 'images' },
         { label: 'Builds', value: 'builds' },
-        { label: 'Build caches', value: 'buildcaches' },
+        // { label: 'Build caches', value: 'buildcaches' },
       ]}
       parentPath={`/${repo}`}
       headerTitle={repo || ''}

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
@@ -1,10 +1,8 @@
 import { defer } from '@remix-run/node';
-import { useLoaderData, useParams } from '@remix-run/react';
+import { useLoaderData } 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';
@@ -38,24 +36,6 @@ export const loader = async (ctx: IRemixCtx) => {
   return defer({ promise });
 };
 
-const Tabs = () => {
-  const { account } = useParams();
-  return (
-    <CommonTabs
-      backButton={{
-        to: `/${account}/container-registry/repos`,
-        label: 'Repos',
-      }}
-    />
-  );
-};
-
-export const handle = () => {
-  return {
-    navbar: <Tabs />,
-  };
-};
-
 const Builds = () => {
   const [visible, setVisible] = useState(false);
   const { promise } = useLoaderData<typeof loader>();

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
@@ -1,6 +1,5 @@
 import { defer } from '@remix-run/node';
-import { useLoaderData, useParams } from '@remix-run/react';
-import { CommonTabs } from '~/console/components/common-navbar-tabs';
+import { useLoaderData } from '@remix-run/react';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';

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
@@ -3,12 +3,12 @@ import { useParams } from '@remix-run/react';
 import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
 import { IDialog } from '~/console/components/types.d';
-import { REGISTRY_HOST } from '~/root/lib/configs/env';
+import { registryHost } from '~/root/lib/configs/base-url.cjs';
 import { ISHADialogData } from './tags-resources';
 
 const SHADialog = ({ show, setShow }: IDialog<ISHADialogData>) => {
   const { account, repo } = useParams();
-  const url = `${REGISTRY_HOST}/${account}/${repo}:${
+  const url = `${registryHost}/${account}/${repo}:${
     show?.data?.tag ? show?.data?.tag : `@${show?.data?.sha}`
   }`;
   return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ tasks: @@
                 ;;
               "vision")
-                URL_SUFFIX=""
+                URL_SUFFIX="-vision"
                 ;;
               *)
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export const ENV_NAMESPACE = 'kloudlite';
		export const REGISTRY_HOST = 'cr.khost.dev';