diff --git a/apps/design-system/src/App.tsx b/apps/design-system/src/App.tsx index 5e41eabdfa..153a42f0ff 100644 --- a/apps/design-system/src/App.tsx +++ b/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 ( - + + + ) } diff --git a/apps/design-system/src/pages/view-preview/app-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/app-view-wrapper.tsx index fe0fd9d24c..6048dec0e3 100644 --- a/apps/design-system/src/pages/view-preview/app-view-wrapper.tsx +++ b/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> = ({ pinnedMenuItems={pinnedMenu} handleChangePinnedMenuItem={setPinned} handleRemoveRecentMenuItem={noop} - useTranslationStore={useTranslationStore} + changeLanguage={noop} + lang="en" /> {breadcrumbs} diff --git a/apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx index 1d28c3e953..0221155fab 100644 --- a/apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx +++ b/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 ( <> - {}} - filesList={repoFilesStore.filesList} - > + {}} filesList={repoFilesStore.filesList}> {renderEntries(repoFilesStore.filesTreeData, '')} - + ) } diff --git a/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx index c63b998dd0..da1e48355c 100644 --- a/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx +++ b/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>> = ({ children }) => { return ( - }> + }> diff --git a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx index 83ba593a38..5837549b5b 100644 --- a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx @@ -1,8 +1,6 @@ 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' @@ -10,7 +8,7 @@ import RootViewWrapper from './root-view-wrapper' const Layout = () => { return ( - + ) } diff --git a/apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx b/apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx index 86a4c05ef8..1b405c066c 100644 --- a/apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx +++ b/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 )} diff --git a/apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx index d661dc19d2..9166805e63 100644 --- a/apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx +++ b/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>> = ({ children }) => { return ( - }> + }> diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx index f50bbef61b..fb2ae8f9be 100644 --- a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx +++ b/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={ <> + - + {children} diff --git a/apps/design-system/src/pages/view-preview/view-preview.tsx b/apps/design-system/src/pages/view-preview/view-preview.tsx index 9e5d63e1f7..e0f440774b 100644 --- a/apps/design-system/src/pages/view-preview/view-preview.tsx +++ b/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 = { element: ( - + ) diff --git a/apps/design-system/src/subjects/views/commit-details/index.tsx b/apps/design-system/src/subjects/views/commit-details/index.tsx index 53621b956d..7aaa089f24 100644 --- a/apps/design-system/src/subjects/views/commit-details/index.tsx +++ b/apps/design-system/src/subjects/views/commit-details/index.tsx @@ -1,7 +1,5 @@ import { useCallback } from 'react' -import { useTranslationStore } from '@utils/viewUtils' - import { ICommitDetailsStore, RepoCommitDetailsView } from '@harnessio/ui/views' import { commitDetailsStore } from './commit-details-store' @@ -9,7 +7,5 @@ import { commitDetailsStore } from './commit-details-store' export const CommitDetailsView = () => { const useCommitDetailsStore = useCallback((): ICommitDetailsStore => commitDetailsStore, []) - return ( - - ) + return } diff --git a/apps/design-system/src/subjects/views/connectors/connector-details.tsx b/apps/design-system/src/subjects/views/connectors/connector-details.tsx index 20649e5d07..305363c0a0 100644 --- a/apps/design-system/src/subjects/views/connectors/connector-details.tsx +++ b/apps/design-system/src/subjects/views/connectors/connector-details.tsx @@ -1,26 +1,25 @@ 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' @@ -28,16 +27,16 @@ 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'} > @@ -75,7 +73,6 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => { onSave={noop} inputComponentFactory={inputComponentFactory} getConnectorDefinition={type => getHarnessConnectorDefinition(type, { autoExpandGroups: true })} - useTranslationStore={useTranslationStore} apiError={''} /> @@ -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 => { { 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} /> ) diff --git a/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx b/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx index 4886fffdc8..1b9d7cb17b 100644 --- a/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx +++ b/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx @@ -1,13 +1,14 @@ import { useState } from 'react' import { getHarnessConnectorDefinition, harnessConnectors } from '@utils/connectors/utils' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { InputFactory } from '@harnessio/forms' import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components' import { - ArrayInput, - BooleanInput, + ArrayFormInput, + BooleanFormInput, + CardsFormInput, ConnectorEntity, ConnectorEntityForm, ConnectorHeader, @@ -17,14 +18,13 @@ import { ConnectorsPalette, DirectionEnum, EntityIntent, - GroupInput, - ListInput, - NumberInput, - RadialInput, - SelectInput, - SeparatorInput, - TextAreaInput, - TextInput + GroupFormInput, + ListFormInput, + NumberFormInput, + SelectFormInput, + SeparatorFormInput, + TextareaFormInput, + TextFormInput } from '@harnessio/ui/views' import mockAccountsData from '../secrets/mock-account-data.json' @@ -34,16 +34,16 @@ import { Scope, ScopeEnum, scopeHierarchy } from '../secrets/types' import mockConnectorsData from './mock-connectors-data.json' 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()) export const ConnectorsRefPage = ({ isDrawerOpen, @@ -113,7 +113,6 @@ export const ConnectorsRefPage = ({
{/* Render create connector flow from here */} setIsConnectorSelected(true)} setConnectorEntity={setConnectorEntity} @@ -123,7 +122,6 @@ export const ConnectorsRefPage = ({ {!!connectorEntity && ( setIsConnectorSelected(false)} // onFormSubmit={handleFormSubmit} diff --git a/apps/design-system/src/subjects/views/connectors/connectors.tsx b/apps/design-system/src/subjects/views/connectors/connectors.tsx index 4520730458..8f8315bf5f 100644 --- a/apps/design-system/src/subjects/views/connectors/connectors.tsx +++ b/apps/design-system/src/subjects/views/connectors/connectors.tsx @@ -1,40 +1,39 @@ import { useState } from 'react' import { getHarnessConnectorDefinition, harnessConnectors } from '@utils/connectors/utils' -import { useTranslationStore } from '@utils/viewUtils' import { InputFactory } from '@harnessio/forms' import { Button, Drawer, ListActions, Spacer } from '@harnessio/ui/components' import { - ArrayInput, - BooleanInput, + ArrayFormInput, + BooleanFormInput, + CardsFormInput, ConnectorEntity, ConnectorEntityForm, ConnectorsPalette, ConnectorTestConnectionDialog, EntityIntent, - GroupInput, - ListInput, - NumberInput, - RadialInput, + GroupFormInput, + ListFormInput, + NumberFormInput, SandboxLayout, - SelectInput, - SeparatorInput, - TextAreaInput, - TextInput + SelectFormInput, + SeparatorFormInput, + TextareaFormInput, + TextFormInput } from '@harnessio/ui/views' 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 ConnectorsListPageContent = (): JSX.Element => { const [connectorEntity, setConnectorEntity] = useState(null) @@ -102,13 +101,11 @@ const ConnectorsListPageContent = (): JSX.Element => { viewDocClick={() => { console.log('') }} - useTranslationStore={useTranslationStore} errorData={{ errors: [{ reason: 'Unexpected Error', message: 'Bad credentials' }] }} /> setIsConnectorSelected(true)} setConnectorEntity={setConnectorEntity} @@ -119,7 +116,6 @@ const ConnectorsListPageContent = (): JSX.Element => { {!!connectorEntity && ( setIsConnectorSelected(false)} // onFormSubmit={handleFormSubmit} @@ -136,7 +132,6 @@ const ConnectorsListPageContent = (): JSX.Element => { {!!connectorEntity && ( setIsEditConnectorDrawerOpen(false)} getConnectorDefinition={getHarnessConnectorDefinition} diff --git a/apps/design-system/src/subjects/views/delegates/delegate-connectivity.tsx b/apps/design-system/src/subjects/views/delegates/delegate-connectivity.tsx index e5f3e85596..52e02ed8da 100644 --- a/apps/design-system/src/subjects/views/delegates/delegate-connectivity.tsx +++ b/apps/design-system/src/subjects/views/delegates/delegate-connectivity.tsx @@ -1,4 +1,3 @@ -import { useTranslationStore } from '@utils/viewUtils' import { defaultTo } from 'lodash-es' import { DelegateConnectivityList, SandboxLayout } from '@harnessio/ui/views' @@ -18,7 +17,6 @@ const DelegateConnectivityWrapper = (): JSX.Element => ( groupCustomSelectors: delegate.groupCustomSelectors || [], groupImplicitSelectors: [...Object.keys(defaultTo(delegate.groupImplicitSelectors, {}))] }))} - useTranslationStore={useTranslationStore} isLoading={false} selectedTags={[]} isDelegateSelected={isDelegateSelected} diff --git a/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx b/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx index b641999a27..20ea612eb9 100644 --- a/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx +++ b/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx @@ -1,6 +1,5 @@ import { useState } from 'react' -import { useTranslationStore } from '@utils/viewUtils' import { defaultTo } from 'lodash-es' import { Drawer, Link } from '@harnessio/ui/components' @@ -62,7 +61,6 @@ const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disa setOpen(false)} diff --git a/apps/design-system/src/subjects/views/execution-list/execution-list.tsx b/apps/design-system/src/subjects/views/execution-list/execution-list.tsx index afa5df6dd6..476c52ae60 100644 --- a/apps/design-system/src/subjects/views/execution-list/execution-list.tsx +++ b/apps/design-system/src/subjects/views/execution-list/execution-list.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { Link } from 'react-router-dom' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { ExecutionListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views' @@ -13,7 +13,6 @@ const ExecutionListWrapper: FC> = () => { return ( { return (
- + { createdTime={createdTimeElapsed} pipelineName="build scan push test - k8s - Clone 2" /> - +
{ return ( {}} onFormCancel={() => {}} diff --git a/apps/design-system/src/subjects/views/labels/project-labels-list.tsx b/apps/design-system/src/subjects/views/labels/project-labels-list.tsx index 8ced6145bd..8518c9d18c 100644 --- a/apps/design-system/src/subjects/views/labels/project-labels-list.tsx +++ b/apps/design-system/src/subjects/views/labels/project-labels-list.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' import { LabelsListStore } from '@subjects/stores/labels-store' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { DeleteAlertDialog } from '@harnessio/ui/components' import { LabelsListPage } from '@harnessio/ui/views' @@ -13,7 +13,6 @@ export const ProjectLabelsList = () => { <> { type="label" deleteFn={noop} isLoading={false} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx b/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx index 7704416937..dda43bd6c5 100644 --- a/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx +++ b/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' import { LabelsListStore } from '@subjects/stores/labels-store' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { DeleteAlertDialog } from '@harnessio/ui/components' import { LabelsListPage } from '@harnessio/ui/views' @@ -13,7 +13,6 @@ export const RepoLabelsList = () => { <> { type="label" deleteFn={noop} isLoading={false} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/design-system/src/subjects/views/landing-page/landing-page-view.tsx b/apps/design-system/src/subjects/views/landing-page/landing-page-view.tsx index 7e482a7e73..6d03fae59e 100644 --- a/apps/design-system/src/subjects/views/landing-page/landing-page-view.tsx +++ b/apps/design-system/src/subjects/views/landing-page/landing-page-view.tsx @@ -1,14 +1,5 @@ -import { useTranslationStore } from '@utils/viewUtils' - import { LandingPageView } from '@harnessio/ui/views' export const LandingPagePreview = () => { - return ( - ''} - toCreateProject={() => ''} - /> - ) + return ''} toCreateProject={() => ''} /> } diff --git a/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx index b5033eb6dd..d7098bdbc6 100644 --- a/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx +++ b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx @@ -1,7 +1,7 @@ import { FC, useState } from 'react' import { Link } from 'react-router-dom' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { CreatePipelineDialog, PipelineListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views' @@ -15,7 +15,6 @@ const PipelineListWrapper: FC> = () => { <> { openSshKeyDialog={() => setIsKeysDialogOpen(true)} openAlertDeleteDialog={() => setIsDeleteDialogOpen(true)} error={null} - useTranslationStore={useTranslationStore} isLoadingTokenList={false} isLoadingKeysList={false} /> @@ -34,7 +33,6 @@ export const ProfileSettingsKeysView = () => { handleCreateToken={noop} error={null} isLoading={false} - useTranslationStore={useTranslationStore} useProfileSettingsStore={mockProfileSettingsStore} /> { onClose={() => setIsKeysDialogOpen(false)} handleCreateSshKey={noop} error={null} - useTranslationStore={useTranslationStore} /> { deleteFn={noop} error={null} isLoading={false} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/design-system/src/subjects/views/profile-settings/index.tsx b/apps/design-system/src/subjects/views/profile-settings/index.tsx index 4c276b1cd2..16fbc4bba9 100644 --- a/apps/design-system/src/subjects/views/profile-settings/index.tsx +++ b/apps/design-system/src/subjects/views/profile-settings/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { SettingsAccountGeneralPage } from '@harnessio/ui/views' @@ -16,7 +16,6 @@ export const ProfileSettingsView = () => { return ( { @@ -10,7 +8,6 @@ export const ProjectSettingsView = () => { isUpdateSuccess={false} updateError={null} setOpenDeleteDialog={() => {}} - useTranslationStore={useTranslationStore} /> ) } diff --git a/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx index 360484f5ca..4355b82a66 100644 --- a/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx +++ b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx @@ -1,6 +1,6 @@ import { FC, useCallback } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { BranchSelectorV2, PullRequestComparePage, PullRequestComparePageProps } from '@harnessio/ui/views' @@ -49,7 +49,6 @@ const PullRequestCompareWrapper: FC> = prop useRepoCommitsStore={useRepoCommitsListStore} searchCommitQuery={null} setSearchCommitQuery={noop} - useTranslationStore={useTranslationStore} isLoading={false} searchReviewersQuery="" setSearchReviewersQuery={noop} @@ -67,7 +66,6 @@ const PullRequestCompareWrapper: FC> = prop onSelectBranch={noop} isBranchOnly={false} dynamicWidth={false} - useTranslationStore={useTranslationStore} setSearchQuery={noop} /> } diff --git a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx index f2ce36edf3..296a7f3eca 100644 --- a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx +++ b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx @@ -1,6 +1,6 @@ import { FC, PropsWithChildren, useCallback } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { CommitSuggestionsDialog } from '@harnessio/ui/components' import { PullRequestChangesPage, TypesCommit, TypesPullReqActivity } from '@harnessio/ui/views' @@ -55,7 +55,6 @@ const PullRequestChanges: FC = ({ state }) => { [] ) - return ( - - ) + return } export default PullRequestCommits diff --git a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx index 4f2474216c..70822c5a8a 100644 --- a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx +++ b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx @@ -1,7 +1,7 @@ import { FC, PropsWithChildren } from 'react' import { usePrFilters } from '@subjects/views/pull-request-conversation/hooks/use-pr-filters' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { CommitSuggestionsDialog } from '@harnessio/ui/components' import { @@ -88,7 +88,6 @@ const PullRequestConversation: FC = ({ state }) => > = props => { setSearchQuery={noop} useLabelsStore={LabelsListStore.useLabelsStore} usePullRequestListStore={usePullRequestListStore} - useTranslationStore={useTranslationStore} isLoading={false} {...props} /> diff --git a/apps/design-system/src/subjects/views/repo-branches/index.tsx b/apps/design-system/src/subjects/views/repo-branches/index.tsx index 41d1f62423..219cc64a8a 100644 --- a/apps/design-system/src/subjects/views/repo-branches/index.tsx +++ b/apps/design-system/src/subjects/views/repo-branches/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { IBranchSelectorStore, RepoBranchListView } from '@harnessio/ui/views' @@ -16,7 +16,6 @@ export function RepoBranchesView() { isCreatingBranch={false} onSubmit={async () => {}} useRepoBranchesStore={useRepoBranchesStore} - useTranslationStore={useTranslationStore} isCreateBranchDialogOpen={isCreateBranchDialogOpen} setCreateBranchDialogOpen={setCreateBranchDialogOpen} searchQuery={''} diff --git a/apps/design-system/src/subjects/views/repo-commits/index.tsx b/apps/design-system/src/subjects/views/repo-commits/index.tsx index a3a3d9fa7f..b06d4d5a74 100644 --- a/apps/design-system/src/subjects/views/repo-commits/index.tsx +++ b/apps/design-system/src/subjects/views/repo-commits/index.tsx @@ -1,4 +1,4 @@ -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { BranchSelectorV2, RepoCommitsView as RepoCommitsUiView } from '@harnessio/ui/views' @@ -13,7 +13,6 @@ export const RepoCommitsView = () => { setPage={noop} xNextPage={2} xPrevPage={NaN} - useTranslationStore={useTranslationStore} renderProp={() => ( { onSelectBranch={noop} isBranchOnly={false} dynamicWidth={false} - useTranslationStore={useTranslationStore} setSearchQuery={noop} /> )} diff --git a/apps/design-system/src/subjects/views/repo-create-rule.tsx b/apps/design-system/src/subjects/views/repo-create-rule.tsx index bb11d4af4c..b3bfc37016 100644 --- a/apps/design-system/src/subjects/views/repo-create-rule.tsx +++ b/apps/design-system/src/subjects/views/repo-create-rule.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from 'react' import { useRepoRulesStore } from '@subjects/views/repo-general-settings/use-repo-rules-store' -import { useTranslationStore } from '@utils/viewUtils' import { SkeletonForm } from '@harnessio/ui/components' import { RepoBranchSettingsRulesPage } from '@harnessio/ui/views' @@ -52,7 +51,6 @@ export const RepoCreateRule = () => { handleSelectChangeForRule={() => {}} handleInputChange={() => {}} handleInitialRules={() => {}} - useTranslationStore={useTranslationStore} setPrincipalsSearchQuery={setPrincipalsSearchQuery} principalsSearchQuery={principalsSearchQuery} /> diff --git a/apps/design-system/src/subjects/views/repo-create/index.tsx b/apps/design-system/src/subjects/views/repo-create/index.tsx index 926f796ad9..0ccfc0017d 100644 --- a/apps/design-system/src/subjects/views/repo-create/index.tsx +++ b/apps/design-system/src/subjects/views/repo-create/index.tsx @@ -1,4 +1,4 @@ -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { RepoCreatePage } from '@harnessio/ui/views' @@ -15,7 +15,6 @@ export const CreateRepoView = () => { isSuccess={false} gitIgnoreOptions={gitIgnoreOptions} licenseOptions={licenseOptions} - useTranslationStore={useTranslationStore} /> ) } diff --git a/apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx b/apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx index 9ae0ab0092..6226e837df 100644 --- a/apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx +++ b/apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx @@ -1,7 +1,7 @@ import { FC, useMemo } from 'react' import repoSummaryProps from '@subjects/views/repo-summary/repo-summary-props.json' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { BranchSelectorV2, RepoSummaryView, RepoSummaryViewProps } from '@harnessio/ui/views' @@ -18,7 +18,6 @@ export const RepoEmpty: FC> = props => { saveDescription={noop} handleCreateToken={noop} navigateToFile={noop} - useTranslationStore={useTranslationStore} gitRef="" updateRepoError="" isEditDialogOpen={false} @@ -36,7 +35,6 @@ export const RepoEmpty: FC> = props => { onSelectBranch={noop} isBranchOnly={false} dynamicWidth={false} - useTranslationStore={useTranslationStore} setSearchQuery={noop} /> } diff --git a/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx index fe850f9879..54900537d0 100644 --- a/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx +++ b/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { EditViewTypeValue, FileEditorControlBar, GitCommitDialog, GitCommitFormType } from '@harnessio/ui/components' import { BranchSelectorTab, CodeModes, PathActionBar } from '@harnessio/ui/views' @@ -55,7 +55,6 @@ export const RepoFileEdit = () => { setFileName(vel)} onBlurFileName={noop} gitRefName={repoFilesStore.branchSelectorStore.selectedBranchTag?.name || ''} diff --git a/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx index 38c006dab1..7f39855721 100644 --- a/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx +++ b/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx @@ -1,6 +1,6 @@ import { FC, useCallback, useMemo } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { BranchSelectorTab, CodeModes, IBranchSelectorStore, RepoFiles } from '@harnessio/ui/views' @@ -60,7 +60,6 @@ export const RepoFilesWrapper: FC = ({ codeMode, isDir, i isDir={isDir} isShowSummary={true} latestFile={repoFilesStore.latestCommitInfo} - useTranslationStore={useTranslationStore} pathNewFile="" pathUploadFiles="" codeMode={codeMode} diff --git a/apps/design-system/src/subjects/views/repo-general-settings/repo-general-settings.tsx b/apps/design-system/src/subjects/views/repo-general-settings/repo-general-settings.tsx index 120f69f0cc..70471a94c2 100644 --- a/apps/design-system/src/subjects/views/repo-general-settings/repo-general-settings.tsx +++ b/apps/design-system/src/subjects/views/repo-general-settings/repo-general-settings.tsx @@ -1,7 +1,6 @@ import { useState } from 'react' import { useRepoRulesStore } from '@subjects/views/repo-general-settings/use-repo-rules-store' -import { useTranslationStore } from '@utils/viewUtils' import { DeleteAlertDialog } from '@harnessio/ui/components' import { ErrorTypes, RepoSettingsGeneralPage } from '@harnessio/ui/views' @@ -42,7 +41,6 @@ export const RepoGeneralSettings = () => { loadingStates={loadingStates} isRepoUpdateSuccess={false} useRepoRulesStore={useRepoRulesStore} - useTranslationStore={useTranslationStore} handleRuleClick={() => {}} openRulesAlertDeleteDialog={openRulesAlertDeleteDialog} openRepoAlertDeleteDialog={openRepoAlertDeleteDialog} @@ -59,7 +57,6 @@ export const RepoGeneralSettings = () => { type="rule" identifier={alertDeleteParams} isLoading={false} - useTranslationStore={useTranslationStore} /> { error={apiError?.type === ErrorTypes.DELETE_REPO ? apiError : null} type="repository" isLoading={false} - useTranslationStore={useTranslationStore} withForm /> diff --git a/apps/design-system/src/subjects/views/repo-import/index.tsx b/apps/design-system/src/subjects/views/repo-import/index.tsx index 0d33686ff5..941ae877b3 100644 --- a/apps/design-system/src/subjects/views/repo-import/index.tsx +++ b/apps/design-system/src/subjects/views/repo-import/index.tsx @@ -1,17 +1,11 @@ -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { RepoImportPage } from '@harnessio/ui/views' export const ImportRepoView = () => { return ( <> - + ) } diff --git a/apps/design-system/src/subjects/views/repo-list/repo-list.tsx b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx index e982fc1ddc..e7db339206 100644 --- a/apps/design-system/src/subjects/views/repo-list/repo-list.tsx +++ b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx @@ -1,6 +1,6 @@ import { FC, useCallback } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { RepoListProps, SandboxRepoListPage } from '@harnessio/ui/views' @@ -29,7 +29,6 @@ const RepoListWrapper: FC> = props => { <> > = props => { saveDescription={noop} handleCreateToken={noop} navigateToFile={noop} - useTranslationStore={useTranslationStore} gitRef="" updateRepoError="" isEditDialogOpen={false} @@ -38,7 +35,6 @@ const RepoSummaryViewWrapper: FC> = props => { onSelectBranch={noop} isBranchOnly={false} dynamicWidth={false} - useTranslationStore={useTranslationStore} setSearchQuery={noop} /> } diff --git a/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx b/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx index 9b3ae72052..a212eefa05 100644 --- a/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx +++ b/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react' -import { asyncNoop, noop, useTranslationStore } from '@utils/viewUtils.ts' +import { asyncNoop, noop } from '@utils/viewUtils.ts' import { DeleteAlertDialog } from '@harnessio/ui/components' import { @@ -42,7 +42,6 @@ export const RepoTagsList = () => { <> { setOpenCreateBranchDialog(true) setSelectedTagInList(selectedTagInList) @@ -56,7 +55,6 @@ export const RepoTagsList = () => { openCreateTagDialog={() => setOpenCreateTagDialog(true)} /> setOpenCreateTagDialog(false)} onSubmit={noop} @@ -65,7 +63,6 @@ export const RepoTagsList = () => { selectedBranchOrTag={null} branchSelectorRenderer={() => ( { )} /> setOpenCreateBranchDialog(false)} selectedBranchOrTag={selectedTagInList} @@ -89,7 +85,6 @@ export const RepoTagsList = () => { error="" renderProp={() => ( { deleteFn={noop} type="tag" isLoading={false} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/design-system/src/subjects/views/repo-webhooks-create/repo-webhooks-list.tsx b/apps/design-system/src/subjects/views/repo-webhooks-create/repo-webhooks-list.tsx index c9bda09fde..5f9689b2b5 100644 --- a/apps/design-system/src/subjects/views/repo-webhooks-create/repo-webhooks-list.tsx +++ b/apps/design-system/src/subjects/views/repo-webhooks-create/repo-webhooks-list.tsx @@ -1,5 +1,3 @@ -import { useTranslationStore } from '@utils/viewUtils.ts' - import { RepoWebhooksCreatePage } from '@harnessio/ui/views' import { repoWebhooksListStore } from '../repo-webhooks-list/repo-webhooks-list-store' @@ -12,7 +10,6 @@ export const RepoWebhooksCreate = () => { apiError={null} isLoading={false} useWebhookStore={repoWebhooksListStore.useWebhookStore} - useTranslationStore={useTranslationStore} /> ) } diff --git a/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list.tsx b/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list.tsx index e99f6d1376..e9ab2adfc5 100644 --- a/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list.tsx +++ b/apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils.ts' +import { noop } from '@utils/viewUtils.ts' import { DeleteAlertDialog } from '@harnessio/ui/components' import { RepoWebhookListPage } from '@harnessio/ui/views' @@ -25,7 +25,6 @@ export const RepoWebhooksList = () => { <> { onClose={closeDeleteWebhookDialog} deleteFn={() => closeDeleteWebhookDialog()} type="webhook" - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/design-system/src/subjects/views/secrets/secrets-list.tsx b/apps/design-system/src/subjects/views/secrets/secrets-list.tsx index 4243d9da75..b7196aa467 100644 --- a/apps/design-system/src/subjects/views/secrets/secrets-list.tsx +++ b/apps/design-system/src/subjects/views/secrets/secrets-list.tsx @@ -1,4 +1,3 @@ -import { useTranslationStore } from '@utils/viewUtils' import { noop } from 'lodash-es' import { SecretListPage } from '@harnessio/ui/views' @@ -16,7 +15,6 @@ const SecretsListPage = (): JSX.Element => ( updatedAt: secret.updatedAt, createdAt: secret.createdAt }))} - useTranslationStore={useTranslationStore} isLoading={false} setSearchQuery={noop} onEditSecret={noop} diff --git a/apps/design-system/src/subjects/views/secrets/secrets.tsx b/apps/design-system/src/subjects/views/secrets/secrets.tsx index ba820f2e04..c506c3df37 100644 --- a/apps/design-system/src/subjects/views/secrets/secrets.tsx +++ b/apps/design-system/src/subjects/views/secrets/secrets.tsx @@ -1,31 +1,31 @@ import { useRef, useState } from 'react' import { secretsFormDefinition } from '@utils/secrets/secrets-form-schema' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { InputFactory } from '@harnessio/forms' import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components' import { - ArrayInput, - BooleanInput, + ArrayFormInput, + BooleanFormInput, CalendarInput, + CardsFormInput, DirectionEnum, EntityIntent, - GroupInput, - ListInput, - NumberInput, + GroupFormInput, + ListFormInput, + NumberFormInput, onSubmitSecretProps, - RadialInput, SecretEntityForm, SecretEntityFormHandle, SecretItem, SecretReference, SecretsHeader, SecretType, - SelectInput, - SeparatorInput, - TextAreaInput, - TextInput + SelectFormInput, + SeparatorFormInput, + TextareaFormInput, + TextFormInput } from '@harnessio/ui/views' import mockAccountsData from './mock-account-data.json' @@ -35,16 +35,16 @@ import mockSecretsData from './mock-secrets-data.json' import { Scope, ScopeEnum, scopeHierarchy } from './types' 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()) inputComponentFactory.registerComponent(new CalendarInput()) export const SecretsPage = ({ @@ -124,7 +124,6 @@ export const SecretsPage = ({ return ( { <> { type="member" identifier={deleteMemberId ?? undefined} isLoading={false} - useTranslationStore={useTranslationStore} withForm /> diff --git a/apps/design-system/src/subjects/views/unified-pipeline-studio/run-pipeline-drawer-content.tsx b/apps/design-system/src/subjects/views/unified-pipeline-studio/run-pipeline-drawer-content.tsx index d07e3139b7..52ba117f52 100644 --- a/apps/design-system/src/subjects/views/unified-pipeline-studio/run-pipeline-drawer-content.tsx +++ b/apps/design-system/src/subjects/views/unified-pipeline-studio/run-pipeline-drawer-content.tsx @@ -2,18 +2,18 @@ import { useState } from 'react' import { InputFactory } from '@harnessio/forms' import { - BooleanInput, - NumberInput, + BooleanFormInput, + NumberFormInput, RunPipelineDrawerContent as RunPipelineDrawerContentView, - TextInput, + TextFormInput, VisualYamlValue } from '@harnessio/ui/views' import { YamlRevision } from '@harnessio/yaml-editor' const inputComponentFactory = new InputFactory() -inputComponentFactory.registerComponent(new TextInput()) -inputComponentFactory.registerComponent(new BooleanInput()) -inputComponentFactory.registerComponent(new NumberInput()) +inputComponentFactory.registerComponent(new TextFormInput()) +inputComponentFactory.registerComponent(new BooleanFormInput()) +inputComponentFactory.registerComponent(new NumberFormInput()) const pipelineInputs = { stringRequired: { type: 'string', required: true }, diff --git a/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx b/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx index bf705af021..cf06d1aa3d 100644 --- a/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx +++ b/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' -import { noop, useTranslationStore } from '@utils/viewUtils' +import { noop } from '@utils/viewUtils' import { Drawer } from '@harnessio/ui/components' import { UnifiedPipelineStudio, UnifiedPipelineStudioProps } from '@harnessio/ui/views' @@ -28,7 +28,6 @@ const PipelineStudioViewWrapper = () => { return ( <> void 0 export const asyncNoop = async () => void 0 - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const mockT = (key: string, options?: { [key: string]: any }) => { - if (typeof options === 'string') { - return options - } - - if (typeof options === 'object' && options?.defaultValue) { - return options.defaultValue.replace(/{{\s*(\w+)\s*}}/g, (_: string, variable: string) => options[variable] || '') - } - - return key -} - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const useTranslationStore = () => ({ t: mockT as any, changeLanguage: noop, i18n: {} as any }) diff --git a/apps/gitness/src/App.tsx b/apps/gitness/src/App.tsx index d1bdb29cdd..48254ffc24 100644 --- a/apps/gitness/src/App.tsx +++ b/apps/gitness/src/App.tsx @@ -5,12 +5,15 @@ import { QueryClientProvider } from '@tanstack/react-query' import { CodeServiceAPIClient } from '@harnessio/code-service-client' import { Toast, Tooltip } from '@harnessio/ui/components' +import { TranslationProvider } from '@harnessio/ui/context' import { ExitConfirmProvider } from './framework/context/ExitConfirmContext' import { NavigationProvider } from './framework/context/NavigationContext' import { ThemeProvider } from './framework/context/ThemeContext' import { queryClient } from './framework/queryClient' import i18n from './i18n/i18n' +import { createI18NextAdapter } from './i18n/i18nAdapter' +import { useTranslationStore } from './i18n/stores/i18n-store' import { routes } from './routes' const BASE_URL_PREFIX = `${window.apiUrl || ''}/api/v1` @@ -31,20 +34,26 @@ export default function App() { // Router Configuration const router = createBrowserRouter(routes) + // i18n Configurations + const { i18n: i18nStore } = useTranslationStore() + const i18nT = createI18NextAdapter(i18nStore.t) + return ( - - - - - - - - - - - + + + + + + + + + + + + + ) diff --git a/apps/gitness/src/components-v2/branch-selector-container.tsx b/apps/gitness/src/components-v2/branch-selector-container.tsx index 43736a94de..063c226024 100644 --- a/apps/gitness/src/components-v2/branch-selector-container.tsx +++ b/apps/gitness/src/components-v2/branch-selector-container.tsx @@ -5,7 +5,6 @@ import { useFindRepositoryQuery, useListBranchesQuery, useListTagsQuery } from ' import { BranchData, BranchSelectorListItem, BranchSelectorTab, BranchSelectorV2 } from '@harnessio/ui/views' import { useGetRepoRef } from '../framework/hooks/useGetRepoPath' -import { useTranslationStore } from '../i18n/stores/i18n-store' import { transformBranchList } from '../pages-v2/repo/transform-utils/branch-transform' import { PathParams } from '../RouteDefinitions' import { orderSortDate } from '../types' @@ -100,7 +99,6 @@ export const BranchSelectorContainer: React.FC = ( return ( 0} getPrevPageLink={getPrevPageLink} getNextPageLink={getNextPageLink} - t={t} />
) diff --git a/apps/gitness/src/components-v2/file-editor.tsx b/apps/gitness/src/components-v2/file-editor.tsx index 9678a1c982..0f4fba17e6 100644 --- a/apps/gitness/src/components-v2/file-editor.tsx +++ b/apps/gitness/src/components-v2/file-editor.tsx @@ -11,7 +11,6 @@ import { useRoutes } from '../framework/context/NavigationContext' import { useThemeStore } from '../framework/context/ThemeContext' import { useExitConfirm } from '../framework/hooks/useExitConfirm' import useCodePathDetails from '../hooks/useCodePathDetails' -import { useTranslationStore } from '../i18n/stores/i18n-store' import { useRepoBranchesStore } from '../pages-v2/repo/stores/repo-branches-store' import { PathParams } from '../RouteDefinitions' import { decodeGitContent, FILE_SEPERATOR, filenameToLanguage, GitCommitAction, PLAIN_TEXT } from '../utils/git-utils' @@ -183,7 +182,6 @@ export const FileEditor: FC = ({ repoDetails, defaultBranch }) setFileName(vel)} onBlurFileName={rebuildPaths} gitRefName={gitRefName} diff --git a/apps/gitness/src/components-v2/mfe/side-bar.tsx b/apps/gitness/src/components-v2/mfe/side-bar.tsx index 7c432a0ef5..4059c301b4 100644 --- a/apps/gitness/src/components-v2/mfe/side-bar.tsx +++ b/apps/gitness/src/components-v2/mfe/side-bar.tsx @@ -3,14 +3,13 @@ import { FC } from 'react' import { noop } from 'lodash-es' import { HarnessLogo, Icon, IconProps, Sidebar, SidebarSearchLegacy, User, useSidebar } from '@harnessio/ui/components' -import { useRouterContext } from '@harnessio/ui/context' +import { useRouterContext, useTranslation } from '@harnessio/ui/context' import { useAppContext } from '../../framework/context/AppContext' import { useMFEContext } from '../../framework/hooks/useMFEContext' -import { useTranslationStore } from '../../i18n/stores/i18n-store' const SideBarToggleMenuItem: FC = () => { - const { t } = useTranslationStore() + const { t } = useTranslation() const { collapsed, toggleSidebar } = useSidebar() return ( @@ -32,7 +31,7 @@ const SideBarToggleMenuItem: FC = () => { const AppSidebar: FC<{ children: React.ReactNode }> = ({ children }) => { const { currentUser } = useAppContext() - const { t } = useTranslationStore() + const { t } = useTranslation() const { NavLink } = useRouterContext() const { routes, hooks } = useMFEContext() const { forceLogout } = hooks?.useLogout?.() || {} @@ -53,7 +52,7 @@ const AppSidebar: FC<{ children: React.ReactNode }> = ({ children }) => { - } /> + } /> @@ -118,7 +117,6 @@ const AppSidebar: FC<{ children: React.ReactNode }> = ({ children }) => { openThemeDialog={noop} openLanguageDialog={noop} handleLogOut={forceLogout || noop} - t={t} /> diff --git a/apps/gitness/src/components-v2/standalone/app-shell.tsx b/apps/gitness/src/components-v2/standalone/app-shell.tsx index d4ac6c1635..afa38bc00a 100644 --- a/apps/gitness/src/components-v2/standalone/app-shell.tsx +++ b/apps/gitness/src/components-v2/standalone/app-shell.tsx @@ -2,6 +2,7 @@ import { FC, useEffect, useMemo } from 'react' import { Outlet, useParams } from 'react-router-dom' import { NavbarItemType, Toaster, useSidebar } from '@harnessio/ui/components' +import { useTranslation } from '@harnessio/ui/context' import { MainContentLayout } from '@harnessio/ui/views' import { useNav } from '../../components/stores/recent-pinned-nav-links.store' @@ -11,7 +12,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useLocationChange } from '../../framework/hooks/useLocationChange' import { useRepoImportEvents } from '../../framework/hooks/useRepoImportEvent' import { useSelectedSpaceId } from '../../framework/hooks/useSelectedSpaceId' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { Breadcrumbs } from '../breadcrumbs/breadcrumbs' import { useGetBreadcrumbs } from '../breadcrumbs/useGetBreadcrumbs' @@ -29,7 +29,7 @@ export const AppShell: FC = () => { const routes = useRoutes() const { spaceId } = useParams() const { pinnedMenu, setRecent, setNavLinks } = useNav() - const { t } = useTranslationStore() + const { t } = useTranslation() const selectedSpaceId = useSelectedSpaceId(spaceId) const spaceIdPathParam = spaceId ?? selectedSpaceId ?? '' diff --git a/apps/gitness/src/components-v2/standalone/side-bar.tsx b/apps/gitness/src/components-v2/standalone/side-bar.tsx index 2bdb5d86e0..bbb3822b19 100644 --- a/apps/gitness/src/components-v2/standalone/side-bar.tsx +++ b/apps/gitness/src/components-v2/standalone/side-bar.tsx @@ -10,6 +10,7 @@ import { SettingsMenu, Sidebar } from '@harnessio/ui/components' +import { useTranslation } from '@harnessio/ui/context' import { SidebarView } from '@harnessio/ui/views' import { useNav } from '../../components/stores/recent-pinned-nav-links.store' @@ -21,7 +22,8 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' const AppSideBar: FC<{ children: React.ReactNode }> = ({ children }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() + const { changeLanguage, i18n } = useTranslationStore() const { currentUser } = useAppContext() const { spaceId, repoId } = useParams() const selectedSpaceId = useSelectedSpaceId(spaceId) @@ -145,7 +147,8 @@ const AppSideBar: FC<{ children: React.ReactNode }> = ({ children }) => { pinnedMenuItems={pinnedMenu} handleChangePinnedMenuItem={handleChangePinnedMenuItem} handleRemoveRecentMenuItem={handleRemoveRecentMenuItem} - useTranslationStore={useTranslationStore} + changeLanguage={changeLanguage} + lang={i18n.language} /> diff --git a/apps/gitness/src/data/navbar-menu-data.ts b/apps/gitness/src/data/navbar-menu-data.ts index 1a1a15a143..65548d13db 100644 --- a/apps/gitness/src/data/navbar-menu-data.ts +++ b/apps/gitness/src/data/navbar-menu-data.ts @@ -1,11 +1,10 @@ -import { TFunction } from 'i18next' - import { MenuGroupType, MenuGroupTypes } from '@harnessio/ui/components' +import { TFunctionWithFallback } from '@harnessio/ui/context' import { RouteFunctionMap } from '../framework/routing/types' export type GetNavbarMenuDataParams = { - t: TFunction + t: TFunctionWithFallback routes: RouteFunctionMap spaceId?: string repoId?: string diff --git a/apps/gitness/src/data/pinned-items.ts b/apps/gitness/src/data/pinned-items.ts index 830d212826..e6091739a4 100644 --- a/apps/gitness/src/data/pinned-items.ts +++ b/apps/gitness/src/data/pinned-items.ts @@ -1,6 +1,5 @@ -import { TFunction } from 'i18next' - import { NavbarItemType } from '@harnessio/ui/components' +import { TFunctionWithFallback } from '@harnessio/ui/context' import { RouteFunctionMap } from '../framework/routing/types' @@ -9,7 +8,7 @@ export const getPinnedMenuItemsData = ({ spaceId, routes }: { - t: TFunction + t: TFunctionWithFallback routes: RouteFunctionMap spaceId?: string }): NavbarItemType[] => [ diff --git a/apps/gitness/src/framework/hooks/useLocationChange.tsx b/apps/gitness/src/framework/hooks/useLocationChange.tsx index 699bdcf8db..911109c768 100644 --- a/apps/gitness/src/framework/hooks/useLocationChange.tsx +++ b/apps/gitness/src/framework/hooks/useLocationChange.tsx @@ -1,9 +1,8 @@ import { useEffect, useMemo } from 'react' import { useLocation } from 'react-router-dom' -import { TFunction } from 'i18next' - import { MenuGroupType, NavbarItemType } from '@harnessio/ui/components' +import { TFunctionWithFallback } from '@harnessio/ui/context' import { GetNavbarMenuData } from '../../data/navbar-menu-data' import { useRoutes } from '../context/NavigationContext' @@ -13,7 +12,7 @@ const useLocationChange = ({ onRouteChange, getNavbarMenuData }: { - t: TFunction + t: TFunctionWithFallback onRouteChange: (item: NavbarItemType) => void getNavbarMenuData: GetNavbarMenuData }) => { diff --git a/apps/gitness/src/framework/hooks/usePageTitle.ts b/apps/gitness/src/framework/hooks/usePageTitle.ts index 83338d1a10..0a5d42e502 100644 --- a/apps/gitness/src/framework/hooks/usePageTitle.ts +++ b/apps/gitness/src/framework/hooks/usePageTitle.ts @@ -1,11 +1,12 @@ import { useEffect } from 'react' import { useMatches } from 'react-router-dom' -import { useTranslationStore } from '../../i18n/stores/i18n-store' +import { useTranslation } from '@harnessio/ui/context' + import { CustomHandle } from '../routing/types' const usePageTitle = () => { - const { t } = useTranslationStore() + const { t } = useTranslation() const matches = useMatches() useEffect(() => { diff --git a/apps/gitness/src/i18n/i18nAdapter.ts b/apps/gitness/src/i18n/i18nAdapter.ts new file mode 100644 index 0000000000..150d27cad0 --- /dev/null +++ b/apps/gitness/src/i18n/i18nAdapter.ts @@ -0,0 +1,12 @@ +import { TFunction } from 'i18next' + +import { TFunctionWithFallback } from '@harnessio/ui/context' + +export function createI18NextAdapter(i18nT: TFunction): TFunctionWithFallback { + return (key: string, fallback: string = '', substitutions?: Record): string => { + return i18nT(key, { + ...substitutions, + defaultValue: fallback + }) + } +} diff --git a/apps/gitness/src/i18n/stores/i18n-store.ts b/apps/gitness/src/i18n/stores/i18n-store.ts index ab65005f7d..42b89853b0 100644 --- a/apps/gitness/src/i18n/stores/i18n-store.ts +++ b/apps/gitness/src/i18n/stores/i18n-store.ts @@ -1,9 +1,14 @@ +import { TFunction } from 'i18next' import { create } from 'zustand' -import { TranslationStore } from '@harnessio/ui/views' - import i18n from '../i18n' +type TranslationStore = { + i18n: typeof i18n + t: TFunction + changeLanguage: (lng: string) => void +} + export const useTranslationStore = create(_set => ({ i18n, t: i18n.t.bind(i18n), diff --git a/apps/gitness/src/pages-v2/create-project.tsx b/apps/gitness/src/pages-v2/create-project.tsx index 81b511e438..2b1eae69c1 100644 --- a/apps/gitness/src/pages-v2/create-project.tsx +++ b/apps/gitness/src/pages-v2/create-project.tsx @@ -5,7 +5,6 @@ import { CreateProjectFields, CreateProjectPage } from '@harnessio/ui/views' import { useAppContext } from '../framework/context/AppContext' import { useRoutes } from '../framework/context/NavigationContext' -import { useTranslationStore } from '../i18n/stores/i18n-store' export const CreateProject = () => { const routes = useRoutes() @@ -33,7 +32,7 @@ export const CreateProject = () => { createSpace({ body: { identifier: formData.name, description: formData.description } }) } - const commonProps = { isLoading, error: error?.message, onFormSubmit: handleFormSubmit, useTranslationStore } + const commonProps = { isLoading, error: error?.message, onFormSubmit: handleFormSubmit } if (isAdditional) { return ( diff --git a/apps/gitness/src/pages-v2/landing-page-container.tsx b/apps/gitness/src/pages-v2/landing-page-container.tsx index bea6cc1038..5c5f5a48b2 100644 --- a/apps/gitness/src/pages-v2/landing-page-container.tsx +++ b/apps/gitness/src/pages-v2/landing-page-container.tsx @@ -2,7 +2,6 @@ import { LandingPageView } from '@harnessio/ui/views' import { useAppContext } from '../framework/context/AppContext' import { useRoutes } from '../framework/context/NavigationContext' -import { useTranslationStore } from '../i18n/stores/i18n-store' export const LandingPage = () => { const routes = useRoutes() @@ -11,11 +10,6 @@ export const LandingPage = () => { const getProjectPath = (spaceId?: string) => routes.toRepositories({ spaceId }) return ( - routes.toProjectCreate()} - /> + routes.toProjectCreate()} /> ) } diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx index 60bd5c2379..919380b371 100644 --- a/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx +++ b/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx @@ -9,7 +9,6 @@ import { } from '@harnessio/ui/views' import { useAppContext } from '../../framework/context/AppContext.tsx' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { useProfileSettingsStore } from './stores/profile-settings-store' export const SettingsProfileGeneralPage: FC = () => { @@ -73,7 +72,6 @@ export const SettingsProfileGeneralPage: FC = () => { <> { openAlertDeleteDialog={openAlertDeleteDialog} error={apiError} headers={headers} - useTranslationStore={useTranslationStore} isLoadingTokenList={isLoadingTokenList} isLoadingKeysList={isLoadingPublicKeys} /> @@ -225,14 +223,12 @@ export const SettingsProfileKeysPage = () => { error={apiError} isLoading={createTokenMutation.isLoading} useProfileSettingsStore={useProfileSettingsStore} - useTranslationStore={useTranslationStore} /> { deleteFn={alertParams?.type === 'key' ? handleDeletePublicKey : handleDeleteToken} error={apiError} isLoading={alertParams?.type === 'key' ? deletePublicKeyMutation.isLoading : deleteTokenMutation.isLoading} - useTranslationStore={useTranslationStore} {...alertParams} /> diff --git a/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx b/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx index 292e23746c..a8ccbfa84f 100644 --- a/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx +++ b/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx @@ -4,7 +4,6 @@ import { useSaveSpaceLabelMutation } from '@harnessio/code-service-client' import { CreateLabelFormFields, LabelFormPage } from '@harnessio/ui/views' import { useRoutes } from '../../../framework/context/NavigationContext' -import { useTranslationStore } from '../../../i18n/stores/i18n-store' import { PathParams } from '../../../RouteDefinitions' import { useLabelsStore } from '../stores/labels-store' import { useFillLabelStoreWithProjectLabelValuesData } from './hooks/use-fill-label-store-with-project-label-values-data' @@ -40,7 +39,6 @@ export const ProjectLabelFormContainer = () => { { <> { type="label" deleteFn={handleDeleteLabel} isLoading={isDeletingSpaceLabel} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/project/project-general-settings-container.tsx b/apps/gitness/src/pages-v2/project/project-general-settings-container.tsx index bf3ac31a82..0eb248245e 100644 --- a/apps/gitness/src/pages-v2/project/project-general-settings-container.tsx +++ b/apps/gitness/src/pages-v2/project/project-general-settings-container.tsx @@ -14,7 +14,6 @@ import { ProjectSettingsGeneralFields, ProjectSettingsGeneralPage } from '@harne import { useAppContext } from '../../framework/context/AppContext' import { useRoutes } from '../../framework/context/NavigationContext.tsx' import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam' -import { useTranslationStore } from '../../i18n/stores/i18n-store.ts' export const ProjectGeneralSettingsPageContainer = () => { const routes = useRoutes() @@ -77,7 +76,6 @@ export const ProjectGeneralSettingsPageContainer = () => { isUpdateSuccess={updateDescription.isSuccess} updateError={updateError} setOpenDeleteDialog={() => setOpenDeleteDialog(true)} - useTranslationStore={useTranslationStore} /> { error={deleteError} isLoading={isLoading} withForm - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/project/project-member-list.tsx b/apps/gitness/src/pages-v2/project/project-member-list.tsx index 76163962e3..177f51465e 100644 --- a/apps/gitness/src/pages-v2/project/project-member-list.tsx +++ b/apps/gitness/src/pages-v2/project/project-member-list.tsx @@ -18,7 +18,6 @@ import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam' import { useMFEContext } from '../../framework/hooks/useMFEContext' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { orderSortDate, PageResponseHeader } from '../../types' import { usePrincipalListStore } from '../account/stores/principal-list-store' import { useMemberListStore } from './stores/member-list-store' @@ -180,7 +179,6 @@ export function ProjectMemberListPage() { <> diff --git a/apps/gitness/src/pages-v2/project/project-rules-create-container.tsx b/apps/gitness/src/pages-v2/project/project-rules-create-container.tsx index 1439af7cb9..06af8cb651 100644 --- a/apps/gitness/src/pages-v2/project/project-rules-create-container.tsx +++ b/apps/gitness/src/pages-v2/project/project-rules-create-container.tsx @@ -8,6 +8,7 @@ import { useSpaceRuleGetQuery, useSpaceRuleUpdateMutation } from '@harnessio/code-service-client' +import { useTranslation } from '@harnessio/ui/context' import { PrincipalType } from '@harnessio/ui/types' import { BranchRulesActionType, @@ -19,13 +20,12 @@ import { import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam' import { useMFEContext } from '../../framework/hooks/useMFEContext' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { transformDataFromApi, transformFormOutput } from '../../utils/repo-branch-rules-utils' import { useBranchRulesStore } from '../repo/stores/repo-branch-rules-store' import { useProjectRulesStore } from './stores/project-rules-store' export const ProjectRulesCreateOrUpdateContainer = () => { - const { t } = useTranslationStore() + const { t } = useTranslation() const navigate = useNavigate() const spaceURL = useGetSpaceURLParam() @@ -199,7 +199,6 @@ export const ProjectRulesCreateOrUpdateContainer = () => { handleSelectChangeForRule={handleSelectChangeForRule} handleInputChange={handleInputChange} handleInitialRules={handleInitialRules} - useTranslationStore={useTranslationStore} setPrincipalsSearchQuery={setPrincipalsSearchQuery} principalsSearchQuery={principalsSearchQuery} isSubmitSuccess={isSubmitSuccess} diff --git a/apps/gitness/src/pages-v2/project/project-rules-list-container.tsx b/apps/gitness/src/pages-v2/project/project-rules-list-container.tsx index 410966cd85..862a90e291 100644 --- a/apps/gitness/src/pages-v2/project/project-rules-list-container.tsx +++ b/apps/gitness/src/pages-v2/project/project-rules-list-container.tsx @@ -11,7 +11,6 @@ import { ErrorTypes, ProjectRulesPage } from '@harnessio/ui/views' import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { getTotalRulesApplied } from '../../utils/repo-branch-rules-utils' import { useProjectRulesStore } from './stores/project-rules-store' @@ -93,7 +92,6 @@ export const ProjectRulesListContainer = () => { { { const isMFE = useIsMFE() @@ -11,7 +10,7 @@ export const ProjectSettingsLayout = () => { return ( <> - + diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-changes.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-changes.tsx index ba9b237755..118c7c1715 100644 --- a/apps/gitness/src/pages-v2/pull-request/pull-request-changes.tsx +++ b/apps/gitness/src/pages-v2/pull-request/pull-request-changes.tsx @@ -32,7 +32,6 @@ import CommitSuggestionsDialog from '../../components-v2/commit-suggestions-dial import { useAppContext } from '../../framework/context/AppContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useQueryState } from '../../framework/hooks/useQueryState' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { parseSpecificDiff } from '../../pages/pull-request/diff-utils' import { PullReqReviewDecision } from '../../pages/pull-request/types/types' import { changedFileId, DIFF2HTML_CONFIG } from '../../pages/pull-request/utils' @@ -428,7 +427,6 @@ export default function PullRequestChanges() { `${routes.toRepoFiles({ spaceId, repoId })}/${sha}`} toCommitDetails={({ sha }: { sha: string }) => routes.toRepoCommitDetails({ spaceId, repoId, commitSHA: sha })} usePullRequestCommitsStore={usePullRequestCommitsStore} - useTranslationStore={useTranslationStore} /> ) } diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx index f0bca99703..46de03a2a7 100644 --- a/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx +++ b/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx @@ -38,7 +38,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useMFEContext } from '../../framework/hooks/useMFEContext' import { useQueryState } from '../../framework/hooks/useQueryState' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { parseSpecificDiff } from '../../pages/pull-request/diff-utils' import { changesInfoAtom, DiffFileEntry } from '../../pages/pull-request/types/types' import { changedFileId, DIFF2HTML_CONFIG, normalizeGitFilePath } from '../../pages/pull-request/utils' @@ -487,7 +486,6 @@ export const CreatePullRequest = () => { isSuccess={createPullRequestMutation.isSuccess} onFormDraftSubmit={onDraftSubmit} mergeability={mergeability} - useTranslationStore={useTranslationStore} prBranchCombinationExists={prBranchCombinationExists} diffData={ diffStats?.files_changed || 0 diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx index 61b1dd643b..79186c7994 100644 --- a/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx +++ b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx @@ -43,7 +43,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useMFEContext } from '../../framework/hooks/useMFEContext' import { useQueryState } from '../../framework/hooks/useQueryState' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { CodeOwnerReqDecision } from '../../types' import { filenameToLanguage } from '../../utils/git-utils' @@ -774,7 +773,6 @@ export default function PullRequestConversationPage() { { return ( { if (filterValues === 'label_by') { setPopulateLabelStore(true) diff --git a/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx b/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx index de6f9f152c..8b1515c09f 100644 --- a/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx +++ b/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx @@ -4,7 +4,6 @@ import { useSaveRepoLabelMutation } from '@harnessio/code-service-client' import { CreateLabelFormFields, LabelFormPage } from '@harnessio/ui/views' import { useRoutes } from '../../../framework/context/NavigationContext' -import { useTranslationStore } from '../../../i18n/stores/i18n-store' import { PathParams } from '../../../RouteDefinitions' import { useLabelsStore } from '../../project/stores/labels-store' import { usePopulateLabelStore } from './hooks/use-populate-label-store' @@ -34,7 +33,6 @@ export const RepoLabelFormContainer = () => { { <> { type="label" deleteFn={handleDeleteLabel} isLoading={isDeletingRepoLabel || isDeletingSpaceLabel} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx b/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx index 29cb4af4a6..0ecfcf1826 100644 --- a/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx @@ -18,7 +18,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { orderSortDate, PageResponseHeader } from '../../types' import { useRepoBranchesStore } from './stores/repo-branches-store' @@ -179,7 +178,6 @@ export function RepoBranchesListPage() { isCreatingBranch={isCreatingBranch} onSubmit={onSubmit} useRepoBranchesStore={useRepoBranchesStore} - useTranslationStore={useTranslationStore} isCreateBranchDialogOpen={isCreateBranchDialogOpen} setCreateBranchDialogOpen={setCreateBranchDialogOpen} searchQuery={query} @@ -212,7 +210,6 @@ export function RepoBranchesListPage() { type="branch" identifier={deleteBranchName ?? undefined} isLoading={isDeletingBranch} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/repo/repo-branch-rules-container.tsx b/apps/gitness/src/pages-v2/repo/repo-branch-rules-container.tsx index bd9c210c57..fea6db2f33 100644 --- a/apps/gitness/src/pages-v2/repo/repo-branch-rules-container.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-branch-rules-container.tsx @@ -9,6 +9,7 @@ import { useRepoRuleUpdateMutation } from '@harnessio/code-service-client' import { SkeletonForm } from '@harnessio/ui/components' +import { useTranslation } from '@harnessio/ui/context' import { PrincipalType } from '@harnessio/ui/types' import { BranchRulesActionType, @@ -23,14 +24,13 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoId } from '../../framework/hooks/useGetRepoId' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useMFEContext } from '../../framework/hooks/useMFEContext' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { transformFormOutput } from '../../utils/repo-branch-rules-utils' import { useBranchRulesStore } from './stores/repo-branch-rules-store' import { useRepoRulesStore } from './stores/repo-settings-store' export const RepoBranchSettingsRulesPageContainer = () => { - const { t } = useTranslationStore() + const { t } = useTranslation() const routes = useRoutes() const navigate = useNavigate() const repoRef = useGetRepoRef() @@ -203,7 +203,7 @@ export const RepoBranchSettingsRulesPageContainer = () => { } if (!!identifier && !!fetchRuleError) { - return + return } return ( @@ -218,7 +218,6 @@ export const RepoBranchSettingsRulesPageContainer = () => { handleSelectChangeForRule={handleSelectChangeForRule} handleInputChange={handleInputChange} handleInitialRules={handleInitialRules} - useTranslationStore={useTranslationStore} setPrincipalsSearchQuery={setPrincipalsSearchQuery} principalsSearchQuery={principalsSearchQuery} isSubmitSuccess={isSubmitSuccess} diff --git a/apps/gitness/src/pages-v2/repo/repo-code.tsx b/apps/gitness/src/pages-v2/repo/repo-code.tsx index 6d1a285e99..a00bfec6bc 100644 --- a/apps/gitness/src/pages-v2/repo/repo-code.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-code.tsx @@ -16,7 +16,6 @@ import { FileEditor } from '../../components-v2/file-editor' import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import useCodePathDetails from '../../hooks/useCodePathDetails' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { timeAgoFromISOTime } from '../../pages/pipeline-edit/utils/time-utils' import { sortFilesByType } from '../../utils/common-utils' import { FILE_SEPERATOR, getTrimmedSha, normalizeGitRef } from '../../utils/git-utils' @@ -198,7 +197,6 @@ export const RepoCode = () => { isDir={repoDetails?.type === 'dir'} isShowSummary={!!repoEntryPathToFileTypeMap.size} latestFile={latestFiles} - useTranslationStore={useTranslationStore} pathNewFile={pathToNewFile} // TODO: add correct path to Upload files page pathUploadFiles="/upload-file" diff --git a/apps/gitness/src/pages-v2/repo/repo-commit-details-diff.tsx b/apps/gitness/src/pages-v2/repo/repo-commit-details-diff.tsx index 39ba853b4d..d77b37b293 100644 --- a/apps/gitness/src/pages-v2/repo/repo-commit-details-diff.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-commit-details-diff.tsx @@ -15,7 +15,6 @@ import { CommitDiff, CommitSidebar } from '@harnessio/ui/views' import Explorer from '../../components/FileExplorer' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import useCodePathDetails from '../../hooks/useCodePathDetails' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { parseSpecificDiff } from '../../pages/pull-request/diff-utils' import { PathParams } from '../../RouteDefinitions' import { normalizeGitRef } from '../../utils/git-utils' @@ -100,12 +99,12 @@ export const CommitDiffContainer = ({ showSidebar = true }: { showSidebar?: bool return ( <> {showSidebar && ( - {}} filesList={filesList}> + {}} filesList={filesList}> {!!repoDetails?.body?.content?.entries?.length && } )} - + ) } diff --git a/apps/gitness/src/pages-v2/repo/repo-commit-details.tsx b/apps/gitness/src/pages-v2/repo/repo-commit-details.tsx index 39d8e8d0e7..8827b61882 100644 --- a/apps/gitness/src/pages-v2/repo/repo-commit-details.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-commit-details.tsx @@ -6,7 +6,6 @@ import { RepoCommitDetailsView } from '@harnessio/ui/views' import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { useCommitDetailsStore } from './stores/commit-details-store' @@ -32,7 +31,6 @@ export default function RepoCommitDetailsPage({ showSidebar = true }: { showSide toCommitDetails={({ sha }: { sha: string }) => routes.toRepoCommitDetails({ spaceId, repoId, commitSHA: sha })} toCode={({ sha }: { sha: string }) => `${routes.toRepoFiles({ spaceId, repoId })}/${sha}`} useCommitDetailsStore={useCommitDetailsStore} - useTranslationStore={useTranslationStore} showSidebar={showSidebar} /> ) diff --git a/apps/gitness/src/pages-v2/repo/repo-commits.tsx b/apps/gitness/src/pages-v2/repo/repo-commits.tsx index 66d76e0f8e..0e3ad1df14 100644 --- a/apps/gitness/src/pages-v2/repo/repo-commits.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-commits.tsx @@ -8,7 +8,6 @@ import { BranchSelectorListItem, BranchSelectorTab, RepoCommitsView } from '@har import { BranchSelectorContainer } from '../../components-v2/branch-selector-container' import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { PageResponseHeader } from '../../types' import { normalizeGitRef, REFS_TAGS_PREFIX } from '../../utils/git-utils' @@ -89,7 +88,6 @@ export default function RepoCommitsPage() { setPage={setPage} xNextPage={xNextPage} xPrevPage={xPrevPage} - useTranslationStore={useTranslationStore} renderProp={() => ( { @@ -64,7 +63,6 @@ export const CreateRepo = () => { isSuccess={isSuccess} gitIgnoreOptions={gitIgnoreOptions} licenseOptions={licenseOptions} - useTranslationStore={useTranslationStore} apiError={error?.message?.toString()} /> diff --git a/apps/gitness/src/pages-v2/repo/repo-execution-list.tsx b/apps/gitness/src/pages-v2/repo/repo-execution-list.tsx index 3959a59004..5165d09de6 100644 --- a/apps/gitness/src/pages-v2/repo/repo-execution-list.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-execution-list.tsx @@ -10,7 +10,6 @@ import { ExecutionListPage, IExecution } from '@harnessio/ui/views' import { LinkComponent } from '../../components/LinkComponent' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { parseAsInteger, useQueryState } from '../../framework/hooks/useQueryState' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { PageResponseHeader } from '../../types' import { getExecutionStatus } from '../../utils/execution-utils' @@ -58,7 +57,6 @@ export default function RepoExecutionListPage() { <> { onFormCancel={onCancel} isLoading={isLoading} apiErrorsValue={error?.message?.toString()} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/repo/repo-layout.tsx b/apps/gitness/src/pages-v2/repo/repo-layout.tsx index dfa0d76a21..3b35f12a24 100644 --- a/apps/gitness/src/pages-v2/repo/repo-layout.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-layout.tsx @@ -1,18 +1,23 @@ import { Outlet } from 'react-router-dom' +import { useFindRepositoryQuery } from '@harnessio/code-service-client' import { RepoSubheader } from '@harnessio/ui/components' -import { SubHeaderWrapper } from '@harnessio/ui/views' +import { RepoHeader, SubHeaderWrapper } from '@harnessio/ui/views' +import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useIsMFE } from '../../framework/hooks/useIsMFE' -import { useTranslationStore } from '../../i18n/stores/i18n-store' const RepoLayout = () => { const isMFE = useIsMFE() + const repoRef = useGetRepoRef() + + const { data: { body: repoData } = {}, isLoading: isLoadingRepoData } = useFindRepositoryQuery({ repo_ref: repoRef }) return ( <> + - + diff --git a/apps/gitness/src/pages-v2/repo/repo-list.tsx b/apps/gitness/src/pages-v2/repo/repo-list.tsx index f9035802ef..ad15329ab7 100644 --- a/apps/gitness/src/pages-v2/repo/repo-list.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-list.tsx @@ -9,7 +9,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { PageResponseHeader } from '../../types' import { useRepoStore } from './stores/repo-list-store' @@ -103,7 +102,6 @@ export default function ReposListPage() { return ( { loadingStates={loadingStates} isRepoUpdateSuccess={updatePublicAccessSuccess || updateDescriptionSuccess || updateBranchSuccess} useRepoRulesStore={useRepoRulesStore} - useTranslationStore={useTranslationStore} handleRuleClick={handleRuleClick} openRulesAlertDeleteDialog={openRulesAlertDeleteDialog} openRepoAlertDeleteDialog={openRepoAlertDeleteDialog} @@ -276,7 +274,6 @@ export const RepoSettingsGeneralPageContainer = () => { {
{!repository?.is_empty && ( setSuccessTokenDialog(false)} navigateToManageToken={() => (isMFE ? customUtils.navigateToUserProfile() : navigate(routes.toProfileKeys()))} tokenData={createdTokenData} - useTranslationStore={useTranslationStore} /> )} diff --git a/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx b/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx index 1c5b4c9041..dd6a5fca72 100644 --- a/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx +++ b/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx @@ -23,7 +23,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { PageResponseHeader } from '../../types' import { useRepoTagsStore } from './stores/repo-tags-store' @@ -133,7 +132,6 @@ export const RepoTagsListContainer = () => { return ( <> { setOpenCreateBranchDialog(true) @@ -151,7 +149,6 @@ export const RepoTagsListContainer = () => { toCommitDetails={({ sha }: { sha: string }) => routes.toRepoCommitDetails({ spaceId, repoId, commitSHA: sha })} /> setOpenCreateTagDialog(false)} onSubmit={onSubmit} @@ -180,7 +177,6 @@ export const RepoTagsListContainer = () => { type="tag" identifier={deleteTagName ?? undefined} isLoading={isDeletingTag} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/repo/stores/repo-branch-rules-store.tsx b/apps/gitness/src/pages-v2/repo/stores/repo-branch-rules-store.tsx index b9116e5ce6..1d3680f75c 100644 --- a/apps/gitness/src/pages-v2/repo/stores/repo-branch-rules-store.tsx +++ b/apps/gitness/src/pages-v2/repo/stores/repo-branch-rules-store.tsx @@ -3,9 +3,12 @@ import { create } from 'zustand' import { BranchRulesAction, getBranchRules, IBranchRulesStore, Rule } from '@harnessio/ui/views' import i18n from '../../../i18n/i18n' +import { createI18NextAdapter } from '../../../i18n/i18nAdapter' import { branchSettingsReducer } from '../reducers/repo-branch-rules-reducer' -const branchRules = getBranchRules(i18n.t) +const tFunc = createI18NextAdapter(i18n.t) + +const branchRules = getBranchRules(tFunc) const initialState: Rule[] = branchRules.map(rule => ({ id: rule.id, diff --git a/apps/gitness/src/pages-v2/user-management/user-management-container.tsx b/apps/gitness/src/pages-v2/user-management/user-management-container.tsx index 6d41a8180c..97b3a2c8b7 100644 --- a/apps/gitness/src/pages-v2/user-management/user-management-container.tsx +++ b/apps/gitness/src/pages-v2/user-management/user-management-container.tsx @@ -13,7 +13,6 @@ import { ICreateUserData, IUpdateUserData, UserManagementPage } from '@harnessio import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { useAdminListUsersStore } from './stores/admin-list-store' export const UserManagementPageContainer = () => { @@ -171,7 +170,6 @@ export const UserManagementPageContainer = () => { <> { return } - if (!!webhookId && !webhookData) - return + if (!!webhookId && !webhookData) return return ( <> @@ -143,7 +141,6 @@ export const CreateWebhookContainer = () => { apiError={apiError} isLoading={creatingWebHook || updatingWebHook} useWebhookStore={useWebhookStore} - useTranslationStore={useTranslationStore} /> ) diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-execution-details-container.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-execution-details-container.tsx index 350f9144f6..5e1b5657aa 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-execution-details-container.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-execution-details-container.tsx @@ -9,7 +9,6 @@ import { RepoWebhookExecutionDetailsPage, WebhookExecutionType } from '@harnessi import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { useWebhookStore } from './stores/webhook-store' @@ -63,7 +62,6 @@ export const WebhookExecutionDetailsContainer = () => { return ( diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx index 762255d6d2..827eeeb573 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx @@ -7,7 +7,6 @@ import { RepoWebhookExecutionsPage, WebhookExecutionType } from '@harnessio/ui/v import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { useWebhookStore } from './stores/webhook-store' @@ -42,7 +41,6 @@ export const WebhookExecutionsContainer = () => { return ( routes.toRepoWebhooks({ webhookId })} repo_ref={repo_ref} diff --git a/apps/gitness/src/pages-v2/webhooks/webhook-list.tsx b/apps/gitness/src/pages-v2/webhooks/webhook-list.tsx index b2f1bcfd1d..bc7e37c832 100644 --- a/apps/gitness/src/pages-v2/webhooks/webhook-list.tsx +++ b/apps/gitness/src/pages-v2/webhooks/webhook-list.tsx @@ -17,7 +17,6 @@ import { useRoutes } from '../../framework/context/NavigationContext' import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath' import { useQueryState } from '../../framework/hooks/useQueryState' import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store' -import { useTranslationStore } from '../../i18n/stores/i18n-store' import { PathParams } from '../../RouteDefinitions' import { getErrorMessage } from '../../utils/error-utils' import { useWebhookStore } from './stores/webhook-store' @@ -119,7 +118,6 @@ export default function WebhookListPage() { <> ) diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index af371dfa7c..862e34b2ab 100644 --- a/apps/gitness/src/routes.tsx +++ b/apps/gitness/src/routes.tsx @@ -16,7 +16,6 @@ import { AppProvider } from './framework/context/AppContext' import { AppRouterProvider } from './framework/context/AppRouterProvider' import { ExplorerPathsProvider } from './framework/context/ExplorerPathsContext' import { CustomRouteObject, RouteConstants } from './framework/routing/types' -import { useTranslationStore } from './i18n/stores/i18n-store' import { CreateProject } from './pages-v2/create-project' import { LandingPage } from './pages-v2/landing-page-container' import { Logout } from './pages-v2/logout' @@ -450,7 +449,7 @@ export const repoRoutes: CustomRouteObject[] = [ }, { path: 'settings', - element: , + element: , handle: { breadcrumb: () => {Page.Settings}, pageTitle: Page.Settings @@ -557,7 +556,7 @@ export const repoRoutes: CustomRouteObject[] = [ { path: 'settings/webhooks/:webhookId', - element: , + element: , children: [ { index: true, @@ -1081,7 +1080,7 @@ export const routes: CustomRouteObject[] = [ }, { path: 'profile-settings', - element: , + element: , handle: { breadcrumb: () => ( <> diff --git a/apps/portal/src/components/docs-page/example.tsx b/apps/portal/src/components/docs-page/example.tsx index 57e72d78b0..c335a347c6 100644 --- a/apps/portal/src/components/docs-page/example.tsx +++ b/apps/portal/src/components/docs-page/example.tsx @@ -7,7 +7,10 @@ import { } from "react"; import { LiveEditor, LivePreview, LiveProvider } from "react-live"; import { Icon, Tooltip } from "@harnessio/ui/components"; -import { RouterContextProvider } from "@harnessio/ui/context"; +import { + RouterContextProvider, + TranslationProvider, +} from "@harnessio/ui/context"; import ExampleLayout from "./example-layout"; import { themes } from "prism-react-renderer"; import { @@ -61,9 +64,11 @@ const Example: FC = ({ code, scope }) => { path: "*", element: ( - - - + + + + + ), }, diff --git a/apps/portal/src/content/docs/components/layout-v2.mdx b/apps/portal/src/content/docs/components/layout-v2.mdx new file mode 100644 index 0000000000..dd92bb77c5 --- /dev/null +++ b/apps/portal/src/content/docs/components/layout-v2.mdx @@ -0,0 +1,329 @@ +--- +title: Layout V2 +description: Flexible layout components using Tailwind CSS +beta: true +--- + +import { DocsPage } from "../../../components/docs-page"; + +## Overview + +The LayoutV2 component provides a set of flexible layout primitives for building consistent UI layouts. It includes Grid, Flex, Horizontal, and Vertical components with a clean, type-safe API. + +## Flex Component + +The Flex component is a versatile layout container that allows you to arrange items in a row or column with various alignment and spacing options. + +### Basic Flex (Row Direction) + + + + Item 1 + + + Item 2 + + + Item 3 + +`} +/> + +### Flex with Column Direction + + + + Item 1 + + + Item 2 + + + Item 3 + +`} +/> + +### Flex with Alignment and Justification + + + + Start + + + Center + + + End + +`} +/> + +### Flex with Gap + + + + Item 1 + + + Item 2 + + + Item 3 + +`} +/> + +### Flex with Wrap + + + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + +`} +/> + +### Flex with Custom Element + + + I'm in a span! +`} +/> + +## Grid Component + +The Grid component provides a powerful way to create grid layouts with precise control over columns, rows, and spacing. + +### Basic Grid with Equal Columns + + + + Column 1 + + + Column 2 + + + Column 3 + + + Column 4 + +`} +/> + +### Grid with Different Column Sizes + + + + 2fr + + + 1fr + + + 1fr + +`} +/> + +### Grid with Defined Rows + + + + Row 1, Col 1 + + + Row 1, Col 2 + + + Row 2, Col 1 + + + Row 2, Col 2 + +`} +/> + +### Grid with Numeric Columns + + + + Column 1 + + + Column 2 + + + Column 3 + + + Column 4 + + + Column 5 + + + Column 6 + +`} +/> + +### Grid with Numeric Rows and Columns + + + + Row 1, Col 1 + + + Row 1, Col 2 + + + Row 2, Col 1 + + + Row 2, Col 2 + +`} +/> + +### Grid with Alignment and Justification + + + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + +`} +/> + +## Horizontal Component + +The Horizontal component is a convenient wrapper around Flex that's pre-configured for row layouts with consistent spacing options. + +### Horizontal with Alignment + + + + Taller + + + Normal + + + Tallest + +`} +/> + +## Vertical Component + +The Vertical component is a convenient wrapper around Flex that's pre-configured for column layouts with consistent spacing options. + +### Vertical with Alignment + + + + Narrower + + + Wider + + + Narrowest + +`} +/> + +## Two-Column Layout + + + + + Main Content +

This is the main content area of the dashboard.

+ + + + + Sidebar +

This is the sidebar with additional information.

+ + +`} +/> diff --git a/apps/portal/src/content/docs/components/pagination.mdx b/apps/portal/src/content/docs/components/pagination.mdx index 8ed7b7a82e..a3aaf4bceb 100644 --- a/apps/portal/src/content/docs/components/pagination.mdx +++ b/apps/portal/src/content/docs/components/pagination.mdx @@ -20,7 +20,6 @@ import { DocsPage } from "@/components/docs-page"; { - const t = (key, fallback) => fallback || key const [currentPage, setCurrentPage] = React.useState(1) return ( @@ -30,30 +29,6 @@ import { DocsPage } from "@/components/docs-page"; pageSize={10} currentPage={currentPage} goToPage={setCurrentPage} - t={t} - /> -
- ) - -}`} /> - -### Determinate Pagination with Truncation - - { - const t = (key, fallback) => fallback || key - const [currentPage, setCurrentPage] = React.useState(1) - - return ( -
-
) @@ -65,7 +40,6 @@ import { DocsPage } from "@/components/docs-page"; { - const t = (key, fallback) => fallback || key const [currentPage, setCurrentPage] = React.useState(1) return ( @@ -76,7 +50,6 @@ import { DocsPage } from "@/components/docs-page"; currentPage={currentPage} goToPage={setCurrentPage} hidePageNumbers - t={t} />
) @@ -88,7 +61,6 @@ import { DocsPage } from "@/components/docs-page"; { - const t = (key, fallback) => fallback || key const [currentPage, setCurrentPage] = React.useState(1) const getPageLink = (page) => { @@ -102,7 +74,6 @@ import { DocsPage } from "@/components/docs-page"; pageSize={10} currentPage={currentPage} getPageLink={getPageLink} - t={t} />
) @@ -114,7 +85,6 @@ import { DocsPage } from "@/components/docs-page"; { - const t = (key, fallback) => fallback || key const [currentPage, setCurrentPage] = React.useState(1) const getPrevPageLink = () => { @@ -133,7 +103,6 @@ import { DocsPage } from "@/components/docs-page"; hasPrevious={currentPage > 1} getPrevPageLink={getPrevPageLink} getNextPageLink={getNextPageLink} - t={t} />
) @@ -145,7 +114,6 @@ import { DocsPage } from "@/components/docs-page"; { - const t = (key, fallback) => fallback || key const [currentPage, setCurrentPage] = React.useState(1) const onPrevious = () => { @@ -164,7 +132,6 @@ import { DocsPage } from "@/components/docs-page"; hasPrevious={currentPage > 1} onPrevious={onPrevious} onNext={onNext} - t={t} /> ) @@ -181,7 +148,6 @@ import { Pagination } from '@harnessio/ui/components' //... const [currentPage, setCurrentPage] = useState(1) -const { t } = useTranslationStore() return ( ) ``` @@ -202,7 +167,6 @@ import { Pagination } from '@harnessio/ui/components' //... const [currentPage, setCurrentPage] = useState(1) -const { t } = useTranslationStore() return ( setCurrentPage(currentPage - 1)} onNext={() => setCurrentPage(currentPage + 1)} - t={t} /> ) ``` @@ -237,14 +200,6 @@ return ( required: false, value: "string", }, - { - name: "truncateLimit", - description: - "Maximum number of page links to show before truncating with ellipses", - required: false, - value: "number", - defaultValue: "4", - }, // Determinate pagination mode props { name: "indeterminate", diff --git a/apps/portal/src/content/docs/components/sidebar.mdx b/apps/portal/src/content/docs/components/sidebar.mdx index cdbdf4bb19..1b054e0a13 100644 --- a/apps/portal/src/content/docs/components/sidebar.mdx +++ b/apps/portal/src/content/docs/components/sidebar.mdx @@ -18,7 +18,7 @@ The `Sidebar` component provides a responsive, collapsible navigation interface - } /> + } /> @@ -82,7 +82,6 @@ The `Sidebar` component provides a responsive, collapsible navigation interface openThemeDialog={() => {}} openLanguageDialog={() => {}} handleLogOut={() => {}} - t={t} /> diff --git a/packages/core-design-system/design-tokens/$themes.json b/packages/core-design-system/design-tokens/$themes.json index 3b20cc914e..0a94055682 100644 --- a/packages/core-design-system/design-tokens/$themes.json +++ b/packages/core-design-system/design-tokens/$themes.json @@ -434,151 +434,6 @@ "pink.1000": "S:1c3d86595382b4c66d7fc80a9ee2f2f84f907954," }, "$figmaVariableReferences": { - "tracking.tighter": "a612b42a1649449f70026a485256dbbf92da6d92", - "tracking.tight": "7a7825cb0165113837002059584dbce83e75a03f", - "tracking.normal": "167b6fa66855f1546669aff796686de35514edd0", - "tracking.wide": "34601988c203609e80fad6e8391458c47385e386", - "tracking.wider": "14e61a1989be947ad3fe6136353654d98871dc90", - "tracking.widest": "0b2e216ff832f9bf7b96e8f222ea8f38b04a6a27", - "fontWeight.default.normal.100": "5b09487638f3ccf3a4a7712ca2283b4818a41f28", - "fontWeight.default.normal.200": "fc6532ae463eb44ec62b89697d1770070585dcb2", - "fontWeight.default.normal.300": "2a00b61d9e090f7d69fff8c59d50f1f2f31e9c6f", - "fontWeight.default.normal.400": "a9fb4a40a31f7264e888c758f0c41e821ca64ed5", - "fontWeight.default.normal.500": "f1c8211b31501f08aebfa03feb5cb23e64d84383", - "fontWeight.default.normal.600": "9f72ba08a4eef21b705744ff948adb815552f31c", - "fontWeight.default.normal.700": "65f437db2221dd868421efc11be47197919f4d7d", - "fontWeight.default.normal.800": "4cd4610b5bc9c9399265e2052ea540b0a611f893", - "fontWeight.default.normal.900": "61db8dba465a957b970ce724962ed5d7ba53dbe4", - "fontWeight.default.italic.100": "49b3a69eb9896949fb6949a77227395c89db4993", - "fontWeight.default.italic.200": "808f6f0d72e6bfcb83b90a8cb3863b1a46d311ce", - "fontWeight.default.italic.300": "9cfefc39c3766d91382ca3fa060312da79adce54", - "fontWeight.default.italic.400": "c61147ebfaa86b2db0689e4fb43e8dc3f64b6111", - "fontWeight.default.italic.500": "9f47c20a77a2dbf36bcd4a3a1a7dd482c421fd20", - "fontWeight.default.italic.600": "41778d3acc38b2010cce4a0aadb90b714d91d533", - "fontWeight.default.italic.700": "43351d6b32a5db2bf412a96b802d552427beaa1f", - "fontWeight.default.italic.800": "eda335db87b371f9915196f9446948a792541dbd", - "fontWeight.default.italic.900": "ba03f1879f7c8fd9b9ff8bf07868b20a0d898245", - "fontWeight.mono.normal.100": "08b6a758e55b545792206fb57555c8d4b487f8f7", - "fontWeight.mono.normal.200": "96e84293221cdf7f88111b1cd55331de92078b22", - "fontWeight.mono.normal.300": "603909a040a23ba2e5ba9c706fa810420de0994c", - "fontWeight.mono.normal.400": "36794dc06d68b3dad63d9498d9e293d412bf8ca2", - "fontWeight.mono.normal.500": "641ef4178f648003d0b5c9c0469baa1dce6bcff5", - "fontWeight.mono.normal.700": "4cf0b1b2ea34b1df18999bade9c2af3a0ef6b0d2", - "fontWeight.mono.normal.800": "dc12775dcfa08d98fbb5296e62b582108707ef32", - "fontWeight.mono.italic.100": "63c01eccb265182f72e2a3142c59a6b696809700", - "fontWeight.mono.italic.200": "90ea2bf0e5904f16625f98a8ea62f78a8974380d", - "fontWeight.mono.italic.300": "33dbd3e167f4bd43a1d4adb5ad310d609d31a10d", - "fontWeight.mono.italic.400": "ecc3db60b0207b50c7fcce4e292625738d8d6537", - "fontWeight.mono.italic.500": "521eb13936369a6dc2340374df7abb5e657fefde", - "fontWeight.mono.italic.700": "f57d23d3402767dd602e9363428d91bc7cd42423", - "fontWeight.mono.italic.800": "f4a0edc9d3e9422dc5f7b8a16c7e0612ae476088", - "fontFamily.default": "1e95627ed050d7022c04d9c054649d2660d7a1b3", - "fontFamily.mono": "6e2cde7653fb49cb103b1bece4149cf46bb60c98", - "fontSize.0": "2fdbc7bd30ffd310af3294f2e1c9278f7bbd9708", - "fontSize.1": "9b079ccd31a0d3ba8e47e486c3e91684be715cf3", - "fontSize.2": "c60eea6bcf5ccdc456aacedbed9caeb54234e882", - "fontSize.3": "8f1921cef9703056dbb0471b0584137d0335fab1", - "fontSize.4": "f363564938b5d462f674be889215b65c77331eaa", - "fontSize.5": "9d58f7c69b9640d0e2ab69d9e52a1357ef7684cc", - "fontSize.6": "0c46eab47356e0e65364de4c8fd8836596afa876", - "fontSize.7": "cd5b388000487b8c6a4f6b8f77b029ea802c6293", - "fontSize.8": "f87dc7b91d96c1c84fcd3264928c351414812c93", - "fontSize.9": "3c92f584d882a663201c735135e788f105248fd1", - "fontSize.10": "22991cf214dd11386ae4c8825dfc006462b041e5", - "fontSize.11": "fb4b962d1764eda4a99d913c195974713cb6d0e6", - "fontSize.12": "2030b054d89c81e3056a21bb2e43ed1d39b882fb", - "fontSize.13": "1dbd6d33549b194b081294584ae84de7d8eca82b", - "fontSize.min": "82f0a69fbacceb3e2a8a185a09b5e24176918fe6", - "lineHeight.0.none": "877fc4070c18dcfe17aa98e6b6c29e8e09dcb4ba", - "lineHeight.0.tight": "5cdb69f84f45fbe99cdc723d58e7508dc6ca139a", - "lineHeight.0.snug": "a91aa14e73b80f05e756b8cfcff118ea26002fdd", - "lineHeight.0.normal": "92bb170bafdbb832e022db932285af4ae8c61a3a", - "lineHeight.0.relaxed": "8c52d96f9b6f745afd6d10ac5e5c637186646f5f", - "lineHeight.0.loose": "e0bf48c75b13a19878762704143c2c9ecbb5d844", - "lineHeight.1.none": "6414568fb42e657038f15f51cdf8063de2df16a1", - "lineHeight.1.tight": "988dae48ee4c4d7cc357d6d2d0cf3aff692fb8de", - "lineHeight.1.snug": "3f2b1de4fb3922051d115752e413be9ffc1c5a94", - "lineHeight.1.normal": "5f246172042814af4dd0bceda7b6be257b559fd1", - "lineHeight.1.relaxed": "04b628bf5e2a99ce4f000231d61f90df2261bc16", - "lineHeight.1.loose": "6f0ad4cd88300f93e83340b382cd60afcd9e64bb", - "lineHeight.2.none": "a3ec2ee9d928aad207f2591ee2aafa11eb0c5994", - "lineHeight.2.tight": "dcfe57d2487f85facbe2c571e1d808611f275963", - "lineHeight.2.snug": "35c9d6712ee81113e0afd41ffd50315a2609296f", - "lineHeight.2.normal": "166137f14f3e9ef65385e5c1c34650d2a3dcc0be", - "lineHeight.2.relaxed": "b60d550d3359dfa124049a602d1e991637a0a63b", - "lineHeight.2.loose": "25f359bcc36db1ab385781708bf3e29bf19c0fb6", - "lineHeight.3.none": "587310dd45a3d1ca5ab1b282d0bab5f851f22b21", - "lineHeight.3.tight": "44d7e107df1f1cb6c513c6068a07479e120642e4", - "lineHeight.3.snug": "b472e8557cc6d47ab5bc58e313ae21996167d3e7", - "lineHeight.3.normal": "995546a4d31a494e604b32e3d9e24232b08c8804", - "lineHeight.3.relaxed": "98269aed2541813458513b357083ce5bce728496", - "lineHeight.3.loose": "6b5137db8104038dfaad63b8d4b257baf6a6e9fe", - "lineHeight.4.none": "a6d9cab5e41bceba1d3e5275fcf2f62393a2415e", - "lineHeight.4.tight": "6f564fb09f0033bf9bc893ce560cf357acbc3f0d", - "lineHeight.4.snug": "c4b0fe3ba0f86a29e3d6b2dd283c00c46eda79ce", - "lineHeight.4.normal": "6f299744c220a06e3115ce0353528773e54b1407", - "lineHeight.4.relaxed": "ca2eba573e333ba3df195ba689c990a0dbf5596e", - "lineHeight.4.loose": "501f4310e23276e43a2981d52de016d4f53b8c63", - "lineHeight.5.none": "2a7d7b4e1e0c43c332c208e2c33735c6e91ffb56", - "lineHeight.5.tight": "8d8f16a259d7cfc76d607d5e375234f2915b8a5e", - "lineHeight.5.snug": "20c52c19148a32d34efe8e2cf3d7ef2f1dafd9b2", - "lineHeight.5.normal": "4e648d71e48f9d7444cda778095e5c8a7d6e061b", - "lineHeight.5.relaxed": "628e83c3a41d1d4acf1435ca9575b550056a8ed9", - "lineHeight.5.loose": "b2649f5330f86315c9bfb83fac8dbf17bb91fa85", - "lineHeight.6.none": "01d06e566a3ca852f26a98f6df52da90c2e6e641", - "lineHeight.6.tight": "f32433bfb3a15fdb025363c9a6bdf744eaa7b115", - "lineHeight.6.snug": "71cfaa2c78d2f6735beb0bf274fe9dc62a66062d", - "lineHeight.6.normal": "40bca5a3e15543370314a60e7170908d2988f187", - "lineHeight.6.relaxed": "e2d6a413a84a733c9647fa781eb9b7eb2ef3aa7f", - "lineHeight.6.loose": "e7e4d18d20da50de7f92d5c8221d646532aa2060", - "lineHeight.7.none": "a32ea6211b23820c38e7e629345d5608891eceb5", - "lineHeight.7.tight": "f4fefcbf2ba7cd0207c599d7b7c000adc1a92a7f", - "lineHeight.7.snug": "ae73c019bc812faa883d535d4a30842aa5e4da36", - "lineHeight.7.normal": "90a9897ffbb74673fb53d8cc5a5c371dff7df08b", - "lineHeight.7.relaxed": "a9d910df0b0c78a3e4fd622e7a2aab8cb3bbc036", - "lineHeight.7.loose": "82bb8178f63c008539f22fdcd7b0e622969e88ef", - "lineHeight.8.none": "04c9028f02b4db68c0f1cc6a88f30fbb29181ef9", - "lineHeight.8.tight": "d82aa02d6c4db4bcc63a15e6f071651ea0bcce22", - "lineHeight.8.snug": "afc436c2200c95b2a620357e14376c396fd6749c", - "lineHeight.8.normal": "ff8eec480bc16528ad45fc17db32a334548ad0f5", - "lineHeight.8.relaxed": "20aabd47b292d4ac1ac410a7f54992a59ed1a297", - "lineHeight.8.loose": "f33bf2baf3e63465ffd87f71686722fd1ecdb69f", - "lineHeight.9.none": "da112a1fcfe778d73dcbf6790e24d7798ddfbfc8", - "lineHeight.9.tight": "e0a551b01a6736cc486aa50471ddedbcfdeac6e8", - "lineHeight.9.snug": "98d3579f0f364c8d9d1e54680f6ece2d6b2fb6cf", - "lineHeight.9.normal": "0de682e28c1c273aa1a920f488e9829a42e1af30", - "lineHeight.9.relaxed": "5a4a152c67e986cf36a375b0773be53f1bdddebe", - "lineHeight.9.loose": "60739756fe96a66b9b89df7dbb7b1a2727dc33d3", - "lineHeight.10.none": "39134d4750f773c93c2f17ab13d3c6ea732b98ca", - "lineHeight.10.tight": "5cc1e763b7be596634431016be4bad6989cc0a1c", - "lineHeight.10.snug": "e01d61d5dd2107b25605158be08d7aab7bf830f2", - "lineHeight.10.normal": "160ccec6bae6d39c82ad96ea5f251d37c41461da", - "lineHeight.10.relaxed": "93e29ade757a5ef4559eda714a01c667c91d5178", - "lineHeight.10.loose": "370360bce917ac1ea44f065a08ca06b56291d3e7", - "lineHeight.11.none": "e8faabca308a9bdf5cd2194030cc51e13f5a52f6", - "lineHeight.11.tight": "9c30ceaecda4e8242908d6ec43df509ef244003f", - "lineHeight.11.snug": "dfac4a541cd2c106c8de6673311d6ea6e1d8b7ae", - "lineHeight.11.normal": "53e51be897628e97fdc0e7f9df9d512570847715", - "lineHeight.11.relaxed": "89a5b58e82313aee11a7a8c56c9eaf13c0e30ca5", - "lineHeight.11.loose": "c972ba8ad0b0e3bea4ea796b85c595279c1728ad", - "lineHeight.12.none": "df4f88384b0f31c013fe4e2ffd17607c2e8bf024", - "lineHeight.12.tight": "267d48f79fd5b911dca607e1be7ccf1c0029e7b5", - "lineHeight.12.snug": "f209c3e17281140371f009dca2dff211bc9e37e5", - "lineHeight.12.normal": "10dc54b1b9d358c5a1f6eb8510f623115e58be8f", - "lineHeight.12.relaxed": "e36f615728b90cd0318cbf95571a00d8e8647a76", - "lineHeight.12.loose": "a11f86668a72dbc7aaabe51b4d76b16be3617e80", - "lineHeight.13.none": "86d65fb2aef376a9f6379a6314fd563b1e99137a", - "lineHeight.13.tight": "e719baee3434e656bd96212767dd243a71617e30", - "lineHeight.13.snug": "288b6182f0ca41a1898106ef9dcd54e43934f0d7", - "lineHeight.13.normal": "2c0ae8e7400d306e56af834389b9b470be7c2ec4", - "lineHeight.13.relaxed": "666e03fd7199e5b1dcd36ead138dcb3943aebf2e", - "lineHeight.13.loose": "47e9c7ab7a2009b2c12fece096dcad4243000959", - "lineHeight.none": "0ada589083afc93d3045c5acb0b7711adbbb7e9d", - "lineHeight.tight": "a6fd74fa33d363aab652597f9d966744160b54c3", - "lineHeight.snug": "f43210c68fc55e2601319d370150caae96d48f1d", - "lineHeight.normal": "77d777b37c60240820d4b6a575ec11e9bab93f8f", - "lineHeight.relaxed": "543311ba04e458a942bb0d50826eb0334b932877", - "lineHeight.loose": "02429cf3d31691740527d1faea026f4cd4572166", "spacing.0": "475f43f27d46745efb1151d34181ca93e485c323", "spacing.1": "a88d7f7fa50cfde706a203262c7981abf2275b7d", "spacing.2": "15d295c3581f15a4b4cc29bc3b2c9c4f02e88009", @@ -616,6 +471,7 @@ "spacing.3-half": "4e6064233484460281223f420b5015d31aeb5efc", "spacing.4-half": "aca636954fe21b24a18ac1e2641cab71b2fce9a8", "rounded.1": "4c8e9b29af661054f065ecfb517ffbf725d128ae", + "rounded.px": "3c023b948516d2071836e07348eb83cbba78a0e9", "rounded.2": "5c9a222659e74e39ecb528719f03049f267ba7b6", "rounded.3": "546448f107049e61fca518fd32468633bba50a51", "rounded.4": "8355a7d82d6f8643701db782be4fb5cc61e0fe2a", @@ -1726,7 +1582,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -1791,6 +1646,7 @@ "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", "gradient.card.from": "2f24ba885603450f5a73384a8f397aafd47b79a7", "gradient.card.to": "ff3e5b03e3dc2b46bf9162c390c9a2416111c3ee", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4", "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", @@ -2531,7 +2387,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -2601,7 +2456,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -3335,7 +3191,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -3405,7 +3260,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -4136,7 +3992,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -4206,7 +4061,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -4939,7 +4795,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -5009,7 +4864,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -5742,7 +5598,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -5812,7 +5667,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -6545,7 +6401,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -6615,7 +6470,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -7348,7 +7204,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -7418,7 +7273,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -8151,7 +8007,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -8221,7 +8076,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -8954,7 +8810,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -9024,7 +8879,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -9757,7 +9613,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -9827,7 +9682,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -10560,7 +10416,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -10630,7 +10485,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -11363,7 +11219,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -11433,7 +11288,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -12165,7 +12021,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -12235,7 +12090,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -12967,7 +12823,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -13037,7 +12892,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -13769,7 +13625,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -13839,7 +13694,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -14571,7 +14427,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -14641,7 +14496,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -15373,7 +15229,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -15443,7 +15298,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -16175,7 +16031,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -16245,7 +16100,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -17001,7 +16857,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -17071,7 +16926,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -17803,7 +17659,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -17873,7 +17728,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -18605,7 +18461,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -18675,7 +18530,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "4b4382c8f983d170a16b127fb4627e0d25c445eb" }, "group": "mode" }, @@ -19407,7 +19263,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -19477,7 +19332,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -20209,7 +20065,6 @@ "comp.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", "comp.link.text": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", "comp.link.text-hover": "73352dab8131667fad74ea687f74d6673f7d04dc", - "comp.link.text-visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", "comp.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", "comp.pipeline.card.bg": "921d9347b50b804d478f66576a20e22184ac05b5", "comp.pipeline.card.border": "bc1f47b752dfe47adee51573d9faa8d4738f0079", @@ -20279,7 +20134,8 @@ "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97" + "disabled.opacity": "790719fe50381c5e10c7eef72d9eabab3540ee97", + "gradient.dialog.fade": "c0c24543390c3a754f5303715e3ec0937e9644c4" }, "group": "mode" }, @@ -20439,9 +20295,9 @@ "btn.py.sm": "0016f78f877b26a9f8843fa820d41a7ec6fb1a13", "btn.py.default": "a8bac530920096f2a857ec837cef9d6960808670", "btn.py.lg": "dbadfa238e54880a13fdd4fc66f14dc44afab1b3", + "btn.wrapper.gap": "22305e7fc989a9eadb2a07762c4f46f7af49f86e", "link.gap.sm": "e63b120b0015804d7581ad9bdcde168886bf350c", "link.gap.default": "dd3aa27e1885fd22d4ab02fd4055d911d46d075c", - "btn.wrapper.gap": "22305e7fc989a9eadb2a07762c4f46f7af49f86e", "badge.size.sm": "2aaf247c1dcb25b9744e4a10e2c0315c096468fe", "badge.size.default": "2b7170084780c9924660ee2aa997511f778b83ee", "badge.default.gap": "0c5418b2e9318e1ce2963748e72056c7c6736142", @@ -20556,8 +20412,11 @@ "tag.border": "f675fc12a9f950c500255b0c4cca35fa4b94539f", "tag.max-width": "59874db9c8d0fa937c05d35cfac76341a9460072", "tooltip.radius": "f75277905b2f6c6bbee278e7d79cea149254d620", - "tooltip.padding": "1a270d3047ced1ec7041b25fbd3ebb5fb7b54f7c", - "tooltip.gap": "7af1a53746e1e88e3a64a82afc0bc640b1cfdea6", + "tooltip.py": "1a270d3047ced1ec7041b25fbd3ebb5fb7b54f7c", + "tooltip.px": "6712b557e6d5c49d0607d1cfb8dc678503e5742f", + "tooltip.max": "1dc20a0bb7e52d9d8a7759c7d0a7af4de8b36550", + "tooltip.min": "d8c576be7d47f4f14425d45d69a48f43f0d51248", + "tooltip.border": "73e89b88147070fbc47fd80b40e86b58d6d600fb", "sidebar.item.px": "9f976af443d268a5d47ca9ad6652cfab0dc865b3", "sidebar.item.size": "19f85b1a35176c6d96a77912c46f7c0e3f50fe00", "sidebar.item.gap": "bdf10a3534802adcdc42d6c87f51862de6a1fb6a", diff --git a/packages/core-design-system/design-tokens/components/desktop/base/tooltip.json b/packages/core-design-system/design-tokens/components/desktop/base/tooltip.json index 7186b7df18..eafded71f1 100644 --- a/packages/core-design-system/design-tokens/components/desktop/base/tooltip.json +++ b/packages/core-design-system/design-tokens/components/desktop/base/tooltip.json @@ -4,13 +4,25 @@ "$type": "borderRadius", "$value": "{rounded.2}" }, - "padding": { + "py": { "$type": "spacing", - "$value": "{spacing.3}" + "$value": "{spacing.1}" }, - "gap": { + "px": { "$type": "spacing", - "$value": "{spacing.1-half}" + "$value": "{spacing.2-half}" + }, + "max": { + "$type": "sizing", + "$value": "{size.90}" + }, + "min": { + "$type": "sizing", + "$value": "{size.12}" + }, + "border": { + "$type": "borderWidth", + "$value": "{borderWidth.1}" } } } \ No newline at end of file diff --git a/packages/core-design-system/design-tokens/core/colors_hex.json b/packages/core-design-system/design-tokens/core/colors_hex.json index 91b59fec22..196344c967 100644 --- a/packages/core-design-system/design-tokens/core/colors_hex.json +++ b/packages/core-design-system/design-tokens/core/colors_hex.json @@ -6,18 +6,6 @@ }, "black": { "$value": "#0f0f11" - }, - "transparent": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$value": "{pure.black}" } }, "chrome": { diff --git a/packages/core-design-system/design-tokens/core/colors_lch.json b/packages/core-design-system/design-tokens/core/colors_lch.json index 2c55e3987a..9211133408 100644 --- a/packages/core-design-system/design-tokens/core/colors_lch.json +++ b/packages/core-design-system/design-tokens/core/colors_lch.json @@ -7,19 +7,6 @@ "black": { "$type": "color", "$value": "lch(4.36% 1.08 285.25)" - }, - "transparent": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{pure.black}" } }, "chrome": { diff --git a/packages/core-design-system/design-tokens/core/dimensions.json b/packages/core-design-system/design-tokens/core/dimensions.json index 657c0e3e93..928f1d2902 100644 --- a/packages/core-design-system/design-tokens/core/dimensions.json +++ b/packages/core-design-system/design-tokens/core/dimensions.json @@ -179,6 +179,10 @@ "$type": "borderRadius", "$value": "24px" }, + "px": { + "$type": "borderRadius", + "$value": "1px" + }, "none": { "$type": "borderRadius", "$value": "0px", diff --git a/packages/core-design-system/design-tokens/mode/dark/default-deuteranopia.json b/packages/core-design-system/design-tokens/mode/dark/default-deuteranopia.json index b48b377ec5..56328f89a2 100644 --- a/packages/core-design-system/design-tokens/mode/dark/default-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/default-deuteranopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{blue.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/default-protanopia.json b/packages/core-design-system/design-tokens/mode/dark/default-protanopia.json index f13211f4ea..3d54205ce1 100644 --- a/packages/core-design-system/design-tokens/mode/dark/default-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/default-protanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/default-tritanopia.json b/packages/core-design-system/design-tokens/mode/dark/default-tritanopia.json index 2375fd3c43..68c6149d68 100644 --- a/packages/core-design-system/design-tokens/mode/dark/default-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/default-tritanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/default.json b/packages/core-design-system/design-tokens/mode/dark/default.json index c72a3954cb..7778e84418 100644 --- a/packages/core-design-system/design-tokens/mode/dark/default.json +++ b/packages/core-design-system/design-tokens/mode/dark/default.json @@ -1126,11 +1126,11 @@ }, "fade-start": { "$type": "color", - "$value": "linear-gradient(0deg, {pure.transparent} 0%, {bg.2} 100%)" + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" }, "fade-end": { "$type": "color", - "$value": "linear-gradient(0deg, {bg.2} 0%, {pure.transparent} 100%)" + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1302,11 +1302,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links. " - }, - "text-visited": { - "$type": "color", - "$value": "{purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2015,6 +2010,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/dimmer-deuteranopia.json b/packages/core-design-system/design-tokens/mode/dark/dimmer-deuteranopia.json index 20a42ff3d0..1990f79cb4 100644 --- a/packages/core-design-system/design-tokens/mode/dark/dimmer-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/dimmer-deuteranopia.json @@ -1123,6 +1123,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1294,11 +1302,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links. " - }, - "text-visited": { - "$type": "color", - "$value": "{blue.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2025,6 +2028,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/dimmer-protanopia.json b/packages/core-design-system/design-tokens/mode/dark/dimmer-protanopia.json index 46054f34c4..371bc08f1b 100644 --- a/packages/core-design-system/design-tokens/mode/dark/dimmer-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/dimmer-protanopia.json @@ -1123,6 +1123,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1294,11 +1302,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2025,6 +2028,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/dimmer-tritanopia.json b/packages/core-design-system/design-tokens/mode/dark/dimmer-tritanopia.json index 742c0b92e2..21435b1fc1 100644 --- a/packages/core-design-system/design-tokens/mode/dark/dimmer-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/dimmer-tritanopia.json @@ -1123,6 +1123,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1294,11 +1302,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2025,6 +2028,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/dimmer.json b/packages/core-design-system/design-tokens/mode/dark/dimmer.json index 8340e83f47..19c5eca0cc 100644 --- a/packages/core-design-system/design-tokens/mode/dark/dimmer.json +++ b/packages/core-design-system/design-tokens/mode/dark/dimmer.json @@ -1123,6 +1123,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1294,11 +1302,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links. " - }, - "text-visited": { - "$type": "color", - "$value": "{purple.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2025,6 +2028,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/high-contrast-deuteranopia.json b/packages/core-design-system/design-tokens/mode/dark/high-contrast-deuteranopia.json index 7d08f28669..f19a22cb31 100644 --- a/packages/core-design-system/design-tokens/mode/dark/high-contrast-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/high-contrast-deuteranopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{blue.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/high-contrast-protanopia.json b/packages/core-design-system/design-tokens/mode/dark/high-contrast-protanopia.json index 168bf96643..fc0072e75a 100644 --- a/packages/core-design-system/design-tokens/mode/dark/high-contrast-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/high-contrast-protanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/high-contrast-tritanopia.json b/packages/core-design-system/design-tokens/mode/dark/high-contrast-tritanopia.json index 7202b037a0..82772402cf 100644 --- a/packages/core-design-system/design-tokens/mode/dark/high-contrast-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/dark/high-contrast-tritanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/dark/high-contrast.json b/packages/core-design-system/design-tokens/mode/dark/high-contrast.json index 144f58e0cb..f7bdd5ac2f 100644 --- a/packages/core-design-system/design-tokens/mode/dark/high-contrast.json +++ b/packages/core-design-system/design-tokens/mode/dark/high-contrast.json @@ -1127,6 +1127,14 @@ "$type": "color", "$value": "{pure.black}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1298,11 +1306,6 @@ "$type": "color", "$value": "{blue.200}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2029,6 +2032,21 @@ "$type": "color", "$value": "{chrome.950}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/default-deuteranopia.json b/packages/core-design-system/design-tokens/mode/light/default-deuteranopia.json index 91a8c36048..d405f89249 100644 --- a/packages/core-design-system/design-tokens/mode/light/default-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/light/default-deuteranopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{blue.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/default-protanopia.json b/packages/core-design-system/design-tokens/mode/light/default-protanopia.json index 966c5b01bf..ef022ea694 100644 --- a/packages/core-design-system/design-tokens/mode/light/default-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/default-protanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/default-tritanopia.json b/packages/core-design-system/design-tokens/mode/light/default-tritanopia.json index 96cd832a07..fad6dc6a4f 100644 --- a/packages/core-design-system/design-tokens/mode/light/default-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/default-tritanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -1666,6 +1669,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "shadow": { diff --git a/packages/core-design-system/design-tokens/mode/light/default.json b/packages/core-design-system/design-tokens/mode/light/default.json index bddc3d056f..789618e90f 100644 --- a/packages/core-design-system/design-tokens/mode/light/default.json +++ b/packages/core-design-system/design-tokens/mode/light/default.json @@ -1126,11 +1126,11 @@ }, "fade-start": { "$type": "color", - "$value": "linear-gradient(0deg, {pure.transparent} 0%, {bg.2} 100%)" + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" }, "fade-end": { "$type": "color", - "$value": "linear-gradient(0deg, {bg.2} 0%, {pure.transparent} 100%)" + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1302,11 +1302,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2033,6 +2028,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/dimmer-deuteranopia.json b/packages/core-design-system/design-tokens/mode/light/dimmer-deuteranopia.json index 6b9c5e653b..570c5645f6 100644 --- a/packages/core-design-system/design-tokens/mode/light/dimmer-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/light/dimmer-deuteranopia.json @@ -1141,6 +1141,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1312,11 +1320,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{blue.500}", - "$description": "Visited state color for text links, replaced with blue for deuteranopia visibility." } }, "pipeline": { @@ -2043,6 +2046,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/dimmer-protanopia.json b/packages/core-design-system/design-tokens/mode/light/dimmer-protanopia.json index 41c7315c24..8e2805afc3 100644 --- a/packages/core-design-system/design-tokens/mode/light/dimmer-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/dimmer-protanopia.json @@ -1141,6 +1141,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1312,11 +1320,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.500}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2043,6 +2046,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/dimmer-tritanopia.json b/packages/core-design-system/design-tokens/mode/light/dimmer-tritanopia.json index 4d1d53b871..d24b17ba29 100644 --- a/packages/core-design-system/design-tokens/mode/light/dimmer-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/dimmer-tritanopia.json @@ -1141,6 +1141,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1312,11 +1320,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.500}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2043,6 +2046,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/dimmer.json b/packages/core-design-system/design-tokens/mode/light/dimmer.json index 3599e670bb..789618e90f 100644 --- a/packages/core-design-system/design-tokens/mode/light/dimmer.json +++ b/packages/core-design-system/design-tokens/mode/light/dimmer.json @@ -1123,6 +1123,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1294,11 +1302,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2025,6 +2028,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/high-contrast-deuteranopia.json b/packages/core-design-system/design-tokens/mode/light/high-contrast-deuteranopia.json index 473df85fd9..608ec39c20 100644 --- a/packages/core-design-system/design-tokens/mode/light/high-contrast-deuteranopia.json +++ b/packages/core-design-system/design-tokens/mode/light/high-contrast-deuteranopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{blue.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/high-contrast-protanopia.json b/packages/core-design-system/design-tokens/mode/light/high-contrast-protanopia.json index 25ac63d383..df0492d02d 100644 --- a/packages/core-design-system/design-tokens/mode/light/high-contrast-protanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/high-contrast-protanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/high-contrast-tritanopia.json b/packages/core-design-system/design-tokens/mode/light/high-contrast-tritanopia.json index afaf898aea..1a532aebab 100644 --- a/packages/core-design-system/design-tokens/mode/light/high-contrast-tritanopia.json +++ b/packages/core-design-system/design-tokens/mode/light/high-contrast-tritanopia.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{cyan.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/core-design-system/design-tokens/mode/light/high-contrast.json b/packages/core-design-system/design-tokens/mode/light/high-contrast.json index 1484d45d08..1da1bda11d 100644 --- a/packages/core-design-system/design-tokens/mode/light/high-contrast.json +++ b/packages/core-design-system/design-tokens/mode/light/high-contrast.json @@ -1132,6 +1132,14 @@ "$type": "color", "$value": "{chrome.900}", "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." + }, + "fade-start": { + "$type": "color", + "$value": "linear-gradient(0deg, {gradient.dialog.fade} 0%, {bg.2} 100%)" + }, + "fade-end": { + "$type": "color", + "$value": "linear-gradient(0deg, {bg.2} 0%, {gradient.dialog.fade} 100%)" } }, "diff": { @@ -1303,11 +1311,6 @@ "$type": "color", "$value": "{blue.800}", "$description": "Hover color for text links." - }, - "text-visited": { - "$type": "color", - "$value": "{purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." } }, "pipeline": { @@ -2034,6 +2037,21 @@ "$type": "color", "$value": "{chrome.25}" } + }, + "dialog": { + "fade": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{bg.2}" + } } }, "iconStrokeWidth": { diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index 345d8557eb..320eb97ef7 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -30,6 +30,8 @@ "findTag": "Find a tag", "allCommits": "All commits", "noFile": "No files available", + "private": "Private", + "public": "Public", "name": "Name", "lastCommit": "Last commit message", "date": "Date", @@ -134,8 +136,6 @@ "import-repository": "Import repository", "import-repositories": "Import repositories", "create-repository": "Create repository", - "private": "Private", - "public": "Public", "importing": "Importing…", "updated": "Updated", "deleteRepo": "Delete Repository", @@ -326,6 +326,46 @@ "lastActivity": "Last Activity", "created": "Created" }, + "delegates": { + "delegate": "Delegate", + "heartbeat": "Heartbeat", + "selected": "Selected", + "anyDelegate": "Any Delegate", + "useAnyDelegate": "Use any available delegate", + "delegateTags": "Delegate with tags", + "useDelegateTags": "Use delegate with following tags", + "noDelegatesInstalled": "Haven't installed a delegate yet?", + "installDelegate": "Install delegate", + "enterTags": "Enter tags", + "testDelegate": "Test Delegate connectivity", + "delegateMatches": "Matches: ", + "connectDelegates": "Connect " + }, + "createProject": { + "backButton": "Back", + "validation": { + "nameNoEmpty": "The field can’t be blank", + "nameMinLength": "The project name should be at least 4 characters" + }, + "title": "Create your new project", + "description": "Organize your repositories, pipelines and more.", + "form": { + "name": "Project name", + "namePlaceholder": "Enter your project name", + "description": "Description", + "descriptionPlaceholder": "Enter a description (optional)" + }, + "create": { + "projectCreation": "Creating project...", + "createProject": "Create project" + }, + "or": "or", + "importProject": "Import project", + "logout": { + "question": "Want to use a different account?", + "link": "Log out" + } + }, "execution": { "summary": "Summary", "logs": "Logs", @@ -544,31 +584,6 @@ "generalTab": "General", "keysTab": "Keys and Tokens" }, - "createProject": { - "validation": { - "nameNoEmpty": "The field can’t be blank", - "nameMinLength": "The project name should be at least 4 characters" - }, - "backButton": "Back", - "title": "Create your new project", - "description": "Organize your repositories, pipelines and more.", - "form": { - "name": "Project name", - "namePlaceholder": "Enter your project name", - "description": "Description", - "descriptionPlaceholder": "Enter a description (optional)" - }, - "create": { - "projectCreation": "Creating project...", - "createProject": "Create project" - }, - "or": "or", - "importProject": "Import project", - "logout": { - "question": "Want to use a different account?", - "link": "Log out" - } - }, "forms": { "selectMember": "Select member", "selectRole": "Select role", diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index 90759fdfce..d73507a042 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -30,6 +30,8 @@ "findTag": "Trouver une étiquette", "allCommits": "Tous les commits", "noFile": "Aucun fichier disponible", + "private": "Privé", + "public": "Public", "name": "Nom", "lastCommit": "Dernier commit", "date": "Date", @@ -134,8 +136,6 @@ "import-repository": "Importer un dépôt", "import-repositories": "Import repositories", "create-repository": "Créer un dépôt", - "private": "Privé", - "public": "Public", "importing": "Importing…", "updated": "Mis à jour", "deleteRepo": "Supprimer le dépôt", @@ -317,6 +317,46 @@ "lastActivity": "Last Activity", "created": "Created" }, + "delegates": { + "delegate": "Delegate", + "heartbeat": "Heartbeat", + "selected": "Selected", + "anyDelegate": "Any delegate", + "useAnyDelegate": "Use any available delegate", + "delegateTags": "Delegate with tags", + "useDelegateTags": "Use delegate with following tags", + "noDelegatesInstalled": "Haven't installed a delegate yet?", + "installDelegate": "Install Delegate", + "enterTags": "Enter tags", + "testDelegate": "Test Delegate connectivity", + "delegateMatches": "Matches:", + "connectDelegates": "Connect " + }, + "createProject": { + "backButton": "Retour", + "validation": { + "nameNoEmpty": "Le champ ne peut pas être vide", + "nameMinLength": "Le nom du projet doit contenir au moins 4 caractères" + }, + "title": "Créez votre nouveau projet", + "description": "Organisez vos dépôts, pipelines et plus encore.", + "form": { + "name": "Nom du projet", + "namePlaceholder": "Entrez le nom de votre projet", + "description": "Description", + "descriptionPlaceholder": "Entrez une description (facultatif)" + }, + "create": { + "projectCreation": "Création du projet...", + "createProject": "Créer le projet" + }, + "or": "ou", + "importProject": "Importer un projet", + "logout": { + "question": "Voulez-vous utiliser un autre compte ?", + "link": "Se déconnecter" + } + }, "execution": { "summary": "Résumé", "logs": "Journaux", @@ -531,31 +571,6 @@ "keysTab": "Clés et Jetons", "saving": "Enregistrement..." }, - "createProject": { - "validation": { - "nameNoEmpty": "Le champ ne peut pas être vide", - "nameMinLength": "Le nom du projet doit contenir au moins 4 caractères" - }, - "backButton": "Retour", - "title": "Créez votre nouveau projet", - "description": "Organisez vos dépôts, pipelines et plus encore.", - "form": { - "name": "Nom du projet", - "namePlaceholder": "Entrez le nom de votre projet", - "description": "Description", - "descriptionPlaceholder": "Entrez une description (facultatif)" - }, - "create": { - "projectCreation": "Création du projet...", - "createProject": "Créer le projet" - }, - "or": "ou", - "importProject": "Importer un projet", - "logout": { - "question": "Voulez-vous utiliser un autre compte ?", - "link": "Se déconnecter" - } - }, "forms": { "selectMember": "", "selectRole": "", diff --git a/packages/ui/package.json b/packages/ui/package.json index 4552b8c9d3..04c692b461 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,7 +1,7 @@ { "name": "@harnessio/ui", "description": "Harness Canary UI component library", - "version": "0.0.63", + "version": "0.0.64", "private": false, "type": "module", "main": "./dist/index.js", diff --git a/packages/ui/src/components/app-sidebar/sidebar-item.tsx b/packages/ui/src/components/app-sidebar/sidebar-item.tsx index 1c315973f5..d0a9a7b6e8 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-item.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-item.tsx @@ -1,6 +1,5 @@ import { DropdownMenu, Icon, IconProps, Sidebar, Text, useSidebar } from '@/components' -import { useRouterContext } from '@/context' -import { TFunction } from 'i18next' +import { useRouterContext, useTranslation } from '@/context' const dropdownItemClassNames = 'text-sidebar-foreground-6 data-[highlighted]:bg-sidebar-background-2 data-[highlighted]:text-sidebar-foreground-1' @@ -20,7 +19,6 @@ interface NavbarItemProps { handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void handleRemoveRecentMenuItem: (item: NavbarItemType) => void handleCustomNav: () => void - t: TFunction } export const SidebarItem = ({ @@ -28,9 +26,9 @@ export const SidebarItem = ({ isRecent = false, handleChangePinnedMenuItem, handleRemoveRecentMenuItem, - handleCustomNav, - t + handleCustomNav }: NavbarItemProps) => { + const { t } = useTranslation() const { NavLink } = useRouterContext() const { collapsed } = useSidebar() diff --git a/packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx b/packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx index ec64755602..5e8156eca5 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx @@ -1,15 +1,16 @@ import { FormEvent, MouseEvent, ReactNode, useState } from 'react' import { Button, Dialog, Icon, SearchBox, Spacer, useSidebar } from '@/components' +import { useTranslation } from '@/context' import { cn } from '@/utils' -import { TFunction } from 'i18next' interface ProjectProps { logo: ReactNode - t: TFunction } -function SidebarSearchLegacy({ logo, t }: ProjectProps) { +function SidebarSearchLegacy({ logo }: ProjectProps) { + const { t } = useTranslation() + const [isSearchDialogOpen, setSearchDialogOpen] = useState(false) const { collapsed } = useSidebar() diff --git a/packages/ui/src/components/app-sidebar/sidebar-search/command-palette-wrapper.tsx b/packages/ui/src/components/app-sidebar/sidebar-search/command-palette-wrapper.tsx index 5d4302b557..231ac917f5 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-search/command-palette-wrapper.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-search/command-palette-wrapper.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' import { Icon } from '@/components' -import { TFunction } from 'i18next' +import { useTranslation } from '@/context' import { CommandPalette } from './command-palette' import { useSearch } from './search-context' @@ -21,11 +21,9 @@ interface CommandOption { icon?: () => JSX.Element } -interface CommandPaletteProps { - t: TFunction -} +export function CommandPaletteWrapper() { + const { t } = useTranslation() -export function CommandPaletteWrapper({ t }: CommandPaletteProps) { const { isOpen, setIsOpen } = useSearch() const [search, setSearch] = useState('') const [pages, setPages] = useState([]) diff --git a/packages/ui/src/components/app-sidebar/sidebar-search/search-context.tsx b/packages/ui/src/components/app-sidebar/sidebar-search/search-context.tsx index 242ec3766b..71ccb409b0 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-search/search-context.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-search/search-context.tsx @@ -1,7 +1,5 @@ import { createContext, ReactNode, useContext, useEffect, useState } from 'react' -import { TFunction } from 'i18next' - import { CommandPaletteWrapper } from './command-palette-wrapper' interface SearchContextType { @@ -17,10 +15,9 @@ const SearchContext = createContext(null) interface SearchProviderProps { children: ReactNode - t: TFunction } -export function SearchProvider({ children, t }: SearchProviderProps) { +export function SearchProvider({ children }: SearchProviderProps) { const [isOpen, setIsOpen] = useState(false) const [searchTerm, setSearchTerm] = useState('') const [selectedIndex, setSelectedIndex] = useState(0) @@ -53,7 +50,7 @@ export function SearchProvider({ children, t }: SearchProviderProps) { }} > {children} - + ) } diff --git a/packages/ui/src/components/app-sidebar/sidebar-search/sidebar-search.tsx b/packages/ui/src/components/app-sidebar/sidebar-search/sidebar-search.tsx index 0609a14fc9..839040427b 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-search/sidebar-search.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-search/sidebar-search.tsx @@ -1,19 +1,18 @@ import { FormHTMLAttributes, ReactNode } from 'react' import { Button, Input, Label } from '@/components' +import { useTranslation } from '@/context' import { Icon } from '@components/icon' import { Sidebar } from '@components/sidebar/sidebar' -import { TFunction } from 'i18next' import { useSearch } from './search-context' interface SidebarSearchProps extends FormHTMLAttributes { logo: ReactNode - t: TFunction } export function SidebarSearch(props: SidebarSearchProps) { - const { t } = props + const { t } = useTranslation() const searchContext = useSearch() if (!searchContext) { diff --git a/packages/ui/src/components/app-sidebar/sidebar-user.tsx b/packages/ui/src/components/app-sidebar/sidebar-user.tsx index 02629d2952..8ee9a33080 100644 --- a/packages/ui/src/components/app-sidebar/sidebar-user.tsx +++ b/packages/ui/src/components/app-sidebar/sidebar-user.tsx @@ -1,10 +1,9 @@ -import { useRouterContext } from '@/context' +import { useRouterContext, useTranslation } from '@/context' import { TypesUser } from '@/types' import { Avatar } from '@components/avatar' import { DropdownMenu } from '@components/dropdown-menu' import { Icon } from '@components/icon' import { Sidebar } from '@components/sidebar/sidebar' -import { TFunction } from 'i18next' const UserAvatar = ({ user }: Pick) => { const userName = user?.display_name || user?.uid || '' @@ -25,11 +24,11 @@ interface UserProps { openThemeDialog: () => void openLanguageDialog: () => void handleLogOut: () => void - t: TFunction } -export function User({ user, openThemeDialog, openLanguageDialog, handleLogOut, t }: UserProps) { +export function User({ user, openThemeDialog, openLanguageDialog, handleLogOut }: UserProps) { const { Link } = useRouterContext() + const { t } = useTranslation() return ( diff --git a/packages/ui/src/components/dialogs/delete-alert-dialog.tsx b/packages/ui/src/components/dialogs/delete-alert-dialog.tsx index e6ba2f81df..d8da7a976c 100644 --- a/packages/ui/src/components/dialogs/delete-alert-dialog.tsx +++ b/packages/ui/src/components/dialogs/delete-alert-dialog.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, FC, useState } from 'react' import { AlertDialog, Button, Fieldset, Input } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' const DELETION_KEYWORD = 'DELETE' @@ -13,7 +13,6 @@ export interface DeleteAlertDialogProps { type?: string isLoading?: boolean error?: { type?: string; message: string } | null - useTranslationStore: () => TranslationStore withForm?: boolean } @@ -24,11 +23,10 @@ export const DeleteAlertDialog: FC = ({ deleteFn, type, isLoading = false, - useTranslationStore, error, withForm = false }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() const [verification, setVerification] = useState('') const handleChangeVerification = (event: ChangeEvent) => { @@ -50,10 +48,11 @@ export const DeleteAlertDialog: FC = ({ {t('component:deleteDialog.title', 'Are you sure?')} {type - ? t('component:deleteDialog.descriptionWithType', { - defaultValue: `This will permanently delete your ${type} and remove all data. This action cannot be undone.`, - type: type - }) + ? t( + 'component:deleteDialog.descriptionWithType', + `This will permanently delete your ${type} and remove all data. This action cannot be undone.`, + { type: type } + ) : t( 'component:deleteDialog.description', `This will permanently remove all data. This action cannot be undone.` diff --git a/packages/ui/src/components/file-additions-trigger.tsx b/packages/ui/src/components/file-additions-trigger.tsx index 9c603cbab4..6816784bb6 100644 --- a/packages/ui/src/components/file-additions-trigger.tsx +++ b/packages/ui/src/components/file-additions-trigger.tsx @@ -1,21 +1,16 @@ import { FC, useRef } from 'react' import { Button, DropdownMenu, Icon, Link } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' export interface FileAdditionsTriggerProps { - useTranslationStore: () => TranslationStore pathNewFile: string pathUploadFiles: string } -export const FileAdditionsTrigger: FC = ({ - useTranslationStore, - pathNewFile, - pathUploadFiles -}) => { +export const FileAdditionsTrigger: FC = ({ pathNewFile, pathUploadFiles }) => { const triggerRef = useRef(null) - const { t } = useTranslationStore() + const { t } = useTranslation() return ( diff --git a/packages/ui/src/components/filters/filter-box-wrapper.tsx b/packages/ui/src/components/filters/filter-box-wrapper.tsx index 13f3934ba3..5139156052 100644 --- a/packages/ui/src/components/filters/filter-box-wrapper.tsx +++ b/packages/ui/src/components/filters/filter-box-wrapper.tsx @@ -1,16 +1,15 @@ import { ReactNode, useEffect, useState } from 'react' +import { useTranslation } from '@/context' import { Button } from '@components/button' import { DropdownMenu } from '@components/dropdown-menu' import { Icon } from '@components/icon' import { cn } from '@utils/cn' -import { TFunction } from 'i18next' interface FiltersProps { handleRemoveFilter: () => void defaultOpen: boolean filterLabel: string - t: TFunction onOpenChange?: (open: boolean) => void valueLabel?: ReactNode contentClassName?: string @@ -24,9 +23,10 @@ const FilterBoxWrapper = ({ filterLabel, valueLabel, onOpenChange, - contentClassName, - t + contentClassName }: FiltersProps) => { + const { t } = useTranslation() + const [isOpen, setIsOpen] = useState(defaultOpen) useEffect(() => { diff --git a/packages/ui/src/components/filters/filters-field.tsx b/packages/ui/src/components/filters/filters-field.tsx index 9e27cd04c8..171eb4a750 100644 --- a/packages/ui/src/components/filters/filters-field.tsx +++ b/packages/ui/src/components/filters/filters-field.tsx @@ -1,7 +1,6 @@ import { Button } from '@components/button' import { Checkbox } from '@components/checkbox' import { Label } from '@components/form-primitives' -import { TFunction } from 'i18next' import FilterBoxWrapper from './filter-box-wrapper' import Calendar from './filters-bar/actions/variants/calendar-field' @@ -24,7 +23,6 @@ export interface FiltersFieldProps< > { filterOption: FilterOptionConfig removeFilter: () => void - t: TFunction valueLabel?: string shouldOpenFilter: boolean onOpenChange?: (open: boolean) => void @@ -100,7 +98,6 @@ const FiltersField = ) => { @@ -121,7 +118,6 @@ const FiltersField = removeFilter()} - t={t} onOpenChange={onOpenChange} defaultOpen={shouldOpenFilter} filterLabel={filterOption.label} diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 0b2fd09fc3..99694813cd 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -82,6 +82,7 @@ export * from './sorts' export * from './entity-form-layout' export * as MultiSelectV2 from './multi-select-v2' export * from './card-select' +export * from './layout-v2' export * as NodeGroup from './node-group' export * as ShaBadge from './sha-badge' diff --git a/packages/ui/src/components/layout-v2.tsx b/packages/ui/src/components/layout-v2.tsx new file mode 100644 index 0000000000..8f6382c186 --- /dev/null +++ b/packages/ui/src/components/layout-v2.tsx @@ -0,0 +1,203 @@ +import { FC, HTMLAttributes, ReactNode } from 'react' + +import { cn } from '@utils/cn' +import { cva, type VariantProps } from 'class-variance-authority' + +const gridVariants = cva('grid', { + variants: { + align: { + start: 'items-start', + center: 'items-center', + end: 'items-end', + baseline: 'items-baseline', + stretch: 'items-stretch' + }, + justify: { + start: 'justify-start', + center: 'justify-center', + end: 'justify-end', + between: 'justify-between' + } + } +}) + +const flexVariants = cva('flex', { + variants: { + direction: { + row: 'flex-row', + column: 'flex-col', + 'row-reverse': 'flex-row-reverse', + 'column-reverse': 'flex-col-reverse' + }, + align: { + start: 'items-start', + center: 'items-center', + end: 'items-end', + baseline: 'items-baseline', + stretch: 'items-stretch' + }, + justify: { + start: 'justify-start', + center: 'justify-center', + end: 'justify-end', + between: 'justify-between' + }, + wrap: { + nowrap: 'flex-nowrap', + wrap: 'flex-wrap', + 'wrap-reverse': 'flex-wrap-reverse' + } + }, + defaultVariants: { + direction: 'row' + } +}) + +const spacingVariants = cva('', { + variants: { + spacing: { + small: 'var(--cn-spacing-2)', + medium: 'var(--cn-spacing-4)', + large: 'var(--cn-spacing-6)' + } + }, + defaultVariants: { + spacing: 'medium' + } +}) + +const gapVariants = cva('', { + variants: { + gap: { + none: 'gap-0', + xs: 'gap-[var(--cn-layout-xs,var(--cn-spacing-2))]', + sm: 'gap-[var(--cn-layout-sm,var(--cn-spacing-3))]', + md: 'gap-[var(--cn-layout-md,var(--cn-spacing-4))]', + lg: 'gap-[var(--cn-layout-lg,var(--cn-spacing-6))]', + xl: 'gap-[var(--cn-layout-xl,var(--cn-spacing-8))]' + }, + gapX: { + none: 'gap-x-0', + xs: 'gap-x-[var(--cn-layout-xs,var(--cn-spacing-2))]', + sm: 'gap-x-[var(--cn-layout-sm,var(--cn-spacing-3))]', + md: 'gap-x-[var(--cn-layout-md,var(--cn-spacing-4))]', + lg: 'gap-x-[var(--cn-layout-lg,var(--cn-spacing-6))]', + xl: 'gap-x-[var(--cn-layout-xl,var(--cn-spacing-8))]' + }, + gapY: { + none: 'gap-y-0', + xs: 'gap-y-[var(--cn-layout-xs,var(--cn-spacing-2))]', + sm: 'gap-y-[var(--cn-layout-sm,var(--cn-spacing-3))]', + md: 'gap-y-[var(--cn-layout-md,var(--cn-spacing-4))]', + lg: 'gap-y-[var(--cn-layout-lg,var(--cn-spacing-6))]', + xl: 'gap-y-[var(--cn-layout-xl,var(--cn-spacing-8))]' + } + } +}) + +type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' + +interface LayoutProps { + children?: ReactNode + className?: string + gap?: GapSize + gapX?: GapSize + gapY?: GapSize + as?: React.ElementType +} + +interface FlexProps extends LayoutProps, VariantProps {} + +interface GridProps extends LayoutProps, VariantProps { + columns?: string | number + rows?: string | number + flow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense' +} + +const Flex = ({ + children, + className, + direction, + align, + justify, + gap, + gapX, + gapY, + wrap, + as: Comp = 'div', + ...props +}: FlexProps & HTMLAttributes) => { + return ( + + {children} + + ) +} + +const Grid = ({ + children, + className, + columns, + rows, + flow, + align, + justify, + gap, + gapX, + gapY, + as: Comp = 'div', + ...props +}: GridProps & HTMLAttributes) => { + return ( + + {children} + + ) +} + +interface HorizontalProps extends Omit, VariantProps {} + +const Horizontal: FC> = ({ + children, + className, + spacing, + ...props +}) => { + return ( + + {children} + + ) +} + +interface VerticalProps extends Omit, VariantProps {} + +const Vertical: FC> = ({ children, className, spacing, ...props }) => { + return ( + + {children} + + ) +} + +export const LayoutV2 = { + Grid, + Flex, + Horizontal, + Vertical +} diff --git a/packages/ui/src/components/multi-select.tsx b/packages/ui/src/components/multi-select.tsx index 5451501b1b..eccab516f8 100644 --- a/packages/ui/src/components/multi-select.tsx +++ b/packages/ui/src/components/multi-select.tsx @@ -11,8 +11,8 @@ import { ScrollArea, SearchInput } from '@/components' +import { useTranslation } from '@/context' import { cn } from '@utils/cn' -import { TFunction } from 'i18next' export type MultiSelectOptionType = T & { id: string | number @@ -22,7 +22,6 @@ export type MultiSelectOptionType = T & { export interface MultiSelectProps { className?: string selectedItems: MultiSelectOptionType>[] - t: TFunction placeholder: string handleChange: (data: MultiSelectOptionType>) => void options: MultiSelectOptionType[] @@ -36,7 +35,6 @@ export interface MultiSelectProps { export const MultiSelect = ({ className, selectedItems, - t, placeholder, handleChange, options, @@ -46,6 +44,8 @@ export const MultiSelect = ({ error, label }: MultiSelectProps) => { + const { t } = useTranslation() + const handleSearchChange = useCallback( (query: string) => { handleChangeSearchValue?.(query) diff --git a/packages/ui/src/components/pagination/pagination-primitive.tsx b/packages/ui/src/components/pagination/pagination-primitive.tsx index 3fbf038333..3b6fbd972b 100644 --- a/packages/ui/src/components/pagination/pagination-primitive.tsx +++ b/packages/ui/src/components/pagination/pagination-primitive.tsx @@ -1,8 +1,8 @@ import * as React from 'react' +import { useTranslation } from '@/context' import { Link } from '@components/link' import { cn } from '@utils/cn' -import { TFunction } from 'i18next' import { Button } from '../button' import { Icon } from '../icon' @@ -25,7 +25,6 @@ PaginationPrimitiveItem.displayName = 'PaginationPrimitiveItem' type PaginationPrimitiveLinkGeneralProps = { isActive?: boolean disabled?: boolean - t: TFunction onClick?: (e: React.MouseEvent) => void } & React.ComponentProps<'a'> & React.ComponentProps<'button'> @@ -95,43 +94,47 @@ const PaginationPrimitiveLink = ({ PaginationPrimitiveLink.displayName = 'PaginationPrimitiveLink' const PaginationPrimitivePrevious = ({ - t, disabled, className, href = '#', ...props -}: PaginationPrimitiveLinkGeneralProps) => ( - - - {t('component:pagination.previous', 'Previous')} - -) +}: PaginationPrimitiveLinkGeneralProps) => { + const { t } = useTranslation() + return ( + + + {t('component:pagination.previous', 'Previous')} + + ) +} PaginationPrimitivePrevious.displayName = 'PaginationPrimitivePrevious' const PaginationPrimitiveNext = ({ - t, disabled, className, href = '#', ...props -}: PaginationPrimitiveLinkGeneralProps) => ( - - {t('component:pagination.next', 'Next')} - - -) +}: PaginationPrimitiveLinkGeneralProps) => { + const { t } = useTranslation() + return ( + + {t('component:pagination.next', 'Next')} + + + ) +} PaginationPrimitiveNext.displayName = 'PaginationPrimitiveNext' const PaginationPrimitiveEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => ( diff --git a/packages/ui/src/components/pagination/pagination.tsx b/packages/ui/src/components/pagination/pagination.tsx index b78e22e314..2faab36b55 100644 --- a/packages/ui/src/components/pagination/pagination.tsx +++ b/packages/ui/src/components/pagination/pagination.tsx @@ -2,7 +2,6 @@ import { FC, MouseEvent, ReactElement } from 'react' import { Spacer } from '@/components' import { cn } from '@utils/cn' -import { TFunction } from 'i18next' import { PaginationPrimitive } from './pagination-primitive' @@ -102,8 +101,6 @@ const PaginationItems: FC = ({ interface PaginationBaseProps { className?: string - t: TFunction - truncateLimit?: number } type DeterminatePaginationNavProps = @@ -155,8 +152,6 @@ export const Pagination: FC = ({ hasNext, hasPrevious, className, - t, - truncateLimit = 4, getPrevPageLink, getNextPageLink, onPrevious, @@ -194,7 +189,6 @@ export const Pagination: FC = ({ onClick={goToPage ? handleGoToPage(currentPage > 1 ? currentPage - 1 : undefined) : undefined} href={getPageLink?.(currentPage > 1 ? currentPage - 1 : currentPage)} disabled={currentPage === 1} - t={t} /> @@ -205,7 +199,7 @@ export const Pagination: FC = ({ currentPage={currentPage} getPageLink={getPageLink} goToPage={goToPage ? handleGoToPage : undefined} - truncateLimit={truncateLimit} + truncateLimit={5} /> )} @@ -215,7 +209,6 @@ export const Pagination: FC = ({ onClick={goToPage ? handleGoToPage(currentPage < totalPages ? currentPage + 1 : undefined) : undefined} href={getPageLink?.(currentPage < totalPages ? currentPage + 1 : currentPage)} disabled={currentPage === totalPages} - t={t} /> @@ -223,16 +216,11 @@ export const Pagination: FC = ({ {/* Previous Button */} - + {/* Next Button */} - + )} diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx index 46ffdd48e8..eecafead87 100644 --- a/packages/ui/src/components/repo-subheader.tsx +++ b/packages/ui/src/components/repo-subheader.tsx @@ -1,5 +1,6 @@ import { TabNav } from '@/components' -import { SandboxLayout, TranslationStore } from '@/views' +import { useTranslation } from '@/context' +import { SandboxLayout } from '@/views' export enum RepoTabsKeys { SUMMARY = 'summary', @@ -13,16 +14,13 @@ export enum RepoTabsKeys { export const repoTabsKeysArr = Object.values(RepoTabsKeys) -export const RepoSubheader = ({ - useTranslationStore, - showPipelinesTab = true, - className -}: { - useTranslationStore: () => TranslationStore - showPipelinesTab?: boolean +interface RepoSubheaderProps { className?: string -}) => { - const { t } = useTranslationStore() + showPipelinesTab?: boolean +} + +export const RepoSubheader = ({ showPipelinesTab = true, className }: RepoSubheaderProps) => { + const { t } = useTranslation() return ( diff --git a/packages/ui/src/components/search-files.tsx b/packages/ui/src/components/search-files.tsx index 2f5972e95a..cf0e2bff8a 100644 --- a/packages/ui/src/components/search-files.tsx +++ b/packages/ui/src/components/search-files.tsx @@ -1,7 +1,7 @@ import { ReactNode, useCallback, useState } from 'react' import { Command, Popover, SearchInput, Text } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' const markedFileClassName = 'w-full text-cn-foreground-1' @@ -37,13 +37,12 @@ interface FilteredFile { interface SearchFilesProps { navigateToFile: (file: string) => void filesList?: string[] - useTranslationStore: () => TranslationStore } -export const SearchFiles = ({ navigateToFile, filesList, useTranslationStore }: SearchFilesProps) => { +export const SearchFiles = ({ navigateToFile, filesList }: SearchFilesProps) => { const [isOpen, setIsOpen] = useState(false) const [filteredFiles, setFilteredFiles] = useState([]) - const { t } = useTranslationStore() + const { t } = useTranslation() const filterQuery = useCallback( (query: string) => { diff --git a/packages/ui/src/components/skeletons/index.ts b/packages/ui/src/components/skeletons/index.ts index 68e38dec70..ec9664236b 100644 --- a/packages/ui/src/components/skeletons/index.ts +++ b/packages/ui/src/components/skeletons/index.ts @@ -1,3 +1,4 @@ +export * from './components/skeleton' export * from './skeleton-list' export * from './skeleton-form' export * from './skeleton-table' diff --git a/packages/ui/src/context/index.ts b/packages/ui/src/context/index.ts index 8acaf24fe5..7aec64e54c 100644 --- a/packages/ui/src/context/index.ts +++ b/packages/ui/src/context/index.ts @@ -1,3 +1,4 @@ export * from './portal-context' export * from './router-context' export * from './theme' +export * from './translation-context' diff --git a/packages/ui/src/context/translation-context.tsx b/packages/ui/src/context/translation-context.tsx new file mode 100644 index 0000000000..8f653420de --- /dev/null +++ b/packages/ui/src/context/translation-context.tsx @@ -0,0 +1,51 @@ +import { createContext, PropsWithChildren, useContext, useMemo } from 'react' + +type Substitutions = Record + +export type TFunctionWithFallback = (key: string, fallback?: string, substitutions?: Substitutions) => string + +interface TranslationPayload { + t: TFunctionWithFallback +} + +type TranslationProviderProps = PropsWithChildren<{ + t?: TFunctionWithFallback +}> + +const defaultTranslator: TFunctionWithFallback = (_key, fallback = '') => fallback + +const TranslationContext = createContext({ + t: defaultTranslator +}) + +const escapeHtml = (unsafe: string): string => + unsafe + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') + +const applySubstitutions = (template: string, substitutions?: Substitutions): string => { + if (!substitutions) return template + + return template.replace(/{{(.*?)}}/g, (_, key: string) => escapeHtml(substitutions[key.trim()] ?? '')) +} + +export function TranslationProvider({ t: rawTranslator = defaultTranslator, children }: TranslationProviderProps) { + const payload = useMemo( + () => ({ + t: (key, fallback = '', substitutions) => { + const translation = rawTranslator(key, fallback) + return applySubstitutions(translation, substitutions) + } + }), + [rawTranslator] + ) + + return {children} +} + +export function useTranslation(): TranslationPayload { + return useContext(TranslationContext) +} diff --git a/packages/ui/src/views/components/FilterGroup.tsx b/packages/ui/src/views/components/FilterGroup.tsx index 095ba35699..79fc8a9fbf 100644 --- a/packages/ui/src/views/components/FilterGroup.tsx +++ b/packages/ui/src/views/components/FilterGroup.tsx @@ -1,11 +1,11 @@ import { ComponentProps, ReactNode, useMemo, useRef, useState } from 'react' import { ListActions, SearchBox } from '@/components' +import { useTranslation } from '@/context' import FilterSelect, { FilterSelectLabel } from '@components/filters/filter-select' import { FilterOptionConfig } from '@components/filters/types' import { Sort, SortValue } from '@components/sorts' import ListControlBar from '@views/repo/components/list-control-bar' -import { TFunction } from 'i18next' import { createFilters, FilterRefType } from '@harnessio/filters' @@ -20,7 +20,6 @@ interface FilterGroupProps< searchInput: string sortConfig: Omit, 'children'> handleInputChange: (e: React.ChangeEvent) => void - t: TFunction filterOptions: FilterOptionConfig[] headerAction?: ReactNode } @@ -37,12 +36,13 @@ const FilterGroup = < onFilterValueChange, searchInput, handleInputChange, - t, filterOptions, sortConfig, handleFilterOpen } = props + const { t } = useTranslation() + const FilterHandler = useMemo(() => createFilters(), []) const filtersRef = useRef | null>(null) const [openedFilter, setOpenedFilter] = useState() @@ -153,7 +153,6 @@ const FilterGroup = < setOpenedFilter={handleSetOpenedFilter} filterOptions={filterOptions} selectedFiltersCnt={selectedFiltersCnt} - t={t} /> diff --git a/packages/ui/src/views/connectors/components/ConnectorsPalleteSection.tsx b/packages/ui/src/views/connectors/components/ConnectorsPalleteSection.tsx index 4ebaf22ff2..997247063c 100644 --- a/packages/ui/src/views/connectors/components/ConnectorsPalleteSection.tsx +++ b/packages/ui/src/views/connectors/components/ConnectorsPalleteSection.tsx @@ -1,5 +1,5 @@ import { Icon, Logo } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' import { StepsPaletteContentLayout } from '@views/unified-pipeline-studio/components/palette-drawer/components/step-palette-content-layout' import { StepsPaletteItemLayout } from '@views/unified-pipeline-studio/components/palette-drawer/components/step-palette-item-layout' @@ -8,13 +8,12 @@ import { AnyConnectorDefinition } from '../types' export interface ConnectorsPaletteSectionProps { connectors: AnyConnectorDefinition[] onSelect: (step: AnyConnectorDefinition) => void - useTranslationStore: () => TranslationStore showCategory?: boolean } export function ConnectorsPaletteSection(props: ConnectorsPaletteSectionProps) { - const { connectors, onSelect, useTranslationStore, showCategory } = props - const { t: _t } = useTranslationStore() + const { connectors, onSelect, showCategory } = props + const { t: _t } = useTranslation() return ( diff --git a/packages/ui/src/views/connectors/components/connector-test-connection-dialog.tsx b/packages/ui/src/views/connectors/components/connector-test-connection-dialog.tsx index 007c901b43..928f70e9a6 100644 --- a/packages/ui/src/views/connectors/components/connector-test-connection-dialog.tsx +++ b/packages/ui/src/views/connectors/components/connector-test-connection-dialog.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react' +import { useTranslation } from '@/context' import { Button } from '@components/button' import { Dialog } from '@components/dialog' import { Icon } from '@components/icon' @@ -7,7 +8,6 @@ import { Layout } from '@components/layout' import { MarkdownViewer } from '@components/markdown-viewer' import { Progress } from '@components/progress' import { cn } from '@utils/cn' -import { TranslationStore } from '@views/repo' import { ExecutionState } from '@views/repo/pull-request' import { ConnectorEntity } from '../types' @@ -32,7 +32,6 @@ interface ConnectorTestConnectionDialogProps { percentageFilled?: number errorData?: { errors?: ErrorDetail[] } viewDocClick?: () => void - useTranslationStore: () => TranslationStore } export const ConnectorTestConnectionDialog = ({ @@ -46,10 +45,9 @@ export const ConnectorTestConnectionDialog = ({ percentageFilled = 50, errorMessage, errorData, - viewDocClick, - useTranslationStore + viewDocClick }: ConnectorTestConnectionDialogProps): JSX.Element => { - const { t } = useTranslationStore() + const { t } = useTranslation() const ConnectivityStatus = ({ status }: { status: string }): JSX.Element => { const getStatus = (): { status: string; color: string } | undefined => { diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-activities-list.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-activities-list.tsx index 143a07ef8c..6de8432c5a 100644 --- a/packages/ui/src/views/connectors/connector-details/connector-details-activities-list.tsx +++ b/packages/ui/src/views/connectors/connector-details/connector-details-activities-list.tsx @@ -1,4 +1,5 @@ import { NoData, SkeletonList, SkeletonTable, Table } from '@/components' +import { useTranslation } from '@/context' import { timeAgo } from '@/utils' import { cn } from '@utils/cn' import { ExecutionState } from '@views/index' @@ -30,12 +31,8 @@ const ConnectivityStatus = ({ status }: { status: string }): JSX.Element => { ) } -const ConnectorDetailsActivitiesList = ({ - useTranslationStore, - isLoading, - activities -}: ConnectorDetailsActivitiesListProps) => { - const { t } = useTranslationStore() +const ConnectorDetailsActivitiesList = ({ isLoading, activities }: ConnectorDetailsActivitiesListProps) => { + const { t } = useTranslation() const content = activities?.content if (isLoading) { return diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-activities.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-activities.tsx index 3a0cd1d984..41b3ac605f 100644 --- a/packages/ui/src/views/connectors/connector-details/connector-details-activities.tsx +++ b/packages/ui/src/views/connectors/connector-details/connector-details-activities.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' -import { useRouterContext } from '@/context' +import { useRouterContext, useTranslation } from '@/context' import { NoData, Pagination } from '@components/index' import { Spacer } from '@components/spacer' @@ -9,7 +9,6 @@ import { ConnectorDetailsActivityProps } from './types' const ConnectorDetailsActivities: FC = ({ apiConnectorActivityError, - useTranslationStore, currentPage, totalItems, pageSize, @@ -18,7 +17,7 @@ const ConnectorDetailsActivities: FC = ({ activities, ...props }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() const { navigate } = useRouterContext() if (apiConnectorActivityError) { @@ -49,14 +48,9 @@ const ConnectorDetailsActivities: FC = ({ return (
- + - +
) } diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-configuration.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-configuration.tsx index c0e8d8173a..176ee2c23d 100644 --- a/packages/ui/src/views/connectors/connector-details/connector-details-configuration.tsx +++ b/packages/ui/src/views/connectors/connector-details/connector-details-configuration.tsx @@ -1,6 +1,7 @@ import { FC } from 'react' import { Layout } from '@/components' +import { useTranslation } from '@/context' import { ConnectorEntityForm } from '../connector-entity-form' import { EntityIntent } from '../types' @@ -11,10 +12,9 @@ const ConnectorDetailsConfiguration: FC = ({ onSave, inputComponentFactory, getConnectorDefinition, - useTranslationStore, apiError }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() return (

@@ -23,7 +23,6 @@ const ConnectorDetailsConfiguration: FC = ({ = ({ connectorDetails, onTest, onDelete, - useTranslationStore, toConnectorsList }) => { const { createdAt, lastModifiedAt, lastTestedAt, lastConnectedAt, status } = connectorDetails - const { t } = useTranslationStore() + const { t } = useTranslation() return (
{toConnectorsList ? ( diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-layout.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-layout.tsx index 1cd05446ee..834f469baf 100644 --- a/packages/ui/src/views/connectors/connector-details/connector-details-layout.tsx +++ b/packages/ui/src/views/connectors/connector-details/connector-details-layout.tsx @@ -1,5 +1,6 @@ import { useState } from 'react' +import { useTranslation } from '@/context' import { SandboxLayout } from '@/views' import { Tabs } from '@components/index' @@ -10,11 +11,10 @@ const ConnectorDetailsLayout = ({ connectorDetails, onTest, onDelete, - useTranslationStore, children, toConnectorsList }: ConnectorDetailsLayoutProps) => { - const { t } = useTranslationStore() + const { t } = useTranslation() const [activeTab, setActiveTab] = useState(ConnectorDetailsTabsKeys.CONFIGURATION) const handleTabChange = (tab: string) => { @@ -28,7 +28,6 @@ const ConnectorDetailsLayout = ({ connectorDetails={connectorDetails} onTest={onTest} onDelete={onDelete} - useTranslationStore={useTranslationStore} toConnectorsList={toConnectorsList} /> ( const ConnectorDetailsReferenceList = ({ entities, - useTranslationStore, isLoading, toEntity, toScope }: ConnectorReferenceListProps): JSX.Element => { - const { t } = useTranslationStore() + const { t } = useTranslation() const content = entities?.content if (isLoading) { return diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-references.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-references.tsx index 74785ce097..9c7307b7d6 100644 --- a/packages/ui/src/views/connectors/connector-details/connector-details-references.tsx +++ b/packages/ui/src/views/connectors/connector-details/connector-details-references.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' -import { useRouterContext } from '@/context' +import { useRouterContext, useTranslation } from '@/context' import { ListActions, NoData, Pagination, SearchBox } from '@components/index' import { Spacer } from '@components/spacer' import { useDebounceSearch } from '@hooks/use-debounce-search' @@ -12,7 +12,6 @@ const ConnectorDetailsReference: FC = ({ searchQuery, setSearchQuery, apiConnectorRefError, - useTranslationStore, currentPage, totalItems, pageSize, @@ -23,7 +22,7 @@ const ConnectorDetailsReference: FC = ({ toScope, ...props }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() const { navigate } = useRouterContext() const { search: searchInput, handleSearchChange: handleInputChange } = useDebounceSearch({ @@ -73,14 +72,13 @@ const ConnectorDetailsReference: FC = ({ - +
) } diff --git a/packages/ui/src/views/connectors/connector-details/types.ts b/packages/ui/src/views/connectors/connector-details/types.ts index 13a1294529..9cf526f5c1 100644 --- a/packages/ui/src/views/connectors/connector-details/types.ts +++ b/packages/ui/src/views/connectors/connector-details/types.ts @@ -1,4 +1,3 @@ -import { TranslationStore } from '@/views' import { ExecutionState } from '@views/repo/pull-request' import { InputFactory } from '@harnessio/forms' @@ -62,7 +61,6 @@ export interface ConnectorActivityItem { export interface ConnectorReferenceListProps { entities: ConnectorReferenceList - useTranslationStore: () => TranslationStore isLoading: boolean toEntity: (entity: string) => void toScope: (scope: string) => void @@ -95,7 +93,6 @@ export interface ConnectorDetailsLayoutProps { connectorDetails: ConnectorDetailsItem onTest: (connectorId: string) => void onDelete: (connectorId: string) => void - useTranslationStore: () => TranslationStore children: React.ReactNode toConnectorsList?: () => string } @@ -104,7 +101,6 @@ export interface ConnectorDetailsReferenceProps { searchQuery: string setSearchQuery: (query?: string) => void apiConnectorRefError?: string - useTranslationStore: () => TranslationStore currentPage: number totalItems: number pageSize: number @@ -120,7 +116,6 @@ export interface ConnectorDetailsHeaderProps { connectorDetails: ConnectorDetailsItem onTest: (connectorId: string) => void onDelete: (connectorId: string) => void - useTranslationStore: () => TranslationStore toConnectorsList?: () => string } @@ -132,7 +127,6 @@ export enum ConnectorDetailsTabsKeys { export interface ConnectorDetailsConfigurationProps { connectorDetails: ConnectorDetailsItem - useTranslationStore: () => TranslationStore onSave: (values: onSubmitConnectorProps) => void getConnectorDefinition: (type: string) => AnyConnectorDefinition | undefined inputComponentFactory: InputFactory @@ -141,13 +135,11 @@ export interface ConnectorDetailsConfigurationProps { export interface ConnectorDetailsActivitiesListProps { activities: ConnectorActivityList - useTranslationStore: () => TranslationStore isLoading: boolean } export interface ConnectorDetailsActivityProps { apiConnectorActivityError?: string - useTranslationStore: () => TranslationStore currentPage: number totalItems: number pageSize: number diff --git a/packages/ui/src/views/connectors/connector-entity-form.tsx b/packages/ui/src/views/connectors/connector-entity-form.tsx index 3723a930ee..f0ae763f24 100644 --- a/packages/ui/src/views/connectors/connector-entity-form.tsx +++ b/packages/ui/src/views/connectors/connector-entity-form.tsx @@ -1,7 +1,7 @@ import { ElementType, FC, Fragment, useEffect, useMemo, useState } from 'react' import { Alert, Button, Drawer, EntityFormLayout } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' import { addNameInput } from '@views/unified-pipeline-studio/utils/entity-form-utils' import { @@ -48,7 +48,6 @@ interface ConnectorEntityFormProps { onFormSubmit?: (values: onSubmitConnectorProps) => void getConnectorDefinition: (type: string) => AnyConnectorDefinition | undefined onBack?: () => void - useTranslationStore: () => TranslationStore inputComponentFactory: InputFactory apiError?: string | null intent: EntityIntent @@ -61,12 +60,11 @@ export const ConnectorEntityForm: FC = ({ onFormSubmit, getConnectorDefinition, onBack, - useTranslationStore, inputComponentFactory, intent, isDrawer = false }) => { - const { t: _t } = useTranslationStore() + const { t: _t } = useTranslation() const [connectorEditValues, setConnectorEditValues] = useState({}) const { Content, Header, Title, Inner, Footer } = componentsMap[isDrawer ? 'true' : 'false'] const isCreate = intent === EntityIntent.CREATE diff --git a/packages/ui/src/views/connectors/connectors-list/connectors-list-page.tsx b/packages/ui/src/views/connectors/connectors-list/connectors-list-page.tsx index 8f3e852051..10af2e2d3c 100644 --- a/packages/ui/src/views/connectors/connectors-list/connectors-list-page.tsx +++ b/packages/ui/src/views/connectors/connectors-list/connectors-list-page.tsx @@ -1,7 +1,7 @@ import { FC, useState } from 'react' import { Button, NoData, Pagination, Spacer } from '@/components' -import { useRouterContext } from '@/context' +import { useRouterContext, useTranslation } from '@/context' import { useDebounceSearch } from '@/hooks' import { SandboxLayout } from '@/views' import { cn } from '@utils/cn' @@ -18,7 +18,6 @@ const ConnectorsListPage: FC = ({ setSearchQuery, isError, errorMessage, - useTranslationStore, currentPage, totalItems, pageSize, @@ -30,7 +29,7 @@ const ConnectorsListPage: FC = ({ onCreate, ...props }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() const { navigate } = useRouterContext() const [_selectedFiltersCnt, setSelectedFiltersCnt] = useState(0) @@ -94,17 +93,11 @@ const ConnectorsListPage: FC = ({ searchInput={searchInput} handleInputChange={handleInputChange} headerAction={} - t={t} filterOptions={CONNECTOR_FILTER_OPTIONS} /> - - + + ) diff --git a/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx b/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx index 1b5d3a308b..d14c8768be 100644 --- a/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx +++ b/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx @@ -12,8 +12,8 @@ import { Text, Tooltip } from '@/components' +import { useTranslation } from '@/context' import { timeAgo } from '@/utils' -import { TranslationStore } from '@views/repo' import { ExecutionState } from '@views/repo/pull-request' import { ConnectorTestConnectionDialog } from '../components/connector-test-connection-dialog' @@ -26,15 +26,8 @@ const Title = ({ title }: { title: string }): JSX.Element => ( ) -const ConnectivityStatus = ({ - item, - useTranslationStore -}: { - item: ConnectorListItem - connectorDetailUrl: string - useTranslationStore: () => TranslationStore -}): JSX.Element => { - const { t } = useTranslationStore() +const ConnectivityStatus = ({ item }: { item: ConnectorListItem; connectorDetailUrl: string }): JSX.Element => { + const { t } = useTranslation() const isSuccess = item?.status?.status?.toLowerCase() === ExecutionState.SUCCESS.toLowerCase() const [errorConnectionOpen, setErrorConnectionOpen] = useState(false) @@ -74,7 +67,6 @@ const ConnectivityStatus = ({ errorMessage={item?.status?.errorSummary} isOpen={errorConnectionOpen} onClose={() => setErrorConnectionOpen(false)} - useTranslationStore={useTranslationStore} errorData={item.status?.errors ? { errors: item.status?.errors } : undefined} /> @@ -83,13 +75,12 @@ const ConnectivityStatus = ({ export function ConnectorsList({ connectors, - useTranslationStore, isLoading, toConnectorDetails, onDeleteConnector, onToggleFavoriteConnector }: ConnectorListProps): JSX.Element { - const { t } = useTranslationStore() + const { t } = useTranslation() if (isLoading) { return @@ -153,7 +144,6 @@ export function ConnectorsList({ ) : null} diff --git a/packages/ui/src/views/connectors/connectors-list/filter-options.tsx b/packages/ui/src/views/connectors/connectors-list/filter-options.tsx index 58f747b288..c76ed51a21 100644 --- a/packages/ui/src/views/connectors/connectors-list/filter-options.tsx +++ b/packages/ui/src/views/connectors/connectors-list/filter-options.tsx @@ -1,12 +1,14 @@ +import { TFunctionWithFallback } from '@/context' import { CheckboxOptions, FilterFieldTypes, FilterOptionConfig } from '@components/filters/types' import { Icon } from '@components/icon' -import { TFunction } from 'i18next' import { booleanParser } from '@harnessio/filters' import { ConnectorListFilters } from './types' -export const getConnectorListFilterOptions = (t: TFunction): Array> => { +export const getConnectorListFilterOptions = ( + t: TFunctionWithFallback +): Array> => { const options = [ { label: t('views:connectors.filterOptions.statusOption.success', 'Success'), value: 'SUCCESS' }, { label: t('views:connectors.filterOptions.statusOption.failure', 'Failed'), value: 'FAILURE' } diff --git a/packages/ui/src/views/connectors/connectors-list/types.ts b/packages/ui/src/views/connectors/connectors-list/types.ts index 2e73edb345..0b83eaa15c 100644 --- a/packages/ui/src/views/connectors/connectors-list/types.ts +++ b/packages/ui/src/views/connectors/connectors-list/types.ts @@ -1,6 +1,5 @@ import { CheckboxOptions } from '@components/filters/types' import { SortValue } from '@components/sorts' -import { TranslationStore } from '@views/repo' import { ExecutionState } from '@views/repo/pull-request' import { ConnectorConfigType } from '../types' @@ -38,7 +37,6 @@ export interface ConnectorListItem { export interface ConnectorListProps extends Partial { connectors: ConnectorListItem[] - useTranslationStore: () => TranslationStore isLoading: boolean onEditConnector: (connector: ConnectorListItem) => void onTestConnection: (connector: ConnectorListItem) => void diff --git a/packages/ui/src/views/connectors/connectors-pallete-drawer.tsx b/packages/ui/src/views/connectors/connectors-pallete-drawer.tsx index b62d5da43b..d3ec44a90a 100644 --- a/packages/ui/src/views/connectors/connectors-pallete-drawer.tsx +++ b/packages/ui/src/views/connectors/connectors-pallete-drawer.tsx @@ -1,7 +1,7 @@ import { ElementType, useMemo, useState } from 'react' import { Button, Drawer, EntityFormLayout, Input } from '@/components' -import { TranslationStore } from '@/views' +import { useTranslation } from '@/context' import { ConnectorsPaletteSection } from './components/ConnectorsPalleteSection' import { AnyConnectorDefinition, ConnectorEntity } from './types' @@ -34,7 +34,6 @@ interface ConnectorsPaletteProps { requestClose?: () => void setConnectorEntity: (value: ConnectorEntity | null) => void onSelectConnector: () => void - useTranslationStore: () => TranslationStore title?: string isDrawer?: boolean showCategory?: boolean @@ -45,12 +44,11 @@ export const ConnectorsPalette = ({ requestClose, setConnectorEntity, onSelectConnector, - useTranslationStore, title = 'Connector Setup', isDrawer = false, showCategory }: ConnectorsPaletteProps): JSX.Element => { - const { t: _t } = useTranslationStore() + const { t: _t } = useTranslation() const { Header, Title, Content, Inner } = componentsMap[isDrawer ? 'true' : 'false'] const [query, setQuery] = useState('') @@ -83,7 +81,6 @@ export const ConnectorsPalette = ({ }) onSelectConnector() }} - useTranslationStore={useTranslationStore} showCategory={showCategory} /> diff --git a/packages/ui/src/views/delegates/components/delegate-connectivity-list.tsx b/packages/ui/src/views/delegates/components/delegate-connectivity-list.tsx index 2c7f720f07..26bad2a417 100644 --- a/packages/ui/src/views/delegates/components/delegate-connectivity-list.tsx +++ b/packages/ui/src/views/delegates/components/delegate-connectivity-list.tsx @@ -1,4 +1,5 @@ import { Icon, NoData, SkeletonList, SkeletonTable, StatusBadge, Table } from '@/components' +import { useTranslation } from '@/context' import { timeAgo } from '@/utils' import { cn } from '@utils/cn' import { defaultTo } from 'lodash-es' @@ -11,12 +12,11 @@ const Title = ({ title }: { title: string }): JSX.Element => ( export function DelegateConnectivityList({ delegates, - useTranslationStore, isLoading, selectedTags, isDelegateSelected }: DelegateConnectivityListProps): JSX.Element { - const { t } = useTranslationStore() + const { t } = useTranslation() if (isLoading) { return @@ -40,10 +40,10 @@ export function DelegateConnectivityList({ > - Delegate - Heartbeat - Tags - Selected + {t('views:delegates.delegate', 'Delegate')} + {t('views:delegates.heartbeat', 'Heartbeat')} + {t('views:repos.tags', 'Tags')} + {t('views:delegates.selected', 'Selected')} {isLoading ? ( diff --git a/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx b/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx index 0a6f5ea944..0a503bf10e 100644 --- a/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx +++ b/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx @@ -1,4 +1,4 @@ -import { ElementType, FC, useCallback, useEffect, useState } from 'react' +import { ElementType, FC, useEffect, useMemo, useState } from 'react' import { useForm, type SubmitHandler } from 'react-hook-form' import { @@ -7,15 +7,15 @@ import { Drawer, EntityFormLayout, Fieldset, + FormInput, FormSeparator, FormWrapper, Link, - MultiSelect, - MultiSelectOptionType, Spacer, Text } from '@/components' -import { DelegateConnectivityList, DelegateItem, TranslationStore } from '@/views' +import { useTranslation } from '@/context' +import { DelegateConnectivityList, DelegateItem } from '@/views' import { zodResolver } from '@hookform/resolvers/zod' import { RadioSelect, RadioSelectOption } from '@views/components/RadioSelect' import { z } from 'zod' @@ -48,7 +48,7 @@ const delegateSelectorFormSchema = z tags: z.array( z.object({ id: z.string(), - label: z.string() + key: z.string() }) ) }) @@ -67,7 +67,6 @@ export type DelegateSelectorFormFields = z.infer TranslationStore onFormSubmit: (data: DelegateSelectorFormFields) => void onBack: () => void apiError?: string @@ -82,7 +81,6 @@ export interface DelegateSelectorFormProps { export const DelegateSelectorForm: FC = ({ delegates, tagsList, - useTranslationStore, onFormSubmit, onBack, apiError = null, @@ -93,7 +91,8 @@ export const DelegateSelectorForm: FC = ({ disableAnyDelegate, isDrawer = false }) => { - const { t } = useTranslationStore() + const { t } = useTranslation() + const [searchTag, setSearchTag] = useState('') const [matchedDelegates, setMatchedDelegates] = useState(0) @@ -104,7 +103,7 @@ export const DelegateSelectorForm: FC = ({ mode: 'onChange', defaultValues: { type: preSelectedTags?.length || disableAnyDelegate ? DelegateSelectionTypes.TAGS : DelegateSelectionTypes.ANY, - tags: preSelectedTags?.length ? preSelectedTags?.map(tag => ({ id: tag, label: tag })) : [] + tags: preSelectedTags?.length ? preSelectedTags?.map(tag => ({ id: tag, key: tag })) : [] } }) @@ -137,47 +136,30 @@ export const DelegateSelectorForm: FC = ({ const options: Array> = [ { id: 'any', - title: 'Any delegate', - description: 'Use any available delegate', + title: t('views:delegates.anyDelegate', 'Any delegate'), + description: t('views:delegates.useAnyDelegate', 'Use any available delegate'), value: DelegateSelectionTypes.ANY, disabled: disableAnyDelegate }, { id: 'tags', - title: 'Delegate with tags', - description: 'Use delegate with following tags', + title: t('views:delegates.delegateTags', 'Delegate with tags'), + description: t('views:delegates.useDelegateTags', 'Use delegate with following tags'), value: DelegateSelectionTypes.TAGS } ] - const handleTagChange = useCallback( - (option: MultiSelectOptionType) => { - const selectedTagIds = selectedTags?.map(tag => tag.id) - - setValue!( - 'tags', - selectedTagIds.includes(option.id as string) - ? selectedTags.filter(tag => tag.id !== option.id) - : [ - ...selectedTags, - { - id: option.id as string, - label: option.label - } - ], - { shouldValidate: true } - ) - }, - [selectedTags, setValue] - ) + const filteredTags = useMemo(() => { + return tagsList?.filter(tag => tag?.toLowerCase().includes(searchTag?.toLowerCase())) + }, [searchTag, tagsList]) return ( <>
- Haven't installed a delegate yet? + {t('views:delegates.noDelegatesInstalled', `Haven't installed a delegate yet?`)} - Install delegate + {t('views:delegates.installDelegate', 'Install Delegate')}
@@ -203,26 +185,26 @@ export const DelegateSelectorForm: FC = ({ <>
{/* TAGS */} - { - return { id: tag, label: tag } + { + return { id: tag, key: tag } })} - searchValue={searchTag} - handleChangeSearchValue={setSearchTag} + searchQuery={searchTag} + setSearchQuery={setSearchTag} error={errors.tags?.message?.toString()} />
- Test Delegate connectivity -

Matches: {matchedDelegates}

+ {t('views:delegates.testDelegate', 'Test Delegate connectivity')} +

+ {t('views:delegates.delegateMatches', 'Matches: ')} + {matchedDelegates} +

tag.id)} isDelegateSelected={isDelegateSelected} @@ -233,13 +215,13 @@ export const DelegateSelectorForm: FC = ({