@dovetail-v2/refine 0.0.28 → 0.0.29

package/lib/src/components/CronJobDropdown/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, useUIKit } from '@cloudtower/eagle';
 import { SuspendedPause16GradientGrayIcon, VmResume16Icon, } from '@cloudtower/icons-react';
 import { useResource, useUpdate } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import { pruneBeforeEdit } from '../../utils/k8s';
 import K8sDropdown from '../K8sDropdown';
 export function CronJobDropdown(props) {
@@ -11,7 +11,7 @@ export function CronJobDropdown(props) {
     const kit = useUIKit();
     const { resource } = useResource();
     const { mutate } = useUpdate();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const suspended = Boolean(spec?.suspend);
     return (_jsx(K8sDropdown, { record: record, children: _jsx(kit.menu.Item, { onClick: () => {
                 const v = suspended ? record.resume() : record.suspend();

package/lib/src/components/CronjobJobsTable/index.js

@@ -3,8 +3,8 @@ import { useUIKit } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useList } from '@refinedev/core';
 import { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { AgeColumnRenderer, CompletionsCountColumnRenderer, DurationColumnRenderer, NameColumnRenderer, NameSpaceColumnRenderer, StateDisplayColumnRenderer, WorkloadImageColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
 import Table from '../Table';
 import { TableToolBar } from '../Table/TableToolBar';
 function matchOwner(job, owner) {
@@ -21,7 +21,7 @@ function matchOwner(job, owner) {
     return match;
 }
 export const CronjobJobsTable = ({ owner }) => {
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const kit = useUIKit();
     const [selectedKeys, setSelectedKeys] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);

package/lib/src/components/DeleteButton/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
 import { useResource, useParsed } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
 import { useDeleteModal } from '../../hooks/useDeleteModal';
+import { useD2Translation } from '../../i18n';
 export const DeleteButton = () => {
     const { resource } = useResource();
     const { id } = useParsed();
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const { modalProps, visible, openDeleteConfirmModal } = useDeleteModal(resource?.name || '');
     return (_jsxs(_Fragment, { children: [_jsx(kit.button, { type: "primary", danger: true, onClick: () => openDeleteConfirmModal(id || ''), children: t('dovetail.delete') }), visible ? _jsx(kit.modal, { ...modalProps }) : null] }));
 };

package/lib/src/components/DeleteManyButton/index.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useUIKit } from '@cloudtower/eagle';
 import { useResource } from '@refinedev/core';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useDeleteManyModal } from '../../hooks/useDeleteModal/useDeleteManyModal';
+import { useD2Translation } from '../../i18n';
 export const DeleteManyButton = props => {
     const { resource } = useResource();
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const { modalProps, visible, setVisible } = useDeleteManyModal(resource?.name || '', props.ids);
     const onClick = useCallback(() => {
         setVisible(true);

package/lib/src/components/EditField/index.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUIKit, pushModal, popModal } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { FormErrorAlert } from 'src/components/FormErrorAlert';
 import { useSubmitForm } from 'src/hooks/useSubmitForm';
+import { useD2Translation } from '../../i18n';
 const EditFieldModalStyle = css `
 .ant-modal-content {
   border-radius: 16px;
@@ -23,7 +23,7 @@ const EditButtonStyle = css `
 export function EditFieldModal(props) {
     const { title, formRef: form, renderContent } = props;
     const kit = useUIKit();
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const { submitting, errorMsgs, reset, onSubmit, } = useSubmitForm({
         formRef: form,
         onSubmitSuccess: popModal
@@ -37,7 +37,7 @@ export function EditFieldModal(props) {
 export function EditField(props) {
     const { modalProps } = props;
     const kit = useUIKit();
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     return (_jsx(kit.button, { className: EditButtonStyle, type: "link", onClick: () => {
             pushModal({
                 component: EditFieldModal,

package/lib/src/components/ErrorContent/index.js

@@ -3,7 +3,7 @@ import { kitContext, Typo } from '@cloudtower/eagle';
 import { cx } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 export const ErrorWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ export const ErrorContent = styled.div `
 const WidgetErrorContent = props => {
     const { refetch, errorText, hiddenRetry } = props;
     const kit = useContext(kitContext);
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsx(ErrorWrapper, { className: props.className, style: props.style, children: _jsxs(ErrorContent, { children: [_jsx("p", { className: cx(Typo.Label.l1_regular_title, 'title'), children: errorText || t('dovetail.obtain_data_error') }), hiddenRetry ? null : (_jsx(kit.button, { size: "small", type: "ordinary", onClick: e => {
                         e.stopPropagation();
                         refetch?.();

package/lib/src/components/EventsTable/EventsTable.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useList, useParsed } from '@refinedev/core';
 import { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { AgeColumnRenderer, CommonSorter, NameSpaceColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
 import Table from '../Table';
 export const EventsTable = ({}) => {
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const [currentPage, setCurrentPage] = useState(1);
     const { data, isLoading } = useList({
         resource: 'events',

package/lib/src/components/FormLayout/index.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useUIKit, Typo } from '@cloudtower/eagle';
 import { css, cx } from '@linaria/core';
 import { useResource } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 const WrapperStyle = css `
   height: 100%;
   display: flex;
@@ -15,7 +15,7 @@ function FormLayout(props) {
     const { saveButtonProps } = props;
     const kit = useUIKit();
     const { resource, action } = useResource();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsxs("div", { className: WrapperStyle, children: [_jsxs("span", { className: cx(Typo.Display.d2_bold_title, TitleStyle), children: [resource?.meta?.kind, ":", ' ', action === 'create' ? t('dovetail.create') : t('dovetail.edit')] }), _jsx(kit.divider, {}), props.children, _jsx(kit.form.Item, { children: _jsx(kit.button, { type: "primary", ...saveButtonProps, children: t('dovetail.save') }) })] }));
 }
 export default FormLayout;

package/lib/src/components/FormModal/index.js

@@ -4,9 +4,9 @@ import { useUIKit, popModal } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useResource } from '@refinedev/core';
 import { useState, useContext, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import YamlForm from 'src/components/YamlForm';
 import ConfigsContext from 'src/contexts/configs';
+import { useD2Translation } from '../../i18n';
 const FullscreenModalStyle = css `
   &.ant-modal.fullscreen {
     .ant-modal-header {
@@ -24,7 +24,7 @@ const FullscreenModalStyle = css `
 `;
 export function FormModal(props) {
     const { resource: resourceFromProps, id, formProps, renderForm } = props;
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const { resource } = useResource();
     const configs = useContext(ConfigsContext);
     const [saveButtonProps, setSaveButtonProps] = useState({});

package/lib/src/components/ImageNames/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typo, useUIKit } from '@cloudtower/eagle';
 import { cx, css } from '@linaria/core';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 const MoreTriggerStyle = css `
   color: #bec1d2;
 `;
 export const ImageNames = ({ value }) => {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsxs("span", { children: [_jsx("span", { children: value[0] }), value.length > 1 && (_jsx(kit.tooltip, { title: _jsx(_Fragment, { children: value.slice(1).map((name, index) => {
                         return _jsx("div", { children: name }, index);
                     }) }), children: _jsxs("div", { className: cx(Typo.Label.l4_regular, MoreTriggerStyle), children: ["+", value.length - 1, " ", t('dovetail.more')] }) }))] }));

package/lib/src/components/IngressRulesTable/IngressRulesTable.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import { addId } from '../../utils/addId';
 import { ResourceLink } from '../ResourceLink';
 import ErrorContent from '../Table/ErrorContent';
 export const IngressRulesTable = ({ ingress }) => {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const rows = useMemo(() => {
         return addId(ingress.flattenedRules, 'fullPath');
     }, [ingress.flattenedRules]);

package/lib/src/components/K8sDropdown/index.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Icon, useUIKit } from '@cloudtower/eagle';
 import { EditPen16PrimaryIcon, MoreEllipsis316BoldBlueIcon, TrashBinDelete16Icon, Download16GradientBlueIcon, } from '@cloudtower/icons-react';
 import { useResource } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
 import { useDeleteModal } from 'src/hooks/useDeleteModal';
 import { useDownloadYAML } from 'src/hooks/useDownloadYAML';
 import { useOpenForm } from 'src/hooks/useOpenForm';
 import { useGlobalStore } from '../../hooks';
+import { useD2Translation } from '../../i18n';
 function K8sDropdown(props) {
     const { record } = props;
     const kit = useUIKit();
@@ -15,7 +15,7 @@ function K8sDropdown(props) {
     const resource = useResourceResult.resource;
     const { modalProps, visible, openDeleteConfirmModal } = useDeleteModal(resource?.name || '');
     const download = useDownloadYAML();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const openForm = useOpenForm({ id: record.id });
     return (_jsxs(_Fragment, { children: [_jsx(kit.dropdown, { overlay: _jsxs(kit.menu, { children: [_jsx(kit.menuItem, { onClick: openForm, children: _jsx(Icon, { src: EditPen16PrimaryIcon, children: t('dovetail.edit') }) }), _jsx(kit.menuItem, { danger: true, onClick: () => {
                                 openDeleteConfirmModal(record.id);

package/lib/src/components/KeyValueData/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUIKit, Typo } from '@cloudtower/eagle';
 import { css, cx } from '@linaria/core';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 const WrapperStyle = css `
   width: 100%;
 `;
@@ -43,7 +43,7 @@ export function KeyValueData(props) {
     const { datas, expandable } = props;
     const [isExpand, setIsExpand] = useState(expandable ? false : true);
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsxs("div", { className: WrapperStyle, children: [_jsxs("div", { className: HeaderStyle, children: [_jsx("span", { className: HeaderItemStyle, children: Object.keys(datas).length }), _jsx(kit.button, { type: "link", className: ExpandButtonStyle, onClick: () => {
                             setIsExpand(!isExpand);
                         }, children: isExpand ? t('dovetail.fold') : t('dovetail.expand') })] }), isExpand ? (Object.keys(datas).map(key => (_jsxs("div", { className: ContentBlockStyle, children: [_jsx("span", { className: cx(KeyStyle, Typo.Label.l4_regular), children: key }), _jsx("span", { className: Typo.Label.l4_regular, children: datas[key] })] }, key)))) : null] }));

package/lib/src/components/NamespacesFilter/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
 import { useList } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
 import { useLocalStorage } from 'usehooks-ts';
+import { useD2Translation } from '../../i18n';
 export const NS_STORE_KEY = 'namespace-filter';
 export const ALL_NS = '_all';
 export const useNamespacesFilter = () => {
@@ -13,7 +13,7 @@ export const useNamespacesFilter = () => {
 };
 export const NamespacesFilter = () => {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const { data } = useList({
         resource: 'namespaces',
         meta: {

package/lib/src/components/NetworkPolicyRulesTable/NetworkPolicyRulesTable.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
 import { flatten, get } from 'lodash-es';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import { addId } from '../../utils/addId';
 import ErrorContent from '../Table/ErrorContent';
 import { Tags } from '../Tags';
@@ -17,7 +17,7 @@ export const NetworkPolicyRulesTable = ({ ingressOrEgress }) => {
 };
 const IngressRuleTable = ({ peers }) => {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const rows = useMemo(() => {
         const rows = peers?.map(p => {
             return Object.keys(p).map(key => {

package/lib/src/components/PodContainersTable/PodContainersTable.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, useUIKit } from '@cloudtower/eagle';
 import { CheckmarkDoneSuccessCorrect16BoldGreenIcon, XmarkFailed16BoldRedIcon, } from '@cloudtower/icons-react';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { CommonSorter } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
 import { addId } from '../../utils/addId';
 import { StateTag } from '../StateTag';
 import Time from '../Time';
 export const PodContainersTable = ({ containerStatuses, initContainerStatuses, }) => {
     const kit = useUIKit();
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const columns = useMemo(() => [
         {
             key: 'state',

package/lib/src/components/PodLog/index.js

@@ -5,7 +5,7 @@ import { css } from '@linaria/core';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { useDataProvider } from '@refinedev/core';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import '@patternfly/react-core/dist/styles/base-no-reset.css';
 const ToolbarStyle = css `
   margin-bottom: 8px;
@@ -34,7 +34,7 @@ export const PodLog = ({ pod }) => {
     const abortControllerRef = useRef(null);
     const dataProvider = useDataProvider();
     const apiUrl = dataProvider()['getApiUrl']();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     useEffect(() => {
         if (!paused && logs.length > 0) {
             setCurrentItemCount(logs.length);

package/lib/src/components/ResourceCRUD/list/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
 import { useEagleTable } from '../../../hooks/useEagleTable';
 import { NameColumnRenderer } from '../../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
 import { ListPage } from '../../ListPage';
 export function ResourceList(props) {
     const { formatter, name, columns, Dropdown } = props;
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const { tableProps, selectedKeys } = useEagleTable({
         useTableParams: {},
         columns: [NameColumnRenderer(i18n), ...columns],

package/lib/src/components/ShowContent/ShowContent.js

@@ -5,12 +5,12 @@ import { useParsed, useResource, useShow } from '@refinedev/core';
 import yaml from 'js-yaml';
 import { get, omit } from 'lodash-es';
 import { useState, useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import K8sDropdown from 'src/components/K8sDropdown';
 import { KeyValueData } from 'src/components/KeyValueData';
 import MonacoYamlEditor from 'src/components/YamlEditor/MonacoYamlEditor';
 import useK8sYamlEditor from 'src/hooks/useK8sYamlEditor';
 import { useGlobalStore } from '../../hooks';
+import { useD2Translation } from '../../i18n';
 import { StateTag } from '../StateTag';
 import { Tags } from '../Tags';
 import Time from '../Time';
@@ -60,7 +60,7 @@ export const ShowContent = (props) => {
         id: parsed?.params?.id,
         liveMode: mode === Mode.Yaml ? 'off' : 'auto',
     });
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const { fold } = useK8sYamlEditor();
     const { data } = queryResult;
     const schema = useMemo(() => ({}), []);

package/lib/src/components/StateTag/StateTag.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
-import { useTranslation } from 'react-i18next';
 import { WorkloadState } from '../../constants';
+import { useD2Translation } from '../../i18n';
 export const StateTag = ({ state = WorkloadState.UPDATEING, className }) => {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const colorMap = {
         updating: 'blue',
         ready: 'green',

package/lib/src/components/Table/ErrorContent.js

@@ -3,7 +3,7 @@ import { kitContext } from '@cloudtower/eagle';
 import { Typo } from '@cloudtower/eagle';
 import { cx, css } from '@linaria/core';
 import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 export const ErrorWrapper = css `
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ export const ErrorContent = css `
 const WidgetErrorContent = props => {
     const { refetch } = props;
     const kit = useContext(kitContext);
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsx("div", { className: ErrorWrapper, style: props.style, children: _jsxs("div", { className: ErrorContent, children: [_jsx("p", { className: cx(Typo.Label.l1_regular_title, 'title'), children: props.errorText || t('dovetail.obtain_data_error') }), refetch ? (_jsx(kit.button, { type: "ordinary", onClick: e => {
                         e.stopPropagation();
                         refetch?.();

package/lib/src/components/Table/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUIKit } from '@cloudtower/eagle';
 import { css, cx } from '@linaria/core';
 import { useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import ErrorContent from './ErrorContent';
 import { AuxiliaryLine } from './TableWidgets';
 const TableContainerStyle = css `
@@ -22,7 +22,7 @@ const TableContainerStyle = css `
 `;
 function Table(props) {
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const { loading, error, data: dataSource, rowKey, columns, scroll, currentPage, currentSize, RowMenu, refetch, onSelect, onPageChange, onSizeChange, } = props;
     const auxiliaryLineRef = useRef(null);
     const wrapperRef = useRef(null);

package/lib/src/components/WorkloadDropdown/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, useUIKit } from '@cloudtower/eagle';
 import { DynamicResourceSchedule16BlueIcon } from '@cloudtower/icons-react';
 import { useResource, useUpdate } from '@refinedev/core';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import { pruneBeforeEdit } from '../../utils/k8s';
 import K8sDropdown from '../K8sDropdown';
 export function WorkloadDropdown(props) {
@@ -10,7 +10,7 @@ export function WorkloadDropdown(props) {
     const kit = useUIKit();
     const { resource } = useResource();
     const { mutate } = useUpdate();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     return (_jsx(K8sDropdown, { record: record, children: _jsx(kit.menu.Item, { onClick: () => {
                 const v = record.redeploy();
                 const id = v.id;

package/lib/src/components/WorkloadPodsTable/WorkloadPodsTable.js

@@ -3,13 +3,13 @@ import { useUIKit } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useList } from '@refinedev/core';
 import { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { matchSelector } from 'src/utils/match-selector';
 import { NameColumnRenderer, NodeNameColumnRenderer, RestartCountColumnRenderer, StateDisplayColumnRenderer, WorkloadImageColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
 import Table from '../Table';
 import { TableToolBar } from '../Table/TableToolBar';
 export const WorkloadPodsTable = ({ selector, hideToolbar, }) => {
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const kit = useUIKit();
     const [selectedKeys, setSelectedKeys] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);

package/lib/src/components/YamlEditor/YamlEditorComponent.js

@@ -4,7 +4,7 @@ import { Icon } from '@cloudtower/eagle';
 import { ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, Retry16GradientGrayIcon, Retry16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, EditPen16GradientGrayIcon, EditPen16GradientBlueIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, } from '@cloudtower/icons-react';
 import { cx } from '@linaria/core';
 import React, { Suspense, useCallback, useRef, useState, useImperativeHandle, forwardRef, } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 import { Separator } from '../Separator';
 import { ErrorMsgStyle, IconStyle, PlainCodeStyle, TitleStyle, ToolBarStyle, ToolBarHeaderStyle, ErrorIconStyle, WrapperStyle, ErrorWrapperStyle, } from './style';
 const MonacoYamlEditor = React.lazy(() => import('./MonacoYamlEditor'));
@@ -12,7 +12,7 @@ const MonacoYamlDiffEditor = React.lazy(() => import('./MonacoYamlDiffEditor'));
 export const YamlEditorComponent = forwardRef(function YamlEditorComponent(props, ref) {
     const { title, collapsable = true, isDefaultCollapsed, defaultValue = '', height, readOnly, errorMsgs = [], schema, eleRef, className, } = props;
     const kit = useUIKit();
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const [isCollapsed, setIsCollapsed] = useState(collapsable ? isDefaultCollapsed : false);
     const [isDiff, setIsDiff] = useState(false);
     const [value, setValue] = useState(defaultValue);

package/lib/src/components/YamlForm/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useUIKit } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import React, { useMemo, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import ErrorContent from 'src/components/ErrorContent';
 import { FormErrorAlert } from 'src/components/FormErrorAlert';
 import FormLayout from 'src/components/FormLayout';
@@ -10,6 +9,7 @@ import { YamlEditorComponent } from 'src/components/YamlEditor/YamlEditorCompone
 import { BASE_INIT_VALUE } from 'src/constants/k8s';
 import useEagleForm from 'src/hooks/useEagleForm';
 import { getCommonErrors } from 'src/utils/error';
+import { useD2Translation } from '../../i18n';
 const FormStyle = css `
 `;
 const EditorStyle = css `
@@ -35,7 +35,7 @@ function YamlForm(props) {
         initialValuesForCreate: props.initialValues ?? BASE_INIT_VALUE
     });
     const kit = useUIKit();
-    const { t, i18n } = useTranslation();
+    const { t, i18n } = useD2Translation();
     const responseErrors = errorResponseBody
         ? getCommonErrors(errorResponseBody, i18n)
         : [];

package/lib/src/hooks/useDeleteModal/useDeleteManyModal.js

@@ -1,10 +1,10 @@
 import { useDeleteMany } from '@refinedev/core';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 export const useDeleteManyModal = (resource, ids) => {
     const { mutate } = useDeleteMany();
     const [visible, setVisible] = useState(false);
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const modalProps = {
         title: t('dovetail.delete'),
         okText: t('dovetail.delete'),

package/lib/src/hooks/useDeleteModal/useDeleteModal.js

@@ -1,12 +1,12 @@
 import { useDelete, useNavigation } from '@refinedev/core';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useD2Translation } from '../../i18n';
 export const useDeleteModal = (resource) => {
     const { mutate } = useDelete();
     const [visible, setVisible] = useState(false);
     const navigation = useNavigation();
     const [id, setId] = useState('');
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const modalProps = {
         title: t('dovetail.delete'),
         okText: t('dovetail.delete'),

package/lib/src/hooks/useEagleForm.js

@@ -2,17 +2,17 @@ import { useUIKit } from '@cloudtower/eagle';
 import { useForm as useFormCore, useWarnAboutChange, pickNotDeprecated, useResource, } from '@refinedev/core';
 import yaml from 'js-yaml';
 import React, { useRef, useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import useK8sYamlEditor from 'src/hooks/useK8sYamlEditor';
 import { useSchema } from 'src/hooks/useSchema';
 import { pruneBeforeEdit } from 'src/utils/k8s';
 import { generateYamlBySchema } from 'src/utils/yaml';
 import { useForm as useFormSF } from 'sunflower-antd';
+import { useD2Translation } from '../i18n';
 import { useGlobalStore } from './useGlobalStore';
 const useEagleForm = ({ action, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter = false, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, } = {}) => {
     const editor = useRef(null);
     const isFoldRef = useRef(false);
-    const { t } = useTranslation();
+    const { t } = useD2Translation();
     const [enableEditor, setEnableEditor] = useState(false);
     const [isYamlValid, setIsYamlValid] = useState(true);
     const [isSchemaValid, setIsSchemaValid] = useState(true);

package/lib/src/hooks/useSubmitForm.js

@@ -1,9 +1,9 @@
 import { useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { getCommonErrors } from 'src/utils/error';
+import { useD2Translation } from '../i18n';
 export function useSubmitForm(options) {
     const { formRef, onSubmitSuccess } = options;
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const [submitting, setSubmitting] = useState(false);
     const [errorMsgs, setErrorMsgs] = useState([]);
     const reset = useCallback(() => {

package/lib/src/i18n.d.ts

@@ -114,4 +114,5 @@ export declare const resources: {
         };
     };
 };
+export declare const useD2Translation: () => import("react-i18next").UseTranslationResponse<"translation", undefined>;
 export default i18n;

package/lib/src/i18n.js

@@ -1,5 +1,5 @@
 import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
 import { D2Locales } from 'src/locales';
 export const resources = D2Locales;
 i18n.use(initReactI18next).init({
@@ -11,4 +11,9 @@ i18n.use(initReactI18next).init({
     lng: 'zh-CN',
     nsSeparator: '.',
 });
+export const useD2Translation = () => {
+    return useTranslation(undefined, {
+        i18n,
+    });
+};
 export default i18n;

package/lib/src/pages/cronjobs/list/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
 import { CronJobDropdown } from 'src/components/CronJobDropdown';
 import { ListPage } from 'src/components/ListPage';
 import Time from 'src/components/Time';
 import { useEagleTable } from 'src/hooks/useEagleTable';
 import { AgeColumnRenderer, WorkloadImageColumnRenderer, NameColumnRenderer, NameSpaceColumnRenderer, StateDisplayColumnRenderer, } from 'src/hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
 export const CronJobList = () => {
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     const { tableProps, selectedKeys } = useEagleTable({
         useTableParams: {},
         columns: [

package/lib/src/pages/cronjobs/show/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
 import { CronJobDropdown } from '../../../components/CronJobDropdown';
 import { PageShow } from '../../../components/PageShow';
 import { ImageField, JobsField } from '../../../components/ShowContent/fields';
+import { useD2Translation } from '../../../i18n';
 export const CronJobShow = () => {
-    const { i18n } = useTranslation();
+    const { i18n } = useD2Translation();
     return (_jsx(PageShow, { showConfig: {
             groups: [
                 {