From 4d86707345484de8ccea43dd020bc8c84b024ae2 Mon Sep 17 00:00:00 2001
From: Deepesh Kumar <deepesh.kumar@harness.io>
Date: Tue, 10 Sep 2024 05:10:55 +0000
Subject: [PATCH] feat: [CDE-320]: Updated CDE webpack and Strings file (#2677)

* feat: [CDE-320]: Updated CDE webpack and Strings file
* feat: [CDE-320]: Updated CDE webpack and Strings file
* feat: [CDE-320]: Updated CDE webpack and Strings file
---
 web/config/cde/moduleFederation.config.js     |  52 ----
 web/config/webpack.common.js                  |  21 +-
 web/config/webpack.dev.js                     |  15 +-
 web/scripts/strings/generateTypes.cjs         |   8 +
 web/src/App.tsx                               |   5 +-
 .../components/CDEIDESelect/CDEIDESelect.tsx  |  16 +-
 .../GitspaceListing/ListGitspaces.tsx         |   7 +-
 .../components/SelectIDE/SelectIDE.tsx        |   8 +-
 web/src/cde-gitness/config/webpack.dev.js     |   6 +-
 web/src/cde-gitness/constants/index.ts        |   2 +-
 .../GitspaceCreate/CDECreateGitspace.tsx      |   4 +-
 .../GitspaceCreate/CDECreateGitspace.utils.ts |   6 +-
 .../pages/GitspaceDetails/GitspaceDetails.tsx |  18 +-
 .../pages/GitspaceListing/GitspaceListing.tsx |  10 +-
 web/src/cde-gitness/strings/strings.en.yaml   | 126 ++++++++++
 web/src/framework/strings/languageLoader.ts   |  10 +-
 web/src/framework/strings/stringTypes.ts      | 232 +++++++++---------
 web/src/i18n/strings.en.yaml                  | 127 ----------
 18 files changed, 295 insertions(+), 378 deletions(-)
 delete mode 100644 web/config/cde/moduleFederation.config.js
 create mode 100644 web/src/cde-gitness/strings/strings.en.yaml

diff --git a/web/config/cde/moduleFederation.config.js b/web/config/cde/moduleFederation.config.js
deleted file mode 100644
index 653ca8e67..000000000
--- a/web/config/cde/moduleFederation.config.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright 2023 Harness, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const packageJSON = require('../../package.json')
-const { pick, mapValues } = require('lodash')
-
-/**
- * These packages must be stricly shared with exact versions
- */
-const ExactSharedPackages = [
-  'react-dom',
-  'react',
-  'react-router-dom',
-  '@blueprintjs/core',
-  '@blueprintjs/select',
-  '@blueprintjs/datetime',
-  'restful-react'
-]
-
-/**
- * @type {import('webpack').ModuleFederationPluginOptions}
- */
-module.exports = {
-  name: 'cdeRemote',
-  filename: 'remoteEntry.js',
-  exposes: {
-    './App': './src/App.tsx',
-    './Gitspaces': './src/cde-gitness/pages/GitspaceCreate/GitspaceCreate.tsx',
-    './GitspaceDetail': './src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx',
-    './GitspaceList': './src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx'
-  },
-  shared: {
-    formik: packageJSON.dependencies['formik'],
-    ...mapValues(pick(packageJSON.dependencies, ExactSharedPackages), version => ({
-      singleton: true,
-      requiredVersion: version
-    }))
-  }
-}
diff --git a/web/config/webpack.common.js b/web/config/webpack.common.js
index 5d111a3d7..ca2a28eea 100644
--- a/web/config/webpack.common.js
+++ b/web/config/webpack.common.js
@@ -29,26 +29,9 @@ const GenerateArStringTypesPlugin =
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const moduleFederationConfig = require('./moduleFederation.config')
-const moduleFederationConfigCDE = require('./cde/moduleFederation.config')
 const CONTEXT = process.cwd()
 const DEV = process.env.NODE_ENV === 'development'
 
-const getModuleFields = () => {
-  if (process.env.MODULE === 'cde') {
-    return {
-      moduleFederationConfigEntryName: moduleFederationConfigCDE.name,
-      moduleFederationPlugin: new ModuleFederationPlugin(moduleFederationConfigCDE)
-    }
-  } else {
-    return {
-      moduleFederationConfigEntryName: moduleFederationConfig.name,
-      moduleFederationPlugin: new ModuleFederationPlugin(moduleFederationConfig)
-    }
-  }
-}
-
-const { moduleFederationConfigEntryName, moduleFederationPlugin } = getModuleFields()
-
 module.exports = {
   target: 'web',
   context: CONTEXT,
@@ -57,7 +40,7 @@ module.exports = {
     children: false
   },
   entry: {
-    [moduleFederationConfigEntryName]: './src/public-path'
+    [moduleFederationConfig.name]: './src/public-path'
   },
   output: {
     publicPath: 'auto',
@@ -229,7 +212,7 @@ module.exports = {
       minify: false,
       templateParameters: {}
     }),
-    moduleFederationPlugin,
+    new ModuleFederationPlugin(moduleFederationConfig),
     new DefinePlugin({
       'process.env': '{}', // required for @blueprintjs/core
       __DEV__: DEV
diff --git a/web/config/webpack.dev.js b/web/config/webpack.dev.js
index e0e5e3892..1e8908718 100644
--- a/web/config/webpack.dev.js
+++ b/web/config/webpack.dev.js
@@ -21,20 +21,9 @@ require('dotenv').config()
 const { merge } = require('webpack-merge')
 const commonConfig = require('./webpack.common')
 
-const getPortByModule = () => {
-  const module = process.env.MODULE
-  if (module === 'cde') {
-    return process.env.CDE_PORT ?? 3021
-  } else {
-    return process.env.PORT ?? 3020
-  }
-}
-
-const moduleType = process.env.MODULE
 const API_URL = process.env.API_URL ?? 'http://localhost:3000'
-const CDE_API_URL = process.env.CDE_API_URL ?? 'http://localhost:3000'
 const HOST = 'localhost'
-const PORT = getPortByModule()
+const PORT = process.env.PORT ?? 3020
 const STANDALONE = process.env.STANDALONE === 'true'
 const CONTEXT = process.cwd()
 const prodConfig = require('./webpack.prod')
@@ -66,7 +55,7 @@ const devConfig = {
     port: PORT,
     proxy: {
       '/api': {
-        target: moduleType === 'cde' ? CDE_API_URL : API_URL,
+        target: API_URL,
         logLevel: 'debug',
         secure: false,
         changeOrigin: true
diff --git a/web/scripts/strings/generateTypes.cjs b/web/scripts/strings/generateTypes.cjs
index eb5a1416b..8a65d2ef8 100644
--- a/web/scripts/strings/generateTypes.cjs
+++ b/web/scripts/strings/generateTypes.cjs
@@ -48,11 +48,19 @@ function flattenKeys(data, parentPath = []) {
 
 async function generateTypes() {
   const i18nContent = await fs.promises.readFile(path.resolve(process.cwd(), `src/i18n/strings.en.yaml`), 'utf8')
+  const i18nCDEContent = await fs.promises.readFile(
+    path.resolve(process.cwd(), `src/cde-gitness/strings/strings.en.yaml`),
+    'utf8'
+  )
 
   const allData = [
     {
       moduleRef: null,
       keys: flattenKeys(yaml.parse(i18nContent))
+    },
+    {
+      moduleRef: 'cde',
+      keys: flattenKeys(yaml.parse(i18nCDEContent), ['cde'])
     }
   ]
 
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 97349d440..a6799e942 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -61,7 +61,10 @@ const App: React.FC<AppProps> = React.memo(function App({
   const queryParams = useMemo(() => (!standalone ? { routingId } : {}), [standalone, routingId])
 
   useEffect(() => {
-    languageLoader(lang).then(setStrings)
+    const stringsMaps = languageLoader(lang)
+    if (stringsMaps) {
+      setStrings(stringsMaps)
+    }
   }, [lang, setStrings])
 
   const Wrapper: React.FC<{ fullPage: boolean }> = useCallback(
diff --git a/web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.tsx b/web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.tsx
index fdbe9f5ad..099d3c1b5 100644
--- a/web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.tsx
+++ b/web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.tsx
@@ -18,7 +18,7 @@ import React from 'react'
 import { Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Code } from 'iconoir-react'
-import { StandaloneIDEType } from 'cde-gitness/constants'
+import { IDEType } from 'cde-gitness/constants'
 import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import vscodeIcon from 'cde-gitness/assests/VSCode.svg?url'
 import { useStrings } from 'framework/strings'
@@ -36,12 +36,12 @@ export const CDEIDESelect = ({
   const ideOptions = [
     {
       label: getString('cde.ide.desktop'),
-      value: StandaloneIDEType.VSCODE,
+      value: IDEType.VSCODE,
       img: vscodeIcon
     },
     {
       label: getString('cde.ide.browser'),
-      value: StandaloneIDEType.VSCODEWEB,
+      value: IDEType.VSCODEWEB,
       img: vsCodeWebIcon
     }
   ]
@@ -50,14 +50,6 @@ export const CDEIDESelect = ({
 
   return (
     <CDECustomDropdown
-      // leftElement={
-      //   <Layout.Vertical>
-      //     <Text icon="code">IDE</Text>
-      //     <Text margin={{ left: 'large' }} font="small">
-      //       Your Gitspace will open in the selected IDE to code
-      //     </Text>
-      //   </Layout.Vertical>
-      // }
       leftElement={
         <Layout.Horizontal>
           <Code height={20} width={20} style={{ marginRight: '8px', alignItems: 'center' }} />
@@ -68,7 +60,7 @@ export const CDEIDESelect = ({
         </Layout.Horizontal>
       }
       label={
-        <Layout.Horizontal width="90%" flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
+        <Layout.Horizontal width="100%" flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <img height={16} width={16} src={img} />
           <Text>{label}</Text>
         </Layout.Horizontal>
diff --git a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx
index 5e393c4ec..2716d9f32 100644
--- a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx
+++ b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx
@@ -40,7 +40,7 @@ import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import VSCode from 'cde-gitness/assests/VSCode.svg?url'
-import { GitspaceActionType, GitspaceStatus } from 'cde-gitness/constants'
+import { GitspaceActionType, GitspaceStatus, IDEType } from 'cde-gitness/constants'
 import type { EnumGitspaceStateType, EnumIDEType, TypesGitspaceConfig } from 'services/cde'
 import gitspaceIcon from 'cde-gitness/assests/gitspace.svg?url'
 import { useModalHook } from 'hooks/useModalHook'
@@ -89,11 +89,6 @@ export const getStatusText = (getString: UseStringsReturn['getString'], status?:
   }
 }
 
-enum IDEType {
-  VSCODE = 'vs_code',
-  VSCODEWEB = 'vs_code_web'
-}
-
 const getUsageTemplate = (
   getString: UseStringsReturn['getString'],
   icon: React.ReactNode,
diff --git a/web/src/cde-gitness/components/SelectIDE/SelectIDE.tsx b/web/src/cde-gitness/components/SelectIDE/SelectIDE.tsx
index 1015e0489..9bb73a345 100644
--- a/web/src/cde-gitness/components/SelectIDE/SelectIDE.tsx
+++ b/web/src/cde-gitness/components/SelectIDE/SelectIDE.tsx
@@ -21,14 +21,14 @@ import { useFormikContext } from 'formik'
 import { GitspaceSelect } from 'cde-gitness/components/GitspaceSelect/GitspaceSelect'
 import { useStrings, type UseStringsReturn } from 'framework/strings'
 import type { OpenapiCreateGitspaceRequest } from 'services/cde'
-import { StandaloneIDEType } from 'cde-gitness/constants'
+import { IDEType } from 'cde-gitness/constants'
 import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import VSCode from 'cde-gitness/assests/VSCode.svg?url'
 
 export const getIDESelectItems = (getString: UseStringsReturn['getString']) => {
   return [
-    { label: getString('cde.ide.desktop'), value: StandaloneIDEType.VSCODE },
-    { label: getString('cde.ide.browser'), value: StandaloneIDEType.VSCODEWEB }
+    { label: getString('cde.ide.desktop'), value: IDEType.VSCODE },
+    { label: getString('cde.ide.browser'), value: IDEType.VSCODEWEB }
   ]
 }
 
@@ -44,7 +44,7 @@ export const SelectIDE = () => {
       text={
         <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
           <img
-            src={ide === StandaloneIDEType.VSCODE ? VSCode : vsCodeWebIcon}
+            src={ide === IDEType.VSCODE ? VSCode : vsCodeWebIcon}
             height={20}
             width={20}
             style={{ marginRight: '12px' }}
diff --git a/web/src/cde-gitness/config/webpack.dev.js b/web/src/cde-gitness/config/webpack.dev.js
index 5d725a045..1d6cb93b6 100644
--- a/web/src/cde-gitness/config/webpack.dev.js
+++ b/web/src/cde-gitness/config/webpack.dev.js
@@ -32,6 +32,7 @@ const CONTEXT = process.cwd()
 const devConfig = {
   mode: 'development',
   devtool: 'cheap-module-source-map',
+  entry: path.resolve(CONTEXT, '/src/index.tsx'),
   cache: { type: 'filesystem' },
   output: {
     filename: '[name].js',
@@ -216,12 +217,13 @@ const devConfig = {
       __ENABLE_CDN__: false
     }),
     new WatchIgnorePlugin({
-      paths: [/node_modules(?!\/@harness)/, /\.(d|test)\.tsx?$/, /types\.ts/, /\.snap$/]
+      paths: [/node_modules/, /stringTypes.ts/, /\.(d|test)\.tsx?$/, /types\.ts/, /\.snap$/]
     }),
     new ForkTsCheckerWebpackPlugin({
       typescript: {
         memoryLimit: 6144
-      }
+      },
+      logger: { infrastructure: 'console' }
     })
   ]
 }
diff --git a/web/src/cde-gitness/constants/index.ts b/web/src/cde-gitness/constants/index.ts
index 974d55ef6..65f7a14e9 100644
--- a/web/src/cde-gitness/constants/index.ts
+++ b/web/src/cde-gitness/constants/index.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export enum StandaloneIDEType {
+export enum IDEType {
   VSCODE = 'vs_code',
   VSCODEWEB = 'vs_code_web'
 }
diff --git a/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx b/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx
index 3da52a7f7..ee4a2025f 100644
--- a/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx
+++ b/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx
@@ -35,7 +35,7 @@ import { CDEIDESelect } from 'cde-gitness/components/CDEIDESelect/CDEIDESelect'
 import { SelectInfraProvider } from 'cde-gitness/components/SelectInfraProvider/SelectInfraProvider'
 import { OpenapiCreateGitspaceRequest, useCreateGitspace } from 'services/cde'
 import { useGetCDEAPIParams } from 'cde-gitness/hooks/useGetCDEAPIParams'
-import { EnumGitspaceCodeRepoType, StandaloneIDEType } from 'cde-gitness/constants'
+import { EnumGitspaceCodeRepoType, IDEType } from 'cde-gitness/constants'
 import { CDESSHSelect } from 'cde-gitness/components/CDESSHSelect/CDESSHSelect'
 import { useQueryParams } from 'hooks/useQueryParams'
 import { getRepoIdFromURL, getRepoNameFromURL } from 'cde-gitness/components/CDEAnyGitImport/CDEAnyGitImport.utils'
@@ -257,7 +257,7 @@ export const CDECreateGitspace = () => {
               </Container>
               <Container className={css.formOuterContainer}>
                 <CDEIDESelect onChange={formik.setFieldValue} selectedIde={formik.values.ide} />
-                {formik.values.ide === StandaloneIDEType.VSCODE && <CDESSHSelect />}
+                {formik.values.ide === IDEType.VSCODE && <CDESSHSelect />}
                 <SelectInfraProvider />
                 <Button width={'100%'} variation={ButtonVariation.PRIMARY} height={50} type="submit">
                   {getString('cde.createGitspace')}
diff --git a/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.utils.ts b/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.utils.ts
index 18817fe25..dc262aaee 100644
--- a/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.utils.ts
+++ b/web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.utils.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { StandaloneIDEType } from 'cde-gitness/constants'
+import { IDEType } from 'cde-gitness/constants'
 import type { UseStringsReturn } from 'framework/strings'
 
 export const getIDESelectItems = (getString: UseStringsReturn['getString']) => {
   return [
-    { label: getString('cde.ide.desktop'), value: StandaloneIDEType.VSCODE },
-    { label: getString('cde.ide.browser'), value: StandaloneIDEType.VSCODEWEB }
+    { label: getString('cde.ide.desktop'), value: IDEType.VSCODE },
+    { label: getString('cde.ide.browser'), value: IDEType.VSCODEWEB }
   ]
 }
diff --git a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx b/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx
index 5b313b58b..01b2f18f2 100644
--- a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx
+++ b/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx
@@ -47,7 +47,7 @@ import deleteIcon from 'cde-gitness/assests/delete.svg?url'
 import vscodeIcon from 'cde-gitness/assests/VSCode.svg?url'
 import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import pauseIcon from 'cde-gitness/assests/pause.svg?url'
-import { StandaloneIDEType } from 'cde-gitness/constants'
+import { IDEType } from 'cde-gitness/constants'
 import homeIcon from 'cde-gitness/assests/home.svg?url'
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import { useGitspaceDetails } from 'cde-gitness/hooks/useGitspaceDetails'
@@ -85,6 +85,10 @@ const GitspaceDetails = () => {
     error: streamLogsError
   } = useGitspacesLogs({ gitspaceId })
 
+  if (streamLogsError) {
+    showError(streamLogsError.message)
+  }
+
   const { mutate: actionMutate, loading: mutateLoading } = useGitspaceActions({ gitspaceId })
 
   const { mutate: deleteGitspace, loading: deleteLoading } = useDeleteGitspaces({ gitspaceId })
@@ -215,11 +219,7 @@ const GitspaceDetails = () => {
           <Container>
             <Layout.Horizontal spacing="small">
               {data && (
-                <img
-                  src={data?.ide === StandaloneIDEType.VSCODEWEB ? vsCodeWebIcon : vscodeIcon}
-                  height={32}
-                  width={32}
-                />
+                <img src={data?.ide === IDEType.VSCODEWEB ? vsCodeWebIcon : vscodeIcon} height={32} width={32} />
               )}
               <Text font={{ variation: FontVariation.H3 }}>{data?.name}</Text>
             </Layout.Horizontal>
@@ -332,7 +332,7 @@ const GitspaceDetails = () => {
                   onClick={e => {
                     e.preventDefault()
                     e.stopPropagation()
-                    if (data?.ide === StandaloneIDEType.VSCODE) {
+                    if (data?.ide === IDEType.VSCODE) {
                       const params = standalone ? '?gitness' : ''
                       const projectOrSpace = standalone ? space : projectIdentifier
                       const vscodeExtensionCode = standalone ? 'harness-inc.oss-gitspaces' : 'harness-inc.gitspaces'
@@ -354,8 +354,8 @@ const GitspaceDetails = () => {
                       }
                     }
                   }}>
-                  {data?.ide === StandaloneIDEType.VSCODE && getString('cde.details.openEditor')}
-                  {data?.ide === StandaloneIDEType.VSCODEWEB && getString('cde.details.openBrowser')}
+                  {data?.ide === IDEType.VSCODE && getString('cde.details.openEditor')}
+                  {data?.ide === IDEType.VSCODEWEB && getString('cde.details.openBrowser')}
                 </Button>
               ) : (
                 <Button
diff --git a/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx b/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx
index c34b650d0..54a1e9d2d 100644
--- a/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx
+++ b/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx
@@ -52,19 +52,13 @@ const GitspaceListing = () => {
 
   const { data = '', loading = false, error = undefined, refetch, response } = useLisitngApi({ page })
 
-  // useEffect(() => {
-  //   if (!data && !loading) {
-  //     history.push(routes.toCDEGitspacesCreate({ space }))
-  //   }
-  // }, [data, loading])
-
   return (
     <>
-      {data?.length !== 0 && (
+      {data && data?.length !== 0 && (
         <Page.Header
           title={
             <div className="ng-tooltip-native">
-              <h2 data-tooltip-id="artifactListPageHeading"> {getString('cde.gitspaces')}</h2>
+              <h2> {getString('cde.gitspaces')}</h2>
               <HarnessDocTooltip tooltipId="GitSpaceListPageHeading" useStandAlone={true} />
             </div>
           }
diff --git a/web/src/cde-gitness/strings/strings.en.yaml b/web/src/cde-gitness/strings/strings.en.yaml
new file mode 100644
index 000000000..ea32bd2f4
--- /dev/null
+++ b/web/src/cde-gitness/strings/strings.en.yaml
@@ -0,0 +1,126 @@
+branchPlaceholder: Branch
+lastUsed: Last Used
+introText1: Get ready to code in seconds
+introText2: Isolated cloud development environments with your favorite editor
+introText3: Connect in seconds with a repository
+cloudDeveloperExperience: Cloud Development Environments
+createGitspace: Create Gitspace
+deleteGitspace: Delete Gitspace
+editGitspace: Edit Gitspace
+viewGitspace: View Gitspace Details
+updateGitspace: Update Gitspace
+gitspaces: Gitspaces
+noRepo: Don’t have a Git repo?
+createRepo: Create a repo in Harness
+newGitspace: + New Gitspace
+manageGitspaces: Manage Gitspaces
+noGitspaces: You have not created any Gitspace yet
+gitspaceDetail: Gitspace Detail
+machine: Machine
+region: Region
+or: OR
+logs: Logs
+noData: No Data
+noChange: No Change
+used: Used
+hours: Hours
+na: NA
+retry: Retry
+eventTimeline: Event Timeline
+cpu: CPU
+memory: Memory
+disk: Disk
+regionSelectWarning: Select a region first
+gitspaceUpdateSuccess: Gitspace updated successfully
+regionValidationMessage: Region is required
+repoValidationMessage: Repository is required
+branchValidationMessage: Branch is required
+machineValidationMessage: Machine Type is required
+startingGitspace: Starting Gitspace
+stopingGitspace: Stopping Gitspace
+sessionDuration: Last Started
+lastActivated: Last Activated
+deleteGitspaceTitle: Delete Gitspace '{{name}}'
+deleteGitspaceText: 'This action cannot be undone. Are you sure you want to proceed to delete?'
+deleteSuccess: Gitspace deleted succesfully
+repositoryAndBranch: Repository & Branch
+importInto: Import Repository into Gitness
+status: Status
+getStarted: Get started with Gitspaces by
+createImport: creating or importing repositories
+sshSelect:
+  30days: 30 Days
+  90days: 90 Days
+  180days: 180 Days
+  noexpiration: No Expiration
+  deleteToken: Delete SSH Token '{{name}}'
+homePage:
+  start: Start
+  noSetupRequired: no setup required
+  noteOne: Dedicated cloud development environments with your favorite editor
+  noteTwo: Get always consistent development environments that boost productivity and empower collaboration.
+  getStartedNow: Get Started Now
+  learnMoreAboutGitspaces: Learn more about Gitspaces
+listing:
+  online: Active
+  offline: Stopped
+  error: Error
+  starting: Starting
+  stopping: Stopping
+  ownerAndCreated: Owner & Created On
+create:
+  repositoryDetails: Repository Details
+  gitnessRepositories: Gitness Repositories
+  thirdPartyGitRepositories: Other Public Git Repositories
+  branchPlaceholder: Enter the Branch name
+  selectBranchPlaceholder: Select branch
+  searchRepositoryPlaceholder: Search for a repository
+  searchBranchPlaceholder: Search for a branch
+  repoNotFound: 'Create a repo <strong>{{repo}}</strong> in Gitness'
+  gitspaceCreateSuccess: Gitspace created successfully
+  gitspaceCreateFailed: Gitspace creation failed
+  subtext: Start Coding, no setup required. Dedicated cloud development environments with your favorite editor.
+  importWarning:
+    Currently we support only third party public repositories. In order to use a private git repository, please
+    import the repository into Gitness.
+  unsaved:
+    title: Unsaved Changes
+    message: 'You have unsaved changes, On switching all unsaved changes will be lost'
+details:
+  actions: More Actions
+  openEditor: Open VS Code Editor
+  openBrowser: Open VS Code Online
+  goToDashboard: Go To Dashboard
+  startGitspace: Start Gitspace
+  stopProvising: Stop Provising
+  noData: No Data for Gitspace
+  gitspaceActivity: Gitspace Activity
+  provisioningGitspace: Provisioning the Gitspace...
+  gitspaceStopped: Gitspace is stopped
+  gitspaceRunning: Gitspace is running
+  stopGitspace: Stop Gitspace
+  fetchingGitspace: Fetching Gitspace Details
+  fetchingLogs: Fetching gitspace logs
+  logsFailed: Gitspace logs api failed
+  noLogsFound: No gitspace logs found
+  wrongIdentifier: Invalid gitspace id or project params
+  fetchingDetails: Fetching Gitspace Events ....
+  containerLogs: Container Logs
+  containerLogsSubText: Logs showing activity inside container
+repository:
+  repo: Repository
+  selectRepository: Select Repository
+  pasteRepo: Paste a Git URL to create Gitspace
+  pasterRepoSubtext: You can use any public Git repository to create a Gitspace
+  privateRepoWarning: Repo URL is of Private repository
+  publicRepo: You can use any public Git repository to create a Gitspace
+  continueWith: Continue with
+  repositoryURL: Repository URL
+ide:
+  browser: VS Code Browser
+  desktop: VS Code Desktop
+  title: IDE
+  selectIDE: Select IDE
+  vsCode: VS Code
+  openVSCode: Open in VS Code Desktop
+  openBrowser: Open in Browser
diff --git a/web/src/framework/strings/languageLoader.ts b/web/src/framework/strings/languageLoader.ts
index b2961acfc..a3114d2f6 100644
--- a/web/src/framework/strings/languageLoader.ts
+++ b/web/src/framework/strings/languageLoader.ts
@@ -14,20 +14,24 @@
  * limitations under the License.
  */
 
+import cdeStringRecords from 'cde-gitness/strings/strings.en.yaml'
+import stringsRecordsEN from '../../i18n/strings.en.yaml'
+import stringsRecordsES from '../../i18n/strings.es.yaml'
+
 export type LangLocale = 'es' | 'en' | 'en-IN' | 'en-US' | 'en-UK'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type LanguageRecord = Record<string, Record<string, any>>
 
-export function languageLoader(langId: LangLocale = 'en'): Promise<LanguageRecord> {
+export function languageLoader(langId: LangLocale = 'en'): LanguageRecord {
   switch (langId) {
     case 'es':
-      return import('../../i18n/strings.es.yaml')
+      return stringsRecordsES
     case 'en':
     case 'en-US':
     case 'en-IN':
     case 'en-UK':
     default:
-      return import('../../i18n/strings.en.yaml')
+      return { stringsRecordsEN, cdeStringRecords }
   }
 }
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index e0470e3e8..b93b9bbc4 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -141,122 +141,6 @@ export interface StringsMap {
   cancelImport: string
   cancelImportConfirm: string
   cancelledImport: string
-  'cde.branchPlaceholder': string
-  'cde.branchValidationMessage': string
-  'cde.cloudDeveloperExperience': string
-  'cde.cpu': string
-  'cde.create.branchPlaceholder': string
-  'cde.create.gitnessRepositories': string
-  'cde.create.gitspaceCreateFailed': string
-  'cde.create.gitspaceCreateSuccess': string
-  'cde.create.importWarning': string
-  'cde.create.repoNotFound': string
-  'cde.create.repositoryDetails': string
-  'cde.create.searchBranchPlaceholder': string
-  'cde.create.searchRepositoryPlaceholder': string
-  'cde.create.selectBranchPlaceholder': string
-  'cde.create.subtext': string
-  'cde.create.thirdPartyGitRepositories': string
-  'cde.create.unsaved.message': string
-  'cde.create.unsaved.title': string
-  'cde.createGitspace': string
-  'cde.createImport': string
-  'cde.createRepo': string
-  'cde.deleteGitspace': string
-  'cde.deleteGitspaceText': string
-  'cde.deleteGitspaceTitle': string
-  'cde.deleteSuccess': string
-  'cde.details.actions': string
-  'cde.details.containerLogs': string
-  'cde.details.containerLogsSubText': string
-  'cde.details.fetchingDetails': string
-  'cde.details.fetchingGitspace': string
-  'cde.details.fetchingLogs': string
-  'cde.details.gitspaceActivity': string
-  'cde.details.gitspaceRunning': string
-  'cde.details.gitspaceStopped': string
-  'cde.details.goToDashboard': string
-  'cde.details.logsFailed': string
-  'cde.details.noData': string
-  'cde.details.noLogsFound': string
-  'cde.details.openBrowser': string
-  'cde.details.openEditor': string
-  'cde.details.provisioningGitspace': string
-  'cde.details.startGitspace': string
-  'cde.details.stopGitspace': string
-  'cde.details.stopProvising': string
-  'cde.details.wrongIdentifier': string
-  'cde.disk': string
-  'cde.editGitspace': string
-  'cde.eventTimeline': string
-  'cde.getStarted': string
-  'cde.gitspaceDetail': string
-  'cde.gitspaceUpdateSuccess': string
-  'cde.gitspaces': string
-  'cde.homePage.getStartedNow': string
-  'cde.homePage.learnMoreAboutGitspaces': string
-  'cde.homePage.noSetupRequired': string
-  'cde.homePage.noteOne': string
-  'cde.homePage.noteTwo': string
-  'cde.homePage.start': string
-  'cde.hours': string
-  'cde.ide.browser': string
-  'cde.ide.desktop': string
-  'cde.ide.openBrowser': string
-  'cde.ide.openVSCode': string
-  'cde.ide.selectIDE': string
-  'cde.ide.title': string
-  'cde.ide.vsCode': string
-  'cde.importInto': string
-  'cde.introText1': string
-  'cde.introText2': string
-  'cde.introText3': string
-  'cde.lastActivated': string
-  'cde.lastUsed': string
-  'cde.listing.error': string
-  'cde.listing.offline': string
-  'cde.listing.online': string
-  'cde.listing.ownerAndCreated': string
-  'cde.listing.starting': string
-  'cde.listing.stopping': string
-  'cde.logs': string
-  'cde.machine': string
-  'cde.machineValidationMessage': string
-  'cde.manageGitspaces': string
-  'cde.memory': string
-  'cde.na': string
-  'cde.newGitspace': string
-  'cde.noChange': string
-  'cde.noData': string
-  'cde.noGitspaces': string
-  'cde.noRepo': string
-  'cde.or': string
-  'cde.region': string
-  'cde.regionSelectWarning': string
-  'cde.regionValidationMessage': string
-  'cde.repoValidationMessage': string
-  'cde.repository.continueWith': string
-  'cde.repository.pasteRepo': string
-  'cde.repository.pasterRepoSubtext': string
-  'cde.repository.privateRepoWarning': string
-  'cde.repository.publicRepo': string
-  'cde.repository.repo': string
-  'cde.repository.repositoryURL': string
-  'cde.repository.selectRepository': string
-  'cde.repositoryAndBranch': string
-  'cde.retry': string
-  'cde.sessionDuration': string
-  'cde.sshSelect.180days': string
-  'cde.sshSelect.30days': string
-  'cde.sshSelect.90days': string
-  'cde.sshSelect.deleteToken': string
-  'cde.sshSelect.noexpiration': string
-  'cde.startingGitspace': string
-  'cde.status': string
-  'cde.stopingGitspace': string
-  'cde.updateGitspace': string
-  'cde.used': string
-  'cde.viewGitspace': string
   changePassword: string
   changePasswordSuccesfully: string
   changeRepoVis: string
@@ -1271,4 +1155,120 @@ export interface StringsMap {
   yours: string
   zoomIn: string
   zoomOut: string
+  'cde.branchPlaceholder': string
+  'cde.branchValidationMessage': string
+  'cde.cloudDeveloperExperience': string
+  'cde.cpu': string
+  'cde.create.branchPlaceholder': string
+  'cde.create.gitnessRepositories': string
+  'cde.create.gitspaceCreateFailed': string
+  'cde.create.gitspaceCreateSuccess': string
+  'cde.create.importWarning': string
+  'cde.create.repoNotFound': string
+  'cde.create.repositoryDetails': string
+  'cde.create.searchBranchPlaceholder': string
+  'cde.create.searchRepositoryPlaceholder': string
+  'cde.create.selectBranchPlaceholder': string
+  'cde.create.subtext': string
+  'cde.create.thirdPartyGitRepositories': string
+  'cde.create.unsaved.message': string
+  'cde.create.unsaved.title': string
+  'cde.createGitspace': string
+  'cde.createImport': string
+  'cde.createRepo': string
+  'cde.deleteGitspace': string
+  'cde.deleteGitspaceText': string
+  'cde.deleteGitspaceTitle': string
+  'cde.deleteSuccess': string
+  'cde.details.actions': string
+  'cde.details.containerLogs': string
+  'cde.details.containerLogsSubText': string
+  'cde.details.fetchingDetails': string
+  'cde.details.fetchingGitspace': string
+  'cde.details.fetchingLogs': string
+  'cde.details.gitspaceActivity': string
+  'cde.details.gitspaceRunning': string
+  'cde.details.gitspaceStopped': string
+  'cde.details.goToDashboard': string
+  'cde.details.logsFailed': string
+  'cde.details.noData': string
+  'cde.details.noLogsFound': string
+  'cde.details.openBrowser': string
+  'cde.details.openEditor': string
+  'cde.details.provisioningGitspace': string
+  'cde.details.startGitspace': string
+  'cde.details.stopGitspace': string
+  'cde.details.stopProvising': string
+  'cde.details.wrongIdentifier': string
+  'cde.disk': string
+  'cde.editGitspace': string
+  'cde.eventTimeline': string
+  'cde.getStarted': string
+  'cde.gitspaceDetail': string
+  'cde.gitspaceUpdateSuccess': string
+  'cde.gitspaces': string
+  'cde.homePage.getStartedNow': string
+  'cde.homePage.learnMoreAboutGitspaces': string
+  'cde.homePage.noSetupRequired': string
+  'cde.homePage.noteOne': string
+  'cde.homePage.noteTwo': string
+  'cde.homePage.start': string
+  'cde.hours': string
+  'cde.ide.browser': string
+  'cde.ide.desktop': string
+  'cde.ide.openBrowser': string
+  'cde.ide.openVSCode': string
+  'cde.ide.selectIDE': string
+  'cde.ide.title': string
+  'cde.ide.vsCode': string
+  'cde.importInto': string
+  'cde.introText1': string
+  'cde.introText2': string
+  'cde.introText3': string
+  'cde.lastActivated': string
+  'cde.lastUsed': string
+  'cde.listing.error': string
+  'cde.listing.offline': string
+  'cde.listing.online': string
+  'cde.listing.ownerAndCreated': string
+  'cde.listing.starting': string
+  'cde.listing.stopping': string
+  'cde.logs': string
+  'cde.machine': string
+  'cde.machineValidationMessage': string
+  'cde.manageGitspaces': string
+  'cde.memory': string
+  'cde.na': string
+  'cde.newGitspace': string
+  'cde.noChange': string
+  'cde.noData': string
+  'cde.noGitspaces': string
+  'cde.noRepo': string
+  'cde.or': string
+  'cde.region': string
+  'cde.regionSelectWarning': string
+  'cde.regionValidationMessage': string
+  'cde.repoValidationMessage': string
+  'cde.repository.continueWith': string
+  'cde.repository.pasteRepo': string
+  'cde.repository.pasterRepoSubtext': string
+  'cde.repository.privateRepoWarning': string
+  'cde.repository.publicRepo': string
+  'cde.repository.repo': string
+  'cde.repository.repositoryURL': string
+  'cde.repository.selectRepository': string
+  'cde.repositoryAndBranch': string
+  'cde.retry': string
+  'cde.sessionDuration': string
+  'cde.sshSelect.180days': string
+  'cde.sshSelect.30days': string
+  'cde.sshSelect.90days': string
+  'cde.sshSelect.deleteToken': string
+  'cde.sshSelect.noexpiration': string
+  'cde.startingGitspace': string
+  'cde.status': string
+  'cde.stopingGitspace': string
+  'cde.updateGitspace': string
+  'cde.used': string
+  'cde.viewGitspace': string
 }
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index eac02ed0f..32295af3d 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -1123,133 +1123,6 @@ upload: Upload
 unorderedList: Unordered list
 checklist: Check list
 code: Code
-cde:
-  branchPlaceholder: Branch
-  lastUsed: Last Used
-  introText1: Get ready to code in seconds
-  introText2: Isolated cloud development environments with your favorite editor
-  introText3: Connect in seconds with a repository
-  cloudDeveloperExperience: Cloud Development Environments
-  createGitspace: Create Gitspace
-  deleteGitspace: Delete Gitspace
-  editGitspace: Edit Gitspace
-  viewGitspace: View Gitspace Details
-  updateGitspace: Update Gitspace
-  gitspaces: Gitspaces
-  noRepo: Don’t have a Git repo?
-  createRepo: Create a repo in Harness
-  newGitspace: + New Gitspace
-  manageGitspaces: Manage Gitspaces
-  noGitspaces: You have not created any Gitspace yet
-  gitspaceDetail: Gitspace Detail
-  machine: Machine
-  region: Region
-  or: OR
-  logs: Logs
-  noData: No Data
-  noChange: No Change
-  used: Used
-  hours: Hours
-  na: NA
-  retry: Retry
-  eventTimeline: Event Timeline
-  cpu: CPU
-  memory: Memory
-  disk: Disk
-  regionSelectWarning: Select a region first
-  gitspaceUpdateSuccess: Gitspace updated successfully
-  regionValidationMessage: Region is required
-  repoValidationMessage: Repository is required
-  branchValidationMessage: Branch is required
-  machineValidationMessage: Machine Type is required
-  startingGitspace: Starting Gitspace
-  stopingGitspace: Stopping Gitspace
-  sessionDuration: Last Started
-  lastActivated: Last Activated
-  deleteGitspaceTitle: Delete Gitspace '{{name}}'
-  deleteGitspaceText: 'This action cannot be undone. Are you sure you want to proceed to delete?'
-  deleteSuccess: Gitspace deleted succesfully
-  repositoryAndBranch: Repository & Branch
-  importInto: Import Repository into Gitness
-  status: Status
-  getStarted: Get started with Gitspaces by
-  createImport: creating or importing repositories
-  sshSelect:
-    30days: 30 Days
-    90days: 90 Days
-    180days: 180 Days
-    noexpiration: No Expiration
-    deleteToken: Delete SSH Token '{{name}}'
-  homePage:
-    start: Start
-    noSetupRequired: no setup required
-    noteOne: Dedicated cloud development environments with your favorite editor
-    noteTwo: Get always consistent development environments that boost productivity and empower collaboration.
-    getStartedNow: Get Started Now
-    learnMoreAboutGitspaces: Learn more about Gitspaces
-  listing:
-    online: Active
-    offline: Stopped
-    error: Error
-    starting: Starting
-    stopping: Stopping
-    ownerAndCreated: Owner & Created On
-  create:
-    repositoryDetails: Repository Details
-    gitnessRepositories: Gitness Repositories
-    thirdPartyGitRepositories: Other Public Git Repositories
-    branchPlaceholder: Enter the Branch name
-    selectBranchPlaceholder: Select branch
-    searchRepositoryPlaceholder: Search for a repository
-    searchBranchPlaceholder: Search for a branch
-    repoNotFound: 'Create a repo <strong>{{repo}}</strong> in Gitness'
-    gitspaceCreateSuccess: Gitspace created successfully
-    gitspaceCreateFailed: Gitspace creation failed
-    subtext: Start Coding, no setup required. Dedicated cloud development environments with your favorite editor.
-    importWarning:
-      Currently we support only third party public repositories. In order to use a private git repository, please
-      import the repository into Gitness.
-    unsaved:
-      title: Unsaved Changes
-      message: 'You have unsaved changes, On switching all unsaved changes will be lost'
-  details:
-    actions: More Actions
-    openEditor: Open VS Code Editor
-    openBrowser: Open VS Code Online
-    goToDashboard: Go To Dashboard
-    startGitspace: Start Gitspace
-    stopProvising: Stop Provising
-    noData: No Data for Gitspace
-    gitspaceActivity: Gitspace Activity
-    provisioningGitspace: Provisioning the Gitspace...
-    gitspaceStopped: Gitspace is stopped
-    gitspaceRunning: Gitspace is running
-    stopGitspace: Stop Gitspace
-    fetchingGitspace: Fetching Gitspace Details
-    fetchingLogs: Fetching gitspace logs
-    logsFailed: Gitspace logs api failed
-    noLogsFound: No gitspace logs found
-    wrongIdentifier: Invalid gitspace id or project params
-    fetchingDetails: Fetching Gitspace Events ....
-    containerLogs: Container Logs
-    containerLogsSubText: Logs showing activity inside container
-  repository:
-    repo: Repository
-    selectRepository: Select Repository
-    pasteRepo: Paste a Git URL to create Gitspace
-    pasterRepoSubtext: You can use any public Git repository to create a Gitspace
-    privateRepoWarning: Repo URL is of Private repository
-    publicRepo: You can use any public Git repository to create a Gitspace
-    continueWith: Continue with
-    repositoryURL: Repository URL
-  ide:
-    browser: VS Code Browser
-    desktop: VS Code Desktop
-    title: IDE
-    selectIDE: Select IDE
-    vsCode: VS Code
-    openVSCode: Open in VS Code Desktop
-    openBrowser: Open in Browser
 showMoreText: Show More
 addOptionalCommitMessage: Add (optional) commit message
 confirmStrat: 'Confirm {{strat}}'