Merge pull request #297 from kloudlite/update/multi-tanency

WEB: Webinar and console changes
kloudlite · Sep 23, 2024 · 3cea8af · 3cea8af
2 parents 16b1269 + 769baa7
commit 3cea8af
Show file tree

Hide file tree

Showing 41 changed files with 1,120 additions and 476 deletions.
diff --git a/web/.dockerignore b/web/.dockerignore
@@ -20,3 +20,5 @@ src/generated/plugin/node_modules
 src/design-system/node_modules
 src/apps/devdoc/node_modules
 src/apps/devdoc/.next
+src/apps/webinar/.env
+
diff --git a/web/.gitignore b/web/.gitignore
@@ -35,3 +35,5 @@ out
 storybook-dist
 
 tsconfig-compile.tsbuildinfo
+
+.secrets
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -12,8 +12,10 @@ COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
 # typecheck
 ARG APP
 ENV APP=${APP}
-COPY ./src/generated/package.json ./src/generated/package.json
-COPY ./src/generated/plugin/package.json ./src/generated/plugin/package.json
+# COPY ./src/generated/package.json ./src/generated/package.json
+# COPY ./src/generated/plugin/package.json ./src/generated/plugin/package.json
+COPY ./src/generated/package.json ./src/generated/pnpm-lock.yaml ./src/generated/
+COPY ./src/generated/plugin/package.json  ./src/generated/plugin/pnpm-lock.yaml ./src/generated/plugin/
 
 RUN pnpm i -p --frozen-lockfile
 

diff --git a/web/Dockerfile.webinar b/web/Dockerfile.webinar
@@ -1,27 +1,33 @@
-FROM node:20.8.1-alpine as base
+FROM node:20.8.1-alpine AS base
 RUN apk add g++ make py3-pip
 RUN npm i -g pnpm
 WORKDIR /app
 COPY ./package.json ./package.json
 COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
 
-COPY ./src/generated/package.json ./src/generated/package.json
-COPY ./src/generated/plugin/package.json ./src/generated/plugin/package.json
+RUN mkdir -p ./src/generated/plugin
+COPY ./src/generated/package.json ./src/generated/pnpm-lock.yaml ./src/generated/
+COPY ./src/generated/plugin/package.json  ./src/generated/plugin/pnpm-lock.yaml ./src/generated/plugin/
 
-RUN pnpm i
+RUN --mount=type=bind,source=package.json,target=package.json \
+  --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+  --mount=type=cache,target=/root/.local/share/pnpm/store \
+  pnpm i --frozen-lockfile
 
+# lib
+COPY ./lib ./lib
 
 # design system
 COPY ./src/design-system/ ./src/design-system/
 WORKDIR /app/src/design-system
-RUN pnpm i -p
+RUN pnpm i --frozen-lockfile
 RUN pnpm local:release
 
 # webinar
 WORKDIR /app
 COPY ./src/apps/webinar ./src/apps/webinar
 WORKDIR /app/src/apps/webinar
-RUN pnpm i -p
+RUN pnpm i --frozen-lockfile
 RUN pnpm build
 
 FROM node:20.8.1-alpine

diff --git a/web/Taskfile.yaml b/web/Taskfile.yaml
@@ -10,7 +10,7 @@ tasks:
       - |
         BASE_URL=dev.kloudlite.io
         COOKIE_DOMAIN=".kloudlite.io"
-        GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local:3000"
+        GATEWAY_URL="http://gateway-api.kloudlite.svc.cluster.local:3000"
         case {{.app}} in
           "auth")
             PORT=4000
@@ -106,7 +106,7 @@ tasks:
         BASE_URL=kloudlite.io
         URL_SUFFIX=""
         COOKIE_DOMAIN=".kloudlite.io"
-        GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local:3000"
+        GATEWAY_URL="http://gateway-api.kloudlite.svc.cluster.local:3000"
 
         case {{.app}} in
           "auth")

