Move the usage of use translation store into a context

apps/design-system/src/App.tsx

@@ -4,7 +4,7 @@ import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 import ViewPreview from '@/pages/view-preview/view-preview'
 import { useThemeStore } from '@utils/theme-utils'
 
-import { ThemeProvider } from '@harnessio/ui/context'
+import { ThemeProvider, TranslationProvider } from '@harnessio/ui/context'
 
 import AppRouterProvider from './AppRouterProvider'
 
@@ -23,7 +23,9 @@ const App: FC = () => {
 
   return (
     <ThemeProvider {...themeStore}>
-      <RouterProvider router={router} />
+      <TranslationProvider>
+        <RouterProvider router={router} />
+      </TranslationProvider>
     </ThemeProvider>
   )
 }

apps/design-system/src/pages/view-preview/app-view-wrapper.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, ReactNode, useCallback, useState } from 'react'
 import { Outlet, Route, Routes } from 'react-router-dom'
 
-import { noop, useTranslationStore } from '@utils/viewUtils'
+import { noop } from '@utils/viewUtils'
 
 import { MoreSubmenu, NavbarItemType, SettingsMenu, Sidebar } from '@harnessio/ui/components'
 import { MainContentLayout, SidebarView } from '@harnessio/ui/views'
@@ -102,7 +102,8 @@ export const AppViewWrapper: FC<PropsWithChildren<AppViewWrapperProps>> = ({
               pinnedMenuItems={pinnedMenu}
               handleChangePinnedMenuItem={setPinned}
               handleRemoveRecentMenuItem={noop}
-              useTranslationStore={useTranslationStore}
+              changeLanguage={noop}
+              lang="en"
             />
             <Sidebar.Inset>
               {breadcrumbs}

apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx

@@ -3,7 +3,7 @@ import { FC, useCallback } from 'react'
 import { commitDetailsStore } from '@subjects/views/commit-details/commit-details-store'
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
-import { noop, useTranslationStore } from '@utils/viewUtils'
+import { noop } from '@utils/viewUtils'
 
 import { FileExplorer } from '@harnessio/ui/components'
 import { CommitDiff, CommitSidebar, ICommitDetailsStore } from '@harnessio/ui/views'
@@ -13,16 +13,12 @@ export const CommitDetailsDiffViewWrapper: FC = () => {
 
   return (
     <>
-      <CommitSidebar
-        useTranslationStore={useTranslationStore}
-        navigateToFile={() => {}}
-        filesList={repoFilesStore.filesList}
-      >
+      <CommitSidebar navigateToFile={() => {}} filesList={repoFilesStore.filesList}>
         <FileExplorer.Root onValueChange={noop} value={[]}>
           {renderEntries(repoFilesStore.filesTreeData, '')}
         </FileExplorer.Root>
       </CommitSidebar>
-      <CommitDiff useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationStore} />
+      <CommitDiff useCommitDetailsStore={useCommitDetailsStore} />
     </>
   )
 }

apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx

@@ -1,14 +1,12 @@
 import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import { useTranslationStore } from '@utils/viewUtils'
-
 import { ProfileSettingsLayout } from '@harnessio/ui/views'
 
 export const ProfileSettingsViewWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <Routes>
-      <Route path="*" element={<ProfileSettingsLayout useTranslationStore={useTranslationStore} />}>
+      <Route path="*" element={<ProfileSettingsLayout />}>
         <Route path="*" element={children} />
       </Route>
     </Routes>

apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx

@@ -1,16 +1,14 @@
 import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
-import { useTranslationStore } from '@utils/viewUtils'
-
 import { ProjectSettingsTabNav, SubHeaderWrapper } from '@harnessio/ui/views'
 
 import RootViewWrapper from './root-view-wrapper'
 
 const Layout = () => {
   return (
     <SubHeaderWrapper>
-      <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
+      <ProjectSettingsTabNav />
     </SubHeaderWrapper>
   )
 }

apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx

@@ -2,7 +2,6 @@ import { FC, PropsWithChildren, useCallback } from 'react'
 import { Route } from 'react-router-dom'
 
 import { pullRequestStore } from '@subjects/views/pull-request-conversation/pull-request-store'
-import { useTranslationStore } from '@utils/viewUtils'
 
 import { PullRequestLayout } from '@harnessio/ui/views'
 
@@ -21,7 +20,6 @@ const PullRequestLayoutWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLEl
         path="*"
         element={
           <PullRequestLayout
-            useTranslationStore={useTranslationStore}
             usePullRequestStore={usePullRequestStore}
             spaceId={''}
             repoId={''}

apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx

@@ -2,7 +2,7 @@ import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
-import { noop, useTranslationStore } from '@utils/viewUtils'
+import { noop } from '@utils/viewUtils'
 
 import { FileExplorer } from '@harnessio/ui/components'
 import { BranchSelectorV2, RepoSidebar as RepoSidebarView } from '@harnessio/ui/views'
@@ -11,7 +11,6 @@ export const RepoFilesViewWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLEleme
   return (
     <div className="grid" style={{ gridTemplateColumns: 'auto 1px 1fr' }}>
       <RepoSidebarView
-        useTranslationStore={useTranslationStore}
         navigateToNewFile={noop}
         navigateToFile={noop}
         filesList={repoFilesStore.filesList}
@@ -26,7 +25,6 @@ export const RepoFilesViewWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLEleme
             onSelectBranch={noop}
             isBranchOnly={false}
             dynamicWidth={false}
-            useTranslationStore={useTranslationStore}
             setSearchQuery={noop}
           />
         )}

apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx

@@ -1,14 +1,12 @@
 import { FC, PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import { useTranslationStore } from '@utils/viewUtils'
-
 import { RepoSettingsLayout } from '@harnessio/ui/views'
 
 export const RepoSettingsViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <Routes>
-      <Route path="*" element={<RepoSettingsLayout useTranslationStore={useTranslationStore} />}>
+      <Route path="*" element={<RepoSettingsLayout />}>
         <Route path="*" element={children} />
       </Route>
     </Routes>

apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx

@@ -1,10 +1,8 @@
 import { FC, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
-import { useTranslationStore } from '@utils/viewUtils'
-
 import { RepoSubheader } from '@harnessio/ui/components'
-import { SubHeaderWrapper } from '@harnessio/ui/views'
+import { RepoHeader, SubHeaderWrapper } from '@harnessio/ui/views'
 
 import RootViewWrapper from './root-view-wrapper'
 
@@ -16,8 +14,9 @@ const RepoViewWrapper: FC<
       path="*"
       element={
         <>
+          <RepoHeader name="Ipsum" isPublic />
           <SubHeaderWrapper>
-            <RepoSubheader useTranslationStore={useTranslationStore} />
+            <RepoSubheader />
           </SubHeaderWrapper>
           {children}
         </>

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -52,7 +52,6 @@ import { SignInView } from '@subjects/views/signin'
 import { SignUpView } from '@subjects/views/signup'
 import { SpaceSettingsMembers } from '@subjects/views/space-settings-members/space-settings-members'
 import UnifiedPipelineStudioWrapper from '@subjects/views/unified-pipeline-studio/unified-pipeline-studio'
-import { useTranslationStore } from '@utils/viewUtils'
 
 import { ChatEmptyPreviewWrapper, ChatPreviewWrapper, Tooltip } from '@harnessio/ui/components'
 import { NotFoundPage } from '@harnessio/ui/views'
@@ -270,7 +269,7 @@ export const viewPreviews: Record<string, ViewPreviewGroup> = {
         element: (
           <RepoViewWrapper>
             <RepoSettingsViewWrapper>
-              <NotFoundPage useTranslationStore={useTranslationStore} pageTypeText="rules" />
+              <NotFoundPage pageTypeText="rules" />
             </RepoSettingsViewWrapper>
           </RepoViewWrapper>
         )

apps/design-system/src/subjects/views/commit-details/index.tsx

@@ -1,15 +1,11 @@
 import { useCallback } from 'react'
 
-import { useTranslationStore } from '@utils/viewUtils'
-
 import { ICommitDetailsStore, RepoCommitDetailsView } from '@harnessio/ui/views'
 
 import { commitDetailsStore } from './commit-details-store'
 
 export const CommitDetailsView = () => {
   const useCommitDetailsStore = useCallback((): ICommitDetailsStore => commitDetailsStore, [])
 
-  return (
-    <RepoCommitDetailsView useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationStore} />
-  )
+  return <RepoCommitDetailsView useCommitDetailsStore={useCommitDetailsStore} />
 }

apps/design-system/src/subjects/views/connectors/connector-details.tsx

@@ -1,43 +1,42 @@
 import { getHarnessConnectorDefinition } from '@utils/connectors/utils'
-import { useTranslationStore } from '@utils/viewUtils'
 import { noop } from 'lodash-es'
 
 import { InputFactory } from '@harnessio/forms'
 import { Tabs } from '@harnessio/ui/components'
 import {
-  ArrayInput,
-  BooleanInput,
+  ArrayFormInput,
+  BooleanFormInput,
+  CardsFormInput,
   ConnectorDetailsActivities,
   ConnectorDetailsConfiguration,
   ConnectorDetailsItem,
   ConnectorDetailsLayout,
   ConnectorDetailsReference,
   ConnectorDetailsTabsKeys,
-  GroupInput,
-  ListInput,
-  NumberInput,
-  RadialInput,
-  SelectInput,
-  SeparatorInput,
-  TextAreaInput,
-  TextInput
+  GroupFormInput,
+  ListFormInput,
+  NumberFormInput,
+  SelectFormInput,
+  SeparatorFormInput,
+  TextareaFormInput,
+  TextFormInput
 } from '@harnessio/ui/views'
 
 import { mockConnectorActivityList } from './mock-connector-activity-list'
 import mockConnectorDetails from './mock-connector-details.json'
 import { mockConnectorRefList } from './mock-connector-ref-list'
 
 const inputComponentFactory = new InputFactory()
-inputComponentFactory.registerComponent(new TextInput())
-inputComponentFactory.registerComponent(new BooleanInput())
-inputComponentFactory.registerComponent(new NumberInput())
-inputComponentFactory.registerComponent(new ArrayInput())
-inputComponentFactory.registerComponent(new ListInput())
-inputComponentFactory.registerComponent(new TextAreaInput())
-inputComponentFactory.registerComponent(new GroupInput())
-inputComponentFactory.registerComponent(new SelectInput())
-inputComponentFactory.registerComponent(new SeparatorInput())
-inputComponentFactory.registerComponent(new RadialInput())
+inputComponentFactory.registerComponent(new TextFormInput())
+inputComponentFactory.registerComponent(new BooleanFormInput())
+inputComponentFactory.registerComponent(new NumberFormInput())
+inputComponentFactory.registerComponent(new ArrayFormInput())
+inputComponentFactory.registerComponent(new ListFormInput())
+inputComponentFactory.registerComponent(new TextareaFormInput())
+inputComponentFactory.registerComponent(new GroupFormInput())
+inputComponentFactory.registerComponent(new SelectFormInput())
+inputComponentFactory.registerComponent(new SeparatorFormInput())
+inputComponentFactory.registerComponent(new CardsFormInput())
 
 const ConnectorsDetailsPageWrapper = (): JSX.Element => {
   const connectorDetails = {
@@ -66,7 +65,6 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
       connectorDetails={connectorDetails}
       onTest={noop}
       onDelete={noop}
-      useTranslationStore={useTranslationStore}
       toConnectorsList={() => '/connectors'}
     >
       <Tabs.Content className="mt-9" value={ConnectorDetailsTabsKeys.CONFIGURATION}>
@@ -75,7 +73,6 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
           onSave={noop}
           inputComponentFactory={inputComponentFactory}
           getConnectorDefinition={type => getHarnessConnectorDefinition(type, { autoExpandGroups: true })}
-          useTranslationStore={useTranslationStore}
           apiError={''}
         />
       </Tabs.Content>
@@ -86,7 +83,6 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
           entities={mockConnectorRefList}
           searchQuery={''}
           apiConnectorRefError={undefined}
-          useTranslationStore={useTranslationStore}
           isLoading={false}
           setSearchQuery={noop}
           currentPage={1}
@@ -97,7 +93,6 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
       </Tabs.Content>
       <Tabs.Content className="mt-9" value={ConnectorDetailsTabsKeys.ACTIVITY}>
         <ConnectorDetailsActivities
-          useTranslationStore={useTranslationStore}
           isLoading={false}
           activities={mockConnectorActivityList}
           currentPage={1}

apps/design-system/src/subjects/views/connectors/connectors-list.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 
-import { useTranslationStore } from '@utils/viewUtils'
 import { noop } from 'lodash-es'
 
 import { DeleteAlertDialog } from '@harnessio/ui/components'
@@ -48,7 +47,6 @@ const ConnectorsListPageWrapper = (): JSX.Element => {
             isFavorite: connector.isFavorite
           })) as ConnectorListItem[]
         }
-        useTranslationStore={useTranslationStore}
         isLoading={false}
         onFilterChange={handleFilterChange}
         setSearchQuery={noop}
@@ -70,7 +68,6 @@ const ConnectorsListPageWrapper = (): JSX.Element => {
         error={null}
         type="connector"
         identifier={alertDeleteParams}
-        useTranslationStore={useTranslationStore}
       />
     </>
   )