diff --git a/web/lib/configs/base-url.cjs b/web/lib/configs/base-url.cjs
@@ -9,28 +9,26 @@ const getClientEnv = (env) => {
     MANAGE_GITLAB_URL,
     MANAGE_GITHUB_URL,
     GITHUB_APP_NAME,
+    COOKIE_DOMAIN,
   } = env;
   return `
 ${BASE_URL ? `window.BASE_URL = ${`'${BASE_URL}'`}` : ''}
-${
-  NODE_ENV === 'development'
-    ? `window.DEVELOPER = ${`'${DEVELOPER}'`}`
-    : `window.NODE_ENV = ${`'${NODE_ENV}'`}`
-}
+${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}'`}` : ''}
-${
-  MANAGE_GITHUB_URL
-    ? `window.MANAGE_GITHUB_URL = ${`'${MANAGE_GITHUB_URL}'`}`
-    : ''
-}
-${
-  MANAGE_GITLAB_URL
-    ? `window.MANAGE_GITLAB_URL = ${`'${MANAGE_GITLAB_URL}'`}`
-    : ''
-}
+${MANAGE_GITHUB_URL
+      ? `window.MANAGE_GITHUB_URL = ${`'${MANAGE_GITHUB_URL}'`}`
+      : ''
+    }
+${MANAGE_GITLAB_URL
+      ? `window.MANAGE_GITLAB_URL = ${`'${MANAGE_GITLAB_URL}'`}`
+      : ''
+    }
 ${GITHUB_APP_NAME ? `window.GITHUB_APP_NAME = ${`'${GITHUB_APP_NAME}'`}` : ''}
-`;
+${COOKIE_DOMAIN ? `window.COOKIE_DOMAIN = ${`'${COOKIE_DOMAIN}'`}` : ''} `;
 };
 
 const getServerEnv = () => {
@@ -58,6 +56,9 @@ const getServerEnv = () => {
     ...(process.env.GITHUB_APP_NAME
       ? { GITHUB_APP_NAME: process.env.GITHUB_APP_NAME }
       : {}),
+    ...(process.env.COOKIE_DOMAIN
+      ? { COOKIE_DOMAIN: process.env.COOKIE_DOMAIN }
+      : {}),
   };
 };
 
@@ -100,7 +101,7 @@ const baseUrls = () => {
         return window.REGISTRY_URL;
       }
       return process.env.REGISTRY_URL;
-    })() || `registry.${bUrl}`;
+    })() || `registry.${bUrl} `;
 
   const gitEnvs = (() => {
     if (typeof window !== 'undefined') {

diff --git a/web/lib/shared-statics/events.json b/web/lib/shared-statics/events.json
@@ -0,0 +1,10 @@
+{
+    "code-unbound-new-age-development-environments": {
+        "name": "Code Unbound: New Age Development Environments",
+        "dyteMeetingId": "bbbba7f8-3643-41fd-831a-15a321f80966",
+        "date": "2024-09-21",
+        "starttime": "12:15",
+        "endtime": "13:15",
+        "type": "Online"
+    }
+}
diff --git a/web/package.json b/web/package.json
@@ -5,7 +5,7 @@
   "homepage": "https://kloudlite.github.io",
   "type": "module",
   "scripts": {
-    "postinstall": "cd src/generated && pnpm i",
+    "postinstall": "cd src/generated && ls -al && pnpm i --frozen-lockfile",
     "fake": "esbuild fake-data-generator/gen.ts --format=cjs --outfile=public/dist/fake-data-generator.cjs --platform=node && node public/dist/fake-data-generator.cjs",
     "dev": "remix dev",
     "serve": "remix-serve ./public/${APP}/server",
@@ -91,7 +91,7 @@
     "react-qr-code": "^2.0.12",
     "react-remove-scroll": "^2.5.7",
     "react-router-dom": "^6.21.1",
-    "react-toastify": "10.0.5",
+    "react-toastify": "^9.1.3",
     "react-tooltip": "^5.27.0",
     "react-viewport-list": "^7.1.2",
     "reconnecting-websocket": "^4.4.0",
@@ -140,4 +140,4 @@
     "typescript": "^5.3.3",
     "typescript-json-schema": "^0.62.0"
   }
-}
+}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/apps/console/page-components/app/general.tsx b/web/src/apps/console/page-components/app/general.tsx
@@ -2,7 +2,6 @@ import { useParams } from '@remix-run/react';
 import { useCallback, useEffect, useState } from 'react';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { TextInput } from '~/components/atoms/input';
-import Select from '~/components/atoms/select';
 import { BottomNavigation } from '~/console/components/commons';
 import { NameIdView } from '~/console/components/name-id-view';
 import { useAppState } from '~/console/page-components/app-states';
@@ -64,12 +63,25 @@ import { handleError } from '~/root/lib/utils/common';
 //   return <ResourceExtraAction options={options} />;
 // };
 
-const AppSelectItem = ({ label, value }: { label: string; value: string }) => {
+const AppSelectItem = ({
+  label,
+  value,
+  registry,
+  repository,
+}: {
+  label: string;
+  value: string;
+  registry: string;
+  repository: string;
+}) => {
   return (
     <div>
       <div className="flex flex-col">
         <div>{label}</div>
-        <div className="bodySm text-text-soft">{value}</div>
+        {registry !== '' && repository !== '' && (
+          <div className="bodySm text-text-soft">{`${registry}/${repository}`}</div>
+        )}
+        {/* <div className="bodySm text-text-soft">{value}</div> */}
       </div>
     </div>
   );
@@ -111,6 +123,8 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
           <AppSelectItem
             label={`${i.imageName}:${i.imageTag}`}
             value={`${i.imageName}:${i.imageTag}`}
+            registry={i.meta.registry || ''}
+            repository={i.meta.repository || ''}
           />
         ),
       }));
@@ -303,16 +317,16 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
           />
         )}
         <div className="flex flex-col gap-xl">
-          {/* <TextInput
+          <TextInput
             size="lg"
             label="Image name"
             placeholder="Enter Image name"
             value={values.imageUrl}
             onChange={handleChange('imageUrl')}
             error={!!errors.imageUrl}
             message={errors.imageUrl}
-          /> */}
-          <Select
+          />
+          {/* <Select
             label="Select Images"
             size="lg"
             value={values.imageUrl}
@@ -331,7 +345,8 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             error={!!errors.imageUrl}
             message={errors.imageUrl}
             loading={imageLoaded}
-          />
+            createLabel="Select"
+          /> */}
         </div>
 
         <Checkbox

diff --git a/web/src/apps/console/page-components/handle-environment.tsx b/web/src/apps/console/page-components/handle-environment.tsx
@@ -37,6 +37,15 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
 
   const [clusterList, setClusterList] = useState<any[]>([]);
 
+  // const klCluster = {
+  //   label: 'Kloudlite cluster',
+  //   value: constants.kloudliteClusterName,
+  //   ready: true,
+  //   render: () => (
+  //     <ClusterSelectItem label="Kloudlite cluster" value="kloudlite-cluster" />
+  //   ),
+  // };
+
   const getClusters = useCallback(async () => {
     try {
       const byokClusters = await api.listByokClusters({});

diff --git a/web/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-config-mount.tsx b/web/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-config-mount.tsx
@@ -2,15 +2,10 @@ import { useEffect, useState } from 'react';
 import { Button, IconButton } from '~/components/atoms/button';
 import { Chip, ChipGroup } from '~/components/atoms/chips';
 import { TextInput } from '~/components/atoms/input';
+import Tooltip from '~/components/atoms/tooltip';
 import { usePagination } from '~/components/molecule/pagination';
 import { cn } from '~/components/utils';
-import List from '~/console/components/list';
-import NoResultsFound from '~/console/components/no-results-found';
-import { IShowDialog } from '~/console/components/types.d';
-import { useAppState } from '~/console/page-components/app-states';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { NonNullableString } from '~/root/lib/types/common';
+import { listFlex } from '~/console/components/console-list-components';
 import {
   ArrowRight,
   ChevronLeft,
@@ -21,8 +16,13 @@ import {
   X,
   XCircleFill,
 } from '~/console/components/icons';
-import Tooltip from '~/components/atoms/tooltip';
-import { listFlex } from '~/console/components/console-list-components';
+import List from '~/console/components/list';
+import NoResultsFound from '~/console/components/no-results-found';
+import { IShowDialog } from '~/console/components/types.d';
+import { useAppState } from '~/console/page-components/app-states';
+import useForm from '~/root/lib/client/hooks/use-form';
+import Yup from '~/root/lib/server/helpers/yup';
+import { NonNullableString } from '~/root/lib/types/common';
 import AppDialog from './app-dialogs';
 
 interface IConfigMount {
@@ -395,7 +395,7 @@ export const ConfigMounts = () => {
                       />
                       <Chip
                         item={{ name: 'mres' }}
-                        label="Integrated resources"
+                        label="Managed resources"
                         type="CLICKABLE"
                       />
                     </ChipGroup>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,5 @@ out
		storybook-dist

		tsconfig-compile.tsbuildinfo

		.secrets